/* CSS Document */
@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);
#footer{
	background: #01386b;
    color: #FFF;
    display: inline-block;
    width: 100%;
    padding: 0.5% 0;
	font-size:10px;
}
body{
	font-family: 'Noto Sans TC', Microsoft JhengHei;
	font-size:16px;
	overflow-x: hidden;
	overflow-y: auto;
}
.brand_p{
	position: relative;
}
.sca{
	position: absolute;
	z-index: 99;
	opacity: 0;
}
.my-b,.my-hot{
	opacity: 0;
}
.an{
	position: absolute;
	top: 0;
}
.my-m{
	opacity: 0;
}
.pc_tit{
	-ms-animation: mm3 .6s  ease-in;
	-o-animation: mm3 .6s  ease-in;
	-moz-animation: mm3 .6s  ease-in;
	-webkit-animation: mm3 .6s  ease-in;
	animation: mm3 .6s  ease-in;
}
.line{
	position: absolute;
	-ms-animation: mm2 1s infinite ease-in;
	-o-animation: mm2 1s infinite ease-in;
	-moz-animation: mm2 1s infinite ease-in;
	-webkit-animation: mm2 1s infinite ease-in;
	animation: mm2 1s infinite ease-in;
}
.index_txt_p{
	display:none;
}
.index_txt_p .index_t{
	position: absolute;
	top: 0;
}
.enter{
	-moz-transform-origin: 70% 60%;
	-webkit-transform-origin: 70% 60%;
	-o-transform-origin: 70% 60%;
	-ms-transform-origin: 70% 60%;
	transform-origin: 70% 60%;
	-ms-animation: mm0 1.5s infinite ease-in;
	-o-animation: mm0 1.5s infinite ease-in;
	-moz-animation: mm0 1.5s infinite ease-in;
	-webkit-animation: mm0 1.5s infinite ease-in;
	animation: mm0 1.5s infinite ease-in;
}
.stairs{
	-ms-animation: mm2 3s infinite ease-in;
	-o-animation: mm2 3s infinite ease-in;
	-moz-animation: mm2 3s infinite ease-in;
	-webkit-animation: mm2 3s infinite ease-in;
	animation: mm2 3s infinite ease-in;
}
.could{
	-ms-animation: mm1 3s infinite ease;
	-o-animation: mm1 3s infinite ease;
	-moz-animation: mm1 3s infinite ease;
	-webkit-animation: mm1 3s infinite ease;
	animation: mm1 3s infinite ease;

}
@keyframes mm3{
	0% {
		-moz-transform:scale(.1,1) translate(0,10%);
		-webkit-transform:scale(.1,1) translate(0,10%);
		-o-transform:scale(.1,1) translate(0,10%);
		-ms-transform:scale(.1,1) translate(0,10%);
		transform:scale(.1,1) translate(0,10%);
		opacity: 0;
	}
	70%{
		opacity: 1;
	}
	100%{
		-moz-transform:scale(1,1)  translate(0,0);
		-webkit-transform:scale(1,1) translate(0,0);
		-o-transform:scale(1,1) translate(0,0);
		-ms-transform:scale(1,1) translate(0,0);
		transform:scale(1,1) translate(0,0);

	}
}
@keyframes mm2{
	0% {
		-moz-transform:rotate(0deg);
		-webkit-transform:rotate(0deg);
		-o-transform:rotate(0deg);
		-ms-transform:rotate(0deg);
		transform:rotate(0deg);
	}
	50%{
		-moz-transform:rotate(2deg);
		-webkit-transform:rotate(2deg);
		-o-transform:rotate(2deg);
		-ms-transform:rotate(2deg);
		transform:rotate(2deg);
	}
	100%{
		-moz-transform:rotate(0deg);
		-webkit-transform:rotate(0deg);
		-o-transform:rotate(0deg);
		-ms-transform:rotate(0deg);
		transform:rotate(0deg);
	}
}
@keyframes mm1{
	0% {
		-moz-transform:translate(50px,0);
		-webkit-transform:translate(50px,0);
		-o-transform:translate(50px,0);
		-ms-transform:translate(50px,0);
		transform:translate(50px,0);
	}
	50%{
		-moz-transform:translate(0px,0);
		-webkit-transform:translate(0px,0);
		-o-transform:translate(0px,0);
		-ms-transform:translate(0px,0);
		transform:translate(0px,0);
	}
	100%{
		-moz-transform:translate(50px,0);
		-webkit-transform:translate(50px,0);
		-o-transform:translate(50px,0);
		-ms-transform:translate(50px,0);
		transform:translate(50px,0);
	}
}
@-moz-keyframes mm1{
	0% {
		-moz-transform:translate(50px,0);
		-webkit-transform:translate(50px,0);
		-o-transform:translate(50px,0);
		-ms-transform:translate(50px,0);
		transform:translate(50px,0);
	}
	50%{
		-moz-transform:translate(0px,0);
		-webkit-transform:translate(0px,0);
		-o-transform:translate(0px,0);
		-ms-transform:translate(0px,0);
		transform:translate(0px,0);
	}
	100%{
		-moz-transform:translate(50px,0);
		-webkit-transform:translate(50px,0);
		-o-transform:translate(50px,0);
		-ms-transform:translate(50px,0);
		transform:translate(50px,0);
	}
}
@-webkit-keyframes mm1{
	0% {
		-moz-transform:translate(50px,0);
		-webkit-transform:translate(50px,0);
		-o-transform:translate(50px,0);
		-ms-transform:translate(50px,0);
		transform:translate(50px,0);
	}
	50%{
		-moz-transform:translate(0px,0);
		-webkit-transform:translate(0px,0);
		-o-transform:translate(0px,0);
		-ms-transform:translate(0px,0);
		transform:translate(0px,0);
	}
	100%{
		-moz-transform:translate(50px,0);
		-webkit-transform:translate(50px,0);
		-o-transform:translate(50px,0);
		-ms-transform:translate(50px,0);
		transform:translate(50px,0);
	}
}
@-o-keyframes mm1{
	0% {
		-moz-transform:translate(50px,0);
		-webkit-transform:translate(50px,0);
		-o-transform:translate(50px,0);
		-ms-transform:translate(50px,0);
		transform:translate(50px,0);
	}
	50%{
		-moz-transform:translate(0px,0);
		-webkit-transform:translate(0px,0);
		-o-transform:translate(0px,0);
		-ms-transform:translate(0px,0);
		transform:translate(0px,0);
	}
	100%{
		-moz-transform:translate(50px,0);
		-webkit-transform:translate(50px,0);
		-o-transform:translate(50px,0);
		-ms-transform:translate(50px,0);
		transform:translate(50px,0);
	}
}
@-ms-keyframes mm1{
	0% {
		-moz-transform:translate(50px,0);
		-webkit-transform:translate(50px,0);
		-o-transform:translate(50px,0);
		-ms-transform:translate(50px,0);
		transform:translate(50px,0);
	}
	50%{
		-moz-transform:translate(0px,0);
		-webkit-transform:translate(0px,0);
		-o-transform:translate(0px,0);
		-ms-transform:translate(0px,0);
		transform:translate(0px,0);
	}
	100%{
		-moz-transform:translate(50px,0);
		-webkit-transform:translate(50px,0);
		-o-transform:translate(50px,0);
		-ms-transform:translate(50px,0);
		transform:translate(50px,0);
	}
}

@keyframes mm0{
	0% {
		-moz-transform:scale(1,1);
		-webkit-transform:scale(1,1);
		-o-transform:scale(1,1);
		-ms-transform:scale(1,1);
		transform:scale(1,1);
	}
	40%{
		-moz-transform:scale(1.1,1.1);
		-webkit-transform:scale(1.1,1.1);
		-o-transform:scale(1.1,1.1);
		-ms-transform:scale(1.1,1.1);
		transform:scale(1.1,1.1);
	}
	100%{
		-moz-transform:scale(1,1);
		-webkit-transform:scale(1,1);
		-o-transform:scale(1,1);
		-ms-transform:scale(1,1);
		transform:scale(1,1);
	}
}
@-moz-keyframes mm0 {
	0% {
		-moz-transform:scale(1,1);
		-webkit-transform:scale(1,1);
		-o-transform:scale(1,1);
		-ms-transform:scale(1,1);
		transform:scale(1,1);
	}
	40%{
		-moz-transform:scale(1.1,1.1);
		-webkit-transform:scale(1.1,1.1);
		-o-transform:scale(1.1,1.1);
		-ms-transform:scale(1.1,1.1);
		transform:scale(1.1,1.1);
	}
	100%{
		-moz-transform:scale(1,1);
		-webkit-transform:scale(1,1);
		-o-transform:scale(1,1);
		-ms-transform:scale(1,1);
		transform:scale(1,1);
	}
}
@-webkit-keyframes mm0 {
	0% {
		-moz-transform:scale(1,1);
		-webkit-transform:scale(1,1);
		-o-transform:scale(1,1);
		-ms-transform:scale(1,1);
		transform:scale(1,1);
	}
	40%{
		-moz-transform:scale(1.1,1.1);
		-webkit-transform:scale(1.1,1.1);
		-o-transform:scale(1.1,1.1);
		-ms-transform:scale(1.1,1.1);
		transform:scale(1.1,1.1);
	}
	100%{
		-moz-transform:scale(1,1);
		-webkit-transform:scale(1,1);
		-o-transform:scale(1,1);
		-ms-transform:scale(1,1);
		transform:scale(1,1);
	}
}
@-o-keyframes mm0 {
	0% {
		-moz-transform:scale(1,1);
		-webkit-transform:scale(1,1);
		-o-transform:scale(1,1);
		-ms-transform:scale(1,1);
		transform:scale(1,1);
	}
	40%{
		-moz-transform:scale(1.1,1.1);
		-webkit-transform:scale(1.1,1.1);
		-o-transform:scale(1.1,1.1);
		-ms-transform:scale(1.1,1.1);
		transform:scale(1.1,1.1);
	}
	100%{
		-moz-transform:scale(1,1);
		-webkit-transform:scale(1,1);
		-o-transform:scale(1,1);
		-ms-transform:scale(1,1);
		transform:scale(1,1);
	}
}
@-ms-keyframes mm0{
	0% {
		-moz-transform:scale(1,1);
		-webkit-transform:scale(1,1);
		-o-transform:scale(1,1);
		-ms-transform:scale(1,1);
		transform:scale(1,1);
	}
	40%{
		-moz-transform:scale(1.1,1.1);
		-webkit-transform:scale(1.1,1.1);
		-o-transform:scale(1.1,1.1);
		-ms-transform:scale(1.1,1.1);
		transform:scale(1.1,1.1);
	}
	100%{
		-moz-transform:scale(1,1);
		-webkit-transform:scale(1,1);
		-o-transform:scale(1,1);
		-ms-transform:scale(1,1);
		transform:scale(1,1);
	}
}
.index_1{
	position:absolute;
}
.index_t,.index_t2{
	opacity: 0;
}
.index_txt img,.index_txt2 img{
	position: absolute;
}
#index .pc{
	display: inline-block;
}
#index .phone{
	display: none;
}
footer {
	background: #FFFFFF;
	display: inline-block;
	width: 100%;
	text-align: center;
	padding: 0.4% 0 0 0;
	margin-top: 0;
}
#brand_page .pc{
	display: inline-block;
}
#brand_page .phone{
	display: none;
}
#brand_page #area{
	position: relative;
}
#hot .page{
	background:url("../img/hot_bg.jpg") center center;
	background-size:contain;
}
#hot.photo #main{
	background: url("../img/photo_bg.jpg") center center;
	background-size:contain;
}
.round_btn li:after{
	border-radius: 30px;
	content: "";
	display: inline-block;
	width: 19px;
	height: 19px;
	border: 1px solid #fff;
	cursor: pointer;
}
.round_btn li.uk-active:after{
	background: #FFFFFF;
}
.round_btn{
	display: inline-block;
	margin: 0 0 3% 2%;
	padding-left: 0;
	vertical-align: bottom;
}
#brand_page #main{
	position: relative;
}
#brand_page .round_btn li.uk-active:after{
	background: #1054A4;
}
#brand_page .round_btn{
	right: 4.5vw;
	bottom: 4vw;
	z-index: 1;
	display: inline-block;
	position: absolute;
}
#brand_page .round_btn li:after {
	border: 1px solid #1054A4;
}
.round_btn li{
	margin: 8px 0;
}
#brand_page #pc_menu li:nth-child(1) .menu_hover,#hot #pc_menu li:nth-child(2) .menu_hover,#classic #pc_menu li:nth-child(3) .menu_hover,#photo #pc_menu li:nth-child(4) .menu_hover,#hot.photo #pc_menu li:nth-child(4) .menu_hover{
	opacity: 1;
}
#brand_page #pc_menu li:nth-child(1) .menu_img,#hot #pc_menu li:nth-child(2) .menu_img,#classic #pc_menu li:nth-child(3) .menu_img,#photo #pc_menu li:nth-child(4) .menu_img,#hot.photo #pc_menu li:nth-child(4) .menu_img{
	opacity: 0;
}
#hot.photo #pc_menu li:nth-child(2) .menu_img{
	opacity: 1;
}
#hot.photo #pc_menu li:nth-child(2) .menu_hover{
	opacity: 0;
}
#pc_menu  li a{
	position: relative;
}
#pc_menu  li a:hover .menu_hover{
	opacity: 1;
}
#pc_menu  li a:hover .menu_img{
	opacity: 0;
}
.menu_hover{
	position: absolute;
	left: 0;
	opacity: 0;
}
#pc_menu{
	padding-left: 0;
}
#hot{
	background: #1054A4;
}
#hot.photo{
	background:#E8E8E8;
}
.tit{
	width: 100%;
	text-align: center;
	background: #fff;
}

footer ul{
	margin: 0.5em 0;
	display: inline-block;
	padding: 0 0 0.2% 0;
}
#index footer{
	margin-top: 0;
}
footer .tit{
	color: #1054A4;
	font-size: 1em;
	line-height: 1em;
	letter-spacing: 0.05em;
	background: transparent;
	display: inline-block;
	width: auto;
}
footer ul a{
	color:#1054A4;
	font-size:1em;
}
footer ul a:hover{
	color:#1054A4;
	text-decoration:none;
}
footer ul li{
	color:#1054A4;
	display: inline-block;
	letter-spacing: 0.05em;
}
html{
	background: #faebd7;
}
body#index {
	padding:0;
	-moz-background-size: cover;
	background-size: cover;
	height: 100vh;
	display: block;
	margin: 0 auto;
}
.logo{
	width: 40%;
	height:100%;
	margin-top: 16%;
	margin-left: 50%;
}
.sky{
	position:absolute;
	width:100%;
	height: auto;
}
.area_menu{

}
.area_menu{
	display:inline-block;
	width: 400px;
	padding-left: 0;
	margin: 7.4% 0.5% 0 0;
	text-align: center;
	padding-bottom: 0;
	border-bottom: 0;
	float: right;
}
.area_menu li{
	display:inline-block;
	width:30%;
	margin:0 1%;
	color:#403f41;
	font-size: 1.18em;
	letter-spacing: 0.25em;
	background: #403f41;
	line-height: 70px;
	height: 70px;
	position: relative;
}
.area_menu li a{
	color: #fff;
	text-decoration:none;
	display: inline-block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 9;
}
.area_menu li:after{
	content:'';
	text-align:center;
	width: calc(94% - 2px);
	height: calc(90% - 2px);
	margin-left: 3%;
	top: 5%;
	position:absolute;
	left: 0;
	z-index: 1;
	border: 1px solid #fff;
	background: #403f41;
}
.area_menu li:hover:after,.area_menu li.uk-active:after{
	background:#fff;
}
.area_menu li:hover,.area_menu li.uk-active{
	color:#403f41;
	background: #403f41;
}
.area_menu li:hover a,.area_menu li.uk-active a{
	color:#403f41;
}
#index #main{
	padding-bottom: 0;
}
#index nav{
	background: transparent;
	position: fixed;
	width: 100%;
	top: 0;
}
@media (max-width: 1280px) {
	.index_bg {
		height: calc(100vh - 46px);
		width: 100%;
	}
	.index_txt img,.index_1,.index_txt2 img{
		top: 8%;
	}
}
@media (max-width: 1024px){
	body{
		font-size: 14px;
	}
}
@media (max-width: 960px){
	#footer span{
		width:100%;
		padding: 0.5% 0;
	}
	.index_txt_p{
		display:inline-block;
	}
	.index_txt_p{
		display: block;
	}
	.index_txt,.index_txt2,.index_1 {
		display: none;
	}
	#brand_page .round_btn{
		display: none;
	}
	#index .pc{
		display: none;
	}
	#index .phone{
		display: inline-block;
	}
	footer ul a:hover {
		color: #dcdddd;
		text-decoration: none;
	}
	footer {
		background: #1054a4;
		display: inline-block;
		width: 100%;
		text-align: center;
		padding: 1.5% 0;
		margin-top: 0;
	}
	footer ul a {
		color: #dcdddd;
		font-size: 1em;
	}
	footer ul li {
		color: #dcdddd;
		display: inline-block;
		letter-spacing: 0.05em;
	}
	footer .tit {
		color: #fff;
		font-size: 1.5em;
		line-height: 1.5em;
		letter-spacing: 0.05em;
		background: transparent;
		width: 100%;
	}
	#brand_page .pc{
		display: none;
	}
	#brand_page .phone{
		display:inline-block;
	}
	.area_menu li {
		display: inline-block;
		width: 30%;
		margin: 0 1%;
		color: #403f41;
		font-size: 2em;
		letter-spacing: 0.25em;
		background: #403f41;
		line-height: 120px;
		height: 120px;
		position: relative;
	}
	footer{
		margin-top: 5%;
		padding: 1.5% 0 0 0;
	}
	#main{
		background: #FFF;
	}
	.sky{
		display:none;
	}
	.logo {
		width: 70%;
		height: auto;
		margin-top: 0;
		margin-left: 0;
	}
	#main{
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}
	#hot #area {
		text-align: center;
		width: 89%;
		margin-left: 5.5%;
		display: inline-block;
		vertical-align: top;
	}
	#hot #area .uk-active {
		margin-top: 7.4%;
		text-align: left;
		margin-left: 7%;
	}
}
@media (max-width: 540px){
	footer ul li:first-child{
		width:100%;
	}
	footer ul li span{
		display:none;
	}
}
@media (max-width: 640px){

	body{
		font-size:14px;
	}
	.area_menu li {
		line-height: 80px;
		height: 80px;
	}
	.area_menu li {
		font-size: 1.5em;
	}
	body#index {
		background: #faebd7 url(../img/index-pic-phone.jpg) center center fixed no-repeat;
	}
}