@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Lato:100,400,900); /* font */
@import url(https://fonts.googleapis.com/css?family=Monda:400,700); /* font */

/* CSS Document */
body, html { height:100%; }
body {
	font-family: 'Lato', '微軟正黑體', sans-serif; /*自行增減使用 */
	font-size: 16px;
	line-height:1.5;
	color: #333;
}
a { color:#000; text-decoration: none; }
a:hover { color:#777; 
    -o-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    transition:  all .3s linear; /*連結淡入淡出*/
}

/*---------------------- 基礎設定 ----------------------*/
/*反白設定*/
::selection { background: #666; color: #FFF; }
::-moz-selection { background: #666; color: #FFF; }


/*歡迎頁*/
.index_bg a,
.index_bg .logo,
.index_bg .object,
.index_bg .earth_map,
.index_bg .earth_map .map,
.index_bg .language_family,
.index_bg .language_family .language,
.index_bg .line_box .line.line_rotate + .line{
	-webkit-transition: all .5s cubic-bezier(0.165, 0.84, 0.44, 1);
	-moz-transition: all .5s cubic-bezier(0.165, 0.84, 0.44, 1);
	-o-transition: all .5s cubic-bezier(0.165, 0.84, 0.44, 1);
	-ms-transition: all .5s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all .5s cubic-bezier(0.165, 0.84, 0.44, 1);	
}
.index_bg{position:  relative;height: 100%;height: 100%; overflow: hidden; }
.index_bg .bg{position:  absolute;z-index: -1;left: 0;top: 0;height: 100%;width: 100%;background: url(../images/index/index_bg.png)no-repeat center bottom/cover;/* overflow: hidden; */transition:all 0.2s ease-in-out;}

.index_bg img{max-width: 100%}
.index_bg .logo{}
.index_bg .object{
	position: absolute;
	z-index: 1;
	width: 567px;
	height: 916px;
	left: 10%;
	bottom: 0;
	-webkit-transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
	-moz-transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
	-o-transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
	-ms-transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.index_bg .object .win_main,.index_bg .object .win_obj{}
.index_bg .object .win_main{
    position:  absolute;
    z-index: 1;
    bottom: 0;
    max-height: 100%;
}
.index_bg .object .win_obj{
	position: absolute;
	top: 0;
	left: 0;
	transform: rotate(0);
	transform-origin: 65.2% 52.4%;
	animation-name: rotateZ;
	animation-duration: 15s;
	animation-timing-function:linear;
	animation-iteration-count: infinite;
	/*animation-direction:alternate; */
}
@-o-keyframes rotateZ{
	from { transform: rotateZ(0); }
	to { transform: rotateZ(-360deg); }
}
@-webkit-keyframes rotateZ{
	from { transform: rotateZ(0); }
	to { transform: rotateZ(-360deg); }
}
@-moz-keyframes rotateZ{
	from { transform: rotateZ(0); }
	to { transform: rotateZ(-360deg); }
}
@keyframes rotateZ {
	from { transform: rotateZ(0); }
	to { transform: rotateZ(-360deg); }
}

.index_bg .top{
    padding: 10px;
}
.index_bg .logo{max-height: 100%;width: 300px;}
.index_bg .earth_map{
	position: relative;
	margin:  auto;
	width: 700px;
	height: 800px;
}
.index_bg .earth_map .map{position:  absolute;max-height: 100%;left: 50%;top: calc(50% + 30px);-ms-transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}
.index_bg a{text-decoration:none}
.index_bg .language_family{}
.index_bg .language_family .language{position: absolute;z-index:  2;transform-origin:left center;}
.index_bg .language_family .language.en{right: -30px;top: 115px;}
.index_bg .language_family .language.sc{left: calc(100% - 40px);top: 240px;}
.index_bg .language_family .language.tc{left: calc(100% - 15px);top: 393px;}
.index_bg .language_family .lan_name{color: #fff;margin-left: 280px;margin-bottom: 70px;width: 120px;}
.index_bg .line_box{
    position: absolute;
    top: 100%;
}
.index_bg .line_box .line{/* float: left; */width: 150px;height: 1px;background: #fff;box-shadow: 0 0 3px #fff;}
.index_bg .line_box .line.line_rotate{
	transform: rotate(-30deg);
	transform-origin:left center;
}
.index_bg .line_box .line.line_rotate + .line{position:relative;margin-top: -76px;margin-left: 130px;}
.index_bg .line_box .line.line_rotate + .line:after{
	content:'';
	position:absolute;
	bottom:100%;
	right: 0;
	width:50px;
	height:50px;
	background: url('../images/all/icon_wain.png')no-repeat center;
	background-size:  contain;
	opacity: .3;
	-webkit-transition: all 0.7s ease-in-out;
	-moz-transition: all 0.7s ease-in-out;
	-o-transition: all 0.7s ease-in-out;
	-ms-transition: all 0.7s ease-in-out;
	transition: all 0.7s ease-in-out;
}
.index_bg a:hover .lan_name{text-shadow:0 0 10px #fff}
.index_bg a:hover .line_box .line.line_rotate + .line:after{opacity:1}
@media (max-width: 1630px) { 
	/*歡迎頁*/
	.index_bg .object{width: 400px;height: 633px;}
	.index_bg .logo{width: 250px;}
	.index_bg .earth_map{
		width: 600px;
		height: 700px;
		margin-left: 300px;
	}
	.index_bg .language_family .language.en{right: -50px;top: 125px;}
	.index_bg .language_family .language.sc{left: calc(100% - 30px);top: 225px;}
	.index_bg .language_family .language.tc{top: 363px;}
	.index_bg .language_family .lan_name{margin-left: 250px;margin-bottom: 35px;}
	.index_bg .line_box .line{width: 100px;}
	.index_bg .line_box .line.line_rotate + .line{
	    width: 150px;
	    margin-top: -51px;
	    margin-left: 86px;
	}
}
@media (max-width: 1550px) { 
	/*歡迎頁*/
	.index_bg .object{/* bottom: -80px; */}
}
@media (max-width: 1280px) { 
	/*歡迎頁*/	
	.index_bg .object{left: 0;}
	.index_bg .object .win_main,.index_bg .object .win_obj{max-height: 100%;}
	.index_bg .logo{width: 250px;}
	.index_bg .earth_map{margin-left: 200px;}
	.index_bg .language_family .language.en{right: 17%;top: 105px;}
	.index_bg .language_family .language.sc{top: 207px;}
	.index_bg .language_family .language.tc{top: 343px;}
	.index_bg .language_family .lan_name{margin-left: 100px;margin-bottom: 55px;}
	.index_bg .line_box .line{width: 100px;}
	.index_bg .line_box .line.line_rotate + .line{width: 190px;}
	.index_bg .line_box .line.line_rotate + .line:after{opacity:1}
}

@media (max-width: 1050px) { 
	/*歡迎頁*/
	.index_bg .earth_map{margin-left: 100px;}
}

@media (max-width: 996px) { 
	/*歡迎頁*/
	.index_bg .object{width: 309px;height: 500px;}
	.index_bg .logo{width: 250px;}
	.index_bg .earth_map{margin-left: 20px;width: 550px;height: 650px;}
	.index_bg .language_family .language.en{right: 21%;top: 117px;}
	.index_bg .language_family .language.sc{top: 211px;}
	.index_bg .language_family .language.tc{top: 335px;}
	.index_bg .language_family .lan_name{margin-left: 60px;margin-bottom: 30px;}
	.index_bg .line_box .line{width: 50px;}
	.index_bg .line_box .line.line_rotate + .line{margin-top: -26px;margin-left: 43px;}
}

@media (max-width: 768px) { 
	/*歡迎頁*/
	.index_bg .top{position: relative;z-index: 2;padding:10px;}
	.index_bg .earth_map{margin-left: -50px;}
	.index_bg .earth_map .map{
	    -ms-transform: translate(-50%,-50%);
	    -webkit-transform: translate(-50%,-50%);
	    transform: translate(-50%,-50%);
	}
}

@media (max-width: 720px) { 
	/*歡迎頁*/
	.index_bg .earth_map{margin-left: -160px;}
}
@media (max-width: 640px) { 


}
@media (max-width: 580px) { 
	/*歡迎頁*/
	.index_bg .object {
		width: 250px;
		height: 404px;
	}
	.index_bg .language_family .language{text-shadow: 0 0 30px #072146, 0 0 5px #14396d;}
	.index_bg .language_family .language.en{right: 30%;top: 117px;}
	.index_bg .language_family .language.sc{left: calc(100% - 150px);top: 0;}
	.index_bg .language_family .language.tc{left: calc(100% - 110px);}
}
@media (max-width: 480px) { 
	/*歡迎頁*/
	.index_bg .language_family .language.en{right: 30%;top: 117px;}
	.index_bg .language_family .language.sc{left: calc(100% - 200px);top: 0;}
	.index_bg .language_family .language.tc{left: calc(100% - 200px);}
}

@media (max-width: 420px) { 
	/*歡迎頁*/
	.index_bg .logo{width: 200px;}
	.index_bg .language_family .language.en{right: 40%;top: 30px;}
	.index_bg .language_family .language.sc{left: inherit;right:  40%;top: 110px;}
	.index_bg .language_family .language.tc{left: inherit;right: 40%;top: 190px;}
	.index_bg .language_family .lan_name{font-size:2.4rem}
	.index_bg .object{width: 200px;height: 323px;bottom: -50px;}
	.index_bg .earth_map .map {
		-ms-transform: translate(-30%,0);
		-webkit-transform: translate(-30%,0);
		transform: translate(-30%,0);
	}
}

@media (max-width: 320px) { 
	/*歡迎頁*/
	.index_bg .language_family .language.en{top: 10px;}
	.index_bg .language_family .language.sc{top: 80px;}
	.index_bg .language_family .language.tc{top: 150px;}
}

@media screen and (min-width: 420px) and (max-height: 580px){
	/*歡迎頁*/
	.index_bg .logo{width:180px}
	.index_bg .earth_map{margin: 0 auto;}
	.index_bg .language_family{text-align: center;margin-top: 90px;}
	.index_bg .language_family .language.en,
	.index_bg .language_family .language.sc,
	.index_bg .language_family .language.tc{right:  inherit;top: inherit;left:  inherit;position: relative;display: inline-block;}

	.index_bg .line_box{top: 0;}
	.index_bg .language_family .lan_name{margin: 0 0 0 60px;font-size:2rem}
	.index_bg .object{bottom: -50px;width: 300px;height: 474px;}	
}
@media screen and (min-width: 420px) and (max-width: 640px) and (max-height: 570px){
	/*歡迎頁*/
	.index_bg .object{bottom: -80px;width: 150px;height: 237px;}
	.index_bg .language_family{margin-top: 70px;text-align: left;}
	.index_bg .language_family .lan_name{margin-left: 20px;font-size:1.8rem;text-align:  center;}
	.index_bg .line_box .line.line_rotate + .line{width: 150px}

}
/*裝置橫向*/
@media handheld and (orientation:landscape){
	/*歡迎頁*/
	.index_bg .logo{width:180px}
	.index_bg .earth_map{margin: 0 auto;}
	.index_bg .language_family{text-align: center;margin-top: 90px;}
	.index_bg .language_family .language.en,
	.index_bg .language_family .language.sc,
	.index_bg .language_family .language.tc{position: static;display: inline-block;}

	.index_bg .line_box{top: 0;}
	.index_bg .language_family .lan_name{margin: 0 0 0 60px;font-size:2rem}
	.index_bg .object{width:  150px;height: 237px;bottom: -50px;}
}

@media screen and (max-device-width: 1024px) and (max-device-height: 600px) {
	/*歡迎頁*/
	.index_bg .object{bottom: -80px;}
	.index_bg .language_family{margin-top: 70px;text-align: left;}
	.index_bg .language_family .lan_name{margin-left: 20px;font-size:1.8rem;text-align:  center;}
	.index_bg .line_box .line.line_rotate + .line{width: 150px}
}
@media screen and (max-device-width: 480px) and (max-device-height: 320px) {
	/*歡迎頁*/
	.index_bg .object{bottom: -80px;}
	.index_bg .language_family{margin-top: 70px;text-align: left;}
	.index_bg .language_family .lan_name{margin-left: 20px;font-size:1.8rem;text-align:  center;}
	.index_bg .line_box .line.line_rotate + .line{width: 150px}

}