body, html, h1,h2,h3,h4,h5,p,li,span,a,i,button,div{ font-family:Microsoft JhengHei ; line-height: 1.5;}

/*body{background-image: url(../img/circles-light.png); }*/
.bg{
	background-position: center;
	background-size: cover;
}

.w100{
	width:100%;
}

.w60{width:60%;}

.max-bg{
	max-width: 1200px;
    box-shadow: 0 0 10px -1px #ccc;
    background-color: #fff;
}
/*垂直至中*/
.hv-center{
	align-items: center;
    justify-content: center;
    display: flex;
}
/*menu*/
.bg-light{background-color: #fff !important;}
.navbar-brand{
	text-align: right;
	margin: 0 10px;
}
.menu{
	position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: 4px 2px 5px #949596;
    padding:10px 0;
}
.menu ul{padding:0; margin:0;}
.menu li{
	display: inline-block;
	font-size: 20px;
	margin: 0 10px;
}

/*banner*/

.banner img{width:100%; padding-top: 65px;}
.banner .poly{position: absolute; bottom: -23px; z-index: 15;width: 100%;}
.banner .txt{position: absolute; top: 23%; right: 18%; font-weight: 500;}
.banner .txt h1{color: #f3a503; font-size: 52px;}
.banner .txt p{color: #fff; font-size: 30px;}
.banner .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
	background-image: url(../img/next_arrow.png);
	width: 50px;
    height: 30px;
}

.banner .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
	background-image: url(../img/pre_arrow.png);
	width: 50px;
    height: 30px;
}

.hot_img{
    height: 685px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #000;
}

/*works*/
/*.works::before{
	content:"";
	position: absolute;
	width:1700px;
	height:650px;
	display: block;
	background-color: #f8f9fa;
    z-index: -1;
    right:0;
}*/
.works{position: relative; background-color: #efd2d4;}
.works .poly{position: absolute; bottom: -82px; width:100%;}
.works .title{
	position: absolute;
    background-color: #36100f;
    border-radius: 50%;
    width: 140px;
    height: 140px;
    text-align: center;
    line-height: 40px;
    top: 50%;
    left: 50%;
    z-index: 99;
    padding: 30px;
    font-size: 28px;
    color: #f3a503;
    margin-top: -70px;
    margin-left:-70px; 

}

.works span{color: #fff;}
.works h1{
	font-weight: bold;
	color:#495057;
	}
.works hr{
	width: 80px;
    text-align: left;
    margin: 10px 0px;
    border-top: 5px solid #f3a503;
}



.works p{
	font-size:16px;
	line-height: 30px;
}

.works h6{
	text-align: right;
    font-size: 48px;
    color: #dad9d9;
    position: absolute;
    right: 370px;
    z-index: 2;
}

.works .right_bg{background-color: #e9ecef; padding-left: 40px;}
.works .swiper-button-next, .works .swiper-button-prev{top:80%;}
.works .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
	background-image: url(../img/wnext_arrow.png);
	width: 70px;
    height: 45px;
    background-size: 60px 45px;
}

.works .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
	background-image: url(../img/wpre_arrow.png);
	width: 70px;
    height: 45px;
    left:auto;
    right: 90px;
    background-size: 60px 45px;
}

.works .box-left img{position: left:0; top:0;}
.sw-width{width:60%;}
/*about*/
.about{
	height: 70vh;
   /*margin-top:50px;
   margin-bottom: 100px;*/
}

.about_detail{
	position: absolute;
	right: 0;
	width:565px;
	height: 100%;
	background-color:#fff;
	opacity:0.9;
}

.about_detail h1{
	font-weight: bold;
	color: #495057;
	}
.about_detail hr{
	width: 80px;
    text-align: left;
    margin: 10px 0px;
    border-top: 5px solid #f3a503;
}

.about_detail p{
	font-size:16px;
	line-height: 30px;
	width:84%;
}

.about h6{
	text-align: right;
    font-size: 48px;
    color: #dad9d9;
    position: absolute;
    right: 25px;
    bottom: 36px;
}

/*news*/
.news{background-image: url(../img/newtop.png);}
.news .img{
	background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
}

.news h6{
	text-align: center;
    font-size: 48px;
    color: #dad9d9;
}

.news h1{
	text-align: center;
    font-weight: bold;
}

.news hr{
	width: 80px;
    text-align: center;
    border-top: 5px solid #f3a503;
}
.news_detail{margin: auto; width:60%;}
.news_detail .pic{width: 100%; overflow: hidden;}
.news_detail .pic img{transform:scale(1,1);transition: all 1.5s ease; width: 100%;}
.news_detail .pic img:hover{transform:scale(1.2,1.2);}
.news_detail h2 a{
	font-weight: bold;
	font-size: 24px;
	color: #00479d;
	margin-top:10px;

}
.news_detail h2 a:hover{text-decoration: none;}
.news_detail .list{
	background-color: #fff;
	padding: 20px;
	box-shadow: 4px 4px 3px #ccc;
}


/*about_us*/
.about_banner{
	height: 60vh;
	overflow: hidden;
	position: relative;

}
.about_banner img{
width: 100%;
animation-name: building;
animation: building 15s;
animation-fill-mode:forwards;
filter: brightness(.7);
}


@keyframes building{
	from {
		transform: scale(1);
		
	}
	to {
		transform: scale(1.4);

	}
}

.about_banner .txt{
	position: absolute;
	left:45%;
	top:45%;
	text-align: center;
	color: #fff;
	text-shadow: 1px 2px 3px #6c757d;
}

.about_banner .txt h2{
	font-weight: bold;
	font-size: 36px;
}

.about_banner .txt h1{font-size: 48px;}
.about_us .top img{width:60%;}

.about_us .info{
	background-color: #fff;
	box-shadow: 0px 0px 4px #ccc;
    position: absolute;
    left: 36%;
    top: 81%;
    width: 50%;

}

.about_us .info h2{
	color: #f3a503;
    font-weight: bold;
}

.about_us .info h2 strong{font-size: 48px;}
.about_us .info p{
	font-size: 18px;
	line-height: 24px;
}
.bannertwo {position: relative;}
.bannertwo h2{
	position: absolute;
    z-index: 1;
    color: #fff;
    left:47%;
    top:50%;
    font-weight: bold;
    text-shadow: 1px 2px 3px #6c757d;
}
/*company*/
.company{height: 42vh;}
.company .bg{
	background-color: #f8f9fa;
    position: absolute;
    width: 20%;
    height: 80%;
    margin-left: 120px;
    top: -30%
}
.company .info{
	position: absolute;
    top: 4%;
    left: 30%;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-right: 1px solid;
    width: 100vh;
}
.company .info::before{
	content: "";
	background-color: #fff;
	width: 400px;
    height: 20px;
    position: absolute;
    top: -9px;
    left: 0;
}
.company .info::after{
	content: "";
	background-color: #fff;
	width: 155px;
    height: 20px;
    position: absolute;
    bottom: -9px;
    left: 0;
}
.company .txt{
	position: relative;
    left: -13%;
    /* width: 100vh; */
}
.company .info h2{
	color: #f3a503;
    font-weight: bold;
}
.company .info h2 strong{font-size: 48px;}
.company .info p{font-size: 18px;}
/*hot*/


.hot h1{
	text-align: center;
    font-weight: bold;
}


.hot_info{ 
    margin: auto;
    background-color: #f8f9fa;
    width: 60%;

}
.hot_info a{color: #00479d;}
.hot_info a:hover{color: #00479d; text-decoration: none;}
.hot_info .pic{width: 100%; overflow: hidden;}
.hot_info .pic img{transform:scale(1,1);transition: all 1.5s ease;width: 100%;}
.hot_info .pic img:hover{transform:scale(1.2,1.2);}
.hot_info h2{
	font-weight: bold;
	font-size: 28px;
	color: #00479d;
	margin-top:10px;

}
.hot_info hr{
	width: 80px;
    text-align: left;
    margin: 10px 0px;
    border-top: 5px solid #f3a503;
}
.hot_info p{margin: 0; color: #6f7173;}
.hot_info i{font-size: 18px; margin-right: 5px;}





/*hot_detail*/
.hot_detail{padding-top: 75px;}
.hot_detail .right{background-color: #f8f9fa;}
.hot_detail hr {
    width: 80px;
    text-align: left;
    margin: 10px 0px;
    border-top: 5px solid #f3a503;
}
.hot_detail h1{font-weight: bold; color: #00479d;}
.hot_detail ul{list-style-type: none; padding:0;}
.hot_detail ul li{
	font-size: 18px;
	line-height: 36px;
	border-bottom: 1px solid #ccc;
    border-bottom: 1px dashed #ccc;
    padding: 5px 0;
    }
.hot_detail .link{display:block; padding: 10px 0;}
.hot_detail .link a{
	border: 1px solid #ccc;
    font-size: 18px;
    padding: 10px 20px;
    border-radius: 20px;
    margin: 10px;
    color: #343a40;
}
.hot_detail .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    background-image: url(../img/next_arrow.png);
    width: 50px;
    height: 30px;
}
.hot_detail .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    background-image: url(../img/pre_arrow.png);
    width: 50px;
    height: 30px;
}
.hot_content{
	width: 60%;
    margin: 0 auto;
}
.hot_content img{width:100%;}
.hot_content h3{font-weight: bold;}
.hot_content h6{
	font-size: 18px;
    border: 1px solid #ccc;
    width: 100px;
    padding: 10px;
    margin: 20px 0;
}

/*progress_info*/
.pro_login{margin:0 auto;}
/*progress*/
.pro h1{
	text-align: center;
    font-weight: bold;
}


/* .pro_info{margin: auto;} */
.pro_info a{color: #00479d;}
.pro_info a:hover{color: #00479d; text-decoration: none;}
.pro_info .pic{width: 100%; overflow: hidden;}
.pro_info .pic img{transform:scale(1,1);transition: all 1.5s ease; width: 100%;}
.pro_info .pic img:hover{transform:scale(1.2,1.2);}

.pro_info h2{
	font-weight: bold;
	font-size: 24px;
	color: #00479d;
	margin-top:10px;

}
.pro_info p{margin: 0; color: #6f7173;}
.pro_info .list{
	background-color: #fff;
	padding: 20px;
	box-shadow: 4px 4px 3px #ccc;
}

/*progress_detail*/
.pro_main{
	margin:0 auto;
}

.pro_main h5{
	width: 265px;
    border: 1px solid #ccc;
    text-align: center;
    padding: 10px;
    border-radius: 25px;
    margin-top: 10px;
}
.pro_main .pic{margin:0 auto;overflow: hidden; height: 250px;}
.pro_main .pic img{transform:scale(1,1);transition: all 1.5s ease;}
.pro_main .pic img:hover{transform:scale(1.2,1.2);}
.pro_main .pic div{height: 100%; transition: all 0.5s;}
.pro_main .pic a {display: block; width: 100%; height: 100%;}

.pro_main .pic div:hover{ transform: scale(1.2);}

.pro_main .list p{
	background-color: #fff;
    padding: 10px 0;
    margin: 0 auto;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
.pro_main .box{display: none;}

/*news*/
.news_list{
    margin: 0 auto;
    width: 60%;
}

.news_list ul{padding: 0;}
.news_list li{display: inline-block;}
.news_list li a{
	color: #495057;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 10px;
    margin: 0 10px;
}
.news_list span{
	display: block;
    color: #00479d;
}

.news_list h3 a{
	font-weight: bold;
    color: #495057;
}

.news_list h3 a:hover{
	text-decoration: none;
    color: #495057;
}

.news_list li a:hover{
	text-decoration: none;
}

.news_list .info{
	border: 1px solid #ccc;
    padding: 15px;
}

.news_list .info:hover{
	border: 1px solid #f3a503;
}

.news_list .info .pic{width: 100%; overflow: hidden;}
.news_list .info .pic img{transform:scale(1,1);transition: all 1.5s ease; width: 100%;}
.news_list .info .pic img:hover{transform:scale(1.2,1.2);}

/*news_detail*/
.news_top{
    width: 60%;
    margin: 0 auto;
}

.news_top h3.title_h3{
	font-weight: bold;
    border-bottom: 1px solid #ccc;
    display: block;
    padding: 15px 0;
    color: #495057;
}

.news_top img{
	display: block;
	margin:10px 0;
	
}



/*life*/
.life{
	width: 80%;
    margin: 0 auto;
}
.life .pic{width: 70%; overflow: hidden; margin:0 auto;}
.life .pic img{transform:scale(1,1);transition: all 1.5s ease; width: 100%;}
.life .pic img:hover{transform:scale(1.2,1.2);}

.life ul{padding: 0;}
.life li{display: inline-block;}
.life li a{
	color: #495057;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 10px;
    margin: 0 10px;
}
.life span{
	display: block;
    margin: 10px 0;
    color: #00479d;
}

.life h3 a{
	font-weight: bold;
    color: #495057;
}

.life h3 a:hover{
	text-decoration: none;
    color: #495057;
}

.life li a:hover{
	text-decoration: none;
}

/*rapair*/
.repair{
	width: 60%;
    margin: 0 auto;
}

.repair h2{
	font-weight: bold;
    color: #495057;
}

/*contact*/

.contact{margin:0 auto;}
.contact h1{
	font-weight: bold;
    color: #495057;
}

/*footer*/


.footer_detail{
	color: #fff;
    font-size: 18px;
    font-family: 微軟正黑體;
}


@media(max-width: 1400px) AND (min-width :769px){
  .about_us .info{ top: 72%;}
  .about_us .info p{ font-size: 16px;}
  .company .info p{  font-size: 16px;}
}


@media(max-width: 768px){
	/*banner*/
	.about_banner{height: auto;}
	.about_banner img{animation: building none; padding-top: 65px;}
    .banner .poly{bottom: 27px;}
	/*about*/
	.about_us{height: auto;}
	.about_us .top {position: relative;top: auto;}
	.about_us .info {
		box-shadow: none;
		position: relative;
		left: auto;
		top: auto;
		height: 438px;
	}
	.about_detail {right:45px;}
    .about_us .info{width:100%;}
	.company .info {position: relative; left: auto; border: none;}
	.company .info::before {display: none;}
	.company .txt {left: auto;}
	.company .bg{margin-left: 0;}
	/*contact*/
    .contact{width:100%;}
   

    .news_top img{width: 100%;}

}
@media(max-width: 420px){

/*menu*/

.navbar-brand{
	text-align: center;
	width:50%;
    margin: 0 auto;
}

/*banner*/
.banner .swiper-button-next, .banner .swiper-button-prev {top: 65%;}
.banner .poly{ bottom: 45px;}
.banner .txt{top:45%; right:18%;}
.banner .txt h1{font-size: 30px;}
.banner .txt p{font-size: 24px;}

.hot_img{
    height: 430px;
}

/*works*/
.sw-width{width: 100%;}
.works .poly{bottom: -10px;}
.works .title{
    width: 100px;
    height: 100px;
    line-height: 20px;
    margin-top: -80px;
    margin-left: -50px;
    font-size: 20px;
}
.works img{width:100%;}
.works::before {display: none;}
.works h6{display: none;}
.works p{width:100%;}
.works .right_bg{background-color: #f8f9fa;height: 485px;}
.works .swiper-button-next, .works .swiper-button-prev {top: 95%;}
.works .right_bg {padding:0;}
/*about*/
.about{height: 565px; margin-bottom: 0; margin-top: 0;}
.about h6{display:none;}
.about_detail {
	right: 0;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width:90%;
    height: 90%;
    box-shadow: none;
}

.about_detail p{width:100%;}
.about_us .top img{width:100%;}
.about_us .info{width: 100%;}

/*news*/
.news_list{
	width: 100%;
    margin: 0 auto;
}
/*news*/
.news .img{background-size: 240%;}
.news_detail{width:100%;}
.news_detail .list{margin:10px 0;}
.news_detail .list img{width:100%;}

/*news_detail*/
.news_top{
    width: 100%;
    margin: 0 auto;
}

/*about_us*/
.about_banner{height: 44vh;}
.about_banner img {
	transform: scale(1.5);
	width:100%; 
	padding-top: 75px;
	animation: building none;
}

.about_banner .txt{
	left: 30%;
    top: 50%;
}


.about_us .info {
	background-color: none;
	box-shadow: none;
	height: auto;
    position: relative;
    left: auto;
    top:0;
}

.about_us{height: auto;}
.about_us .top{position:relative; top:auto;}
.bannertwo h2{ 
	left: 35%;
    top: 32%;}
 .company {
    margin: auto;
    height: auto;
}

.company .bg{
	width: 50%;
    height: 50%;
    margin-left: 0;
    top: -2%;
}

.company .info {
	left:-9%;
	border: none;
}

.company .txt {
	left:14%;
}

.company .info::before {display: none;}
.company .info::after {display: none;}
/*hot*/

.hot_info{width:100%;}
.hot_info .list{margin:10px 0;}
.hot_info .list img{width:100%;}

/*hot_detail*/
.hot_content {width:100%;}
/*life*/
.life{width: 100%;}
.life img{width:100%;}
.life li a{margin:0;}
.life .pic {width: 100%}
/*repair*/
.repair{width:100%;}

/*contact*/
.contact{width:100%;}

/*footer*/
.footer_detail .logo {width: 60%;}

/*pro*/
/* .pro_info{width:100%;} */
.pro_info .list{margin:10px 0;}
.pro_info .list img{width:100%;}

/*pro_detail*/
.pro_main{width:100%;}
.pro_main .list img{width:100%;}
.pro_main .list p {width:100%;}
.pro_main .pic {width:100%; height: 125px;};





}