body {
      margin: 0;
      padding: 0;
      font-family: 'Open Sans', sans-serif,'微軟正黑體';
    }
    .btn{}
    a {
      color: #626262;
    }
    a:hover {
      text-decoration: none;
    }
    #back_to_camera {
      clear: both;
      display: block;
      height: 80px;
      line-height: 40px;
      padding: 20px;
    }
    .fluid_container {
      margin: 0 auto;
      /*height: 400px;*/
      width: 100%;
    }
    .fb_iframe_widget{ text-align: right;}
    #contentbanner{ width: 100% }
    content{ width: 100%;margin: 0px 20px;}
    .editor{     width: 100%;
    margin: auto !important;}
    .editor p{ margin: 10px }
    new,contact{ width: 70%;display: inline-block; margin-right: 5px; }
    contact img{ max-width: 100%;word-break: break-all; }
    .form p b{
      background: #eeeeee;
      width: 20%;
      display: inline-block;
      padding: 10px
    }
    .form p i{ display: inline-block; margin: 20px;}
    .form p i input{ background-color: #ffea00;border: 1px solid #c6c6c6; }
    .form p i input:hover{ background-color: #acacac; }
    .form p,.editor{ border-bottom: 1px dotted #cccccc; margin: 0;}
    .form input{vertical-align: baseline; padding:10px; margin-left: 10px;}
    .form textarea{ padding:10px; margin: 10px;vertical-align: top; width: 470px}
    h3 a{ color: #dfcd06}
    h3 a:hover{ color: #666666}
    top .container a b{ margin: 0 10px;color: #573a8e; }
    h3{
      color: #323232;
      text-align: left;  background-image: url('../images/title.png');  background-position: 20px 5px; background-repeat: no-repeat;
      /* background:url('../images/title.png') no-repeat 20px 5px; */
      padding: 0 0 0 48px;font-size: 19px;
      border-top: 1px #b0b0b0 dotted;
      border-bottom: 1px #b0b0b0 dotted;}
      h3 a{ float: right; font-size: 13px; font-weight: 100; margin-right: 10px; }
      new ul{ margin: 0; }
      new li{ list-style-type: none; }
      new li a{padding: 10px;display: block; }
      new li a:hover{background-color: #acacac; color: #ffffff}
      new li:nth-child(odd){
        background-color:#eaeaea;
      }

      new li:nth-child(even){
        background-color:#f6f6f6;
      }
      banner{ width: 29%; display: inline-block; vertical-align: top;text-align: right;}
      banner img{
        margin: 3px 0;
        border: solid 1px #bababa;
      }
      a img:hover{
        opacity:0.4;
        filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
      }
      .fb_iframe_widget{  }
      understand {
        display: block;
        margin: 40px 0;}
        understand img{ border: solid 5px #eeeeee;  margin: 5px 1px ; width:235px; height: 175px  }
        .details img { border: solid 5px #eeeeee;  margin: 5px 1px ; }
        /* .details_p img{width: 235px; height: 180px;  margin: 5px 1px; border: solid 5px #eeeeee; } */
        .details_p a{    display: inline-block;    float: left;
          width: 245px;
          height: 245px;
          overflow: hidden;
          vertical-align: top;
          margin: 5px 1px;
          border: solid 5px #eeeeee;
          background: #ffffff;}
          .details_p a:hover{    border: solid 5px #ffea00;}
          .editor_img img{ min-width:770px}
          .editor b,.editor img{ display:inline-block}
          .editor b{ width:50%; margin:0 15px}
          .editor i img{ margin:5px 15px}
          .editor i{width:45%; vertical-align: top; display: inline-block;}
          .editor h1{ font-size:21px}
          .details_n a,.details_s a{margin: 0 21px; display: inline-block;vertical-align: top; }
          .details_n img { border: solid 5px #eeeeee; width: 320px; height: 240px; margin: 5px 1px }
          .details_s img { border: solid 5px #eeeeee; width: 290px; height: 180px; margin: 5px 1px }
          .details_n h1,.details_s h1{ font-size:17px;    width: 350px;
            line-height: 20px;}
            .details .editor img {border: none; max-width: 100%; }
            .details .editor img:hover{border: none;}
            understand img:hover{border:solid 5px #ffea00}
            .details p{ margin: 20px }
            .details div a,.details_n div a,.details_p div a,.details_s div a{margin: 20px 0;
              width: 20px;
              height: 20px;
              display: inline-block;
              border: solid 1px #898989;
              font-family: monospace;
            }
            .details_n p a,.details_s p a{ margin:0}
            .details div a:hover,.details_n div a:hover,.details_p div a:hover,.details_s div a:hover{ background-color: #acacac;color: #deda18;}
            footer .container{ border-top: solid 1px #b0b0b0; padding: 20px}
            a,
            a:focus,
            a:active,
            a:hover,
            object,
            embed {
              outline: none;
              text-decoration: none;
            }
            :-moz-any-link:focus {
              outline: none;
            }
            input::-moz-focus-inner {
              border: 0;
            }

            :focus { outline: 0; }



            .brand { padding: 10px 40px !important; }

            .navbar { background: #c0c0c0; width: 100%;}

/* MEGA MENU STYLE
********************************/ 
.fb_iframe_widget{
  width: 95%;
  margin: 10px 0;
}
top{ width: 100%; display:block;height: 60px; 
  background-color:#939393; 
  /* background-color:#1472ac;*/
  padding: 20px 0;}
  top .container{ color: #6b6868 }
  .topp{float: right; margin: 20px;}
  .topp b{ margin:0 10px; font-weight: normal; font-size: 21px;}
  .topp a{ display: inline-block; text-align: center; padding: 0 20px;border-right: solid 1px #979797; color: #573a8e;}
  .mega-menu {
    padding: 10px 0px ! important;
    width: 530px;
    border-radius: 0;
    margin-top: 0px;
  }
  .camera_pag{ display: none }
  .mega-menu li {
  /*display: inline-block;
  float: left; */
  list-style-type: none;
  font-size: 0.94rem;
  padding: 3px 0px;
}

.mega-menu li.mega-menu-column {
  margin:0 6px;
  width: 150px;    float: left;
}
.mega-menu li.width {
  width: 300px;
}

.mega-menu .nav-header {
  background: #ffea00;
  padding: 5px !important;
  margin: 10px 0 5px 0;
  display: inline-block;
  width: 94%;
  border-bottom: 1px solid #ddd;
}

.mega-menu img { padding-bottom: 10px; display: block;margin: auto; width: 150px}

/* Disable Toggle style
********************************/  

/* Dropdown Toggle on style */



.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
  background: inherit; /* Set to inherit when using mouse hover to open dropdown */
  color: inherit;
}

/* Toggle off style */



.navbar .nav li.dropdown.open.active > .dropdown-toggle,
.navbar .nav > li.dropdown > a:focus {
  background: inherit;
  color: inherit;
}

/* Toggle hover */



.navbar .nav li.dropdown > .dropdown-toggle:hover,
.navbar .nav li.dropdown.open > .dropdown-toggle:hover { background-color:#acacac; color: #ffffff }

/* Toggle caret*/



.navbar .nav li.dropdown > .dropdown-toggle .caret { border-bottom-color:;
 border-top-color:;
}

/* Toggle caret hover */



.navbar .nav li.dropdown > a:hover .caret,
.navbar .nav li.dropdown > a:focus .caret {
  border-bottom-color: #333;
  border-top-color: #333;
}

/* Toggle caret active */



.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
  border-bottom-color: #333;
  border-top-color: #333;
}

/* Hover style
********************************/ 



.navbar .nav > li > a,
.mega-menu a {
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  /* -webkit-transform: translate3d(0, 0, 0); Webkit Hardware Acceleration*/ 
  -webkit-backface-visibility: hidden; /* Safari Flicker Fix #2 */
  -webkit-transform: translateZ(0);
}
.treeview-container{ width: 20% ;display: inline-block; margin-top: 10px;}
.details,.details_n{ width: 79%; display: inline-block; vertical-align: top; }
.details_p{    text-align: center; width: 79%;display: inline-block; vertical-align: top;}
.details_s{ width: 100%; display: inline-block; vertical-align: top; text-align: center;}
.editor img{ }

input{border-radius:0; vertical-align: top; display: inline-block; width: 68%}

@media (max-width: 768px){
  
  .form textarea{ padding: 10px 0; margin: 10px 0 }
  .editor img{ margin: 0 }
  .details_p{ width: 100% }
  h3{ }
  .mega-menu img{ display: none }
  .topp a{margin-top: 40px;}
  .treeview input[type="text"]{margin: 0; width: 80%; padding: 4px}
  input[type="text"]{margin: 5px 0; width: 100%; padding: 15px}
  new,.treeview-container, .details,contact{ width: 100%; margin: auto }
  textarea{width: 100%!important;}
  .form p b{ width: 100% ; padding: 10px 0px 10px 10px}
  banner{ width: 100%;text-align: center; }
  understand{ text-align: center;} 
  .topp {
    position: absolute;
    top: 0;
    right: 0;
  }
  understand img{margin: 10px 0;}
  .mega-menu li.mega-menu-column{ 
    width: 100%;
  }
  .no{ display: none!important}
  .mega-menu li.mega-menu-column {
    margin:0;
  }
}
@media (max-width: 978px){
  .topp{float: right; margin: 0px;}
  .fb_iframe_widget{ text-align: center }
  .details p{ text-align: center;}
  .editor b{ width:90%;margin: 0;}
  .editor_img img{min-width:100%;    margin: 0;}

  banner img{ 
   float: left;
   width: 229px;
   margin: 5px; }
   .nav-collapse .nav>li {}
   new{ width: 100% }
   banner{ width: 100% }
.details_n{ width: 100% }
.details_n a{    margin: 0;}
.details_n img{ width: 100%; margin: 0 }
.details_n img,understand img, .details img{    border-left: solid 0px #eeeeee; border-right: solid 0px #eeeeee;}
 }
 @media (min-width: 978px){

 }
 @media (min-width: 1200px){

 }
 @media (max-width: 468px){

  .navbar { background: #c0c0c0; width: 105%;}
  banner img{ width: 100%; margin:5px 0}

  top img{margin: 0 10px}

}