@charset 'utf-8';
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Exo+2:300,400,500,600,700,800,900');
/* ---------- MAIN SETTINGS ---------- */

	html,
	body{
		margin: 0;
	}
	body.lock{
		overflow: hidden;
	}
	
	* {
		margin: 0;
		padding: 0;
		text-decoration: none;
		list-style-type: none;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
        		box-sizing: border-box;
        word-wrap: break-word;
        /* word-break: break-all; */
	}
	#hdau{
		color: #fff;
		background-color: #1A1A1A;
		font-size: 16px;
		font-weight: 400;
		font-family: "Exo 2", "Arial", sans-serif, 'century_gothic', 'Microsoft JhengHei', '微軟正黑體';
	}
	#hdau *{
		margin:0;
		padding: 0;
		color:inherit;
		font: inherit;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
				box-sizing: border-box;
	}
	#hdau html{
		font-size: 16px;
	}
	#hdau body{
		position: relative;
	}
	#hdau h2,
	#hdau h3,
	#hdau h4,
	#hdau h5,
	#hdau h6,
	#hdau p,
	#hdau a,
	#hdau small{
		color: inherit;
		letter-spacing: 0.5px;
	}
	#hdau h2 {
		font-size: 3.6em;
		font-weight: 600;
		letter-spacing: 1px;
		text-transform: capitalize;
	}
	#hdau h3 {
		font-size: 3.2em;
		font-weight: 500;
	}
	#hdau h4 {
		font-size: 2.7em;
		font-weight: 500;
	}
	#hdau h5 {
		font-size: 1.8em;
		font-weight: 500;
	}
	#hdau h6 {
		font-size: 1.5em;
		font-weight: 500;
	}
	#hdau p {
		font-size: 1em;
		font-weight: 300;
		line-height: 1.5em;
	}
	#hdau a{
		font-size: 1em;
		line-height: 1.5;
		font-weight: 400;
		display: inline-block;
		text-decoration: none;
	}

	#hdau .w900,
	#hdau .w1200,
	#hdau .w1400{
		width: 80%;
		margin: auto;
		position: relative;
	}
	#hdau .w900{
		max-width: 900px;
	}
	#hdau .w1200{
		max-width: 1200px;
	}
	#hdau .w1400{
		max-width: 1400px;
	}


	#hdau .txt-white{color:#fff;}
	#hdau .txt-red{color: #c71232;}
	#hdau .txt-gray{color:#aaa;}
	#hdau .txt-light_gray{color: #C7CFDD;}
	#hdau .title-red{text-shadow: 0 0 10px #c71232;}

	#hdau .btn{
		min-width: 120px;
		padding: 10px 25px;
		color: #fff;
		border-radius: 4px;
    	background-color: #d92f2f;
		background: linear-gradient(141deg, #830808 0%, #d92f2f 49%, #8d0a0a 100%);
		font-weight: 500;
		text-align: center;
		transition: .3s;
		cursor: pointer;
		vertical-align: middle;
	}
	#hdau .btn span{
		position: relative;
		vertical-align: middle;
		right: -5px;
		transition: 0.5s;
	}
	#hdau .btn span:after {
		content: '\00bb';
		position: relative;
		opacity: 0;
		top: -3px;
		right: -10px;
		transition: 0.5s;
		vertical-align: middle;
	}
	#hdau .btn:hover span{
		right: 0;
	}
	#hdau .btn:hover span:after {
		opacity: 1;
	}

	#hdau .bigbtn{
		display: inline-block;
		vertical-align: middle;
		width: 238px;
		height: 252px;
		background-image: url(../img/sdk/btn.png);
		background-position: center top;
		background-size: contain;
		position: relative;
		-webkit-transition: all .25s ease;
		   -moz-transition: all .25s ease;
		    -ms-transition: all .25s ease;
		     -o-transition: all .25s ease;
		        transition: all .25s ease;
	}
	#hdau .bigbtn span{
		color: #fff;
		position: relative;
		display: block;
		top: 28%;
	}
	#hdau .bigbtn img{
		position: absolute;
		top: 47%;
		left: calc(50% - 31px);
	}
	#hdau .bigbtn:hover{
		background-image: url(../img/sdk/btn-active.png);
	}


	#hdau .black_tag_btn{
		width: 100%;
		padding: 15px 10px;
		color: #fff;
    	background-color: rgba(0,0,0,.5);
		background: linear-gradient(141deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.7) 49%, rgba(0,0,0,.2) 100%);
		font-weight: 500;
		text-align: center;
		transition: .3s;
		cursor: pointer;
	}

	#hdau .hd_link{
		color:#c8d0de;
	}
	#hdau .hdau_split{
	    display: block;
	    width: 615px;
	    height: 2px;
	    margin: 20px auto 80px;
	    background: rgba(199, 207, 221, .5);
	    background: -webkit-linear-gradient(left, red, yellow, #00CB07, #07A9FF, #1044FF, #1B2F7F, #D92F7F);
	    background: -o-linear-gradient(left, red, yellow, #00CB07, #07A9FF, #1044FF, #1B2F7F, #D92F7F);
	    background: -moz-linear-gradient(left, red, yellow, #00CB07, #07A9FF, #1044FF, #1B2F7F, #D92F7F);
	    background: linear-gradient(to right, red, yellow, #00CB07, #07A9FF, #1044FF, #1B2F7F, #D92F7F);
	}
	#hdau .hdau_split-w{
	    display: block;
	    width: 190px;
	    height: 2px;
	    margin: 20px auto 40px;
	    background: rgba(199, 207, 221, .5);
	}
/* ---------- sec_simple ---------- */
	#hdau #sec_simple {
		padding:100px 0 150px;
		background-color: #222;
		background-image: url(../img/sdk/SDK_bg2.jpg);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
	#hdau #sec_simple .container{
		width: 90%;
		max-width: 1200px;
		margin:0 auto;
		text-align: center;
	}
	#hdau #sec_simple h3{
		margin: 0;
	}
	#hdau #sec_simple img{
		max-width: 350px;
	}
	#hdau #sec_simple p{
		color: #fff;
	}
	#hdau #sec_simple .hdau_split{
		margin: 20px auto 30px;
	}

/* ---------- sec_into ---------- */
	#hdau #sec_into{
		padding: 50px 0;
		position: relative;
	}
	#hdau #sec_into .title{
		text-align: center;
	}
	#hdau #sec_into .pic,
	#hdau #sec_into .text{
		display: inline-block;
		width: calc(50% - 4px);
		vertical-align: top;
	}
	#hdau #sec_into .pic_in{
		padding-bottom: 60%;
		background-size: cover;
		background-position: center;
	}
	#hdau #sec_into .text{
		padding: 0 30px;
	}
	#hdau #sec_into .text small{
		display: block;
	}
	#hdau #sec_into .text p{
		margin-bottom: 50px;
	}
	#hdau #sec_into .text small,
	#hdau #sec_into .text h5{
		margin-bottom: 15px;
	}
	#hdau #sec_into .contol{
		width: 90%;
		position: absolute;
		bottom: 30%;
		left: 5%;
	}
	#hdau #sec_into .contol img{
		cursor: pointer;
		transition: .3s;
	}
	#hdau #sec_into .contol #slider_left{
		display: block;
	}
	#hdau #sec_into .contol #slider_right{
		transform: rotate(180deg);
		position: absolute;
		right: 0;
		top: 0;
	}
	#hdau #sec_into .contol #slider_left:hover{
		transform: scale(1.1);
	}
	#hdau #sec_into .contol #slider_right:hover{
		transform: scale(1.1) rotate(180deg);
	}

/* ---------- sec_developer_kit ---------- */
	#hdau #sec_developer_kit{
		padding: 60px 0 60px;
		text-align: center;
		background-color: #222;
	}
	#hdau #sec_developer_kit p{
		margin-bottom: 30px;
	}

/* ---------- sec_game ---------- */
	#hdau #sec_game{
		/* padding: 50px 0; */
	}
	#hdau #sec_game .title{
		text-align: center;
	}
	#hdau #sec_game .item{
		width: 100%;
		margin-bottom: 50px;
		padding-bottom: 30px;
		border-bottom: 1px solid rgba(255,255,255,.2);
	}
	#hdau #sec_game .item:nth-last-child(1){
		margin-bottom: 0;
		border-bottom: none;
	}
	#hdau #sec_game .item .pic,
	#hdau #sec_game .item .text{
		display: inline-block;
		position: relative;
		vertical-align: top;
	}
	#hdau #sec_game .item .pic{
		width: calc(40% - 4px);
	}
	#hdau #sec_game .item .pic figure{
		padding-bottom: 60%;
		background-size: cover;
		background-position: center;
		position: relative;
		cursor: pointer;
		overflow: hidden;
	}
	#hdau #sec_game .item .pic figure:before{
		content: url(../img/video_icon.png);
		width: 100%;
		height: 100%;
		left: calc(50% - 68px);
		top: calc(50% - 68px);
		position: absolute;
		display: block;
		text-align: left;
	}
	#hdau #sec_game .item .pic .black_tag_btn{
		width: 100%;
		position: absolute;
		bottom: 5%;
	}
	#hdau #sec_game .item .text{
		width: calc(60% - 4px);
		padding: 0 30px;
	}
	#hdau #sec_game .item .text h5{
		margin-bottom: 15px;
	}
	#hdau #sec_game .item .text p{
		margin-bottom: 30px;
	}

	#hdau #sec_game .lightbox_info .ready .open_ready{
		margin-top: 20px;
		transform: rotate(90deg);
		transition: .3s;
		cursor: pointer;
	}
	#hdau #sec_game .lightbox_info .ready .open_ready:hover{
		transform: rotate(90deg) scale(1.1);
	}
	#hdau #sec_game .item .ready .open_ready.active{
		transform: rotate(270deg);
	}
	#hdau #sec_game .lightbox_info.ready .open_ready.active:hover{
		transform: rotate(270deg) scale(1.1);
	}
	
	#hdau #sec_game .item .ready .ready_showbox.active{
		display: block;
	}


	/* #hdau #sec_game .item .ready .product{
		width: 95%;
		margin-right: 2.5%;
		margin-left: 2.5%;
		margin-bottom: 20px;
		display: inline-block;
		vertical-align: top;
		text-align: left;
	}
	#hdau #sec_game .item .ready .product:nth-last-child(1){
		margin-bottom: 0;
	}
	#hdau #sec_game .item .ready .product p{
		width: auto;
		min-width: auto;
		margin: 0 10px;
		display: inline-block;
		text-align: left;
		color: rgba(255,255,255,.8);
	} */



	#hdau #sec_game .item:nth-child(odd) .pic{
		left: calc(60% - 30px);
	}
	#hdau #sec_game .item:nth-child(odd) .text{
		right: calc(40% + 30px);
	}


  /* section_btn_group */
  #hdau .section_btn_group {
	display: flex;
	justify-content: center;
	margin: 4% 0;
}

#hdau  .section_btn {
	margin: 0 60px ;
	cursor: pointer;
	border-bottom: 1.5px solid #1A1A1A;
	padding: 20px 0;
	color: #909090 ;
}

#hdau .section_btn:hover {
	border-bottom: 2px solid #ffffff;
	color: #ffffff ;
}

#hdau .section_btn.active {
	border-bottom: 2px solid #ffffff;
	color: #ffffff;
}
#hdau #sec_game.section,
#hdau #patch_note.section {
	display: none;
}



#hdau #sec_game.section.active
,#hdau #patch_note.section.active {
    display: block;
}


@media screen and (max-width: 768px){
	#hdau .section_btn_group {
	
		margin-bottom:8%;
	}
	
	}
	
@media screen and (max-width: 600px){
#hdau .section_btn_group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
	margin-bottom: 20px;
}
#hdau .section_btn{
	width: 90%;
	margin: 0;
}

}


/* new fix 1021  sec_game object*/
#hdau #sec_game .object_box{
	margin-bottom: 10%;
	display: flex;
	flex-wrap: wrap;
}
#hdau #sec_game .object_box .object{
	margin: 2.5%;
	width: 28%;
	border-radius: 8px;
	cursor: pointer;
}
#hdau #sec_game .object .pic{
	
}

#hdau #sec_game .object_box .pic figure{
	border-top-left-radius:4px;
	border-top-right-radius:4px;
	padding-bottom: 60%;
		background-size: cover;
		background-position: center;
		position: relative;
	
		overflow: hidden;
}

#hdau #sec_game .object_box .text{
	text-align: left;
	padding: 18px;
	background-color:#333333;

	border-bottom-left-radius:4px;
	border-bottom-right-radius:4px;
	
}

#hdau #sec_game .object_box .text .s_title{
	margin-top: 10px 0;
	
}

#hdau #sec_game .object_box .text .txt-red{
	margin-top:16px;
	margin-bottom: 6px;
	
}

#hdau #sec_game .object_box img{
	vertical-align: bottom;
	margin-left: 2px;
	
}

@media screen and (max-width: 1000px){
	#hdau #sec_game .object_box{
		justify-content: center;
	}
	#hdau #sec_game .object_box .object{
		margin: 2%;
		width: 45%;
		
	}
	
}
@media screen and (max-width: 530px){
	#hdau #sec_game .object_box{
		justify-content: center;
	}
	#hdau #sec_game .object_box .object{
		margin: 4%;
		width: 94%;
	}

	#hdau #patch_note .object_box .object{
		margin-bottom: 3%!important;
	}

}

/* new fix 1021  patch_note object*/
#hdau #patch_note .object_box{

	margin-bottom: 18% ;

}

#hdau #patch_note .object_box .object{
	background-color: #333333;
	color: #fff;
	display: flex;
	justify-content: space-between;
	padding: 16px;
	border-radius: 5px;
	cursor: pointer;
	margin: 2% 0;

}
#hdau #patch_note .object_box .object img{
	vertical-align:text-bottom;

}

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

	#hdau #patch_note .object_box .object{
		
		margin: 5% 0;
	
	}

	
#hdau #sec_game.section, #hdau #patch_note.section{

		margin-bottom: 20% ;
		margin-top: 12%;
	}
	
}






/*  1022 fix */
/* ---------- lightbox ---------- */
/* 共用 */
	#hdau .overlay{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
	#hdau .lightbox{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 998;
		background-color: rgba(0,0,0,.5);
		display: none;
		text-align: center;
	}
	#hdau .lightbox.active{
		display: block;
	}
	#hdau .lightbox .box{
		width: 62%;
		/* fix */
		/* height: 100vh; */
		background-color: #222222;
		border: #B2B2B2 1px solid;
		border-radius: 6px;
		/* padding:50px 30px 50px 70px; */
		position: relative;
		display: inline-block;
		margin: auto;
		cursor: default;
		transform: translateY(10vh);
	}
	#hdau .lightbox .boxin{
		width: 100%;
		/* height: 100%; */
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		 padding-top: 75px;
		padding-bottom: 10px; 
		/* 新增換行 */
	}

	
	#hdau .lightbox .boxin_scroll{
		/* max-height: calc(80vh - 120px); */
		max-height: calc(78vh - 0px);
		/* padding: 20px; */
		overflow: auto;
		/* padding: 0px 4px; */
		width: 96%;
	}
   .lightbox ::-webkit-scrollbar {
        width: 3px;
        height: 0;
        background: #7a7a7a60;
    }

    /* Handle */
	.lightbox ::-webkit-scrollbar-thumb {
        background: #D6D6D6;
        margin-right: 20px;
    }

    /* Handle on hover */
	.lightbox ::-webkit-scrollbar-thumb:hover {
        background: #507d9d;
    }

	#hdau .lightbox .box p{
		margin-bottom: 15px;
		letter-spacing: 1px;
	}
	#hdau .lightbox .box_close{
		position: absolute;
		/* width: 25px;
		height: 25px; */
		top: 40px;
		right: 46px;
		cursor: pointer;
	}
	#hdau .lightbox .box_close:before,
	#hdau .lightbox .box_close:after{
		content: '';
		width: 28px;
		height: 2px;
		background-color: #D6D6D6;
		position: absolute;
		/* top: 50%;
		right: 26px; */
		transition: .3s;
	}
	#hdau .lightbox .box_close:before{
		/* top: 50%; */
		transform: rotate(45deg);
	}
	#hdau .lightbox .box_close:after{
		/* top: 50%; */
		transform: rotate(-45deg);
	}



	/* 遊戲畫面 */
	#hdau .lightbox .yt-box {
		width: 96%;
		/* width: 90%; */
		display: flex;
    flex-wrap: wrap;
		margin: 0 auto;
		position: relative;
	}

	#hdau .lightbox #select_pic{
		display: flex;
		width:100%;
		justify-content: space-between;
		margin: auto;
		margin-top:18px;
	
		
	}

	#hdau .lightbox #select_pic .item{
	width: 100%;
	}

	#hdau .lightbox #select_pic figure{
	width: 100%;
    padding-bottom: 60%;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    cursor: pointer;
	}

	#hdau .lightbox #show_pic{
	width: 100%;
	}

	#hdau .lightbox #show_pic .item{	
		width: 100%;
		}

		#hdau .lightbox #show_pic .item_pic figure{	
			width: 100%;
			padding-bottom: 56.25%;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			}
	#hdau .lightbox .yt-container {
		width: 100%;
		position: relative;
		padding-bottom: 56.25%;
		height: 0;
		overflow: hidden;
	}

	#hdau  .lightbox .left {
        height: 100%;
        width:3.2%;
        cursor: pointer;
        position: absolute;
        z-index: 2;
		top: 0;
		background-color: #000;
		opacity: 0.7;

	}
	#hdau  .lightbox .to_left {
		top: 50%;
		left: 25%;
		position: absolute;
		z-index: 3;
		width:16px ;
		
		
	}
	#hdau  .lightbox .left:focus{
		outline: 0px ;
		
	}

	#hdau  .lightbox .right:focus{
		outline:  0px  ;
	}


	#hdau  .lightbox .right {
        height: 100%;
        width: 3.2%;
        cursor: pointer;
        position: absolute;
        z-index: 2;
        top: 0;
		right: 0;
		background-color: #000;
		opacity: 0.7;

}

#hdau  .lightbox .to_right {
	top: 50%;
	right: 25%;
	position: absolute;
	z-index: 6;
	width:16px ;
	
}

/* /// lightbox_info 遊戲內容// */

#hdau .lightbox .lightbox_info  {
padding: 30px;
}

#hdau .lightbox .lightbox_info  .text{
	margin-top:2%;
	margin-bottom:7%;
text-align:left;
}


#hdau .lightbox .lightbox_info  .text ul li{
margin: 4px 0;
	}

#hdau .lightbox .lightbox_info  .text ul li::before{
content: "・";
display: inline-block;
vertical-align: top;
margin-right: 5px;
}
#hdau .lightbox .lightbox_info  .text ul li span{
	display: inline-block;
	width:90%;

	}
#hdau .lightbox .lightbox_info  .text h5{
	margin-bottom:20px;
}
#hdau .lightbox .lightbox_info  .text h6{
	margin-bottom:20px;
}

/* Ready表格排版 */
#hdau .lightbox .lightbox_info .ready{
	text-align: left;
}
#hdau .lightbox .lightbox_info .ready .s_title{
	width: calc(32% - 4px);
		margin-right: calc(1.3333% / 2);
		margin-left: calc(1.3333% / 2);
		margin-bottom: 15px;
		display: inline-block;
		vertical-align: top;
		text-align: left;
	
}
#hdau .lightbox .lightbox_info .ready h5{
    margin-bottom: 20px;
}
#hdau .lightbox .lightbox_info .ready h6{
    margin-bottom: 20px;
}


#hdau  .lightbox_info .ready .product p.title{
	/* width: 100%; */
	/* margin: auto; */
	margin-bottom: 5px;
	display: block;
	font-weight: bold;
	color: rgba(255,255,255,.9);
}

#hdau  .lightbox_info .ready{
	margin-top: 30px;
	text-align: left;
}

#hdau  #lightbox .lightbox_info .ready .product{
	width: calc(32% - 4px);
		/* margin-right: calc(1.3333% / 2); */
		/* margin-left: calc(1.3333% / 2); */
		margin-bottom: 15px;
		display: inline-block;
		vertical-align: top;
		text-align: left;
}

#hdau .lightbox_info .ready .product p{
	display: inline-block;
	min-width: calc(50% - 19px);
	margin-right: 10px;
	text-align: left;
	color: rgba(255,255,255,.8);
}

#hdau  .lightbox_info .ready .product p.title{
	/* width: 100%; */
	/* margin: auto; */
	margin-bottom: 5px;
	display: block;
	font-weight: bold;
	color: rgba(255,255,255,.9);
}

	#hdau #sec_game .lightbox_info .ready .product{
		width: calc(33% - 0px);
		/* margin-right: calc(1.3333% / 2);
		margin-left: calc(1.3333% / 2); */
		margin-bottom: 15px;
		display: inline-block;
		vertical-align: top;
		text-align: left;
	}
	#hdau #sec_game .lightbox_info .ready .product p{
		display: inline-block;
		min-width: calc(50% - 19px);
		margin-right: 15px;
		text-align: left;
		color: rgba(255,255,255,.8);
	}


/* 遊戲畫面結束 */


/* Note */

#hdau #note_lightbox .boxin_scroll{
text-align: left;
}

#hdau #note_lightbox .title{
	margin-bottom: 50px;
}

#hdau #note_lightbox .boxin_scroll{
	padding: 0px 20px;
}

#hdau #note_lightbox .boxin_scroll .article.active{
display: block;
}

#hdau #note_lightbox .boxin_scroll .article {
	display:none;
	}
	





/* LIGHTBOX                       RWD */
	@media screen and (max-width: 1023px){


		#hdau .lightbox .box_close{
			position: absolute;
			width: 25px;
			height: 25px;
			top: 32px;
			right: 26px;
			top: 30px;
   
			cursor: pointer;
		}


		#hdau .lightbox .lightbox_info .text{
			text-align: left;
		}
		#hdau .lightbox .box{
			width: 90%;
			height: auto;
			transform: translateY(20vh);
		}
	/* Y軸bar整體的高度為70vh並要扣除上下的60px */
	#hdau .lightbox .boxin_scroll{
     max-height: calc(70vh - 120px);
    padding: 20px;
    overflow: auto
		}
		
#hdau .lightbox .boxin{
	padding-top:60px ;
	padding-bottom:30px ;

}

#hdau .lightbox .lightbox_info{
	padding: 20px 4px;
}
	#hdau .lightbox .lightbox_info .ready{
		text-align: left;
	}
	#hdau #lightbox  .lightbox_info .ready .product{
		width: 100%;
		/* margin-left: 0; */
		text-align: left;
	}
	#hdau #lightbox   .lightbox_info .ready .product p.title{
		width: 100%;
		margin-left: 0;
		text-align: left;
	}
	#hdau #note_lightbox .title{
		margin-bottom: 30px;
	}
	


}

@media screen and (max-width: 768px)
{
	#hdau .lightbox .boxin_scroll{
		padding: 0px;
			max-height: calc(79vh - 120px);
	}
	
#hdau .lightbox .yt-box{
	width: 98%;

}
#hdau .lightbox .left,#hdau .lightbox .right{
	display: none;
}

}

	#hdau .lightbox .yt-container iframe, 
	#hdau .lightbox .yt-container object, 
	#hdau .lightbox .yt-container embed {
		position: absolute;
		top: 0;left: 0;
		width: 100%;
		height: 100%;
	}


	#hdau .owl-nav{
		display: none;
	}
/* ---------- END MAIN SETTINGS ---------- */

/*------------------NAV-------------------*/
nav{
	height: 55px;
	width: 100%;
	background: #232323;
	position: fixed;
	overflow: hidden;
	z-index: 9;
	font-family: "Arial", sans-serif, 'century_gothic', 'Microsoft JhengHei', '微軟正黑體';
}

nav .hdau_container{
	width: 95%;
	margin:0 auto;
}
nav .nav_content{
	float:right;
}
.mobile_on{
	display: none;
}
#hdau_logo,
.hdau_share{
	display: inline-block;
	vertical-align: middle;
	margin-top: 4px;
}

#hdau_logo{
	background: url(../img/Asus-logo.png) 0 0 no-repeat;
	background-size: contain;
	width: 100px;
	height: 40px;
	margin-left:50px;
}
.hdau_share{
	margin: 2px 20px 0;
}
.hdau_share li{
	display: inline-block;
	margin:0 5px;
}
.hdau_share img{
	width: 20px;
	height: 20px;
}

nav ul.hdau_menu{
	display: inline-block;
	vertical-align: middle;
	height: 55px;
	text-align: right;
	line-height: 55px;
}
nav .hdau_menu li{
	display: inline-block;
	width: auto;
	margin: 0 20px;
	text-align: center;
}

nav .hdau_menu a{
	font-family: 'Exo 2', sans-serif, 'cwtexhei', sans-serif;
	text-transform: uppercase;
	font-size: 1rem;
	display: inline-block;
	padding: 0 0 10px 0;
	box-sizing: border-box;
	text-align: center;
	color: #C7CFDD;
	position: relative;
	vertical-align: middle;
	line-height: initial;
}
nav .hdau_menu a:hover,
nav .hdau_active a{
	color:white;
}

nav .hdau_menu .hdau_active a:after{
	content:"";
	display: block;
	width: 100%;
	height: 2px;
	background: white;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
}
/*------------------END NAV-------------------*/
/*------------------FOOTER-------------------*/
#hdau footer{
	background: #232323;
	font-family: "Arial", sans-serif, 'century_gothic', 'Microsoft JhengHei', '微軟正黑體';
}
#hdau footer .hdau_container{
	width: 1200px;
	margin:0 auto 0;
	padding: 20px 0 100px;
	box-sizing: content-box;
	display: block;
}
#hdau footer select{
	padding: 3px 4px;
	color: #959595;
	border: 1px solid #474747;
	font-size: 12px;
	background: #313131 url(../img/icon/icon-arrow.png) no-repeat 99% 8px;
	background-size: 13px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	float: left;
	width: 190px;
	height: 24px;
	margin: 8px 6px;
	text-transform: uppercase;
}
#hdau footer select:focus{
	outline:none;
}
#hdau footer .hdau_sub_nav{
	float: right;
}
#hdau footer .hdau_sub_nav:after{
	content:"";
	display: block;
	clear:both;
}
#hdau footer .hdau_sub_nav{
	text-align: center;
}
#hdau footer .hdau_sub_nav li{
	display: inline-block;
}
#hdau footer .hdau_sub_nav li a{
	font-size: .9em;
	font-weight: 300;
	padding:0 15px 0 10px;
	position: relative;
	color:#C1C9D7;
}
#hdau footer .hdau_sub_nav li a:after{
	content: "";
	display: block;
	height: 70%;
	width: 1px;
	background-color: white;
	position: absolute;
	top: 3px;
	right: 1px;
}
#hdau footer .hdau_sub_nav li a:hover{
	color:white;
}
#hdau footer .hdau_sub_nav li p{
	font-size: .9em;
	margin-left: 10px;
	color:#C1C9D7;
}
/*------------------END FOOTER-------------------*/


/* ---------- RWD ---------- */
	@media screen and (max-width: 1440px){}
	@media screen and (max-width: 1366px){
		#hdau #lightbox .lightbox_info .ready .product{
			width: 95%;
			margin-right: 2.5%;
			/* margin-left: 2.5%; */
			margin-bottom: 20px;
			text-align: left;
		}
		#hdau #lightbox .lightbox_info .ready .product:nth-last-child(1){
			margin-bottom: 0;
		}
		#hdau #lightbox .lightbox_info .ready .product p{
			width: auto;
			min-width: auto;
			/* margin: 0 10px; */
			margin: 0;
			margin-right: 10px;
		}
	}
	@media screen and (max-width: 1280px){

	}
	@media screen and (max-width: 1024px){}
	@media screen and (max-width: 1023px){
		#hdau h2 {
			font-size: 2.8em;
		}

		#hdau .w1200{
			width: 90%;
		}

		#hdau #sec_into{
			text-align: center;
		}
		#hdau #sec_into .itembox{
			width: 80%;
			display: inline-block;
		}
		#hdau #sec_into .item{
			display: inline-block;
			text-align: left;
		}
		#hdau #sec_into .pic,
		#hdau #sec_into .text{
			width: 100%;
		}
		#hdau #sec_into .text{
			padding: 30px 0;
		}


		#hdau #sec_game .w1200{
			text-align: center;
		}
		#hdau #sec_game .item{
			display: inline-block;
			width: 80%;
			text-align: left;
		}
		#hdau #sec_game .item .pic{
			width: 100%;
		}
		#hdau #sec_game .item .text{
			width: 100%;
			padding: 30px 0;
		}
		#hdau #sec_game .item:nth-child(odd) .pic{
			left: 0;
		}
		#hdau #sec_game .item:nth-child(odd) .text{
			right: 0;
		}
		#hdau #sec_game .item .btn{
			display: block;
		}
		
	}
	@media screen and (max-width: 768px){
		#hdau h4 {
			font-size: 2.2em;
		}
		#hdau h5 {
			font-size: 1.5em;
		}
		#hdau h6 {
			font-size: 1.2em;
		}
		#hdau p {
			font-size: .9em;
			line-height: 1.3em;
		}
	    #hdau .hdau_split{
	        width: 90%;
	        margin: 10px auto 40px;
	    }


		#hdau #sec_simple img{
			max-width: 250px;
		}
		#hdau #sec_simple .left{
			text-align: center;
		}
		#hdau #sec_simple .right{
			padding-left: 20px;
		}


		#hdau #sec_into .item{
			text-align: center;
		}


		#hdau #sec_game .item{
			text-align: center;
		}


		#hdau .lightbox .box{
			width: 90%;
			/* height: 100vh; */
			transform: translateY(20vh);
		}
	}
	@media screen and (max-width: 600px){
		#hdau #sec_into .itembox{
			width: 90%;
		}
		#hdau #sec_into .contol #slider_left{
			transform: scale(.7);
			margin-left: -15px;
			display: block;
		}
		#hdau #sec_into .contol #slider_right{
			transform: scale(.7) rotate(180deg);
			margin-right: -15px;
		}
		#hdau #sec_into .contol #slider_left:hover{
			transform: scale(.85);
		}
		#hdau #sec_into .contol #slider_right:hover{
			transform: scale(.85) rotate(180deg);
		}



		#hdau #sec_game .item{
			width: 90%;
		}
	} 
	@media screen and (max-width: 480px) {
		#hdau .btn{
			font-size: .9em;
		}
	}
	@media screen and (max-width: 350px) {
		#hdau .btn{
			font-size: .8em;
		}
	}
/* ---------- END RWD ---------- */