@charset "UTF-8";
body{
	background-color: rgba(0,0,0,1.00);}
.container{
width: 100%;
max-width:1100px;
margin: auto;

		}
.row{
	margin: 0 auto; 
 	}
row_join_S1 img{
	width:10px;

	}
.video_bg{
	width:100%;
	height:380px;
	text-align:center;
	background: url(../images/framepage_02.jpg) repeat-y 0 0;
	background-size: 100%;
	padding-top:10px;
}

.desk_btn{
	width:50%;
	height: auto;
	position: relative;
	margin:0 auto;
	}

.desk_btn img, .content img {
	width: 50%;
	position: relative;
	margin:0 auto;
	float:left;
	
	}

	
.my_class_name{
	width: 640px;
	height:360px;
}

.mob {
	 display:none;
	}
	
	
.ee_btn{
	display:none;
	}
	
.ee_btn img, .content img {
	display:none;
	}
	
.desk_btn_single{
	width:100%;
	height: auto;
	position: relative;
	margin:0 auto;
	}
	
.desk_btn_single img{
	width:22%;
	height: auto;
	position: relative;
	
	}
	
	

@media screen and (max-width: 750px) {
	
	.desk_btn_single img{
	width:30%;
	height: auto;
	position: relative;
	
	}
	
.ee_btn{
	width:50%;
	height: auto;
	position: relative;
	margin:30px 0 30px 0;
	float:left;
	}
.ee_btn img, .content img {
	width: 50%;
	position: relative;
	margin:0 auto;
	float:left;
	margin-left:50px;
	
	}
	.video_bg{
		width:100%;
		height:55vw;
		text-align:center;
		padding-top:10px;
	}
	.my_class_name{
		width: 80%;
		height:50vw;
	}

.mob {
	width:100%;
	text-align:center;
	display:inline-block;
	}
.mob img, .content img {
	width: 100%;
	height: auto;
	position: relative;
	margin:0 auto;

	}
.ee{
 display:none;

	}

.ee_head img, .content img{
	width: 100%;
	height: auto;
	position: relative;
	margin:0 auto;

	}
}

.navbar{
margin: 0 auto; 
text-align:center;
display: inline-block;
text-decoration: none;
font-family:微軟正黑體, 微軟正黑體 UI, Microsoft JhengHei, Microsoft JhengHei UI, Microsoft YaHei, Microsoft YaHei UI, Helvetica, Arial, sans-serif;

}
.current{
text-align: center;
	border-right:2px solid rgba(12,196,164,1.00);
	}
.navbar li {
display: block;
  color: rgba(12,196,164,1.00);
  text-align: center;
  text-decoration: none;

	}	
.navbar a{
	text-align:center;
	  padding: 14px 16px;
    display: inline-block;
    text-decoration: none;
	}
	.navbar li a:hover{
		background-color: rgba(244,180,41,1.00);
}
.ee{
	}
.ee img, .content img{
	width: 100%;
	height: auto;
	position: relative;
	margin:0 auto;

	}
	
.fr img{

    margin:0 auto;
	}
.bottom{
background-color: rgba(245,168,31,1.00);
    height: 120px;
    /* width: 100%; */
    clear: both;
    padding: 10px;
		}
		
		.bottom a{
			
			color:
			rgba(195,37,40,1.00);
			
			}
		
.bottom p{
	font-size:15px;
	line-height:27px;
	color:white;
	}		
.bottom img{
	width:30%;
		}
.fb_in{
	margin:12px auto;
	width:90%;	
		
	}
.tel img{
margin:12px auto;
margin-left:10px;
width:160px;
}
.tel span img{
margin-top:10px;
width:260px;
	}
.bot_info{
font-size:16px;
margin-top:10px;
}
.bot_info span img{
	width:16%;
		}

.join{
	width:100%;
	background-color: #fbc644;
		}
.join img{
width:100%;
max-width:1200px;
	}
	.sq{
		margin-left:10%;
		width:40%;
		position:relative;
		float:left;
		border-right:3px dotted rgba(235,74,21,1.00);
		padding-right: 10px;
		margin-top:10px;
				}
		.sq img{
		width: 100%;
		}
		.sq h3{
			color:#dc4717;
			line-height:30px;
			border-bottom:2px dotted  rgba(220,76,59,1.00);
			margin-right:20px;
			}
		.sq h5{
			line-height:20px;
	
			margin-left:20px;
			}
.j_btn{
	float:left;
	margin-top:5px;
	align-content:left;
	clear:both
	}
	.j_btn img{
	width:100%;
	height:100%;
	margin:0 auto;
	align-content:center;
	clear:both
	}
	
	.sq_r{
	margin-left:8px;
		width:40%;
		position:relative;
		float:left;
		margin-top:10px;
		}
		.sq_r img{
		margin-left:15px;
		width: 98%;
		}
		.sq_r h3{
			color:#dc4717;
			line-height:30px;
			border-bottom:2px dotted  rgba(220,76,59,1.00);
			margin-left:20px;
			}
		.sq_r h5{
			line-height:20px;
			margin-left:30px;
			}
	
		.lar_b{
			align:center;
			clear:both;
			float:left;
		
			}
	.lar_b img{
			margin:0 auto;
			width:100%;
		    height:100%;
			}
	.work{
		margin-left:10%;
		margin-top:30px;
		float:left;
		clear:both;
		}
	.last{
		width:100%
		}
		.last img{
		width:85%
		}
	.fd {
		width:100%;
		text-align:left;
		display:inline;
		 }
	.fd li a{
		width:100%;
		text-align:left;
		display:inline;
		text-decoration: none;
		clear:both;
		 }
	.about_page img{
		width:50%;
		}
		.tnc_s{
			max-width: 1000px;
			margin-top:28px;
			text-align:left;
		    margin: 0 auto;
			line-height:25px;
			}
		.tnc_s ol li {
		width:100%;
		text-align:left;
			}
			
		.tnc_s li a{
		width:100%;
		text-align:left;
		display:inline;
		text-decoration: none;
		clear:both;
		}
   
		.tnc_bottom {
		 text-align:left;
		 margin-top:30px;
		 clear:both;
		 background:#fbc644;
		 height:150px;
		 width:100%;
		 
			}
		.tnc_bottom h4 ol{
			padding-top:10px;
			text-align:left;
		
			}
		.tnc_bottom h5 ol li {
			width:100%;
			line-height:20px;
			float:left;
			text-align:left;
			display:inline;
			text-left:-10%;
			}
		.tnc-b2 ol li{
				width:100%;
				text-align:left;
				text-left:-10%;
				}
		.tnc-b2 li a{
	text-left:-10%;
			width:100%;
		text-align:left;
		display:inline;
		text-decoration: none;
		clear:both;
}

.work_n{
	text-align: center;
	margin-top: 20px;
	
}


.work_n5{
	text-align: center;
	margin-top: 20px;
	clear:both;
	
}
.work_n5 img{
	width: 24%;
	text-align: center;
	margin-top: 20px;
	clear:both;
	
}
.work_n2 img{
	text-align: left;
	margin-top: 20px;
	width: 30%;
	
}

.work_n3 img{
	margin-top: 10px;
	margin-right: 13px;
	width: 18%;
	position:relative;
	float:left;
	
	
}

.work_n4 img{
	margin-top: 10px;
	margin-right: 13px;
	width: 18%;
	position:relative;
    text-align: center;
	
}
.work_n3 img:hover {
    filter: alpha(opacity=50);
    opacity: .5;
}

.oop{
	display: none;
}
#toggle{
display: none;
}

.mob_main{
	display:none;
}

.desk_T{

	}
	
.work_bottom{
	height:60px;
	clear:both;
	}	
@media screen and (max-width: 750px) {
 
	.work_n5{
	text-align: center;
	margin-top: 20px;
	clear:both;
	
}
	.work_n5 img{
	width: 40%;
	margin-top: 20px;
	clear:both;
	
}
	
 .work_n2 img{
	text-align:center;
	margin-top: 20px;
	margin-left:70px;
	width:60%;
}

.work_n3 img{
	text-align: center;
	margin-top: 10px;
	margin-right: 5px;
	width: 30%;
	
}
 
 .desk_T{
	margin-top:13%;
	 }
 
  .row {
    position: relative;
  }

  .hamburger {
    position: absolute;
    cursor: pointer;
    right: 10%;
    top: 20%;
    transform: translate(-5%, -50%);
    z-index: 20;
	  
  }
	.logoo img{
	width:25%;
	}
	
	.app img{
    width:50%;			
	}

	
	.fr{
		display: none;
		}
	.fl{
		display: none;
		}
	.navbar li a{
     display: none;
	}
			
	.oop{
		display:inline-block;
		position:relative;
		margin-top:-80px;
		margin-bottom:10px;
		z-index: 300;
		width:100%;
		border-bottom: 3px thick #16A487 ;
		box-sizing: border-box;
		background: #FBC644;
		text-decoration: none;
	}

	.oop a {
	
	font-family: 微軟正黑體, 微軟正黑體 UI, Microsoft JhengHei, Microsoft JhengHei UI, Microsoft YaHei, Microsoft YaHei UI, Helvetica, Arial, sans-serif; 	
	display: block;
	flex-direction: column;
	color:white;
	justify-content: center;
	text-decoration: none;
	font-size: 16px;	
	padding: 3px 24px;
	border: 1px solid ;	
    text-align: justify;
		
	
	}
	.oop a:hover{
	background: #16A487;	
    color:white;
	}
 
	.mob_main{
		display: block;
	}
	.mob_main img{

		width:100%
	}
	
	.bb  a img{
	width: 100%;
	height: 100%;
	}

	.bot_info span img{
	width:40%;
		}

	.about_page img{
		width:100%;
		}
}