body{ padding:0; margin:0; background:#090C0F; color:#fff; font-family:Arial, Helvetica, sans-serif, 微軟正黑體; font-weight:bold; line-height:1.2; font-size:20px; font-weight:bold; position:relative;}
body:before{ content:""; background:url(bg_top.png) no-repeat; position:absolute; display:block; right:0; top:0; width:300px; height:300px; background-size:contain;}
body:after{ content:""; background:url(bg_bottom.png) no-repeat; position:absolute; display:block; left:0; bottom:0; width:365px; height:340px; background-size:contain;}
.page{ padding:50px 0;}
a{ color:#27AAE1; word-wrap:break-word;}
.page .container{ max-width:910px; margin:0 auto;}
.header{ padding-bottom:50px;}
.header h3{ text-align:center; margin:0;}
.header img{ width:100%; height:auto;}
.content .txt{ display:flex; justify-content:center; flex-direction:column; align-items:center;}
.content .txt p{ width:100%; margin:0 0 20px 0; font-size:18px;}
.form{ width:70%; margin:0 auto; padding:25px 0;}
.form .row{ display:flex; justify-content:center; align-items:center; margin-bottom:10px;}
.form .row label{ width:45%; text-align:right; padding-right:10px;}
.form .row .group{ width:55%; display:flex; align-items:center;}
.form .row .group input[type="text"], .form .row .group input[type="number"]{ width:100%; padding:10px; width:calc(100% - 20px);  line-height:22px; height:22px; font-size:18px; border-radius:1px; border:none;}
.form .row .group input[type="checkbox"]{ margin-right:10px; width:30px; height:30px; margin-left:0;}
.form .row button{ background:url(bg_button.jpg) no-repeat; font-size:26px; width:280px; height:50px; border:none; color:#231F20; font-weight:bold; line-height:50px; padding:0; margin:25px 0; cursor:pointer;}
.form .row button:disabled{ opacity:0.6; cursor:default; filter:grayscale(1);}
.footer{ font-size:14px; text-align:center;}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  right: 0;
  top: 0;
  bottom: 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.6); /* Black w/ opacity */
  color: #000;
  font-size: 14px;
  padding: 10% 0;
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  box-sizing: border-box;
}
.modal-content .txt{
    height: calc(100% - 40px);
    overflow-y: auto;
}
/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.en .form .row .group, 
.en .form .row label, 
.en .content .txt
{ font-size:15px;}

.en .form .row label{ width:60%;}

.en .form .row .group input[type="text"], 
.en .form .row .group input[type="number"]
{ font-size:13px;}
@media only screen and (max-width:910px){
.page .container{ max-width:90%;}
.form .row{ flex-direction:column; margin-bottom:20px;}
.form .row label, .en .form .row label{ width:100%; text-align:left; margin-bottom:10px;}
.form .row label.empty{ display:none;}
.form .row .group{ width:100%;}
.form .row button{ margin:0;}
.modal-content { height: 80%;}
}
@media only screen and (max-width:767px){
body{ font-size:18px;}
body:before{ content:""; background:url(bg_top.png) no-repeat; width:200px; height:200px; background-size:contain;}
body:after{ content:""; background:url(bg_bottom.png) no-repeat; width:180px; height:170px; background-size:contain;}
.page{ padding:50px 0 100px 0;}
.page .container{ width:95%;}
.content .txt > div{ margin-bottom:10px;}
.form{ width:100%;}
}