@charset "UTF-8";

a {
 color: #09f;display: block;
}
a:hover {
 text-decoration: none;
}
#back_to_camera {
 clear: both;display: block;
 display: block;
 height: 80px;
 line-height: 40px;
 padding: 20px;
}
ul,li,ol{ padding: 0;margin: 0 }
h1{ font-size: 31px;}
.stress{ color:#F00; font-size:25px !important}
.callimg{ width:20px !important}
.w30 td{ width:30%}
tr,td{ vertical-align:top}

html {
  overflow-y: scroll;
}
p{ margin: 0 20px; }
/*
Setup a basic body
*/

body { line-height:30px;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: Arial,"微軟正黑體";
  font-size: 17px;
}
.fluid_container{ min-width: 100%; margin: 110px 0 0 0;
 max-width: 1000px;
 width: 100%;
}
.fluid_container2{ min-width: 100%; margin: 70px 0 0 0;
 max-width: 1000px;
 width: 100%;height: 1px;
}
.flex-nav-next{text-indent: 9999px;}
.flex-nav-prev{text-indent: -9999px;}
/*
Header is relative so z-index: 1 guarantees always displayed on top
*/
header { height:70px;
  background-color: #FFF;
  text-decoration: none;
  position: fixed;
  width: 100%;
  z-index: 5;

/*    -webkit-box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);*/
}
i{
  font-style: normal;
  width: 90%;
  margin: 0px auto;
  display: block;}
  #btn2{
    display: inline-block;
    width: 100%;
  }
  #btn2 ol li{
    display: inline-block;
    width: 25%;
    background: #233453;

    float: left; 
    margin: 0;
    text-align: center;
  }

  #btn2 ol li a{  color: #eeeeee; text-decoration: blink; padding: 5px 0;}
  #btn2 ol li a:hover{

    background: #2470a6;
  }
/*
using background color is important to cover the menu
position absolute isset to cover the whole viewport
*/
#content {
  background-color: #FFFFFF;

  position: relative;
  width: 100%;
  height: 100%;
  z-index:1

}
.sp{ font-size: 15px; }

/*
the hamburger button with a little gradient effekt
*/
#hamburger {
  z-index: 1;
  cursor: pointer;
  display: inline-block;
  height: 20px;
  padding: 22px 10px;
  position: relative;
  width: 35px;
  right: 0; 
  float: right; 
}
.arrow img{ width: 40px }
#top{float: right;}
/*
The white stripes in the hamburger button
*/
#hamburger div {
  background-color: #001089;
  border: 1px solid #001089;
  border-radius: 10px;
  height: 2px;
  margin-top: 5px;
  width: 90%;
}


/*
Style the navigation menu
*/
nav ul {
  list-style: none;
  margin: 0;
  width: 100%;
  padding: 0;
}

nav li {
  position: relative;
  font-size: 1em;
  font-weight: bold;
  border-bottom: 1px solid #222222;
  border-top: 1px solid #444444;
  padding: 8px 15px;

}

nav li a {
  color: #fff;
  text-decoration: none;
}

/*
The Layer that will be layed over the content
so that the content is unclickable while menu is shown
*/
#contentLayer {
  display: none;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 30%;
  z-index: 5;
}








#top-bar{
  height:57px;width: 100%;background-color: #233453;
  position:fixed;
  top:-65px;

  /* CSS3 陰影*/
  -webkit-box-shadow: 0px 3px 5px #A3A3A3;
  -moz-box-shadow: 0px 3px 5px #A3A3A3;
  box-shadow: 0px 3px 5px #A3A3A3;	 
}
/*
Setup a basic body
*/

#top .arrow a,#top-bar .arrow a{    float: right;
  display: inline-block;
  width: 10%; text-align:center; z-index:1;
  height: 35px;
  margin: 0;
  color: #fff;
  font-size: 23px;
  padding: 15px 5px;
}
.box h1 img{ vertical-align:middle; width:40px; margin: 0 0 0 0; height: 30px}
.boxtitle{background:url('../img/arrow2.png')  no-repeat left  center;padding-left: 30px;}
.boxtitle h1{ font-size: 27px; }
.boxtitle b{ font-size: 19px; display: inline-block;}
.box h1 b{ background:#00549e; display:inline-block;width: 80%;color: #FFF; font-size:19px;padding:10px; height: 30px; letter-spacing: 2px;}
.box h1 i{background:url('../img/arrow2.png')  no-repeat; display: inline-block; width: 10%; height: 50px;    vertical-align: top;}
.box h2 b{ display:inline-block;width: 80%;    color: #004ea2; font-size:21px;padding: 5px 10px;}
.box h2 i{background:url('../img/arrow3.png')  no-repeat; display: inline-block; width: 10%; height: 50px;    vertical-align: top;}
.box h2{ color:#fff; font-size:17px;}
.box h2 img{ width:30px;}
th,td{ text-align:left; padding:5px; width: 50%;}
#content #btn ol li{    display: inline-block;
  min-width: 50%;
  margin: 0px -2px;}
  #content ol li p{    border: solid 1px #b2b2b2;
    margin: 0;
    max-width: 94%;
    padding: 5%;
    background: #eeeeee;
  }
  #content ol li p b{ display: block;word-break: normal;font-size: 19px;}
  #content #btn ol li a {border: solid 1px #b2b2b2; margin: 0;width: 100%; padding: 15px 0; font-size: 19px;
    text-align: center;
    background: #233453;
    color: #eeeeee;
    text-decoration: none;}
    #content #btn ol li a:hover {border: #199fd3 solid 1px; background: #2470a6;}
    #content ol li .img{vertical-align: middle; max-width:30%; background: #eeeeee; display: inline-block;}
    ol li img{  width:100%; min-height: 120px; }
    #container #content .box .p li{ width:90%}
    table{ margin-bottom:30px;}
    .title{text-align:center !important; background:#fff  ; color:#00549e;}
    .title2{ background: #4da1d5;}
    .title3{ background: #eee;}
    .title4{ background: #c5c5c5;}
    .title5{ background: #62D5B5;}
    .titlep2{ background: #b3dbff;}
    .titlep3{ background: #dddddd;}
    .titlep4{ background: #eee;}
    .titlep5{ background: #97f0d7;}
    .boxx{ padding-bottom: 10px;}
    .boxx p{ margin-left:25px;  margin: 0 0 10px 10px;}
    h3{ 
      
      text-align: left;
      color: #00549e;
      margin: 5px 0 5px 0;
    }
    new ul,new2 ul{ width: 100% }
    new li,new2 li,ol{ list-style: none; }
    new li:nth-child(odd){ }
    new li:nth-child(even){ }
    hr{ border: #00549e 1px dashed;}
    /* new2 li:nth-child(odd){ background: #4da1d5;} */
    /* new2 li:nth-child(even){ background: #b3dbff;} */
    new .box li:nth-child(odd){ background: #ffffff;color:#000000}
    /* new .box li:nth-child(even){ background: #f2f2f2;color:#000000} */
    new li b{
      width: 100%;
      color: #d70f0f;
      display: inline-block;
      font-size: 19px;}
      new li p{  display: inline-block;}
      new .box li p{  display: block; color:#000000}
      new .box li a{ color:#000000 !important;text-decoration: none; padding: 0 10px;}
      new .box li a:hover{ background:#9CF}
      new .box li{ margin: -10px 0;}
      new2 li b{ width: 230px; display: inline-block;}
      new2 li p{  width: 100%; display: inline-block;}

/*
The navigation container in the background
*/
nav {width: 70%;
  opacity: 0 ;
  right: 0px;
  top: 0px;
  position: fixed ;
  z-index: 0;
  height: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  background: #3e3c3d;
  background: -moz-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e3c3d), color-stop(100%, #2d2c2d));
  background: -webkit-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
  background: -o-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
  background: -ms-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
  background: linear-gradient(to bottom, #3e3c3d 0%, #2d2c2d 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3e3c3d', endColorstr='#2d2c2d', GradientType=0);
}


/*
Style the navigation menu
*/
nav ul {
  list-style: none;
  margin: 0;
  width: 100%;
  padding: 0;
}

nav li {
  position: relative;
  font-size: 1em;
  font-weight: bold;
  border-bottom: 1px solid #222222;
  border-top: 1px solid #444444;

}

nav li a {
	display:block;
	padding: 5px;
  color: #fff;
  text-decoration: none;
}
nav li a:hover{ color:#9EBEFF}
.arrow{ position: relative; right:0; top:15px;float: right; width: 35%;}
.arrowimg{ position: absolute;top: 53px;right: 0;width: 25%;}
nav li a img{ vertical-align:sub; margin-right:5px;}
/*
The Layer that will be layed over the content
so that the content is unclickable while menu is shown
*/
.arrow a{display: inline-block; width: 30%; text-align: center}
#contentLayer {
  display: none;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute; left:0;
  right: 0;
  top: 0;
  z-index: 5;
}
.line{
  background: #00a93b;
}
.fb{
  background: #4563c4;
}
.ph{
  background: #dc1581;
}
.line,.fb,.ph{
 border-radius: 10px;
 width: 45%;
 margin: 20px 0;
 text-decoration: blink;   font-size: 29px;
}

.boxicon a b{ text-align: center; margin-top: 15px;}
.box a{ display:block;  color: #ffffff;}
.boxicon a{ display: inline-block;  color: #ffffff;z-index: 0}
.boxicon a img{vertical-align: middle;display: inline-block; }
#footer{ width:100%; text-align:center; background:#233453;color:#fff; padding: 10px 0; font-size: 13px; margin: 20px 0 0 0 }
#footer p:first-child{ text-align:left}
.logo{ display:inline-block; width:130px;position: absolute; left:10px; top:12px;}
#footer p{ display:inline-block; margin:3px; vertical-align:top}
#footer p b{ display:block}
#footer p b img{ vertical-align:top; margin-right:3px; width:15px; height:15px;}

.fc{width: 100%;text-align: center;
  display: block;
  margin: auto;}
  .box{ width:98%; margin:50px auto;}
  .fbox{ width:70%; border-radius: 3px; border:solid 1px #999999; padding:10px 5px;}
  .options{width:90%; border-top-left-radius: 3px; border-top-right-radius: 3px; border:solid 1px #999999; padding:10px 5px;margin-left: 25px; margin: 0 0 10px 10px;}
  .p{font-size: 16px;
    width: 95%;
    display: block;
    margin-left: 2%;}
    #top .arrow h1 img{ width:25px; padding: 8px;}
    #content .box h2 b{ display:inline-block; vertical-align: top; width:80%}
    #footer p a img{ width:45%; height:45%}
    #content .box .p b{ display: inline-block; width:75%; margin:auto; vertical-align:top; font-weight:100}
    .important{ color:#933; font-size:24px; font-weight:bold}
    .btn{ border-top: 1px solid #96d1f8;
     background: #1a4d9b;
     padding: 10px 20px;
     -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
     border-radius: 8px;
     -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
     -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
     box-shadow: rgba(0,0,0,1) 0 1px 0;
     text-shadow: rgba(0,0,0,.4) 0 1px 0;
     color: white;
     font-size: 19px; font-weight:bold;
     text-decoration: none;
     vertical-align: middle; margin:20px auto;    display: block;
     text-align: center;width: 85%;}
.btn3{ border-top: 1px solid #f89696;
     background: #c01717;
     padding: 10px 20px;
     -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
     border-radius: 8px;
     -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
     -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
     box-shadow: rgba(0,0,0,1) 0 1px 0;
     text-shadow: rgba(0,0,0,.4) 0 1px 0;
     color: white;
     font-size: 19px; font-weight:bold;
     text-decoration: none;
     vertical-align: middle; margin:20px auto;    display: block;
     text-align: center;width: 85%;}     
     .btn:hover{   background: #65a9d7;}
    .btn3:hover{   background: #d76565;}
     .btn2{    position: absolute; border-bottom:solid 1px #FFFFFF;
      display: inline-block;
      top: 53px;
      background: #ff0000; width: 100%;
    }
    i ol li{    list-style-type: decimal;    margin: 0 30px;}

    #top .btn2 a{ text-decoration:none; cursor:pointer;
     font-size: 21px; font-weight:bold;
     padding: 10px 0;
     margin: 0;
     width: 25%;
     display: inline-block;}
     .box ol li{ margin: 10px 0 }
     .box ol li h3{ display: inline-block;    border-bottom: solid 1px #d50000;}
     @media (max-width: 768px){ 
      .boxicon a img{ width: 20% }
      .line,.fb,.ph{
       border-radius: 5px;

       margin: 20px 0;
       text-decoration: blink;   font-size: 1em;
     }
     #content ol li .img{
      vertical-align: top; }
    }