@charset 'utf-8';
@import url('https://fonts.googleapis.com/css?family=Fjalla+One|Roboto+Condensed:300,400');
@font-face {
	font-family: 'Xolonium';
	src: url('../fonts/xolonium-Regular.otf'),
		 url('../fonts/xolonium-Regular.otf') format('embedded-opentype'),
		 url("../fonts/xolonium-Regular.ttf") format("opentype"),
		 url("../fonts/xolonium-regular.eot");
	font-weight: normal;
	font-style: normal;
}
/* ---------- RESET ---------- */

	#overview #sectionOverview { /*RCD 20200414*/
		padding-top: 0;
	}
	#overview #sectionOverview img, #overview #old-sectionOverview img {
	    max-width: 100%; /*覆蓋 www.junchengjj.com/css/web/business.css */
	}
	html,
	body{
		margin: 0;
		background-color: #000;
	}
	#hd * {
		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-word;
	}
	::selection {
		background: #1d2124;
		color: #CE0000;
	}
	::-moz-selection {
		background: #1d2124;
		color: #ffffff;
	}
	#hd{
		font-family: "Roboto Condensed", "Arial", sans-serif;
		background: black;
		color: #FFF;
		font-size: 16px;
		margin: 0;
		padding: 0;
		/*background: url(../img/bg.jpg) 0 center no-repeat;*/
		background-attachment: fixed;
	}
	#hd ul,
	#hd li,
	#hd figure{margin: 0; padding: 0; }
	#hd h1,
	#hd h2,
	#hd h3,
	#hd h4,
	#hd p,
	#hd a,
	#hd li {
		font:inherit;
	}
	#hd img{
		display: block;
		height: auto;
		border:none;
		max-width: 100%;
		margin:0 auto;
	}
	#hd img.lazyLoad {
		opacity: 0;
		-webkit-transition: all .5s ease;
		-moz-transition: all .5s ease;
		-ms-transition: all .5s ease;
		-o-transition: all .5s ease;
		transition: all .5s ease;
	}
/* ---------- TXT ------------ */
	#hd h2,
	#hd h3,
	#hd h5{
		font-family: "Roboto Condensed", sans-serif;
	}
	#hd h1 {
		font-size: 3.25rem;
		line-height: 1;
		color: #ffffff;
		font-weight: 300;
		margin-bottom: 40px;
	}
	#hd h2 {
		font-size: 3rem;
		line-height: 1;
		color: #ffffff !important;
		letter-spacing: 0.5px;
		text-transform: uppercase;
		margin-bottom: 20px;
		word-break:normal;
		word-wrap: normal;
	}
	#hd h3 {
		font-size: 2.4rem;
		line-height: 1;
		color: #ffffff;
		margin-bottom: 20px;
	}
	#hd h4 {
		font-family: "Fjalla One", sans-serif;
		font-size: 24px;
		font-weight: normal;
		margin-bottom: 20px;
		line-height: 1.25;
		color: #ffffff;
	}
	#hd h5 {
		font-size: 1rem;
		font-weight: 300;
		color: #ffffff;
		margin: 5px 0 10px;
	}
	#hd p,
	#hd small,
	#hd a,
	#hd li {font-family: 'Roboto Condensed', sans-serif; }
	#hd p {
		font-size: .975rem;
		line-height: 1.75;
		font-weight: 300;
		margin-bottom:30px;
	}
	#hd b{font-weight: bold; }
	#hd small {
		font-size: 14px;
		font-weight: 300;
		letter-spacing: 0.5px;
	}
	#hd .txt-center{text-align: center; }
	#hd .txt-left{text-align: left;}
	#hd .txt-right{text-align: right;}
	#hd .txt-italic{font-style: italic; }

	#hd a.txt-link {
		display: inline;
		text-decoration: underline;
	}
	#hd a.txt-link:hover {color: white; }
	#hd .txt-cyan{
		display: inline-block;
		padding-bottom: 5px;
		color: #82FFDB;
		background: #82FFDB;
		background: -webkit-linear-gradient(left, #82FFDB, #496DD3);
		background:	   -moz-linear-gradient(left, #82FFDB, #496DD3);
		background: 	 -o-linear-gradient(left, #82FFDB, #496DD3);
		background:			linear-gradient(to right, #82FFDB, #496DD3);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	_:-ms-input-placeholder, :root #hd .txt-cyan{background: transparent !important; }
	#hd .txt-purple{
		display: inline-block;
		padding-bottom: 5px;
		color: #851fff;
		background: #851fff;
		background: -webkit-linear-gradient(left,#7600FF 0%,#C61AD6);
		background:	   -moz-linear-gradient(left,#7600FF 0%,#C61AD6);
		background: 	 -o-linear-gradient(left,#7600FF 0%,#C61AD6);
		background:			linear-gradient(to right,#7600FF 0%,#C61AD6);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	_:-ms-input-placeholder, :root #hd .txt-purple{background: transparent !important; }
	#hd .txt-red{
		display: inline-block;
		padding-bottom: 5px;
		color:#C20011;
		background-color:#C20011;
		background: -webkit-linear-gradient(right, #550003 0%,#C20011,  #550003 100%);
		background:	   -moz-linear-gradient(right, #550003 0%,#C20011,  #550003 100%);
		background: 	 -o-linear-gradient(right, #550003 0%,#C20011,  #550003 100%);
		background:			linear-gradient(to left, #550003 0%,#C20011,  #550003 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	_:-ms-input-placeholder, :root #hd .txt-red{background: transparent !important; }
	#hd .txt-normal-purple {color: #7600FF;  font-weight: 400;}
	#hd .txt-normal-blue {color: #0b5bab; font-weight: 400;}
	#hd .txt-normal-cyan {color: #10b8b0; font-weight: 400;}
	#hd .txt-normal-red{color:#C20011; font-weight: 400;}
	#hd .txt-grey{color:#646464; font-weight: 400;}

	#hd .title-cyan{text-shadow: 0 0 35px #00ffc9;}
	#hd .title-purple{text-shadow: 0 0 35px #bb00ff;}
	#hd .title-red{text-shadow: 0 0 35px #cc0c00;}
	#hd .title-blue{text-shadow: 0 0 35px #0080ff; }
/* ---------- BLOCK ---------- */
	#hd .w95{
		width: 94%;
		margin:0 auto;
	    position: relative;
	}
	#hd .hd-w800{
		max-width: 800px;
		margin-left: auto;
		margin-right: auto;
	}
	#hd .hd-w1000{
		max-width: 1000px;
		margin-left: auto;
		margin-right: auto;
	}
	#hd .hd-w1100,
	#hd .hd-w1200,
	#hd .hd-w1300,
	#hd .hd-w1400{
	    width: 90%;
	    margin: 0 auto;
	    position: relative;
	}
	#hd .hd-w1100 {max-width: 1100px; }
	#hd .hd-w1200 {max-width: 1200px; }
	#hd .hd-w1300 {max-width: 1300px; }
	#hd .hd-w1400 {max-width: 1400px; }
	#hd .hd-col20,
	#hd .hd-col25,
	#hd .hd-col33,
	#hd .hd-col30,
	#hd .hd-col40,
	#hd .hd-col45,
	#hd .hd-col50,
	#hd .hd-col55,
	#hd .hd-col60,
	#hd .hd-col65,
	#hd .hd-col70,
	#hd .hd-col75,
	#hd .hd-col80{
		display: inline-block;
		margin-left: -5px;
		vertical-align: middle;
	}
	#hd .hd-col20{width: 20%; }
	#hd .hd-col25{width: 25%; }
	#hd .hd-col30{width: 30%; }
	#hd .hd-col33{width: 33.3333%; }
	#hd .hd-col40{width: 40%; }
	#hd .hd-col45{width: 45%; }
	#hd .hd-col50{width: 50%; }
	#hd .hd-col55{width: 55%; }
	#hd .hd-col60{width: 60%; }
	#hd .hd-col65{width: 65%; }
	#hd .hd-col70{width: 70%; }
	#hd .hd-col75{width: 75%; }
	#hd .hd-col80{width: 80%; }

	#hd .ib-top{display:inline-block;vertical-align: top;}
	#hd .ib-bottom{display:inline-block;vertical-align: bottom;}

	#hd .fleft {float: left; }
	#hd .fright {float: right; }
	#hd .cf:after {content:'';display: block;clear:both; }

	#hd .hd_1023_off,
	#hd .hd_mobile_off{display: block; }
	#hd .hd_1023_on,
	#hd .hd_mobile_on{display: none; }
/* ---------- scrollUp ------- */
	#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 #8D0000;
		opacity: 0;
	}
	#scrollUp.hd-show {
		opacity: 1;
	}
	#scrollUp svg {
		display: block;
		position: absolute;
		margin: auto;
		top: 0;
		right: 0;
		bottom: 5px;
		left: 0;
		fill: #8D0000;
		-webkit-transform: rotateZ(270deg);
		-moz-transform: rotateZ(270deg);
		-ms-transform: rotateZ(270deg);
		-o-transform: rotateZ(270deg);
		transform: rotateZ(270deg);
	}
	#scrollUp:hover {
		background-color: #8D0000;
	}
	#scrollUp:hover svg {
		fill: white;
	}
/* ---------- lightbox ------- */
	#hd_lightbox {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		display: none;
		z-index: 10;
	}
	#hd .hd_filter {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .7);
	}
	#hd .hd_box {
		width: 1000px;
		height: 480px;
		background: #232323;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		padding: 35px 60px;
		box-sizing: border-box;
	}
	#hd .hd_close {
		position: absolute;
		top: 25px;
		right: 20px;
		cursor: pointer;
	}
	#hd .hd_close>span {
		display: block;
		width: 20px;
		height: 3px;
		background: #777777;
		-webkit-border-radius: 1.5px;
		-moz-border-radius: 1.5px;
		border-radius: 1.5px;
	}
	#hd .hd_close>span:first-child {
		-webkit-transform: rotateZ(45deg);
		-moz-transform: rotateZ(45deg);
		-ms-transform: rotateZ(45deg);
		-o-transform: rotateZ(45deg);
		transform: rotateZ(45deg);
	}
	#hd .hd_close>span:last-child {
		-webkit-transform: rotateZ(-45deg) translate(2px, -2px);
		-moz-transform: rotateZ(-45deg) translate(2px, -2px);
		-ms-transform: rotateZ(-45deg) translate(2px, -2px);
		-o-transform: rotateZ(-45deg) translate(2px, -2px);
		transform: rotateZ(-45deg) translate(2px, -2px);
	}
	#hd .hd_box>img {
		position: absolute;
		right: 40px;
		bottom: 60px;
	}
	#hd .hd_box iframe {
		width: 100%;
		height: 100%;
	}
	@-webkit-keyframes static{
		0% {opacity: 1}
		50%{opacity: 1}
	}
	@keyframes static{
		0% {opacity: 1}
		50%{opacity: 1}
	}
	@-webkit-keyframes breathing{
		0% {opacity: 1}
		50%{opacity: 0}
	}
	@keyframes breathing{
		0% {opacity: 1}
		50%{opacity: 0}
	}
	@-webkit-keyframes strobing{
		0% {opacity: 1}
		50%{opacity: 0}
	}
	@keyframes strobing{
		0% {opacity: 1}
		50%{opacity: 0}
	}
	@-webkit-keyframes cometStrobing{
		0% {opacity: 1}
		20%, 100%{opacity: 0}
	}
	@keyframes cometStrobing{
		0% {opacity: 1}
		20%, 100%{opacity: 0}
	}
	@-webkit-keyframes flashStrobing{
		2%, 12% {opacity: 1}
		0%, 4%, 11%, 13%, 100%{opacity: .6}
	}
	@keyframes flashStrobing{
		2%, 12% {opacity: 1}
		0%, 4%, 11%, 13%, 100%{opacity: .6}
	}
	@-webkit-keyframes music{
		0%  {opacity: 1}
		10% {opacity: .3}
		40% {opacity: 1}
		60% {opacity: .3}
		70% {opacity: 1}
		100%{opacity: .3}
	}
	@keyframes music{
		0%  {opacity: 1}
		10% {opacity: .3}
		40% {opacity: 1}
		60% {opacity: .3}
		70% {opacity: 1}
		100%{opacity: .3}
	}
	@-webkit-keyframes cycle{
		0%		{background-color: red}
		15%		{background-color: orange}
		30%		{background-color: yellow}
		45%		{background-color: #00CB07}
		60%		{background-color: #07A9FF}
		75%		{background-color: #1044FF}
		90%		{background-color: #a12fd9}
		100%	{background-color: red}
	}
	@keyframes cycle{
		0%		{background-color: red}
		15%		{background-color: orange}
		30%		{background-color: yellow}
		45%		{background-color: #00CB07}
		60%		{background-color: #07A9FF}
		75%		{background-color: #1044FF}
		90%		{background-color: #a12fd9}
		100%	{background-color: red}
	}
	@-webkit-keyframes rainbow{
		0%  	{-webkit-filter:hue-rotate(359deg);filter:hue-rotate(359deg)}
		100%	{-webkit-filter:hue-rotate(0deg);filter:hue-rotate(0deg)}
	}
	@keyframes rainbow{
		0%  	{-webkit-filter:hue-rotate(359deg);filter:hue-rotate(359deg)}
		100%	{-webkit-filter:hue-rotate(0deg);filter:hue-rotate(0deg)}
	}
	@-webkit-keyframes cpu{
		0%		{background-color: red}
		30%		{background-color: yellow}
		60%		{background-color: green}
		90%		{background-color: yellow;}
	}
	@keyframes cpu{
		0%		{background-color: red}
		30%		{background-color: yellow}
		60%		{background-color: green}
		90%		{background-color: yellow;}
	}
	@-webkit-keyframes comet{
		0%	{
			z-index: -1;
			width: 200%;
			-webkit-transform: translateX(-100%);
		}
		100%{
			z-index: -1;
			width: 200%;
			-webkit-transform: translateX(50%);
		}
	}
	@keyframes comet{
		0%	{
			z-index: -1;
			width: 200%;
			transform: translateX(-100%);
		}
		100%{
			z-index: -1;
			width: 200%;
			transform: translateX(50%);
		}
	}
	@-webkit-keyframes cometReverse{
		0%	{width: 200%; -webkit-transform: translateX(50%); }
		100%{width: 200%; -webkit-transform: translateX(-100%); }
	}
	@keyframes cometReverse{
		0%	{width: 200%; transform: translateX(50%); }
		100%{width: 200%; transform: translateX(-100%); }
	}
	@-webkit-keyframes flash{
		0%	{
			z-index: -1;
			width: 200%;
			-webkit-transform: translateX(-50%);
		}
		100%{
			z-index: -1;
			width: 200%;
			-webkit-transform: translateX(0%);
		}
	}
	@keyframes flash{
		0%	{
			z-index: -1;
			width: 200%;
			transform: translateX(-50%);
		}
		100%{
			z-index: -1;
			width: 200%;
			transform: translateX(0%);
		}
	}
	@-webkit-keyframes flashReverse{
		0%	{
			width: 200%;
			-webkit-transform: translateX(0%);
		}
		100%{
			width: 200%;
			-webkit-transform: translateX(-50%);
		}
	}
	@keyframes flashReverse{
		0%	{
			width: 200%;
			transform: translateX(0%);
		}
		100%{
			width: 200%;
			transform: translateX(-50%);
		}
	}
	@-webkit-keyframes yoyo {
		0% {-webkit-transform: translateX(-50%); }
		50% {-webkit-transform: translateX(0%); }
		100% {-webkit-transform: translateX(-50%); }
	}
	@keyframes yoyo {
		0% {transform: translateX(-50%); }
		50% {transform: translateX(0%); }
		100% {transform: translateX(-50%); }
	}
	@-webkit-keyframes yoyoStrobing {
		0% {-webkit-transform: translateX(-50%); opacity: 1;}
		50% {-webkit-transform: translateX(50%); opacity: 1;}
		60% {opacity: 1;}
		69.5%, 89% {opacity: 0;}
		90%{opacity: 1;}
		100% {-webkit-transform: translateX(-100%); opacity: 1;}
	}
	@keyframes yoyoStrobing {
		0% {transform: translateX(-50%); opacity: 1;}
		50% {transform: translateX(50%); opacity: 1;}
		60% {opacity: 1;}
		69.5%, 89% {opacity: 0;}
		90%{opacity: 1;}
		100% {transform: translateX(-100%); opacity: 1;}
	}
	@-webkit-keyframes fadeIn{
		from{opacity: 0; }
		to{opacity: 1; }
	}
	@keyframes fadeIn{
		from{opacity: 0; }
		to{opacity: 1; }
	}
/* ---------- index ---------- */
	#hd section{
		position: relative;
		overflow: hidden;
	}
	#hd .section_bg{
		width: 100%;
	}
	#hd .gray_color{
		color: #e4e4e4;
	}
	#hd .glod_color{
		color: #ba8748;
	}
	#hd .left_side{
	    position: absolute;
	    top: 50%;
	    left: 15%;
	    transform: translate(0%, -50%);
	}
	#hd .change_link{
		margin-left: 65px;
		margin-bottom: 25px;
		position: relative;
		cursor: pointer;
		color:#656565;
		border: 1px solid;
		padding: 10px 25px;
    	letter-spacing: 1.5px;
    	text-align: center;
    	background: #000000;
		background: -webkit-linear-gradient(to right, #656565, transparent , transparent ,transparent ,transparent,transparent);  
		background: linear-gradient(to right, #656565, transparent , transparent ,transparent ,transparent,transparent); 
    	-webkit-transition: all .25s ease-in;
		-moz-transition: all .25s ease-in;
		-ms-transition: all .25s ease-in;
		-o-transition: all .25s ease-in;
		transition: all .25s ease-in;
	}
	#hd .change_link:hover,
	#hd .change_link.active{
		color:#b18045;
		background: -webkit-linear-gradient(to right, #b18045, transparent , transparent ,transparent ,transparent,transparent);  
		background: linear-gradient(to right, #b18045, transparent , transparent ,transparent ,transparent,transparent); 
	}
	#hd .change_link p{
		margin-bottom: 0;
	}
	#hd .change_link ul{
		position: absolute;
	    top: 50%;
	    left: -7.5%;
		text-align: left;
		-moz-transform: translateY(-50%) skewX(-45deg);
		-webkit-transform: translateY(-50%) skewX(-45deg);
		-o-transform: translateY(-50%) skewX(-45deg);
		-ms-transform: translateY(-50%) skewX(-45deg);
		transform: translateY(-50%) skewX(-45deg);
	}
	#hd .change_link li{
		width: 20px;
    	height: 18px;
		background-color: #656565;
		margin-bottom: 3.5px;
		-webkit-transition: all .25s ease-in;
		-moz-transition: all .25s ease-in;
		-ms-transition: all .25s ease-in;
		-o-transition: all .25s ease-in;
		transition: all .25s ease-in;
	}
	#hd .change_link li:nth-child(3){
		width: 24px;
    	height: 26px;
	}
	#hd .change_link li:nth-child(2),
	#hd .change_link li:nth-child(3){
		display: inline-block;
		vertical-align: top;
		margin-bottom: 0;
	}
	#hd .change_link:hover ul,
	#hd .change_link.active ul{
		left: -9.5%;
	}
	#hd .change_link:hover li,
	#hd .change_link.active li,
	#hd .change_link:hover  li:nth-child(3),
    #hd .change_link.active  li:nth-child(3){
		background-color:#b18045;
		width: 26px;
    	height: 30px;
	}

	#hd .p_in_p .change_link{
		width: 50%;
	}

	#hd .change_img img{
		display: none;
	}
	#hd .change_img img.active{
		display: block;
		margin: 0 auto;
		width: 80%;
	}
	#hd .dis_620_on,
	#hd .dis_768_on,
	#hd .dis_1023_on{
		display: none;
	}

/* ---------- 第一區 ---------- */
	#hd .top h1 {
	    font-size: 2.8rem;
	}
	#hd .top .left_side{ /*RCD 20200404*/
	    top: 5%;
	    transform: translate(0%, 0%);
	    left: 5%;
	    width: 40%;
	}
	#hd .golden_group{
		margin-left: calc(100% - 445px);
	}
	#hd .top .golden_group{
		margin-bottom: 25px;
		margin-left: 30px;/*RCD 20200404*/
		width: 100%;/*RCD 20200404*/
	}
	#hd .motif{
		display: inline-block;
		width: 30%;
    	margin-right: 2.5%;
	}
	#hd .golden_horn{
		display: inline-block;
		width: 45%;
		min-width: 190px;
    	margin-right: 2.5%;
	}
	#hd .top .golden_horn{
	}
	#hd .golden_horn h1,
	#hd .motif h1{
		font-style: oblique;
		margin-bottom: 0;
	}
	#hd .golden_horn h1{
		font-size: 2rem;/*RCD 20200404*/
	}
	#hd .motif span{
		font-size: 2rem;
	}
	#hd .golden_horn p,
	#hd .motif p{
		position: relative;
	}
	#hd .motif p:before{
		content: '';
	    position: absolute;
	    bottom: 5px;
	    left: -12.5px;
	    border-left: 1px solid #7d7d7d;
	    height: 30px;
	}
	#hd .golden_horn p:before{
		content: '';
	    position: absolute;
	    bottom: 5px;
	    left: -39.5px;
	    background-image: url(../img/icon/dot-icon.png);
	    background-size: contain;
	    background-repeat: no-repeat;
	    height: 30px;
	    width: 37px;
	}
	#hd .golden_horn p,
	#hd .golden_horn img{
		display: inline-block;
	}
	#hd .golden_horn img{
		width: 100px;
    	margin-left: 5px;
	}

	#hd .top .right_side{
	    position: absolute;
	    /*top: 37.5%;*/
	    top: 46.5%;
	    left: 50%;
	    transform: translate(0%, -50%);
	}
	#hd .top .top_log{
		/*position: absolute;
		bottom: 0.5%;
		right: 6.5%;*/
		text-align: left;/*RCD 20200404*/
    	margin-right: 25px;
    	margin-right: -300px;/*RCD 20200413*/
	}
	#hd .top .top_log img{
		display: inline-block;
		vertical-align: middle;
		width: 215px;
	}
	#hd .top_bbg{
		position: relative;
	}


/* ---------- 第二區 ---------- */		
	#hd .mini_led figure img,
	#hd .mini_led figure p{
		display: inline-block;
		vertical-align: top;
	}
	#hd .mini_led figure img{
		padding-right: 50px;
		width: 125px;
	}
	#hd .mini_led figure p{
		width: calc(100% - 150px);
	}
	#hd .mini_led figure{
		margin-bottom: 50px;
	}
	#hd .mini_led .mini_chart{
		padding-left: 25%;
	}
	#hd .mini_led .section_bg{
		position: relative;
	}
	#hd .mini_led .section_bg,
	#hd .mini_led .right_side.hd-col45{
		z-index: 1;
	}
	#hd .mini_led .mini_gif{
		position: absolute;
	    width: 30%;
	    top: 67%;
	    left: 40%;
	    transform: translate(0%, -50%);
	    z-index: 0;
	}
	#hd .mini_led .right_side{
	    position: absolute;
	    top: 20%;
	    left: 50%;
	}
/* ---------- 第三區 ---------- */
	#hd .hdr_tech{
		padding: 100px 0;
		background-repeat: no-repeat;
    	background-size: cover; 
	}			
	#hd .hdr_tech .content{
		position: relative;
    	width: 80%;
    	z-index: 1;
    	margin: 0 auto;
    	text-align: center;
	}
	#hd .hdr_tech .change_link img{
		width: 150px;
    	padding: 5px 0;
	}
	#hd .hdr_tech .change_link:hover img.gray,
	#hd .hdr_tech .change_link img.gold,
	#hd .hdr_tech .change_link.active img.gray{
		display: none;
	}
	#hd .hdr_tech .change_link:hover img.gold,
	#hd .hdr_tech .change_link img.gray,
	#hd .hdr_tech .change_link.active img.gold{
		display: block;
	}

	#hd .hdr_tech .content > ul > li.change_link{
		display: inline-block;
		vertical-align: middle;
		width: 25%;
	}
	#hd .hdr_tech .change_img{
		position: relative;
	    width: 100%;
	    z-index: 0;
	}
	#hd .hdr_tech .change_img img.active{
		width: 100%;
		margin-top: -100px;
	}
/* ---------- 第四區 ---------- */
	#hd .video video{
		width: 100%;
	}
	#hd .center_space{
		position: absolute;
	    width: 90%;
	    top: 50%;
	    left: 50%;
		transform: translate(-50%, -50%);
		z-index: 2;
	}
	#hd .center_space .hd-col50{
		padding: 2.5%;
		vertical-align: middle;
	}
	#hd .center_space .hd-col50:nth-child(2){
		border-left: 1px solid #fff;
	}
	#hd .center_space h1{
		line-height: 1.5;
    	font-size: 3.5rem;
    	margin-bottom: 0;
	}
	#hd .center_space img{
		margin: 0 0 25px 0;
	}
	#hd .center_space p{
		margin-bottom: 50px;
	}
	#hd .center_space a{
		position: relative;
	    border: 1px solid #fff;
	    color: #fff;
	    font-size: 1.25rem;
	    padding: 15px 25px;
	    letter-spacing: 1.5px;
	    background-color: rgba(255, 255, 255, .25);
	}
	#hd .center_space a:after{
		content: '';
		position: absolute;
		left: 0;
		bottom: -7.5px;
		width: 100%;
		height: 1px;
		border-bottom: 1px solid #fff;
	}
/* ---------- 第五區 ---------- */	
	#hd .pq{
		padding: 100px 0;
		background-repeat: no-repeat;
    	background-size: cover;
    	/*background-size: 100% 100%; */
	}
	#hd .pq h1{
		margin-bottom: 40px;
	}
	#hd .pq ul li{
		display: inline-block;
		vertical-align: top;
		width: 25%;
		margin: 0 2.25%;
	}
	#hd .pq ul li img{
		margin: 0 auto;
		margin-bottom: -50px;
	}
	#hd .pq ul li p{
		margin-top: 15px;
	}
/* ---------- 第六區 ---------- */		
	#hd .air_balloon .left_side{
	    position: absolute;
	    top: 28.5%;
	    left: 15%;
	    transform: translate(-15%, -50%);
	}
	#hd .air_balloon .golden_group{
		margin-left: 0;
		position: absolute;
    	bottom: 35.5%;
    	left: 38%;
	}
	#hd .air_balloon .golden_group .golden_horn{
		display: block;
		    width: 100%;
	}
	#hd .air_balloon .golden_group h1 {
    	font-size: 2rem;
	}
	#hd .golden_group.dis_620_on{
		display: none;
	}
/* ---------- 第七區 ---------- */		
	#hd .aurora figure{
		position: absolute;
	    width: 80%;
    	top: 10%;
	    left: 50%;
	    transform: translate(-50%, -5%);
	}
	#hd .aurora figure figcaption{
		position: absolute;
	    width: 80%;
	    height: 65%;
	    top: 0;
	    left: 0;
	    right: 0;
	    margin: 0 auto;
	    text-align: center;
	}
	#hd .aurora .light_2{
		opacity: 0;
		position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    margin: 0 auto;
	}
	#hd .fadeIn{
		-webkit-animation: fadeIn ease-in .5s;
		-o-animation: fadeIn ease-in .5s;
		animation: fadeIn ease-in .5s;
		animation-fill-mode: forwards;
	}
	#hd .aurora .del_high{
		padding: 15% 10%;
		opacity: 0;
		width: 90%;
    	margin: 0 auto;
	}
	#hd .del_high .motif{
		text-align: left;
    	width: auto;
	}
	#hd .del_high .motif h1{
		margin-bottom: 0;
	}
/* ---------- 第八區 ---------- */	
	#hd .proart{
		padding: 100px 0;
		background-repeat: no-repeat;
    	background-size: cover; 
	}
	#hd .proart .change_img{
	    margin: 0 auto;
	    width: 80%;
	    position: relative;
	}
	
	#hd .proart .change_link .new_fd{
		position: absolute;
		bottom: 0;
    	left: -40px;
	}
	
	#hd .proart .change_link .new_fd > p{
		font-size: 2rem !important;
    	font-style: oblique;
    	line-height: .8;
    	margin-right: -5px;
    	-webkit-transition: all .1s ease-in;
	    -moz-transition: all .1s ease-in;
	    -ms-transition: all .1s ease-in;
	    -o-transition: all .1s ease-in;
	    transition: all .1s ease-in;
	}
	#hd .proart .change_link .new_fd > p,
	#hd .proart .change_link .new_fd > img{
		display: inline-block;
		vertical-align: bottom;
	}
	#hd .proart .change_link .new_fd > img{
		filter: grayscale(100%);
		width: 12px;
	}

	#hd .proart .change_link:hover .new_fd > p,
	#hd .proart .change_link.active .new_fd > p{
		font-size: 2.5rem !important;
	}
	#hd .proart .change_link:hover .new_fd > img,
	#hd .proart .change_link.active .new_fd > img{
		filter: grayscale(0);
	}
	
	#hd .proart .change_word{
		margin-top: 25px;
		font-size: .975rem;
		line-height: 1.75;
		font-weight: 300;
	}



	#hd .proart .change_img .switch-nav{
		width: 95%;
	    max-width: 1400px;
	    height: 110px;
	    position: absolute;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    margin: auto;
	    z-index: 5;
	    pointer-events: none;
	}
	#hd .proart .switch-nav .hd-left,
	#hd .proart .switch-nav .hd-right{
		position: absolute;
	    width: 46px;
    	height: 75px;
	    background: url(../img/icon_r.png) 0 0 no-repeat;
	    background-size: contain;
	    top: 0;
	    right: 0;
	    pointer-events: all;
	    cursor: pointer;
	    filter: grayscale(100%);
	}
	#hd .proart .switch-nav .hd-left:hover,
	#hd .proart .switch-nav .hd-right:hover{
		filter: grayscale(0);
	}
	#hd .proart .switch-nav .hd-left{
		left: 0;
	    -webkit-transform: scaleX(-1);
	    -moz-transform: scaleX(-1);
	    -ms-transform: scaleX(-1);
	    -o-transform: scaleX(-1);
	    transform: scaleX(-1);
	}
	#hd .proart .switch-nav .hd-right{

	}

	#hd .proart .top_content{
	    margin: 0 auto;
    	width: 80%;
    	text-align: center;
	}
	#hd .proart .bottom_content{
	    margin: 0 auto;
    	width: 90%;
    	text-align: center;
	}
	#hd .proart .bottom_content > ul > li.change_link{
		display: inline-block;
	    width: 19.25%;
	    padding: 10px;
	}
	#hd .proart .bottom_content > ul > li.change_link p{
		font-size:.8rem;
	}

	#hd .proart .bottom_content .change_word li{
		display: none;
	}
	#hd .proart .bottom_content .change_word li.active{
		display: block;
		font-weight: 100;
	}



/* ---------- 第九區 ---------- */	
	#hd .input_output{
		padding: 100px 0;
		background-repeat: no-repeat;
    	background-size: cover; 
	}
	#hd .input_output .top_content{
		position: relative;
    	width: 80%;
    	text-align: center;
    	margin: 0 auto;
    	z-index: 1;
	}
	#hd .input_output .change_icon{
		position: relative;
    	width: 80%;
    	text-align: center;
    	margin: 0 auto;
    	margin-top: -185px;
    	z-index: 0;
	}
	#hd .input_output .change_icon li{
		position: absolute;
		width: 26%;
	}
	#hd .input_output .change_icon li:nth-child(-n+2){
		left: 0.5%;
	}
	#hd .input_output .change_icon li:nth-child(1){
		top: 32%;
	}
	#hd .input_output .change_icon li:nth-child(2){
		bottom: 10%;
	}
	#hd .input_output .change_icon li:nth-child(n+3){
		right: 5.25%;
	}
	#hd .input_output .change_icon li:nth-child(3){
		top: 32.5%;
	}
	#hd .input_output .change_icon li:nth-child(4){
		bottom: 10%;
	}
	#hd .input_output .change_icon .io_icon img{
		filter: grayscale(100%);
	}
	#hd .input_output .change_icon .io_icon.active img{
		filter: grayscale(0%);
	}
	#hd .input_output .icon_touch{
		width: 15%;
    	display: inline-block;
    	cursor: pointer;
	}
	#hd .input_output .icon_touch p{
		margin-bottom: 0;
	}
	#hd .input_output .icon_touch.active ,
	#hd .icon_touch:hover{
		color: #ba8748;
	}
	#hd .icon_touch:hover img.default_gray,
	#hd .icon_touch img.default_gload,
	#hd .icon_touch.active img.default_gray{
		display: none;
	}
	#hd .icon_touch:hover img.default_gload,
	#hd .icon_touch.active img.default_gload{
		display: block;
	}
/* ---------- 第十區 ---------- */	
	#hd .p_in_p .content{
		position: absolute;
    	top: 5%;
	    left: 50%;
	    transform: translate(-50%, 0%);
    	width: 80%;
	}
	#hd .p_in_p .middle{
		position: absolute;
	    top: 50%;
	    left: 52.5%;
	    transform: translate(0%, -50%);
	    width: 40%;
	}
	#hd .p_in_p .middle > p{
		margin-bottom: 100px;
	}
	#hd .p_in_p .change_img{
		position: absolute;
	    top: 0;
	    left: 0;
	    /*width: 50%;*/
	    width: 46%;
	}
	#hd .p_in_p .change_img img.active{
		margin: 0;
		width: 100%;
	}
	#hd .p_in_p .middle .change_word li{
		display: none;
	}
	#hd .p_in_p .middle .change_word li.active{
		display: block;
	}
	#hd .p_in_p .middle .change_word h3{
		font-weight: 100;
	}
/* ---------- 第十一區 ---------- */
	#hd .ergonomic{
		padding : 50px 0 0;
		text-align: center;
	}
	#hd .ergonomic p{
		width: 60%;
    	margin: 0 auto;
    	margin-bottom: 50px;
	}	
	#hd .ergonomic ul li{
		display: inline-block;
		vertical-align: top;
		width: 21.5%;
		margin: 0 1.5%;

	}
	#hd .ergonomic ul li figure{
		width: 100%;
		margin: 0 auto;
		padding-bottom: 100%;
		background-position: center;
		background-repeat: no-repeat;
    	background-size: contain;
    	margin-bottom: 15px;
	}
	#hd .ergonomic ul{
		position: relative;
		z-index: 1;
		background-image: url(../img/ergonomic-design-bg.png);
		background-position: bottom;
		background-repeat: no-repeat;
	}	
	#hd .ergonomic .ego_bg{
		position: absolute;
		bottom: 0;
		z-index: 0;
	}







/* ---------- 新增影片區 ---------- */
#hd .hdr_video .content {
    position: relative;
    width: 80%;
    z-index: 1;
    margin: 0 auto;
    text-align: center;
    padding-top: 50px;
}
#hd .hdr_video .golden_group {
    max-width: 700px;
    margin: 0 auto;
}
#hd .hdr_video .golden_horn h1 {
    font-size: 3rem;
}
#hd .hdr_video .note {
    color: #777;
}

#hd .hdr_video .add-video{
    margin: 0 auto 50px auto;
}

#hd .hdr_video .add-video .rc-video-wrapper{
    width: 90vw;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
}
#hd .hdr_video .add-video .rc-video-wrapper iframe{
    width: 100%;
    height: 50.625vw;
}

#hd .hdr_video .add-video .go-video{
    max-width: 800px;
    display: block;
    margin: 0 auto;
    opacity: 0.8;
    transition: all 0.3s;
}
#hd .hdr_video .add-video .go-video:hover{
    opacity: 1;
}
#hd .hdr_video .add-video .go-video img{
    display: block;
    width: 100%;
}


/*popout*/

.video-popout-wrapper{
    background: rgba(0,0,0,0.8);
    position: fixed;
    left: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
}
.video-popout-wrapper.active{
    display: flex;
}
.video-popout-item{
    background: #000;
    width: 68vw;
    height: 38.25vw;
    margin: 0 auto;
    position: relative;
}
.video-popout-item .close{
    width: 50px;
    height: 50px;
    border-radius: 100%;
    position: absolute;
    right: -25px;
    top: -25px;
    background: #ba8748 url(../img/close-light.png) center no-repeat;
    background-size: 50%;
    cursor: pointer;
    transition: all 0.3s;
}
.video-popout-item .close:hover{
    background-color: #cd9652;
}
.video-popout-wrapper .video{
}
.video-popout-wrapper .video iframe{
    width: 100%;
    height: 38.25vw;
}



@media screen and (orientation:portrait) {
.video-popout-item{
    width: 100vw;
    height: 56.25vw;
}
.video-popout-wrapper .video iframe{
    height: 56.25vw;
}
.video-popout-item .close{
    right: 10px;
    top: -60px;
}
}


.golden_horn{
	position: relative;
}
.rc-arrow{
    background: url(../img/arrow-gold.png) center no-repeat;
    background-size: cover;
    width: 40px;
    height: 80px;
    position: absolute;
    right: 0;
    top: 0;
}
.rc-arrow.down{
    right: 40px;
    top: -20px;
    transform:rotate(180deg);
}
.rc-arrow.up{
    right: 10px;
}


@media screen and (max-width: 768px){
.rc-arrow.up{
    right: -10px;
}
}

@media screen and (max-width: 620px){
.rc-arrow.down{
    right: 30px;
}
.rc-arrow.up{
    right: 30px;
}
}

@media screen and (max-width: 350px){
.rc-arrow.down{
    right: 10px;
}
.rc-arrow.up{
    right: 10px;
}
}