@charset "utf-8";
/* CSS Document */



html, body,ul,li{
    margin: 0;
	padding: 0;
}
body{
	/* background-color: #4e6f07; */
}
/*** Normal Navigation CSS BOF ***/
.navbar-default {
  transition:all 0.5s ease;
  -webkit-transition:all 0.5s ease;
  -o-transition:all 0.5s ease; 
  -ms-transition:all 0.5s ease;
  -moz-transition:all 0.5s ease;
}

.normal-nav .navbar-default {
  background-color:transparent;
  border-color:transparent;
}

/*** On Scroll Navigation CSS BOF ***/
.normal-nav.on-scroll-nav .navbar-default {
  background-color: rgba(255, 255, 255, 0.9);
  border: 0;
}

/*-----social-icon-----*/

.social-box{
    width: 85px;
    display: block;
    position: fixed;
    right: 0;
    bottom: -40%;
    z-index: 900;
    transition:all 1s ease;
    -webkit-transition:all 1s ease;
    -o-transition:all 1s ease; 
    -ms-transition:all 1s ease;
    -moz-transition:all 1s ease;
    opacity: 0;
}
.social-box.switch-on{
    opacity: 1;
	bottom: 20%;
}
.social-icon{
    width: 100%;
    display: block;
    float: left;
}
.social-icon img{
    width: 100%;
	height: auto;
	max-width: 85px;
}

@media only screen and (max-width:1280px)
{
	.social-box 
	{
		width: 75px;
	}
}

@media only screen and (max-width:1024px)
{
	.social-box 
	{
		width: 65px;
	}
}

@media only screen and (max-width:800px)
{
	.social-box 
	{
		width: 60px;
	}
}


.fb-like{
	/* width: 50px; */
	display: block;
	float: left;
	/* margin: 25px 0 0 25px; */
}


/*-----menu------*/
.container-ouside{
    width: 100%;
	display: block;
	float: left;
	position: relative;
	height: 133px;
	
}

.pix-box{
	width: 87px;
	position: absolute;
	left: 14.5%;
	top: 58px;
	z-index: 1005;
    transition:all 0.3s ease;
    -webkit-transition:all 0.3s ease;
    -o-transition:all 0.3s ease; 
    -ms-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;	
}
.pix-box.switch-on{
	left: 14%;
	top: 52px;
}
.sina-box{
	width: 70px;
	position: absolute;
	left: 19%;
	top: 42px;
	z-index: 1005;
    transition:all 0.3s ease;
    -webkit-transition:all 0.3s ease;
    -o-transition:all 0.3s ease; 
    -ms-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;	
}
.sina-box.switch-on{
	left: 18%;
	top: 36px;
}
.first-inner-box{
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 999;
}

.header
{
    position: absolute;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    left: 4%;
    top: 2.3%;
}

@media only screen and (max-width:850px)
{
	.header 
	{
		left: 4%;
		top: 1.5%;
	}
}

.logo-box{
	width: 248px;
	/* display: block;
	left: 2%;
	top: 15px;
	position: absolute; */
	z-index: 950;
    transition:all 0.3s ease;
    -webkit-transition:all 0.3s ease;
    -o-transition:all 0.3s ease; 
    -ms-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
	opacity: 0;	
}

@media only screen and (max-width:1600px)
{
	.logo-box
	{
		width: 200px;
	}
}

@media only screen and (max-width:1280px)
{
	.logo-box
	{
		width: 160px;
	}
}

@media only screen and (max-width:850px)
{
	.logo-box
	{
		width: 120px;
	}
}

.logo-box img{
	width: 100%;
	height: auto;
	max-width: 248px;
}
.logo-box.switch-on {
	width: 155px;
	margin-top: 5px;
}
.logo-box.open{
	animation: bkrc 2.5s ease;
	opacity: 1;
}
.like-box{
	/* width: 100px;
	position: absolute;
	left: 12%;
	top: 30px; */
	z-index: 950;
    transition:all 0.3s ease;
    -webkit-transition:all 0.3s ease;
    -o-transition:all 0.3s ease; 
    -ms-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
}
.like-box.switch-on{
	left: 9%;
	top: 25px;
}
.like-box.open{
    animation: bkrc 2.5s ease;
}
.inter-line-space{
	border-left: 2px solid #56404d;
}
.button-a{
	display: block;
	float: right;
	margin-top: 50px;
	padding-left: 21px;
	padding-right: 23px;
	line-height: 10px;
}
.button-a a:link{
   color:#493541;
   text-decoration: none;
	transition:all 0.4s ease;
	-webkit-transition:all 0.4s ease;
	-o-transition:all 0.4s ease; 
	-ms-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;	
}
.button-a a:visited{
	color: #493541;
   text-decoration: none;
	transition:all 0.4s ease;
	-webkit-transition:all 0.4s ease;
	-o-transition:all 0.4s ease; 
	-ms-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;		
}
.button-a a:hover{
	color: #9f8896;
   text-decoration: none;
	transition:all 0.4s ease;
	-webkit-transition:all 0.4s ease;
	-o-transition:all 0.4s ease; 
	-ms-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;		
}
.button-b{
	display: block;
	float: right;
	margin-top: 50px;
	padding-right: 23px;
	line-height: 30px;
	text-decoration: none;
		
}
.button-b a:link{
   color:#fff;
   text-decoration: none;
	transition:all 0.4s ease;
	-webkit-transition:all 0.4s ease;
	-o-transition:all 0.4s ease; 
	-ms-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;	
}
.button-b a:visited{
	color: #fff;
   text-decoration: none;
	transition:all 0.4s ease;
	-webkit-transition:all 0.4s ease;
	-o-transition:all 0.4s ease; 
	-ms-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;	
}
.button-b a:hover{
	color: #000;
   text-decoration: none;
	transition:all 0.4s ease;
	-webkit-transition:all 0.4s ease;
	-o-transition:all 0.4s ease; 
	-ms-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;	
}
.inter-bu-a{
	margin-right: 50px;
}
.word-ctrl-1{
	font-family: 'Noto Sans TC','微軟正黑體' ;
	font-size: 27px;
	font-weight: 500;
    
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased; 
	
}
.word-ctrl-1 i{
    color:#fff;
}
.word-ctrl-1.word-on{
    color:#000;
}









.content-container{
  width: 100%;
  display: block;
  float: left;
}

.inter-background-first{
	background-image: url(../img/bn-background.jpg);
	background-repeat: no-repeat;
	background-position:center -30px;
	background-color: #4e6f07;
	opacity: 0;
}
.inter-background-first.open{
    animation: bkrc 1.5s ease;
	opacity: 1;
}
@keyframes bkrc{
	0%{
    -webkit-transform:translate(0,-150px);
    -moz-transform:translate(0,-150px);
    -o-transform:translate(0,-150px);
    transform:translate(0,-150px);
	opacity:0;
	}
	100%{
    -webkit-transform:translate(0,0);
    -moz-transform:translate(0,0);
    -o-transform:translate(0,0);
    transform:translate(0,0);
	opacity:1;
	}
}
.section-homepage-inner{
	width: 100%;
	display: block;
	margin: 0 auto;
}	

.rwd-product-main-box{
	width: 100%;
	display: block;
	position: relative;
	left: 0;
	top: 0;
	z-index: 10px;
	height: 1050px;
}

.banner
{
	background: url(../img/banner.jpg)no-repeat top center;
	/* height: 56vw; */
	height: 1080px;
    background-size: 100%;
}

@media only screen and (max-width:1920px)
{
	.banner
	{
		background-size: unset;
	}
}

@media only screen and (max-width:1600px)
{
	.banner
	{
		background-size: 120%;
    	height: 67.5vw;
	}
}





.g8-a1{
	width: 100%;
	display: block;
	left: 0;
	top: 25%;
	position: absolute;
	z-index: 20;
}
.g8-a1 img{
	width: 100%;
	height: auto;
	max-width: 1920px;
}

.bannermiddle-title{
	width: 52.08333333333333%;
	display: block;
	left: 19%;
	top: 27%;
	position: absolute;
	z-index: 14;
	opacity: 0;
}
.bannermiddle-title img{
	width: 100%;
	height: auto;
	max-width: 1000px;
}
.bannermiddle-title.open{
	animation: title-top 2.5s ease;
	opacity: 1;
}
@keyframes title-top{
	0%{
    -webkit-transform:translate(0,200px);
    -moz-transform:translate(0,200px);
    -o-transform:translate(0,200px);
    transform:translate(0,200px);
	opacity:0;
	}
	30%{
    -webkit-transform:translate(0,200px);
    -moz-transform:translate(0,200px);
    -o-transform:translate(0,200px);
    transform:translate(0,200px);
	opacity:0;
	}	
	100%{
    -webkit-transform:translate(0,0);
    -moz-transform:translate(0,0);
    -o-transform:translate(0,0);
    transform:translate(0,0);
	opacity:1;
	}
}
.bannertop{
	width: 100%;
	display: block;
	left: 0;
	top: -2%;
	position: absolute;
	z-index: 12;
	opacity: 0;
}
.bannertop img{
	width: 100%;
	height: auto;
	max-width: 1920px;
}
.bannertop.open{
	animation: bot-top 1.5s ease;
	opacity: 1;
}
@keyframes bot-top{
	0%{
    -webkit-transform:translate(0,150px);
    -moz-transform:translate(0,150px);
    -o-transform:translate(0,150px);
    transform:translate(0,150px);
	opacity:0;
	}
	100%{
    -webkit-transform:translate(0,0);
    -moz-transform:translate(0,0);
    -o-transform:translate(0,0);
    transform:translate(0,0);
	opacity:1;
	}
}


/*------section1-area---------*/

.section1{
	/* background-color: #4e6f07; */
}
.section-area{
    width: 100%;
	display: block;
	float: left;
}
.section-inner{
	width: 1366px;
	display: block;
	margin: 0 auto;
}

@media only screen and (max-width:1440px)
{
	.section-inner
	{
		width: 90%;
	}
}


.bg
{
	padding: 120px 0px;
}

@media only screen and (max-width: 1366px)
{
	.bg
	{
		padding: 100px 0px;
	}
}

@media only screen and (max-width: 1024px)
{
	.bg
	{
		padding: 80px 0px;
	}
}

@media only screen and (max-width: 600px)
{
	.bg
	{
		padding: 60px 0px;
	}
}




.title
{
	text-align: center;
    width: 30%;
    margin: auto;
}

@media only screen and (max-width:900px)
{
	.title
	{
		width: 35%;
	}
}

@media only screen and (max-width:650px)
{
	.title
	{
		width: 45%;
	}
}

@media only screen and (max-width:480px)
{
	.title
	{
		width: 60%;
	}
}

.title img
{
	width: 100%;
	max-width: 394px;
	height: auto;
}

.s_title
{
	text-align: center;
    width: 70%;
    margin: auto;
}

@media only screen and (max-width:414px)
{
	.s_title
	{
		width: 85%;
	}
}

.s_title img
{
	width: 100%;
	max-width: 366px;
	height: auto;
}


.about_word_bg
{
	background: url("../img/about_word_bg.jpg") no-repeat bottom right 5%;
}

@media only screen and (max-width:1366px)
{
	.about_word_bg
	{
		background-size: 45%;
	}
}




.flex_box
{
	display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}


.flex_pic
{
	width: 50%;
}

.about_pic
{
	width: 100%;
	max-width: 682px;
	height: auto;
}

.flex_word
{
	width: 45%;	
	margin-left: 5%;
}

.flex_word2
{
	margin-left: 0px;
    margin-right: 5%;
}


.section1 .flex_word
{
	padding: 40px 0px;
    border: 2px #80a6d4 solid;
    border-left: unset;
    border-right: unset;
}

@media only screen and (max-width:1280px)
{
	.section1 .flex_word 
	{
		padding: 20px 0px;
	}
}

.section1 .flex_word span
{
	color: #387fd3;
}



@media only screen and (max-width:800px)
{
	.flex_box
	{
		margin-top: 40px;
		flex-wrap: wrap;
	}

	.flex_pic 
	{
		width: 100%;
		text-align: center;
		order: -1;
	}

	.flex_word 
	{
		width: 90%;
		margin: 40px 0px 0px;
	}

	.section1 .flex_word 
	{
		margin-bottom: 60px;
	}

	.about_word_bg 
	{
		background-size: 100%;
		background: url(../img/about_word_bg.jpg) no-repeat bottom center;
	}
}


@media only screen and (max-width:600px)
{
	.flex_word 
	{
		margin: 30px 0px 0px;
	}

	.about_word_bg 
	{
		background:unset;
	}
}






.main-box-pulic{
	width: 100%;
	display: block;
	float: left;
}
.box-left-right{
	width: 50%;
	display: block;
	float: left;
}
.photo-ctrl-a img{
	width: 100%;
	max-width: 618px;
	height: auto;

}
.photo-ctrl-b img{
	width: 100%;
	max-width: 554px;
	height: auto;

}
.photo-ctrl-c img{
	width: 100%;
	max-width: 574px;
	height: auto;

}
.photo-ctrl-d img{
	width: 100%;
	max-width: 520px;
	height: auto;
}
.photo-ctrl-e img{
	width: 100%;
	max-width: 683px;
	height: auto;
}

.aligncenterctrl{
    text-align: center;
}
.box-left-right ul{
	width: 100%;
	display: block;
	float: left;
	list-style-type: none;
}
.box-left-right ul li{
	width: 100%;
	display: block;
	float: left;
	list-style-type: none;
}
.white-font-public-ctrl{
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 25px;
	line-height: 48px;
	font-weight: 300;
	color: #fff;
}
.black-font-public-ctrl{
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 25px;
	line-height: 48px;
	font-weight: 500;
	color: #595757;
}
.main-box-pulic span{
	font-weight: 700;
	color: #ffeebe;
}
.white-bold-font-color-ctrl{
	font-weight: 500;
	color: #ffeebe;
}
.main-box-pulic .color-as3-white span{
	font-weight: 700;
	color: #fff;
}




.title-section1{
	text-align: center;
}
.title-section1 img{
	width: 100%;
	max-width: 381px;
	height: auto;
}
.inner-ninty-block{
	width: 90%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.ninty-five-block{
	width: 95%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}


.title-a1{
	text-align: center;
}
.title-a1 img{
	width: 100%;
	max-width: 338px;
	height: auto;
}


/*--section2----*/
.section2
{
	background-color: #80a6d4;
	position: relative;
}

.section2::before
{
	content: "";
    position: absolute;
    width: 100%;
	background: url(../img/pro_bg_top.png)no-repeat top center;
	background-size: 100%;
    height: 40px;
    top: -39px;
    left: 0px;
}

.section2::after
{
	content: "";
    position: absolute;
    width: 100%;
	background: url(../img/pro_bg_bottom.png)no-repeat bottom center;
	background-size: 100%;
    height: 40px;
    bottom: -39px;
    left: 0px;
}

@media only screen and (max-width:1920px)
{
	.section2::before
	{
		background-size: unset;
	}

	.section2::after
	{
		background-size: unset;
	}
}

.pro_word
{
	text-align: center;
    width: 75%;
    margin: auto;
}

@media only screen and (max-width:800px)
{
	.pro_word
	{
		width: 90%;
	}
}

.section2 .pro_word span
{
	color: #1910a4;
}

.pro_pic01
{
	width: 100%;
	max-width: 683px;
	height: auto;
}

.pro_pic02
{
	width: 100%;
	max-width: 678px;
	height: auto;
}




.section3
{
	margin-top: 40px;
}

.activity_pic01
{
	width: 100%;
	max-width: 625px;
	height: auto;
}

.activity_pic02
{
	width: 100%;
	max-width: 630px;
	height: auto;
}

.section3 .flex_word span
{
	color: #80a6d4;
}

.section3 .flex_word2 span
{
	color: #ea9c68;
}

.activity_all_box
{
	margin: 120px 0px;
}

@media only screen and (max-width: 1366px)
{
	.activity_all_box
	{
		margin: 100px 0px;
	}
}

@media only screen and (max-width: 1024px)
{
	.activity_all_box
	{
		margin: 80px 0px;
	}
}

@media only screen and (max-width: 600px)
{
	.activity_all_box
	{
		margin: 60px 0px;
	}
}



.activity_box
{
	display: flex;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
	background: #fbe1cc;
	margin: 40px 0px;
}

.activity_icon
{
	background: #387fd3;
	width: 193px;
	display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.activity_box:nth-child(2) .activity_icon
{
	background: #e5813e;
}


.activity_icon img
{
	width: 100%;
	max-width: 193px;
	height: auto;
}

.activity_word
{
	width: calc(100% - 193px);
	padding: 20px 3%;
	display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}

@media only screen and (max-width:1366px)
{
	.activity_word
	{
		padding: 30px 5%;
	}
}

.activity_title
{
	color: #387fd3;
	font-size: 30px;
	width: 100%;
}

.activity_box:nth-child(2) .activity_title
{
	color: #e5813e;
}

@media only screen and (max-width:1440px)
{
	.activity_title
	{
		font-size: 28px;
	}
}

@media only screen and (max-width:1280px)
{
	.activity_title
	{
		font-size: 26px;
	}
}

@media only screen and (max-width:1024px)
{
	.activity_title
	{
		font-size: 24px;
	}
}

@media only screen and (max-width:800px)
{
	.activity_icon 
	{
		width: 25%;
	}

	.activity_word 
	{
		width: 75%;
		padding: 20px 5%;
	}
}

@media only screen and (max-width:600px)
{
	.activity_box 
	{
		flex-wrap: wrap;
	}

	.activity_icon 
	{
		width: 100%;
	}

	.activity_word 
	{
		width: 100%;
		padding: 25px 6%;
		text-align: center;
	}
}



.list_all_box
{
	width: 100%;
}

.list_title
{
	text-align: center;
	width: 100%;
}

.list_title_word
{
	background: #e5813e;
    display: inline-block;
    padding: 0px 20px;
	border-radius: 50px;
	font-size: 30px;
}

@media only screen and (max-width:1440px)
{
	.list_title_word
	{
		font-size: 28px;
	}
}

@media only screen and (max-width:1280px)
{
	.list_title_word
	{
		font-size: 26px;
	}
}

@media only screen and (max-width:1024px)
{
	.list_title_word
	{
		font-size: 24px;
	}
}

.list_all_box2
{
	margin-bottom: 0px;
}

.list_all_box2 .list_title_word
{
	background: #387fd3;
}

.list_box
{
	display: flex;
    justify-content: flex-start;
    align-items: flex-start;
	align-content: flex-start;
	padding: 20px 0px;
}

.list_num
{
	background: #ea9c68;
    color: #FFFFFF;
    width: 45px;
    height: 45px;
    text-align: center;
    border-radius: 50%;
}

.list_all_box2 .list_num
{
	background: #387fd3;
}

.list_word
{
	width: calc(100% - 45px);
	padding-left: 20px;
}

.list_all_box .list_word span
{
	color: #ea9c68;
}

.list_all_box2 .list_word span
{
	color: #387fd3;
}

@media only screen and (max-width:1024px)
{
	.list_num
	{
		width: 35px;
		height: 35px;
	}
}

@media only screen and (max-width:800px)
{
	.list_num
	{
		width: 40px;
		height: 40px;
	}
}

@media only screen and (max-width:480px)
{
	.list_box 
	{
		padding: 15px 0px;
	}

	.list_word 
	{
		padding-left: 15px;
	}
}


.section4
{
	background: #84a316;
	position: relative;
}

.section4::before
{
	content: "";
    position: absolute;
    width: 100%;
	background: url(../img/trans_top.png)no-repeat top center;
	background-size: 100%;
    height: 40px;
    top: -39px;
    left: 0px;
}

@media only screen and (max-width:1920px)
{
	.section4::before
	{
		background-size: unset;
	}
}




/* trans */

.trans_box
{
	width: 85%;
    margin: 3.5vw auto 0px;
	
}

.trans_box .transtyle
{
	display: flex;
    justify-content: flex-start;
    align-items: flex-start;
	align-content: flex-start;
	margin-bottom: 40px;
}

.trans_box .transtyle .trans_word, .trans_box .trans_s_title, .trans_box .transtyle .trans_s_box .trans_s_word, .trans_box .final_trans_box .final_transtyle .ma2
{
	/* font-size: 30px; */
	color:#454f0a;
	font-family: "微軟正黑體";
}

.trans_box .transtyle .trans_word
{
	width: 210px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
}

.trans_box .transtyle .trans_word input[type="checkbox"], .trans_box .final_trans_box .final_transtyle input[type="checkbox"]
{
	width: 25px;
	height: 25px;
	-webkit-appearance: none;
    -moz-appearance: none;
	appearance: none;
	border: none;
    position: relative;
    left: 0px;
	top: 1px;
	margin-right: 20px;
}

.trans_box .transtyle .trans_word input[type="checkbox"]::after, .trans_box .final_trans_box .final_transtyle input[type="checkbox"]::after
{
	position: absolute;
    width: 25px;
    height: 25px;
    content: " ";
    background: #FFFFFF;
    /* background-size: 80%; */
    display: inline-block;
    visibility: visible;
    padding: 0px 3px;
	border-radius: 0px;
	border: 1px #9F9D68 solid;
}

.trans_box .transtyle .trans_word input[type="checkbox"]:checked::before, .trans_box .final_trans_box .final_transtyle input[type="checkbox"]:checked::before
{
    content: "";
    width: 16px;
    height: 16px;
    display: block;
    position: absolute;
    z-index: 10;
    background:#9F9D68;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.trans_box .transtyle .trans_s_box
{
	width: calc(100% - 210px);
}

.trans_box .transtyle .trans_s_box input
{
	width: 100%;
	height: 50px;
	border: 1px #9F9D68 solid;
	font-size: 30px;
}

.trans_box .transtyle .trans_s_box .trans_s_style
{
	display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
	width: 100%;
}

.trans_box .transtyle .trans_s_box .trans_margin_bottom
{
	margin-bottom: 40px;
}

.trans_box .transtyle .trans_s_box .trans_s_style .trans_s_word
{
	width: 210px;
}

.trans_box .transtyle .trans_s_box .trans_s_style .trans_s_s_box
{
	width: calc(100% - 210px);
}

.trans_box .trans_s_title
{
	margin-bottom: 40px;
}

.trans_box .transtyle_line
{
    border-top: 1px #2c3a06 solid;
    padding: 50px 0px;
}

.trans_box .final_robot_box
{
    margin: auto;
    text-align: center;
}

.g-recaptcha
{
	text-align: center;
    display: inline-block;
}

.trans_box .final_robot_box img
{
	max-width: 450px;
	width: 100%;
	margin: auto;
}

.trans_box .final_trans_box
{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.trans_box .final_trans_box .final_transtyle
{
    display: flex;
    justify-content: flex-start;
    align-items: center;
	align-content: center;
	padding: 0px 50px;
}

.trans_box .final_trans_box .final_transtyle a
{
    color: #595757;
}

.trans_box .trans_btn
{
    font-size: 40px;
    font-family: "微軟正黑體";
    text-align: center;
	padding: 70px;
    /* padding-bottom: 140px; */
}

.trans_box .trans_btn a
{
	display: inline-block;
    color: #FFFFFF;
    background: #9b6a24;
	padding: 10px 80px;
	transition: .5s;
}

.trans_box .trans_btn a:hover
{
	background: #2c3a06;
	text-decoration:none;
}






.copyright
{
	display: block;
    text-align: center;
    width: 100%;
    font-family: "微軟正黑體";
    background: #314203;
}

@media only screen and (max-width : 1440px)
{
	.trans_box .transtyle .trans_word, .trans_box .trans_s_title, .trans_box .transtyle .trans_s_box .trans_s_word, .trans_box .final_trans_box .final_transtyle .ma2 
	{
		/* font-size: 26px; */
	}

	.trans_box .transtyle .trans_s_box input
	{
		font-size: 26px;
	}

	.trans_box .transtyle .trans_word 
	{
		width: 195px;
	}

	.trans_box .transtyle .trans_s_box 
	{
		width: calc(100% - 195px);
	}

	.trans_box .transtyle .trans_s_box .trans_s_style .trans_s_word 
	{
		width: 195px;
	}

	.trans_box .transtyle .trans_s_box .trans_s_style .trans_s_s_box 
	{
		width: calc(100% - 195px);
	}

	.trans_box .trans_btn 
	{
		font-size: 30px;
	}

	.copyright 
	{
		font-size: 26px;
	}
}

@media only screen and (max-width : 1366px)
{
	.trans_box 
	{
		width: 100%;
	}
}

@media only screen and (max-width : 1280px)
{
	.trans_box .transtyle .trans_word 
	{
		width: 180px;
	}

	.trans_box .transtyle .trans_s_box 
	{
		width: calc(100% - 180px);
	}

	.trans_box .transtyle .trans_s_box .trans_s_style .trans_s_word 
	{
		width: 180px;
	}

	.trans_box .transtyle .trans_s_box .trans_s_style .trans_s_s_box 
	{
		width: calc(100% - 180px);
	}
}

@media only screen and (max-width : 1024px)
{
	.trans_box .transtyle .trans_word, .trans_box .trans_s_title, .trans_box .transtyle .trans_s_box .trans_s_word, .trans_box .final_trans_box .final_transtyle .ma2 
	{
		/* font-size: 20px; */
	}

	.trans_box .transtyle .trans_s_box input 
	{
		font-size: 20px;
		height: 40px;
	}

	.trans_box .transtyle .trans_word 
	{
		width: 155px;
	}

	.trans_box .transtyle .trans_s_box 
	{
		width: calc(100% - 155px);
	}

	.trans_box .transtyle .trans_s_box .trans_s_style .trans_s_word 
	{
		width: 155px;
	}

	.trans_box .transtyle .trans_s_box .trans_s_style .trans_s_s_box 
	{
		width: calc(100% - 155px);
	}

	.trans_box .trans_btn 
	{
		font-size: 22px;
	}

	.copyright 
	{
		font-size: 20px;
	}
}


@media only screen and (max-width : 800px)
{
	.trans_box .transtyle 
	{
		flex-wrap: wrap;
		margin-bottom: 30px;
	}

	.trans_box .trans_s_title 
	{
		margin-bottom: 30px;
	}

	.trans_box .transtyle .trans_word 
	{
		width: 170px;
	}

	.trans_box .transtyle .trans_s_box 
	{
		width: calc(100% - 170px);
	}

	.trans_box .transtyle .trans_s_box .trans_s_style .trans_s_word 
	{
		width: 170px;
	}

	.trans_box .transtyle .trans_s_box .trans_s_style .trans_s_s_box 
	{
		width: calc(100% - 170px);
	}

	.trans_box .transtyle .trans_s_box2
	{
		width: 100%;
	}

	.trans_box .transtyle .trans_word2
	{
		margin-top: 10px;
		margin-bottom: 30px;
	}

	.trans_box .transtyle .trans_s_box .trans_margin_bottom 
	{
		margin-bottom: 30px;
	}

	.trans_box .transtyle_line 
	{
		padding: 40px 0px;
	}

	.trans_box .final_robot_box 
	{
		margin: 60px auto 0px;
	}

	.trans_box .final_trans_box .final_transtyle 
	{
		padding: 0px 25px;
	}

	.trans_box .trans_btn a 
	{
		padding: 5px 60px;
	}

}


@media only screen and (max-width : 600px)
{
	.trans_box .transtyle .trans_s_box 
	{
		width: 100%;
	}

	.trans_box .transtyle .trans_s_box .trans_s_style 
	{
		flex-wrap: wrap;
	}

	.trans_box .transtyle .trans_s_box .trans_s_style .trans_s_s_box 
	{
		width: 100%;
	}

	.trans_box .final_trans_box 
	{
		flex-wrap: wrap;
	}

	.trans_box .final_trans_box .final_transtyle 
	{
		width: 249px;
	}


}













.section5{
	/* background-color: #4d542e; */
	line-height: 180px;
	color: #fff5b1;
	text-align: center;
	font-size: 25px;
	font-family: 'Noto Sans TC', sans-serif;
	font-weight: 400;
}
.title-a2{
	text-align: center;
}
.title-a2 img{
	width: 100%;
	max-width: 363px;
	height: auto;
}
.title-a3{
	text-align: center;
}
.title-a3 img{
	width: 100%;
	max-width: 398px;
	height: auto;
}
.title-a4{
	text-align: center;
}
.title-a4 img{
	width: 100%;
	max-width: 444px;
	height: auto;
}
.title-a5{
	text-align: center;
}
.title-a5 img{
	width: 100%;
	max-width: 446px;
	height: auto;
}
.title-a6{
	text-align: center;
}
.title-a6 img{
	width: 100%;
	max-width: 441px;
	height: auto;
}
/*----public-ctrl-height---------*/
.ctrl-marginheight-a1{
   margin-top: 150px;
}

.a30px-mar-top{
   margin-top: 30px;
}

.a40px-mar-top{
   margin-top: 40px;
}
.a50px-mar-top{
   margin-top: 50px;
}
.a60px-mar-top{
   margin-top: 60px;
}

.a70px-mar-top{
   margin-top: 70px;
}
.a70px-mar-bottom{
   padding-bottom: 70px;
}
.a110px-mar-top{
   margin-top: 110px;
}
.a150px-mar-top{
   margin-top: 150px;
}
.a140px-padding-bottom{
   padding-bottom: 140px;
}
/*----public-ctrl-height---------*/

.flow-chart img{
	width: 100%;
	max-width: 1366px;
	height: auto;
}
.switch-off{
	width: 100%;
	display: none;
	float: left;
}
.switch-off img{
    width: 100%;
	max-width: 480px;
	height: auto;
}
.off-2-switch{
    display: none;
}
.on-2-switch{
    display: block;
}


@media only screen and (max-width : 1680px){
.rwd-product-main-box{
	height: 980px;
}
.like-box{
	/* left: 14%;
	top: 30px; */
    transition:all 0.3s ease;
    -webkit-transition:all 0.3s ease;
    -o-transition:all 0.3s ease; 
    -ms-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
}
.bannermiddle-title{
	left: 19%;
	top: 25%;
}
}
@media only screen and (max-width : 1440px){
.white-font-public-ctrl{
	font-size: 24px;
	line-height: 45px;
}
.black-font-public-ctrl{
	font-size: 24px;
	line-height: 45px;
}
.rwd-product-main-box{
	height: 900px;
}
.bannertop{
	top: 0;
}
.like-box{
	/* left: 16%;
	top: 30px; */
    transition:all 0.3s ease;
    -webkit-transition:all 0.3s ease;
    -o-transition:all 0.3s ease; 
    -ms-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
}

}
@media only screen and (max-width : 1366px){
.white-font-public-ctrl{
	font-size: 23px;
	line-height: 45px;
}
.black-font-public-ctrl{
	font-size: 23px;
	line-height: 45px;
}
.rwd-product-main-box{
	height: 768px;
}
/* .section-inner{
	width: 1280px;
} */
}
@media only screen and (max-width : 1280px){
.white-font-public-ctrl{
	font-size: 22px;
	line-height: 45px;
}
.black-font-public-ctrl{
	font-size: 22px;
	line-height: 45px;
}
.rwd-product-main-box{
	height: 820px;
}
/* .section-inner{
	width: 1200px;
} */
}
@media only screen and (max-width : 1024px){
.inter-background-first{
	background-position:center 0px;
	background-size: 130% auto;
}
/* .section-inner{
	width: 960px;
} */
.rwd-product-main-box{
	height: 768px;
}
.g8-a1{
	left: 0;
	top: 38%;
}
.bannermiddle-title{
	left: 19%;
	top: 38%;
	
}
.bannertop{
	top: 17%;
}
.like-box{
	/* left: 20%;
	top: 30px; */
    transition:all 0.3s ease;
    -webkit-transition:all 0.3s ease;
    -o-transition:all 0.3s ease; 
    -ms-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
}
.white-font-public-ctrl{
	font-size: 18px;
	line-height: 35px;
}
.black-font-public-ctrl{
	font-size: 18px;
	line-height: 35px;
}
.a40px-mar-top{
	margin-top: 10px;
}
.a30px-mar-top{
	margin-top: 20px;
}
.a70px-mar-top{
   margin-top: 40px;
}
}
@media only screen and (max-width : 800px){
.inter-background-first{
	background-position:center 0px;
	background-size: 200% auto;
}
/* .section-inner{
	width: 95%;
} */
.rwd-product-main-box{
	height: 500px;
}
.g8-a1{
	left: 0;
	top: 45%;
}
.bannermiddle-title{
	left: 14%;
	top: 42%;
	width: 60%;
}
.bannertop{
	top: 28%;
}
	
.like-box{
	/* left: 25%;
	top: 30px; */
    transition:all 0.3s ease;
    -webkit-transition:all 0.3s ease;
    -o-transition:all 0.3s ease; 
    -ms-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
}
.box-left-right{
	width: 100%;
}
.aligncenterctrl{
	text-align: center;
}
.white-font-public-ctrl{
	font-size: 22px;
	line-height: 40px;
}
.black-font-public-ctrl{
	font-size: 22px;
	line-height: 40px;
}
.off-2-switch{
    display: block;
}
.on-2-switch{
    display: none;
}
.rwd-ninty-block{
	width: 90%;
	display: block;
	margin-left: auto;
	margin-right: auto;	
}
.flow-chart-2 img{
	width: 100%;
	max-width: 640px;
	height: auto;
}
}
@media only screen and (max-width : 768px){
.g8-a1{
	left: 0;
	top: 45%;
}
.bannermiddle-title{
	left: 12%;
	top: 39%;
	width: 65%;
}
.bannertop{
	top: 20%;
}
}
@media only screen and (max-width : 600px){
.g8-a1{
	left: 0;
	top: 50%;
}
.bannermiddle-title{
	left: 12%;
	top: 44%;
	width: 65%;
}
.bannertop{
	top: 30%;
}
.like-box{
	/* left: 33%;
	top: 30px; */
    transition:all 0.3s ease;
    -webkit-transition:all 0.3s ease;
    -o-transition:all 0.3s ease; 
    -ms-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
}
.ctrl-marginheight-a1{
   margin-top: 50px;
}
}
@media only screen and (max-width : 480px){
.banner{
	display: none;
}
/* .switch-on{
	display: none;
} */
.inter-background-first{
	background-image: none;
}
.switch-off{
	display: block;
}
.like-box{
	/* left: 33%;
	top: 30px; */
    transition:all 0.3s ease;
    -webkit-transition:all 0.3s ease;
    -o-transition:all 0.3s ease; 
    -ms-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
}
.logo-box{
	width: 170px;
	left: 2%;
	top: 15px;
    transition:all 0.3s ease;
    -webkit-transition:all 0.3s ease;
    -o-transition:all 0.3s ease; 
    -ms-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
}
.section4{
	font-size: 20px;
}
}
@media only screen and (max-width : 414px){
.like-box{
	/* left: 2%;
	top: 0px; */
    transition:all 0.3s ease;
    -webkit-transition:all 0.3s ease;
    -o-transition:all 0.3s ease; 
    -ms-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	margin-top: 15px;
}

.logo-box{
	display: none;
}
.white-font-public-ctrl{
	font-size: 20px;
	line-height: 40px;
}
.black-font-public-ctrl{
	font-size: 20px;
	line-height: 40px;
}
/* .section-inner{
	width: 90%;
} */
.a70px-mar-top{
   margin-top: 0px;
}
}
@media only screen and (max-width : 375px){
.section4{
	font-size: 18px;
}
}
@media only screen and (max-width : 360px){

}
@media only screen and (max-width : 320px){
.section4{
	font-size: 16px;
}
}





.margin_top
{
	margin-top: 40px;
}