@charset 'utf-8';
@import url('https://fonts.googleapis.com/earlyaccess/notosanstc.css');
/* ---------- RESET ---------- */
	html,
	body{
		margin: 0;
	}
	#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: #c4c3e2;
		color: #fff;
	}
	::-moz-selection {
		background: #c4c3e2;
		color: #fff;
	}
	#hd{
		font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif, cursive;
		background: black;
		color: #666;
		font-size: 16px;
		margin: 0;
		padding: 0;
		background-attachment: fixed;
		background-color: #fff;
	}
	#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% !important;
		margin:0 auto;
	}
/* ---------- TXT ------------ */
	#hd h1,
	#hd h2,
	#hd h3,
	#hd h4,
	#hd h5,
	#hd h6,
	#hd a,
	#hd p,
	#hd b,
	#hd small{
		font:inherit;
		color:inherit;
	}
	#hd h1,
	#hd h2,
	#hd h3,
	#hd h4,
	#hd h5,
	#hd h6{
		font-weight: 500;
		letter-spacing: .08em;
	}
	#hd h1{
		font-size: 2.2em;
		line-height: 1.4em;
		font-weight: 400;
	}
	#hd h1 span{
		font-weight: 600;
	}
	#hd h2{
		position: relative;
		font-size: 2.3em;
		text-transform:uppercase;
		padding-bottom: 30px;
		line-height: 1.4em;
	}
	#hd h3{
		font-size: 1.25em;
		padding-bottom: 8px;
		line-height: 1.2em;
	}
	#hd h5{
		margin-bottom: 0;
	}
	#hd h6{
		font-size: 1.2em;
	}
	#hd a,
	#hd p,
	#hd b,
	#hd small,
	#hd li{
		font-weight: 400;
		letter-spacing: .1em;
	}
	#hd p,
	#hd li {
		font-size: 1em;
		font-weight: 400;
		line-height: 1.7em;
		margin: 0;
		color: #888;
	}
	#hd small {
		font-size: .9em; 
		color: #999;
		line-height: 1.6em;
		font-weight: 300;
		letter-spacing: .08em;
	}
	/*ie11 above fixed*/
	_:-ms-fullscreen,
	:root #hd .txt-gradient{
	    background: transparent !important;
	}
	#hd .txt-bold{
		font-weight: 500;
	}
	#hd .txt-heavy{
		font-weight: 600;
	}
	#hd .txt-center {
		text-align: center; 
	}
	#hd .txt-left {
		text-align: left; 
	}
/* ---------- BLOCK ---------- */
	#hd .w90 {
		width: 90%;
		margin: 0 auto;
		position: relative;
	}
	#hd .w1920 {
		max-width: 1920px;
		margin: 0 auto;
		overflow: hidden;
	}
	#hd .w1200,
	#hd .w1000{
		width: 90%;
		margin: 0 auto;
		position: relative;
	}
	#hd .w1000 {
		max-width: 1000px; 
	}
	#hd .w1200 {
		max-width: 1200px; 
	}
	.col90,
	.col80,
	.col75,
	.col70,
	.col66,
	.col60,
	.col50,
	.col55,
	.col45,
	.col40,
	.col35,
	.col33,
	.col30,
	.col25,
	.col20,
	.col166,
	.col15,
	.col05{
		display: inline-block;
		vertical-align: top;
		margin-left: -5px;
	}
	.col90, .f90{
		width: 90%;
	}
	.col80, .f80{
		width: 80%;
	}
	.col75, .f75{
		width: 75%;
	}
	.col70, .f70{
		width: 70%;
	}
	.col66, .f66{
		width: 66.6666%;
	}
	.col60, .f60{
		width: 60%;
	}
	.col55, .f55{
		width: 55%;
	}
	.col50, .f50{
		width: 50%;
	}
	.col45, .f45{
		width: 45%;
	}
	.col40, .f40{
		width: 40%;
	}
	.col35, .f35{
		width: 35%;
	}
	.col30, .f30{
		width: 30%;
	}
	.col33, .f33{
		width: 33.3333%;
	}
	.col25, .f25{
		width: 25%;
	}
	.col20, .f20{
		width: 20%;
	}
	.col166, .f16{
		width: 16.6666667%;
	}
	.col15, .f15{
		width: 15%;
	}
	.flex-nowrap{
		display: flex;
		flex-wrap: nowrap;
	}
	.flex-wrap{
		display: flex;
		flex-wrap: wrap;
	}
	.fleft{
		display: block;
		float:left;
		margin-left: 0;
	}
	.fright{
		display: block;
		float: right;
		margin-left: 0;
	}
	.cf:after{
		content:'';
		display: table;
		clear:both;
	}
    .block{
    	display: block;
    	width: 100%;
    }
    .inline-block{
    	display: inline-block;
    }
	#hd .ib-top{
		vertical-align: top;
	}
	#hd .ib-bottom{
		vertical-align: bottom;
	}
	#hd .hd_mobile-on,
	#hd .hd_480on,
	#hd .hd_620on,
	#hd .hd_1024-on {
		display: none;
	}

/*----------- COLOR -----------*/
	#hd .color-primary{
		color: #8588c5;
	}
	#hd .color-primary-light{
		color: #c4c3e2;
	}
	#hd .color-primary-dark{
		color: #6c6ab4;
	}
	#hd .color-grey {
		color: #888;
	}
	#hd .color-white {
		color: #fff;
	}
	#hd .color-black {
		color: #666;
	}
	#hd .gradient45d{
		background: linear-gradient(135deg, #a90400 20%, #d21a1a 50%, #a90400 80%); 
		background: -moz-linear-gradient(135deg, #a90400 20%, #d21a1a 50%, #a90400 80%); 
		background: -webkit-linear-gradient(135deg, #a90400 20%, #d21a1a 50%, #a90400 80%); 
		background: -o-linear-gradient(135deg, #a90400 20%, #d21a1a 50%, #a90400 80%); 
	}
/* ---------- fp-nav --------- */
	#fp-nav{
		display: none;
	}
	#fp-nav ul li {
		text-align: center;
	}
	#fp-nav ul li a span,
	#fp-nav ul li:hover a span {
		width: 6px;
		height: 6px;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
	#fp-nav ul li.active a span,
	#fp-nav ul li.active:hover a span,
	#fp-nav ul li.active:hover a span {
		top: 0;
		left: 0;
		right: 0;
		height: 13px;
		width: 13px;
		margin: auto;
		background-color: #f51301;
	}
	#fp-nav ul li:hover a span {
		background-color: #f51301;
	}
	#fp-nav ul li .fp-tooltip {
		color: #f51301;
	}
	#fp-nav ul li.active .fp-tooltip {
		top: 5px;
	}	
/* ---------- scrollUp ------- */
	#hd #scrollUp {
		float: left;
		position: fixed;
		right: 25px;
		bottom: 40px;
		z-index: 17;
		width: 45px;
		height: 45px;
		border-radius: 26px;
		cursor: pointer;
		z-index: 999;
		opacity: 0;
		border: 2px solid #6c6ab4;
		-webkit-transition: all .25s ease;
		   -moz-transition: all .25s ease;
		    -ms-transition: all .25s ease;
		     -o-transition: all .25s ease;
		        transition: all .25s ease;
	}
	#hd #scrollUp.hd-show {
		opacity: 1;
	}
	#scrollUp svg {
	    display: block;
	    position: absolute;
	    margin: auto;
	    top: 0;
	    right: 0;
	    bottom: 5px;
	    left: 0;
	    fill: #6c6ab4;
	    -webkit-transform: rotateZ(270deg);
	    -moz-transform: rotateZ(270deg);
	    -ms-transform: rotateZ(270deg);
	    -o-transform: rotateZ(270deg);
	    transform: rotateZ(270deg);
	}
	#scrollUp:hover svg {
	    fill: white;
	}
	#hd #scrollUp:hover,
	#hd #scrollUp:active {
		background-color: #8588c5;
	}
/* ---------- talk slider -----*/
	#hd .talk_slider .item{
		background-size: cover;
		background-repeat: no-repeat;
	}
	#hd .talk_slider .owl-dots{
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		text-align: center;
		padding-bottom: 25px;
	}	
	#hd .talk_slider .owl-dot{
		width: 13px;
		height: 13px;
		border-radius: 50%;
		display: inline-block;
		background-color: #fff;
		margin: 0 7px;
		opacity: .5;
		box-shadow: 1px 1px 4px rgba(0,0,0,.3);
	}
	#hd .talk_slider .owl-dot.active{
		opacity: 1;
	}
	#hd .talk_slider .owl-prev,
	#hd .talk_slider .owl-next{
		position: absolute;
		width: 50px;
		height: 50px;
		top: 0;
		bottom: 0;
		margin: auto 0;
		background-size: cover;
		background-position: center;
	}
	#hd .talk_slider .owl-prev{
		left: 1.5%;
		background-image: url(../img/arrow_left.png);
	}
	#hd .talk_slider .owl-next{
		right: 1.5%;
		background-image: url(../img/arrow_right.png);
	}
	#hd ul.bubble_list li{
		padding-bottom: 35px;
		opacity: 0;
	}
	#hd ul.bubble_list li.bubble_q p{
		background-color: #8588c5;
		color: #fff;
		padding: 11px 20px;
		border-radius: 23px;
		display: inline-block;
	}
	#hd ul.bubble_list li.bubble_a span{
		display: block;
		width: 50px;
		height: 50px;
		background-image: url(../img/cloud-icon.png);
		background-size: cover;
		background-position: center;
		float: left;
	}
	#hd ul.bubble_list li.bubble_a .txt{
		float: left;
		width: calc(100% - 50px);
		padding-left: 12px;
	}
	#hd ul.bubble_list li.bubble_a .txt p{
		position: relative;
		display: inline-block;
		color: #666;
		padding: 11px 20px;
		border-radius: 23px;
		z-index: 3;
		background: -webkit-linear-gradient(left,#7fc6fb,#95f0e7);
	    background: -o-linear-gradient(right,#7fc6fb,#95f0e7);
	    background: -moz-linear-gradient(right,#7fc6fb,#95f0e7);
	    background: linear-gradient(to right,#7fc6fb,#95f0e7);
	    transition-duration: .5s;
	}
	#hd ul.bubble_list li.bubble_a .txt p:before{
		content: "";
	    position: absolute;
	    border-radius: 23px;
	    width: calc(100% - 2px);
	    height: calc(100% - 2px);
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    margin: auto;
	    background: #fff;
	    z-index: -1;
	}
	#hd .talk_slider .active ul.bubble_list.active li.bubble_q{
		-webkit-animation: bubble_item .4s .6s forwards;
		-o-animation: bubble_item .4s .6s forwards;
		animation: bubble_item .4s .6s forwards;
		transform-origin:0% 40%;
	}
	#hd .talk_slider .active ul.bubble_list.active li.bubble_a{
		-webkit-animation: bubble_item .4s 1.3s forwards;
		-o-animation: bubble_item .4s 1.3s forwards;
		animation: bubble_item .4s 1.3s forwards;
		transform-origin: 100% 40%;
	}
/* ---------- 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: 90%;
		max-width: 1200px;
		height: 90%;
		background: #fff;
		position: absolute;
		top: 0;right: 0;bottom: 0;left: 0;
		margin:auto;
		box-sizing: border-box;
	}
	#hd .hd_close{
		position: absolute;
		top: 15px;right: 10px;
		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_product,
	#hd .hd_info{
		display: inline-block;
		vertical-align: middle;
	}
	#hd .hd_info{
		margin-left: 6.25%;
		width: 50%;
		min-width: 150px;			
	}
	#hd .hd_list{
		max-height: 186px;
		margin:30px 0 50px;
	}
	#hd .hd_list li{
		padding-top: 8px;
	}
	#hd .hd_num{
		display: inline-block;
		font-family: "Segoe UI", "Hind Siliguri", "Microsoft JhengHei", "Arial";
		text-align: center;
		font-size: 0.75rem;
		line-height: 19px;
		width: 19px;
		height: 19px;
		border:1px solid #999999;
		color:white;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		vertical-align: top;
	}
	#hd .hd_num ~p{
		display: inline-block;
		font-size: 0.875rem;
		margin:5px 15px;
		vertical-align: top;
		box-sizing: border-box;
		text-align: left;
		width: calc(100% - 51px);
		line-height: 8px;
	}

	#hd .hd_box > img{
		position: absolute;
		right: 40px;
		bottom: 60px;
	}

	#hd .hd_box iframe{
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		width: 90%;
		height: 90%;
	}	
/*----------- specificationsBtn*/
	#hd .specificationsBtn{
		position: relative;
		display: inline-block;
		border: 0;
		background-color: #fff;
		padding: 10px 0;
		vertical-align: middle;
		font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif, cursive;
	}
	#hd .specificationsBtn > p{
		background-color: #8588c5;
		color: #fff;
		padding: 5px 12px;
		font-size: 1.05em;
		border: 0;
		border-radius: 5px;
		margin-left: 7px;
		cursor: pointer;
		box-shadow: 1px 1px 3px rgba(0,0,0,.5);
		border: 1px solid #575a94;
		animation: specificationsBtn 2s infinite;
	}
	@keyframes specificationsBtn{
		0%{
			-moz-transform:scale(.95);
			-webkit-transform:scale(.95);
			-o-transform:scale(.95);
			-ms-transform:scale(.95);
			transform:scale(.95);
		}
		50%{
			-moz-transform:scale(1);
			-webkit-transform:scale(1);
			-o-transform:scale(1);
			-ms-transform:scale(1);
			transform:scale(1);
		}
		100% {
			-moz-transform:scale(.95);
			-webkit-transform:scale(.95);
			-o-transform:scale(.95);
			-ms-transform:scale(.95);
			transform:scale(.95);
		}
	}
	#hd .specificationsBtn ul{
		position: absolute;
		width: 220px;
		background-color: #fff;
		border: 1px solid #8588c5;
		top: 100%;
		right: 0;
		display: none;
		border-radius: 5px;
	}
	#hd .specificationsBtn:hover ul{
		display: flex;
	}
	#hd .specificationsBtn li{
		width: 50%;
	}
	#hd .specificationsBtn li:first-child{
		border-right: 1px solid #c6c7ec;
	}
	#hd #detail_aiot .specificationsBtn small,
	#hd #detail_aiot .specificationsBtn p{
		margin-top: 0;
		font-weight: 400;
		font-size: 1em;
	}
	#hd #detail_aiot .specificationsBtn small{
		color: #888;
		padding: 0 3px;
		padding: 5px 0;
	}
	#hd #detail_aiot .specificationsBtn ul p{
		border-bottom: 1px solid #8588c5;
		padding: 5px 0;
		background-color: #8588c5;
		color: #fff;
	}


/*----------- kv -----------------*/
	#hd #kv{
		background-color: #efefef;
	}
	#hd #kv .w1200{
		padding: 170px 0;
	}
	#hd #kv .titleImg{
		margin-left: 0;
		margin-bottom: 10px;
	}
	#hd #kv .pdBox{
		position: absolute;
		width: 62%;
		bottom: 0;
		right: -5%;
	}
	#hd #kv img.circle{
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
		opacity: 0;
	}
	#hd #kv img.circle01{
		animation: kv_circle01 2s infinite linear;
	}
	#hd #kv img.circle02{
		animation: kv_circle02 2s infinite linear;
	}
	#hd #kv img.circle03{
		animation: kv_circle03 2s infinite linear;
	}
	#hd .watchVideo{
		position: relative;
		background-color: transparent;
		color: #fff;
		display: inline-block;
		margin-top: 20px;
		padding: 8px 50px 8px 30px;
		font-size: 1.2em;
		cursor: pointer;
		border: 1px solid #8588c5;
		color: #6c6ab4;
		border-radius: 30px;
		vertical-align: middle;
		-webkit-transition: all .25s ease;
		   -moz-transition: all .25s ease;
		    -ms-transition: all .25s ease;
		     -o-transition: all .25s ease;
		        transition: all .25s ease;
	}
	#hd .watchVideo:after{
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		right: 10px;
		margin: auto 0;
		width: 35px;
		height: 35px;
		vertical-align: middle;
		background-image: url(../img/icon-play.png);
		background-position: center;
		background-size: cover;
	}
	#hd .watchVideo:hover{
		background-color: #8588c5;
		color: #fff;
	}
	#hd .watchVideo:hover:after{
		background-image: url(../img/icon-play2.png);
	}
/*----------- sliderBanner -------*/
	#hd #sliderBanner{
		position: relative;
	}
	#hd #sliderBanner .item{
		position: relative;
		width: 100%;
		height: 0;
		padding-top: 43%;
		background-size: cover;
		background-position: center bottom;
	}
	#hd #sliderBanner img.pd{
		position: absolute;
		width: 17%;
		bottom: 2%;
		left: 25%;
		z-index: 2;
	}
	#hd #sliderBanner ul.bubble_list{
		position: absolute;
		top: 28%;
		left: 43%;
		width: 50%;
		max-width: 480px;
	}
/*----------- assistant ----------*/
	#hd #assistant{
		padding: 80px 0 30px;
		background-image: linear-gradient(to right, #efefef, #efefef);
	    background-size: 100% 80%;
	    background-repeat: no-repeat;
	    background-position: center top;
	}
	#hd .assistant_slider{
		padding: 40px 0 10px;
		min-height: 170px;
	}
	#hd .assistant_slider .owl-stage{
		padding: 20px 0;
	}
	#hd .assistant_slider .item{
		padding: 0 15px;
		opacity: .56;
	}
	#hd .assistant_slider .owl-item.center .item{
		opacity: 1;
		padding: 0 46px;
		-moz-transform:scale(1.3);
		-webkit-transform:scale(1.3);
		-o-transform:scale(1.3);
		-ms-transform:scale(1.3);
		transform:scale(1.3);
	}
	#hd .assistant_slider .owl-item .item{
		-webkit-transition: all .25s ease;
		   -moz-transition: all .25s ease;
		    -ms-transition: all .25s ease;
		     -o-transition: all .25s ease;
		        transition: all .25s ease;
	}
	#hd .assistant_slider p{
		background-color: #8588c5;
		color: #fff;
		padding: 12px 10px;
		text-align: center;
		border-radius: 25px;
	}
	#hd #assistant .pd{
		max-width: 270px !important;
	}
/*----------- cloud --------------*/
	#hd #cloud .col45{
		vertical-align: middle;
	}
	#hd #cloud .col55{
		vertical-align: middle;
		position: relative;
		width: 75%;
		height: 0;
		padding-top: 75%;
		margin-left: 10%;
		margin-right: -36%;
		z-index: 1;
	}
	#hd #cloud .col55:after{
		content: "";
		position: absolute;
		width: 40%;
	    height: 100%;
	    right: 0;
	    top: 0;
	    background: -webkit-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 60%,rgba(255,255,255,1) 100%);
	    background: -o-linear-gradient(right,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 60%,rgba(255,255,255,1) 100%);
	    background: -moz-linear-gradient(right,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 60%,rgba(255,255,255,1) 100%);
	    background: linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 60%,rgba(255,255,255,1) 100%);
	}
	#hd #cloud img.cloudPhoto{
		position: absolute;
		width: 30%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
	#hd #cloud .s-circle{
		position: absolute;
		width: 66%;
		height: 66%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		background-image: url(../img/cloud/bg-circle.png);
		background-position: center;
		background-size: 80% 80%;
		background-repeat: no-repeat;
		z-index: 2;
	}
	#hd #cloud .s-circle figure{
		position: absolute;
		width: 26%;
		height: 26%;
		border-radius: 50%;
		background-size: 100% 300%;
	    background-position: center 100%;
	    background-image: linear-gradient( -45deg,#7fc6fb 0%, #95f0e7 33%, #7fc6fb 66%, #95f0e7 100%);
	    background-image: linear-gradient( -45deg,#7fc6fb 0%, #95f0e7 33%, #7fc6fb 66%, #95f0e7 100%);
	    background-image: linear-gradient( -45deg,#7fc6fb 0%, #95f0e7 33%, #7fc6fb 66%, #95f0e7 100%);
	    background-image: linear-gradient( -45deg,#7fc6fb 0%, #95f0e7 33%, #7fc6fb 66%, #95f0e7 100%);

	}
	#hd #cloud .s-circle figure.active{
		background-position: center 0;
		-webkit-transition: all 0.8s ease;
		   -moz-transition: all 0.8s ease;
		    -ms-transition: all 0.8s ease;
		     -o-transition: all 0.8s ease;
		        transition: all 0.8s ease;
		        transition-delay: .3s;
	}
	#hd #cloud .s-circle figure:nth-child(1){
		left: 0;
		right: 0;
		margin: 0 auto;
		top: 0;
	}
	#hd #cloud .s-circle figure:nth-child(2){
		left: 5%;
		top: 56%;
	}
	#hd #cloud .s-circle figure:nth-child(3){
		right: 5%;
		top: 56%
	}
	#hd #cloud .s-circle figure img{
		position: absolute;
		display: block;
		width: 94%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		opacity: 0;
	}
	#hd #cloud .s-circle figure.active img{
		opacity: 1;
		-webkit-transition: all .8s ease;
		   -moz-transition: all .8s ease;
		    -ms-transition: all .8s ease;
		     -o-transition: all .8s ease;
		        transition: all .8s ease;
		        transition-delay: .3s;
	}
	#hd #cloud .s-circle figure p{
		position: absolute;
		width: 100%;
		top: 105%;
		left: 0;
		text-align: center;
	}
	#hd #cloud .b-circle{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		background-image: url(../img/cloud/bg-circle.png);
		background-position: center;
		background-size: 90% 90%;
		background-repeat: no-repeat;
	}
	#hd #cloud .b-circle.active{
		animation: turning 80s 1.5s infinite linear;
	}
	#hd #cloud .b-circle .item{
		position: absolute;
		width: 9.6%;
	}
	#hd #cloud .b-circle.active .item{
		animation: turning 80s 1.5s infinite reverse linear;
	}
	#hd #cloud .b-circle .item:nth-child(1){
		top: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
	#hd #cloud .b-circle .item:nth-child(2){
		top: 7%;
		left: 22%;
	}
	#hd #cloud .b-circle .item:nth-child(3){
		top: 23%;
		left: 7%;
	}
	#hd #cloud .b-circle .item:nth-child(4){
		top: 0;
		left: 0;
		bottom: 0;
		margin: auto 0;
	}
	#hd #cloud .b-circle .item:nth-child(5){
		bottom: 21%;
		left: 7%;
	}
	#hd #cloud .b-circle .item:nth-child(6){
		bottom: 5%;
		left: 22%;
	}
	#hd #cloud .b-circle .item:nth-child(7){
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
	#hd #cloud .b-circle .item:nth-child(8){
		bottom: 5%;
		right: 22%;
	}
	#hd #cloud .b-circle .item:nth-child(9){
		bottom: 21%;
		right: 7%;
	}
	#hd #cloud .b-circle .item:nth-child(10){
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto 0;
	}
	#hd #cloud .b-circle .item:nth-child(11){
		top: 23%;
		right: 7%;
	}
	#hd #cloud .b-circle .item:nth-child(12){
		top: 7%;
		right: 22%;
	}
/*----------- sound --------------*/
	#hd #sound{
		padding: 50px 0 80px;
	    background-image: linear-gradient(to right, #efefef, #efefef);
	    background-size: 100% 46%;
	    background-repeat: no-repeat;
	    background-position: center bottom;
	}
	#hd #sound .title{
		max-width: 545px;
		margin: 0 auto 40px;
	}
	#hd #sound .title p{
		position: relative;
		padding-left: 14px;
	}
	#hd #sound .title p:before{
		content: "";
		position: absolute;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background-color: #666;
		left: 0;
		top: 10px;
	}
	#hd #sound ul.pd{
		position: relative;
		width: 26%;
		padding-top: 37%;
		margin: 0 auto;
	}
	#hd #sound ul.pd > li{
		position: absolute;
		width: 100%;
		top: 0;
	}
	#hd #sound ul.pd > li.pd01{
		opacity: 1;
	}
	#hd #sound ul.pd > li.pd02{
		opacity: 0;
	}
	#hd #sound ul.pd.active > li.pd01{
		animation: soundPd01 12s infinite linear;
	}
	#hd #sound ul.pd.active > li.pd02{
		animation: soundPd02 12s infinite linear;
	}
	#hd #sound ul.pd figure{
		position: relative;
	}
	#hd #sound ul.pd img{
		width: 100%;
	}
	#hd #sound ul.pd img.cover{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
	#hd #sound ul.pd img.lighting{
		animation: lighting 3s infinite linear;
	}
	#hd #sound ul.pd h6{
		position: absolute;
		left: 90%;
		top: 45%;
		width: 280px;
		font-size: 1.6em;
	}
/*----------- detail -------------*/
	#hd ul.detailIcon_list{
		margin: 50px 0 40px;
	}
	#hd ul.detailIcon_list li{
		display: inline-block;
		padding: 0 5px;
		vertical-align: top;
		width: 20%;
		max-width: 130px;
	}
	#hd ul.detailIcon_list a{
		cursor: pointer;
	}
	#hd ul.detailIcon_list a p{
		font-size: 13px;
		margin-top: 5px;
	}
	#hd ul.detailIcon_list a img{
		opacity: .5;
		-webkit-transition: all .25s ease;
		   -moz-transition: all .25s ease;
		    -ms-transition: all .25s ease;
		     -o-transition: all .25s ease;
		        transition: all .25s ease;
	}
	#hd ul.detailIcon_list li.active a img{
		opacity: 1;
		animation: detailImg 1.8s infinite ease;
	}
	#hd ul.detailText_list li{
		display: none;
	}
	#hd ul.detailText_list li.active{
		display: block;
	}
	#hd ul.detailText_list p{
		display: inline-block;
		border-left: 5px solid #aaa;
		padding-left: 10px;
	}
/*----------- detail_localization-*/
	#hd #detail_localization .talk_slider .item{
		position: relative;
		width: 100%;
		height: 0;
		padding-top: 80%;
		background-position: center;
	}
	#hd #detail_localization ul.bubble_list{
		position: absolute;
		width: 80%;
		top: 15%;
		left: 10%;
		z-index: 2;
	}
	#hd #detail_localization .txtBox{
		padding: 10% 20px 20px;
	}
	#hd #detail_localization ul.detailIcon_list li{
		max-width: 100px;
	}
	#hd #detail_localization .talk_slider .item:before {
	    content: "";
	    position: absolute;
	    width: 30%;
	    height: 100%;
	    left: -2px;
	    top: 0;
	    background: -webkit-linear-gradient(left,rgba(255,255,255,1),rgba(255,255,255,0));
	    background: -o-linear-gradient(right,rgba(255,255,255,1),rgba(255,255,255,0));
	    background: -moz-linear-gradient(right,rgba(255,255,255,1),rgba(255,255,255,0));
	    background: linear-gradient(to right,rgba(255,255,255,1),rgba(255,255,255,0));
	    z-index: 2;
	}
	#hd #detail_localization .detailText_list{
		max-width: 450px;
		margin: 0 auto;
	}
/*----------- detail_life---------*/
	#hd #detail_life .f45{
		order: 2;
	}
	#hd #detail_life .f55{
		order: 1;
	}
	#hd #detail_life .talk_slider .item{
		position: relative;
		width: 100%;
		height: 0;
		padding-top: 80%;
		background-position: center;
	}
	#hd #detail_life ul.bubble_list{
		position: absolute;
		width: 70%;
		top: 11%;
		left: 20%;
		z-index: 2;
	}
	#hd #detail_life .life03 ul.bubble_list{
		width: 70%;
		top: auto;
		bottom: 10%;
		left: auto;
		right: 20%;
		max-width: 320px;
	}
	#hd #detail_life .txtBox{
		padding: 10% 20px 20px;
	}
	#hd #detail_life .txtBox > p{
		max-width: 450px;
		margin: 0 auto;
	}
	#hd #detail_life ul.detailIcon_list li{
		max-width: 100px;
	}
	#hd #detail_life .talk_slider .item:before {
	    content: "";
	    position: absolute;
	    width: 30%;
	    height: 100%;
	    right: 0;
	    top: 0;
	    background: -webkit-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1));
	    background: -o-linear-gradient(right,rgba(255,255,255,0),rgba(255,255,255,1));
	    background: -moz-linear-gradient(right,rgba(255,255,255,0),rgba(255,255,255,1));
	    background: linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,1));
	    z-index: 2;
	}
	#hd #detail_life .detailText_list{
		max-width: 460px;
		margin: 0 auto;
	}
/*----------- detail_personalise--*/
	#hd #detail_personalise .w1200{
		padding: 60px 0 20px;
	}
	#hd #detail_personalise .talk_slider .item{
		position: relative;
		width: 100%;
		height: 0;
		padding-top: 40%;
	}
	#hd #detail_personalise .talk_slider .item:before{
		content: "";
		position: absolute;
		width: 100%;
		height: 25%;
		top: 0;
		left: 0;
		background: -webkit-linear-gradient(rgba(255,255,255,1),rgba(255,255,255,0));
		background: -o-linear-gradient(rgba(255,255,255,1),rgba(255,255,255,0));
		background: -moz-linear-gradient(rgba(255,255,255,1),rgba(255,255,255,0));
		background: linear-gradient(rgba(255,255,255,1),rgba(255,255,255,0));
	}
	#hd #detail_personalise .talk_slider .item:nth-child(1){
		background-position: right center;
	}
	#hd #detail_personalise .talk_slider .item:nth-child(2),
	#hd #detail_personalise .talk_slider .item:nth-child(3){
		background-position: center;
	}
	#hd #detail_personalise ul.bubble_list{
		position: absolute;
		width: 90%;
		top: 32%;
		left: 0;
		right: 0;
		margin: 0 auto;
		max-width: 360px;
	}
/*----------- detail_customized --*/
	#hd #detail_customized .talk_slider .item{
		position: relative;
		width: 100%;
		height: 0;
		padding-top: 80%;
		background-position: center;
	}
	#hd #detail_customized .talk_slider .item:before{
		content: "";
		position: absolute;
		width: 30%;
		height: 100%;
		left: -2px;
		top: 0;
		background: -webkit-linear-gradient(left,rgba(108,106,180,1),rgba(108,106,180,0));
		background: -o-linear-gradient(right,rgba(108,106,180,1),rgba(108,106,180,0));
		background: -moz-linear-gradient(right,rgba(108,106,180,1),rgba(108,106,180,0));
		background: linear-gradient(to right,rgba(108,106,180,1),rgba(108,106,180,0));
	}
	#hd #detail_customized ul.bubble_list{
		position: absolute;
		width: 90%;
		top: 35%;
		left: 0;
		right: 0;
		margin: 0 auto;
		max-width: 360px;
	}
	#hd #detail_customized .txtBox{
		background-color: #6c6ab4;
		color: #fff;
		padding: 10% 20px 20px;
	}
	#hd #detail_customized .txtBox > p{
		max-width: 500px;
		margin: 0 auto;
	}
	#hd #detail_customized .txtBox .kind{
		margin: 40px 0 30px;
	}
	#hd #detail_customized .txtBox .kind li{
		font-size: 1.2em;
		font-weight: 500;
		letter-spacing: .1em;
		color: #fff;
	}
	#hd #detail_customized .txtBox .mailLink{
		border-left: 5px solid #fff;
		padding-left: 10px;
		font-size: 1.2em;
		-webkit-transition: all .25s ease;
		   -moz-transition: all .25s ease;
		    -ms-transition: all .25s ease;
		     -o-transition: all .25s ease;
		        transition: all .25s ease;
	}
	#hd #detail_customized .txtBox .mailLink:hover{
		font-size: 1.23em;
	}
	#hd #detail_customized .txtBox .mailLink span{
		color: #95f0e7;
	}
/*------------detail_aiot---------*/
	#hd #detail_aiot .f45{
		order: 2;
	}
	#hd #detail_aiot .f55{
		order: 1;
	}
	#hd #detail_aiot .talk_slider .item{
		position: relative;
		width: 100%;
		height: 0;
		padding-top: 80%;
		background-position: center;
	}
	#hd #detail_aiot ul.bubble_list{
		position: absolute;
		width: 70%;
		top: 13%;
		left: 40%;
		z-index: 2;
	}
	#hd #detail_aiot .aiot02 ul.bubble_list{
		left: 25%;
	}
	#hd #detail_aiot .aiot03 ul.bubble_list{
		top: 50%;
		left: 40%;
		width: 55%;
	}
	#hd #detail_aiot .txtBox{
		padding: 12% 20px 20px;
	}
	#hd #detail_aiot .txtBox > p{
		max-width: 490px;
		margin: 0 auto;
	}
	#hd #detail_aiot ul.detailIcon_list li{
		max-width: 100px;
	}
	#hd #detail_aiot .talk_slider .item:before {
	    content: "";
	    position: absolute;
	    width: 30%;
	    height: 100%;
	    right: 0;
	    top: 0;
	    background: -webkit-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1));
	    background: -o-linear-gradient(right,rgba(255,255,255,0),rgba(255,255,255,1));
	    background: -moz-linear-gradient(right,rgba(255,255,255,0),rgba(255,255,255,1));
	    background: linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,1));
	    z-index: 2;
	}
	#hd #detail_aiot .detailText_list{
		max-width: 460px;
		margin: 0 auto;
	}
	#hd #detail_aiot small{
		display: block;
		font-weight: 400;
		margin-top: 80px;
	}
/*----------- skill --------------*/
	#hd #skill{
		background-color: #efefef;
		padding: 100px 0 150px;
	}
	#hd #skill .w1000{
		max-width: 1070px;
	}
	#hd #skill ul.skill_list{
		margin-top: 50px;
		text-align: left;
	}
	#hd #skill ul.skill_list > li{
		border-bottom: 1px solid #ddd;
		padding: 10px 0;
	}
	#hd #skill h6{
		width: 100px;
		padding-top: 42px;
		font-weight: 400;
	}
	#hd #skill ul.item_list{
		width: calc(100% - 100px);
	}
	#hd #skill ul.item_list > li{
		display: inline-block;
		text-align: center;
		width: calc(100% / 8);
		margin-left: -5px;
		min-width: 90px;
		padding: 8px 5px;
		vertical-align: top;
	}
	#hd #skill ul.item_list > li p{
		font-size: 12px;
		margin-top: 5px;
	}
	#hd #skill ul.item_list > li img{
		max-width: 65px !important;
	}
	#hd #skill .star{
		display: inline-block;
		margin: 0 3px 3px 3px;
	}

/*----------- ANIMATIONS ----- */
	@keyframes kv_circle01{
		10%{opacity: 0;}
		30%{opacity: 1;}
		85% {opacity: 1;}
		100%{opacity: 0;}
	}
	@-webkit-keyframes kv_circle01{
		10%{opacity: 0;}
		30%{opacity: 1;}
		85%{opacity: 1;}
		100%{opacity: 0;}
	}

	@keyframes kv_circle02{
		30%{opacity: 0;}
		50%{opacity: 1;}
		85% {opacity: 1;}
		100%{opacity: 0;}
	}
	@-webkit-keyframes kv_circle02{
		30%{opacity: 0;}
		50%{opacity: 1;}
		85%{opacity: 1;}
		100%{opacity: 0;}
	}	

	@keyframes kv_circle03{
		50%{opacity: 0;}
		70%{opacity: 1;}
		85%{opacity: 1;}
		100%{opacity: 0;}
	}
	@-webkit-keyframes kv_circle03{
		50%{opacity: 0;}
		70%{opacity: 1;}
		85%{opacity: 1;}
		100%{opacity: 0;}
	}

	@-webkit-keyframes bubble_item{
		from{
			opacity: 0;
			-webkit-transform: translateY(12%) scale(0.8);
		}
		to  {
			opacity: 1;
			-webkit-transform: translateY(0) scale(1);
		}
	}
	@keyframes bubble_item{
		from{
			opacity: 0;
			   -moz-transform: translateY(12%) scale(0.8);
				-ms-transform: translateY(12%) scale(0.8);
				 -o-transform: translateY(12%) scale(0.8);
					transform: translateY(12%) scale(0.8);
		}
		to  {
			opacity: 1;
			   -moz-transform: translateY(0)  scale(1);
				-ms-transform: translateY(0)  scale(1);
				 -o-transform: translateY(0)  scale(1);
					transform: translateY(0)  scale(1);
		}
	}

	@keyframes lighting{
		0%{opacity: 0;}
		45%{opacity: 1;}
		55%{opacity: 1;}
		100%{opacity: 0;}
	}
	@-webkit-keyframes lighting{
		0%{opacity: 0;}
		45%{opacity: 1;}
		55%{opacity: 1;}
		100%{opacity: 0;}
	}

	@keyframes soundPd01{
		0%{opacity: 1;}
		45%{opacity: 1;}
		50%{opacity: 0;}
		95%{opacity: 0;}
		100%{opacity: 1;}
	}
	@-webkit-keyframes soundPd01{
		0%{opacity: 1;}
		45%{opacity: 1;}
		50%{opacity: 0;}
		95%{opacity: 0;}
		100%{opacity: 1;}
	}
	@keyframes soundPd02{
		0%{opacity: 0;}
		45%{opacity: 0;}
		50%{opacity: 1;}
		95%{opacity: 1;}
		100%{opacity: 0;}
	}
	@-webkit-keyframes soundPd02{
		0%{opacity: 0;}
		45%{opacity: 0;}
		50%{opacity: 1;}
		95%{opacity: 1;}
		100%{opacity: 0;}
	}

	@keyframes turning {
		0%	{transform: rotateZ(0deg);}
		100%{transform: rotateZ(-360deg);}
	}
	@-webkit-keyframes turning{
		0%	{transform: rotateZ(0deg);}
		100%{transform: rotateZ(-360deg);}
	}

	@keyframes detailImg{
		0%{
			-moz-transform: scale(1);
			 -ms-transform: scale(1);
			  -o-transform: scale(1);
				 transform: scale(1);
		}
		50%{
			-moz-transform: scale(1.1);
			 -ms-transform: scale(1.1);
			  -o-transform: scale(1.1);
				 transform: scale(1.1);
		}
		100%{
			-moz-transform: scale(1);
			 -ms-transform: scale(1);
			  -o-transform: scale(1);
				 transform: scale(1);
		}
	}
	@-webkit-keyframes detailImg{
		0%{
			-moz-transform: scale(1);
			 -ms-transform: scale(1);
			  -o-transform: scale(1);
				 transform: scale(1);
		}
		50%{
			-moz-transform: scale(1.1);
			 -ms-transform: scale(1.1);
			  -o-transform: scale(1.1);
				 transform: scale(1.1);
		}
		100%{
			-moz-transform: scale(1);
			 -ms-transform: scale(1);
			  -o-transform: scale(1);
				 transform: scale(1);
		}
	}