html{height: 100%;}
body {
	padding: 0;
	margin: 0;
	background: #fff;	
	color: #212529;
	line-height: 28px;
	font-size: 15px;
	font-family: "Microsoft JhengHei","微軟正黑體","Arial", sans-serif!important;
  height: 100%;

}
body a {
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-o-transition: 0.5s all;
	-ms-transition: 0.5s all;
	text-decoration: none;
}
body a:hover {
	text-decoration: none;
}
body a:focus, a:hover {
	text-decoration: none;
}
input[type="button"], input[type="submit"] {
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-o-transition: 0.5s all;
	-ms-transition: 0.5s all;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	font-weight:normal;
}

p {
	margin: 0;
	color:#777;
	letter-spacing:1px;
	line-height:1.5em;
	font-size:15px;
}
.row{
	margin:0px;
	padding:0px;
}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
label {
	margin: 0;
}
a{
	color:#000;
}
a:focus, a:hover {
	text-decoration: none;
	outline: none;
}
a:focus, a:hover {    
    text-decoration:none;
}
.hide{display: none;}
img{width: 100%;}
section{padding-bottom: 4rem;padding-top: 4rem;}

.scroll-to-top {
	z-index: 1029;
	right: 1rem;
	bottom: 3.3rem;
	display: none;
}

.scroll-to-top a {
	width: 3.1rem;
	height: 3.1rem;
	background-color: rgba(44, 46, 48, 0.8);
	line-height: 3.1rem;
}

.scroll-to-top a::after {
	content: url(../images/fa-angle.png);
	position: absolute;
	top: 15%;
	right: 15%;
	width: 70%;
	opacity: 0.7;
}

.scroll-to-top a:hover::after {
	opacity: 1;
}

@media (max-width: 575px) {
	.scroll-to-top {
		right: 1.5em;
		bottom: 1.5em;
	}

	.scroll-to-top a {
		width: 3em;
		height: 3em;
		line-height: 1;
		font-size: 1em;
		padding-top: 0.4em;
	}
	.scroll-to-top a::after {
		content: url(../images/fa-angle.png);
		top: 25%;
	}
}


@media (max-width: 575px) {
	.container {
		padding-left: 1.5em !important;
		padding-right: 1.5em !important;
	}
}
@media (min-width: 992px) {
	.container.sm {
		max-width: 768px;
	}
}

@media (min-width: 1200px) {
	.container.sm {
		max-width: 912px;
	}
}

/*END_container*/

/*-- //Reset-Code --*/

.bg-g{background-color: #ededf0 !important;}
.bg-lightblue{background-color: #f7faff !important;}
.bg-lightgray{background-color: #f7f7f7 !important;}
.bg-yellow{background-color: #ffedc7 !important;}
.bg-green{background-color: #008582!important;}

.bg-o{background-color: #f9c270 ;}
.bg-bk{background-color: #000 ;}
.bg-pink{background-color: #ba4c63;}

.bg-gray{background-color: #dcdcdc;}
.bg-blue{background-color: #344989;}
.bg-blue2{background-color: #5DA4D8;}

.bg-purple{background-color: #c6d6ee;}


.f-blue{color: #617D91;}
.f-pink{color: #e05c6f;}
.f-white{color: #FFFFFF;}
.f-green{color: #6E7455;}
.f-yellow{color: #F2D061!important;}

 .bg_banner{
	background-image: url("../images/bn_bg.png");
	background-position:center bottom!important;
	background-size: cover!important;
	-ms-background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
} 
.bg_th1{
	background-image: url("../images/pt1_bg.png");
	background-position:center bottom!important;
	background-size: cover!important;
	-ms-background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
} 



.bg_footer{
	background-color: #03474D;
}

@media screen and (max-width: 575px) {
	.bg_banner{
		background-image: url("../images/bn_bg_ph.png");
		background-position:center bottom 23%!important;
		background-size: cover!important;
		-ms-background-size: cover;
		-moz-background-size: cover;
		-webkit-background-size: cover;
	} 
	.bg_th1{
		background-image: url("../images/pt1_bg_ph.png");
		background-position:center bottom!important;
		background-size: cover!important;
		-ms-background-size: cover;
		-moz-background-size: cover;
		-webkit-background-size: cover;
	} 
}


/*BTN AREA*/
.topline{width:70px;}

/*BTNN*/
/* .hoverbig img{
	filter:drop-shadow(2px 2px 2px #303030);
} */
.hoverbig:hover img{
	transform: scale(1.1, 1.1);
	transition: 0.3s all;
	-webkit-transition: 0.3s all;
	-moz-transition: 0.3s all;
	-o-transition: 0.3s all;
	-ms-transition: 0.3s all;
filter:drop-shadow(0px 0px 0px #da9515);
}

a.btngo{
	font-size: 3vmin;
	line-height: 1.7;
	font-weight: bolder;
	color: #42210B;
	padding: 0.25em 0em 0.25em 0em;
  border-radius: 14px;
	filter:drop-shadow(1px 1px 2px #8d8d8d);
}

a.btngo:hover{
	color: #42210B;
	/* box-shadow: -2px 2px 0 rgba(100,100,100,.8); */
    transform: scale(1.1, 1.1);
	transition: 0.3s all;
	-webkit-transition: 0.3s all;
	-moz-transition: 0.3s all;
	-o-transition: 0.3s all;
	-ms-transition: 0.3s all;
	filter:drop-shadow(0px 0px 0px #8d8d8d);
}
/*BTNN*/
.hoverbig img {
	filter: drop-shadow(2px 2px 2px #303030);
}

.hoverbig:hover img {
	transform: scale(1.1, 1.1);
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-o-transition: 0.5s all;
	-ms-transition: 0.5s all;
	filter: drop-shadow(0px 0px 0px #303030);
}


.btngo .point {
	position: absolute;
  top: 5%;
  right: 13%;
    /* filter: drop-shadow(2px 2px 2px #303030); */
  width: 1.4em;
}

.btngo:hover .point {
	display: none;
}

.btngo:hover .linee {
	color: #83ff3b;
	border: 1px solid #83ff3b;
}

a .linelogo{
	width: 28%;
	padding:0 3px 5px 3px;
}

@media screen and (max-width: 575px) {
	a.btngo {
		font-size: 3.5vmin;
		padding: 0.25em 1em 0.25em 0em;
	}
	.btngo .point {
    right: 8%;
}
}
/*#BTNN*/
/*click*/
.click_box{
    position: relative;
}
.click_box:hover img{
   display: none;
}
.click_hand{
    position: absolute;
    filter:drop-shadow(2px 2px 2px #303030);
    width: 60px;
    z-index: 2;
}
/*##click*/

/*--------------header---------------*/


@media all and (max-width:425px) {}

@media all and (max-width:375px) {}

/*--------------#header---------------*/

/*-----------------------nav-------------------------------------*/

/*---------------------------Menu----------------------------*/

#mainNav {
width: 100%;
z-index: 2000;
left: 0;
bottom: unset;
width: 100%;
padding:1.5em 0 ;
}

#mainNav .maxline{
	padding: 0;
}

#mainNav li {
width: calc(calc(100% / 5));
text-align: center !important;
font-size: 1.4em;
line-height: 1.2;
vertical-align: middle;
margin:0.6em 0;
}

/* #mainNav li:not(:nth-last-child(1)) {
border-right: 1px solid var(--color-2) !important;
} */

#mainNav li a {
color: #fff;
font-weight:700 ;
display: inline-block;
padding: .35em .5em 0.3em .5em;
letter-spacing: 2px;
/* background-color: #003782; */
border: 8em;
width: 88%;
}

#mainNav li a:hover{
  color: #F3CB20;
}

#mainNav.ontop {
position: fixed;
top: 0;
/* left: 0; */
bottom: unset;
width: 100%;
background-color: #003782;
margin-bottom: 0em;
padding:0;
}

#mainNav.ontop .maxline {
	/* padding: 0 9em; */
}
#mainNav.ontop li {
	width: calc(calc(100% / 7));
	margin: 0.6em 0.5em
}


#mainNav.ontop li a {
	width: 90%;
}

#mainNav.ontop .shadow-f {
	filter: drop-shadow(3px 3px 0px #ffffff);
}

#mainNav.ontop .shadow-f:hover {
	filter: drop-shadow(2px 2px 1px #ffffff);
}

@media screen and (max-width: 1199px) {
#mainNav li {
	font-size: 1.3em;
}
}

@media screen and (max-width: 575px) {
#mainNav {
	font-size: 3vw;
	padding: 0.5em 0;
	bottom: 0;
}

#mainNav.ontop li {
	width: calc(calc(100% / 5.4));
	margin: 0.6em 0.1em;
}
.menuheight {
	height: 13em;
}
#mainNav.ontop li a {
	width: 100%;
}
#mainNav li a {
	width: 100%;
}

}

/**/
/*---------------------------#END_mainNav----------------------------*/
.bn-news{
	padding-bottom: 2em;
}

@media screen and (max-width: 575px) {
	.bn-news{
		padding: 2em 0;
	}
	
}

/*#BTNN*/
.shadow-f {
	filter: drop-shadow(4px 4px 1px #56603E);
}

.shadow-f:hover {
	filter: drop-shadow(rgb(86, 96, 62) 3px 3px 3px);
}


/*click*/
.click_box {
	position: relative;
	display: inline-block;
}

.click_box:hover img.click_hand,
.click_box.active img.click_hand {
	display: none;
}

.click_hand {
	position: absolute;
	filter: drop-shadow(2px 2px 2px #303030);
	width: 3em;
	z-index: 2;
}

/*##click*/


/*----------------page-top --------------------*/


#page-top .bn{
	width: 43%;
	padding: 4em 0;
}
/*MENU_BOX*/
#menu_box li.nav-item{width: 20%;}
#menu_box li a.nav-link{
	padding: 2.5em 0.5em !important; 
}

/*#MENU_BOX*/

@media screen and (max-width: 1300px) {
	#page-top .bn_tu{
		width: 69%;
    /* top: 10%; */
	}

	#menu_box li.nav-item {width: 20%;}
}
/*992~1200*/
@media screen and (max-width: 1000px) {

	#menu_box li.nav-item {width: 20%;}
	#menu_box li a.nav-link {
    padding: 1.5em 0.3em !important;
}

}
@media screen and (max-width: 575px) {
	#page-top .bn {
    width: 95%;
    padding: 2em 0 13em 0;
}
}

/*----------------#page-top --------------------*/

.line_btn .btngo{
	filter: drop-shadow(4px 5px 2px #8d8d8d);
}

/*----------------part2 --------------------*/
.pt2{
	margin: 8em 0 2em 0;
}

#part2 .line_btn{
	width: 80%;
}
@media screen and (max-width: 575px) {

	#part2 .line_btn{
		width: 100%;
	}
}
/*----------------#part2 --------------------*/


.f-ck{
	color: #00888F;
}
.f-pc{
	color: #A93135;
}
.f-sr{
	color: #0062A4;
}



/*---------------------------footerstyle------------------------------*/
.f-red{
	color: #e70e0e;
}


.footer_title h2{
	font-weight: 1000;
	color: #330707;
	font-size: 2em;
	padding: .5em 0;
}

.footer_title{
  width: 100%;
	background-color: #FBB03B;
}

#footer_02 .f_title {
	color: #fff;
	margin-bottom: .2em;
}

#footer_02 {
	padding-top: 2em;
	padding-bottom: 5em;
}

#footer_02 .f_sec {
	color: #fff;
	margin-bottom: .6em;
}

#footer_02 .f-color {
	color: #FBCA0E;
	border: 1px solid #FBCA0E;
	display: inline-block;
	padding: .2em .5em;
}

#footer_02 li {
	width: calc(100% / 6);
}

#footer_02 a.btngo {
	width: 90%;
	font-size: 1.6em;
	margin: 5px;
	line-height: 1.2;
	padding: .5em 0;
	background-color: #00888F;
	color: #fff;
	border-radius: 0;
	box-shadow: unset;
	border:0px;
	filter: drop-shadow(0px 0px 0px #8d8d8d);
}
.nav-link {
	display: block;
	padding: 0.5rem 0.5rem;
}

.ck-bg{
	background-color: #00888F!important;
}
.pc-bg{
	background-color: #A93135!important ;
}
.sr-bg{
	background-color: #0062A4 !important ;
}
.super-bg{
	background-color: #F08519 !important ;
}
.gold-bg{
	background-color: #DAB96B !important ;
}



#footer_02 a.btngo:hover {
	box-shadow: 2px 2px 2px rgba(80, 20, 25, 0.8);
}

@media screen and (max-width: 991px) {
	#footer_02 li {
		width: calc(100% / 3);
	}
}

@media screen and (max-width: 575px) {

	.footer_title h2 {
    font-size: 1.5em;
}

	#footer_02 {
		padding: 4em 0 3em 0;
	}

	#footer_02 .f_sec {
		margin-bottom: 1.5em;
	}

	
	#footer_02 li {
		margin-bottom: .6em;
	}

	#footer_02 a.btngo {
		margin: 1.6%;
		box-shadow: 4px 4px 0 rgba(80, 20, 25, 0.8);
	}
}

@media screen and (max-width:450px) {
	#footer_02 {
		font-size: 2.8vw !important;
	}
}

/*----------#end_footer----------*/
/*-------------------------------footer_copyright------------------------------*/

#footer_copyright {
	padding: 2em 0;
	background-color: #000000;
	color: rgba(255, 255, 255, 0.9);
	text-align: center;

}

#footer_copyright p {
	color: rgba(255, 255, 255, 0.6);
	line-height: 1.4;
}

@media screen and (max-width:575px) {
	#footer_copyright p {
		margin-bottom: 6em;
	}
	
}


/*----------#end_footer----------*/

/*---------------------------media------------------------------*/
@media screen and (max-width: 1400px) {
}
/*992~1200*/
@media screen and (max-width: 1199px) {
	
}/*576以上*/
@media screen and (min-width: 576px) {
.type_ph{display: none!important;}
	
}/*手機板575*/
@media screen and (max-width: 575px) {
section{padding-bottom: 1.2rem;padding-top: 1.2rem;}	
.type_pc{display: none!important;}

/* .container:not(.nolr){
    padding-left: 0!important;
    padding-right: 0!important;}	 */

}/*END(max-width: 575px)*/
@media screen and (max-width: 472px) {	


}/*END(max-width: 472px)*/
@media screen and (max-width: 420px) {


}
