@charset "utf-8";
@import url("reset.css");
@import url("loading.css");
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> Main <<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/



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-x:hidden; overflow-y:scroll }
body, td, th {font-size:12px;font-family: /*Arial,*/ "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "Microsoft JhengHei", "新細明體", "PMingLiU", sans-serif;color: #545454;}
.iframe_ch { display:none }
.w100{ width:100%; }
.middle{ vertical-align:middle; }
.pager{ width:100%; margin:50px auto 0 auto; text-align:center; }

.btn1{ color:#834613 !important; font-size:15px !important; width:auto !important; padding:15px 35px; letter-spacing:1px; border:1px solid #834613; cursor:hand; cursor:pointer; -webkit-border-radius: 25px; -moz-border-radius:25px; border-radius: 25px; }
.btn1:hover{ color:#834613 !important; background:#ecc38f; -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease}
 
.btn2{ color:#fff !important; background:#2f5567; clear:both; margin:0; font-size:15px !important; width:auto !important; padding:5px 25px; letter-spacing:1px; border:1px solid #387fa0; cursor:hand; cursor:pointer; -webkit-border-radius: 25px; -moz-border-radius:25px; border-radius: 25px; }
.btn2:hover{ color:#fff !important; border:1px solid #387fa0; background:#2f5567; -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease}
 
 
#css_table { display:table;  }
.css_tr { display: table-row; }
.css_td { display: table-cell; line-height:25px; padding:0; }



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

/*
#wrapper{ width:100%; overflow:hidden; }
#header{ width:100%; height:auto; background:url(../../images/header_bg.jpg); }
*/
#wrapper{ margin:75px 0 0 0;}


/*共用內頁版型*/
#contain{ width:100%; background:#FFF; padding-bottom:1px; /*background-size:cover; background-position: center;*/ }
.contain_wrap{max-width: 1200px; overflow:hidden; padding: 0 20px; font-weight:bold; margin:0 auto 30px auto; text-align:left; color:#333;letter-spacing:2px;font-size:16px;line-height:30px; }


/*子選單*/
.submenu1{ width:290px; overflow:hidden; background:#fff; border:1px solid #EBEBEB; position:absolute; top:98px; }
.submenu1 a{ color:#9b9b9b !important; font-weight:normal !important; display:block !important; border-bottom:0; margin:10px 15px; -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease; padding:10px 0 10px 0; }
.submenu1 a:hover{ color:#305668 !important; background:#C9DCE2; border:0 !important; padding:10px 0 10px 10px; }
.submenu1 a:hover:before{ content:"☛ ";}

nav { -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease
}
.header_mask{position:absolute; bottom:0; left:0; z-index:10;}
.header_box { position: fixed; top: 0; left: 0; z-index: 4; padding: 0; width: 100%; background-color: #fff }
.header_box_main { animation: 1s ease-out 0s 1 transiTop20; max-width:1200px; overflow: hidden; margin-right: 70px; margin-left: 70px; margin: 10px auto 10px auto; }
.header_box_line{ background:none; }
.header_box .header_box_main .logo_box { position: relative; -webkit-transition: all .3s ease;
 -moz-transition: all .3s ease;
 -o-transition: all .3s ease;
 transition: all .3s ease;
 -ms-transition: all .3s ease
}
.header_box .header_box_main .menu {
 margin-top: 0px;
 margin-bottom: 5px;
 height: 100%;
 line-height: 15px;
 /*text-transform:uppercase; font-weight:700;*/
 letter-spacing:1px;
 font-size: 14px;
 font-family: Exo, sans-serif;
 -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease;
}
.header_box .header_box_main .menu { float: right!important }
.header_box .header_box_main .menu li {float: left;list-style: none;padding-right: 20px;padding-left: 20px;padding-bottom: 10px;padding-top: 10px;}
.header_box .header_box_main .menu li a { font-size:15px; font-family: /*Arial,*/ "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "Microsoft JhengHei", "新細明體", "PMingLiU", sans-serif; }
.header_box .header_box_main .menu li img { padding:0 3px; }
.header_box .header_box_main .menu li a:hover { color: #fff; border-bottom:4px solid #FFF; }
/*原始選單*/
.header_box_scroll1{ background:#5b90aa; box-shadow: 0 5px 8px rgba(0, 0, 0, 0.25); }
.header_box_scroll1 .menu { margin-top: 35px; margin-bottom: 10px }
.header_box_scroll1 .menu li{ color: #fff; }
.header_box_scroll1 .menu li a { padding-bottom:10px; color: #fff; text-decoration:none; -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 -o-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
 -ms-transition: all .2s ease-in-out
}
.header_box_scroll1 .logo-big { position: absolute; margin-top: 10px; opacity: 1; -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease
}
.header_box_scroll1 .logo-small { opacity: 0; -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease
}
/*捲軸往下的變換選單*/
.header_box_scroll2 { padding: 0px 0; background: rgba(91, 144, 170, 1); -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .15); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, .15); box-shadow: 0 1px 4px rgba(0, 0, 0, .15) }
.header_box_scroll2 .menu { margin-top: 0; margin-bottom: 0; height: 100% }
.header_box_scroll2 .menu > li > a { color: #fff; -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 -o-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
 -ms-transition: all .2s ease-in-out
}
.header_box_scroll2 .logo-big { opacity: 0; -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease
}
.header_box_scroll2 .logo-small { position: absolute; margin-top: 2px; opacity: 1; -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease;
}
.overlay1 { /*margin-top:80px;*/ height: 100%; width: 0%; position: fixed; overflow:auto; top: 0; right: 0; background-color: rgba(91, 144, 170, 0.8); overflow:auto; transition: 0.5s; z-index: 4; }
.overlay1-content { position: relative; top: 0%; width: 100%; text-align: center; }
.overlay1 a { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; }
.overlay1 a:hover, .overlay1 a:focus { color: #f1f1f1; }
.overlay1-title { width:100%; height:50px; margin-top:50px; }
.overlay1-title span { color:#FFF; border-bottom:2px solid #FFF; font-size:20px; letter-spacing:1px; }
.overlay1_options { width:80%; margin:0 auto; }
.overlay1_item { position:relative; text-align:left; padding:15px 5px; color:#EAEAE8; letter-spacing:1px; border-bottom:1px solid #d2d2d2; font-size:15px; letter-spacing:1px; cursor:hand; cursor:pointer; }
.overlay1_item a { font-size:15px; color:#fff; font-weight:bold; }
.overlay1_item a:hover { color:#fff; background:#37bac4; }
.overlay1_item span { position:absolute; right:0; top:20px; padding:0 5px; font-size:25px; }
/*.overlay1_item:hover{ background:#000; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }*/
.overlay1_event { width:100%; display:none; background-color: rgba(47, 85, 103, 0.6); text-align:left; padding:20px; box-sizing:border-box; letter-spacing:1px; }
.overlay1_event a { display:block; font-size:15px; color:#fff; }
.overlay1_event a:hover { color:#37bac4; text-decoration:none; }

.show-1, .show-2, .show-3{ opacity:0; }



#footer{ width:100%; overflow:hidden; background:#5b90aa; border-top:1px solid #51a9bf; margin:0px 0 0 0; }
#footer .footer_wrap{ max-width:1200px; min-height:140px; margin:20px auto; color:#3a3a3a; letter-spacing:1px; font-size:14px; }
#footer .footer_area{ display:flex; align-items:inherit; }
#footer .footer_area_left{float:left;width:50%;padding:  0 20px;box-sizing:  border-box;}
#footer .footer_area_left a{ text-decoration:none; color:#fff; }
#footer .footer_area_left a:hover{ text-decoration:underline; }
#footer .footer_area_left div{ font-size:13px; color:#f5f8fa; letter-spacing:1px; margin:10px 0; line-height:22px; }
#footer .footer_company{ background:#59c1db; color:#fff; font-size:16px !important; letter-spacing:1px; max-width:253px; width:100%; height:30px !important; line-height:30px !important; text-align:center; letter-spacing:1px; }

#footer .footer_area_right{float:left;width:50%;padding: 0 20px;box-sizing:  border-box;text-align:right;line-height:25px;}
#footer .footer_area_right span{ font-size:10px; color:#fff; }
#footer .footer_area_right span a{font-size:10px; color:#fff; text-decoration:none; }
#footer .width50{ width:50%;}

#footer .footer_area_right span a:hover{ text-decoration:underline; }
#footer .footer_line{ border-bottom:1px solid #72afcc; margin:10px 0; }

#footer .footer_menu{ float:left; overflow:hidden; width:810px; padding:0 0 10px 0; }
#footer .footer_menu_item{ float:left; width:155px; min-height:100px; padding:0 20px 0 0; }
#footer .footer_menu_title{color:#ffffff;font-size:16px;letter-spacing:1px;padding: 0 0 0px 0;margin: 0 0 10px 0; text-decoration:underline;}
#footer .footer_menu_item a{ display:block; padding:5px 0; color:#ffffff; text-decoration:none; font-size:14px; letter-spacing:1px; }
#footer .footer_menu_item a:hover{ color:#fff; }

#footer .footer_title{ color:#80c5e7 !important; font-weight:bold; font-size:15px; letter-spacing:1px; }
#footer .footer_space{ height:50px; }
#footer .copyright{ color:#FFF; letter-spacing:1px; padding:0 0 5px 0; }

#top{ position:absolute; right:2%; top:15%; cursor:hand; cursor:pointer; }

#contact_info{ position:relative; max-width:1200px; overflow:hidden; }
.contact_info_area{ width:100%; overflow:hidden; line-height:25px; padding:5px 0; }
.contact_info_title{ float:left; width:20%; min-width:70px; max-width:70px; }
.contact_info_title img{ vertical-align:middle; }
.contact_info_content{ float:left; width:80%; }
.footer_copyright{ float:right; color:#998973; padding:10px 0; line-height:20px; letter-spacing:1px; text-align:right; }
.footer_copyright a{ color:#998973; text-decoration:none; }
.footer_copyright a:hover{ text-decoration:underline; }

.common_title_bg{ position:relative; width:100%; height:496px; background:url(../../images/about_title_bg.png) no-repeat; background-position:center; color:#FFF; font-size:48px; font-weight:bold; display:flex; align-items:center; justify-content: center; }
.common_title_bg div{ position:absolute; bottom:35%; text-align:center;
 margin-left: auto;
 margin-right: auto;
 left: 0;
 right: 0; }
 
.sitemap{ text-align:right; line-height:25px; padding:10px 10px;}
.sitemap a{ color:#797979; }

.common_title_en{ color:#5b90aa; margin:50px 0; font-size:42px; line-height:50px; font-weight:normal; }
.common_title{ display:inline; color:#545454; font-size:18px; font-weight:normal; padding:20px 0 15px 0; border-bottom:1px solid #6597af;  }


@media screen and (max-width: 1024px) {
	#wrapper{ margin:58px 0 0 0;}
	
	#footer .footer_area{ display:inline;}
	#footer .footer_area_left{ float:none; text-align:center; margin:0 auto; width:100%; }
	#footer .footer_area_right{ float:none; text-align:left; text-align:center; width:100%; margin:5px 0 0 0; }
	
	#footer .footer_area_left a.footer_link{ display:inline-block; width:99%; background:#fff; color:#868686; text-align:center; border-bottom:1px solid #A3E6FC; padding:10px 0; text-decoration:none; font-size:14px;}
	#footer .footer_area_left a:hover{-webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; background:#09A2E9; text-decoration:none; color:#fff;}	
	#footer .footer_area_left div{ margin:0 auto; }	
	.nav_none{ display:none; }
	#footer .footer_space{ height:10px; }
	
}
@media screen and (max-width: 768px) {

	.contain_wrap{ padding:0; }
	.contact_info_area{ padding:2px 0;}
	.common_title_en{ font-size:30px }
	.common_title{ font-size:13px; }
	.common_title_en{ margin:25px 0; line-height:30px; }	
}

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


#index_about{ position:relative; width:100%; background:#c9dce2; padding-bottom:30px; background-size:cover; background-position: center; }
.index_about_wrap{max-width:1268px;padding-top: 70px;font-weight:bold;margin:0 auto 130px auto;text-align:center;color:#681e00;letter-spacing:2px;font-size:16px;line-height:30px;}

#index_product{ width:100%; background:url(../../images/product_bg.jpg) no-repeat; background-size:cover; background-position: center;  }
.index_product_wrap{ position:relative; max-width: 1200px; min-height:830px; overflow:hidden; margin:0 auto; }
.index_product_title{ position:absolute; top:10%; right:0; }
.index_product_content{
   position:absolute;
   top:10%;
   left:0;
   width:100%;
   max-width:760px;
   overflow:hidden;
   /*background-color: rgba(255, 255, 255, 0.5);*/
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.product_item{ position:relative; width:50%; height:310px; float:left; background-color:#fff; }
.product_item_arrow1{ position:absolute; top:45%; left:0; }
.product_item_arrow2{ position:absolute; top:45%; right:0; }
.product_item1{width:100%;height:230px;background:url(../../images/product_bg.png) no-repeat bottom;padding: 50px 50px;box-sizing: border-box;}
.product_item2{ width:100%; height:80px; background:#675b4c; padding:18px 0 0 0; text-align:right; }
.product_item_title{ color:#7e2a00; font-size:18px; font-weight:bold; letter-spacing:1px; padding:0 0 20px 0;  }
.product_item_title a{ color:#7e2a00; text-decoration:none; }
.product_item_title a:hover{  text-shadow:1px 1px 1px #DDDDDD; }
.product_item_content{ color:#383838; line-height:22px; letter-spacing:1px; max-height:115px; overflow:hidden; }


.service_container
{
    text-align:center;
    width:100%;
}
.service_square
{
    margin:0 30px;
    max-width:315px;
	height:270px;
    text-align:center;
    display:inline-block;
	color:#606060;  
}
.buy_square
{
    margin:0 10%;
    max-width:315px;
	height:120px;
    text-align:center;
    display:inline-block;
	color:#606060;  
}
.service_square table tr td{ font-size:16px; font-weight:normal; }
.service_title{ color:#5b90aa !important; font-size:24px !important; letter-spacing:1px; font-weight:normal; height:40px; line-height:40px; }

.service_row1{ width:100%; color:#8d8d8d; }
.service_cols{ float:left; padding:10px 40px; font-weight:normal; font-size:15px; letter-spacing:1px; }
.service_input{ max-width:305px; width:100%;  font-size:16px; color:#666; height:50px; padding:0 10px; outline:0; border:1px solid #c8c8c8; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; }
.service_radio{ border:1px solid #c8c8c8;  
	-ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
    transform: scale(1.5); }
.service_checkbox{ width:125px; display:inline-block; padding:8px 0; }
.service_textarea{ max-width:500px; width:100%; height:300px; border:1px solid #c8c8c8; font-size:16px; color:#666;  -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;  }

@media screen and (max-width: 1200px) {
	.index_product_wrap{ text-align:center; }
	.index_product_title{ position:inherit; margin:2% 0; right:auto; }
	.index_product_content{ margin-right:auto; margin-left:auto; position:inherit;}
	
}
@media screen and (max-width: 1024px) {
	.service_cols{ float:none; }
}

@media screen and (max-width: 768px) {

	.product_item1{ padding:50px 20px; }
	.index_about_wrap{ font-size:13px;  margin:0 auto; }	
	
}

@media screen and (max-width: 480px) {

	#index_about{ min-height:inherit; }
	.index_about_wrap{ font-size:13px;  margin:0 auto; }
		
	.product_item{ float:none; width:100%; height:auto; }
	.product_item1{ padding:30px 10px; height:auto; }
	.product_item2{ height:65px; }
	
	.service_checkbox{ padding:3px 0; }

}



/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> About <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.about_left{ width:40%; float:left; }
.about_right{ width:60%; float:left; background:url(../../images/about_img.jpg) no-repeat center; min-height:390px; }
.about_title{ /*text-shadow:1px 1px 1px #DDDDDD;*/ color:#4b595d; font-size:32px; line-height:35px; letter-spacing:1px; font-weight:normal; }
.about_content{ color:#6f7a7d; padding:20px 2% 20px 2%; box-sizing:border-box; text-align:justify; font-weight:normal; }

.inner_about{ margin-bottom:60px; padding:0 20px; }
.inner_about_title table td{ text-align:left; color:#36708d; font-size:20px; letter-spacing:1px; max-width:1000px; line-height:25px; font-weight:normal; }
.inner_about_content{ letter-spacing:1px; font-size:15px; color:#101010; max-width:1000px; line-height:30px; padding:20px 0; font-weight:normal; }
.inner_about_icon1{ display:inline-block; height:30px; background:#5b90aa; -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; }

@media screen and (max-width: 1024px) {
	.about_wrap{ padding:0;}
	.about_left{ width:80%; float:none; margin:0 auto; }
	.about_right{ display:none; }	
	.about_right2{ width:99%; }
	.about_title{ font-size:20px; }
	.inner_about{ padding:0 20px 0 30px; }
}

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

.contact_form{ max-width:410px; overflow:hidden; margin:0 auto; border:1px solid #ffffff; padding:20px 10px;  -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; }
.contact_input{ width:90%; height:50px; font-size:16px; color:#666; padding:0 10px; outline:0; border:1px solid #c8c8c8; margin:10px 0; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;  }
.contact_textarea{ width:95%; height:300px;  font-size:16px; color:#666; border:1px solid #c8c8c8; margin-top:8px; padding:10px; box-sizing:border-box; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;  }
.contact_verify{ width:100px; height:35px; padding:0 10px; outline:0; border:1px solid #c8c8c8; margin:10px 0; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;  }


@media screen and (max-width : 1024px) {

	.none1024{ display:none; }
	
}

@media screen and (max-width: 900px) {

	.none900{ display:none; }
}

@media screen and (max-width: 750px) {
	.none750{ display:none; }
}

@media screen and (max-width : 480px) {
	.none480{ display:none; }
}



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


.product_square
{
	vertical-align:top;
    margin:35px 10px;
    width:270px;
	min-height:270px;
    text-align:center;
    display:inline-block;
	color:#606060;  
}
.product_square_title{ color:#5b91aa; font-size:15px; letter-spacing:1px; line-height:22px; }
.product_square_star{ text-align:left; padding:5px 0;}
.product_square_content{ text-align:left; color:#454f51; font-size:15px; }

.product_square2
{
	vertical-align:top;
    margin:35px 60px;
    max-width:470px;
	min-height:270px;
    text-align:center;
    display:inline-block;
	border:1px solid #CCC;
	color:#606060;  
	-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;
}
.product_square2 img{ -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; display:block; }

.product_square_title2{ color:#ffffff; font-weight:normal; font-size:18px; letter-spacing:1px; height:65px; line-height:22px; background:#5b90aa; padding:15px; }
.product_square_title2 a{ color:#ffffff; text-decoration:none; }

.product_square_title2 img{ display:inline; } 
.product_square_content2{ text-align:left; color:#454f51; font-size:15px; padding:10px; }


@media screen and (max-width: 750px) {
	.product_square{ min-height:0; }
	.product_square2{ margin:15px 20px; }
}
@media screen and (max-width: 480px) {
	.product_square_title2 img{ display:none; } 
}


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

html, body { position: relative; height: 100%; }
.swiper-container { position:relative; width: 100%; height: 100%; margin-top:58px; }
.swiper-slide { text-align: center; font-size: 48px; color:#fff; letter-spacing:1px; background-size:cover; background-position: center; }
.swiper-mask{ position:absolute; top:0; left:0; background:url(../../images/bg-mask.png); width:100%; height:250px; }
.swiper-word {display:none;width:100%; letter-spacing:5px; max-width: 1400px;position:absolute;left: 0;right: 0;margin-left: auto;margin-right: auto;font-size:2.75vw;/* line-height: 3.5vw; */top: 38%;text-align: left;padding-right:4%;padding-left: 50px;border-left: 1px solid #ffffff;box-sizing:border-box;}
.swiper-word span { font-size:16px; }

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


/* The container */
.container {
    display: inline-block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    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 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

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

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

/* When the checkbox is checked, add a blue background */
.container 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 input:checked ~ .checkmark:after {
    display: block;
}

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



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


::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #c8c8c8;
  font-size:16px;
  letter-spacing:1px;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #c8c8c8;
  font-size:16px;  
  letter-spacing:1px;  
}
:-ms-input-placeholder { /* IE 10+ */
  color: #c8c8c8;
  font-size:16px; 
  letter-spacing:1px;   
}
:-moz-placeholder { /* Firefox 18- */
  color: #c8c8c8;
  font-size:16px;  
  letter-spacing:1px;  
}

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

html, body { position: relative; height: 100%; }
.swiper-container { position:relative; width: 100%; height: 100%; }
.swiper-slide { text-align: center; font-size: 48px; color:#fff; letter-spacing:1px; background-size:cover; background-position: center; }
.swiper-word { display:none; width:100%; max-width:1200px; position:absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; font-size:2.75vw; bottom:30%; text-align:right; padding-right:4%; box-sizing:border-box; }
.swiper-word span { font-size:16px; }


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Transition Effect <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.infinite_effect{ animation: nudge 5s linear infinite alternate; }

@keyframes nudge {
  0%, 100% {
    transform: translate(0, 0);
  }
  
  50% {
    transform: translate(15px, 0);
  }
  
  50% {
    transform: translate(-15px, 0);
  }
}


@keyframes rotate-btn {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-360deg);
  }
}

@keyframes transiTop20 {  0% {
 transform: translateY(-20%);
}
 100% {
 transform: translateY(0);
}
}


/*effect-underline*/
a.effect-underline:after {
	content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  height: 1em;
  width: 100%;
  border-bottom: 1px solid;
  margin-top: 10px;
  opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(0,1);
	transform: scale(0,1);
}

a.effect-underline:hover:after {
  opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

/* effect-shine */
a.effect-shine:hover {
  -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);
  -webkit-mask-size: 200%;
  animation: shine 2s infinite;
}

@-webkit-keyframes shine {
  from {
    -webkit-mask-position: 150%;
  }
  
  to {
    -webkit-mask-position: -50%;
  }
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 區塊跳動效果 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.bannerArea{ z-index:999999; }
.bannerArea a.scrollDown{
	display:block;
	color:#000;
	text-align:center;
	width:80px;
	position:absolute;
	bottom:50px;
	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:80px; opacity:1;}
  50%   {bottom:88px; opacity:0.5;}
  100% {bottom:80px; opacity:1;}
}
@-moz-keyframes upDown {
  0%     {bottom:80px; opacity:1;}
  50%   {bottom:88px; opacity:0.5;}
  100% {bottom:80px; opacity:1;}
}
@keyframes upDown {
  from     {bottom:80px; opacity:1;}
  50%   {bottom:88px; opacity:0.5;}
  to {bottom:80px; 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-image:url(../../images/action_bg.png); z-index:100000000 }
.Loadaction { width: 220px; height: 55px; top: 42%;  position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; background-image:url(../../images/action_bg.png); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
.Actionupload_Text { font-size:13px; color:#FFFFFF; padding:10px 0; }

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