@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, textarea {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%; }

#tip_box { position: fixed; line-height:22px; background-image:url(../../images/bg.png); color: #FFF; padding-left:10px; padding-right:10px; padding-top:5px; padding-bottom:5px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; margin-left:10px; }

/*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='reset'],input[type='submit']{  -webkit-appearance: none; }

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

/*編輯器*/
.editor{padding: 0px 0 40px 0;font-size:16px;line-height:30px; text-align:left; }
.editor a{ color:#2258c5; text-decoration:underline; }

/*連結*/
a{ color:#000000;text-decoration:none; }
a:hover{ color:#506267; }

/*表格*/
#css-table { display:table; }
.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;}

/*網站按鈕*/
.btn-1{display:inline-block;color: #ffffff;padding: 10px 30px;margin: 0 5px;font-size: 15px;border: 4px double #4568a2;background: #143874;cursor:pointer;}
.btn-1 i{ padding-right:6px; }
.btn-1:hover{ background:#4568a2; transition: all 0.5s linear; }

.btn-2{display:inline-block;color: #ffffff;background: #143874;padding: 10px 40px;margin: 0 5px;font-size: 14px;border:1px solid #143874;cursor:pointer;}
.btn-2:hover{transition: all 0.5s linear;background: #88619a;}

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

/*麵包屑*/
#sitemap{width:100%;margin:0;padding:0 10px;box-sizing: border-box;font-size: 15px;letter-spacing:1px;color: #737373;text-align: left;}
#sitemap .contain{width:100%;max-width: 1200px;overflow:hidden;margin: 0 auto;padding: 20px 20px;text-align:right;}
#sitemap .contain:before{ /*font-family: "Font Awesome 5 Free"; font-weight: 900;  content: "\f015"; padding:0 5px 0 0; color:#378042;*/ }
#sitemap .contain a{color: #6d6d6d; text-decoration:none; }
#sitemap .contain a{ text-decoration:underline; }

/*------image mask--------*/
.photo-mask{opacity:0;position:absolute;left:0;bottom:0;color:#ffffff;width:100%;height:100%;background-color:rgba(255, 255, 255, 0.5);letter-spacing:3px;text-align:center;padding:15px; box-sizing:border-box; line-height:22px;-webkit-transition:.2s;-ms-transition:.2s;-moz-transition:.2s;}
.gallery:hover .photo-mask{ opacity:1; }

/*------image zoom--------*/
.photo-zoom {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.photo-zoom img {
  max-width: 100%;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  
}
.photo-zoom:hover img {-moz-transform: scale(1.05);-webkit-transform: scale(1.05);transform: scale(1.05);}


/*首頁大標題*/
.b-title{max-width: 1200px;display:flex; /*align-items:center; justify-content: center;*/margin: 0 auto 30px auto;font-family: 'Noto Sans TC', sans-serif;}
.b-title .img{padding:0 20px 0 0;}
.b-title .img img{ width:100%; }
.b-title .title{flex: 1;font-size: 30px; color:#000000; font-weight:bold;background:url(../../images/b-title-line.png) bottom no-repeat;}
.b-title span{ display:block; font-size:44px; color:#5aa7d1; font-weight:normal; letter-spacing:5px; }

/*按鈕*/
.btn1{display:inline-block;color:#FFFFFF;border-radius: 20px;font-size:16px;width:auto;padding: 10px 20px;margin:5px 0;border:0;letter-spacing:2px;cursor:hand;cursor:pointer;background: #5aa7d1;outline:0;text-decoration:none;}
.btn1.on{background:#3c89b3;}
.btn1:hover{ background:#3c89b3; -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease
}

.fix-top{ margin-top:112px; }

@media screen and (max-width : 768px) {
	.b-title{ font-size:20px; }	
}

@media screen and (max-width : 480px) {
	.b-title{ text-align:center; }
	.b-title .img{ display:none; }
	.b-title .title{ padding-bottom:20px; }
	.b-title .title span{font-size: 25px;display: block;padding: 10px 0;}
}

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

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

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


/*左邊選單*/
.layout-left > ul{list-style:none;margin:0;padding:0;border-top: 5px solid #143874;border-bottom: 5px solid #143874;}
.layout-left > ul > li{width: 100%;font-size:16px;border-bottom: 1px dashed #cccccc;}
.layout-left > ul > li em{ font-style:inherit; width:20px; display:inline-block; }
.layout-left > ul > li > a{position:relative;color:#000000;text-decoration:none;display: block;letter-spacing: 3px;padding: 23px 30px 23px 30px;}
.layout-left > ul > li > a:before{content:url(../../images/menu-icon-1.jpg);padding-right:5px;position: absolute;left: 5px;}
.layout-left > ul > li:hover{ /*background:#bbd2ed; transition: all 0.5s ease;*/ }
.layout-left > ul > li ul{ display:block; list-style:none; margin:0; padding:0; }
.layout-left > ul > li ul li{width:100%;padding: 20px 0px;font-size:16px;border-top:1px dotted #cccccc;}
.layout-left > ul > li ul li:last-child{ border-bottom:0; }
.layout-left > ul > li ul li:hover{ /*background:#e1ebf2; transition: all 0.5s ease;*/ }
.layout-left > ul > li ul li a{color:#000000;text-decoration:none;display: block;padding: 0px 10px 0 45px;}
.layout-left > ul > li ul li.third{ padding-left:20px; }
.layout-left > ul li:hover ul{ /*display:block; height:inherit; transition: all 0.5s ease;*/ }



#header{position:relative;width: 100%;background:#ffffff;z-index:9999;position: fixed;border: 1px solid #ebebeb;}
#header .wrap{position: relative;max-width:1400px;height: 100px;margin:0 auto;}

#header .logo{position:absolute;bottom: 10px;left:10px;display:flex;cursor:pointer;}
#header .logo img{ padding-right:15px; }
#header .logo div span{color: #231815;font-size: 24px;font-weight: bold;border-bottom: 1px solid #e1e1e1;padding-bottom: 7px;margin-bottom: 5px;letter-spacing:1px;display:block;font-family: 'Noto Sans TC', sans-serif;}
#header .logo > .word{color: #231815;font-size: 17px;display:flex;align-items:center;justify-content: center;}
#header .logo > .word div{ letter-spacing:0.5px; }
.logo-b{position:absolute;top: 20%;left: 10%;/* max-width:500px; *//*width:80%;*/}


#header .nav{position:absolute;top: 30px;right:10px;}
#header .nav .searh-area{position:relative;color: #143874;background: #f2f2f2;padding: 5px 10px 5px 30px;margin: 0 5px;font-size: 15px;font-weight: bold;}
#header .nav .searh-area span{position:absolute;left: 10px;top: 8px;cursor:pointer;}
#header .nav .searh-area i{ padding-right:5px; }
#header .nav .searh-area input{border:0;border-left:1px solid #ebebeb;background: #f2f2f2;padding:0 10px;width:100px;}

#header .nav .links-area{display: inline-block;text-align:right;margin-right:10px;padding-right: 10px;border-right: 1px solid #d7d7d7;}
#header .nav .links-area a{font-size:14px;color: #191919;font-weight: bold;text-decoration:none;}
#header .nav .links-area a:not(:first-child):before{ content:" | "; padding:0 5px; }
#header .nav .links-area a i{ padding-right:3px; }

#menu-bar{display: none;position:absolute;right: 15px;top: 50px;color: #448e60;font-size: 30px;cursor:pointer;}


#menu{position: absolute;right: 0;top: 20%;color: #191919;}
#menu ul{padding: 0;margin: 0;list-style: none;/* margin-right: auto; */margin-left: auto;display: table;padding: 22px 0 5px 0;}
#menu ul li{float:left;padding: 0 10px 15px 40px;/* font-weight: bold; */}
#menu ul li:after{/* content:url(../../images/arrow.png); */vertical-align: middle;}
#menu ul li:last-child:after{ content:''; }
#menu ul li a{color: #191919;font-weight: bold;font-size: 16px;padding-bottom:5px;}
#menu ul li a:hover{ color:#448e60; border-bottom:3px solid #448e60; }

#footer{width:100%; /* min-height:230px; */ margin-top:30px; }
#footer .footer_wrap {position:relative;max-width:1400px;margin:0 auto;padding: 30px 0 0 0;text-align:center;}
#footer .copyright{width:100%;font-size:16px;letter-spacing:2px;line-height:25px;color: #000000;/* border-top:2px solid #0c4e66; */padding: 0 20px 20px 20px;}
#footer .copyright a{color: #000000;text-decoration:none;}
#footer .copyright a:hover{ text-decoration:underline; }


@media screen and (max-width : 1024px) {
	
	#header .logo div span{ font-size:2vw; }
	#header .logo > .word{ font-size:1.5vw;}
	
	#header .nav .searh-area{ padding-right:0; cursor:pointer; }
	#header .nav .searh-area input{ display:none; }

	#header .nav .btn-1{ padding:12px 10px; font-size:13px; }

	.container .wrap .layout-left{ display:none; }
	.container .wrap .layout-right{ width: 100%; }	

	.container .wrap.flex{ display:block; }
	.container .wrap .layout-search-left{ }
	.container .wrap .layout-search-right{ }	
	
	.letter-title{ width:100%; max-width:370px; margin:0 auto; text-align:left; }
			
}


@media screen and (min-width : 1025px) {
	#mySidenav{ display:none; }
}
@media screen and (max-width : 1024px) {
	#header{ position:fixed; }
	#header .nav{ display:none; }
	#header .wrap{height:90px;box-shadow: 0 0px 5px rgba(0, 0, 0, 0.25);}
	#menu{ display:none; }
	#menu-bar{ display:block; top:30px; }
	
	.fix-top{margin-top: 90px;}
	
	.logo-b{max-height:85px;max-width:80%;top: 20%;left: 5%;}
	
}


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

#index-news.container{ background:#f5fbff; }
/*owl*/
#index-news .owl-left{cursor:hand;cursor:pointer;display:flex;align-items:center;justify-content: center;width: 12%;float:left;}
#index-news .owl-center{width: 80%;float:left;}
#index-news .owl-right{cursor:hand;cursor:pointer;display:flex;align-items:center;justify-content: center;width: 12%;text-align: right;float:left;}
#index-news .item{margin:0;padding: 10px 5vw;width:100%;/* border-right: 1px solid #ebebeb; *//* border-left: 1px solid #ebebeb; *//*background:#ffffff;*/}
#index-news .item .date{color:#5aa7d1;font-size:22px;font-weight:bold;padding-bottom: 15px;}
#index-news .item .title{color:#010101;font-size:18px;padding-bottom: 10px;}
#index-news .item .title a{color:#010101; text-decoration:none; }
#index-news .item .title a:hover{ text-decoration:underline; }
#index-news .item .content{color:#000000;font-size:15px;line-height: 20px;}
#index-news .pager{text-align:right;padding-right: 4%;}

#index-pdt.container{ }
/*owl*/
#index-pdt .owl-left{cursor:hand;cursor:pointer;display:flex;align-items:center;justify-content: center;width: 12%;float:left;}
#index-pdt .owl-center{width: 76%;float:left;padding: 0 1vw;}
#index-pdt .owl-right{cursor:hand;cursor:pointer;display:flex;align-items:center;justify-content: center;width: 12%;text-align: right;float:left;}
#index-pdt .contain{ text-align:center; font-size:22px; }
#index-pdt .contain a{ display:block; padding:20px 0 0 0; color:#000000; }
#index-pdt .contain a:hover{ text-decoration:underline; }
#index-pdt .item{margin: 0 auto;padding: 10px 0vw;width: 95%;height: 350px;overflow:hidden;display:flex;align-items:center;justify-content: center;/* border-right: 1px solid #ebebeb; *//* border-left: 1px solid #ebebeb; *//*background:#ffffff;*/}
#index-pdt .item img{width: 100%;/* height: 90%; */cursor:pointer;}

/*Contact*/
#index-contact{margin-top:50px;}
#hamway-about{position:relative;width:100%;overflow:hidden; background: url(../../images/about-bg.jpg) top left no-repeat;background-size: auto 55%; /* box-shadow: 0px 0px 13px rgba(0, 0, 0, 0.25); */}
#hamway-about .wrapper{ max-width:1400px; margin:0 auto; }
#hamway-about .wrapper .lefter{position: absolute;margin-top: 10vw;float:left;width:50%;padding: 0 9vw 0 1vw;}
#hamway-about .wrapper .lefter .about-item{ max-width:620px; overflow:hidden; }
#hamway-about .wrapper .lefter .title{
    font-size: 50px;
    font-weight: bold;
    color: #000000;
    padding-bottom: 30px;
}
#hamway-about .wrapper .lefter .slogan{
    font-size: 30px;
    padding-bottom: 40px;
    font-weight: bold;
    color: #000000;
}
#hamway-about .wrapper .lefter .content{
    color: #010101;
    font-size: 20px;
    line-height: 30px;
}
#hamway-about .wrapper .righter{position: absolute;right: 0;float:left;width:50%;}
#hamway-about .wrapper .righter img{max-height:830px;max-width: 782px;width: 100%;}
#hamway-about .contact_form{z-index:2;position:absolute;bottom: -280px;left: 0;width:100%;max-width: 680px;min-height: 1090px;padding: 40px 5vw;box-sizing:border-box;background: #f1f8fa;z-index:2;/* box-shadow: 0 5px 8px rgba(0, 0, 0, 0.25); */}
#hamway-about .contact_form .slogan{ font-size:18px; color:#000000; line-height:25px; margin-bottom:30px; }
#hamway-about .contact_form .title{font-size:26px;letter-spacing:3px;padding: 0px 0 20px 0;color: #000000;}
#hamway-about .contact_form .text{ font-size:14px; letter-spacing:2px; line-height:22px; color:#a9a9a9; margin-bottom:40px; border-bottom:1px solid #949494; padding-bottom:50px; }
#hamway-about .contact_form_items{margin: 11px 0 0 0;overflow:  hidden;display:flex;align-items:center;}
#hamway-about .contact_form_items .left{float:left;max-width:145px;width:35%;color: #000000;font-size:16px;letter-spacing:2px;}
#hamway-about .contact_form_items .right{ float:left; width:70%; }
#hamway-about .contact_form_items .input{border: 1px solid #ffffff;outline:none;width:100%;height:40px;color:#000000;font-size:16px;letter-spacing:1px;padding:0 10px;box-sizing:  border-box;background: #ffffff;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;-webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s;}
#hamway-about .contact_form_items textarea{border:1px solid #ffffff;outline:none;width:100%;height:200px;color:#000000;font-size:16px;letter-spacing:1px;padding:10px;box-sizing:  border-box;resize:none;background: #ffffff;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;-webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s;}
#hamway-about .checknum {float:left;border: 1px solid #ffffff;background: #ffffff;outline:none;height:50px;width:100%;max-width:650px;padding:0 20px;box-sizing:border-box;font-size:16px;color:#ffffff;letter-spacing:1px;}
#hamway-about .contact_form_items input:hover{border:1px solid #3CA8D5;}
#hamway-about .contact_form_items input:focus{border:1px solid #3CA8D5;}
#hamway-about .contact_form_items textarea:hover{border: 1px solid #ffffff;}
#hamway-about .contact_form_items textarea:focus{border:1px solid #3CA8D5;}
#hamway-about .send_btn{float:right;border:0; margin:20px 0; }

#hamway-about .contact_info{/* position:relative; */padding: 490px 0 0 0;width:100%;/* min-height: 2000px; */}

.contact{z-index:2;position:absolute;right: 0;top: 360px;width:100%;max-width: 650px;overflow:hidden;margin:20px auto;padding:0 10px;box-sizing:border-box;line-height:40px;color:#2D2D2D;font-size:15px;letter-spacing:1px;}
.contact_info_btitle{width:100%;color: #5aa7d1;font-weight: bold;font-size: 50px;line-height: 60px;letter-spacing:2px;margin:0 0 30px 0;}
.contact_info_btitle span{display:block;font-size: 26px;color: #000000;}
.contact-item{width:100%; display:flex; word-break:break-all; }
.contact-item > div{ padding:20px 20px; }
.contact-item .contact-info{width:100%;display:flex;/* align-items:center;justify-content: center; */} 
.contact-item .contact-info > div{ padding:0 10px; font-size:18px; font-weight:bold; }
.contact-item .contact-info > div span{display:block;line-height: 20px;}

@media screen and (max-width: 1400px) {
	.contact_form_area{ float:none; }
	.contact_form_area{ width:90%; }
	
	#hamway-about .wrapper .righter img{ margin-top:100px; }
	#hamway-about .contact_form{width: 50%;/*left:1%;*/}
	.contact{ width:45%; right:1%; }

	
}

@media screen and (max-width: 1024px) {
	
	#hamway-about .contact_info{ padding:50px 0 0 0; }
	#hamway-about .contact_form{ position:inherit; width:100%; overflow:hidden; bottom:0; margin:0 auto; max-width:none; min-height:auto; }
	#hamway-about .contact_form_items .right{ width:100%; }
	.contact{ position:inherit; width:100%; top:0; }
	
	#hamway-about .wrapper .lefter{position:inherit;padding:0 5vw 0 5vw;width: 100%;}
	#hamway-about .wrapper .lefter .about-item{ min-width:100%; }
	#hamway-about .wrapper .righter{position:inherit;float:none;text-align: center;width: 100%;}
	#hamway-about .wrapper .righter img{ margin-top:0; }
	#hamway-about .send_btn{ text-align:center; margin:20px auto; }
}
@media screen and (max-width: 768px) {
	#hamway-about .wrapper .lefter .about-item{ margin-top:50px; }

}

@media screen and (max-width: 480px) {
	.contact-item{ flex-wrap:wrap; }
	#hamway-about .wrapper .lefter .title{ font-size: 30px; }
	#hamway-about .wrapper .lefter .slogan{	font-size: 24px; line-height:26px; }
	.contact_info_btitle{font-size: 30px; text-align:center; }
	.contact_info_btitle span{font-size: 18px;}	
}

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

#inner-news{ width:100%; max-width:1200px; margin:0 auto; padding:0 20px 0 100px; }
#inner-news .sitemap{
    font-size: 22px;
    color: #000000;
    font-weight: bold;
    padding-bottom: 30px;
}
#inner-news .sitemap{ color:#000000; text-decoration:none; }
#inner-news .title{
    font-size: 36px;
    color: #000000;
    font-weight: bold;
    padding-bottom: 30px;
}

@media screen and (max-width: 480px) {
	#inner-news{ padding:0 20px 0 20px; }
}

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

#inner-product{ width:100%; max-width:1200px; margin:0 auto; padding:0 20px 0 20px; }

#product-detail{/*display:flex;*/width:100%;overflow:hidden;margin: 0 0 50px 0;/*padding-bottom: 50px;*/}
#product-detail .left{float:left;width: 52%;padding: 0 0 30px 0px;text-align:center;}
#product-detail #new_src{margin:0 10px;/* box-shadow:2px 2px 8px rgba(15%,15%,40%,0.1); */}
#product-detail .right{float:left;width: 48%;padding:0 60px;}

#product-detail .caption1{text-align:left;padding: 0 0px 0px 0px;margin: 0 0 40px 0;color: #000000;font-size: 36px;font-weight: bold;line-height: 40px;}
#product-detail .caption1 span{display: block;font-size: 22px;font-weight: normal;color: #000000;padding: 0 0 3vw 0;}

#product-detail .caption2{text-align:left;padding: 0 0px 0px 0px;margin: 0 0 40px 0;color: #000000;font-size: 36px;font-weight: bold;line-height: 30px;}
#product-detail .caption2 span{display: block;font-size: 22px;font-weight: normal;color: #000000;padding: 0 0 20px 0;font-weight: bold;}

#product-detail .caption3{text-align:left;padding: 0 0px 0px 0px;margin: 0 0 40px 0;color: #000000;font-size: 22px;/* font-weight: bold; */line-height: 30px;}
#product-detail .caption3 span{display: block;font-size: 22px;font-weight: normal;color: #000000;padding: 0 0 20px 0;font-weight: bold;}

/*owl*/
#product-detail .owl-left{cursor:hand;cursor:pointer;display:flex;align-items:center;justify-content: center;width: 10%;float:left;}
#product-detail .owl-center{width: 80%;float:left;}
#product-detail .owl-right{cursor:hand;cursor:pointer;display:flex;align-items:center;justify-content: center;width: 10%;text-align: right;float:left;}

#owl-photography .item{ margin:0;padding: 10px 1vw;width:100%;height:150px;display:flex;align-items:center;justify-content: center;/* border-right: 1px solid #ebebeb; *//* border-left: 1px solid #ebebeb; *//*background:#ffffff;*/ }
#owl-photography .item img{ padding:5px; /*box-shadow:2px 2px 8px rgba(15%,15%,40%,0.1);*/  }

.video-area{display:flex;flex-wrap: wrap;width: 100%;}
.video-items{flex: 0 48%;margin: 0 1%30px 1%;}



@media screen and (max-width: 1024px) {
	#product-detail .left{ float:none; width:100%; }
	#product-detail .right{ width:100%; }
	#product-detail .caption{ font-size:26px; }
	#product-detail #new_src{ margin:0; }
	
	#product-detail .right{ width:100%; padding:0 0px; }
}
@media screen and (max-width: 600px) {
	.video-items{flex: 0 100%;}
	#product-detail .right > .title{ font-size:24px; line-height:30px; }
}
@media screen and (max-width: 480px) {
	
	#product-detail .caption1{ font-size: 26px; }
	#product-detail .caption1 span{ font-size: 18px; }
	
	#product-detail .caption2{ font-size: 26px; }
	#product-detail .caption2 span{ font-size: 18px; }
	
	#product-detail .caption3{ font-size: 16px; }
	#product-detail .caption3 span{ font-size: 18px; }	
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Menu Search <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

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

/*左邊search選單*/
#left-search-top .search-keywords{ width:100%; overflow:hidden; border:2px solid #CCC; }
#left-search-top .search-keywords span{ display:inline-block; background:#721D6D; color:#ffffff; padding:12px 10px; font-size:15px; letter-spacing:2px; }
#left-search-top .search-keywords input{ padding:9px 10px; border:0; outline:0; font-size:15px; }

#table_more{ margin:20px 0 0 0; }
#table_more table{ margin-bottom:10px; }
#table_more select{border:2px solid #CCCCCC;padding: 15px 9px;margin-right:5px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
#table_more input{border:2px solid #CCCCCC;padding: 16px 9px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}

#left-search-bottom{ display:block; margin:20px 0; line-height:22px; font-size:15px; }
#left-search-bottom .search-caption{ padding:5px 10px; background:#ebebeb; }
#left-search-bottom .search-items{ padding:5px 0; letter-spacing:0; }
#left-search-bottom .search-items input{ margin-right:8px; }
#left-search-bottom .search-items div{ font-size:12px; color:#999; padding:0 25px }

@media screen and (max-width :1024px) {
	#left-search-bottom{ display:none; }	
}


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



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

.sidenav {
  height: 100%;
  overflow:hidden;
  width: 0;
  position: fixed;
  z-index: 9999;
  top: 92px;
  right: 0;
  padding-bottom:92px;
  background-color: rgba(255, 255, 255, 0.9);
  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 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{background: #448e60;position:relative;width: 100%;border-bottom: 1px solid #ebebeb;color:#ffffff;padding: 15px 20px;line-height:20px;box-sizing:border-box;cursor: pointer;cursor: hand;font-size: 16px;letter-spacing: 1px;}
#ajax-sidenav div a{ color:#ffffff; }
#ajax-sidenav div.title{background: #143874;color: #ffffff;}
#ajax-sidenav div i{ position:absolute; top:15px; right:30px; 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: 15px 40px !important;}
.submenu-nav div:before{font-family: "Font Awesome 5 Free";font-weight: 900;content: "\f0da";font-size: 14px;padding-right:5px;position: absolute;left: 20px;}



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


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

ul.bxslider { margin:0; padding:0; }
#home_banner {display: inline-block;width: 100%;margin-top: 102px;overflow: hidden;position: relative;background:#FCF5FF;/*height:625px;*/}
#home_banner ul{ list-style:none; }
#home_banner li { width: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; /*height:625px;*/ }
#home_banner img { display: ; }
#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: #333333;/* border: 1px solid #ffffff; */opacity: 0.5;}
#home_banner .bx-wrapper .bx-pager.bx-default-pager a {background-color: white;/* border:1px solid #ccc; */width: 20px;height: 19px;margin: 0px 6px;border-radius: 50%;opacity: .5;box-shadow:2px 2px 8px rgba(15%,15%,40%,0.1);}
#home_banner .bx-wrapper .bx-pager {bottom: 3vw;right: 3vw;opacity: 0;}
#home_banner .bx-wrapper .bx-controls-direction{ opacity: 1; }
#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: 400px;
		height: 400px;
	}
}
*/

@media screen and (max-width : 1024px) {
	#home_banner{
		margin-top: 90px;
	}
}
@media screen and (max-width : 768px) {
	#home_banner .bx-wrapper .bx-pager{ display:none; }
	#home_banner .bx-prev{ left:1%; }
	#home_banner .bx-next{ right:1%; }
}

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




.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); }
}

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


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Radio/Checkbox <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

/* Customize the label (the container) */
.container-form {
  display: inline-block;
  /* vertical-align: -28%; */
  position: relative;
  padding-left: 30px;
  margin-left: 10px;
  margin-bottom: 0px;
  cursor: pointer;
  font-size: 16px;
  line-height: 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container-form input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0px;
  left: 0;
  height: 20px;
  width: 20px;

  background-color: #f9f9f9;
  border: 1px solid #b9b7b7;
  border-radius: 50%;
}


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

/* When the radio button is checked, add a blue background */
.container-form input:checked ~ .checkmark {
  /* background-color: #F19B20; */
}

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

/* Show the indicator (dot/circle) when checked */
.container-form input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
/*
.container .checkmark:after {
  top: 6px;
  left: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}
*/
/* Style the checkmark/indicator */

.container-form .checkmark:after {
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #143874;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


@media screen and (max-width : 768px) {
	.container-form { font-size:13px; }
}

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

.cssa {/* font-family:Verdana; */letter-spacing:1px;font-size: 15px;padding-right:10px;padding-left:10px;}
.cssb { /*font-family:Verdana;*/ letter-spacing:1px; font-size:15px; padding-right:5px; padding-left:5px; }
.cssc { padding-bottom:3px; letter-spacing:1px; font-size:15px; padding-left:10px; padding-right:10px; height:40px }
.cssd { /*font-family:Verdana;*/ font-size:15px; letter-spacing:2px; height:10px; border:1px solid #FFFFFF }
.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;}