/*@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);*/
/*	font-family:'Noto Sans TC', "Microsoft JhengHei", "微軟正黑體","Arial",Helvetica,sans-serif;*/
html,body{
	margin:0;padding:0;
	font-family: "Microsoft JhengHei", "微軟正黑體","Arial",Helvetica,sans-serif;
	background-color:#FFF;
}
.col-lg-12, .col-lg-11, .col-lg-10, .col-lg-9, .col-lg-8, .col-lg-7, .col-lg-6, .col-lg-5, .col-lg-4, .col-lg-3, .col-lg-2, .col-lg-1,
.col-md-12, .col-md-11, .col-md-10, .col-md-9, .col-md-8, .col-md-7, .col-md-6, .col-md-5, .col-md-4, .col-md-3, .col-md-2, .col-md-1, 
.col-sm-12, .col-sm-11, .col-sm-10, .col-sm-9, .col-sm-8, .col-sm-7, .col-sm-6, .col-sm-5, .col-sm-4, .col-sm-3, .col-sm-2, .col-sm-1,
.col-xs-12, .col-xs-11, .col-xs-10, .col-xs-9, .col-xs-8, .col-xs-7, .col-xs-6, .col-xs-5, .col-xs-4, .col-xs-3, .col-xs-2, .col-xs-1{
	padding:0px;
}

a{
	cursor:pointer;
	color:#4da1e9; 
}
a:hover{
	opacity:0.9;
}
a:focus,
a:hover {
	text-decoration: none;
	color:#4da1e9 ; 
}
a.active{
	text-decoration: none;
	color:#4da1e9 ; 
	font-weight:bold;
}

.link_item{
	text-decoration:underline;
	color: #4da1e9  !important;
    outline: none;
}
.link_item:hover{
	color:#4da1e9 ;
	text-decoration:underline;
}
hr{
	margin-top:0px;
	margin-bottom:0px;
}
.container,
.row {
	margin: 0 auto;
	padding: 0
}

label{
	cursor:pointer;
	display:table;
	font-weight:400;
	
}


.alignMiddle>div {
	display: table
}
.alignMiddle>div>div {
	display: table-cell;
	vertical-align: middle
}
.maxwidth100p{
	max-width:100%;

}
.maxwidth400{
	max-width:400px;
	width:100%;
}
.maxwidth480{
	max-width:480px;
	width:100%;
}
.maxwidth600{
	max-width:600px;
	width:100%;
}
.maxwidth750{
	max-width:750px;
	width:100%;
}
.maxwidth900{
	max-width:900px;
	width:100%;
}
.maxwidth1000{
	max-width:1000px;
	width:100%;
}
.textleft{
	text-align: left;
}
.textcenter {
	text-align: center
}
.textright{
	text-align: right;
}
.dleftmcenter{
	text-align: center
}
@media(min-width:768px){
	.dleftmcenter{
		text-align: left;
	}
}
.posrelative{
	position:relative;
}
.marginauto{
	margin-left:auto;
	margin-right:auto;
}
.clearboth{
	clear:both;
}
.displayb{
	display:block !important;
}
.displayib{
	display:inline-block !important;
}
.nopadding{
	padding:0px !important;
}
.boldtext {
	font-weight: 700
}
.h1, .h2, .h3, h1, h2, h3{
	margin-top: 0px;
    margin-bottom: 0px;
}

.factory_row{
	margin-top:70px;
}

@media(min-width:768px){
	.hoverzoom:hover{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;-ms-transition:all .5s ease;transition:all .5s ease;-webkit-transform:scale(1.15);-moz-transform:scale(1.15);-ms-transform:scale(1.15);-o-transform:scale(1.15);transform:scale(1.15)}
}
.listaplha{
	list-style-type: lower-alpha;
}
.dnone{
	display:none;
}
.error_msg{
	opacity:0;
	font-size:12px;
	color:#ee0000;
}


.content_popup{background-color:#FFF;}
@media(min-width:768px){
	.content_popup{
		padding:20px 30px;
	}
}
@media(min-width:768px){
	.content_popup{min-width:240px;}
	
}
@media(max-width:767px){
	.content_popup{
		max-width:100%;
		margin:0px 10px;
	}
	
	.factory_row{
		margin-top:80px;
	}
	
	
}
/*
.content_popup>div{display:table;height:100%;width:100%}
.content_popup>div>div{display:table-cell;vertical-align:middle}
*/
.content_popup .title{font-size:20px;line-height:30px;letter-spacing:1px;text-align:center;margin-bottom:10px;font-weight:700}
.content_popup .caption{text-align:center;margin-bottom:20px;letter-spacing:1px}

.content_popup.leftalign .title,
.content_popup.leftalign .caption{
	text-align:left;
}
.content_popup.autoHeight{
	height:auto;
}

.fancybox-content{
	max-width: 80%;
	max-height:80%;
}
.button{
	color:#FFF;
	padding:10px 0px;
	position:relative;
	width:calc(100% - 60px);
	display:block;
	background-color:#13a89e;
	text-align:center;
	cursor:pointer;
	font-weight:bold;
	font-size:14px;
	margin-left:auto;
	margin-right:auto;
	max-width:100%;
	letter-spacing: 2px;
	border-radius:8px;
}
.button.short{
	min-width:120px;
}

.button.displayib{
	width:auto;
	padding-left: 10px;
	padding-right:10px;
	
}
.button.orange{
	background-color:#fc715a;
	color:#fff;
}
.button.orange:hover{
	background-color:#fc715a;
	color:#fff;
}

.button:hover {
	opacity:.7;
}




.button.lightblue{
	color:#FFF;
	background-color:#4da1e9;
}



.button.lightblue:hover{
	color:#FFF;
	background-color:#4da1e9;
}



.whitetext{
	color:#FFF;
}
.blacktext{
	color:#000;
}

.greytext{
	color:#525252;
}
a.greytext:hover{
	color:#525252;
}

.greytext_light{
	color:#999;
}

.bluetext{
	color:#0067b1;
}
.darkredtext{
	color:#c21f20;
}
.bluetext_light{
	color:#4da1e9;
}
.darkgreytext{
	color:#888;
}


.cyantext{
	color:#2dadb0;
}
.cyan_lighttext{
	color:#a6c512;
}

.bg_orange{
	background-color:#fc4c02;
}
.bg_mannings{
	background-color:#fabb92;
}
.bg_grey_light{
	background-color:#fafafc;
}
.bg_grey{
	background-color:#808080;
}
.bg_white{
	background-color:#FFF;
}
.bg_cyan{
	background-color:#2dadb0;
}
.bg_cyan_light{
	background-color:#a6c512;
}
.bg_cyan_pale{
	background-color:#edf3d1;
}
.bg_blue{
	background-color:#0067b1;
}

label:hover{
	opacity:0.9;
}

.fullwidth{
	width:100%;
}
.maxwidth{
	max-width:100%;
}

.mb-xxl{margin-bottom:120px;}
.mb-xl{margin-bottom:80px;}
.mb-l{margin-bottom:60px;}
.mb-m{margin-bottom:40px;}
.mb-s{margin-bottom:20px;}
.mb-xs{margin-bottom:10px;}

.mt-l{margin-top:60px;}
.mt-m{margin-top:40px;}
.mt-s{margin-top:20px;}
.mt-xs{margin-top:10px;}

.pb-xl{padding-bottom:80px;}
.pb-l{padding-bottom:60px;}
.pb-m{padding-bottom:40px;}
.pb-s{padding-bottom:20px;}
.pb-xs{padding-bottom:10px;}

.pt-xl{padding-top:80px;}
.pt-l{padding-top:60px;}
.pt-m{padding-top:40px;}
.pt-s{padding-top:20px;}
.pt-xs{padding-top:10px;}

.pl-xl{padding-left:80px;}
.pl-l{padding-left:60px;}
.pl-m{padding-left:40px;}
.pl-s{padding-left:20px;}
.pl-xs{padding-left:10px;}


.pb-l{
	padding-top: 30px;
}

.pb-l {
    padding-bottom: 30px;
}

@media(max-width:767px){
	.mb-none{
		margin-bottom:0px !important;
	}
	.mt-none{
		margin-top:0px !important;
	}
	.pt-none{
		padding-top:0px !important;
	}
	.pb-none{
		padding-bottom:0px !important;
	}
	.pl-none{
		padding-left:0px !important;
	}
}


body {
	font-size: 14px;
	line-height: 20px;
	/*letter-spacing:1px;*/
}


.s-text{
	font-size: 11px;
	line-height: 18px
}


.m-text {
	font-size: 16px;
	line-height: 24px
}

.m-text {
	font-size: 20px;
	line-height: 24px
}

.l-text {
	font-size: 25px;
	line-height: 30px;
	
}

.xl-text{
	font-size: 30px;
	line-height: 36px;
	/*font-size: 28px;
    line-height: 32px;*/
}
.xxl-text{
	font-size: 40px;
	line-height: 60px;
}

@media(min-width:768px){
	.ssm-text{
		font-size:18px;
		line-height: 24px
	}

}

@media(max-width:991px){

	.sm-text {
		font-size: 22px;
		line-height: 25px
	}

	.m-text {
		font-size: 24px;
		line-height: 30px
	}

	.l-text {
		font-size: 24px;
		line-height: 30px;
		
	}
}

@media(max-width:767px){
	.container{
		max-width:480px;
		margin-left:auto;
		margin-right:auto;
		padding:0px 15px;
	}
}
@media(min-width:1200px){
	.container{
		max-width:1200px;
		margin-left:auto;
		margin-right:auto;
		
	}
	
	
}



.lineheight36{
	line-height:36px;
}
.lineheight24{
	line-height:24px;
}
.lineheight18{
	line-height:18px;
}





@media(min-width:768px){
	
	 .col2_item:nth-child(2n+1){
		padding-right: calc(20px / 2 * 1);
	}
	.col2_item:nth-child(2n+2){
		padding-left: calc(20px / 2 * 1);
	}
	
	.col3_item:nth-child(3n+1){
		padding-right: calc(21px / 3 * 2);
	}
	.col3_item:nth-child(3n+2){
		padding-left: calc(21px / 3 * 1);
		padding-right: calc(21px / 3 * 1);
	}
	.col3_item:nth-child(3n){
		padding-left: calc(21px / 3 * 2);
	}
	
	
	.thickcol.col2_item:nth-child(2n+1){
		padding-right: calc(40px / 2 * 1);
	}
	.thickcol.col2_item:nth-child(2n+2){
		padding-left: calc(40px / 2 * 1);
	}
	.col2_item_pr:nth-child(2n+1){
		padding-left: calc(20px / 2 * 1);
	}
	.col2_item_pr:nth-child(2n+2){
		padding-right: calc(20px / 2 * 1);
	}
	.col2_item_pr.large:nth-child(2n+1){
		padding-left: calc(40px / 2 * 1);
	}
	.col2_item_pr.large:nth-child(2n+2){
		padding-right: calc(40px / 2 * 1);
	}
	.thickcol.col3_item:nth-child(3n+1){
		padding-right: calc(40px / 3 * 2);
	}
	.thickcol.col3_item:nth-child(3n+2){
		padding-left: calc(40px / 3 * 1);
		padding-right: calc(40px / 3 * 1);
	}
	.thickcol.col3_item:nth-child(3n){
		padding-left: calc(40px / 3 * 2);
	}
	
	
	
}

	.colcontainer{
		margin-left:-10px;
		margin-right:-10px;
	}
	.colcontainer.thickpadding{
		margin-left:-15px;
		margin-right:-15px;
	}
	.colcontainer.thinpadding{
		margin-left:-5px;
		margin-right:-5px;
	}
	
	.col_item{
		padding-left:10px;
		padding-right:10px;
	}
	.col_item.thickpadding{
		padding-left:15px;
		padding-right:15px;
	}
	
	.col_item.thinpadding{
		padding-left:5px;
		padding-right:5px;
	}
	
	.btn_game:hover>div{
		
		-moz-animation: jump_ani 700ms normal infinite;
		-ms-animation:  jump_ani 700ms normal infinite;
		-o-animation: 	jump_ani 700ms normal infinite;
		animation: 		jump_ani 700ms normal infinite;
	}
	
	.btn_game.noshake{
		-moz-animation: none !important;
		-ms-animation:  none !important;
		-o-animation: 	none !important;
		animation: 		none !important;
	}
	.btn_game.noshake>div{
		-moz-animation: none !important;
		-ms-animation:  none !important;
		-o-animation: 	none !important;
		animation: 		none !important;
	}
	.btn_game.noshake:hover{
		transform: translateY(-8px);
	}
	
	
	@keyframes jump_ani {
		 0%   { transform: scale(1,1)    translateY(0); }
        10%  { transform: scale(1.1,.9) translateY(0); }
        25%  { transform: scale(.9,1.1) translateY(-25px) rotate(3deg); }
        30%  { transform: scale(.9,1.1) translateY(-30px); }
        35%  { transform: scale(.9,1.1) translateY(-25px) rotate(3deg); }
        50%  { transform: scale(1,1)    translateY(0) rotate(0deg); }
        57%  { transform: scale(1,1)    translateY(-7px); }
        64%  { transform: scale(1,1)    translateY(0); }
        100% { transform: scale(1,1)    translateY(0); }
	}
	
	