@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,select,input {
	font-size:12px;
    font-family: "-apple-system", BlinkMacSystemFont, "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "メイリオ", "Hiragino Kaku Gothic ProN", "MS PGothic", Osaka, "sans-serif";
}


.iframe_ch { display:none }
.w100{ width:100%; }
.middle{ vertical-align:middle; }

.btn1{color:#FFF !important;font-size:15px !important;width:auto !important;padding: 20px 60px;border:1px solid #FFF;cursor:hand;cursor:pointer;}
.btn1:hover{ color:#a0ddf2 !important; border:1px solid #a0ddf2; -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:#246881 !important;font-size:15px !important;width:auto !important;padding: 15px 40px;border:1px solid #246881;cursor:hand;cursor:pointer; }
.btn2:hover{ color:#246881 !important; background:#98c3d2; border:1px solid #246881; -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease}
 
input, select, textarea{
    -ms-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
    -webkit-box-sizing:content-box; 
	-webkit-appearance: none;
}

.p_btn{ width:100%; margin:100px 0 35px 0; text-align:right; }
 

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

#wrapper{ width:100%; margin:0 auto; padding-top:200px; }
#wrapper .common_wrap{max-width:1400px;min-height:800px;margin: 0px auto 0 auto;}

/*子選單*/
.submenu1{ font-size:18px !important; overflow:hidden; background:#fff; border:1px solid #EBEBEB; position:absolute; top: 130px;box-shadow:2px 2px 8px rgba(15%,15%,40%,0.1);}
.submenu1 a{
 font-size:18px !important;
 color:#55646d !important;
 font-weight:normal !important;
 display:block !important;
 /* border-bottom:1px solid #dedede; */
 padding: 11px 25px;
 -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease;
 }
.submenu1 a:hover{ color:#ffffff !important; background:#03526e !important; }

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_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:1400px; overflow: hidden; margin-right: 70px; margin-left: 70px; margin: 15px auto 8px auto; }
.header_box_line { /*padding-bottom: 20px;*/ /*border-bottom: 2px solid #fff;*/ }
.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: 10px;
 margin-bottom: 0px;
 height: 100%;
 line-height: 25px;
 /*text-transform: uppercase;*/
 font-weight: 700;
 font-size: 14px;
 -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: 15px;padding-left: 15px;padding-bottom: 22px;}
.header_box .header_box_main .menu li a { }
.header_box .header_box_main .menu li img { padding:0 3px; }
.header_box .header_box_main .menu li a:hover { color: #98C3D2 }
/*原始選單*/
.header_box_scroll1 { background-color: transparent; top:-20px; }
.header_box_scroll1 .menu { margin-top: 35px; margin-bottom: 10px }
.header_box_scroll1 .menu li a {
 color: #3d4e59;
 font-size:18px;
 font-weight: normal;
 letter-spacing: 1px;
 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, .header_box_scroll1 .logo-mid {
 position: absolute;
 margin-top: 55px;
 max-width: 558px;
 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(4, 77, 102, .9); -webkit-box-shadow: 0 1px 4px rgba(4, 77, 102, .15); -moz-box-shadow: 0 1px 4px rgba(4, 77, 102, .15); box-shadow: 0 1px 4px rgba(4, 77, 102, .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, .header_box_scroll2 .logo-mid { 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; width: 100px; 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;
}

/*語系切換*/
#nav{position:absolute;right:10px;top: 30px;z-index:9999;color: #3d4e59;font-size:15px;background-color:rgba(255, 255, 255, 0.7);-webkit-transition: all .4s ease;-moz-transition: all .4s ease;-o-transition: all .4s ease;transition: all .4s ease;-ms-transition: all .4s ease;}
#nav span{ padding:5px 5px; display:inline-block; }
#nav a{color: #3d4e59;text-decoration:none;letter-spacing:2px;}
#nav a:hover{ text-decoration:underline; }


.overlay1 { /*margin-top:80px;*/ height: 100%; width: 0%; position: fixed; overflow:auto; top: 0; right: 0; background-color: rgba(152, 195, 210, 0.9); 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:80px; }
.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:#03526e; }
.overlay1_item span { position:absolute; right:0; top:25px; 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(3, 82, 110, 0.7); 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:#00ac99; text-decoration:none; }

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


#footer{ width:100%; border-top:1px solid #90b2be; min-height:230px; background:url(../../images/footer_bg.jpg); background-size:cover; }
#footer .footer_wrap { position:relative; max-width:1400px; margin:0 auto; padding:50px 0 0 0; text-align:center; }
#footer .copyright{ width:100%; font-size:12px; letter-spacing:2px; color:#568799; border-top:2px solid #0c4e66; line-height:20px; padding:20px 0; margin:20px 0 0 0; }
#footer .copyright a{ color:#568799; text-decoration:none; }
#footer .copyright a:hover{ text-decoration:underline; }

.common_title{ border-right:10px solid #03526e; padding:0 20px; color:#03526e; font-size:40px; line-height:50px; font-weight:bold; text-align:right; letter-spacing:3px; }
.common_title_s{ float:right; color:#80a9b8; font-size:16px; letter-spacing:2px; max-width:570px; text-align:right; line-height:30px; padding:20px 0; }

.inner_title{color:#03526e;font-size:30px;letter-spacing:2px;text-align:center;margin: 50px 0 100px 0;}
 
.sitemap{ text-align:right; line-height:25px; padding:10px 10px;}
.sitemap a{ color:#797979; }

.gotop{ position:absolute; right:10px; top:20px; cursor:hand; cursor:pointer; opacity: 0.9; filter: alpha(opacity=90); /* For IE8 and earlier */ }

.mark_product{padding-top: 90px;}

@media screen and (max-width: 1400px) {
	.common_title{ text-align:left; border-right:0; border-left:10px solid #03526e; }
	.common_title_s{ text-align:left; float:left; }
	.none1400{ display:none; }
}
@media screen and (max-width: 1024px) {
	.footer_nav a{ display:none; }	
	.footer_copyright{ text-align:center; padding:0 10px;}
	.footer_info3, .footer_info4{ display:none;}
	
	.footer_info1{ width:100%; text-align:center; }
	.footer_info2{ width:255px; margin:0 auto; float:none; }
	
}

@media screen and (max-width: 768px) {
	.header_box_scroll1 .logo-big{ display:none; }
	.inner_title{margin: 0 0 30px 0;}
	.mark_product{ padding-top:30px; }	
}

@media screen and (max-width: 480px) {
	#wrapper{ padding-top:150px; }
	.common_title{ font-size:30px; }
	.p_btn{ margin-top:30px; }
}


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

/*Service*/
#index-service {max-width:1500px;/* min-height:1000px; */overflow:hidden;margin:0 auto;padding: 100px 10px 0 10px;box-sizing: border-box;background:url(../../images/service_bg.png) no-repeat bottom left;}
.service-items-area{ float:right; width:750px; }

.index-service-img{ width:100%; margin:0 auto; text-align:center; max-width:742px; }

.index_why_container {text-align:center;width:100%;overflow:hidden;padding: 70px 0 70px 0;}
.index_why_square {margin:15px 30px;padding: 30px 0; width: 300px;/* width:30%; */font-size: 16px;letter-spacing: 1px;min-height:300px;text-align:center;line-height: 25px;vertical-align:top;border: 0;display:inline-block;}
.index_why_square div {color: #5d8fa1;/* font-weight:bold; */font-size: 20px;padding: 20px 0;letter-spacing: 2px;}
.index_why_square img{ width:100%; max-width:185px; }


.index_why_square img {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
} 
.index_why_square:hover img {
-webkit-filter: saturate(4);
}


/*About*/
#index_about { width:100%; background:url(../../images/about_bg.jpg) no-repeat; background-position:center center; background-size: cover; background-attachment: fixed; }
.index_about_contain { position:relative; max-width:1400px; height:777px; margin:0 auto; color:#797979; font-size:14px; line-height:25px; letter-spacing:1px; }
.index_about_title{ position:absolute; left:5%; top:15%; max-width:660px; color:#FFF; }
.index_about_title span { display:inline-block; color:#13a38e; font-size:55px; margin: 0 0 30px 0; }
.index_about_title p{margin:5px 0 20px 0;letter-spacing: 2px;padding:  30px 0;color:  #a0ddf2;font-size: 16px; line-height:35px; }

.custom_title1{ color:#ffffff; border-right:0; border-left:10px solid #ffffff; text-align:left; }


/*Contact*/

#index-contact {/* max-width:1500px; */min-height: 819px;margin:0 auto;padding: 100px 10px 0 10px;box-sizing: border-box; background:url(../../images/contact_bg.jpg) no-repeat; background-size:cover; }
.contact-items-area{/* float:right; */max-width: 1400px;margin: 0 auto;}
.contact_left{float:left;width: 35%;padding-right:5%;box-sizing:border-box;}
.contact{width:90%; overflow:hidden; margin:20px auto; line-height:40px; color:#2D2D2D; font-size:15px; letter-spacing:1px;}
.contact_info_area{ width:100%; overflow:hidden; padding:5px 0; /*border-bottom:1px dashed #a7a7a4;*/ }
.contact_info_title{float:left;width: 15%;min-width:60px;}
.contact_info_content{float:left;width: 84%;text-align:  left;color: #145d78;}

.contact_form_area{ float:left; width:50%; overflow:hidden; padding:10px 0; /*border-bottom:1px dashed #a7a7a4;*/ }
.contact_form_title{float:left;min-width: 150px;line-height: 40px;color:#474747;letter-spacing:1px;padding-left: 10px;box-sizing:  border-box;font-size:16px;text-align:left;}
.contact_form_content{float:left;width: 65%;color: #145d78;line-height: 30px;text-align:left;}
.service_input{ max-width:280px; width:100%;font-size:16px;color:#666;height:40px;padding:0 10px;box-sizing: border-box;letter-spacing:2px;outline:0;border:1px solid #e7e7e7;outline:0;}
.service_radio{ border:1px solid #e7e7e7;  
	-ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
    transform: scale(1.5);
	outline:0; 
}
.service_checkbox{ width:125px; display:inline-block; padding:8px 0; }
.service_textarea{ width:100%; height:200px; border:1px solid #e7e7e7; font-size:16px; color:#666; resize:none; outline:0; }
.contact_verify{max-width: 150px;width: 100%;font-size:16px; letter-spacing:1px; height:40px;padding:0 10px;outline:0;border:1px solid #e7e7e7;margin:10px 0;}

.contact_right{float:right;width: 65%;}

.custom_title2{ color:#5d8fa1 !important; border-right:10px solid #5d8fa1; }



@media screen and (max-width: 1400px) {
	#index-service { background:none; }
	.service-items-area{ width:inherit; }
	.custom_title2{ border-right:0; border-left:10px solid #5d8fa1; }
	.contact_form_area{ float:none; }
	.contact_form_area{ width:90%; }
}

@media screen and (min-width: 1401px) {

	.index-service-img{ display:none; }
		
}

@media screen and (max-width: 1024px) {
	.index_why_container{ padding:10px 0 10px 0; }
 	.index_why_square{ padding:0; } 
	.contact_right{ float:none; }	
	.contact_left{ width:100%; }
	.contact_right{ width:100%; }
	.contact{ width:100%; }
	.contact_info_title{ width:auto; }
}
@media screen and (max-width: 768px) {
	.index_why_square{ width:250px; }
	#index-contact { padding-top:50px;}	
}
@media screen and (max-width: 568px) {
	.index_why_square{ margin:10px 15px; }
	.service-items-area{ float:none; }
	.contact_info_content{ width:100%; }
	.contact_form_content{ width:100%; }
	.service_input{ max-width:none;  }
	.contact_info_area{ width:100%; padding:0px 0; }
	.contact_form_area{ width:100%; padding:0 0; }	
	.contact_form_title{ float:none; padding:0; font-weight:bold; }
}

@media screen and (max-width: 480px) {
	.index_why_square{ width:inherit; margin:0; padding:0; }
	.contact_form_title{ padding-left:0; }
	.service_textarea{ width:98%; }
}


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

#inner_about{ max-width:650px; margin:0 auto; overflow:hidden; }
.about_content{padding: 0 10px 50px 10px;letter-spacing:1px;color:#03526e;font-size:16px;line-height:30px;text-align:left;}

.about_list_area{ float:left; width:100%; overflow:hidden; line-height:20px; box-sizing:border-box; padding:20px 10px; font-size:16px; color:#474747; letter-spacing:2px; border-bottom:1px solid #d1e3e9; }
.about_list_area span{ font-size:20px; color:#5d8fa1; }


@media screen and (max-width: 768px) {
	.about_list_area span{ display:block; padding-bottom:15px; }	
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Products <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#inner_product{max-width:1400px; margin: 0 auto 100px auto;overflow:hidden;}
.product_list{width:100%;overflow:hidden;margin:0 0 50px 0;padding: 10px 0;}
.product_left{ float:left; width:20%; max-width:290px; padding:0 10px 20px 10px; box-sizing:border-box; letter-spacing:2px; font-size:26px; color:#5d8fa1; font-weight:bold; }
.product_right{ float:left; width:80%; text-align:left; padding:0 5px; box-sizing:border-box; font-size:16px; color:#474747; letter-spacing:2px; line-height:30px; }
.product_right a{ font-size:16px; color:#474747; text-decoration:none; }
.product_right a:hover{ text-decoration:underline; }

.product_item
{
    margin:0 2% 50px 2%;
    width:30%;
    vertical-align:  top;
    max-width:320px;
    text-align:left;
    display:inline-block;
}
.product_item img{ border: 1px solid #e0e0e0; box-shadow: 1px 1px 5px #ebebeb; display:block; margin-bottom:10px; }


@media screen and (max-width: 1400px) {
	.product_item{ margin:0 1% 50px 1%; }	
}

@media screen and (max-width: 768px) {
	.product_item{ width:47%; }	
	.product_list{ margin:0 0 0px 0; }	
	
	.product_left{ width:100%; max-width:none; float:none; padding:20px 10px 20px 10px }
	.product_right{ width:100%; }
	#inner_product{ margin-bottom:20px; }	
}
@media screen and (min-width: 768px) {
    .transImg{

        box-shadow: 0 0 0px rgba(0, 0, 0, 0.2);
        transition: 0.3s;
    }
    .transImg:hover{
        transform: translateY(-5px);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
    }
	
}
@media screen and (max-width: 640px) {

	
}
@media screen and (max-width: 380px) {
	.product_item{ width:96%; max-width:none; text-align:center; }	
	
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Products Detail <<<------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.product_detail{width:100%;overflow:hidden;margin:80px 0 100px 0;padding: 10px 0; }
.detail_left{ float:right; width:50%; text-align:left; padding:0 10px; box-sizing:border-box; font-size:16px; color:#474747; letter-spacing:2px; line-height:30px; }
.detail_right{ float:left; width:50%; padding:0 10px 20px 10px; box-sizing:border-box; letter-spacing:2px; }

.p_simg{ max-width:650px; margin-top:20px; }
.p_simg img{ width:48%; margin:10px 0; }
.ptype_name{ color:#5d8fa1; font-size:30px; font-weight:bold; margin-bottom:20px; }
.p_name{ font-size:20px; letter-spacing:2px; color:#474747; padding:20px 0; }
.p_content{ border-top:1px solid #e2e2e2; border-bottom:1px solid #e2e2e2; padding:50px 0; }
.mg_left{ margin-left:1.5% !important; }
.mg_right{ margin-right:1.5% !important; }

@media screen and (max-width: 1024px) {
	.product_detail{ margin:0px 0 50px 0 }	
	.detail_left{ width:60%; }	
	.detail_right{ width:40%; }	
	.p_simg img{ width:100%; }	
}
@media screen and (max-width: 640px) {
	.product_detail{ margin:0px 0 50px 0 }
	.detail_left{ float:none; width:100%; }	
	.detail_right{ float:none; width:100%; }
	
	.mg_left{ margin-left:0 !important; }
	.mg_right{ margin-right:0 !important; }	
			
}

@media screen and (max-width: 480px) {
	.p_content{ padding:20px 0; }
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Exhibition <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


.exhibition_item
{
    margin:0 2% 50px 2%;
    width:31%;
    vertical-align:  top;
    max-width:400px;
    text-align:left;
    display:inline-block;
	letter-spacing:1px; line-height:22px;
}
.exhibition_item img{ border: 1px solid #e0e0e0; box-shadow: 1px 1px 5px #ebebeb; display:block; margin-bottom:10px; }
.exhibition_item .date{ color:#B0B0B0; font-size:13px; }
.exhibition_item .title{ display:inline-block; padding:0px 0 10px 0; color:#5E5E5E; text-decoration:none; font-size:18px; font-weight:bold; }
.exhibition_item .content{ color:#B0B0B0; font-size:15px; }


@media screen and (max-width: 1400px) {
	.exhibition_item{ margin:0 1% 50px 1%; }	
}

@media screen and (max-width: 768px) {
	.exhibition_item{width: 45%;margin: 0 2% 50px 2%;}	
}
@media screen and (max-width: 380px) {
	.exhibition_item{width:96%;max-width:none;text-align:center;margin: 0 2% 50px 2%;}	
	
}

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

.bannerArea{ z-index:999999; }
.bannerArea a.scrollDown{
	display:block;
	color:#000;
	text-align:center;
	width:80px;
	position:absolute;
	bottom:20px;
	left:50%;
	margin-left:-40px;
	z-index:999;}

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

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

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

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




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


/* The container */
.container {
    display: inline-block;
    position: relative;
    color: #474747;
    letter-spacing: 2px;
    padding-left: 35px;
    padding-right: 20px;
    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);
}



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

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

.Loadaction_Box { position:relative; height: 100%; width: 0%; position: fixed; overflow:auto; top: 0; left: 0; overflow:auto; background-color:rgba(152, 192, 210, 0.5); z-index:100000000 }
.Loadaction {width: 220px;height: 90px;line-height: 18px;top: 42%;position: absolute;margin-left: auto;margin-right: auto;left: 0;right: 0;padding: 10px;background-color:rgba(152, 192, 210, 0.8);-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;}
.Actionupload_Text {font-size:13px;color:#FFFFFF;/* height:25px; */padding: 8px 0;letter-spacing: 2px;}

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