@charset 'utf-8';


	

	#hd .w1200 {max-width: 1200px; }

	#hd .hd_mobile-on,
	#hd .hd_480on,
	#hd .hd_1024-on {display: none;}

#hd .hd_btn{
		display: inline-block;
		padding:10px 20px;
		margin:15px 0;
		border-radius: 2px;
		background: #000000;
		font-weight: 300;
		cursor: pointer;
		position: relative;
	}
	#hd .hd_btn:before{
		content:'';
		display: block;
		width:calc(100% + 4px);
		height:calc(100% + 4px);
		border-radius: 3px;
		position: absolute;
		top: -2px;
		left: -2px;
		z-index: -1;
		text-align: center;
		background: #808080;
		background: -moz-linear-gradient(left, #808080 0%, #ffffff 12%, #808080 31%, #ffffff 77%, #808080 100%);
		background: -webkit-linear-gradient(left, #808080 0%,#ffffff 12%,#808080 31%,#ffffff 77%,#808080 100%);
		background: linear-gradient(to right, #808080 0%,#ffffff 12%,#808080 31%,#ffffff 77%,#808080 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#808080', endColorstr='#808080',GradientType=1 );
	}
	#hd .hd_btn:hover{
		background-color:rgba(0,0,0,.6);
	}


/* ---------- COMPARE -------- */
	#hd #hd_compare{
		padding:160px 0;
		background: url(/websites/global/productcustomizedTab/4763/img/bg/bg-compare.jpg) center center no-repeat;
		background-size: cover;
	}
	#hd #hd_compare .hd_table{
		width: 100%;
		border:0;
	}
	#hd #hd_compare .hd_table li > div{
		display: inline-block;
		vertical-align: top;
		font-weight: 300;
		width: calc((100% - 200px) / 2);
		padding:0 10px 5px 10px;
		margin-left: -5px;
		position: relative;
	}
	#hd #hd_compare .hd_table li > div img:first-child{
		display: inline;
		margin:0 -40px;
	}
	#hd #hd_compare .hd_table li > div:nth-child(1){
		text-align: right;
	}
	#hd #hd_compare .hd_table li > div:nth-child(2){
		width: 200px;
		text-align: center;
		color:#3fd6ff;
		margin-top: -10px;
	}
	#hd #hd_compare .hd_table li:not(:first-child) > div:nth-child(2):after{
		content:'';
		display: block;
		background: url(/websites/global/productcustomizedTab/4763/img/icon/dot.png) center top no-repeat;
		width: 100%;
		height: 50px;
		margin-top: -15px;
	}
	#hd #hd_compare .hd_table li > div:nth-child(3){
		text-align: left;
		color:#939393;
	}
	#hd_cup {
		position: absolute;
		right: 300px;
		bottom: 25px;
	}

/* ---------- SETUP ---------- */
	#hd #hd_setup{
		background: url(../img/bg/bg-settup.jpg) center top no-repeat;
		background-size: contain;
		padding:160px 0;
		position: relative;
		z-index: 2;
		background-color: #000000;
	}
	#hd #hd_setup .w1200{
		max-width: 1250px;
	}
	#hd #hd_setup img{
		margin-bottom: 40px;
	}
	#hd #hd_setup li{
		padding:0 6%;
		position: relative;
	}
	#hd #hd_setup li:after{
		content:'';
		display: block;
		width: 40px;
		height: 40px;
		background: url(../img/icon/arrowhead.png) center center no-repeat;
		background-size: contain;
		position: absolute;
		top: 100px;
		right: -5%;
	}
	#hd #hd_setup li:last-child:after{
		display: none;
	}
	#hd #hd_setup .hd_content{
		padding:0 5%;
	}
/* ---------- SIGNAL --------- */

   #hd #hd_signal{
		background-size: contain;
		padding:160px 0 0;
		position: relative;
		z-index: 2;
		background-color: #000000;
	}
    #hd #hd_signal .w1200{
		max-width: 1250px;
	}

	#hd #hd_signal .hd_container{
		width: 100%;
		max-width: none;
		min-width: 0;
		padding:0;
		margin:0;
		margin-top: 30px;
		background-color: #15171a;
	}
	#hd #hd_signal .hd_container figure{
		width: 100%;
		display: inline-block;
		margin:0;
		position: relative;
		overflow: hidden;
	}
	#hd #hd_signal .hd-bg{
		width: 100%;
		opacity: 1;
		margin-top: -80px;
	}
	#hd #hd_signal .hd-people{
		position: absolute;
		width: 100%;
		top: 0;
		top: -80px;
		left: 0;
		z-index: 2;
	}
	#hd #hd_signal .hd-firstfloor{
		position: absolute;
		width: 10%;
		padding-bottom: 27%;
		top: 73%;
		left: 48%;
		background-image: url(../img-sec3/signal_weak.png);
		background-repeat: no-repeat;
		background-size: 100%;
	}
	#hd_signal .hd-firstfloor.animated{
		-webkit-animation: firstfloor 8.45s linear infinite;
		-o-animation: firstfloor 8.45s linear infinite;
		animation: firstfloor 8.45s linear infinite;
	}
	#hd_signal .hd-secondfloor{
		position: absolute;
		width: 10%;
		padding-bottom: 27%;
		top: 74%;
		left: 50%;
		top: 43%;
		left: 3%;
		background-image: url(../img-sec3/signal_weak.png);
		background-repeat: no-repeat;
		background-size: 100%;
	}
	#hd #hd_signal .hd-secondfloor.animated{
		-webkit-animation: secondfloor 8.45s linear infinite;
		-o-animation: secondfloor 8.45s linear infinite;
		animation: secondfloor 8.45s linear infinite;
	}
	#hd #hd_signal .hd-thirdfloor{
		position: absolute;
		width: 10%;
		padding-bottom: 27%;
		top: 21%;
		left: 43%;
		background-image: url(../img-sec3/signal_weak.png);
		background-repeat: no-repeat;
		background-size: 100%;
	}
	#hd #hd_signal .hd-thirdfloor.animated{
		-webkit-animation: thirdfloor 8.45s linear infinite;
		-o-animation: thirdfloor 8.45s linear infinite;
		animation: thirdfloor 8.45s linear infinite;
	}

	#hd #hd_signal .wifilist{
		width: 40%;
		position: absolute;
		right: 1%;
		bottom: -11.5%;
	}
	#hd #hd_signal .list{
		width: 100%;
	}
	#hd #hd_signal .check{
		position: absolute;
		width: 4%;
		left: 4.5%;
		top: 47%;
	}
	#hd #hd_signal .signal{
		position: absolute;
		width: 4.5%;
		padding-bottom: 3.2%;
		right: 13%;
		background-image: url(../img-sec3/icon-wifiList-signal.svg);
		background-size: 500%;
	}
	#hd #hd_signal .col50 .signal-1{
		top: 28.7%;
		background-position: 0 0;
		-webkit-animation: signalChange 8.45s linear infinite
							,emphasize-three 8.45s linear infinite
							;
		-o-animation: signalChange 8.45s linear infinite
							,emphasize-three 8.45s linear infinite
							;
		animation: signalChange 8.45s linear infinite
							,emphasize-three 8.45s linear infinite
							;
	}
	#hd #hd_signal .col50 .signal-2{
		top: 37.7%;
		background-position: 32% 0;
		-webkit-animation: signalChange-mid 8.45s linear infinite
							,emphasize-mid 8.45s linear infinite
							;
		-o-animation: signalChange-mid 8.45s linear infinite
							,emphasize-mid 8.45s linear infinite
							;
		animation: signalChange-mid 8.45s linear infinite
							,emphasize-mid 8.45s linear infinite
							;
	}
	#hd #hd_signal .col50 .signal-3{
		top: 46.7%;
		background-position: 0 0;
		-webkit-animation: signalChange 8.45s linear infinite reverse
							,emphasize-three 8.45s 6s linear infinite reverse
							;
		-o-animation: signalChange 8.45s linear infinite reverse
							,emphasize-three 8.45s 6s linear infinite reverse
							;
		animation: signalChange 8.45s linear infinite reverse
							,emphasize-three 8.45s 6s linear infinite reverse
							;
	}

	#hd #hd_signal area{outline:none; }

	#hd #hd_signal .filter{
	  padding: 5% 10%;
      vertical-align: top;
      margin-top: -8px;
	}
	#hd #hd_signal .filter h3{/*margin-bottom: 50px; */ }
	#hd #hd_signal .filter p{padding-bottom: 0; }

/* ---------- RWD ---------- */
@media screen and (max-width: 640px){
	#hd #hd_signal .col50{
		width: 100%;
	}
}

@media screen and (max-width: 1024px) {

	#hd #hd_compare h2 + p{margin-bottom: 0;}
	#hd #hd_compare .hd_table li > div:nth-child(2){width: 140px;}
	#hd #hd_compare .hd_table li > div{width:calc((100% - 140px) / 2);}
	
@media screen and (max-width: 768px) {


	#hd #hd_compare{padding-bottom: 50px;}
	#hd #hd_compare .hd_table li{margin-bottom: 10px;}
	#hd #hd_compare .hd_table li > div:nth-child(2){
		width: 125px;
		padding:0 5px 5px;
	}
	#hd #hd_compare .hd_table li > div{
		width:calc((100% - 125px) / 2);
	}
	

	#hd #hd_setup h2.heading{
		font-size: 1.8rem;
		line-height: 2rem;
	}
	
	
	#hd #hd_setup li{
		width: 100%;
		margin-left: 0;
		margin-top: 10px;
	}
	#hd #hd_setup img{
		display: inline-block;
		vertical-align: top;
		width: 120%;
		
	}
	#hd #hd_setup .hd_content{
		display: inline-block;
		vertical-align: top;
		width: 100%;
		/*margin-left: -5px;*/
		padding-right: 0;
	}
	#hd #hd_setup li:after{
		width: 30px;
		height: 30px;
		left: 45%;
		top: 100%;
		margin-top: -7%;
		bottom: 10px;
		-webkit-transform: rotate(90deg);
		   -moz-transform: rotate(90deg);
		    -ms-transform: rotate(90deg);
		     -o-transform: rotate(90deg);
		        transform: rotate(90deg);
	}
	#hd #hd_model .hd_models li{width: 50%;}
}
@media screen and (max-width: 620px) {
	#fp-nav{display: none;}
	#hd h1.maintitle,
	#hd h2{font-size: 34px;}
	#hd h3{font-size: 22px;}
	#hd p{font-size: 16px;line-height: 1.25rem;}
	#hd #hd_kv{padding-top: 45%;}
	#hd #hd_kv h1.subtitle{font-size: 24px; line-height: 1em;}

	#hd #hd_menu .cf{width: 100%;}

	#hd #hd_about{padding-top: 50px;}
	#hd #hd_about h2 span{display: block;margin:0 auto 20px;position: relative;}
	#hd #hd_about h2{padding-left: 0;}
	#hd #hd_about img{
		max-width: none !important;
		width: 120%;
		margin-left: -10%;
	}

	#hd #hd_compare{padding-bottom: 50px;}
	#hd_cup{
		width: 35px;
		bottom: 70px;
		left: -10px;
	}
	#hd #hd_compare .hd_table li > div img:first-child{
		width: 80%;
		margin:0 -5px;
	}
	#hd #hd_compare .hd_table li{
		padding: 40px 0 30px;
		position: relative;
	}
	#hd #hd_compare .hd_table li:first-child{
		padding-bottom: 0;
	}
	#hd #hd_compare .hd_table li > div:nth-child(2){
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	#hd #hd_compare .hd_table li > div{
		width: 50%;
		font-size: 16px;
		padding:0 5px 5px 5px;
		vertical-align: middle;
	}

}