.bar {
    width: 70px;
    position: fixed;
    z-index: 99;
    right: 15px;
    bottom: 30px;
}


@media screen and (max-width: 600px) {
    .bar {
        width: 70px;
        position: fixed;
        z-index: 99;
        right: 5px;
        bottom: 10px;
    }
}










.video-container {

position: relative;

padding-bottom: 56.25%;

padding-top: 30px;

height: 0;

overflow: hidden;

}

.video-container iframe, .video-container object, .video-container embed {

position: absolute;

top: 0;left: 0;

width: 100%;

height: 100%;}


.navbar-brand img{
max-width: 600px !important;
}

 @media screen and (max-width : 1500px) {

.navbar-brand img{
max-width: 500px !important;
}

}



 @media screen and (max-width : 1400px) {

.navbar-brand img{
max-width: 450px !important;
}

}


 @media screen and (max-width : 1300px) {

.navbar-brand img{
max-width: 400px !important;
}

}

 @media screen and (max-width : 1250px) {

.navbar-brand img{
max-width: 300px !important;
}

}

 @media screen and (max-width : 1000px) {

.navbar-brand img{
max-width: 250px !important;
}

}


 @media screen and (max-width : 800px) {

.navbar-brand img{
max-width: 600px !important;
}

}

.site-header .navbar-brand .phone img {
    width: 88%;
}


.line{
	border: thin solid #628e48;
	overflow:hidden;
}


.addicon{
	display:block;
	width: 31px !important;
	margin-right: 10px;
	float: left;
}

.addicon img{
width: 100%;

}


.mt-30{
	margin-top: 50px;
	margin-bottom: 80px;
}



.mt-80{
	margin-top: 140px;
}

.faq-pg-section{
	background-color: #628e48;
	padding-top: 50px;
	padding-bottom: 50px;
}


.aboutzone-section-s2 {
	padding-bottom: 90px;
	max-height: 1250px;
	background-image: url(../images/abg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-color: #202221;
}

.customerzone-section-s2 {
	padding-bottom: 90px;
	max-height: 900px;
	background-image: url(../images/cubg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
}



.czone-section-s2 {
	padding-top: 60px;
	padding-bottom: 60px;
	max-height: 1250px;
	background-image: url(../images/cbg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
    background-position: center center;
}


.pb-300{
	padding-bottom: 800px;
}


@media screen and (max-width : 800px) {

.pb-300{
	padding-bottom: 400px;
}

.czone-section-s2 {
	padding-top: 60px;
	padding-bottom: 60px;
	max-height: 1250px;
	background-image: url(../images/cbg-phone.jpg);
	background-repeat: no-repeat;
	background-size: cover;
    background-position: center center;
}

}



.floatr {
   float: right !important;
}

.addred {
	background-color: #628e48;
	height: 50px;
	width: 100%;
}

.addred-1 {
	background-color: #628e48;
	height: 8px;
	width: 100%;
}

.addred-2 {
	background-color: #628e48;
	height: 8px;
	width: 100%;
}

.addred2 {
	background-color: #628e48;
	height: 250px;
	width: 100%;
	overflow:hidden;
}





.addred3 {
	background-color: #628e48;
	height: 50px;
	width: 100%;
}

.addred4 {
	background-color: #ffffff;
	height: 250px;
	width: 100%;
	overflow:hidden;
}

.addred5 {
	height: 250px;
	width: 100%;
	overflow:hidden;
}






.addwd01 {
	width: 180px;
	font-size: 22px;
	line-height: 35px;
	text-align: left;
	color: #FFFFFF;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	font-weight: bold;
}

.addwd01 span {
	font-size: 22px;
	line-height: 35px;
	text-align: left;
	color: #FFFFFF;
	font-family: 'Caveat', cursive;
	font-family: 'Mulish', sans-serif;
	font-family: 'Noto Sans TC', sans-serif!important;
	font-weight: normal;
	letter-spacing: 1px;
}


.addwd01-1 {
	width: 200px;
	font-size: 22px;
	line-height: 35px;
	text-align: left;
	color: #FFFFFF;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	font-weight: bold;

}

.addwd01-1 span {
	font-size: 22px;
	line-height: 35px;
	text-align: left;
	color: #FFFFFF;
	font-family: 'Caveat', cursive;
	font-family: 'Mulish', sans-serif;
	font-family: 'Noto Sans TC', sans-serif!important;
	font-weight: normal;
	letter-spacing: 1px;
}

.addwd02 {
	width: 200px;
	font-size: 22px;
	line-height: 35px;
	color: #3f3b3a;
	float: left;
	text-align: left;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	font-weight: bold;
}



.addwd02 span {
	font-size: 22px;
	line-height: 35px;
	color: #3f3b3a;
	float: left;
	text-align: left;
	font-family: 'Caveat', cursive;
	font-family: 'Mulish', sans-serif;
	font-family: 'Noto Sans TC', sans-serif!important;
	font-weight: normal;
	letter-spacing: 1px;
}


.addwd03 {
	text-align: right;
	color: #3f3b3a;
	float: right;
}
.addwd04 {
	width: 250px;
	font-size: 22px;
	line-height: 35px;
	float: left;
	text-align: left;
	color: #FFFFFF;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	font-weight: bold;
}

.addwd04 span {
	font-size: 22px;
	line-height: 35px;
	float: left;
	text-align: left;
	color: #FFFFFF;
	font-family: 'Caveat', cursive;
	font-family: 'Mulish', sans-serif;
	font-family: 'Noto Sans TC', sans-serif!important;
	font-weight: normal;
	letter-spacing: 1px;
}

.addwd05 {
	color: #FFF;
	float: right;
}

.addwd06 {
	font-size: 25px;
	line-height: 40px;
	font-weight: bold;
	color: #FFFFFF;
}

.addwd07 {
	font-size: 18px;
	line-height: 35px;
	color: #FFFFFF;
}


 @media screen and (max-width : 800px) {
 
 .addwd01 {
	width: 180px;
	font-size: 18px;
	line-height: 25px;
	font-weight: bold;
	text-align: left;
	color: #FFFFFF;
}

.addwd01 span {
	font-size: 18px;
	line-height: 25px;
	text-align: left;
	color: #FFFFFF;
	font-family: 'Caveat', cursive;
	font-family: 'Mulish', sans-serif;
	font-family: 'Noto Sans TC', sans-serif!important;
	font-weight: normal;
	letter-spacing: 1px;
}
 
 
 .addwd01-1 {
	width: 200px;
	font-size: 18px;
	line-height: 25px;
	text-align: left;
	color: #FFFFFF;
}

.addwd01-1 span {
	font-size: 18px;
	line-height: 25px;
	text-align: left;
	color: #FFFFFF;
	font-family: 'Caveat', cursive;
	font-family: 'Mulish', sans-serif;
	font-family: 'Noto Sans TC', sans-serif!important;
	font-weight: normal;
	letter-spacing: 1px;
}
 

.addwd06 {
	font-size: 20px;
	line-height: 35px;
	font-weight: bold;
	color: #FFFFFF;
}

.addwd07 {
	font-size: 15px;
	line-height: 25px;
	color: #FFFFFF;
}

.addwd02 {
	width: 180px;
	font-size: 18px;
	line-height: 25px;
	color: #3f3b3a;
	float: left;
	text-align: left;
}

.addwd02 span {
	font-size: 18px;
	line-height: 25px;
	color: #3f3b3a;
	float: left;
	text-align: left;
	font-family: 'Caveat', cursive;
	font-family: 'Mulish', sans-serif;
	font-family: 'Noto Sans TC', sans-serif!important;
	font-weight: normal;
	letter-spacing: 1px;
}


.addwd04 {
	width: 250px;
	font-size: 18px;
	line-height: 25px;
	float: left;
	text-align: left;
	color: #FFFFFF;
}

.addwd04 span {
	font-size: 18px;
	line-height: 25px;
	float: left;
	text-align: left;
	color: #FFFFFF;
	font-family: 'Caveat', cursive;
	font-family: 'Mulish', sans-serif;
	font-family: 'Noto Sans TC', sans-serif!important;
	font-weight: normal;
	letter-spacing: 1px;
}

}



.hr2 {
    height: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;

}

.hr2 {
	margin-top: 20px;
	margin-bottom: 20px;
	border: 0;
	border-top: 1px solid #606060;
	float: left;
	width: 100%;
}


.hr3 {
    height: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;

}

.hr3 {
	margin-top: 20px;
	margin-bottom: 20px;
	border: 0;
	border-top: 1px solid #FFF;
	float: left;
	width: 100%;
}



.box1-1 {
	width: 100%;
	overflow:hidden;
	background-color: #ae3b40;	
}

.box1-2 {
	width: 100%;
	overflow:hidden;
	background-image: url(../images/about-bg.jpg);
	background-repeat: no-repeat;
	background-position: center center;
}

.box2 {
	width: 60%;
	float: left;
}

.box2 img {
	width: 100%;
	height:auto;
}

.box3 {
	width: 40%;
	float: left;
}

.box3 img {
	width: 100%;
	height:auto;
}



.box4 {
	width: 55%;
	float: left;
}

.box4 img {
	width: 100%;
	height:auto;
}

.box5 {
	width: 45%;
	float: left;
	padding-top: 250px;
}

 @media screen and (max-width : 1800px) {

.box5 {
	width: 45%;
	float: left;
	padding-top: 50px;
}

}





.box5-title {
	font-size: 30px;
	line-height: 60px;
	font-weight: bold;
	color: #666666;
}

.box5-content {
	font-size: 20px;
	line-height: 30px;
	color: #666666;

}


 @media screen and (max-width : 1500px) {

.box5-title {
	font-size: 25px;
	line-height: 40px;
	font-weight: bold;
	color: #666666;
}

.box5-content {
	font-size: 18px;
	line-height: 25px;
	color: #666666;

}
}




.box6 {
	width: 80%;
	float: left;
}



 @media screen and (max-width : 1000px) {


.box4 {
	width: 100%;
	float: left;
}




.box5 {
	width: 100%;
	float: left;
	padding-top: 100px;
	padding-bottom: 40px;
}

.box5-title {
    font-size: 25px;
    line-height: 35px;
    font-weight: bold;
    color: #666666;
}


.box5-content {
	font-size: 18px;
	line-height: 26px;
	color: #666666;

}

.box6 {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	float: none;
}




}








 @media screen and (max-width : 800px) {
.box2 {
	width: 100%;
	float: left;
}

.box3 {
	width: 100%;
	float: left;
}


.box4 {
	width: 100%;
	float: left;
}




.box5 {
	width: 100%;
	float: left;
	padding-top: 100px;
	padding-bottom: 40px;
}

.box5-title {
    font-size: 25px;
    line-height: 35px;
    font-weight: bold;
    color: #666666;
}


.box5-content {
	font-size: 18px;
	line-height: 26px;
	color: #666666;

}

.box6 {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	float: none;
}




}

 @media screen and (max-width : 600px) {
 
.addred2 {
	background-color: #628e48;
	height: 130px;
	width: 100%;
	overflow:hidden;
}

hr {
    margin-top: 10px;
    margin-bottom: 10px;
    border: 0;
    border-top: 1px solid #eee;
}
.addred4 {
	background-color: #ffffff;
	height: 130px;
	width: 100%;
	overflow:hidden;
}

.hr2 {
	margin-top: 10px;
	margin-bottom: 10px;
	border: 0;
	border-top: 1px solid #606060;
	float: left;
	width: 100%;
}

.hr3 {
    margin-top: 10px;
    margin-bottom: 10px;
    border: 0;
    border-top: 1px solid #FFF;
    float: left;
    width: 100%;
}

.addred5 {
    height: 130px;
    width: 100%;
    overflow: hidden;
}

}

.circle {
	border: 1px solid #606060;
	width: 60px;
	height: 60px;
	border-radius: 150px;
	font-size: 14px;
	line-height: 60px;
		text-align: center;
			 transition: all 0.5s ease-out;
}

.circle:link {
text-decoration: none;
	border: 1px solid #628e48;
	color: #FFF!important;
	background-color: #628e48;
}

.circle:active {
		text-decoration: none;
	border: 1px solid #628e48;
	color: #FFF!important;
	background-color: #628e48;}

.circle:visited {
		text-decoration: none;
	border: 1px solid #628e48;
	color: #FFF!important;
	background-color: #628e48;}
 
.circle:hover{
		text-decoration: none;
	border: 1px solid #628e48;
	color: #FFF!important;
	background-color: #628e48;}


.circle2 {
	border: 1px solid #dfdfdf;
	width: 60px;
	height: 60px;
	border-radius: 150px;
	font-size: 14px;
	line-height: 60px;
	text-align: center;
	margin-top: 8px;
	 transition: all 0.5s ease-out;
}

.circle2 a{

		padding: 0px 0px !important;
		font-size: 1rem!important;
	line-height: 60px!important;
}

.circle2:link {
text-decoration: none;
	border: 1px solid #628e48;
	color: #FFF!important;
	background-color: #628e48;
}

.circle2:active {
		text-decoration: none;
	border: 1px solid #628e48;
	color: #FFF!important;
	background-color: #628e48;}

.circle2:visited {
		text-decoration: none;
	border: 1px solid #628e48;
	color: #FFF!important;
	background-color: #628e48;}
 
.circle2:hover{
		text-decoration: none;
	border: 1px solid #628e48;
	color: #FFF!important;
	background-color: #628e48;}





.circle3 {
    border: 1px solid #FFF;
    width: 60px;
    height: 60px;
    border-radius: 150px;
    font-size: 14px;
    line-height: 60px;
    text-align: center;
		 transition: all 0.5s ease-out;
}

.circle3:link {
text-decoration: none;
	border: 1px solid #628e48;
	color: #FFF!important;
	background-color: #628e48;
}

.circle3:active {
		text-decoration: none;
	border: 1px solid #628e48;
	color: #FFF!important;
	background-color: #628e48;}

.circle3:visited {
		text-decoration: none;
	border: 1px solid #628e48;
	color: #FFF!important;
	background-color: #628e48;}
 
.circle3:hover{
		text-decoration: none;
	border: 1px solid #628e48;
	color: #FFF!important;
	background-color: #628e48;}




.box1 {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 60px;
	overflow:hidden;
}

 @media screen and (max-width : 600px) {
 
 .box1 {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
	overflow:hidden;
}


.circle {
	border: 1px solid #606060;
	width: 45px;
	height: 45px;
	border-radius: 150px;
	font-size: 10px;
	line-height: 45px;
		text-align: center;
			 transition: all 0.5s ease-out;
}



.circle2 {
	border: 1px solid #dfdfdf;
	width: 45px;
	height: 45px;
	border-radius: 150px;
	font-size: 10px;
	line-height: 45px;
	text-align: center;
	margin-top: 8px;
	 transition: all 0.5s ease-out;
}

.circle3 {
    border: 1px solid #FFF;
    width: 45px;
    height: 45px;
    border-radius: 150px;
    font-size: 10px;
    line-height: 45px;
    text-align: center;
		 transition: all 0.5s ease-out;
}


}

.pc {

}

.phone {
display:none!important;   
}


 @media screen and (max-width : 600px) {

.pc {
display:none; 

}

.phone {
display:inline!important;  

}

.pc {
display:none; 

}

.circle2 {
	border: 1px solid #606060;
	width: 60px;
	height: 60px;
	border-radius: 150px;
	font-size: 14px;
	line-height: 60px;
	text-align: center;
	margin-top: 8px;
	display:none !important;  
}

.aboutzone-section-s2 {
	padding-bottom: 90px;
	max-height: 1250px;
	background-image: url(../images/abg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
    background-position: center right;
}

}