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

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

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

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

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

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

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

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

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

/*按鈕*/
.btn1{display:inline-block;color:#FFFFFF;font-size: 14px;width:auto;padding: 15px 40px;margin:5px 0;border:0;letter-spacing:2px;cursor:hand;cursor:pointer;background: #218b5e;outline:0;text-decoration:none;-webkit-border-radius: 25px;-moz-border-radius: 25px;border-radius: 25px;}
.btn1.on{background:#4c7590;}
.btn1:hover{background: #1f674f;transition: all 0.5s ease;}

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


/*回頂部*/
.gotop{ position:absolute; right:20px; top:20px; }

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


/*網頁大標題*/
.common-title{ text-align: left;font-size:36px;color:#1d1d1d;line-height: 30px;padding: 20px 10px 20px 10px;margin: 0 0 0 0; }
.common-title span{text-transform: uppercase;color: #222222;font-size: 30px;font-weight: bold;letter-spacing: 10px;font-family: 'Noto Sans TC', sans-serif;}
.common-title span p{text-transform:uppercase;font-size:13px;padding: 10px 0 0 40px;color: #1b7c54;font-weight: bold;letter-spacing:2px;}
.common-title .line{background: #e6e6e6;width: 100px;height:3px;margin: 20px 0 0px 0;animation:1s ease-in-out 0.8s 1 widthGroup-1;}


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

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

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

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


/*footer*/
#footer{width:100%;overflow:hidden;min-height:210px;background-color: #252525;padding: 0 0 20px 0;border-top: 10px solid #858b8d;}
#footer .wrap{ position:relative; max-width:1300px; width:100%; margin:0 auto; color:#ffffff; display:flex; padding:0 10px; background:url(../../images/footer-bg.jpg) center top no-repeat; }
#footer .wrap .left{flex:1;display:flex;align-items:center;/* justify-content: center; */}
#footer .wrap .left div{width:100%;margin: 30px auto;text-align:center;}
#footer .wrap .left .logo{margin:5px;display: inline-block;vertical-align:middle;color: #ffffff;font-size: 22px;letter-spacing: 5px;font-family: 'Noto Sans TC', sans-serif;font-weight: bold;cursor:pointer;/* font-weight: normal; */}
#footer .wrap .left .logo img{padding-bottom: 10px;display:block;margin: 0 auto;}
#footer .wrap .left .logo span{ display:block; padding:10px 0 0 0; font-size:16px; }

#footer .wrap .right{flex: 1;text-align: right;}
#footer .wrap .contact-info{float:right;color:#9fd3c7;font-size:14px;display:flex;width: 100%;max-width: 650px;margin: 3vh 0;}
#footer .wrap .contact-info .contact-left,
#footer .wrap .contact-info .contact-right{flex:1;padding: 0;text-align: left;}
#footer .wrap .contact-info .items{display:flex;align-items: flex-start;}
#footer .wrap .contact-info .items:not(:last-child){padding-bottom: 15px;}
#footer .wrap .contact-info .items .items-title{flex: 1;min-width: 140px;color: #ffffff;font-size: 14px;}
#footer .wrap .contact-info .items .items-title i{padding-right: 10px;color: #5cb98e;}
#footer .wrap .contact-info .items .items-content{flex: 4;color: #ffffff;line-height: 22px;}
#footer .wrap .contact-info .items .items-content:before{content:"";color:#7d7d7d;/* padding-right:15px; */}

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



@media screen and (max-width : 1200px) {
	#footer .wrap{ display:block; }
	#footer .wrap .left{/* margin-bottom:25px; */}
	#footer .wrap .contact-info{margin: 0vh auto;float:none;max-width: 360px;}
	#footer .wrap .contact-info .items .items-title i{ display:none; }	
	#copyright{text-align: center;}	
	
	
}

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

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

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




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

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

/*最新消息*/
#index-news{width:100%;overflow:hidden;/* background:#1d1d1d; */padding:30px 5vw;color:#ffffff;background: #f8f8f8;}
#index-news .news-wrap{display:flex;max-width:1300px;margin: 30px auto 0 auto;}
#index-news .left{flex: 1; background:url(../../images/news-frame-left.png) top left no-repeat; }
#index-news .left .border{position:relative;width:100%;max-width:215px;min-height: 245px;/* border: 1px solid #1b7c54; */}
#index-news .left .border > div{margin: 40px 0 0 30px;max-width:215px;height: 150px;width: 100%;/* background: #1d1d1d; */}
#index-news .left .border .common-title{ color:#ffffff; }
#index-news .right{flex: 3;padding: 40px 50px;background:url(../../images/news-frame-right.png) top right no-repeat;}
#index-news .right .news-list{width:100%;display:flex;justify-content: space-between;padding:15px 0;border-bottom:1px dotted #8e8e8e;}
#index-news .right .news-list .date{flex:1;font-size:14px;color: #42a77c;font-weight: bold;display: flex;align-items:center;}
#index-news .right .news-list .title{flex:5;padding: 0 10px;}
#index-news .right .news-list .title a{color: #222222;font-size: 15px;font-weight: bold;text-decoration:none;line-height: 20px;}
#index-news .right .news-list .more{ flex:0.5; }
#index-news .right .news-list .more a{ font-size:12px; color:#698ba1; }
#index-news .right .pager{ margin:20px auto 0 auto; text-align:right; }

/*微流體技術優勢*/
#index-about{width:100%;overflow:hidden;padding: 50px 20px;color:#000000;font-size:15px;}
#index-about .about-wrap{display:flex; max-width:1300px; margin:0 auto; }
#index-about .left{flex:1;padding: 0 50px 0 50px;}
#index-about .left .service-area{position:relative;display: flex;justify-content: space-between;margin:20px 0;padding:30px 0;border-top:1px solid #d4d4d4;border-bottom:1px solid #d4d4d4;}
#index-about .left .service-area .caption{position:absolute;background: #ffffff;padding: 5px 10px;top: -13px;left:0;text-transform:uppercase;color:#334e5f;font-size:16px;letter-spacing:2px;}
#index-about .left .service-area span{ width:102px; border:8px solid #698ba1; color:#fefefe; font-size:18px; margin:5px 0; padding: 30px 23px; letter-spacing: 2px; display:inline-block;
    
	background: linear-gradient(274deg, rgba(50, 77, 94, 1)51%, rgba(74, 105, 124, 0.9)100%);
	background: -moz-linear-gradient(274deg, rgba(50, 77, 94, 1)51%, rgba(74, 105, 124, 0.9)100%);
	background: -webkit-linear-gradient(274deg, rgba(50, 77, 94, 1)51%, rgba(74, 105, 124, 0.9)100%);
	background: -o-linear-gradient(274deg, rgba(50, 77, 94, 1)51%, rgba(74, 105, 124, 0.9)100%);
	
	border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
}
#index-about .right{flex:1;background: url(../../images/about-img1.png) no-repeat center;min-height: 360px;min-width: 605px;}


@media screen and (max-width : 1024px) {
	#index-news .news-wrap{ display:block; }
	#index-news .left{ background:none; }
	#index-news .right{ background:none; padding:40px 0px; }	
	
	#index-news .left .border{ max-width:none; height:inherit; min-height:inherit; border:1px solid #1B7C54; }
	#index-news .left .border > div{ position:inherit; top:0; left:0; margin:0 auto; height:inherit; padding-left:0; }
	#index-news .left .border > div .common-title{ text-align:center; }
	#index-news .left .border > div .common-title span{ }
	#index-news .left .border > div .common-title span p{ padding:0; }
	#index-news .left .border > div .common-title .line{ margin:20px auto 10px auto; }	
		
	#index-about .about-wrap{ display:block; }

	#index-about .right{min-height: 55vw;background-size: 100%; min-width:inherit; }
}


/*公司簡介*/
#index-technical {width:100%;background:url(../../images/technical-bg.jpg) no-repeat;background-position: center bottom;background-size: cover;background-attachment: fixed;}
#index-technical .tech-frame {position:relative;max-width: 1300px;min-height: 600px;overflow: hidden;margin:0 auto;color:#797979;font-size:14px;line-height:25px;letter-spacing:1px;}
#index-technical .tech-frame .common-title span{ color:#ffffff; }
#index-technical .tech-frame .common-title .line{ background:#6eeab1; }
#index-technical .tech-frame .common-title span p{ color:#6eeab1; }
#index-technical .technical-box{width: 50%;right: 0;position: absolute;padding: 50px 20px 50px 20px;box-sizing:border-box;}
#index-technical .technical-box .content{color: #ffffff;font-size:16px;padding:30px 0;line-height: 25px;}
#index-technical .technical-box .content .caption{
	line-height:30px;
    font-size: 24px;
    padding-bottom: 3vw;
}


@media screen and (max-width: 1024px) {	
	#index-technical .technical-box{margin: 0 auto; width:100%; }	
}
@media screen and (max-width: 480px) {	
	#index-technical .technical-box{ position:inherit; }
}


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


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

/*聯絡我們表單*/
.contact-form .input-item{width:100%;display: flex;align-items:center;justify-content: center;background:#ffffff;margin: 25px 0;padding: 0px 0 0 10px;border:1px solid #cecece;transition: all 0.5s ease;}
.contact-form .input-item:hover{border:1px solid #218b5e; border-left:5px solid #218b5e;}
.contact-form .input-item .left{flex:1;color: #000000;font-size: 16px;letter-spacing: 1px;}
.contact-form .input-item .left span{ color:#cb333e; width:13px; display:inline-block; }
.contact-form .input-item .right{flex: 4;padding: 0 0px;border-left: 1px solid #d5d5d5;}
.contact-form .input-item .right input{width:100%;font-size:16px;border:0;padding: 10px 10px 10px 10px;background:transparent;outline: 0;}
.contact-form .input-item .right textarea{width:100%;padding:10px;font-size:16px;height: 175px;border:0;background:transparent;resize:none;outline: 0;}
.contact-form .input-item .right .rand-img{position:absolute;right: 10px;top: 8px;cursor:pointer;}
.contact-form .pager .btn-1:before{ left:10px; }
.contact-form .pager{ text-align:right; }

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


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


/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> 最新消息 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.news-items{width: 100%;max-width: 1000px;margin: 30px auto;overflow:hidden;}
.news-items:not(:first-child){/* border-top: 1px dotted #adadad; */}
.news-items .news-title{/* display:flex; */padding: 0px 0;border-bottom: 1px dotted #adadad;}
.news-items .news-title .left{flex:1;color: #737373;font-size: 22px;padding: 0 0 5px 0;color: #44a87e;font-weight:bold;}
.news-items .news-title .left span{color: #33a172;font-size: 22px;font-weight:bold;/* padding-left:15px; */}
.news-items .news-title .right{position:relative;flex:4;color: #010101;padding: 0px 80px 5px 0px;font-size: 18px;line-height: 25px;display: flex;align-items:center;font-weight:bold;}
.news-items .news-title .right span{position:absolute;top: -10px;right: 10px; cursor:pointer; width:50px;height:50px;background:#698ba1;color:#ffffff;display:flex;align-items:center;justify-content: center;-webkit-border-radius:50%;-moz-border-radius: 50%;border-radius: 50%;}
.news-items .news-title .right span:after{ content:"+"; }
.news-items .news-title .right span.change:after{ content:"-"; }
.news-items .news-title a{ color:#343434; text-decoration:none; }
.news-items .news-content{/* background:#f3f3f3; */font-size:15px;padding: 15px 0 20px 0;line-height:23px;color: #515151;/* letter-spacing: 4px; */line-height: 25px;}
.news-items .news-content a{ color:#515151 !important; }
.news-items .news-content .youtube{ width:100%; max-width:600px; overflow:hidden; margin:0 auto; }

@media screen and (max-width : 480px) {
	.news-items .news-title{ display:block; }
	.news-items .news-title .right{ padding:10px 80px 0 0px; }	
}

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

html, body { position: relative; height: 100%; }
.swiper-container { position:relative; width: 100%; }
.swiper-slide { position:relative; text-align: center; font-size: 48px; color:#fff; letter-spacing:1px; height:330px; background-size:cover; background-position: center; }
.swiper-slide .common-title{ position:absolute; right:20%; top:40%; color:#ffffff; text-align:center; }
.swiper-slide .common-title span p{ color:#ffffff; }


.swiper-slide .common-title > .line{ margin:0 auto; }
.swiper-container .mask{ position:absolute; bottom:0; left:0; z-index:99; }

.swiper-word {/*display:none;*/width:100%;text-transform: uppercase;text-shadow: 1px 1px 1px #999999;font-style: italic;letter-spacing: 5px;max-width: 1400px;position:absolute;left: 0;right: 0;margin-left: auto;margin-right: auto;font-size: 25px;line-height: 30px;top: 40%;text-align: center;/* padding-right:4%; *//* padding-left: 50px; */box-sizing:border-box;}
.swiper-word span {display: block;font-size: 30px;padding: 10px 20px;letter-spacing: 5px;}



@media screen and (max-width : 768px) {
	.swiper-slide .common-title{right: 0;left: 0;margin-left: auto;margin-right: auto;background-color: rgba(0, 0, 0, 0.5);}
}

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

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

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

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

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

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


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


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

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

/* Hide the browser's default checkbox */
.container-item input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

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

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

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

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

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

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


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

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

@keyframes slideInFromRight {


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

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

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

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

/*區塊跳動效果*/
.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;}


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

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

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

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

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


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

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