body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(images/bg.png);
background-repeat:repeat-y;
background-position:center top;
background-color: #ffe100;
/*background-attachment: fixed;*/
}
.connect {
position: fixed;
bottom: 100px;
right: 5px;
}
.connect table {
background-color: rgba(255, 255, 255,0.3);
border-collapse: separate !important;
border-spacing: 4px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.connect td {
background-color: rgba(255, 0, 0,1.0);
font-weight: bold;
color: #FFFFFF;
padding: 8px 8px;
text-align: center;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
font-size: 15px;
line-height: 20px;
cursor: pointer;
/*width: 150px;*/
}
.connect td:hover{
background-color: rgba(0, 0, 0,0.5);
color: #fff;
font-weight: bold;
}
#gotop {
display: none;
position: fixed;
right: 20px;
bottom: 20px;
border-radius: 42px;
padding: 22px 15px;
font-size: 20px;
background: rgba(0,0,0,0.7);
color: white;
cursor: pointer;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 50px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
font-family: "Arial" , "微軟正黑體";
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 90%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s;
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 32px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 1px 16px;
background-color:#3B3157;
color: white;
text-shadow: 0px 0px 0px rgba(255,255,255,0.6);
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: rgba(0,0,0,0.2);
color: white;
}
.password_1{
width: 720px;
margin-right: auto;
margin-left: auto;
background-color: rgba(255,255,255,0.8);
margin-top: 5px;
padding-top: 20px;
padding-bottom: 20px;
color: #ddd;
border-radius: 25px;
text-align: center;
}
.form-control{
display:block;
margin-left: auto;
margin-right: auto;
font-family:  "Arial" , "微軟正黑體" !important;
width:85%;
padding:12px 12px;
font-size:20px;
color:#ddd;
background-color:#fff;
background-image:none;
border:1px solid #ccc;
border-radius:2px;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s
}
.form-control:focus{
border-color:#66afe9;
outline:0;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}
.form-control::-moz-placeholder{color:#999;opacity:1}
.form-control:-ms-input-placeholder{color:#999}
.form-control::-webkit-input-placeholder{color:#999}
.form-control::-ms-expand{background-color:transparent;border:0}
.form-control[disabled],.form-control[readonly],fieldset[disabled]
.form-control{background-color:#eee;opacity:1}
.form-control[disabled],fieldset[disabled]
.form-control{cursor:not-allowed}
textarea.form-control{height:auto}
input[type=search]{-webkit-appearance:none}
/* @media screen and (-webkit-min-device-pixel-ratio:0){input[type=date]*/
.form-control,input[type=time]
.form-control,input[type=datetime-local]
.form-control,input[type=month]
.form-control{line-height:34px}
/*icon*/
#social-footer:after{
content:'';display:table;clear:both
}
#social-footer ul{
list-style:none;padding:0;margin:0
}
#social-footer ul li{
float:left;width:33.3333%;text-align:center
}
#social-footer ul li a{
display:block;
color:#fff;
font-size:2em;
padding:10px;
text-decoration:none
}
#social-footer ul li:nth-of-type(1){background:#e60000}
#social-footer ul li:nth-of-type(1):hover{background:#cc0000}
#social-footer ul li:nth-of-type(2){background:#3b5998}
#social-footer ul li:nth-of-type(2):hover{background:#2A447B}
#social-footer ul li:nth-of-type(3){background:#4B9CDA}
#social-footer ul li:nth-of-type(3):hover{background:#6598ff}
#social-footer ul li a span{display:block}
#social-footer ul li a span:before{
margin:0;display:inline-block;
vertical-align:middle;
line-height:1em
}
#social-footer ul li a span.freepikicon-twitter:before{font-size:1.3em;margin-top:6px}
#social-footer ul li a span.freepikicon-facebook1:before{font-size:1.55em}
#social-footer ul li a span.freepikicon-googleplus:before{font-size:1.47em;margin-top:2px}
#account #social-footer ul li a span.freepikicon-twitter:before{margin-top:20px}
#account #social-footer ul li a span.freepikicon-facebook1:before{margin-top:20px}
#account #social-footer ul li a span.freepikicon-googleplus:before{margin-top:22px}
#social-footer ul li a span.social-icon{display:inline-block}
#social-footer ul li a .right{display:inline-block;vertical-align:middle;margin-left:5px}
#social-footer ul li a span.name{font-size: .5em;display:block;font-weight:bold}
#social-footer ul li a span.counter{
font-size: .5em;
padding:2px 10px;
border-radius:4px;
display:block;
background-color:#333;
background:rgba(0,0,0,0.3);
}
#footer{
background:#fff;
width:100%;
position:relative
}
.footer-holder{
padding:27px 18px 72px 28px;
overflow:hidden;
width:1001px;
margin:0 auto
}
/*icon end*/
.overlay { /*服務*/
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 10%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 18px;
text-decoration: none!important;
font-size: 38px;
color: #818181!important;
display: block;
transition: 0.3s;
font-family:  "Arial" , "微軟正黑體";
}
.overlay a:hover, .overlay a:focus {
background-color: rgba(255,255,255,0.9);
color: #000;
font-weight: bold;
}
.closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px !important;
}
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.closebtn {
font-size: 40px !important;
top: 15px;
right: 35px;
}
}
/*modal end*/
.t_start{
width: 1000px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.t_start_2{
width:100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
a:link {color: #333333;text-decoration: none;}
a:visited{text-decoration: none;color: #333333;}
a:hover{text-decoration: underline;}
a:active{ text-decoration: none; }
.red {color: #F00;font-weight: bold; }
.yellow{color: #ff0;font-weight: bold;}
.blue{color: #333;font-weight: bold;}
.c_add{color: #0033cc;font-weight: bold;}
.c_bg{background-color: #006fff;color: #fff;padding: 1px 5px;margin: 0px 2px;text-shadow: 0px 0px 0px rgba(255,255,255,0.6); font-weight: bold;}
.r_bg{background-color: #ff0000;padding: 1px 5px;color: #fff;font-weight: bold;}
.y_bg{background-color: #ffff00;padding: 1px 5px;color: #0033cc;font-weight: bold;}
.data_bg{background-color: #fff;padding: 50px 30px 10px 30px;color: #0066cc;font-weight: bold;}
.font1  {
font-family: "新細明體";
font-size: 15px;
line-height: 23px;
font-weight: normal;
color: #333;
}
.font2 {
font-family: "Arial Black" , "微軟正黑體";
font-size: 26px;
line-height: 36px;
font-weight: bold;
color: #000;
text-align: center;
padding-top: 20px;
}
.line {
border-top:  dashed 1px #fff;
width:50%;
margin-left:auto;
margin-right: auto;
margin-top: 50px;
margin-bottom: 50px;
}
#top{
background:url(images/top_2.png) 100% 0 no-repeat;
margin: 0 auto;
background-position:center top;
margin-left: 0px;
margin-top:65px;
margin-right: 0px;
margin-bottom: 0px;
padding-top: 500px;
}
.top_mune{
/*background:url(images/bg_3.png) 100% 0 no-repeat;
background-position:center top;
background-repeat: no-repeat;*/
/*    background-color: #FEE118;*/
padding-bottom: 60px;
}
.t-title{
text-align: center;
font-family: "Arial" , "微軟正黑體";
color: #fff;
font-size: 26px;
line-height: 38px;
/*text-shadow: 1px 1px 1px rgba(255,255,255,0.6);*/
font-weight: bold;
}
.date-title{
background:url(images/bg_3.png) 100% 0 no-repeat;
background-position:center top;
background-repeat: no-repeat;
margin-top: 150px;
padding-top: 30px;
text-align: center;
font-family: "Arial" , "微軟正黑體";
color: #fff;
font-size:26px;
line-height:36px;
/*text-shadow: 1px 1px 1px rgba(255,255,255,0.6);*/
font-weight: bold;
}
.op-title{
/*background:url(images/index03.png) 100% 0 no-repeat;
background-position:center top;
background-repeat: no-repeat;*/
padding-top: 50px;
padding-bottom: 0px;
text-align: center;
font-family: "Arial" , "微軟正黑體";
color: #0066cc;
font-size:42px;
line-height:52px;
text-shadow: 1px 1px 1px rgba(255,255,255,0.6);
font-weight: bold;
}
.sp-title{
text-align: center;
font-family: "Arial" , "微軟正黑體";
color: #fff;
font-size: 36px;
line-height: 46px;
/*text-shadow: 1px 1px 1px rgba(255,255,255,0.6);*/
font-weight: bold;
}
.t-sp{
padding-top: 120px;
text-align: center;
font-family: "Arial" , "微軟正黑體";
font-size: 45px;
line-height: 38px;
text-shadow: 1px 1px 1px rgba(255,255,255,0.6);
font-weight: bold;
}
button.password {
text-align: center;
font-family: "Arial" , "微軟正黑體";
padding: 13px;
font-size: 20px;
background-color: #10c2cc;
border: 2px solid #fff;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
color: #fff;
border-radius: 10px;
cursor: pointer;
border-collapse: separate; !important;
}
button.password:hover{
background-color: #fff;
border: 2px solid #10c2cc;
color: #10c2cc;
}
.dw{
width:100%;
margin-left: auto;
margin-right: auto;
background-color: rgba(255,255,255,0.9);
font-family:  "Arial" , "微軟正黑體";
font-size: 22px;
line-height: 28px;
text-shadow:1px 1px 1px rgba(255,255,255,0.9);
text-align: center;
border-spacing: 0px;
font-weight: bold;
border: 5px solid #FFC0AD;
}
.dw td {
padding:12px;
border-right: 1px solid #FFC0AD;
border-bottom: 1px solid #FFC0AD;
color: #000;
}
.dw tr:nth-child(1) td{
background-color: #ff0000;
border: 1px solid #fff;
color: #fff;
font-weight: bold;
text-shadow:0px 0px 0px rgba(255,255,255,0.9)!important;
}
.dw td:nth-child(3):hover{
background-color: rgba(255,175,122,0.3);
color: #999;
border: 5px solid #fff;
}
.dw td:nth-child(4):hover{
background-color: rgba(255,175,122,0.3);
color: #999;
border: 5px solid #fff;
}
.downlond{
width:850px;
margin-top: 20px;
margin-right: auto;
margin-left: auto;
font-family:  "Arial" , "微軟正黑體";
}
.time{
color: #999;
font-size: 16px;
}
.sp{
width:850px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
background-color: rgba(255,255,255,0.9);
font-family:  "Arial" , "微軟正黑體";
font-size: 22px;
line-height: 28px;
text-shadow:1px 1px 1px rgba(255,255,255,0.9);
text-align: center;
border-spacing: 0px;
border: 5px solid #89E2D8;
font-weight: bold;
}
.sp td {
padding:10px;
border-right: 1px solid #89E2D8;
border-bottom: 1px solid #89E2D8;
color: #000;
}
.sp tr:nth-child(1) td{
background-color: #FDC5B3;
border: 1px solid #fff;
text-align: center;
color: #fff;
text-shadow:0px 0px 0px rgba(255,255,255,0.9)!important;
}
.sp td:nth-child(2){
color:#FF355D;
font-weight: bold;
}
.sp td:nth-child(3){
text-align: left;
padding-left: 25px;
}
.sp td:nth-child(3):hover{
/*background-color: rgba(255,175,122,1.0);*/
color: #0066cc;
font-weight: bold;
border: 5px solid #0066cc;
}
.sp2 {
width: 880px;
margin-left: auto;
margin-right: auto;
table-layout: fixed;
border-spacing: 20px;
font-family:  "Arial" , "微軟正黑體";
}
.sp2 td{
vertical-align: top;
}
.sp2_oc{
width: 100%;
background-color: rgba(255,255,255,0.9);
font-family:  "Arial" , "微軟正黑體";
font-size: 22px;
line-height: 28px;
text-shadow:1px 1px 1px rgba(255,255,255,0.9);
text-align: center;
border-spacing: 0px;
border: 5px solid #89E2D8;
}
.sp2_oc td {
padding:6px;
border-right: 1px solid #89E2D8;
border-bottom: 1px solid #89E2D8;
color: #000;
}
.sp2_oc tr:nth-child(1) td{
background-color: #FDC5B3;
border: 1px solid #fff;
text-align: center;
color: #fff;
font-weight: bold;
text-shadow:0px 0px 0px rgba(255,255,255,0.9)!important;
}
.sp2_oc td:nth-child(2){
text-align: left;
padding-left: 25px;
text-align: center;
}
.sp2_oc td:nth-child(2):hover{
color: #0066cc;
font-weight: bold;
border: 5px solid #0066cc;
}
.box{
width:860px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.box2{
width:880px;
text-align: center;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
.img-responsive {
width:180px;
height: 180px;
border-radius: 180px;
border: 2px solid #fff;
background-color: rgba(255,0,0,0.2);
}
.table_win{
width: 88%;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
border-spacing: 0px;
table-layout: fixed;
}
.table_win td {
text-align: center;
font-family: "Arial" , "微軟正黑體";
border-right: 1px
}
.table_win tr:nth-child(2n) td {
text-align: center;
font-size: 30px;
color: #0033CC;
font-weight: bold;
}
.table_win tr:nth-child(3n) td {
text-align: left;
padding: 0px 0px 0px 35px;
font-size: 18px;
line-height: 32px;
color: #000;
}
.win_bg{
/*background:url(images/bg_3.png) 100% 0 no-repeat;
background-position:center top;
background-repeat: no-repeat;*/
background-color: rgba(255,255,255,0.6);
padding: 50px;
text-align: center;
font-family: "Arial" , "微軟正黑體";
color: #fff;
text-shadow: 1px 1px 1px rgba(255,255,255,0.6);
}
.win_title{
  background-color: #0066cc;
  padding: 50px 30px 10px 30px;
  color: #fff;
  font-weight: bold;
  font-family: "Arial" , "微軟正黑體";
font-size:36px;
line-height:46px;
text-align: center;

}