@charset "utf-8";
@import url("reset.css");
@import url("loading.css");
@import url("fontawesome_all.css");
@import url("fakeLoader.min.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap');
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> Main <<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; letter-spacing:1px; }
a{text-decoration:none;color: #ffffff;}
html { height:100% }
body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; -webkit-text-size-adjust:none; font-size:12px; overflow-y:scroll; overflow-x:hidden; }
body, td, th,select,input {font-size:12px;font-family: /*Arial,*/ "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "Microsoft JhengHei", "新細明體", "PMingLiU", sans-serif;color:#333333;}

/*簡易設定*/
.iframe_ch { display:none }
.middle { vertical-align:middle; }
.center { text-align:center; }
.w100{ width:100%; }

textarea, input { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
  
/*全營幕遮罩*/ 
.bg-overlay{display:block;position:fixed;left:0;top:0;background:rgba(0,0,0,0.7);opacity:0;visibility:hidden;width:100%;height:100%;z-index:9999;-webkit-transition:.4s;-o-transition:.4s;transition:.4s}
.bg-overlay.visible{opacity:1;visibility:visible} 

/*分頁*/
.pager{width:100%;margin: 50px auto 50px auto;text-align:center;}

/*麵包屑*/
#sitemap{width:100%;box-sizing: border-box;padding: 20px 15px;font-weight: bold;/* background:#eaeaea; */}
#sitemap .wrap{width:100%;max-width:1400px;margin:0 auto;font-size: 16px;letter-spacing:1px;text-align: right;font-weight: bold;color: #000000;}
#sitemap .wrap a{color: #000000;}

input[type=submit],input[type=text] { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

/*編輯器*/
.editor{padding: 20px 0 20px 0;font-size:15px;line-height:25px;}

/*表格*/
#css-table { display:table; width:100%; }
.css-tr {display: table-row;}
.css-td {display: table-cell;text-align:left;vertical-align:middle;padding: 0px 10px;box-sizing:border-box;letter-spacing:1px;font-size:14px;color:#121212;}

/*按鈕*/
.btn1{display:inline-block;color:#FFFFFF;font-size: 16px;width:auto;padding: 20px 50px;margin:5px 0;border:0;letter-spacing:2px;cursor:hand;cursor:pointer;background: #edcc44;outline:0;text-decoration:none;-webkit-border-radius: 25px;-moz-border-radius: 25px;border-radius: 30px;}
.btn1 i{ font-size:20px; padding:0 10px 0 0; }
.btn1.on{background:#4c7590;}
.btn1:hover{background: #c3a52a;transition: all 0.5s ease;}

.btn2{display:inline-block;color:#698ba1;font-size: 14px;width:auto;padding: 15px 40px;margin:5px 0;border:0;letter-spacing:2px;cursor:hand;cursor:pointer;background-color: rgba(255, 255, 255, 0.8);border:1px solid #698ba1;outline:0;text-decoration:none;-webkit-border-radius: 25px;-moz-border-radius: 25px;border-radius: 25px;}
.btn2.on{background:#ffffff;}
.btn2:hover{ background:#ffffff; transition: all 0.5s ease; }


/*回頂部*/
.gotop{position:fixed;bottom: 50px;right:25px;z-index: 9999;}

@media screen and (max-width : 600px) {
	.gotop{ opacity:.7; }
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Common <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


/*網頁大標題*/
.common-title{position: relative;text-align: left;font-size:36px;color:#1d1d1d;line-height: 30px;padding: 20px 10px 20px 10px;margin: 0 0 0 0;}
.common-title span{position: relative;text-transform: uppercase;color: #222222;font-size: 36px;/* font-weight: bold; */letter-spacing: 5px;padding: 0 0 0 40px;font-family: 'Noto Sans TC', sans-serif;}
.common-title span:before{content:url(../../images/common-title-line.png);position:absolute;top: 10px;left:0;}
.common-title span p{text-transform:uppercase;font-size: 25px;padding: 5px 0 0 125px;color: #edcc44;font-weight: bold;letter-spacing:2px;}
.common-title .line{background: #e6e6e6;width: 100px;height:3px;margin: 20px 0 0px 0;animation:1s ease-in-out 0.8s 1 widthGroup-1;}
.common-title .more{
    display: block;
    /* position: absolute; */
    top: 40px;
    right: 0;
    text-align: right;
    font-size: 18px;
    font-weight: bold;
    color: #000000;
}
.common-title .more a{}
.common-title .more:before{font-family: "Font Awesome 5 Free";font-weight: 900;content: "\f0da";color:#edcc44;font-size: 20px;padding: 0 8px 0 0px;}

.site-title{font-size:32px;color:#000000;font-weight:bold;margin: 50px 0 20px 0;}
.site-content{max-width: 1200px;margin: 20px auto;text-align: left;line-height: 25px;font-size:16px;color:#4f4f4f;}

/*Header*/
#header{position:fixed;top:0;left:0;width:100%;z-index: 998;}
#header .wrap{position:relative;width: 100%;max-width:1400px;height:105px;margin:0 auto;-webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s;}
#header .wrap.on{
   background: rgba(0, 0, 0, 1);
   max-width:none;
   transition:0.5s ease;
   width:100%;
   height: 85px;
}

#header .logo{position:absolute;bottom: 15px;left:10px;display:flex;cursor:pointer;}
#header .logo img{padding-right:15px;}
#header .logo div span{display: block;color: #ffffff;font-size: 13px;font-weight: normal;padding: 7px 3px;margin-bottom: 5px;/* padding-left: 20px; */letter-spacing: 1px;/* display:block; */font-family: 'Noto Sans TC', sans-serif;}
#header .logo > .word{color: #ffffff;font-size: 24px;font-weight: bold;display:flex;align-items: flex-end;justify-content: center;}
#header .logo > .word div{letter-spacing: 1px;font-size: 25px;}

#header #nav {background: #000000;}
#header a.lang{display:inline-block;position:absolute;top: 35px;right: 10px;padding: 21px;background: #20673f;color: #ffffff;font-size:13px;cursor:pointer;}
#header #nav .lang-s{ display:none; }

/*menu*/
#header .wrap .navigation{/* position:relative; */flex: 6;height: 140px;/* background:url(../../images/header-bg.jpg) no-repeat left; */display:flex;align-items:center;justify-content:flex-end;text-align: right;}
#header .wrap .navigation .bottom{position:relative;margin-top: 0px;padding: 0 15px;/* padding-top: 15px; */position: absolute;top: 20%;right: 0px;max-width: 800px;/* border-top: 1px solid #e2e2e2; */background: #000000;}

/*選單*/
#header ul{margin:0;padding:0;list-style:none;}
#header ul > li:last-child{border-right:0;/* padding-right:10px; */}
#header ul > li:not(:last-child):after{content:"/";position:absolute;top: 15px;right:0;}
#header ul > li i{padding: 0 5px 0 5px;color: #ffffff;font-size: 12px;}
#header ul > li{position:relative;float:left;padding: 18px 25px 18px 1vw;font-size: 16px;color: #ffffff;font-weight: bold;/* border-right: 1px solid #fffefe; */}
#header ul > li a{color: #121212;text-decoration:none;}
#header ul > li a:hover{ color:#192d80; }
#header ul > li:hover span{ color:#c8a041; }

#header ul > li b{ display:none; }
#header ul > li:hover h{ display:none; }
#header ul > li:hover b{ display:inline-block; }
#header ul > li:hover:before {

  /*content: "About";*/
}

/*選單第二層*/
#header ul li nav{display:none;padding: 0px 0;z-index:99;position:absolute;left: -25%;right: 0;margin-left: auto;margin-right: auto;top: 46px;/* min-height: 400px; *//* overflow:hidden; */background: #000000;/* border: 1px solid #ebebeb; */box-shadow: 0 3px 5px rgb(0 0 0 / 25%);}
#header ul li nav.width-b{width: 700px;}
#header ul li nav.width-s{width: 210px;}
#header ul li .triangle-top{ display:none; }
/*選單第三層*/
#header ul li nav ul{display: inline-block;margin: 0 0px;padding: 10px 20px;list-style:none;/* overflow: hidden; */}
#header ul li nav ul li{position:relative;float:left;width: 100%;text-align: center;color: #ffffff;padding: 7px 20px 7px 20px;line-height: 20px;font-size: 15px;cursor: pointer;border-bottom: 1px solid #272727;}
#header ul li nav ul li:not(:last-child):after{ content:""; position:absolute;left: 15px;top: 15px;/*font-family: "Font Awesome 5 Free";content: "\f054";*/font-size: 12px;}
#header ul li nav ul li i{ position:absolute; right:10px; top:10px; }
#header ul li nav ul li a{display: block;width: 100%;color: #ffffff;padding: 15px 20px 15px 30px;font-weight: normal;font-size: 16px;}
#header ul li nav ul li:hover{ background:#333333; }
#header ul li nav ul li a:hover{ color:#ffffff !important; }
#header ul li nav ul li nav{display:none;z-index:99;position:absolute;top: 0px !important;/* min-height: 400px; *//* overflow:hidden; */background: #ffffff;border: 1px solid #ebebeb;box-shadow: 0 3px 5px rgb(0 0 0 / 25%);}
#header ul li nav ul li nav.position-r{left: 209px !important;}
#header ul li nav ul li nav.position-l{left: -211px !important;}
#header ul li nav ul li nav ul li{ position:relative; float:left;width: 100%;text-align: left;color:#333333; padding:0 !important; }
#header ul li nav ul li nav ul li i{ position:absolute; right:10px; top:10px; }

#header ul li nav ul li nav ul li a{display: inline-block;width: 100%;color:#333333 !important;padding: 6px 10px 6px 10px;}

#header ul li nav .items{/* float: left; */display:inline-block;width: 155px;text-align: left;vertical-align: top;margin: 10px 7px;}
#header ul li nav .items .caption{
    font-weight: bold;
    border-bottom: 1px solid #e1e1e1;
    padding: 5px 0 5px 0;
    margin: 0 0 10px 0;
    letter-spacing: 1px;
}
#header ul li nav .items .caption a{color: #000000 !important;}
#header ul li nav .items a{color: #5E5E5E;display: block;margin: 12px 0;font-size: 14px !important;}
#header ul li nav .items a:hover{ color:#9f1623; }

/*手機版選單按鈕*/
#mobileMenu {
	 bottom:20px;
	 z-index: 999;
	 cursor: pointer;
	 display: none;
	 position:absolute;
	 top: 35%;
	 right: 20px;
	 width: 35px;
	 height: 30px;
	 font-size: 25px;
	 color: #002E7A;
	 background: #002E7A;
	 padding: 6px 8px;
	 border: 2px solid #002E7A;
	 cursor:pointer;
	 border-radius: 5px;
}
#mobileMenu span {
	 width: 15px;
	 height: 2px;
	 display: block;
	 background: #ffffff;
	 margin-top: 4px;
	 -webkit-transition: 0.7s cubic-bezier(0.18, 1, 0.21, 1);
	 -moz-transition: 0.7s cubic-bezier(0.18, 1, 0.21, 1);
	 -ms-transition: 0.7s cubic-bezier(0.18, 1, 0.21, 1);
	 -o-transition: 0.7s cubic-bezier(0.18, 1, 0.21, 1);
	 transition: 0.7s cubic-bezier(0.18, 1, 0.21, 1);
}
.mobileMenu_spac {
	background: #fff !important
}
#mobileMenu span:first-child {
	margin-top: 0;
}
#mobileMenu .top {
	 position: absolute;
	 top: 10px;
	 -webkit-transform: rotate(225deg);
	 -moz-transform: rotate(225deg);
	 transform: rotate(225deg)
}
#mobileMenu .bottom {
	 position: absolute;
	 top: 10px;
	 margin-top: 0 !important;
	 -webkit-transform: rotate(-225deg);
	 -moz-transform: rotate(-225deg);
	 transform: rotate(-225deg)
}
#mobileMenu .middle {
	opacity: 0
}

@media screen and (max-width : 1024px) {
	#mobileMenu{ display:block; }
	#header .wrap .navigation .top nav{ display:none; }
	#header .wrap .navigation .bottom{ display:none; }	
}
@media screen and (max-width : 480px) {
	#header .wrap .navigation{ background:none; height:110px; }
}


/*Wrapper*/
#wrapper{ width:100%; padding:0 0 0 0; /*overflow:hidden;*/ }
#wrapper .container{width:100%;/* max-width:1300px; */margin:0px auto;padding: 0;box-sizing:border-box;min-height:300px;}
#wrapper .container.max-width{ max-width:1300px; margin:0px auto; }


/*footer*/
#footer{width:100%;overflow:hidden;min-height:210px;background-color: #2a335e;padding: 0px 0 20px 0;border-top: 10px solid #858b8d;}
#footer .wrap{position:relative;max-width:1300px;width:100%;margin:0 auto;color:#ffffff;display:flex;padding:0 10px;}
#footer .wrap .left{flex: 1.5;display:flex;align-items:center;/* justify-content: center; */}
#footer .wrap .left div{/* width:100%; *//* margin: 30px auto; *//* text-align:center; */padding: 10px 0 0 0;}
#footer .wrap .left .logo{/* position:absolute; */bottom: 15px;left:10px;display:flex;cursor:pointer;}
#footer .wrap .left .logo img{padding-right:15px;}
#footer .wrap .left .logo div span{display: block;color: #ffffff;font-size: 18px;font-weight: normal;padding: 7px 3px;margin-bottom: 5px;/* padding-left: 20px; */letter-spacing: 1px;/* display:block; */font-family: 'Noto Sans TC', sans-serif;}
#footer .wrap .left .logo > .word{color: #ffffff;font-size: 24px;font-weight: bold;display:flex;align-items: flex-end;justify-content: center;}
#footer .wrap .left .logo > .word div{letter-spacing: 1px;font-size: 30px;}



#footer .wrap .right{flex: 1;text-align: right;}
#footer .wrap .contact-info{float:right;color:#9fd3c7;font-size:14px;display:flex;width: 100%;max-width: 650px;margin: 10px 0 3vh 0;padding: 0 0 0 0px;}
#footer .wrap .contact-info .contact-left{}
#footer .wrap .contact-info .contact-right{flex:1;padding: 30px 0 0px 40px;text-align: left;}
#footer .wrap .contact-info .area{flex: 1;color:#ffffff;display: flex;align-items:center;writing-mode: vertical-lr;}
#footer .wrap .contact-info .area span{background:rgba(237, 204, 48, 1);color: #2a335e;font-size: 12px;/* font-style: oblique; */font-weight:bold;padding: 30px 8px 20px 8px;letter-spacing:2px;font-family: 'Lato', sans-serif;/*background: linear-gradient(45deg, rgba(237, 204, 48, 1)25%, rgba(237, 204, 48, 0.8)60%);background: -moz-linear-gradient(45deg, rgba(237, 204, 48, 1)25%, rgba(237, 204, 48, 0.8)60%);background: -webkit-linear-gradient(45deg, rgba(237, 204, 48, 1)25%, rgba(237, 204, 48, 0.8)60%);background: -o-linear-gradient(45deg, rgba(237, 204, 48, 1)25%, rgba(237, 204, 48, 0.8)60%);*/}

#footer .wrap .contact-info .items{display:flex;align-items: flex-start;}
#footer .wrap .contact-info .items a{ font-size:13px;}
#footer .wrap .contact-info .items:not(:last-child){padding-bottom: 15px;}
#footer .wrap .contact-info .items .items-title{flex: 1;max-width: 170px;min-width: 100px;color: #ffffff;font-size: 13px;}
#footer .wrap .contact-info .items .items-title i{padding-right: 10px;color: #edcc44;font-size: 16px;}
#footer .wrap .contact-info .items .items-content{flex: 4;color: #ffffff;line-height: 22px;}
#footer .wrap .contact-info .items .items-content:before{content:"";color:#7d7d7d;/* padding-right:15px; */}

#copyright{width:100%;overflow:hidden;line-height:18px;color: #ffffff;text-align: right;/* padding-top: 20px; *//* border-top: 1px solid #6d6d6d; */}
#copyright a{color: #ffffff;text-decoration:none;}
#copyright a:hover{ text-decoration:underline; }

@media screen and (max-width : 1200px) {
	#footer .wrap .left{flex:1;justify-content: center;}
}

@media screen and (max-width : 900px) {
	#footer .wrap{ display:block; }
	
	#footer .wrap .contact-info{margin: 2vh auto;float:none;max-width: 360px;}
	#footer .wrap .contact-info .contact-right{flex:1;padding: 10px 0 0px 10px;}
	#footer .wrap .contact-info .items .items-title i{ display:none; }	
	#footer .wrap .contact-info .area{ display:none; }
	#copyright{text-align: center;}	
	
	
}

@media (max-width: 992px) {
	#header a.lang{ display:none; }
	#header #nav .lang-s{ display:block; }
	
}

@media screen and (max-width : 768px) {
	#header .logo img{/* width: 120px; */}
	#header .logo > .word div{font-size: 15px;}
	#footer .wrap .contact-info{/* display:block; */}

	#footer .wrap .contact-info .items{padding-bottom:15px; }	
}


@media (max-width: 480px) {
	#header .logo div span{/* display:none; */}
	#footer .wrap .left .logo > .word div{ font-size:22px;}
	#footer .wrap .left .logo div span{ font-size:15px; }
	
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Index <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

/*Slogan*/
#index-slogan{width:100%;overflow:hidden;padding: 50px 20px;color:#000000;font-size:15px;}
#index-slogan .slogan-wrap{/* display:flex; */max-width:1300px;margin:0 auto;text-align: center;}
#index-slogan .slogan-wrap .slogan{
    font-size: max(2.2vw, 18px);
    padding: 40px 20px;
    line-height: 20px;
    font-weight: normal;
    font-style: italic;
}
#index-slogan .slogan-wrap img{width:100%;max-width:1082px;}

/*施工項目*/
#index-service{width:100%;overflow:hidden;padding: 50px 20px;color:#000000;font-size:15px; background:url(../../images/service-bg.png) repeat-x;/*background:#efefef;*/}
#index-service .service-wrap{/* display:flex; */max-width:1300px;margin:0 auto;text-align: center;}
#index-service .common-title{ text-align:right; }
#index-service .common-title i{font-style:normal;padding: 0 60px 0 0px;}


/*工程實績*/
#index-performance{width:100%;overflow:hidden;padding: 50px 20px;color:#000000;font-size:15px; }
#index-performance .performance-wrap{/* display:flex; */max-width:1300px;margin:0 auto;text-align: center;}


/*關於我們*/
#index-about{width:100%;overflow:hidden;padding: 50px 20px;color:#000000;font-size:15px;min-height: 680px;background:url(../../images/about-bg.jpg);background-position: center center; background-size:cover;}
#index-about .common-title{
    text-align: right;
}
#index-about .common-title i{font-style:normal;padding: 0 60px 0 0px;}
#index-about .about-wrap{display:flex; max-width:1300px; margin:0 auto; }
#index-about .about-wrap .editor{/*font-weight:bold;*/font-size:18px;line-height: 35px;}
#index-about .left{flex:1;padding: 0 50px 0 50px;}
#index-about .left .service-area{position:relative;display: flex;justify-content: space-between;margin:20px 0;padding:30px 0;border-top:1px solid #d4d4d4;border-bottom:1px solid #d4d4d4;}
#index-about .left .service-area .caption{position:absolute;background: #ffffff;padding: 5px 10px;top: -13px;left:0;text-transform:uppercase;color:#334e5f;font-size:16px;letter-spacing:2px;}
#index-about .left .service-area span{ width:102px; border:8px solid #698ba1; color:#fefefe; font-size:18px; margin:5px 0; padding: 30px 23px; letter-spacing: 2px; display:inline-block;
    
	background: linear-gradient(274deg, rgba(50, 77, 94, 1)51%, rgba(74, 105, 124, 0.9)100%);
	background: -moz-linear-gradient(274deg, rgba(50, 77, 94, 1)51%, rgba(74, 105, 124, 0.9)100%);
	background: -webkit-linear-gradient(274deg, rgba(50, 77, 94, 1)51%, rgba(74, 105, 124, 0.9)100%);
	background: -o-linear-gradient(274deg, rgba(50, 77, 94, 1)51%, rgba(74, 105, 124, 0.9)100%);
	
	border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
}
#index-about .right{flex:1;max-width: 520px;padding: 6vw 0 0 0;}


@media screen and (max-width : 1024px) {
		
	#index-about .about-wrap{display:block;}
	#index-about .right{min-height: 49vw;background-size: 100%;max-width: inherit;padding: 6vw 10px 0 10px;background-color: rgba(255, 255, 255, 0.5);}
}


/*聯絡我們*/
#index-contact{width:100%;max-width: 1300px;margin: 0 auto;min-height:400px;padding: 30px 0px;overflow:hidden;}
#index-contact .contact-form{display:flex;}
#index-contact .contact-form > .left{flex:1;padding: 15px 15px;background:url(../../images/contact-bg.png) no-repeat;background-position:bottom center;color: #262626;font-size: 18px;line-height: 40px;}
#index-contact .contact-form > .right{flex:1;padding: 0 15px;}


/*相關技術應用或服務*/
.service-form{ width:90%; overflow:hidden; padding:25px 0px; }
.service-form .service-title{ position:relative; color:#ffffff; font-size:16px; background:#3b3b3b; padding:20px 30px 20px 10px; cursor:pointer; }
.service-form .service-title:after{ position:absolute; top:20px; right:10px; content:"▽"; }
.service-form .service-title.change:after{ content:"△"; }
.service-form .service-content{padding: 20px 0;}
.service-form .type-area{width:100%;overflow:hidden;border-bottom:1px dotted #999999;margin: 0 0 20px 0;padding: 10px 0px;}
.service-form .type-area .type2{padding-left: 40px;padding-top: 10px;}

/*聯絡我們表單*/
.contact-form .input-item{width:100%;display: flex;align-items:center;justify-content: center;background:#ffffff;margin: 20px 0;padding: 0px 0 0 10px;border:1px solid #cecece;transition: all 0.1s ease;}
.contact-form .input-item:hover{border:1px solid #EDCC44; border-left:5px solid #EDCC44;}
.contact-form .input-item .left{flex:1;color: #000000;font-size: 16px;letter-spacing: 1px; }
.contact-form .input-item .left span{ color:#cb333e; width:13px; display:inline-block; }
.contact-form .input-item .right{flex: 4;padding: 0 0px;border-left: 1px solid #d5d5d5;}
.contact-form .input-item .right input{width:100%;font-size:16px;border:0;padding: 13px 10px 13px 10px;background:transparent;outline: 0;}

.contact-form .input-item .right textarea{width:100%;padding:10px;font-size:16px;height: 200px;border:0;background:transparent;resize:none;outline: 0;}
.contact-form .input-item .right .rand-img{position:absolute;right: 10px;top: 8px;cursor:pointer;}
.contact-form .pager .btn-1:before{ left:10px; }
.contact-form .pager{ text-align:right; }

#contact-info{ background:url(../../images/contact-bg.png) no-repeat; }
#contact-info .wrap{min-height:600px;display:flex; justify-content: space-between; flex-wrap:wrap; }
#contact-info .left{width:40%; padding:10px; }
#contact-info .left .css-table{ padding:10px; }
#contact-info .left .css-td:first-child{width: 20px; color:#71c6b2; }
#contact-info .left .css-td:nth-child(2){ width:40px; }
#contact-info .left .css-td{width:30px;padding: 15px 0;font-size: 16px;border-bottom: 1px dotted #cccccc;}
#contact-info .right{width:50%; padding:10px; }
#contact-info .right .map{width:100%;color:#385170;font-size:16px;display: flex;justify-content: flex-end;}
#contact-info .right .map .iframe{width:100%;/* max-width:500px; */height:400px;border:0;}


@media screen and (max-width : 1200px) {
	#contact-info .left{ flex:1; width:auto; }
	#contact-info .right{ flex:1; width:auto; }	
}
@media screen and (max-width : 1024px) {
	#contact-info .wrap{ display:block; }
	#index-news{ display:block; }
	#index-news .left .border{ max-width:none; height:inherit; }
	#index-news .left .border > div{ /*position:inherit; top:0; left:0; margin:0 auto; height:inherit; padding-left:0;*/ }
	#index-news .left .border > div .common-title{ text-align:center; }
	#index-news .left .border > div .common-title span{/* padding-left:10px; */}
	#index-news .left .border > div .common-title > .line{ margin:0 auto; }
	#index-about{padding:20px 20px;min-height: auto;}
	#index-about .left{ flex:inherit; padding:0 20px 0 20px; }
	#index-contact .contact-form{padding-top: 0px;}
	.contact-form .input-item .left{ flex:2; }
}
@media screen and (max-width : 768px) {
    #index-news .right .news-list .more{ display:none; }
	.contact-form .input-item .right{ flex:3; }
	#index-about{ padding:0px 0px; }
	#index-contact .contact-form{ display:block; }
	.service-form{ width:100%; }
	.contact-form .input-item .left{ flex:1; }
	
}
@media screen and (max-width : 480px) {
	.contact-form .input-item .right{ flex:1.5; }
	#contact-info .left .css-td:nth-child(2){ display:none; }
	#index-about .left .service-area{ display:block; text-align:center; }
	#index-about .left .service-area span{ margin:5px; }
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 施工項目 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

/*施工項目*/
#inner-service{width:100%;overflow:hidden;padding: 50px 20px;color:#000000;font-size:15px; /*background:#efefef;*/}
#inner-service .service-wrap{/* display:flex; */max-width:1300px;margin:0 auto;text-align: center;}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 工程實績 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

/*工程實績*/
#inner-performance{width:100%;overflow:hidden;padding: 50px 20px;color:#000000;font-size:15px; /*background:#efefef;*/}
#inner-performance .performance-wrap{/* display:flex; */max-width:1300px;margin:0 auto;/* text-align: center; */}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 工程實績詳細內頁 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


/*
.slick-prev{ background:url(images/prev.png); width:52px; height:52px;}
.slick-next{ background:url(images/next.png); width:52px; height:52px;}
*/

.slick-slider{ margin:30px 0; }
.slick-slider .toper{
    margin: 0 0 20px 0;
}
.slick-slider .lefter{position:relative;flex:1;/*padding:0 10px 0 10px;*/display: flex;align-items:center;justify-content: center;}
.slick-slider .lefter img, .slick-slider .righter img{width: 100%;max-height: 488px;height: auto;margin: auto; /* 將圖片置中 */}
.slick-slider .lefter .marker,.slick-slider .righter .marker{position:absolute;bottom:0;left:0;background: #000000;color: #ffffff;padding: 10px 20px;}
.slick-slider .righter{position:relative;flex:1;/*padding:0 0 0 20px;*/display: flex;align-items:center;justify-content: center;}
.slick-slider .caption{
    font-size: 20px;
    color: #000000;
    padding: 0 0 20px 0;
    letter-spacing: 1px;
    font-weight: bold;
}
.slick-slider .item-area{
    display: flex;
    flex-wrap: wrap;
    width: 50%;
}
.slick-slider .item-area .item{
    width: 100%;
    max-width: 300px;
    padding: 15px 0;
    font-size: 16px;
}
.slick-prev:before{ background:url(../../images/prev.png); width:52px; height:52px; } 
.slick-next:before{ background:url(../../images/next.png); width:52px; height:52px; }

.performance-slider{ display:flex;}

@media screen and (max-width: 600px) {
 .performance-slider{display:block;}
 .slick-slider .righter{/* padding:30px 10px; */}
 
.slick-slider .item-area{
    width: 100%;
} 
 
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 施工項目效果 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

:root {
  --d: 700ms;
  --e: cubic-bezier(0.19, 1, 0.22, 1);
  --font-sans: "Rubik", sans-serif;
  --font-serif: "Cardo", serif;
}

.page-content {
  display: grid;
  grid-gap: 1rem;
  /* padding: 1rem; */
  max-width: 1300px;
  margin: 0 auto;
  font-family: var(--font-sans);
}
@media (min-width: 600px) {
  .page-content {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 800px) {
  .page-content {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1300px) {
  .page-content {
    grid-template-columns: repeat(4, 1fr);
  }
}


.card {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 0.5rem;
  width: 100%;
  text-align: center;
  cursor:pointer;
  color: whitesmoke;
  background-color: whitesmoke;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);
}
@media (min-width: 600px) {
  .card {
    height: 300px;
  }
}
.card:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 110%;
  background-size: cover;
  background-position:center center;
  /*background-position: 0 0;*/
  transition: transform calc(var(--d) * 1.5) var(--e);
  pointer-events: none;
}
.card:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  pointer-events: none;
  /*background:rgba(10, 14, 41, 0.5);*/
  background-image: linear-gradient(to bottom, rgba(10, 14, 41, 0) 0%, rgba(10, 14, 41, 0.99) 100%);
  /*background-image: linear-gradient(to bottom, rgba(10, 14, 41, 0) 0%, rgba(10, 14, 41, 0.009) 11.7%, rgba(10, 14, 41, 0.034) 22.1%, rgba(10, 14, 41, 0.072) 31.2%, rgba(10, 14, 41, 0.123) 39.4%, rgba(10, 14, 41, 0.182) 46.6%, rgba(10, 14, 41, 0.249) 53.1%, rgba(10, 14, 41, 0.32) 58.9%, rgba(10, 14, 41, 0.394) 64.3%, rgba(10, 14, 41, 0.468) 69.3%, rgba(10, 14, 41, 0.54) 74.1%, rgba(10, 14, 41, 0.607) 78.8%, rgba(10, 14, 41, 0.668) 83.6%, rgba(10, 14, 41, 0.721) 88.7%, rgba(10, 14, 41, 0.762) 94.1%, rgba(10, 14, 41, 0.79) 100%);*/
  transform: translateY(-50%);
  transition: transform calc(var(--d) * 2) var(--e);
}
.card:hover{/*background:rgba(10, 14, 41, 0.5);*/}

.content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0.5rem;
  transition: transform var(--d) var(--e);
  z-index: 1;
}
.content > * + * {
  margin-top: 1rem;
}

.title {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.2;
  text-shadow: 1px 1px 1px #333333;
  margin: 0;
}

.copy {
  /* font-family: var(--font-serif); */
  font-size: 1.125rem;
  /* font-style: italic; */
  line-height: 1.55;
}

.btn {
  cursor: pointer;
  margin-top: 1.5rem;
  padding: 0.75rem 2.0rem;
  font-size: 18px;
  /* font-weight: bold; */
  letter-spacing: 1px;
  /* text-transform: uppercase; */
  color: white;
  background-color: #edcc44;
  border: none;
  border-radius: 30px;
}
.btn:hover {
  background-color: #be9a08;
}
.btn:focus {
  outline: 1px dashed yellow;
  outline-offset: 3px;
}

@media (hover: hover) and (min-width: 600px) {
  .card:after {
    transform: translateY(0);
  }

  .content {
    transform: translateY(calc(100% - 10.5rem));
  }
  .content > *:not(.title) {
    opacity: 0;
    transform: translateY(1rem);
    transition: transform var(--d) var(--e), opacity var(--d) var(--e);
  }

  .card:hover,
.card:focus-within {
    align-items: center;

  }
  .card:hover:before,
.card:focus-within:before {
    transform: translateY(-4%);
  }
  .card:hover:after,
.card:focus-within:after {
    transform: translateY(-50%);
  }
  .card:hover .content,
.card:focus-within .content {
    transform: translateY(0);
  }
  .card:hover .content > *:not(.title),
.card:focus-within .content > *:not(.title) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--d) / 8);
  }

  .card:focus-within:before, .card:focus-within:after,
.card:focus-within .content,
.card:focus-within .content > *:not(.title) {
    transition-duration: 0s;
  }
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 工程實績效果 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

:root {
  --d: 700ms;
  --e: cubic-bezier(0.19, 1, 0.22, 1);
  --font-sans: "Rubik", sans-serif;
  --font-serif: "Cardo", serif;
}

.page-content2 {
  display: grid;
  grid-gap: 1rem;
  /* padding: 1rem; */
  max-width: 1300px;
  margin: 0 auto;
  font-family: var(--font-sans);
}
@media (min-width: 600px) {
  .page-content2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 800px) {
  .page-content2 {
    grid-template-columns: repeat(3, 1fr);
  }
}


.card2 {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 0.5rem;
  width: 100%;
  text-align: center;
  cursor:pointer;
  color: whitesmoke;
  background-color: whitesmoke;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);
}
@media (min-width: 600px) {
  .card2 {
    height: 410px;
  }
}
.card2:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 110%;
  background-size: cover;
  background-position:center center;
  /*background-position: 0 0;*/
  transition: transform calc(var(--d) * 1.5) var(--e);
  pointer-events: none;
}
.card2:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  pointer-events: none;
  /*background:rgba(10, 14, 41, 0.5);*/
  background-image: linear-gradient(to bottom, rgba(10, 14, 41, 0) 0%, rgba(10, 14, 41, 0.59) 100%);
  /*background-image: linear-gradient(to bottom, rgba(10, 14, 41, 0) 0%, rgba(10, 14, 41, 0.009) 11.7%, rgba(10, 14, 41, 0.034) 22.1%, rgba(10, 14, 41, 0.072) 31.2%, rgba(10, 14, 41, 0.123) 39.4%, rgba(10, 14, 41, 0.182) 46.6%, rgba(10, 14, 41, 0.249) 53.1%, rgba(10, 14, 41, 0.32) 58.9%, rgba(10, 14, 41, 0.394) 64.3%, rgba(10, 14, 41, 0.468) 69.3%, rgba(10, 14, 41, 0.54) 74.1%, rgba(10, 14, 41, 0.607) 78.8%, rgba(10, 14, 41, 0.668) 83.6%, rgba(10, 14, 41, 0.721) 88.7%, rgba(10, 14, 41, 0.762) 94.1%, rgba(10, 14, 41, 0.79) 100%);*/
  transform: translateY(-50%);
  transition: transform calc(var(--d) * 2) var(--e);
}
.card2:hover{/*background:rgba(10, 14, 41, 0.5);*/}

.content2 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 1rem;
  transition: transform var(--d) var(--e);
  z-index: 1;
}
.content2 > * + * {
  margin-top: 1rem;
}

.title2 {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.2;
  text-shadow: 1px 1px 1px #333333;
  margin: 0;
}

.copy2 {
  /* font-family: var(--font-serif); */
  font-size: 24px;
  /* font-style: italic; */
  line-height: 1.35;
  text-shadow: 1px 1px 1px #333333;
}


@media (hover: hover) and (min-width: 600px) {
  .card2:after {
    transform: translateY(0);
  }

  .content2 {
    transform: translateY(calc(100% - 10.5rem));
  }
  .content2 > *:not(.title2) {
    opacity: 0;
    transform: translateY(1rem);
    transition: transform var(--d) var(--e), opacity var(--d) var(--e);
  }

  .card2:hover,
.card2:focus-within {
    align-items: center;
  }
  .card2:hover:before,
.card2:focus-within:before {
    transform: translateY(-4%);
  }
  .card2:hover:after,
.card2:focus-within:after {
    transform: translateY(-50%);
  }
  .card2:hover .content2,
.card2:focus-within .content2 {
    transform: translateY(0);
  }
  .card2:hover .content2 > *:not(.title2),
.card2:focus-within .content2 > *:not(.title2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--d) / 8);
  }

  .card2:focus-within:before, .card2:focus-within:after,
.card2:focus-within .content2,
.card2:focus-within .content2 > *:not(.title2) {
    transition-duration: 0s;
  }
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Mobile Menu <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


body { transition: background-color .2s; }
#wrapper { transition: margin-left .2s; }
.sidenav {display:flex;flex-direction: column;height: 100%;overflow:hidden;width: 0;position: fixed;z-index: 99999;top: 0;right: 0;background-color: rgba(255, 255, 255, 1);overflow-x: hidden;transition: 0.2s;/*padding-top: 60px;*/box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.sidenav .closebtn {font-size: 25px;position: absolute;top: 25px;right: 10px;color: #002E7A;}

.sidenav .head {width:100%;position: relative;overflow:hidden;/* text-align: center; */padding: 3px 0 3px 15px;border-top: 3px solid #002E7A;border-bottom: 1px solid #ebebeb;background: #ffffff;}
.sidenav .head img{max-width: 200px;}

.sidenav .head .logo{/* position:absolute; */bottom: 15px;left:10px;display:flex;cursor:pointer;}
.sidenav .head .logo img{padding-right:15px;}
.sidenav .head .logo div span{display: block;color: #000000;font-size: 12px;font-weight: normal;padding: 7px 3px;margin-bottom: 5px;/* padding-left: 20px; */letter-spacing: 0px;/* display:block; */font-family: 'Noto Sans TC', sans-serif;}
.sidenav .head .logo > .word{color: #000000;font-size: 24px;font-weight: bold;display:flex;align-items: flex-end;justify-content: center;}
.sidenav .head .logo > .word div{letter-spacing: 1px;font-size: 18px;}


.sidenav .menu-top{background: #ffffff;}
.sidenav .menu-bottom{width: 100%;height: 100%;background: #ffffff;padding: 20px 0 10px 0;display: flex;align-items: flex-end;justify-content: center;}
.sidenav .menu-bottom .search{padding:10px 20px;}
.sidenav .menu-bottom .search .items{
    margin: 20px 0;
    display:flex;
}
.sidenav .menu-bottom .search .items .lefter{
	flex: 1;
	width: 80px;
	font-size: 16px;
	color: #3c3c3c;
	display: flex;
	align-items:center;
	justify-content: center;
}
.sidenav .menu-bottom .search .items .lefter i{color: #0557A1;padding-right:8px;}
.sidenav .menu-bottom .search .items .righter{flex: 1;padding: 0 0 0 10px;}
.sidenav .menu-bottom .search .items .righter .search-items{ display:flex;}
.sidenav .menu-bottom .search .items .righter .search-items .input{flex: 1;}
.sidenav .menu-bottom .search .items .righter .search-items .input input[type="text"]{border:0;outline: 0;max-width: 100px;padding: 15px;-webkit-border-top-left-radius: 20px;-webkit-border-bottom-left-radius: 20px;-moz-border-radius-topleft: 20px;-moz-border-radius-bottomleft: 20px;border-top-left-radius: 20px;border-bottom-left-radius: 20px;}
.sidenav .menu-bottom .search .items .righter .search-items .button{flex:1;background: #0557A1;color: #ffffff;padding: 15px 20px;-webkit-border-top-right-radius: 20px;-webkit-border-bottom-right-radius: 20px;-moz-border-radius-topright: 20px;-moz-border-radius-bottomright: 20px;border-top-right-radius: 20px;border-bottom-right-radius: 20px;}

.sidenav .menu-bottom .community{padding: 10px 5px;text-align: center;}
.sidenav .menu-bottom .copyright a{color: #939797;text-decoration:none;}
.sidenav .menu-bottom .copyright a:hover{ text-decoration:underline; }

@media screen and (max-height: 450px) {
 .sidenav {padding-top: 15px;}
 .sidenav a {font-size: 18px;}
}
/*選單 - 選項*/
#ajax-sidenav > div {position:relative;width: 100%;border-left: 5px solid #002E7A;border-bottom: 1px solid #ebebeb;color: #333333;padding: 15px 25px;line-height:20px;box-sizing:border-box;/* cursor: pointer; */cursor: hand;font-size: 14px;letter-spacing: 3px;}
#ajax-sidenav > div:before {/*content:url(../../images/header-icon.png);vertical-align:0; padding-right:10px;color: #000000;*/}
#ajax-sidenav > div i {position:absolute;right: 0px;top: 0px;color: #002E7A;cursor: pointer;display: inline-block;padding: 18px;}
#ajax-sidenav > div.title { background: #b19bb5; color: #ffffff; }
#ajax-sidenav > div:hover { /*color:#57708e;*/ }
#ajax-sidenav > div span { position:absolute; right:0; top: 0; display:block; padding: 15px 20px; border-left: 1px solid #ebebeb;/* border-right: 1px solid #ebebeb; */ }
#ajax-sidenav > div.nav {background: #ffffff;border-bottom: 1px solid #ebebeb;color: #ffffff;font-weight: bold;}
#ajax-sidenav > div.nav:before { content:""; padding-right:0px; }
#ajax-sidenav > div img { vertical-align:middle; padding-right:8px; }
.submenu-nav { width: 100%; overflow:hidden; display:none; background-color: #FFFFFF; }
.submenu-nav div {position:relative;font-size: 14px;background: #ffffff;line-height: 20px;border-bottom: 1px solid #ebebeb!important;padding: 18px 30px 18px 55px !important;/* cursor:pointer; */}
.submenu-nav div:before{position: absolute;left: 30px;top: 20px;font-family: "Font Awesome 5 Free";font-weight: 900;content: "\f111";color: #e2e2e2;padding-right: 8px;}
.submenu-nav div a{font-size: 14px;color: #333333 !important;}
.submenu-nav div i{position:absolute;top:20px;right: 16px;color: #ffffff; cursor:pointer;}
.submenu-nav.layer3 div{padding: 18px 10px 18px 80px !important;}
.submenu-nav.layer3 div:before{position: absolute;left: 55px;top: 20px;font-family: "Font Awesome 5 Free";font-weight: 100;content: "\f111";color: #e2e2e2;padding-right: 8px;}

.jq-submenu a {color: #333333;} 


.submenu2{background:#ebebeb !important;border-left: 5px solid #9B7354;}
.submenu3{background:#f5f5f5 !important;border-left: 5px solid #9B7354;}


.copyright{text-align: center;color: #939797;line-height: 18px;padding-bottom: 20px;}
.copyright a{color: #ffffff;}
.copyright a:hover{text-decoration: underline;}

@media screen and (max-height: 450px) {
 .sidenav { padding-top: 15px;}

 .sidenav a { font-size: 18px;}
}

/*搜尋*/
.jq-submenu.srh{position:relative;padding:0 !important;}
.jq-submenu.srh .srh-btn{position:absolute;right: 30px;top: 20px;}
.jq-submenu.srh input[type="text"]{
	/* max-width:218px; */
	background: #999999;
	-webkit-appearance: none;
	border-radius: 0;
	width: 100%;
	height: 50px;
	border:0;
	font-size: 14px;
	padding: 0 50px 0 25px;
	box-sizing: border-box;
	letter-spacing:1px;
	color: #ffffff;
	outline:0;
}


.jq-submenu.nav{ border-left:0 !important; }
.jq-submenu.nav i{ position:initial !important; padding-right:8px; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Swiper Slider <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


.swiper-word {/*display:none;*/width:100%;text-transform: uppercase;/* text-shadow: 1px 1px 1px #999999; */font-style: italic;letter-spacing: 5px;max-width: 1400px;position:absolute;right: 0;left: 0;margin-left: auto;margin-right: auto;font-size: 30px;line-height: 30px;top: 35%;/* text-align: center; *//* padding-right:4%; *//* padding-left: 50px; */box-sizing:border-box;}
.swiper-word span{
    position: absolute;
    text-align: left;
    letter-spacing: 5px;
}
.swiper-word span.word1{
    top: 0px;
    right: 12%;
}
.swiper-word span.word2{
    top: 90px;
    right: 9%;
}
.swiper-word span.word3{
    top: 181px;
    right: 7%;
}
.swiper-word i {display: block;font-size: 30px;padding: 5px 0px;letter-spacing: 5px;}



/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Bxslider <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

ul.bxslider { margin:0; padding:0; }
#home_banner {/* margin-top: 125px; *//*display: inline-block;*/width: 100%;overflow: hidden;position: relative;background:#f3f8fb;color: #ffffff;}

#home_banner ul{ list-style:none; }
#home_banner li { width: 100%; background-repeat: no-repeat; background-size: cover; background-position: center;}
#home_banner .img { display: none; }
#home_banner .bxslider { /*opacity: 0;*/ }
#home_banner .bx-wrapper .bx-pager.bx-default-pager a:hover, #home_banner .bx-wrapper .bx-pager.bx-default-pager a.active {background: #ffb109;border: 1px solid #ffffff;}
#home_banner .bx-wrapper .bx-pager.bx-default-pager a {background-color: white;border:1px solid #ccc;width: 15px;height: 15px;margin: 0 8px;border-radius: 50%;box-shadow:2px 2px 8px rgba(15%,15%,40%,0.1);}
#home_banner .bx-wrapper .bx-pager {display: none;bottom: 32px;opacity: 1;}
#home_banner .bx-wrapper .bx-controls-direction{ opacity: 0; }
#home_banner .word { font-size: 15px; position: absolute; margin-left: -187px; margin-top: -116px; left: 50%; top: 50%; color: #673D3A; letter-spacing: 25px; opacity: 0.2; }
#home_banner .word b { font-weight: bold; }
#home_banner .down { position: absolute; right: 30px; bottom: 32px; width: 34px; height: 28px; z-index: 99; cursor: pointer; opacity: 0; }
#home_banner .down img { display: block; }
#home_banner .bx-prev{ left:5%; }
#home_banner .bx-next{ right:5%; }


/* line 84, scss/_header.scss */
.headerTitleContainer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  /*
  @media only screen and (max-width: 640px), screen and (max-height: 900px) {     
  	.headline {
  		margin: 13rem auto 0 auto;
  	}
  }
  @media only screen and (min-width: 641px) and (max-width: 768px) {
  	.headline {
  		margin: 10rem auto 0 auto;
  	}
  }
  */
}
/* line 90, scss/_header.scss */
.headerTitleContainer .headline {
  text-align: center;
  margin: 18.5rem auto 0 auto;
  width: 90%;
  font-size: 36px;
  max-width: 800px;
  color: #ffffff;
  font-weight: bold;
  letter-spacing: 8px;
  /* border-bottom: 1px solid #ffffff; */
  /* background-color:rgba(0, 0, 0, 0.5); */
  padding:10px 0;
}

.headerTitleContainer a{ 
  text-decoration:none;
}

.headerTitleContainer .headline p{
    padding: 20px 0 20px 0px;
    font-size: 60px;
    letter-spacing: 5px;
}

.headerTitleContainer .headline h2{
    letter-spacing: 3px;
    color: #F4D885;
}

/* line 96, scss/_header.scss */
.headerTitleContainer .button, .headerTitleContainer .headerButton {
  display: none;
}


@media screen and (max-width : 1024px) {
	
	#home_banner .bx-controls-direction
	{
		display:none;	
	}
	
	#home_banner .bx-wrapper .bx-pager.bx-default-pager a {
		 width: 15px;
		 height: 15px;
	}
	#home_banner, #home_banner li {
		max-height: 675px;
		height: 675px;
		/*margin-top: 75px;*/
	}
}

@media only screen and (max-width: 1024px) {
  /* line 104, scss/_header.scss */
  .headerTitleContainer .headline {
    margin: 18r.5em auto 0 auto;
    font-size: 20px;
  }
  .headerTitleContainer .headline p{ font-size:30px; padding:5px 0; }  
}
@media only screen and (min-width: 641px) and (max-width: 768px) {
  /* line 110, scss/_header.scss */
  .headerTitleContainer .headline {
    margin: 7rem auto 0 auto;
  }
}



/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Youtube RWD <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden; }
  .embed-responsive::before {
    display: block;
    content: ""; }
  .embed-responsive .embed-responsive-item,
  .embed-responsive iframe,
  .embed-responsive embed,
  .embed-responsive object,
  .embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; }

.embed-responsive-21by9::before {
  padding-top: 42.85714%; }

.embed-responsive-16by9::before {
  padding-top: 56.25%; }

.embed-responsive-4by3::before {
  padding-top: 75%; }

.embed-responsive-1by1::before {
  padding-top: 100%; }
  
.rounded {
  border-radius: 40px !important;
  }  


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> checkbox/radio template <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


/* The container */
.container-item {
    display: inline-block;
    position: relative;
    color: #474747;
    letter-spacing: 2px;
    padding-left: 35px;
    padding-right: 20px;

    margin-bottom: 10px;
    margin-top: 10px;
    cursor: pointer;
    font-size: 16px;
    font-weight:normal;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    user-select: none;
}

/* Hide the browser's default checkbox */
.container-item input {
    position: absolute;

    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: -3px;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #fff;
    border:1px solid #CCC;
}

/* On mouse-over, add a grey background color */
.container-item:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container-item input:checked ~ .checkmark {
    background-color: #fff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container-item input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container-item .checkmark:after {
    left: 8px;
    top: 4px;
    width: 5px;
    height: 10px;
    border: solid #179ccb;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> CSS效果 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-150%);
	opacity: 0;
  }
  60% {
	/*
    transform: translateX(-20%);
	opacity: 80%;
	*/
  }  
  100% {
    transform: translateX(0);
	opacity: 100%;
  }
}

@keyframes slideInFromRight {


  0% {
    transform: translateX(150%);
	opacity: 0;
  }
  60% {
	/*
    transform: translateX(-20%);
	opacity: 80%;
	*/
  }  
  100% {
    transform: translateX(0);
	opacity: 100%;
  }
}

/*------Zoom--------*/
.scaleZoom {

	-webkit-animation: scaleZoom 8s ease both;
	animation: scaleZoom 8s ease both;
}
@-webkit-keyframes scaleZoom {
	from { opacity: 1; -webkit-transform: scale(1.3); }
}
@keyframes scaleZoom {
	from { opacity: 1; -webkit-transform: scale(1.3); transform: scale(1.3); }
}

/*線的動畫*/
@keyframes widthGroup-1 {
    0% { width: 0; }
    60% { width: 70px; }	
    100%   { width: 60px; }
}
@keyframes widthGroup-2 {
    0% { width: 0; }
    100%   { width: 80%; }
}

/*區塊跳動效果*/
.bannerArea{ z-index:99; }
.bannerArea a.scrollDown{
	display:block;
	color:#000;
	text-align:center;
	width:80px;
	position:absolute;
	bottom:20px;
	left:50%;
	margin-left:-40px;
	z-index:999;
	}

.bannerArea a.scrollDown i{
	display:inline-block;
	text-align:center;
	font-size:25px;
	color:#FFF;
	text-align:center;}

/*------css3動畫--------*/
@-webkit-keyframes upDown {
  0%     {bottom:20px; opacity:1;}
  50%   {bottom:28px; opacity:0.5;}
  100% {bottom:20px; opacity:1;}

}
@-moz-keyframes upDown {
  0%     {bottom:20px; opacity:1;}
  50%   {bottom:28px; opacity:0.5;}
  100% {bottom:20px; opacity:1;}
}
@keyframes upDown {

  from     {bottom:20px; opacity:1;}
  50%   {bottom:28px; opacity:0.5;}
  to {bottom:20px; opacity:1;}
}
.upDown{
	-webkit-animation: upDown ease-out 1s infinite;
	-moz-animation: upDown ease-out 1s infinite;

	-o-animation: upDown ease-out 1s infinite;
	animation: upDown ease-out 1s infinite;}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Loadaction <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.Loadaction_Box { position:relative; height: 100%; width: 0%; position: fixed; overflow:auto; top: 0; left: 0; overflow:auto; background-color:rgba(0, 0, 0, 0.5); z-index:100000000 }
.Loadaction {width: 220px;height: 60px;top: 42%;position: absolute;margin-left: auto;margin-right: auto;padding-top: 10px;left: 0;right: 0;background-color:rgba(0, 0, 0, 0.5);-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;}
.Actionupload_Text {font-size:13px;color:#FFFFFF;height: 25px;}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> pagelink <<<--------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.pageselect{border:1px solid #CCCCCC;padding: 4px 5px;font-size:12px;}
.pageselect:hover{ background:#ebebeb; }
a.pagelink_no{color:#333333;text-decoration:none;border: 1px solid #cccccc;padding: 7px 5px;display: inline-block;margin: 5px 0;}
a.pagelink_no:hover{ background:#ebebeb; }
a.pagelink{color:#333333;text-decoration:none;border: 1px solid #CCCCCC;padding: 5px 10px;}
a.pagelink:hover{ background:#ebebeb; }
a.pagelink_ch{color:#333333;padding: 5px 10px;border: 1px solid #cccccc;background: #ebebeb;text-decoration:none;}