@charset "utf-8";
@import url("reset.css");
@import url("loading.css");

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> Main <<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; letter-spacing:1px; outline:0; }
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%; }
.fix-top{ /*margin-top:130px;*/ }

/*fix safari*/
input, select, textarea{ -ms-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; -webkit-box-sizing:content-box;}
input[type='text'],input[type='password'],input[type='button'],input[type='submit']{  -webkit-appearance: none; }

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

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

/*表格*/
.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:20px;color:#121212;}

/*全營幕遮罩*/ 
.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;
transition: all 0.5s linear;
}
.bg-overlay.visible{opacity:1;visibility:visible} 


/*網頁大標題*/
.common-title{text-align: left;font-size:36px;color:#2d2d2d;/* font-weight:bold; *//* letter-spacing: 4px; */line-height: 30px;padding: 20px 10px 20px 10px;margin: 0 0 0 0;}
.common-title span{font-size: 30px;letter-spacing: 3px;font-family: 'Noto Sans TC', sans-serif;}
.common-title > .line{background: #9fd3c7;width: 60px;height: 3px;margin: 30px 0 0 0; animation:1s ease-in-out 0.8s 1 widthGroup-1;}

/*回上頁*/
.gotop{ width:100%; max-width:1300px; overflow:hidden; margin:10px auto 40px auto; text-align:right; }

/*網站按鈕*/
.btn-1{
	position:relative;
	display:inline-block;
	color: #ffffff!important;
	border: 1px solid #385170;
	background: #385170;
	font-size: 13px !important;
	width:auto !important;
	/* text-align: left !important; */
	padding: 15px 20px 15px 50px;
	margin: 0 0 0 0;
	color:#ffffff;
	cursor:hand;
	cursor:pointer;
	transition: all 0.5s linear;
}
.btn-1 span{border-left: 1px solid #ffffff;padding: 0 20px 0 30px;}
.btn-1:before{position:absolute;width: 30px;/* text-align: justify; */left: 0px;top: 15px;font-family: "Font Awesome 5 Free";font-weight: 900;content: "\f054";color: #ffffff;}
.btn-1:hover{ padding: 15px 30px 15px 60px; }

.btn-2{
	position:relative;
	display:inline-block;
	color: #ffffff!important;
	border: 1px solid #385170;
	background: #385170;
	font-size: 15px !important;
	width:auto !important;
	/* text-align: left !important; */
	padding: 10px 20px 10px 20px;
	margin: 0 0 0 10px;
	color:#ffffff;
	cursor:hand;
	cursor:pointer;
	transition: all 0.5s linear;
}
.btn-2 i{ padding:0 10px 0 0;}
.btn-2 span{border-left: 1px solid #ffffff;padding: 0 20px 0 30px;}

/*圖片裁切*/
.img-cut {height:300px;overflow:hidden;/*border:1px solid #ccc;*/line-height: 300px;background: #ffffff;
display:flex; align-items:center; justify-content: center; 
}
.img-cut img{ vertical-align:middle;}


@media screen and (max-width : 480px) {	
	.fix-top{ /*margin-top:110px;*/ }
	
}

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

#wrapper{ width:100%; }
.container{width:100%;overflow:hidden;}
.container .wrap{width:100%;max-width:1300px;margin: 60px auto 30px auto;overflow:hidden;}

/*左右欄的頁面*/
.container .wrap{position:relative;max-width:1300px;min-height:500px;margin: 0px auto 0 auto;padding: 0 0 0px 0;}
.container .wrap .layout-left{width: 25%;float:left;box-sizing: border-box;padding: 0 10px;}
.container .wrap .layout-right{width: 75%;float:left;box-sizing: border-box;padding: 0 10px;}

#header{position:relative;width: 100%;height: 130px;/*position: fixed;*/top:0;margin:0 auto;background:url(../../images/header-bg.jpg) repeat-x;background-position:bottom;background-color: #ffffff;border-bottom: 1px solid #ebebeb;z-index: 999;}
#header .wrap{position: relative;max-width:1300px;margin:0 auto; }
#header nav{ max-width:1300px; width:100%; height:45px; margin:0 auto; text-align:right; background:#ffffff; display:flex; align-items:center; justify-content:flex-end; }
#header nav > span{ padding-left:30px; }
#header nav span select{border:0;vertical-align: middle;height: 20px;}
#header nav span a{ font-size:14px; }
#header nav > span i{font-size: 16px;color: #82cdbb; padding-right:8px; }
#header nav a{ color:#000000;text-decoration:none; }
#header nav a:hover{ color:#71c6b2; }

#header .logo{ position:absolute; top:10px; left:10px; display:flex; }
#header .logo img{ padding-right:15px; }
#header .logo div span{ color:#00459c; font-size:28px; padding-bottom:5px; letter-spacing:3px; display:block; font-family: 'Noto Sans TC', sans-serif; }
#header .logo > .word{ color:#9a9a9a; font-size:14px; display:flex; align-items:center; justify-content: center;  }


/*header選單*/
#header ul{ float:right; list-style:none; margin:0; padding:0; display:flex; flex-wrap: wrap; }
#header ul > li{ position:relative; display:inline-block; text-align:center; height:85px; display:flex; align-items:center; cursor:pointer; }
#header ul > li a{ text-decoration:none; }
#header ul > li:not(:nth-last-child(-n+2)):hover{ background:#57708e;
transition: all 0.5s ease;
}
#header ul > li:not(:nth-last-child(-n+2)):hover span{ color:#ffffff; }
#header ul > li:not(:nth-last-child(-n+2)):hover div{ color:#ffffff; }
#header ul > li div{text-align:center;font-size: 13px;color: #a5a5a5;min-width: 80px;}
#header ul > li{ border-left:1px solid #e7e7e7; }
#header ul > li:not(:nth-last-child(-n+2)) i{opacity:0; position:absolute;bottom: 0px;left:0;right:0;margin-left:auto;margin-right:auto;}
#header ul > li:not(:nth-last-child(-n+2)):hover i{ opacity:1; color:#ffffff; bottom:3px;
transition: all 0.5s ease;
}
#header ul > li span{display:block;font-size: 18px;font-family: 'Noto Sans TC', sans-serif;color:#000000;letter-spacing: 2px;padding: 10px 25px 0px 25px;}
#header ul > li:nth-last-child(-n+2){ background:#414345; }
#header ul > li:nth-last-child(-n+2) i{ color:#71c6b2; font-size:15px; }
#header ul > li:last-child{ display:none; }
#header ul > li:last-child i{ font-size:25px; }
#header ul > li:nth-last-child(-n+2) span{ color:#ffffff; }

/*第二層*/
#header ul > li:hover ul{ display:block; }
#header ul > li ul{display:none;position:absolute;top:85px;left:0;width:250px;height:auto;background:#ffffff;border:1px solid #e7e7e7;border-top:0;border-left:0;padding: 5px 0 0 0;}
#header ul > li ul li{position:relative;height:auto;padding: 8px 10px;font-size:15px;}
#header ul > li ul li:last-child{ display:block; text-align:left; }
#header ul > li ul li:nth-last-child(-n+2){ background:#ffffff; }
#header ul > li ul li:hover{ background:#57708e; color:#ffffff;transition: all 0.5s ease;}
#header ul > li ul li a{ color:#333333; }
#header ul > li ul li:hover a:before{font-family: "Font Awesome 5 Free"; font-weight: 900;  content: "\f0da";font-size: 14px; padding-right:5px; }
#header ul > li ul li:hover a{ color:#ffffff !important;}

/*第三層*/
#header ul > li ul li div{position:absolute;top: 0px;right: -250px;width:250px;height:auto;background:#999;}
#header ul > li ul li:hover div{ display:block; }
#header ul > li ul li div{display:none;background: #FCFCFC !important;color:#333333 !important;border:1px solid #e7e7e7;padding: 5px 0;}
#header ul > li ul li div span{display:block;padding: 5px 10px 10px 10px;text-align:left;font-family:"微軟正黑體";font-size:15px;}
#header ul > li ul li div span:hover:before{font-family: "Font Awesome 5 Free"; font-weight: 900;  content: "\f0da";font-size: 14px; padding-right:5px; }
#header ul > li ul li div span:hover{ color:#57708E !important; }

/*子選單(已棄用191022)*/
#header ul > li .sub-menu{position:absolute;top:85px;left:0; z-index:1; text-align:left;/* padding:10px 30px 10px 30px; */ padding:10px; background:#ffffff;width:240px; display:none;height:530px; overflow:auto; opacity:1;box-shadow:2px 2px 8px rgba(15%,15%,40%,0.1);}
#header ul > li .sub-menu.shows{ height:auto; display:block; /*transition: all 0.5s ease;*/ }
#header ul > li .sub-menu a{display:block;color:#000000 !important;font-size:14px;padding: 5px 20px 5px 20px;width:240px;text-decoration: none;/* box-sizing: border-box; */}
#header ul > li .sub-menu a:hover:before{font-family: "Font Awesome 5 Free"; font-weight: 900;  content: "\f0da";font-size: 14px; padding-right:5px; }
#header ul > li .sub-menu a:hover{ color:#57708e !important;}
#header ul > li .sub-menu a.on:before{font-family: "Font Awesome 5 Free"; font-weight: 900;  content: "\f0da";font-size: 14px; padding-right:5px; }
#header ul > li .sub-menu a.on{ color:#57708e !important;}

#header ul > li .sub-menu div{ width:100%; overflow:hidden; }
#header ul > li .sub-menu div > .left{ float:left; width:100%; text-align:left; }	
#header ul > li .sub-menu div > .right{ float:left; width:0; height:0; text-align:left; border-left:1px solid #d5d5d5; }	


/*search-bar*/
#search-bar{position:relative;width:100%;height: 130px;background:#ffffff;position:fixed;top:-180px;z-index:999999999;}
#search-bar .close-btn{ position:absolute; top:10px; right:10px; }
#search-bar .search-btn{ position:absolute;right:2%;top:-40px; }
#search-bar input[type='text']{border:0;border-bottom:1px solid #CCC;width:95%;letter-spacing:1px;outline:0;margin: 50px 2% 0 2%;padding-right:50px;box-sizing:border-box;font-size:40px;}

/*letter-bar*/
#letter-bar{position:relative;width:100%;height: 130px;background:#ffffff;position:fixed;top:-180px;z-index:999999999;}
#letter-bar .close-btn{ position:absolute; top:10px; right:10px; }
#letter-bar .search-btn{position:absolute;right:2%;top: -29px;cursor: pointer;border: 0;background: #cccccc;font-size: 40px;padding: 0px 30px;}
#letter-bar input[type='text']{border:0;border-bottom:1px solid #CCC;width:95%;letter-spacing:1px;outline:0;margin: 50px 2% 0 2%;padding-right:50px;box-sizing:border-box;font-size:40px;}


#footer{ width:100%; overflow:hidden; min-height:210px; background:url(../../images/footer-bg.png) left bottom no-repeat; background-color:#142d4c; padding:20px 0; }
#footer .wrap{ max-width:1300px; width:100%; margin:0 auto; color:#ffffff; display:flex; padding:0 10px; }
#footer .wrap .left{ flex:1; display:flex; align-items:center; justify-content: center; }
#footer .wrap .right{flex:3;text-align: right;}
#footer .wrap .right ul{list-style:none;margin: 0 0 0 0;padding:0;float:right;overflow: hidden;background: #385170;
transition: all 0.5s ease;
}
#footer .wrap .right ul li{float:left;padding: 5px 1.5vw;font-size: 15px;margin: 10px 0px;/* background: #385170; */}
#footer .wrap .right ul li a:hover{ background:#253d5b;transition: all 0.5s ease; }
#footer .wrap .right ul li:not(:last-child){ border-right:1px solid #ffffff; }
#footer .wrap .right ul li a{color:#ffffff;text-decoration:none;padding: 5px 10px;}
#footer .wrap .contact-info{float:right;color:#9fd3c7;font-size:14px;display:flex;width: 100%;max-width: 650px;margin: 4vh 0;}
#footer .wrap .contact-info .contact-left,
#footer .wrap .contact-info .contact-right{border-left:5px solid #9fd3c7;flex:1;padding: 0 0 0 20px;text-align: left;}
#footer .wrap .contact-info .items{display:flex;align-items: flex-start;}
#footer .wrap .contact-info .items:not(:last-child){padding-bottom: 15px;}
#footer .wrap .contact-info .items .items-title{flex: 1;}
#footer .wrap .contact-info .items .items-content{flex: 3;}
#copyright{width:100%;overflow:hidden;line-height:23px;color:#8695a7;text-align: right;}
#copyright a{ color:#8695a7; text-decoration:none; }
#copyright a:hover{ text-decoration:underline; }


/*內頁Banner*/
#banner-box{  width:100%; overflow:hidden; }
#banner-inner{position:relative;height:370px;background-size: cover; display:flex;align-items:center;justify-content: center; }
#banner-inner .common-title{ opacity:0; text-align:center; color:#ffffff; font-size:16px; }
#banner-inner .common-title span{font-size:40px;display: inline-block;margin-bottom: 10px;letter-spacing: 5px; font-family:inherit; }
#banner-inner .common-title > .line{ margin:15px auto 0 auto;}
#banner-inner .sitemap{width:100%; max-width:1300px; position:absolute; bottom:70px; color:#feffff; font-size:15px; line-height:20px; left:0; right:0; margin-left:auto; margin-right:auto; text-align:right;}
#banner-inner .sitemap i{ padding-right:5px; }
#banner-inner .fake-div{width:100%; max-width:1300px; height:50px; background:#FFF; position:absolute; bottom:0px;; left:0; right:0; margin-left:auto; margin-right:auto;}

@media screen and (max-width : 1400px) {
	#header .logo div span{ font-size:2vw; }
	#header .logo > .word{ font-size:1vw;}	
	#header ul li span{ font-size:14px;}
	#banner-inner .sitemap span{ padding:0 10px;}

}
@media screen and (max-width : 1300px) {
	#banner-inner .fake-div{ display:none; }
}
@media screen and (max-width : 1024px) {	
	#header ul li:not(:nth-last-child(-n+2)){ display:none; }	
	#header ul li:last-child{ display:flex; }	
	.container .wrap .layout-left{ display:none; }
	.container .wrap .layout-right{ width:100%; }
	#footer .wrap{ display:block; }
	#footer .wrap .left{ margin-bottom:25px; }
	#footer .wrap .right ul{ max-width:650px; margin:0 auto; float:none; }
	#footer .wrap .right ul li{padding: 5px 11px;}
	#footer .wrap .contact-info{ margin:4vh auto; float:none; }
	#copyright{ text-align:center; }
	
}
@media screen and (max-width : 768px) {	

	#footer .wrap .right ul{background:none;text-align: left;}
	#footer .wrap .right ul li{ float:none; display:inline-block; background:#385170; }
	#footer .wrap .right ul li:not(:last-child){ border-right:0; }	
	#footer .wrap .contact-info{ display:block; }
	#footer .wrap .contact-info .items{padding-bottom:15px; }
}
@media screen and (max-width : 480px) {	
	#header{ height:110px; }
	#header .logo{ top:0; }
	#header .logo > .word{ display:none; }
	#header ul li{ height:65px; }
	#header ul li div{ min-width:50px; }
	#header nav > span{ padding-left:10px; }
	#header nav > span span{ display:none; }	
	#footer .wrap .right ul li{ display:block; text-align:center;}
	
}


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


#index-about{ background:url(../../images/website-bg-1.png) no-repeat; background-color:#fbfbfb; background-position:top right; }
#index-about .wrap2{min-height:600px;display:flex;/* align-items:center; */justify-content: flex-start;}
#index-about .left{flex: 3; padding:10px; }
#index-about .right{flex: 2;display: flex;align-items:center;justify-content: flex-end; padding:10px; }
#index-about .right .map{ width:100%; color:#385170; font-size:16px; }
#index-about .right .map .iframe{width:100%; max-width:500px; height:280px; border:0;}
#index-about .right .map a{color:#385170;font-size:16px;padding: 10px 0;display: inline-block;text-decoration:none;}
#index-about .right .map a i{ padding-right:5px; }

#index-news{/* min-height:1200px; */background:url(../../images/container-news-bg.png) no-repeat;background-position:bottom left;}
.index-news-list{float:right;width: 600px;margin-bottom: 40px; padding:10px; /* height: 400px; */ transition: all 0.5s ease; }
.index-news-items{display:flex;flex-wrap:wrap;align-items: center;width:100%;overflow:hidden;border-bottom:1px dotted #989898;padding: 16px 10px 16px 0;}
.index-news-items .date{ flex:1; }
.index-news-items .date span{background:#ececec;color:#5e5e5e;padding: 5px 10px; font-size:14px; }
.index-news-items .title{ flex:4; font-size:15px; }
.index-news-items .title a{color:#000000;font-size:16px; line-height:20px; text-decoration:none;text-shadow: 1px 1px 1px #ebebeb;}
.index-news-items .title a:hover{ color:#385170; }
.index-news-items:hover .date span{background:#385170;color:#ffffff;transition: all 0.2s linear;}
.index-news-list .pager{ text-align:right; }

#index-product{ background:url(../../images/website-bg-2.png) left top no-repeat; }
#index-product .container{ min-height:800px; background:url(../../images/website-bg-3.png) right bottom no-repeat;}
#index-product .container .common-title{ text-align:center; padding-top: 8vw; }
#index-product .container .common-title > .line{ margin:30px auto 0 auto; }
#index-product .container .content{margin: 0 auto 30px auto;text-align:center;max-width:650px;color:#4e4e4e;padding:0 10px;font-size:15px;line-height:25px;}
#index-product .container .pager img{ padding:0 10px; }

#index-product #owl-product{ margin:50px 0; }
#index-product #owl-product .item{margin: 10px 10px;overflow: hidden;box-shadow:2px 2px 8px rgba(15%,15%,40%,0.1);}
#index-product #owl-product .item .title{background:#212121; color:#ffffff; text-align:center; font-size:16px; padding:15px 0;}

#index-product .responsive .item{margin: 10px 0px;overflow: hidden;box-shadow:2px 2px 8px rgba(15%,15%,40%,0.1);}
#index-product .responsive .item .title{background:#212121; color:#ffffff; text-align:center; font-size:16px; padding:15px 0;}
.slick-pre{position:absolute;top: 45%;left:0;display:block;z-index:9999;}
.slick-next{position:absolute;top: 45%;right: 0px;display:block;z-index:9999;}
.slick-slide { margin: 0 10px; }

/*------product mask--------*/
.photo-mask{opacity:0;position:absolute;left:0px;bottom: 0px;color:#ffffff;width:100%;height:0%;letter-spacing:3px;text-align:center;padding:15px;box-sizing:border-box;line-height:22px;

background: linear-gradient(45deg, rgba(24, 50, 57, 0.8)3%, rgba(36, 125, 249, 0.8)60%);
background: -moz-linear-gradient(45deg, rgba(24, 50, 57, 0.8)3%, rgba(36, 125, 249, 0.8)60%);
background: -webkit-linear-gradient(45deg, rgba(24, 50, 57, 0.8)3%, rgba(36, 125, 249, 0.8)60%);
background: -o-linear-gradient(45deg, rgba(24, 50, 57, 0.8)3%, rgba(36, 125, 249, 0.8)60%);
}
.photo-mask-content{ width:100%; height:100%; display:flex; align-items:center; justify-content: center; }
.photo-mask-content span{position:absolute;top:-200px;left:0;right:0;margin-left:auto;margin-right:auto;width: 120px;color:#ffffff;font-size:16px;background:#142d4c;padding:8px 20px;}
.gallery:hover .photo-mask{ opacity:1; height:100%; transition: all 0.5s linear; }
.gallery:hover .photo-mask-content span{ top:45%; transition: all 0.5s linear; }

@media screen and (max-width : 1400px) {
	.index-news-list{width:80%;background-color: rgba(255, 255, 255, 0.85);float:inherit;margin:0 auto 40px auto;}	
}

@media screen and (max-width : 1024px) {
	#index-about .wrap2{ display:block; }
	#index-about .right{ justify-content:flex-start; }
	#index-about .right .map .iframe{ width:100%; max-width:none; }

}

@media screen and (max-width : 768px) {
	.index-news-list{width:95%;}
	.index-news-items .date{flex:1.5;}
}

@media screen and (max-width : 480px) {
	.index-news-items{ display:block; }
	.index-news-items .date{flex:2.5;margin: 15px 0;}	
	#index-news{background-position:bottom center;}
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> News <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#pages-news{background: url(../../images/news-bg.png) no-repeat bottom left;}
.news-list{float:right;width:100%;max-width: 850px;min-height: 500px;margin: 0 0;padding:10px;/* height: 400px; */}
.news-list-items{display:flex;flex-wrap:wrap;align-items: center;width:100%;overflow:hidden;border-bottom:1px dotted #989898;padding: 20px 10px 20px 10px;}
.news-list-items .date{ flex:1; }
.news-list-items .date span{background:#ececec;color:#5e5e5e;padding: 5px 10px; font-size:14px; }
.news-list-items .title{ flex:4; font-size:15px; }
.news-list-items .title a{color:#000000;font-size: 20px; line-height:20px; text-decoration:none;text-shadow: 1px 1px 1px #ebebeb;}
.news-list-items .title a:hover{ color:#385170; }
.news-list-items:hover{ background:#ecf4f9;transition: all 0.5s ease; }

#pages-news-detail{ background:url(../../images/container-news-detail-bg.png) no-repeat bottom left; }
.news-detail .date{ padding:8px 20px; background:#ececec; display:inline-block; }
.news-detail .title{width:100%;font-size:30px;color:#b0c5de;background:#57708e;padding: 15px 20px 8px 20px;}
.news-detail .title div{width:100%;overflow:hidden;line-height: 30px;padding: 0 0 5px 0;border-bottom:1px solid #b0c5de;}
.news-detail .css-table .css-td{ border-bottom:1px solid #cccccc; }
.news-detail .css-table .css-td i{ font-size:20px; color:#57708e; }
.news-detail .css-table .css-td p{ margin:8px 0; color:#999; }
.news-detail .css-table .css-td a{ color:#57708e; text-decoration:none; }
.news-detail .css-table .css-td:first-child{ width:50px; background:#ecf4f9; text-align:center }
.news-detail .css-table .css-td:not(:first-child){ background:#ecf4f9; padding:15px; 10px; }


@media screen and (max-width : 1400px) {
	.news-list{width:100%;background-color: rgba(255, 255, 255, 0.85);float:inherit;margin:0 auto 40px auto;}	
}

@media screen and (max-width : 768px) {
	.news-list{width:95%;}
	.news-list-items .date{flex:1.5;}
}

@media screen and (max-width : 480px) {
	.news-list-items{ display:block; }
	.news-list-items .date{flex:2.5;margin: 15px 0;}	
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Product <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#pages-product{ margin:50px 0 0 0; background:url(../../images/website-bg-4.png) left top no-repeat; }

#product-menu{width:100%;max-width: 250px;overflow:hidden;}
#product-menu .frame-top{width:100%;font-size:16px;color:#57708e;display: flex;align-items:center;justify-content: center;padding: 0 0 14px 0px;border-bottom: 3px solid #57708e;}
#product-menu .frame-top > .left{flex: 1;display: flex;justify-content: center;font-size: 35px;padding: 0 9px 0 0;border-right: 1px solid #cccccc;}
#product-menu .frame-top > .right{flex: 2;padding: 0 0 0 20px;line-height: 20px;font-weight: bold;}
#product-menu .frame-center > ul{ list-style:none; margin:0; padding:0; }
#product-menu .frame-center > ul > li{width:100%;font-size:16px;border-bottom:1px dotted #cccccc;}
#product-menu .frame-center > ul > li > a{position:relative;color:#000000;text-decoration:none;display: block;padding: 20px 30px 20px 10px;}
#product-menu .frame-center > ul > li > a i{ position:absolute; right:5px; top: 40%; color:#9f9f9f; font-size:12px; }
#product-menu .frame-center > ul > li:hover{ background:#bbd2ed; transition: all 0.5s ease; }
#product-menu .frame-center > ul > li ul{ display:none; height:0; list-style:none; margin:0; padding:0; }
#product-menu .frame-center > ul > li ul li{width:100%;padding: 20px 0px;font-size:16px;border-bottom:1px dotted #cccccc;background: #ecf4f9;}
#product-menu .frame-center > ul > li ul li:last-child{ border-bottom:0; }
#product-menu .frame-center > ul > li ul li:hover{ background:#e1ebf2; transition: all 0.5s ease; }
#product-menu .frame-center > ul > li ul li a{color:#000000;text-decoration:none;display: block;padding: 0px 10px 0 25px;}
#product-menu .frame-center > ul li:hover ul{ display:block; height:inherit; transition: all 0.5s ease; }

#product-list{ display:flex; flex-wrap:wrap; }
#product-list .type-b{width:100%;overflow:hidden;color:#000000;font-size:30px;padding: 0 0 40px 0;font-family: 'Noto Sans TC', sans-serif;}
#product-list .type-s{width:100%;overflow:hidden;color:#555555;font-size:16px;padding: 0 0 50px 0;}
#product-list .product-item{flex: 30%; /*max-width:300px;*/ overflow:hidden;margin: 0 2% 1.5% 0%;background:#CCC;justify-content:space-between;box-shadow:2px 2px 8px rgba(15%,15%,40%,0.1);}
#product-list .product-item-fake{flex: 30%; overflow:hidden;margin: 0 2% 1.5% 0%;justify-content:space-between;}
#product-list .product-item .title{background:#212121; color:#ffffff; text-align:center; font-size:16px; padding:15px 0;}
#product-list .product-item:hover .title{ background:#385170; }

/*Vertical Menu*/
.navigation {
  padding: 0;
  margin: 0;
  border: 0;
  line-height: 1;
}

.navigation ul,
.navigation ul li,
.navigation ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation ul {
  position: relative;
  z-index: 500;
  float: left;
}

.navigation ul li {
  float: left;
  /* min-height: 2.05em; */
  /* line-height: 1em; */
  vertical-align: middle;
  position: relative;
  border-bottom:1px dotted #8393a5;
}

.navigation ul li.hover,
.navigation ul li:hover {
  position: relative;
  z-index: 510;
  cursor: default;
}

.navigation ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: 520;
  width: 100%;
}

.navigation ul ul li {float: none;margin-top: -1px;}

.navigation ul ul li a{padding: 20px 10px;border-bottom:1px dotted #8393a5;}

.navigation ul ul ul {
  top: 0;
  right: 0;
}

.navigation ul li:hover > ul { visibility: visible; }

.navigation ul ul {
  top: 0;
  left: 99%;
}

.navigation ul li { float: none; }

.navigation ul ul { margin-top: 0.05em; }

.navigation {
  position:absolute;
  max-width: 250px;
  width: 100%;
  font-family: 'roboto', Tahoma, Arial, sans-serif;
  zoom: 1;
}

.navigation:before {
  content: '';
  display: block;
}

.navigation:after {
  content: '';
  display: table;
  clear: both;
}

.navigation a {
  display: block;
  padding: 20px 5px;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: normal;
  font-family: 微軟正黑體;
}

.navigation > ul {width: 100%;}

.navigation ul ul { width: 13em; }

.navigation > ul > li > a {
  color: #333333;
}

.navigation > ul > li > a:hover { color: #ffffff; }

.navigation > ul > li a:hover,
.navigation > ul > li:hover a { background: #bbd2ed; }

.navigation li { position: relative; }

.navigation ul li.has-sub > a:after {
  /*content: '»';*/
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f054";
  position: absolute;
  right: 0.5em;
}

.navigation ul ul li.first {
  -webkit-border-radius: 0 3px 0 0;
  -moz-border-radius: 0 3px 0 0;
  border-radius: 0 3px 0 0;
}

.navigation ul ul li.last {
  -webkit-border-radius: 0 0 3px 0;
  -moz-border-radius: 0 0 3px 0;
  border-radius: 0 0 3px 0;
  border-bottom: 0;
}

.navigation ul ul {
  -webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}

.navigation ul ul { /*border: 1px solid #bbd2ed;*/ }

.navigation ul ul a {color: #333333;/* line-height: 28px; */}

.navigation ul ul a:hover { color: #ffffff; }

.navigation ul ul li {border-bottom: 1px solid #bbd2ed;min-width: 250px;}

.navigation ul ul li:hover > a {
  background: #4eb1ff;
  color: #ffffff;
}

.navigation.align-right > ul > li > a {
  border-left: 0.3em solid #bbd2ed;
  border-right: none;
}

.navigation.align-right { float: right; }

.navigation.align-right li { text-align: right; }

.navigation.align-right ul li.has-sub > a:before {
  content: '+';
  position: absolute;
  top: 50%;
  left: 15px;
  margin-top: -6px;
}

.navigation.align-right ul li.has-sub > a:after { content: none; }

.navigation.align-right ul ul {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: -100%;
  z-index: 598;
  width: 100%;
}

.navigation.align-right ul ul li.first {
  -webkit-border-radius: 3px 0 0 0;
  -moz-border-radius: 3px 0 0 0;
  border-radius: 3px 0 0 0;
}

.navigation.align-right ul ul li.last {
  -webkit-border-radius: 0 0 0 3px;
  -moz-border-radius: 0 0 0 3px;
  border-radius: 0 0 0 3px;
}

.navigation.align-right ul ul {
  -webkit-border-radius: 3px 0 0 3px;
  -moz-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
}

@media screen and (max-width : 1024px) {
	#product-list .product-item{ margin:0 1% 1.5% 1%; }
}

@media screen and (max-width : 768px) {
	#product-list .product-item{ flex:45%; }
}

@media screen and (max-width : 480px) {
	#product-list .product-item{ flex:100%; }
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Contact <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#contact-box{  width:100%; overflow:hidden; }
#contact-inner{position:relative;min-height:1145px; background:url(../../images/contact-bg-1.jpg); /*background-size: cover; background-position:center;*/ }
#contact-inner .wrap{ margin:0 auto; }
.contact-form{float:right;width:100%;max-width: 800px;min-height:600px;margin: 0px 0;padding:10px;/* height: 400px; */}
.contact-form .tips{width: 100%;max-width: 540px;font-size:15px;line-height: 25px;color:#797979;}
.contact-form .require{color:#ff0012;font-size: 20px;padding: 5px;background: rgba(255, 255, 255, 0.7);}
.contact-form .input-item{width:100%;display: flex;align-items:center;justify-content: center; background:#ffffff; margin: 25px 0;padding: 15px 10px;border:1px solid #cecece;border-left:5px solid #414345;
transition: all 0.5s ease;
}
.contact-form .input-item:hover{border:1px solid #cb333e; border-left:5px solid #cb333e;}
.contact-form .input-item .left{flex:1;color: #000000;font-size: 16px;font-weight: bold;letter-spacing: 1px; }
.contact-form .input-item .left span{ color:#cb333e; width:13px; display:inline-block; }
.contact-form .input-item .right{flex: 5;padding: 0 30px; border-left: 1px solid #d5d5d5; }
.contact-form .input-item .right input{width:100%; font-size:16px; border:0; background:transparent; }
.contact-form .input-item .right textarea{width:100%; font-size:16px; height:150px; border:0; background:transparent; resize:none; }
.contact-form .input-item .right .rand-img{position:absolute;right: -20px;top: 0px; cursor:pointer}
.contact-form .pager .btn-1:before{ left:10px; }

#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; }
}
@media screen and (max-width : 768px) {
	.contact-form .input-item .right{ flex:3; }
}
@media screen and (max-width : 480px) {
	.contact-form .input-item .right{ flex:1.5; }
	#contact-info .left .css-td:nth-child(2){ display:none; }
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Sitemap <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


#pages-sitemap{ margin:50px 0 0 0; background:url(../../images/website-bg-4.png) left top no-repeat; }
#pages-sitemap .wrap{padding:10px;}
#pages-sitemap .b-title{ color:#3a6381; font-size:16px; font-weight:bold; border-bottom:1px dashed #999999; margin:50px 0 30px 0; padding-bottom:15px; }
#pages-sitemap .b-title a{ color:#3a6381; font-size:16px; text-decoration:none; }
#pages-sitemap .b-type{ font-size:15px; font-weight:bold; margin:0 0 20px 0; }
#pages-sitemap .b-type span{ padding-right:5px; color:#6dc6b2; font-size:12px; }
#pages-sitemap .b-type a{ color:#333333; text-decoration:none; }
#pages-sitemap .type-area{ width:100%; overflow:hidden; padding:20px; background:#ebf2f8;
  -webkit-flex-wrap: wrap; /* Safari 6.1+ */
  display: flex;
  flex-wrap: wrap;
}
#pages-sitemap .type-area a{ flex:30%;color:#333333; font-size:16px; text-decoration:none; margin:10px 0;  }
#pages-sitemap .type-area a:hover{ text-decoration:underline; }
#pages-sitemap .type-area a:before{ content:url(../../images/dot.jpg); padding-right:5px; }

@media screen and (max-width : 768px) {
	#pages-sitemap .type-area a{ flex:50%;}
}

@media screen and (max-width : 500px) {
	#pages-sitemap .type-area a{ flex:100%;}
}

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


body { transition: background-color .5s;}
#wrapper { transition: margin-left .5s; }


.sidenav {
  height: 100%;
  overflow:hidden;
  width: 0;
  position: fixed;
  z-index: 9999;
  top: 0;
  right: 0;
  background-color: #ffffff;
  overflow-x: hidden;
  transition: 0.5s;
  /*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 a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  display: block;
  padding-bottom: 9px;
  padding-left: 20px;
  font-size: 36px;

}

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

/*選單 - 選項*/
#ajax-sidenav div{position:relative;width: 100%;border-bottom: 1px solid #ebebeb;color:#181818;padding: 15px 20px; line-height:20px; box-sizing:border-box;cursor: pointer;cursor: hand;font-size: 16px;letter-spacing: 3px;}
#ajax-sidenav div.title{background:#57708e; 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; */}

.submenu-nav { width: 100%; overflow:hidden; display:none; background-color: #FFFFFF; }
.submenu-nav div{ padding:20px 20px !important; }
.submenu-nav div:before{font-family: "Font Awesome 5 Free"; font-weight: 900;  content: "\f0da";font-size: 14px; padding-right:5px; }


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



/* ----------------------------------------------------------------------------------------------------------------*/

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

ul.bxslider { margin:0; padding:0; }
#home_banner {
  /*margin-top:160px;*/
  display: inline-block; width: 100%;
  overflow: hidden; position: relative; background:#f3f8fb;}
#home_banner ul{ list-style:none; }
#home_banner li { width: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; height:475px;}
#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:#f1a900; border:1px solid #f1a900; }
#home_banner .bx-wrapper .bx-pager.bx-default-pager a { background-color: white; border:1px solid #ccc; width: 13px; height: 13px; margin: 0 8px; border-radius: 50%; box-shadow:2px 2px 8px rgba(15%,15%,40%,0.1);  
}
#home_banner .bx-wrapper .bx-pager { bottom: 32px; opacity: 0; }
#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%; }


@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: 275px;
		height: 275px;
		/*margin-top: 75px;*/
	}
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Placeholder <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #CCCCCC;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #CCCCCC;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #CCCCCC;
}

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

@keyframes widthGroup-1 {
    0% { width: 0; }
    60% { width: 70px; }	
    100%   { width: 60px; }
}


.scaleZoom {
	-webkit-animation: scaleZoom 2s ease both;
	animation: scaleZoom 2s ease both;
}
@-webkit-keyframes scaleZoom {
	from { opacity: 0; -webkit-transform: scale(1.2); }
}
@keyframes scaleZoom {
	from { opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); }
}

.scaleZoom-2 {
	-webkit-animation: scaleZoom-2 2s ease both;
	animation: scaleZoom-2 2s ease both;
}
@-webkit-keyframes scaleZoom-2 {
	from { opacity: 0; -webkit-transform: scale(1.05); }
}
@keyframes scaleZoom-2 {
	from { opacity: 0; -webkit-transform: scale(1.05); transform: scale(1.05); }
}

	
/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 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 <<<--------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.cssa { font-family:Verdana; letter-spacing:1px; font-size:12px; padding-right:10px; padding-left:10px }
.cssb { font-family:Verdana; letter-spacing:1px; font-size:12px; padding-right:5px; padding-left:5px }
.cssc { padding-bottom:3px; letter-spacing:1px; font-size:12px; padding-left:10px; padding-right:10px; height:40px }
.cssd { font-family:Verdana; font-size:12px; letter-spacing:2px; height:10px; border:1px solid #FFFFFF }
a.pagelink_no:link { color: #003399; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px; }
a.pagelink_no:visited { color: #003399; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px }
a.pagelink_no:active { color: #003399; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px }
a.pagelink_no:hover { color: #003399; text-decoration: underline; font-family:Verdana; font-size:12px; letter-spacing:1px }
a.pagelink:link { color: #333333; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px; }
a.pagelink:visited { color: #333333; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px }
a.pagelink:active { color: #333333; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px }
a.pagelink:hover { color: #333333; text-decoration: underline; font-family:Verdana; font-size:12px; letter-spacing:1px }

a.pagelink_ch:link { color: #cc3300; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px; font-weight:bold }
a.pagelink_ch:visited { color: #cc3300; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px; font-weight:bold }
a.pagelink_ch:active { color: #cc3300; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px; font-weight:bold }
a.pagelink_ch:hover { color: #cc3300; text-decoration: underline; font-family:Verdana; font-size:12px; letter-spacing:1px; font-weight:bold }