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




/***********header***********/
header{position:relative;z-index:999;background-color:#fff;}
header.header-fixed{position:fixed;top:0;left:0;right:0;box-shadow:0 1px 5px rgba(0 0 0 / 12%);}



header .w1680{width:95% !important;margin:0 auto;}

/*header-phone*/
.header-phone-more,
.header-phone-close{display:none;}



.header-top { background-color: #003354; padding: 20px 0; }
.header-top > div { align-items: center; justify-content: center; flex-shrink:0; gap: 20px; }

.header-top .text-lr-icon { float: right; }
.header-top .text-lr-icon { width: auto !important; margin: 0; }
	
	.header-top .text-lr-icon .swiper-wrapper { display: inline-flex; }
.header-top .text-lr-icon .swiper-slide { background-color: #003354; text-align: center; opacity: 0 !important; position: absolute; }
.header-top .text-lr-icon p { letter-spacing: 2px; }
.header-top .text-lr-icon .swiper-slide.swiper-slide-active { opacity: 1 !important; position: relative; }


/*logo*/
/* .header-logo { float: left; } */
.header-logo a{display:block;width: 200px;}
.header-logo a img{display:block;width: 100%;}


/*header-nav*/
.header-nav > ul{line-height:1em; border-bottom: 4px solid #003354; }
.header-nav > ul > li{float:left;margin-right:50px;position:relative;}
.header-nav > ul > li:last-child{margin-right:0;}
.header-nav > ul > li > a{display:inline-block;vertical-align:top;font-weight:500;font-size:18px;line-height:50px;position:relative; }
.header-nav > ul > li > a:hover{color:#AA283C;}
.header-nav i.iconfont{display:none;vertical-align:top;font-size:10px;line-height:18px;}
.header-nav i.iconfont + a:after{content:"\e732";font-family:"iconfont"!important;display:inline-block;vertical-align:top;margin-left:6px;font-size:10px;font-weight:normal;}

.header-subnav{
	position:absolute;top:100%;left:0;z-index:99;padding:8px 0;box-shadow:0 1px 6px rgba(0 0 0 / 12%);background-color:#fff;visibility:hidden;opacity:0;
    -webkit-transform:translateY(-10px);
    -moz-transform:translateY(-10px);
	-ms-transform:translateY(-10px);
	-o-transform:translateY(-10px);
	transform:translateY(-10px);  
}
.header-subnav li a{padding:10px 20px;line-height:1em;display:block;line-height:1.2em;white-space:nowrap;font-size:14px;}  
.header-subnav li a:hover{color:#AA283C;background-color:#f7f7f7;}

.header-nav > ul > li:hover .header-subnav{visibility:visible;opacity:1;
    -webkit-transform:translateY(10px);
    -moz-transform:translateY(10px);
	-ms-transform:translateY(10px);
	-o-transform:translateY(10px);
	transform:translateY(10px);  
}


.header-nav-box { background-color: #fff; }
.header-nav-box > div { align-items: center; justify-content: center; padding: 10px 0; gap: 20px; }

.header-nav-icon img { width: 50px; height: 50px; display: block; }


/*  */
#img-2, #img-3, #img-4 { position: absolute; top: 0; left: 0; z-index: 9; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease-out; }
#img-3 { opacity: 10; }
#img-4 { opacity: 11; }
#img-1 { opacity: 1; }

.scroll-indicator { position: fixed; top: 20px; right: 20px; background: rgba(0,0,0,0.6); color: white; padding: 8px 12px; border-radius: 12px; font-size: 14px; z-index: 100; }










/***********footer***********/
footer { background-color: #003354; }
footer > div { padding: 66px 0; justify-content: space-between; align-items: flex-end; }

.footer-l img { height: 40px; display: block; margin-bottom: 20px; }
.copyright { color: #fff; font-family: "made-evolve-sans-t"; }

.footer-r ul li a { font-family: "made-evolve-sans-t"; font-size: 20px; color: #fff; margin-bottom: 20px; display: block; text-align: right; line-height: 1em; }
.footer-r ul li:last-child a { margin-bottom: 0; }
.footer-r ul li a:hover { opacity: .6; }


/*  */
.footer-contact { margin-bottom: 80px; } 
.footer-contact p { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 16px; }














/***********banner***********/
/**/
.swiper-slide {position:relative;display:block;}
.swiper-slide > img{display:block;width:100%;height:auto;}

.home-banner-text{ width: 94%; position:absolute; bottom: 80px; left:50%;z-index:2;text-align:center;text-shadow:1px 1px 1px rgba(0,0,0,.3);
	-webkit-transform:translateX(-50%);
	-moz-transform:translateX(-50%);
	-ms-transform:translateX(-50%);
	transform:translateX(-50%);
}
.home-banner-text img { height: 60px; display: block; margin: 20px auto 0; }
.home-banner-text .text-lr-icon p { font-size:30px; color: #fff; padding: 10px 40px; }
.home-banner-text .text-lr-icon p:before, .home-banner-text .text-lr-icon p:after { width: 16px; height: 16px; }

.home-banner-text .text-lr-icon.text-lr-icon2 p { color: #003354; }
.home-banner-text .text-lr-icon.text-lr-icon2 p:before, 
.home-banner-text .text-lr-icon.text-lr-icon2 p:after { background-color: #003354; }

.home-banner-t { position: relative; }
.home-banner-t > img { display:block;width:100%;height:100%; object-fit:cover;object-position:center center; }
.home-banner .swiper-slide { height: 100%; }




/*page-banner*/
.page-banner-box{position:relative;}
.page-banner-box h1{
	font-size:50px;font-weight:700;line-height:1em;position:absolute;top:50%;left:50%;z-index:9;
	-webkit-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%); 
}
.page-banner-box img{width:100%;height:300px;display:block;object-fit:cover;object-position:center center;}













/***********首頁***********/

/* 1 */
.home-one ul li { margin-top: 5px; }
.home-one ul li > div { position: relative; }

.home-one-logo { position: absolute; left: 36px; bottom: 36px; z-index: 9; display: block; height: 50px; }
.home-one-logo img { display: block; height: 100%; }

.home-one-img { overflow: hidden; }
.home-one-img > img { display: block; height: 100%; object-fit:cover;object-position:center center; }
.home-one-img > img:hover { 
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-ms-transform:scale(1.1);
	-o-transform:scale(1.1);
	transform:scale(1.1); 
}

.home-one-text { padding: 30px; overflow: hidden; }
.home-one-text h2 { font-size: 44px; font-weight: 700; line-height: 1.2em; }
/* .home-one-text img { position: relative; z-index: -1; } */
.home-one-text img:hover { 
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-ms-transform:scale(1.1);
	-o-transform:scale(1.1);
	transform:scale(1.1);  
}

.home-one ul li:nth-child(1) .home-one-text h2 { margin-bottom: 20px; position: relative; z-index: 2; }
.home-one ul li:nth-child(1) .home-one-text p { font-size: 22px; position: relative; z-index: 2; }

.home-one ul li:nth-child(2) .home-one-text { padding: 20px 0; background-color: #3c9c7e; display: flex; flex-direction: column; justify-content: space-between; }
.home-one ul li:nth-child(2) .home-one-text h2 { color: #003354; padding: 0 30px; }
.home-one ul li:nth-child(2) .home-one-text p { font-size: 50px; color: #fff; text-align: center; }

.home-one ul li:nth-child(3) .home-one-text { background-color: #003354; }
.home-one ul li:nth-child(3) .home-one-text h2 { color: #fff; }

.home-one ul li:nth-child(4) .home-one-text { background-color: #ab8c69; }
.home-one ul li:nth-child(4) .home-one-text h2 { color: #fff; }

.home-one ul li:nth-child(5) .home-one-text { background-color: #aba593; }
.home-one ul li:nth-child(5) .home-one-text h2 { color: #63562f; }


/* 2 */
.home-two { margin: 30px 0; }

.home-two-title { text-align: center; margin-bottom: 30px; }
.home-two-title .text-lr-icon p { font-size: 50px; color: #005076; font-weight: bolder; }
.home-two-title .text-lr-icon p:before, 
.home-two-title .text-lr-icon p:after { background-color: #005076; }

.home-two-title > p { font-size: 18px; color: #005076; }

.home-two ul { flex-wrap: wrap; justify-content: center; gap: 30px; width: 850px; max-width: 100%; margin: 0 auto; }
.home-two ul li img { display: block; height: 80px; }


/* 3 */
.home-three { margin-bottom: 10px; }
.home-three img.ts03 { display: block; width: 100%; height: 100%; object-fit:cover;object-position:center center; }
.home-three div { overflow: hidden; position: relative; margin-bottom: 10px; }
.home-three-img.df { gap: 10px; margin-bottom: 10px; }

.home-three img.ts03:hover { 
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-ms-transform:scale(1.1);
	-o-transform:scale(1.1);
	transform:scale(1.1); 
}

.home-three-logo { position: absolute; right: 30px; bottom: 30px; z-index: 9; height: 40px; }
















/* product */

.product-one { background: url(../images/product/product-one-bg.webp) no-repeat; background-size:cover; background-position:center; padding: 50px 0 100px; }

.product-one-img img { display: block; }
.product-one-text { position: absolute; left: 20px; right: 20px; bottom: 30px; z-index: 9; }
.product-one-text h3 a { display: block; font-size: 50px; color: #fff; font-weight: 700; border-bottom: 4px solid #4088af; padding-bottom: 20px; line-height: 1.4em; padding-left: 40px; position: relative; }
.product-one-text h3 a:after { content: ""; width: 20px; height: 20px; display: block; background-color: #fff; position: absolute; top: 22px; left: 0;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	transform:rotate(45deg);
}
 
.product-one-list { gap: 50px; }
.product-one-list li { border-radius: 20px; background-color: #4088af; padding: 15px; overflow: hidden; position: relative; }

.product-one-list li:nth-child(even) { margin-top: 50px; margin-bottom: -50px; }
.product-one-list li:before { content: ""; display: block; width: 1000px; height: 30%; background-color: #4088af; position: absolute; left: -50px; bottom: -100px; 
	-webkit-transform:rotate(15deg);
	-moz-transform:rotate(15deg);
	-ms-transform:rotate(15deg);
	-o-transform:rotate(15deg);
	transform:rotate(15deg); 
}

.product-one-list li:nth-child(2) { background-color: #561212; }
.product-one-list li:nth-child(2) h3 a { border-bottom-color: #a5c18d; }
.product-one-list li:nth-child(2):before { background-color: #561212; }
.product-one-list li:nth-child(3) { background-color: #003354; }
.product-one-list li:nth-child(3):before { background-color: #003354; }
.product-one-list li:nth-child(3) h3 a { border-bottom-color: #dadad9; }
.product-one-list li:nth-child(4) { background-color: #a9bfbb; }
.product-one-list li:nth-child(4):before { background-color: #a9bfbb; }
.product-one-list li:nth-child(4) h3 a { border-bottom-color: #003354; }

.product-one .product-one-list { align-items: start; }
.product-one .product-one-list > div:nth-child(2) .contact-list-t { margin-top: 100px; }
.product-one .product-one-list > div:nth-child(3) .contact-list-t { margin-top: 200px; }




/*  */
/* .product-two > div:last-child { margin-bottom: 0; } */
.product-two-top { position: relative; margin-bottom: 30px; }
.product-two-box { margin-bottom: 50px; position: relative; }

#product-anchor1,#product-anchor2,#product-anchor3,#product-anchor4 { position: absolute; top: -220px; z-index: -9; width: 2px; height: 2px; opacity: 0; }

.product-two-top-text { position: absolute; }
.product-two-top-text.product-lb { left: 0; bottom: 50px; }
.product-two-top-text.product-lt { left: 0; top: 50px; }
.product-two-top-text.product-rt { right: 0; top: 50px; text-align: right; }


.product-two-top-text.product-lb a,
.product-two-top-text.product-lt a { padding: 10px 50px 10px 80px; border-radius: 0 100px 100px 0; }

.product-two-top-text.product-rt a { padding: 10px 80px 10px 50px; border-radius: 100px 0 0 100px; }
.product-two-top-text.product-rt p { margin: 0 36px 0 0; }


.product-two-top-text p { font-size: 36px; font-weight: 700; color: #fff; margin-left: 36px; line-height: 1.5em; }
.product-two-top-text p img { display: inline-block; width: 36px; margin: 0px 12px -6px 0; }
.product-two-top-text a { background-color: #fff; font-size: 50px; color: #fff; font-weight: 700; margin-bottom: 30px; display: block; }
.product-two-top-text a:after { content:'';margin-top:-5px;width:0;height:0;display:inline-block;
	border-top:solid 30px #fff;
	border-left:solid 30px transparent; 
}
.product-two-top-text a:hover { background-color: rgba(255 255 255 / 60%); }
.product-two-top-text a span { border-radius: 100px; padding: 0 10px; line-height: 44px; display: inline-block; background-color: #4c8eb8; color: #fff; } 

.product-two-top-text h2 { background-color: rgba(255 255 255 / 80%); font-size: 40px; font-weight: 700; margin-bottom: 30px; display: block; border-radius: 100px; margin: 20px; padding: 10px 30px; }

.product-two-box .product-two-top-text a { position: relative; margin-right: 160px; }
.product-two > div .product-two-top-text a span { position: absolute; top: 50%; right: -160px; margin-top: -22px; }
.product-two > div:nth-child(even) .product-two-top-text a { margin-right: 0; padding-right: 170px; }
.product-two > div:nth-child(even) .product-two-top-text a span { right: 10px; }
/* .product-two > div:nth-child(2) .product-two-top-text a span {  } */
.product-two > div:nth-child(2) .product-two-top-text a span { background-color: #561212; }
.product-two > div:nth-child(3) .product-two-top-text a span { background-color: #fff; color: #131313; }

.product-two-img img,
.product-two-top-img img { display: block; width: 100%; }

.product-two-logo-lb { position: absolute; left: 36px; bottom: 36px; }
.product-two-logo-lb img { height: 50px; }


.product-two > div:nth-child(1) .product-two-top-text a { color: #4c8eb8; }
.product-two > div:nth-child(1) .product-two-top-text a:after { border-top-color: #4c8eb8; }
.product-two > div:nth-child(2) .product-two-top-text a { color: #561212; }
.product-two > div:nth-child(2) .product-two-top-text a:after { border-top-color: #561212; }
.product-two > div:nth-child(3) .product-two-top-text a { background-color: #a99c85; }
.product-two > div:nth-child(4) .product-two-top-text a { color: #7d7c85; }
.product-two > div:nth-child(4) .product-two-top-text a:after { border-top-color: #c3beb7; }


/* .product-two > div:nth-child(1) .product-two-top-text { top: auto; bottom: 50px; }
.product-two > div:nth-child(1) .product-two-top-text a { margin-bottom: 0; margin-top: 30px; } */












/* about */
.about-banner { position: relative; overflow: hidden; }
.about-banner > img { display: block; width: 100%; }

.about-banner-text { position: absolute; left: 0; right: 0; bottom: 10%; z-index: 9; text-align: center; }
.about-banner-text h1 { display: inline-block; font-size: 100px; color: #003354; position: relative; }
.about-banner-text h1 img { display: inline-block; height: 80px; margin-right: 20px; margin-bottom: -4px; }
.about-banner-text h1:after { content: ""; display: block; height: 6px; width: 1000px; background-color: #003354; position: absolute; top: 50%; left: 105%; margin-top: -3px; }
.about-banner-text h1:before { content: ""; display: block; height: 6px; width: 1000px; background-color: #003354; position: absolute; top: 50%; right: 105%; margin-top: -3px; }

.about-list { margin: 60px auto 200px; }
/* .about-list .product-one-list { gap: 30px; } */
.about-list .product-one-text h3 a { font-size: 24px; padding-left: 25px; }
.about-list .product-one-text h3 a:after { width: 12px; height: 12px; top: 11px; }

.about-list .product-one-list li { position: relative; z-index: 9; }
.about-list .product-one-list li:nth-child(2),
.about-list .product-one-list li:nth-child(4) { margin-left: -60px; } 
.about-list .product-one-list li:nth-child(1),
.about-list .product-one-list li:nth-child(3) { margin-right: -60px; } 

.product-one-list li:nth-child(even) { margin-top: 100px; margin-bottom: -100px; }

.about-text p { font-size: 24px; color: #003354; line-height: 1.6em; margin-bottom: 50px; }
/* .about-text p:last-child { margin-bottom: 0; } */
.about-text p strong { font-size: 24px; color: #003354 }










/* project */
.project-top { position: relative; }
.project-top.w1680 { width: 95%; display: flex; align-items: center; justify-content: center; gap: 20px; }
.project-top h1 { font-size: 60px; line-height: 100px; color: #003354; position: relative; display: flex; align-items: center; justify-content: center; gap: 20px; }
.project-top h1 img { display: block; height: 50px; margin: 25px 0; }
.project-top > img { position: absolute; bottom: 0; right: 0; height: 100px; position: static !important; }

.project-list { background-color: #e3e9ed; padding: 66px 0 200px; }
.project-list ul { gap: 50px; }
.project-list a { display: block; position: relative; z-index: 2; margin: 0 30px 30px 0; }
.project-list a:before { content: ""; display: block; background-color: #231815; position: absolute; top: 30px; left: 30px; right: -30px; bottom: -30px; z-index: -1; }

.project-list a img { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit:cover;object-position:center center; }
.project-list a span { display: block; position: relative; height: 0; padding: 40% 0; }
.project-list a span:first-child { border-bottom: 30px solid #231815; }
.project-list a i { font-style: normal; position: absolute; left: 0; right: 0; bottom: 30px; z-index: 9; display: inline-flex; font-size: 50px; font-weight: 700; align-items: center; justify-content: center; gap: 20px; text-align: center; color: #fff; }
.project-list button { text-transform: none; position: absolute; top: 20px; right: 20px; z-index: 9; border-radius: 100px; background-color: #003354; padding: 0 14px; line-height: 40px; height: 40px; font-size: 14px; }

.project-list a i:before, .project-list a i:after { content: ""; width: 20px; height: 20px; display: block; background-color: #fff; margin-top: -4px;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	transform:rotate(45deg);
}

.project-list ul li:nth-child(2) a span { color: #231815; }


.project-list ul li:nth-child(2) a span:after,
.project-list ul li:nth-child(2) a span:before { background-color: #231815; }

/* .project-list ul li:nth-child(1) a { margin-top: 200px; } */
/* .project-list ul li:nth-child(4) a { margin-top: 170px; margin-bottom: -170px; } */









/*  */
.project-banner { margin-top: 10px; }
.project-banner img { display: block; width: 100%; }
.project-details-list { background-color: #e3e9ed; }

.project-details-list ul li { padding: 80px 0; border-bottom: 5px solid #003354; }
.project-details-list ul li:last-child { border: 0; }

.project-details-list-top { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 20px; }
.project-details-list-top .pdlt-l span { display: block; font-size: 20px; line-height: 1em; margin-bottom: 10px; padding-left: 36px; position: relative; color: #003354; }
.project-details-list-top .pdlt-l span:last-child { font-size: 30px; font-weight: 700; margin-bottom: 0; }
.project-details-list-top .pdlt-l span:last-child:before { content: ""; width: 18px; height: 18px; display: block; background-color: #003354; position: absolute; left: 0; top: 50%; margin-top: -4px;
	-webkit-transform:rotate(45deg)translateY(-50%);
	-moz-transform:rotate(45deg)translateY(-50%);
	-ms-transform:rotate(45deg)translateY(-50%);
	-o-transform:rotate(45deg)translateY(-50%);
	transform:rotate(45deg)translateY(-50%); 
}
.project-details-list-top .pdlt-r span:first-child { display: block; font-size: 20px; line-height: 1em; margin-bottom: 10px; color: #003354; }
.project-details-list-top .pdlt-r span:last-child { display: flex; gap: 10px; color: #003354; font-size: 20px; }  
.project-details-list-top .pdlt-r span:last-child img { display: block; height: 36px; }

.project-details-list-img img { display: block; width: 100%; margin-bottom: 10px; }
.project-details-list-img img:last-child { margin-bottom: 0; }






/*  */
.contact { margin: 50px auto; }



.contact-top h1 { font-size: 36px; border-bottom: 2px solid #999; padding-bottom: 20px; margin-bottom: 50px; }

/* .contact-box { margin-bottom: 80px; } */
.contact-box-top { margin-bottom: 40px; } 
.contact-box-top h2 { font-size: 36px; font-weight: bolder; }
.contact-box-top p { font-size: 18px; margin-top: 12px; }
.contact-box-top p a { font-size: 18px; text-decoration: underline; }
.contact-box-top p a:hover { opacity: .6; }


.contact-box .form-btn { display: flex; justify-content: space-between; align-items: center; margin-top: 50px; } 
.contact-box .form-btn button { border-radius: 100px; background-color: #bbb; text-transform:lowercase; }
.contact-box .form-btn p { font-size: 18px; }
.contact-box .form-btn p a { font-size: 18px; text-decoration: underline; }
.contact-box .form-btn p a:hover { opacity: .6; }


.contact-list { margin: 100px auto 200px; }  







/*  */
.contact-list-t .product-one-text h3 a { font-size: 24px; padding-left: 25px; }
.contact-list-t .product-one-text h3 a:after { width: 12px; height: 12px; top: 11px; }

.contact-list-b { position: absolute; bottom: 0; right: 0; width: 55%; z-index: -1; padding: 10px; border-radius: 20px; background-color: #4088af; }
.contact-list-b img { display: block; width: 100%; border-radius: 10px; }

.product-one-list > div { position: relative; z-index: 9; padding: 0 40% 60% 0; }
.product-one-list .product-one-text { bottom: 20px; }

.product-one-list .contact-list-t img { border-radius: 10px; }

.product-one-list .contact-list-t { border-radius: 20px; background-color: #4088af; padding: 10px; overflow: hidden; position: relative; }

.product-one-list .contact-list-t:before { content: ""; display: block; width: 1000px; height: 35%; background-color: #4088af; position: absolute; left: -50px; bottom: -120px; 
	-webkit-transform:rotate(15deg);
	-moz-transform:rotate(15deg);
	-ms-transform:rotate(15deg);
	-o-transform:rotate(15deg);
	transform:rotate(15deg); 
}

.product-one-list > div:nth-child(2) .contact-list-t { background-color: #003354; }
.product-one-list > div:nth-child(2) .contact-list-t:before { background-color: #003354; }
.product-one-list > div:nth-child(3) .contact-list-t { background-color: #561212; }
.product-one-list > div:nth-child(3) .contact-list-t:before { background-color: #561212; }

.product-one-list > div:nth-child(2) .contact-list-b { background-color: #003354; }
.product-one-list > div:nth-child(3) .contact-list-b { background-color: #561212; }



.contact-list-t .product-one-text h3 a { border-bottom-color: #003354; }
.product-one-list > div:nth-child(2) .contact-list-t .product-one-text h3 a { border-bottom-color: #96afab; }
.product-one-list > div:nth-child(3) .contact-list-t .product-one-text h3 a { border-bottom-color: #b39671; }