*{-webkit-transition: all 0.3s;-o-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;box-sizing: border-box;}
*{ font-weight:100;} 
html{ width: 100%;}
body { background: #ffffff;  margin:0px ; width: 100%; height: 100%; position: relative ;; padding:0px;font-family:"微軟正黑體",Arial!important;}
img{  border:0px;}
input,select,textarea{ padding:5px}
a {color: #000000;LETTER-SPACING: 0px; TEXT-DECORATION:none}
a:link {color: #000000;}
a:visited {color: #000000;}
a:hover {TEXT-DECORATION:none;}
a:active {color: #000000;}

h1,h2,h3,h4,h5,h6{ margin:0px; padding:0px; font-weight:100;}
 

.data-width{ width: 100%;; max-width:1600px ; display: block; position: relative; margin: 0px auto;}


.data-small{ display:inline-block; background:#68B88E; color:#FFFFFF; padding:8px 10px; margin:0px 0px}
.data-small-2{ display:inline-block; background:#ACD8C1; color:#666666; padding:8px 10px; margin:0px 0px}

.main_table{position: relative; margin:0px auto ;  display: block; padding:0px; width:100%;      ;  }




.nav{ width:100%;   display: flex; justify-content: center; align-items: center; max-width: 1600px; margin: 0px auto;; z-index: 1;    }

.nav-brand{ flex: 1; display: flex;align-items: center}
.nav-brand-logo{ display:none   }
.nav-brand-logo img{height: 60px}
.nav-brand-title{ margin:20px ; width: 180px }

.nav-menu{flex: 4;    display: block; position: relative; text-align: right;}
.nav-menu ul{   width: auto;display: flex; align-items: center; justify-content: flex-end}
.nav-menu ul li{  margin-right: 20px }
.nav-menu ul li a{ display: inline-block; text-align: center; padding: 5px 0px 0px 0px;font-size: 12pt;   position: relative; }
.nav-menu ul li a i{ display: inline-block; opacity:0.75}
.nav-menu ul li a > span{ display: inline-block; vertical-align: top; padding: 2px 5px 2px 5px; font-weight: bold;opacity:0.75}
.nav-menu ul li b{ display: inline-block; vertical-align: top;  }
.nav-menu ul li b b{background: crimson; color:#FFFFFF; border-radius: 25px;   font-size: 8px; padding:1px 5px; min-width:20px; text-align: center;margin: 5px 0px 0px -5px;; }

.nav-menu-search{ width: 300px;;}
@media screen and (max-width:1024px) {
        .nav-menu ul li{   margin:0px 5px }
}

.header-fixed{display: none; }
.header{ display: none; ;    }
.wrapper{flex:4; padding:0px 0px; overflow: auto;    } 
@media screen and (max-width:768px) { 

        .fb_dialog {
        position: -webkit-sticky !important;
        position: fixed !important;
        bottom: 80px !important; 
        }


        .nav{ background: #00C4CC; width:100%;  position: fixed; top:auto; bottom:0px; z-index: 10; left: 0px; height: 50px;}

        .nav-brand{ display: none;  }
        .nav-menu-search{display: none!important}
        .nav-menu{width: 99%;; max-width:1600px ; display: block; position: relative; margin: 0px auto}
        .nav-menu ul{ display: flex}
        .nav-menu ul li{ flex:1}
        .nav-menu ul li a{ display: block; text-align: center; padding: 5px 0px;font-size: 7pt;   position: relative; color: #ffffff; }
        .nav-menu ul li a i{ display: block; text-align: center; opacity:0.9}
        
        .nav-menu ul li a span{  padding: 0px; font-weight: bold; opacity:0.9}
        .nav-menu ul li b{ position: absolute; top:-2px;left:60%; white-space: nowrap; }
        .nav-menu ul li b b{background:#121640; }
        .header-fixed{ width:100%; position: fixed; top:0px; z-index: 10; left: 0px;display: block  }
        .header{ width:100%; display: block;    text-align: center;   }
        .wrapper{ padding-top: 0px ;}
        .main_table{   padding-bottom: 50px}
        
}

 


.logo{  text-align:left; margin:0px; background: #000;}
.logo img{ width:50%; margin:0 auto }
.logo .title{ display:block; background:#D1BFA6 ; text-align:center; color:#FFFFFF; padding:13px 0px;  ;  }

.tip{ float:right; background:#cc0000; border-radius:10px; padding:0px 10px; margin:2px 5px 0px -100px ; font-size:9pt;; color:#FFFFFF}
.info{   padding:5px 15px; margin:0px; text-align:left }
.logout{ display:inline-block; float:right; margin-right:10px;}
.allon,.alloff{ font-size:26pt; cursor:pointer; float:right; margin:-5px 0px;  }
.alloff{ color:#009900  }
.allon{  color:#999999 }
.menu-wrapper{ text-align:center; position:relative }
/*footer*/


.footer-main{width:100%;  background:#FFFFFF; }


.footer-tip{ padding:20px 0px; border-bottom:1px solid #CCCCCC;  margin:0px; }
.footer-tip ul{ margin:0px; padding:0px; display: flex; flex-wrap: wrap;}
.footer-tip ul li{  width: 16.6666%; border-left:1px solid #CCCCCC; text-align:center; padding:10px 0px; margin:0px;}
.footer-tip ul li:first-child{ border-left:0px}

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

.footer-tip ul li{ width:33.333333%;border-bottom:1px solid #CCCCCC;}
.footer-tip ul li:nth-child(3n-2){ border-left:0px}
.footer-tip ul li:nth-child(1n+4){ border-bottom:0px}
}
@media screen and (max-width:600px) {

.footer-tip ul li{ width:50%; padding:15px 0px;border-left:1px solid #CCCCCC!important;border-bottom:1px solid #CCCCCC!important;}
.footer-tip ul li:nth-child(2n-1){ border-left:0px!important}
.footer-tip ul li:nth-child(1n+5){ border-bottom:0px!important}      
}

.footer-info{ display: flex; padding: 15px 0px;}
.footer-brand{ width:16.6666%; order: 2; border-left:1px solid #CCCCCC; line-height:150%; padding:30px 0px;font-size:10pt; text-align:center;  }
        .footer-logo{width: 50px; margin: 0 auto;}
        .footer-title{  width: 140px; margin: 0 auto; }
        .footer-title img{  }
        .footer-contact{ display: flex; align-items: center; justify-content: center; padding: 5px 0px; }
        .footer-contact a{  width:30px; height: 30px; background: #00C4CC; display: inline-flex; align-items: center; justify-content: center; padding: 6px; color: #FFFFFF; border-radius:50% ; margin: 3px; } 
        .footer-contact a:hover{ background: #68B88E;}
        .footer-contact a i{ font-size: 14pt;  }



.footer-menu{ width:83.3330%;  order: 1; display: flex; ;}
.footer-menu div{  width:20%;  vertical-align:top; text-align:center; margin-top: 5px; }

.footer-menu div h3{  color:#000000; font-size:12pt; padding:10px 0px; font-weight: bold;}
.footer-menu div ul { list-style:none; margin:0px; padding:0px  }

.footer-menu div ul li{  padding:5px 0px;  }
.footer-menu div ul li a{ font-size:10pt;}
.footer-menu div ul li a:hover{color:#E15049 }

.footer-copyright{ text-align: center;padding: 20px 0px;;}
.footer-copyright span{ color: #CCCCCC; font-size: 8pt; }
.footer-slogan{ font-size: 18pt; padding: 5px 0px; font-weight: bold; color: #666666;  }

@media screen and (max-width:1000px) {
.footer-info{ display: block; text-align: center; padding: 15px 0px;}
.footer-brand{ width:100%; order: 1; border-left:0px solid #CCCCCC; padding-bottom:0px;  }
        
.footer-menu{ width:100%;  order: 2; display: flex; flex-wrap: wrap; justify-content: center; padding: 0px 20px 30px 20px;}

.footer-menu div{  width:20%; max-width: 120px; }
.footer-menu div h3{font-size:12pt; white-space: nowrap;} 

.footer-menu div ul li{  padding:3px 0px;  }
}
@media screen and (max-width:640px) {
.footer-menu{  }
.footer-menu div h3{font-size:10pt; } 
.footer-menu div ul li a{ font-size:7pt;}
}
@media screen and (max-width:320px) {
.footer-menu{  padding: 0px 10px;}
.footer-menu div h3{font-size:9pt; } 
.footer-menu div ul li a{ font-size:7pt;}
}


/*header-main*/
.header-main{ display: flex ; padding: 10px 20px;padding-bottom: 5px; align-items:   center;}
        .header-main-logo{ width:50px; }
        .header-main-logo img{  width:70%;}
        .header-main-title{  width: 160px;; text-align: left; }
        .header-main-title img{ width: 100%;}
        .header-main-icon{ flex: 1; text-align: right; padding-right: 10px}
        .header-main-icon i{font-size: 30px }
.header-main-search{ display: block; padding: 0px 10px 10px 10px;} 

.header-search{ padding:8px 10px;  background: #666666} 

.search-bar{ position: relative;}
.search-bar form{ position: relative;  display: block;}
.search-bar input{  display: block; width: 100%; margin: 0 auto;  border: 1px solid #CCCCCC; border-radius:50px;padding: 10px 20px; }
.search-bar i{position: absolute; right: 10px; top:calc(50% - 12px); font-size: 25px; cursor: pointer;;}

@media screen and (max-width:768px) {
        .header-main-title{ width: 40%; max-width:140px;  margin: 0 auto; }
}

/*data-table*/
.data-table-level{ width:100%;  text-align:center; font-size:10pt; margin:0px auto }

.data-table-level >thead th{ background:#000000;text-align:center;  padding:5px; color:#FFFFFF}

.data-table-level tr{ background:rgba(200,200,200,0.2) }
.data-table-level tr:nth-child(even){background:rgba(200,200,200,0.5) }

.data-table-level tr  td{ padding:3px;word-break:break-all}
.data-table-level tr td b{ color:#CC0000; font-weight:bold}
.data-table-level tr.noshow{background:#FFCCCC }

.swich{ text-align:center; margin:10px 0px}
.swich a{background:#FFFFFF; color:#999999;  padding:10px 20px; border-radius:5px; display:inline-block; font-size:10pt; font-weight:bold; border:1px solid #CCCCCC; cursor:pointer}
.swich a.on{background:#68B88E; color:#FFFFFF;}
.swich a.off{background:#FF3333; color:#FFFFFF;}



.btn-div{ width:100%; text-align:center; margin:10px 0px}
.btn-div input{ padding:10px 20px; min-width:120px; font-size:12pt; background:#00CC99; color:#FFFFFF; border:0px; cursor:pointer}
.btn-div input:hover{ background:#009966}



/*form*/
.form_title{ border-top:1px dotted #CCCCCC; border-left:3px solid #CC0000; padding:5px; text-align:center; background:#f1f1f1}
.form_content{border-top:1px dotted #CCCCCC; padding:5px; text-align:left}
.form_content h3{ font-size:14pt; color:#CC0000; margin:0px;}
.form_content h5{ font-size:10pt; margin:0px;}
.form_input{ width:500px; padding:5px; font-size:12pt;}
.form_textarea{ width:500px;font-size:12pt;}
.form_btn{ padding:5px 15px;}



/*ad*/

 
.ad-icon{ width: 100%; display: block; position: relative;; }
.ad-icon .title{ display: none  }
.ad-icon ul{ display: flex; text-align: center;justify-content: center }
.ad-icon ul li{text-align: center}
.ad-icon ul li a{ }
.ad-icon ul li img{ }
.ad-icon ul li h3{  }

.ad-image{ width: 100%; display: block; position: relative;; }
.ad-image .title{ display: none  }
.ad-image ul{ display: flex; text-align: center;justify-content: center }
.ad-image ul li{text-align: center}
.ad-image ul li a{ }
.ad-image ul li img{ }
.ad-image ul li h3{  }

/*MMS_title*/
.MMS_title{ width:700px; margin:20px auto 0px auto; border:2px solid #68B88E; background:#EEFFEE; font-size:10pt;}
.MMS_title ul{ list-style:none; margin:20px auto; padding:0px; width:600px;}
.MMS_title ul li{ display:inline-block; width:190px; padding:10px; text-align:center }
.MMS_title ul li span{ }
.MMS_title ul li b{ color:#CC0000; font-weight:bold; padding:10px; font-size:11pt}

/*search*/
.search{  margin: 20px auto; width: 100%;max-width: 1600px; padding:0px 0px; min-height: 300px;}
.search .search-bar{ padding: 0 10px; }
.search > h3{ font-size: 16pt; padding: 10px 20px; margin-top: 20px; font-weight: bold; color: #666666; }
.search-block{ padding: 0px;display: flex; flex-wrap: wrap; align-items:flex-start;;}
@media screen and (max-width:768px) {
.search{ margin-top: 50px;}
.search .search-bar{display: none;}
}