/* ==============================================================
email:         web$e-creative.tw
website:       http://e-creative.tw
 ================================================================*/
/* ==============================================================
    _myBootcss
 ================================================================*/
/* ======    clear   ====== */
@import url('style.css');
@import url(plugins.css);
@import url(animate.css);
button,
input,
select,
textarea {
  font-size: 100%;
  margin: 0;
}

button,
input {
  line-height: normal;
  outline: 0;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  nowhitespace: afterproperty;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

button {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
}

figure,
address {
  padding: 0;
  margin: 0;
}

* {
  outline: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

ul, li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.row {
  margin-right: -15px;
  margin-left: -15px;
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}

.col-xs-12 {
  width: 100%;
}

.col-xs-11 {
  width: 91.66666667%;
}

.col-xs-10 {
  width: 83.33333333%;
}

.col-xs-9 {
  width: 75%;
}

.col-xs-8 {
  width: 66.66666667%;
}

.col-xs-7 {
  width: 58.33333333%;
}

.col-xs-6 {
  width: 50%;
}

.col-xs-5 {
  width: 41.66666667%;
}

.col-xs-4 {
  width: 33.33333333%;
}

.col-xs-3 {
  width: 25%;
}

.col-xs-2 {
  width: 16.66666667%;
}

.col-xs-1 {
  width: 8.33333333%;
}

.col-xs-pull-12 {
  right: 100%;
}

.col-xs-pull-11 {
  right: 91.66666667%;
}

.col-xs-pull-10 {
  right: 83.33333333%;
}

.col-xs-pull-9 {
  right: 75%;
}

.col-xs-pull-8 {
  right: 66.66666667%;
}

.col-xs-pull-7 {
  right: 58.33333333%;
}

.col-xs-pull-6 {
  right: 50%;
}

.col-xs-pull-5 {
  right: 41.66666667%;
}

.col-xs-pull-4 {
  right: 33.33333333%;
}

.col-xs-pull-3 {
  right: 25%;
}

.col-xs-pull-2 {
  right: 16.66666667%;
}

.col-xs-pull-1 {
  right: 8.33333333%;
}

.col-xs-pull-0 {
  right: auto;
}

.col-xs-push-12 {
  left: 100%;
}

.col-xs-push-11 {
  left: 91.66666667%;
}

.col-xs-push-10 {
  left: 83.33333333%;
}

.col-xs-push-9 {
  left: 75%;
}

.col-xs-push-8 {
  left: 66.66666667%;
}

.col-xs-push-7 {
  left: 58.33333333%;
}

.col-xs-push-6 {
  left: 50%;
}

.col-xs-push-5 {
  left: 41.66666667%;
}

.col-xs-push-4 {
  left: 33.33333333%;
}

.col-xs-push-3 {
  left: 25%;
}

.col-xs-push-2 {
  left: 16.66666667%;
}

.col-xs-push-1 {
  left: 8.33333333%;
}

.col-xs-push-0 {
  left: auto;
}

.col-xs-offset-12 {
  margin-left: 100%;
}

.col-xs-offset-11 {
  margin-left: 91.66666667%;
}

.col-xs-offset-10 {
  margin-left: 83.33333333%;
}

.col-xs-offset-9 {
  margin-left: 75%;
}

.col-xs-offset-8 {
  margin-left: 66.66666667%;
}

.col-xs-offset-7 {
  margin-left: 58.33333333%;
}

.col-xs-offset-6 {
  margin-left: 50%;
}

.col-xs-offset-5 {
  margin-left: 41.66666667%;
}

.col-xs-offset-4 {
  margin-left: 33.33333333%;
}

.col-xs-offset-3 {
  margin-left: 25%;
}

.col-xs-offset-2 {
  margin-left: 16.66666667%;
}

.col-xs-offset-1 {
  margin-left: 8.33333333%;
}

.col-xs-offset-0 {
  margin-left: 0;
}

.min-sm-size .col-sm-1,
.min-sm-size .col-sm-2,
.min-sm-size .col-sm-3,
.min-sm-size .col-sm-4,
.min-sm-size .col-sm-5,
.min-sm-size .col-sm-6,
.min-sm-size .col-sm-7,
.min-sm-size .col-sm-8,
.min-sm-size .col-sm-9,
.min-sm-size .col-sm-10,
.min-sm-size .col-sm-11,
.min-sm-size .col-sm-12 {
  float: left;
}

.min-sm-size .col-sm-12 {
  width: 100%;
}

.min-sm-size .col-sm-11 {
  width: 91.66666667%;
}

.min-sm-size .col-sm-10 {
  width: 83.33333333%;
}

.min-sm-size .col-sm-9 {
  width: 75%;
}

.min-sm-size .col-sm-8 {
  width: 66.66666667%;
}

.min-sm-size .col-sm-7 {
  width: 58.33333333%;
}

.min-sm-size .col-sm-6 {
  width: 50%;
}

.min-sm-size .col-sm-5 {
  width: 41.66666667%;
}

.min-sm-size .col-sm-4 {
  width: 33.33333333%;
}

.min-sm-size .col-sm-3 {
  width: 90%;
}

.min-sm-size .col-sm-2 {
  width: 16.66666667%;
}

.min-sm-size .col-sm-1 {
  width: 8.33333333%;
}

.min-sm-size .col-sm-pull-12 {
  right: 100%;
}

.min-sm-size .col-sm-pull-11 {
  right: 91.66666667%;
}

.min-sm-size .col-sm-pull-10 {
  right: 83.33333333%;
}

.min-sm-size .col-sm-pull-9 {
  right: 75%;
}

.min-sm-size .col-sm-pull-8 {
  right: 66.66666667%;
}

.min-sm-size .col-sm-pull-7 {
  right: 58.33333333%;
}

.min-sm-size .col-sm-pull-6 {
  right: 50%;
}

.min-sm-size .col-sm-pull-5 {
  right: 41.66666667%;
}

.min-sm-size .col-sm-pull-4 {
  right: 33.33333333%;
}

.min-sm-size .col-sm-pull-3 {
  right: 25%;
}

.min-sm-size .col-sm-pull-2 {
  right: 16.66666667%;
}

.min-sm-size .col-sm-pull-1 {
  right: 8.33333333%;
}

.min-sm-size .col-sm-pull-0 {
  right: auto;
}

.min-sm-size .col-sm-push-12 {
  left: 100%;
}

.min-sm-size .col-sm-push-11 {
  left: 91.66666667%;
}

.min-sm-size .col-sm-push-10 {
  left: 83.33333333%;
}

.min-sm-size .col-sm-push-9 {
  left: 75%;
}

.min-sm-size .col-sm-push-8 {
  left: 66.66666667%;
}

.min-sm-size .col-sm-push-7 {
  left: 58.33333333%;
}

.min-sm-size .col-sm-push-6 {
  left: 50%;
}

.min-sm-size .col-sm-push-5 {
  left: 41.66666667%;
}

.min-sm-size .col-sm-push-4 {
  left: 33.33333333%;
}

.min-sm-size .col-sm-push-3 {
  left: 25%;
}

.min-sm-size .col-sm-push-2 {
  left: 16.66666667%;
}

.min-sm-size .col-sm-push-1 {
  left: 8.33333333%;
}

.min-sm-size .col-sm-push-0 {
  left: auto;
}

.min-sm-size .col-sm-offset-12 {
  margin-left: 100%;
}

.min-sm-size .col-sm-offset-11 {
  margin-left: 91.66666667%;
}

.min-sm-size .col-sm-offset-10 {
  margin-left: 83.33333333%;
}

.min-sm-size .col-sm-offset-9 {
  margin-left: 75%;
}

.min-sm-size .col-sm-offset-8 {
  margin-left: 66.66666667%;
}

.min-sm-size .col-sm-offset-7 {
  margin-left: 58.33333333%;
}

.min-sm-size .col-sm-offset-6 {
  margin-left: 50%;
}

.min-sm-size .col-sm-offset-5 {
  margin-left: 41.66666667%;
}

.min-sm-size .col-sm-offset-4 {
  margin-left: 33.33333333%;
}

.min-sm-size .col-sm-offset-3 {
  margin-left: 25%;
}

.min-sm-size .col-sm-offset-2 {
  margin-left: 16.66666667%;
}

.min-sm-size .col-sm-offset-1 {
  margin-left: 8.33333333%;
}

.min-sm-size .col-sm-offset-0 {
  margin-left: 0;
}

.min-md-size .col-md-1,
.min-md-size .col-md-2,
.min-md-size .col-md-3,
.min-md-size .col-md-4,
.min-md-size .col-md-5,
.min-md-size .col-md-6,
.min-md-size .col-md-7,
.min-md-size .col-md-8,
.min-md-size .col-md-9,
.min-md-size .col-md-10,
.min-md-size .col-md-11,
.min-md-size .col-md-12 {
  float: left;
}

.min-md-size .col-md-12 {
  width: 100%;
}

.min-md-size .col-md-11 {
  width: 91.66666667%;
}

.min-md-size .col-md-10 {
  width: 83.33333333%;
}

.min-md-size .col-md-9 {
  width: 75%;
}

.min-md-size .col-md-8 {
  width: 66.66666667%;
}

.min-md-size .col-md-7 {
  width: 58.33333333%;
}

.min-md-size .col-md-6 {
  width: 50%;
}

.min-md-size .col-md-5 {
  width: 41.66666667%;
}

.min-md-size .col-md-4 {
  width: 33.33333333%;
}

.min-md-size .col-md-3 {
  width: 25%;
}

.min-md-size .col-md-2 {
  width: 16.66666667%;
}

.min-md-size .col-md-1 {
  width: 8.33333333%;
}

.min-md-size .col-md-pull-12 {
  right: 100%;
}

.min-md-size .col-md-pull-11 {
  right: 91.66666667%;
}

.min-md-size .col-md-pull-10 {
  right: 83.33333333%;
}

.min-md-size .col-md-pull-9 {
  right: 75%;
}

.min-md-size .col-md-pull-8 {
  right: 66.66666667%;
}

.min-md-size .col-md-pull-7 {
  right: 58.33333333%;
}

.min-md-size .col-md-pull-6 {
  right: 50%;
}

.min-md-size .col-md-pull-5 {
  right: 41.66666667%;
}

.min-md-size .col-md-pull-4 {
  right: 33.33333333%;
}

.min-md-size .col-md-pull-3 {
  right: 25%;
}

.min-md-size .col-md-pull-2 {
  right: 16.66666667%;
}

.min-md-size .col-md-pull-1 {
  right: 8.33333333%;
}

.min-md-size .col-md-pull-0 {
  right: auto;
}

.min-md-size .col-md-push-12 {
  left: 100%;
}

.min-md-size .col-md-push-11 {
  left: 91.66666667%;
}

.min-md-size .col-md-push-10 {
  left: 83.33333333%;
}

.min-md-size .col-md-push-9 {
  left: 75%;
}

.min-md-size .col-md-push-8 {
  left: 66.66666667%;
}

.min-md-size .col-md-push-7 {
  left: 58.33333333%;
}

.min-md-size .col-md-push-6 {
  left: 50%;
}

.min-md-size .col-md-push-5 {
  left: 41.66666667%;
}

.min-md-size .col-md-push-4 {
  left: 33.33333333%;
}

.min-md-size .col-md-push-3 {
  left: 25%;
}

.min-md-size .col-md-push-2 {
  left: 16.66666667%;
}

.min-md-size .col-md-push-1 {
  left: 8.33333333%;
}

.min-md-size .col-md-push-0 {
  left: auto;
}

.min-md-size .col-md-offset-12 {
  margin-left: 100%;
}

.min-md-size .col-md-offset-11 {
  margin-left: 91.66666667%;
}

.min-md-size .col-md-offset-10 {
  margin-left: 83.33333333%;
}

.min-md-size .col-md-offset-9 {
  margin-left: 75%;
}

.min-md-size .col-md-offset-8 {
  margin-left: 66.66666667%;
}

.min-md-size .col-md-offset-7 {
  margin-left: 58.33333333%;
}

.min-md-size .col-md-offset-6 {
  margin-left: 50%;
}

.min-md-size .col-md-offset-5 {
  margin-left: 41.66666667%;
}

.min-md-size .col-md-offset-4 {
  margin-left: 33.33333333%;
}

.min-md-size .col-md-offset-3 {
  margin-left: 25%;
}

.min-md-size .col-md-offset-2 {
  margin-left: 16.66666667%;
}

.min-md-size .col-md-offset-1 {
  margin-left: 8.33333333%;
}

.min-md-size .col-md-offset-0 {
  margin-left: 0;
}

.min-lg-size .col-lg-1,
.min-lg-size .col-lg-2,
.min-lg-size .col-lg-3,
.min-lg-size .col-lg-4,
.min-lg-size .col-lg-5,
.min-lg-size .col-lg-6,
.min-lg-size .col-lg-7,
.min-lg-size .col-lg-8,
.min-lg-size .col-lg-9,
.min-lg-size .col-lg-10,
.min-lg-size .col-lg-11,
.min-lg-size .col-lg-12 {
  float: left;
}

.min-lg-size .col-lg-12 {
  width: 100%;
}

.min-lg-size .col-lg-11 {
  width: 91.66666667%;
}

.min-lg-size .col-lg-10 {
  width: 83.33333333%;
}

.min-lg-size .col-lg-9 {
  width: 75%;
}

.min-lg-size .col-lg-8 {
  width: 66.66666667%;
}

.min-lg-size .col-lg-7 {
  width: 58.33333333%;
}

.min-lg-size .col-lg-6 {
  width: 50%;
}

.min-lg-size .col-lg-5 {
  width: 41.66666667%;
}

.min-lg-size .col-lg-4 {
  width: 33.33333333%;
}

.min-lg-size .col-lg-3 {
  width: 25%;
}

.min-lg-size .col-lg-2 {
  width: 16.66666667%;
}

.min-lg-size .col-lg-1 {
  width: 8.33333333%;
}

.min-lg-size .col-lg-pull-12 {
  right: 100%;
}

.min-lg-size .col-lg-pull-11 {
  right: 91.66666667%;
}

.min-lg-size .col-lg-pull-10 {
  right: 83.33333333%;
}

.min-lg-size .col-lg-pull-9 {
  right: 75%;
}

.min-lg-size .col-lg-pull-8 {
  right: 66.66666667%;
}

.min-lg-size .col-lg-pull-7 {
  right: 58.33333333%;
}

.min-lg-size .col-lg-pull-6 {
  right: 50%;
}

.min-lg-size .col-lg-pull-5 {
  right: 41.66666667%;
}

.min-lg-size .col-lg-pull-4 {
  right: 33.33333333%;
}

.min-lg-size .col-lg-pull-3 {
  right: 25%;
}

.min-lg-size .col-lg-pull-2 {
  right: 16.66666667%;
}

.min-lg-size .col-lg-pull-1 {
  right: 8.33333333%;
}

.min-lg-size .col-lg-pull-0 {
  right: auto;
}

.min-lg-size .col-lg-push-12 {
  left: 100%;
}

.min-lg-size .col-lg-push-11 {
  left: 91.66666667%;
}

.min-lg-size .col-lg-push-10 {
  left: 83.33333333%;
}

.min-lg-size .col-lg-push-9 {
  left: 75%;
}

.min-lg-size .col-lg-push-8 {
  left: 66.66666667%;
}

.min-lg-size .col-lg-push-7 {
  left: 58.33333333%;
}

.min-lg-size .col-lg-push-6 {
  left: 50%;
}

.min-lg-size .col-lg-push-5 {
  left: 41.66666667%;
}

.min-lg-size .col-lg-push-4 {
  left: 33.33333333%;
}

.min-lg-size .col-lg-push-3 {
  left: 25%;
}

.min-lg-size .col-lg-push-2 {
  left: 16.66666667%;
}

.min-lg-size .col-lg-push-1 {
  left: 8.33333333%;
}

.min-lg-size .col-lg-push-0 {
  left: auto;
}

.min-lg-size .col-lg-offset-12 {
  margin-left: 100%;
}

.min-lg-size .col-lg-offset-11 {
  margin-left: 91.66666667%;
}

.min-lg-size .col-lg-offset-10 {
  margin-left: 83.33333333%;
}

.min-lg-size .col-lg-offset-9 {
  margin-left: 75%;
}

.min-lg-size .col-lg-offset-8 {
  margin-left: 66.66666667%;
}

.min-lg-size .col-lg-offset-7 {
  margin-left: 58.33333333%;
}

.min-lg-size .col-lg-offset-6 {
  margin-left: 50%;
}

.min-lg-size .col-lg-offset-5 {
  margin-left: 41.66666667%;
}

.min-lg-size .col-lg-offset-4 {
  margin-left: 33.33333333%;
}

.min-lg-size .col-lg-offset-3 {
  margin-left: 25%;
}

.min-lg-size .col-lg-offset-2 {
  margin-left: 16.66666667%;
}

.min-lg-size .col-lg-offset-1 {
  margin-left: 8.33333333%;
}

.min-lg-size .col-lg-offset-0 {
  margin-left: 0;
}

table {
  background-color: transparent;
}

.clearfix:before,
.clearfix:after,
.dl-horizontal dd:before,
.dl-horizontal dd:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after,
.form-horizontal .form-group:before,
.form-horizontal .form-group:after,
.btn-toolbar:before,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:before,
.btn-group-vertical > .btn-group:after,
.nav:before,
.nav:after,
.navbar:before,
.navbar:after,
.navbar-header:before,
.navbar-header:after,
.navbar-collapse:before,
.navbar-collapse:after,
.pager:before,
.pager:after,
.panel-body:before,
.panel-body:after,
.modal-footer:before,
.modal-footer:after {
  display: table;
  content: " ";
}

.clearfix:after,
.dl-horizontal dd:after,
.container:after,
.container-fluid:after,
.row:after,
.form-horizontal .form-group:after,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:after,
.nav:after,
.navbar:after,
.navbar-header:after,
.navbar-collapse:after,
.pager:after,
.panel-body:after,
.modal-footer:after {
  clear: both;
}

.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.pull-right {
  float: right !important;
}

.pull-left {
  float: left !important;
}

.overflow {
  overflow-x: hidden;
  overflow-y: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  vertical-align: middle;
	margin-bottom: 0px;
}

/* ==========================================================================
   html
   ========================================================================== */
.html img,
.maxpic img {
  max-width: 100%;
}

/* ==============================================================
       _default
 ================================================================*/
/* ==============================
   html
=============================== */
.html img,
.maxpic img {
  max-width: 100%;
}

/* ==============================
    public
=============================== */
p {
  font-size: 15px;
}

body {
  padding: 0;
  margin: 0;
  color: #262525;
  /* overflow-x: hidden !important;*/
  -webkit-text-size-adjust: none;
}

.wp {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  position: relative;
}

.pd0 {
  padding: 0;
}

.pd {
  padding: 15px 25px;
}

.pdT {
  padding-top: 50px !important;
}

.pdB {
  padding-bottom: 50px !important;
}

.pdR {
  padding-right: 10px;
}

.pdL {
  padding-left: 10px;
}

.noP {
  padding-left: 0px;
  padding-right: 0px;
}

.noM {
  margin-left: 0px;
  margin-right: 0px;
}

.noPL {
  padding-left: 0px;
}

.noPR {
  padding-right: 0px;
}

.col {
  display: inline-block;
  vertical-align: middle;
  width: auto;
}

.fr {
  float: right !important;
}

.fl {
  float: left !important;
}

.w10 {
  width: 10%;
}

.w30 {
  width: 30%;
}

.w40 {
  width: 40%;
}

.w50 {
  width: 50%;
}

.w60 {
  width: 40%;
}

.w70 {
  width: 70%;
}

.w80 {
  width: 80%;
}

.w100 {
  width: 100% !important;
}

.max-sm-size .w-sm {
  width: auto;
}

hr {
  border-top-style: none;
  border-bottom-width: 0px;
  border-bottom-style: none;
  clear: both;
  border-right-style: none;
  border-left-style: none;
  border-top-width: 0px;
  border-right-width: 0px;
  border-left-width: 0px;
  padding-top: 20px;
  display: block;
  margin-bottom: 25px;
}

.autoPic {
  text-align: center;
  overflow: hidden;
}

.autoPic img {
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
}

a {
  transition: color 0.5s;
}

hr.line {
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 1px;
  border-left-width: 0px;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: solid;
  border-left-style: none;
  border-bottom-color: #CCC;
  margin-top: 10px;
  margin-right: 0px;
  margin-bottom: 10px;
  margin-left: 0px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

hr.dashed {
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 1px;
  border-left-width: 0px;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: dashed;
  border-left-style: none;
  border-bottom-color: #CCC;
  margin-top: 10px;
  margin-right: 0px;
  margin-bottom: 10px;
  margin-left: 0px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

.max-lg-size .hidden-lg,
.max-md-size .hidden-md,
.max-sm-size .hidden-sm,
.max-xs-size .hidden-xs,
.min-lg-size .hidden-min-lg,
.min-md-size .hidden-min-md,
.min-sm-size .hidden-min-sm,
.min-xs-size .hidden-min-xs {
  display: none !important;
}

.pagination {
  width: 100%;
  text-align: center;
  padding: 45px 0 0 0;
}

.pagination li {
  display: inline-block;
  vertical-align: middle;
}

.pagination li a {
  display: block;
  padding: 8px 17px;
  height: auto;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #4e4e4e;
  margin: 0 5px;
  background: #ebebeb;
  border-radius: 3px;
  transition: color 0.2s, background 0.3s ease-out;
}

.pagination li.active a,
.pagination li:hover a,
.pagination li:focus a {
  background: #0066cc;
  color: #fff;
  transition: color 0.2s, background 0.3s ease-out;
}

.pagination li.disabled a,
.pagination li.disabled:hover a,
.pagination li.disabled:focus a {
  color: #ccc;
  background: #ebebeb;
  cursor: pointer;
}

.pagination li.left a {
  padding: 7px 16px;
}

.pagination li.right a {
  padding: 7px 16px;
}

.form-group {
  margin-bottom: 15px;
}

.radio,
.checkbox {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
}

.radio label,
.checkbox label {
  min-height: 20px;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: normal;
  cursor: pointer;
}

.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  position: absolute;
  margin-top: 4px \9;
  margin-left: -20px;
}

.radio + .radio,
.checkbox + .checkbox {
  margin-top: -5px;
}

.radio-inline,
.checkbox-inline {
  position: relative;
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: normal;
  vertical-align: middle;
  cursor: pointer;
}

.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
  margin-top: 0;
  margin-left: 10px;
}

input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"].disabled,
input[type="checkbox"].disabled,
fieldset[disabled] input[type="radio"],
fieldset[disabled] input[type="checkbox"] {
  cursor: not-allowed;
}

.radio-inline.disabled,
.checkbox-inline.disabled,
fieldset[disabled] .radio-inline,
fieldset[disabled] .checkbox-inline {
  cursor: not-allowed;
}

.radio.disabled label,
.checkbox.disabled label,
fieldset[disabled] .radio label,
fieldset[disabled] .checkbox label {
  cursor: not-allowed;
}

.form-control-static {
  min-height: 34px;
  padding-top: 7px;
  padding-bottom: 7px;
  margin-bottom: 0;
}

.form-control-static.input-lg,
.form-control-static.input-sm {
  padding-right: 0;
  padding-left: 0;
}

.input-sm {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

select.input-sm {
  height: 30px;
  line-height: 30px;
}

textarea.input-sm,
select[multiple].input-sm {
  height: auto;
}

.form-group-sm .form-control {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

select.form-group-sm .form-control {
  height: 30px;
  line-height: 30px;
}

textarea.form-group-sm .form-control,
select[multiple].form-group-sm .form-control {
  height: auto;
}

.form-group-sm .form-control-static {
  height: 30px;
  min-height: 32px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
}

.input-lg {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}

select.input-lg {
  height: 46px;
  line-height: 46px;
}

textarea.input-lg,
select[multiple].input-lg {
  height: auto;
}

.form-group-lg .form-control {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}

select.form-group-lg .form-control {
  height: 46px;
  line-height: 46px;
}

textarea.form-group-lg .form-control,
select[multiple].form-group-lg .form-control {
  height: auto;
}

.form-group-lg .form-control-static {
  height: 46px;
  min-height: 38px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
}

input[type="radio"], input[type="checkbox"] {
  margin: 10px 0 0;
}

/* ==============================
   Rows
=============================== */
.rows,
ul.rows,
ol.rows,
dl.rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rows .listItem,
ul.rows > li,
ol.rows > li,
dl.rows > dt,
dl.rows > dd {
  margin: 0;
  padding: 0;
  display: block;
  clear: both;
}

/* ==============================
   Columns [float]
=============================== */
.columns,
ul.columns,
ol.columns,
dl.columns {
  margin: 0;
  padding: 0;
  list-style: none;
}

.columns:after,
ul.columns:after,
ol.columns:after,
dl.columns:after {
  content: "";
  clear: both;
  width: 0;
  height: 0;
  display: block;
  overflow: hidden;
  visibility: hidden;
}

.columns .list-item,
ul.columns > li,
ol.columns > li,
dl.columns > dt,
dl.columns > dd {
  margin: 0;
  padding: 0;
  float: left;
}

/* ==============================
   Columns [inline]
=============================== */
.columns.inline,
ul.columns.inline,
ol.columns.inline,
dl.columns.inline {
  letter-spacing: -0.31em;
}

opera-hack:-o-prefocus,
ul.columns.inline,
ol.columns.inline,
dl.columns.inline {
  *word-spacing: -0.43em;
}

.columns.inline .listItem,
ul.columns.inline > li,
ol.columns.inline > li,
dl.columns.inline > dt,
dl.columns.inline > dd {
  float: none;
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal;
}

dl {
  margin-top: 0;
  margin-bottom: 20px;
}

dt,
dd {
  line-height: 1.42857143;
}

dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

.min-sm-size .dl-horizontal dt {
  float: left;
  width: 160px;
  overflow: hidden;
  clear: left;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.min-sm-size .dl-horizontal dd {
  margin-left: 180px;
}

/* ==============================
    text
=============================== */
a:hover {
  text-decoration: none;
}

a {
  color: #000;
}

.italic {
  font-style: italic;
}

/*select*/
/*Hack*/
.hack {
  margin-right: 14px;
  /* IE 8+ */
}

:root .hack {
  margin-right: 18px9;
  /* IE 9+ */
}

* + html .hack {
  margin-right: 14px;
  /* IE 7+ */
}

.pointer-events {
  pointer-events: none;
  pointer-events: auto;
}

/*centert*/
.centert {
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  text-align: center;
  display: inline-block;
  position: absolute;
}

.max-sm-size .centert.no-sm {
  left: inherit;
  top: inherit;
  bottom: inherit;
  right: inherit;
  transform: none;
  -webkit-transform: none;
  text-align: center;
  display: block;
  position: relative;
}

.centert02 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.middle {
  display: table;
  height: 100%;
  width: 100%;
}

.middle-inline {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 100%;
  width: 100%;
}

@media print {
  .print-hid {
    display: none;
  }
  .header,
  .footer,
  .shareLink {
    display: none !important;
  }
  .section {
    background-image: none !important;
    background-color: #FFFFFF !important;
  }
  body {
    background-image: none !important;
  }
  .page-coupon .list {
    width: 632px !important;
    border: 3px solid #E3E3E3;
  }
  .page-coupon .list .txt p {
    width: 100% !important;
    display: iblock !important;
  }
}

a, a:focus, a:active {
  text-decoration: none;
  hlbr: expression(this.onFocus=this.blur());
  /* for IE */
  outline: none;
  -moz-outline: none;
  -webkit-outline: none;
  -ms-outline: none;
  outline: none;
  behavior: expression(this.onFocus=this.blur());
}

.clear {
  clear: both;
}

.min-sm-size .hidden-xs {
  display: block !important;
}

.min-sm-size .hidden-xs.inline {
  display: inline-block !important;
}

.max-sm-size .hidden-xs {
  display: none !important;
}

.max-sm-size .hidden-xs.inline {
  display: none !important;
}

.min-lg-size .hidden-lg {
  display: block !important;
}

.max-lg-size .hidden-lg {
  display: none  !important;
}

.min-sm-size .visible-xs {
  display: none !important;
}

.max-sm-size .visible-xs {
  display: block !important;
}

.max-sm-size .visible-xs.inline {
  display: inline-block !important;
}

.min-md-size .visible-md {
  display: none !important;
}

.max-md-size .visible-md {
  display: block !important;
}

.min-lg-size .visible-lg {
  display: none !important;
}

.max-lg-size .visible-lg {
  display: block !important;
}

.max-lg-size .visible-lg.inline {
  display: inline-block !important;
}

.fwB {
  font-weight: bold !important;
}

.textLine {
  text-decoration: underline !important;
}

.imgCenter {
  text-align: center;
}

.imgCenter img {
  margin-left: auto;
  margin-right: auto;
}

.tc {
  text-align: center !important;
}

.tr {
  text-align: right !important;
}

.tl {
  text-align: left !important;
}

.fl {
  float: left !important;
}

.fr {
  float: right !important;
}

.p0 {
  padding: 0  !important;
}

.pL0 {
  padding-left: 0  !important;
}

/* ==============================================================
    Basic
 ================================================================*/
.colorBlue {
  color: #0066cc !important;
}

body {
  line-height: 1.7rem;
  font-size: 14px;
  color: #000;
  font-family: Microsoft JhengHei ,  arial;
  opacity: 0;
  transition: opacity 0.3s ease-out;
  overflow: hidden;
  background: #f9f9f9;
}

body.start {
  opacity: 1;
}

body.overflow {
  overflow: hidden !important;
}

.main {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    /*top: 85px;*/
    top: 110px;
    margin-bottom: 110px;
}

.max-lg-size .main {
  top: 60px;
  margin-bottom: 60px;
}

.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
  max-width: 1240px;
  position: relative;
}

.conBig {
  max-width: 1400px;
}

.conSmall {
  max-width: 550px;
}

.whiteBG {
  background: #fff !important;
}

section {
  position: relative;
  width: 100%;
}

/* ============================================================
    common
 ==============================================================*/
/* ========  .btnGroup   =======*/
.newsBox .cover, .proIntroNavSilder .proBox .border, .caseBox .imgBox .cover {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
  transition: all 0.35s;
}

.Line, .worldTagBox + .worldTagBox:before {
  width: 100%;
  height: 1px;
  display: block;
  clear: both;
  background: #dedede;
}

#breadcrumb, form h4, footer .footerMenu, .homeLinkWrapper, #About.jobs .btnGrop, #News .btnGrop, .newsTitleBox, .proIntroContent, .downloadSelectWrapper, .tableWrapper, .caseWrapper, .caseBox, .Modify .titleBox, .worldTagBox {
  width: 100%;
  height: auto;
  clear: both;
  position: relative;
}

form button.blueBtn, #About.jobs .btnGrop a.blueBtn, #News .blueBtn {
  font-size: 0.938rem;
  color: #fff;
  background: #0066cc;
  padding: 11px 28px 10px 28px;
  border-radius: 0;
  display: inline-block;
  position: relative;
  text-align: center;
  transition: background 0.3s ease-out;
}

form button.blueBtn:hover, #About.jobs .btnGrop a.blueBtn:hover, #News .blueBtn:hover, form button.blueBtn:focus, #About.jobs .btnGrop a.blueBtn:focus, #News .blueBtn:focus {
  background: #0d3d83;
  transition: background 0.3s ease-out;
}

.max-sm-size form button.blueBtn, form .max-sm-size button.blueBtn, .max-sm-size #About.jobs .btnGrop a.blueBtn, #About.jobs .btnGrop .max-sm-size a.blueBtn, .max-sm-size #News .blueBtn, #News .max-sm-size .blueBtn {
  width: 100%;
}

form button.blackBtn {
  font-size: 0.938rem;
  color: #fff;
  background: #404040;
  padding: 11px 28px 10px 28px;
  border-radius: 0;
  display: inline-block;
  position: relative;
  text-align: center;
  transition: background 0.3s ease-out;
}

form button.blackBtn:hover, form button.blackBtn:focus {
  background: #222;
  transition: background 0.3s ease-out;
}

.max-sm-size form button.blackBtn, form .max-sm-size button.blackBtn {
  width: 100%;
}

.whiteBtn {
  font-size: 0.938rem;
  color: #5e5e5e;
  background: #fff;
  padding: 11px 28px 10px 28px;
  border-radius: 0;
  display: inline-block;
  position: relative;
  text-align: center;
  border: 1px solid #dadada;
  transition: background 0.3s ease-out;
}

.whiteBtn:hover, .whiteBtn:focus {
  background: #dadada;
  transition: background 0.3s ease-out;
}

.max-sm-size .whiteBtn {
  width: 100%;
}

.html {
  margin: 15px 0;
  position: relative;
  z-index: 2;
}

.html h3 {
  font-size: 2.188rem;
  color: #4b4b4b;
  font-weight: normal;
  text-align: left;
  line-height: 30px;
  margin: 20px 0;
}

.max-sm-size .html h3 {
  font-size: 1.25rem;
}

.html p {
  font-size: 0.938rem;
  line-height: 1.688rem;
  text-align: justify;
  margin-top: 0px;
  margin-bottom: 20px;
  color: #626262;
  letter-spacing: 0.063em;
}

.max-sm-size .html p {
  text-align: left;
  font-size: 0.875rem;
  line-height: 24px;
  word-break: break-all;
}

.html img {
  height: auto !important;
  text-align: center;
  margin: auto;
  display: block;
  width: 100%/9;
}

.html a {
  text-decoration: underline;
  color: #0066cc;
}

/*.max-sm-size .html img {
  width: 100% \9;
}

*::-ms-backdrop, .html img {
  width: 100% !important;
}*/

/* IE11 */
table {
  font-size: 0.938rem;
  line-height: 26px;
  color: #333;
}

table td {
    padding: 0 9px;
    font-size: 0.938rem;
    line-height: 1.688rem;
    text-align: left;
    margin-top: 0px;
    margin-bottom: 20px;
    color: #626262;
    letter-spacing: 0.063em;
}

.max-sm-size table td {
  text-align: left;
  font-size: 0.875rem;
  line-height: 24px;
}

.max-md-size table.rwd td {
  display: block;
  width: 100%;
}

/* ========  .slider   =======*/
.slider .slick-dots {
  bottom: -50px;
}

.max-sm-size .slider .slick-dots {
  bottom: -25px;
}

.slider .slick-dots li.slick-active button {
  color: #847878;
}

.slider .slick-dots button {
  background: none;
  color: #b3b3b3;
  font-size: 0.938rem;
  transition: color 0.2s ease-out;
}

.slider .slick-dots button:hover {
  color: #847878;
  transition: color 0.2s ease-out;
}

.slider .slick-prev,
.slider .slick-next {
  width: 35px;
  height: 35px;
  color: #b3b3b3;
  transition: all 0.3s ease-out;
}

.max-sm-size .slider .slick-prev,
.max-sm-size .slider .slick-next {
  bottom: -30px;
}

.slider .slick-prev:before,
.slider .slick-next:before {
  font-family: 'icomoon' !important;
  font-size: 1.875rem;
  color: #b3b3b3;
  display: block;
  top: 0px;
  position: relative;
  transition: color 0.2s ease-out;
}

.slider .slick-prev:hover,
.slider .slick-next:hover {
  transition: all 0.3s ease-out;
}

.slider .slick-prev:hover:before,
.slider .slick-next:hover:before {
  color: #847878;
  transition: color 0.2s ease-out;
}

.slider .slick-prev:before {
  content: "\e909";
  right: 1px;
}

.slider .slick-prev:hover {
  transform: translateX(-8px);
}

.max-md-size .slider .slick-prev {
  left: 36%;
}

.max-sm-size .slider .slick-prev {
  left: 10px;
}

.slider .slick-next:before {
  content: "\e90a";
  right: -1px;
}

.slider .slick-next:hover {
  transform: translateX(8px);
}

.max-md-size .slider .slick-next {
  right: 36%;
}

.max-sm-size .slider .slick-next {
  right: 10px;
}

#breadcrumb {
  display: block;
  background: #ededed;
}

#breadcrumb ul {
  margin: auto;
  text-align: left;
  padding: 11px 35px;
}

#breadcrumb li {
  color: #5e5e5e;
  font-size: 0.938rem;
  display: block;
  float: left;
}

#breadcrumb li a {
  color: inherit;
}

#breadcrumb li + li:after {
  content: " > ";
  padding: 0 5px;
  color: #5e5e5e;
  display: block;
  float: left;
  font-size: inherit;
  position: relative;
  top: 0px;
}

.max-sm-size #breadcrumb ul {
  padding: 11px 20px;
}

.max-sm-size #breadcrumb li {
  font-size: 0.813rem;
}

.pageTitle {
  font-size: 1.875rem;
  color: #4b4b4b;
  font-weight: normal;
  text-align: center;
  margin: 40px 0;
}

.max-sm-size .pageTitle {
  font-size: 1.563rem;
  margin: 20px 0;
  text-align: center;
  line-height: 2.188rem;
}

/* ==============================================================
    [ .form-group .label .form-control ]
 ================================================================*/
form {
  font-family: Microsoft JhengHei , arial;
}

form p {
  font-size: 1.125rem;
  color: #4b4b4b;
  margin: 0 0 30px 0;
  line-height: 2.188rem;
}

form h4 {
  font-size: 1.25rem;
  color: #4b4b4b;
  font-weight: normal;
  text-align: left;
  letter-spacing: 1px;
  border-bottom: 2px solid #ececec;
  padding: 0 0 15px 0;
  position: relative;
  margin: 40px 0;
    top: 1px;
    left: -1px;
}

form h4:after {
  content: "";
  width: 120px;
  height: 2px;
  display: block;
  position: absolute;
  bottom: -2px;
  left: 0;
  background: #0066cc;
  z-index: 2;
}

form .form-control {
  font-family: Microsoft JhengHei , arial;
}

form button {
  font-family: Microsoft JhengHei ,  arial;
  padding: 15px 30px !important;
}

form button.blueBtn {
  width: 100%;
  margin: 0 auto;
}

form button.blackBtn {
  margin-right: 15px;
}

form a {
  text-decoration: underline;
  color: #0066cc;
  display: inline-block;
}

form a:hover, form a:focus {
  color: #0d3d83;
  text-decoration: underline;
}

form .line {
  width: 100%;
  height: 2px;
  display: block;
  clear: both;
  background: #ececec;
  margin: 30px 0 45px 0;
}

.form {
  position: relative;
}

.form .form-group {
  padding: 5px 5px 4px 5px;
}

.form .control-label {
  font-size: 0.938rem;
  font-weight: normal;
  float: left;
  line-height: 30px;
}

.form .form-control {
  height: auto;
  width: 100%;
  padding: 8px 12px;
  box-shadow: none;
  border-radius: 0;
  border: 0px;
  background: transparent;
}

.form select {
  background: transparent;
  width: 100%;
  padding: 10px 14px;
  font-family: Microsoft JhengHei , arial;
}

.max-sm-size .form .form-group {
  padding: 5px 0px 4px 0px;
}

.form02 {
  color: #4b4b4b;
}

.form02 .row {
  margin: 0;
}

.form02 .control-label, .form02 .radio-inline {
  font-size: 0.938rem;
  font-weight: normal;
  text-align: right;
  color: #606060;
  float: left;
  line-height: 30px;
  width: 80px;
  margin-right: 22px;
  margin-top: 6px;
}

.form02 .radio-inline {
  width: 14%;
  margin-right: 20px;
}

.form02 .form-control, .form02 select {
  padding: 14px 15px;
  width: 91%;
}

.form02 .form-control {
  height: auto;
  float: left;
  border-radius: 0;
}

.form02 .Verity .form-control {
  width: 91% !important;
  float: none;
}

.form02 .Verity img {
  position: absolute;
  top: 1px;
  right: 2%;
}

.msie .form02 .Verity img {
  top: 2px;
}

.form02 .form-group {
  width: 100%;
  padding: 0px 5px;
  display: inline-block;
  position: relative;
}

.form02 .form-group.short {
  width: 50%;
  float: left;
}

.form02 .form-group.long {
  width: 100%;
}

.form02 .form-group.long .form-control {
  width: 88%;
}

.form02 .TextArea .form-control {
  width: 100%;
}

.max-md-size .form02 .control-label {
  text-align: left;
}

.max-lg-size .form02 .form-group {
  border: 0px;
}

.max-lg-size .form02 .form-group.short {
  width: 100%;
  float: left;
}

.max-lg-size .form02 .control-label, .max-lg-size .form02 .form-control {
  width: 100% !important;
}

.max-lg-size .form02 .control-label {
  text-align: left;
}

.max-lg-size .form02 .form-control {
  border: 1px solid #cecece;
}

.max-lg-size .form02 .Verity {
  margin: 0 0 25px 0;
}

.max-lg-size .form02 .Verity .form-control {
  width: 100% !important;
  float: none;
}

.max-lg-size .form02 .Verity img {
  position: absolute;
  top: 38px;
  right: 1%;
}

.max-sm-size .form02 h4 {
  margin: 25px 0;
}

.max-sm-size .form02 .Verity img {
  right: 2%;
}

.form03 {
  color: #4b4b4b;
}

.form03 .row {
  margin: 0;
}

.form03 .control-label, .form03 .radio-inline {
  font-size: 0.938rem;
  font-weight: normal;
  text-align: right;
  color: #606060;
  float: left;
  line-height: 30px;
  width: 130px;
  margin-right: 22px;
  margin-top: 6px;
}

.form03 .radio-inline {
  width: 14%;
  margin-right: 20px;
}

.form03 .form-control, .form03 select {
  padding: 14px 15px;
  width: 80%;
}

.form03 .form-control {
  height: auto;
  float: left;
  border-radius: 0;
}

.form03 .Verity .form-control {
  width: 80% !important;
  float: none;
}

.form03 .Verity img {
  position: absolute;
  top: 1px;
  right: 10%;
}

.msie .form03 .Verity img {
  top: 2px;
}

.form03 .form-group {
  width: 100%;
  padding: 0px 5px;
  display: inline-block;
  position: relative;
}

.form03 .form-group.short {
  width: 50%;
  float: left;
}

.form03 .form-group.long {
  width: 100%;
}

.form03 .form-group.long .form-control {
  width: 88%;
}

.form03 .TextArea .form-control {
  width: 100%;
}

.max-md-size .form03 .control-label {
  text-align: left;
}

.max-lg-size .form03 .form-group {
  border: 0px;
}

.max-lg-size .form03 .form-group.short {
  width: 100%;
  float: left;
}

.max-lg-size .form03 .control-label, .max-lg-size .form03 .form-control {
  width: 100% !important;
}

.max-lg-size .form03 .control-label {
  text-align: left;
}

.max-lg-size .form03 .form-control {
  border: 1px solid #cecece;
}

.max-lg-size .form03 .Verity {
  margin: 0 0 25px 0;
}

.max-lg-size .form03 .Verity .form-control {
  width: 100% !important;
  float: none;
}

.max-lg-size .form03 .Verity img {
  position: absolute;
  top: 38px;
  right: 1%;
}

.max-sm-size .form03 h4 {
  margin: 25px 0;
}

.max-sm-size .form03 .Verity img {
  right: 2%;
}

/* ==============================================================
   mainBanner 
 ================================================================*/
.mainBanner {
  height: 350px;
  position: relative;
}

.mainBanner .textBox {
  width: 100%;
  padding: 0 20px;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  text-align: center;
  display: inline-block;
  position: absolute;
}

.mainBanner .textBox h2, .mainBanner .textBox p {
  width: 100%;
  display: inline-block;
}

.mainBanner .textBox h2 {
  font-size: 3.125rem;
  color: #fff;
  font-weight: normal;
  text-align: center;
  margin: 0;
}

.mainBanner .textBox p {
  font-size: 0.938rem;
  color: #dadada;
  font-weight: normal;
  text-align: center;
  line-height: 1.8rem;
  margin-top: 35px;
}

.max-sm-size .mainBanner {
  height: 300px;
}

.max-sm-size .mainBanner .textBox h2 {
  font-size: 2.188rem;
  line-height: 2.5rem;
}

.max-sm-size .mainBanner .textBox p {
  margin-top: 15px;
}

/* ==============================================================
   #subMenu
 ================================================================*/

#subMenu {
  width: 100%;
  height: auto;
  display: block;
  position: absolute;
  background: rgba(0, 0, 0, 0.25);
  left: 0;
  bottom: 50px;
  z-index: 999;
}

#subMenu ul {
  margin-left: auto;
  margin-right: auto;
}

#subMenu a {
  font-size: 1.125rem;
  color: #fff;
  padding: 20px 30px;
  display: block;
  letter-spacing: 1px;
  background: transparent;
  transition: background 0.3s ease-out;
}

#subMenu a:hover, #subMenu a:focus, #subMenu a.active {
  background: rgba(12, 93, 175, 0.75);
  transition: background 0.3s ease-out;
}

.max-sm-size #subMenu {
  margin: 25px auto 0 auto;
  position: relative;
  padding: 0px;
  bottom: 0px;
  background: transparent;
  border-top: 1px solid #d9d9d9;
}

.max-sm-size #subMenu li {
  width: 100%;
  margin: 0px 0;
}

.max-sm-size #subMenu a {
  width: 100%;
  padding: 12px 25px;
  border-bottom: 1px solid #d9d9d9;
  color: #5e5e5e;
  text-align: center;
}

.max-sm-size #subMenu a:hover, .max-sm-size #subMenu a:focus, .max-sm-size #subMenu a.active {
  color: #fff;
  background: rgba(12, 93, 175, 0.75);
  transition: background 0.3s ease-out;
}

.max-sm-size .pagination li {
  margin: 0px 0 15px;
}

.catalog_text2 a {
  text-decoration: underline;
  color: #0066cc;
  display: inline-block;
}

#Iframe form {
  width: 80%;
  margin: 0 auto;
  float: none;
}

#Iframe p {
  margin: 10px 0 50px 0;
}

.fancybox-skin {
  background: #fff;
}

/* ==============================================================
* header
 ================================================================*/
#header {
    position: fixed;
    width: 100%;
    z-index: 1999;
    /*height: 85px;*/
    height: 110px;
    background: rgba(255, 255, 255, 0.95);
    transition: all 0.2s ease-out;
    top: 0;
}

#header.scrolled {
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 0 2px #ccc;
}

#header .navbar {
  max-width: 1400px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

#header .logo {
  width: 210px;
  height: 45px;
  display: inline-block;
  position: relative;
  float: left;
  margin: 15px 0 0 20px;
  transition: all 0.2s ease-out;
  background: url(../png/logo.png) no-repeat;
  background-size: 210px;
  z-index: 9999;
}

#header .logo h1 {
  position: relative;
  margin: 0;
  display: block;
}

#header .navbar-collapse {
  /*width: 910px;*/
  /*width: 78%;*/
  float: left;
  margin: 0 25px 0 35px;
  z-index: 999;
}

.min-lg-size #header .navbar-collapse {
  display: block !important;
}

.max-lg-size #header {
  height: 60px;
}

.max-lg-size #header .navbar {
  background: #fff !important;
}

.max-lg-size #header .logo {
  width: 180px;
  background-size: 180px;
  position: absolute;
}

.max-lg-size #header .navbar-toggle {
  width: auto;
  padding: 0px 12px;
  margin: 11px 20px 8px 20px;
  border: 1px solid #0f0e9f;
  border-radius: 5px;
  display: inline-block;
  overflow: visible;
  float: right;
  cursor: pointer;
  transition-timing-function: linear;
  transition-duration: .25s;
  transition-property: opacity, -webkit-filter;
  transition-property: opacity, filter;
  transition-property: opacity, filter, -webkit-filter;
  position: relative;
  opacity: 1;
  z-index: 9999;
  transition: opacity 0.2s ease-out;
}

.max-lg-size #header .navbar-toggle .hamburger-box {
  width: 35px;
  height: 26px;
  -webkit-perspective: 80px;
  perspective: 80px;
  margin: 5px 0;
  position: relative;
  display: inline-block;
}

.max-lg-size #header .navbar-toggle .hamburger-inner {
  top: auto;
  bottom: 0;
  transition-delay: .15s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition-duration: .15s;
}

.max-lg-size #header .navbar-toggle .hamburger-inner,
.max-lg-size #header .navbar-toggle .hamburger-inner:before,
.max-lg-size #header .navbar-toggle .hamburger-inner::after {
  width: 100%;
  height: 3px;
  background-color: #0f0e9f;
  position: absolute;
  display: block;
}

.max-lg-size #header .navbar-toggle .hamburger-inner:before,
.max-lg-size #header .navbar-toggle .hamburger-inner::after {
  display: block;
  content: '';
}

.max-lg-size #header .navbar-toggle .hamburger-inner:before {
  top: -10px;
  transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.max-lg-size #header .navbar-toggle .hamburger-inner:after {
  top: -20px;
  transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}

.max-lg-size #header .navbar-toggle.active .hamburger-inner {
  ttransition-delay: .32s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transform: translate3d(0, -10px, 0) rotate(-45deg);
  transform: translate3d(0, -10px, 0) rotate(-45deg);
}

.max-lg-size #header .navbar-toggle.active .hamburger-inner:before {
  top: 0;
  transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.max-lg-size #header .navbar-toggle.active .hamburger-inner:after {
  top: 0;
  transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.27s linear;
  opacity: 0;
}

.max-lg-size #header .navbar-collapse {
  width: 100%;
  float: none;
  margin: 0;
  overflow-x: hidden;
  display: none;
}

.max-lg-size #header .navbar-collapse .has-sub:before {
  content: "\e903";
  font-family: 'icomoon' !important;
  position: absolute;
  right: 20px;
  top: 13px;
  font-size: 1.125rem;
}

.max-lg-size #header.open {
  overflow-y: scroll;
  position: fixed;
  height: 100%;
}

.max-md-size #header .logo {
  width: 160px;
  margin: 15px 0 0 20px;
  background-size: 160px;
}

#header .navbar-left {
  position: relative;
  float: left;
}

#header .navbar-left a {
  display: block;
}

#header .navbar-left li {
  position: relative;
  white-space: nowrap;
  margin-top: 27px;
}

#header .navbar-left li a {
  font-size: 0.938rem;
  letter-spacing: 1px;
  padding: 0px 17px 9px 17px;
  margin: 0px 0px;
  color: #5e5e5e;
  width: 100%;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}

.max-lg-size #header .navbar-left li a {
  margin: 0px;
}

#header .navbar-left li a:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  right: 50%;
  bottom: 0px;
  background: #0f0e9f;
  height: 3px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

#header .navbar-left li:hover a:before, #header .navbar-left li:focus a:before, #header .navbar-left li.active a:before {
  left: 0;
  right: 0;
}

.min-lg-size #header .navbar-left li ul.secondMenu li ul {
  z-index: 1;
  opacity: 0 !important;
  visibility: hidden;
}

.min-lg-size #header .navbar-left li ul.secondMenu li.hubOpen ul {
  z-index: 9;
  opacity: 1 !important;
  visibility: visible;
}

.min-lg-size #header .navbar-left li:hover ul, .min-lg-size #header .navbar-left li:focus ul {
  transition: all 0.2s ease-out;
  transition-delay: .25s;
}

.min-lg-size #header .navbar-left li:hover ul.secondMenu, .min-lg-size #header .navbar-left li:focus ul.secondMenu {
  opacity: 1;
  left: 0;
}

#header .navbar-left li ul {
  background: #f3f3f3;
  transition: all 0.2s ease-out;
}

.min-lg-size #header .navbar-left li ul {
  position: absolute;
  z-index: 99;
  top: 100%;
  min-width: 180px;
}

.min-lg-size #header .navbar-left li ul.secondMenu {
  opacity: 0;
  left: -20000em;
}

#header .navbar-left li ul li {
  margin-top: 0;
}

#header .navbar-left li ul li a {
  margin: 0;
  padding: 15px 25px;
  text-align: left;
}

#header .navbar-left li ul li a:before {
  display: none;
}

#header .navbar-left li ul li:hover > a, #header .navbar-left li ul li:focus > a, #header .navbar-left li ul li.active > a {
  background-color: #efeef9;
  transition: background 0.3s ease-out;
}

#header .navbar-left li ul ul {
  z-index: 999;
  top: 0px;
  left: 100%;
  border-left: 2px solid #ccc;
}

.min-lg-size #header .navbar-left li ul ul {
  top: 0;
}

.max-lg-size #header .navbar-left {
  float: none;
  width: 100%;
  background: #fff;
}

.max-lg-size #header .navbar-left ul.secondMenu {
  display: none !important;
}

.max-lg-size #header .navbar-left li {
  width: 100%;
  margin: 0;
}

.max-lg-size #header .navbar-left li.has-sub:before {
  content: "\e903";
  font-family: 'icomoon' !important;
  position: absolute;
  right: 20px;
  top: 13px;
  font-size: 1.125rem;
  color: #5e5e5e;
}

.max-lg-size #header .navbar-left li a {
  width: 100%;
  font-size: 1.125rem;
  padding: 14px 15px 13px 15px;
  text-align: center;
  letter-spacing: 1px;
  border-bottom: 1px solid #e0e0e0;
}

.max-lg-size #header .navbar-left li:first-child a {
  border-top: 1px solid #e0e0e0;
}

.max-lg-size #header .navbar-left li > ul {
  min-width: 100%;
}

.max-lg-size #header .navbar-left li.search form {
  padding: 11px 15px;
  position: relative;
  z-index: 999;
  opacity: 1;
  display: block;
  border-bottom: 1px solid #ccc;
  position: relative;
}

.max-lg-size #header .navbar-left li.search input {
  width: 80%;
  margin: auto;
  background: #fff;
  border: 1px solid #b1a9a9;
  padding: 9px 10px;
  opacity: 1;
  display: block;
  position: relative;
}

.max-lg-size #header .navbar-left li.search button {
  right: 16%;
  top: 19px;
  font-size: 1.25rem;
  color: #6f6f6f;
  position: absolute;
  padding: 0 !important;
}

#header .navbar-right {
  position: relative;
  float: right;
  padding: 28px 0 0 0;
}

#header .navbar-right li {
  font-size: 0.938rem;
  color: #5e5e5e;
  margin: 0 7px;
  position: relative;
}

#header .navbar-right li a {
  color: inherit;
  position: relative;
}

#header .navbar-right li.login {
  transition: text-shadow 0.2s ease-out;
}

#header .navbar-right li.login:hover,
#header .navbar-right li.login:focus {
  text-shadow: 0 0 2px #ddd;
  transition: text-shadow 0.2s ease-out;
}

#header .navbar-right li.login:before {
  content: "";
  width: 1px;
  height: 30px;
  background: #efefef;
  position: relative;
  right: 0;
  top: -2px;
  margin: 0 9px 0 13px;
  float: right;
}

#header .navbar-right li.search form {
  position: relative;
}

#header .navbar-right li.search input {
  width: 160px;
  background: transparent;
  border: 1px solid  #d8d8d8;
  padding: 7px 10px;
  font-size: 0.938rem;
  margin: 0px 5% 0 5%;
  color: #d8d8d8;
  transition: all 0.2s ease-out;
}

#header .navbar-right li.search input:hover,
#header .navbar-right li.search input:focus {
  box-shadow: 0 0 2px #d8d8d8;
  border: 1px solid  #a99f9f;
}

#header .navbar-right li.search button {
  font-size: 1.063rem;
  color: #6f6f6f;
  position: absolute;
  right: 1px;
  top: 7px;
  padding: 0 !important;
}

.firefox #header .navbar-right li.search button {
  right: 18px;
  top: 10px;
}

#header .navbar-right li.language {
  display: block;
}

#header .navbar-right li.language .button {
  font-size: 1rem;
  color: #5e5e5e;
  cursor: pointer;
  transition: text-shadow 0.3s ease-out;
}

#header .navbar-right li.language .button:hover, #header .navbar-right li.language .button:focus {
  text-shadow: 0 0 2px #ddd;
  transition: text-shadow 0.3s ease-out;
}

.min-lg-size #header .navbar-right li.language .dropdown-menu {
  margin: 11px 0 0 -30px;
  padding: 10px 0px;
  display: none;
  transition: opacity 0.15s ease-out;
  background-color: rgba(243, 243, 243, 0.95);
  position: absolute;
}

.min-lg-size #header .navbar-right li.language .dropdown-menu li {
  margin: 0;
}

.min-lg-size #header .navbar-right li.language .dropdown-menu a {
  text-align: center;
  color: #6c6c6c !important;
  padding: 5px 25px;
  display: block;
}

.min-lg-size #header .navbar-right li.language .dropdown-menu a:hover {
  background-color: rgba(224, 224, 224, 0.95);
  transition: background 0.2s ease-out;
}

.max-lg-size #header .navbar-right {
  float: none;
  width: 100%;
  padding: 0px 0 0 0;
  background: #fff;
}

.max-lg-size #header .navbar-right a,
.max-lg-size #header .navbar-right span {
  font-size: 1.125rem;
  padding: 14px 15px 13px 15px;
  display: inline-block;
  text-align: center;
}

.max-lg-size #header .navbar-right li {
  width: 100%;
  text-align: center;
  margin: 0;
}

.max-lg-size #header .navbar-right li a {
  border-bottom: 1px solid #ccc;
  width: 100%;
  text-align: center;
  display: inline-block;
}

.max-lg-size #header .navbar-right li.search {
  position: relative;
}

.max-lg-size #header .navbar-right li.search form {
  padding: 11px 15px;
  position: relative;
  z-index: 999;
  opacity: 1;
  display: block;
  border-bottom: 1px solid #ccc;
}

.max-lg-size #header .navbar-right li.search input {
  width: 80%;
  margin: auto;
  background: #fff;
  border: 1px solid #b1a9a9;
  padding: 9px 10px;
  opacity: 1;
  display: block;
  position: relative;
}

.max-lg-size #header .navbar-right li.search button {
  right: 16%;
  top: 21px;
}

.max-lg-size #header .navbar-right li.language {
  position: relative;
}

.max-lg-size #header .navbar-right li.language .dropdown-menu {
  background: #eeeef3;
  margin: 0px 0;
  position: relative;
  z-index: 999;
  visibility: visible;
}

.max-lg-size #header .navbar-right li.language a {
  padding: 8px 15px;
}

.max-lg-size #header .navbar-right li.language a span {
  padding: 8px 3px;
}

#header.scrolled {
  background: #fff;
  box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, 0.15);
  transition: background 0.15s ease-out;
}

#header.scrolled .navbar-right li a {
  color: #000;
}

/*:not(.min-lg-size) ul.drop-down-menu > li {
    width: 120px;
    white-space: normal !important;
}*/

.min-lg-size ul.drop-down-menu ul {
    /*hide second*/
    left: 99999px;
    opacity: 0;
    transition: all 0.3s ease-out;
}

.min-lg-size ul.drop-down-menu li:hover > ul {
  /* mouseIn second show*/
  opacity: 1;
  left: -1px;
  border-right: 5px;
  transition: all 0.3s ease-out;
}

.min-lg-size ul.drop-down-menu li:hover > ul ul {
  /* mouseIn second after menu still hide*/
  left: 99999px;
  transition: all 0.3s ease-out;
}

.min-lg-size ul.drop-down-menu ul li:hover > ul {
  /* second after show*/
  left: 90%;
  transition: all 0.3s ease-out;
}

/* ==============================================================
#footer
 ================================================================*/
footer {
  width: 100%;
  height: auto;
  text-align: center;
  position: relative;
  background: #f9f9f9;
}

footer .footerMenu {
  text-align: center;
  /*display: inline-block;*/
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fill, 170px);
  margin: 40px 0;
}

footer .footerMenu > li {
  margin: 5px 20px;
  text-align: left;
}

.max-md-size footer .footerMenu > li {
  width: 16%;
  margin: 5px 0;
}

.max-sm-size footer .footerMenu > li {
  width: 33%;
  float: none;
}

footer .footerMenu > li a {
  font-size: 1.125rem;
  color: #4e4e4e;
  font-weight: normal;
  text-align: left;
  display: inline-block;
}

.max-sm-size footer .footerMenu > li a {
  font-size: 1rem;
}

footer .footerMenu > li a:hover {
  text-decoration: underline;
}

footer .footerMenu > li ul li {
  margin: 0;
  text-align: left;
}

footer .footerMenu > li ul li a {
  font-size: 0.938rem;
  color: #9d9d9d;
  font-weight: normal;
  text-align: left;
}

.max-sm-size footer .footerMenu > li ul li a {
  font-size: 0.813rem;
}

footer .blackBG {
  padding: 30px 20px;
  background: #393939;
}

footer .leftBox {
  color: #e7e7e7;
  width: 280px;
  height: auto;
  display: block;
  position: relative;
  float: left;
}

footer .leftBox img {
  max-width: 230px;
  width: 100%;
  height: auto;
}

footer .leftBox a {
  font-size: 0.938rem;
  color: #e7e7e7;
  font-weight: normal;
  text-align: left;
  display: inline-block;
  margin: 10px 4px;
}

footer .leftBox a:hover, footer .leftBox a:focus {
  text-decoration: underline;
}

.max-md-size footer .leftBox {
  width: 190px;
}

.max-sm-size footer .leftBox {
  width: 220px;
  margin: 0 auto;
  float: none;
}

.max-sm-size footer .leftBox img {
  max-width: 190px;
}

footer .rightBox {
  float: right;
}

footer .rightBox p, footer .rightBox a {
  font-size: 0.813rem;
  color: #e7e7e7;
  font-weight: normal;
  text-align: left;
}

footer .rightBox p {
  text-align: right;
  margin: 0;
}

.max-sm-size footer .rightBox p {
  text-align: center;
}

footer .rightBox, footer .leftBox {
  display: inline-block;
}

footer .socialMenu {
  margin: 10px 0 0 0;
  display: block;
}

.max-sm-size footer .socialMenu {
  margin: 20px 0;
}

footer .socialMenu li {
  float: right !important;
}

.max-sm-size footer .socialMenu li {
  float: none  !important;
}

footer .socialMenu a {
  font-size: 1.688rem;
  color: #6f6f6f;
  font-weight: normal;
  text-align: center;
  margin: 0 14px;
  height: auto;
  border-radius: 99em;
}

footer .socialMenu a.fb:hover, footer .socialMenu a.fb:focus {
  color: #46629e;
}

footer .socialMenu a.wechat:hover, footer .socialMenu a.wechat:focus {
  color: #37903a;
}

footer .socialMenu a.mail:hover, footer .socialMenu a.mail:focus {
  color: #fff;
}

footer .copyright a {
  text-decoration: underline;
}

/* ========  .Top   =======*/
.Top {
  width: 45px;
  height: 45px;
  display: block;
  position: fixed;
  display: none;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 99em;
  font-size: 0.875rem;
  color: #fff;
  font-weight: normal;
  text-align: center;
  right: 40px;
  bottom: 65px;
  z-index: 999;
  box-shadow: 0px 1px 5px transparent;
  transition: box-shadow 0.3s ease-out;
}

.max-sm-size .Top {
  right: 25px;
  bottom: 25px;
}

.Top span {
  display: inline-block;
  text-align: center;
  position: relative;
}

.Top span.arrow {
  transform: translateY(0px);
  transition: transform 0.3s ease-out;
}

.Top span.text {
  top: -12px;
  font-size: 0.813rem;
  padding: 0 2px;
}

.Top:hover, .Top:focus {
  box-shadow: 0px 1px 7px #544b4b;
  transition: box-shadow 0.3s ease-out;
}

.Top:hover span.arrow, .Top:focus span.arrow {
  transform: translateY(-2px);
  transition: transform 0.3s ease-out;
}

/* ==============================================================
   [ #Home ]
 ================================================================*/
#Home #header {
  background: transparent;
}

#Home #header .navbar-left li a {
  color: #fff;
}

#Home #header .navbar-left li a:before {
  background: #fff;
}

#Home #header .navbar-left li ul a {
  color: #5e5e5e !important;
}

#Home #header .navbar-right li {
  color: #fff;
}

#Home #header .navbar-right li a {
  color: inherit;
}

#Home #header .navbar-right li button {
  color: inherit;
}

#Home #header .navbar-right li input {
  color: #fff;
}

#Home #header .navbar-right li.search input {
  border: 1px solid #efefef;
  color: #fff;
}

#Home #header .navbar-right li.search input:hover,
#Home #header .navbar-right li.search input:focus {
  box-shadow: 0 0 2px #fff;
  border: 1px solid #fff;
}

#Home #header .navbar-right li.search button {
  color: #fff;
}

#Home #header.scrolled {
  background: #fff;
}

#Home #header.scrolled .navbar-left li {
  color: #5e5e5e;
}

#Home #header.scrolled .navbar-left li a {
  color: inherit;
}

#Home #header.scrolled .navbar-left li a:before {
  background: #0f0e9f;
}

#Home #header.scrolled .navbar-right li {
  color: #5e5e5e;
}

#Home #header.scrolled .navbar-right li a {
  color: inherit;
}

#Home #header.scrolled .navbar-right li button {
  color: inherit;
}

#Home #header.scrolled .navbar-right li input {
  color: inherit;
  border-color: #a99f9f;
}

.max-lg-size #Home #header li, .max-lg-size #Home #header a {
  color: #5e5e5e !important;
}

#Home .main {
  top: 0;
  margin-bottom: 0px;
}

.homeSilder .imgLiquidFill {
  width: 100%;
  height: 640px;
  display: block;
  position: relative;
  background-color: #759fbb;
}

.max-bg-size .homeSilder .imgLiquidFill {
  height: 500px;
}

.max-sm-size .homeSilder .imgLiquidFill {
  height: 350px;
}

.homeSilder .textBox {
  max-width: 1200px;
  width: 80%;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  text-align: center;
  display: inline-block;
  position: absolute;
  z-index: 99;
}

.homeSilder .textBox04 {
    max-width: 1200px;
    width: 80%;
    left: 10%;
    top: 70%;
    bottom: auto;
    right: auto;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    text-align: center;
    display: inline-block;
    position: absolute;
    z-index: 99;
}

.homeSilder .textBox > * {
  display: block;
  font-weight: bold;
  color: #fff;
}

.homeSilder .textBox h2 {
  display: none;
}

.homeSilder .textBox img {
  max-width: 360px;
  width: 100%;
  height: auto;
  margin: 20px auto;
}

.homeSilder .textBox h3 {
  font-size: 1.625rem;
  margin: 0;
  letter-spacing: 0.2rem;
  clear: both;
}

.homeSilder .textBox.type01 {
  margin-top: -7.5%;
}

.homeSilder .textBox.type01 h3, .homeSilder .textBox.type01 img {
  text-align: center;
}


.homeSilder .textBox.type02 h3, .homeSilder .textBox.type02 img {
  text-align: center;
}

.homeSilder .textBox.type02 {
  width: 90%;
}

.homeSilder .textBox.type02 h3 {
  margin: 0 10px;
}

.homeSilder .textBox.type03 h3 {
  text-align: right;
  margin: 0 10px;
}

.homeSilder .textBox.type03 h3 .eng {
  font-size: 2.2em;
  font-weight: normal;
}

.homeSilder .textBox.type03 h3 .eng .num {
  font-weight: bold;
  font-size: 1.4em;
}

.homeSilder .textBox.type03 img {
  margin: 20px 0;
  float: right;
}

.max-lg-size .homeSilder .textBox img {
  max-width: 290px;
}

.max-lg-size .homeSilder .textBox h3 {
  font-size: 1.375rem;
}

.max-sm-size .homeSilder .textBox img {
  max-width: 180px;
  margin-top: 5px;
  margin-bottom: 5px;
  -webkit-filter: drop-shadow(1px 0px 1px #675f5f);
  filter: drop-shadow(1px 0px 1px #675f5f);
}

.max-sm-size .homeSilder .textBox h3 {
  font-size: 1.25rem;
  text-shadow: 1px 0 2px #675f5f;
}

.max-sm-size .homeSilder .textBox h3 .eng {
  font-size: 1.3em;
}

.max-sm-size .homeSilder .textBox.type01 {
  margin-top: -30px;
}

.homeSilder .slick-dots {
  bottom: 45px;
}

.max-sm-size .homeSilder .slick-dots {
  bottom: 25px;
}

.homeSilder .slick-dots li {
  margin: 0 5px;
  width: 1.625rem;
}

.homeSilder .slick-dots li button {
  width: 1rem;
  height: 1rem;
  border-radius: 99em;
  background: #fff;
  border: 2px solid  transparent;
  transition: all 0.2s ease-out;
}

.homeSilder .slick-dots li.slick-active button {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 99em;
  background: transparent;
  background: transparent;
  border: 2px solid #fff;
  left: -1px;
  transition: all 0.2s ease-out;
}

.caseSilder {
  width: 100%;
  margin: 60px 0;
}

.max-sm-size .caseSilder {
  margin: 25px 0 90px 0;
}

.caseSilder .figure {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

.caseSilder .figure .imgBox {
  width: 100%;
  height: 400px;
  display: block;
  position: absolute;
  max-width: 600px;
  top: 45px;
  z-index: 2;
  opacity: 1;
  transition: opacity 0.3s ease-out;
}

.max-lg-size .caseSilder .figure .imgBox {
  top: 0;
  height: 366px;
}

.max-sm-size .caseSilder .figure .imgBox {
  height: 220px;
  margin: auto;
}

.caseSilder .figure .figcaption {
  width: 54%;
  height: 490px;
  display: block;
  position: relative;
  border: 1px solid #e8e8e8;
  background: #fff;
  padding: 46px 90px;
  float: right;
  transform: translateY(0px);
  transition: background 0.3s, transform 0.35s;
}

.caseSilder .figure .figcaption h3 {
  font-size: 2.188rem;
  color: #5d5d5d;
  font-weight: normal;
  text-align: left;
  margin-top: 0;
}

.caseSilder .figure .figcaption .html {
  height: 190px;
  overflow: hidden;
}

.max-sm-size .caseSilder .figure .figcaption .html {
  height: auto;
}

.leantecMore {
    font-size: 0.938rem;
    color: #fff;
    background: #0066cc;
    padding: 11px 28px 10px 28px;
    border-radius: 0;
    display: inline-block;
    position: relative;
    text-align: center;
    margin: 10px 0;
    transition: background 0.3s ease-out;
    cursor: pointer;
}
.leantecMore:hover {
    opacity: 0.50;
    filter: alpha(opacity=50);
    -ms-filter: "alpha( opacity=50 )";
    -moz-opacity: 0.50;
}

.caseSilder .figure .figcaption .more {
  font-size: 0.938rem;
  color: #fff;
  background: #0066cc;
  padding: 11px 28px 10px 28px;
  border-radius: 0;
  display: inline-block;
  position: relative;
  text-align: center;
  margin: 10px 0;
  transition: background 0.3s ease-out;
}

.min-sm-size .caseSilder .figure .figcaption .more {
  width: 120px;
}

.max-sm-size .caseSilder .figure .figcaption .more {
  width: 100%;
  margin: -10px 0 0 0;
  padding: 7px 28px 6px 28px;
}

.max-lg-size .caseSilder .figure .figcaption {
  height: 100%;
  padding: 25px 30px;
  float: none;
}

.max-lg-size .caseSilder .figure .figcaption h3 {
  margin-bottom: 10px;
}

.max-sm-size .caseSilder .figure .figcaption {
  height: auto;
  padding: 20px;
}

.max-sm-size .caseSilder .figure .figcaption h3 {
  font-size: 1.563rem;
  margin-bottom: 0px;
}

.max-lg-size .caseSilder .figure .imgBox, .max-lg-size .caseSilder .figure .figcaption {
  width: 50%;
  position: relative;
  float: left;
}

.max-sm-size .caseSilder .figure .imgBox, .max-sm-size .caseSilder .figure .figcaption {
  width: 100%;
  float: none;
}

.caseSilder .figure:hover .imgBox, .caseSilder .figure:focus .imgBox {
  opacity: 0.9;
  transition: opacity 0.3s ease-out;
}

.caseSilder .figure:hover .figcaption, .caseSilder .figure:focus .figcaption {
  background: #eff4f7;
  transform: translateY(10px);
  transition: background 0.3s, transform 0.35s;
}

.max-lg-size .caseSilder .figure:hover .figcaption, .max-lg-size .caseSilder .figure:focus .figcaption {
  transform: translateY(0px);
}

.caseSilder .figure:hover .figcaption .more, .caseSilder .figure:focus .figcaption .more {
  background: #0d3d83;
  transition: background 0.3s ease-out;
}

.caseSilder .slick-prev,
.caseSilder .slick-next {
  width: 70px;
  height: 70px;
  border-radius: 99em;
  background: transparent;
  border: 2px solid #ececec;
  transition: all 0.3s ease-out;
  margin-top: -35px;
}

.caseSilder .slick-prev:hover,
.caseSilder .slick-prev:focus,
.caseSilder .slick-next:hover, .caseSilder .slick-next:focus {
  border-color: #847878;
  transition: all 0.3s ease-out;
}

.max-bg-size .caseSilder .slick-prev,
.max-bg-size .caseSilder .slick-next {
  background: #fff;
  margin-top: 0px;
}

.max-sm-size .caseSilder .slick-prev,
.max-sm-size .caseSilder .slick-next {
  width: 50px;
  height: 50px;
  border-radius: 99em;
  background: #fff;
  opacity: 0.85;
  top: initial;
  bottom: -65px;
}

.caseSilder .slick-next {
  right: -110px;
}

.max-bg-size .caseSilder .slick-next {
  right: -17px;
}

.max-sm-size .caseSilder .slick-next {
  right: 0;
}

.caseSilder .slick-prev {
  left: -110px;
}

.max-bg-size .caseSilder .slick-prev {
  left: -17px;
}

.max-sm-size .caseSilder .slick-prev {
  left: 0;
}

.homeLinkWrapper .linkBox {
  width: 25%;
  background: #ccc;
  position: relative;
}

.homeLinkWrapper .linkBox a {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  overflow: hidden;
  color: transparent;
}

.homeLinkWrapper .linkBox h2 {
  font-size: 1.563rem;
  color: #fff;
  font-weight: normal;
  text-align: center;
  width: 100%;
  margin: 0;
  display: inline-block;
  line-height: 230px;
  position: absolute;
  text-shadow: 0 0 1px #8e8181;
  z-index: 9;
}

.max-lg-size .homeLinkWrapper .linkBox h2 {
  line-height: normal;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  text-align: center;
  display: inline-block;
  position: absolute;
}

.homeLinkWrapper .linkBox img {
  transform: scale(1);
  transition: transform 0.3s ease-out;
}

.max-md-size .homeLinkWrapper .linkBox {
  width: 50%;
}

.max-sm-size .homeLinkWrapper .linkBox {
  width: 100%;
}

.max-sm-size .homeLinkWrapper .linkBox img {
  width: 100%;
}

.homeLinkWrapper .linkBox:hover img, .homeLinkWrapper .linkBox:focus img {
  transform: scale(1.05);
  transition: transform 0.3s ease-out;
}

/* ==============================================================
   [ About ]
 ================================================================*/
#About .content {
  padding: 50px 20px 70px 20px;
}

.max-lg-size #About .content {
  padding: 30px 20px 30px 20px;
}

.aboutHtml {
  width: 100%;
  max-width: 1150px;
  margin-right: auto;
  margin-left: auto;
}

.aboutHtml h4 {
  font-size: 1.125rem;
  color: #0066cc;
  font-weight: normal;
  text-align: left;
  margin: 35px 0 20px 0;
}

.aboutHtml h4.big {
  font-size: 2.188rem;
}

.max-sm-size .aboutHtml h4 {
  margin: 20px 0;
}

.max-sm-size .aboutHtml h4.big {
  font-size: 1.375rem;
}

.transTable {
  margin: 20px 0;
  position: relative;
}

.transTable .icon {
  width: 90px;
  vertical-align: top;
  padding: 0;
}

.transTable .intro {
  padding-bottom: 40px;
}

.transTable h4 {
  font-size: 1.25rem;
  color: #5d5d5d;
  font-weight: bold;
  text-align: left;
  margin: 0px 0 20px 0;
  letter-spacing: 1px;
}

.max-lg-size .transTable {
  margin-bottom: 0;
}

.max-lg-size .transTable .intro {
  padding-bottom: 10px;
}

#Map {
  width: 100%;
  height: 500px;
  position: relative;
  clear: both;
  background: #e3e3e3;
}

.max-sm-size #Map {
  height: 300px;
}

#About.jobs .Line {
  margin: 40px 0 90px 0;
}

.max-sm-size #About.jobs .Line {
  margin: 20px 0 30px 0;
}

#About.jobs .btnGrop {
  text-align: center;
  display: inline-block;
  margin: 60px 0 30px 0;
}

#About.jobs .btnGrop a {
  display: inline-block;
  float: none;
  text-align: center;
  margin: 0 20px;
  font-family: Microsoft JhengHei , arial;
}

.max-sm-size #About.jobs .btnGrop {
  margin: 20px 0 30px 0;
}

.max-sm-size #About.jobs .btnGrop a {
  margin: 10px 0;
}

.jobTable {
  margin: 40px 0;
}

.jobTable .imgBox {
  width: 320px;
}

.jobTable .title {
  height: 50px;
}

.jobTable .intro {
  vertical-align: top;
}

.jobTable h4 {
  font-size: 1.563rem;
  color: #0066cc;
  font-weight: normal;
  text-align: left;
  margin: 0px 0 25px 0;
}

.max-md-size .jobTable {
  margin: 30px 0;
}

.max-md-size .jobTable td {
  margin-bottom: 0;
}

.max-md-size .jobTable .title {
  height: auto;
}

.max-md-size .jobTable h4 {
  font-size: 1.125rem;
  margin: 20px 0 5px 0;
}

.welfareTable h4 {
  font-size: 1.563rem;
  color: #767676;
  font-weight: normal;
  text-align: center;
  margin: 20px 0;
}

.welfareTable td {
  width: 25%;
  padding: 0 20px;
  vertical-align: top;
}

.max-md-size .welfareTable td {
  width: 50%;
  display: inline-block;
}

.max-sm-size .welfareTable td {
  width: 100%;
}

/* ==============================================================
   [ contact.php ]
 ================================================================*/
.contactMap, .aboutDataContent {
  width: 50%;
  float: left;
  display: block;
}

.max-lg-size .contactMap, .max-lg-size .aboutDataContent {
  width: 100%;
}

.contactMap {
  position: relative;
}

.contactMap .map {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  background: #e3e3e3;
}

.min-lg-size .contactMap .map {
  height: 700px;
}

.max-lg-size .contactMap .map {
  height: 300px;
}

.aboutDataContent {
  padding: 40px;
}

.aboutDataContent .blueText {
  font-size: 1.563rem;
  color: #0066cc;
  font-weight: normal;
  text-align: left;
  margin-top: 10px;
}

.aboutDataContent .Line {
  margin: 50px 0;
}

.max-lg-size .aboutDataContent {
  padding: 30px 20px;
}

.max-lg-size .aboutDataContent .Line {
  margin: 30px 0;
}

.contactForm {
  margin-bottom: 30px;
}

.contactForm .form-group {
  border: 1px solid #cecece;
}

.contactForm .form-group.short {
  width: 49%;
}

.contactForm .row .form-group:nth-child(2) {
  margin-left: 2%;
}

.contactForm .control-label {
  margin-right: 15px;
}

.contactForm .form-control, .contactForm select {
  border: 0px;
}

.contactForm .form-control, .contactForm select, .contactForm .TextArea .form-control {
  width: 65%;
}

.contactForm .Verity .form-control {
  width: 50% !important;
}

.max-lg-size .contactForm .row .form-group:nth-child(2) {
  margin-left: 0%;
}

.max-lg-size .contactForm .Verity img {
  top: 38px;
  right: 2%;
}

.max-sm-size .contactForm form {
  width: 84%;
  margin: 30px;
}

.contactTable {
  color: #626262;
}

.contactTable .icon {
  width: 35px;
  font-size: 1.25rem;
  color: #2a2a2b;
  padding: 0 0 0 12px;
  vertical-align: top;
}

/* ==============================================================
   [ News ]
 ================================================================*/
.max-sm-size #News section #breadcrumb .container {
  padding: 0;
}

#News .btnGrop {
  text-align: center;
  margin: 50px 0;
}

.max-sm-size #News .btnGrop {
  margin: 20px 0 40px 0;
}

#Container {
  padding: 70px 0px;
}

.max-sm-size #Container {
  padding: 30px 20px;
}

.newsBox {
  width: 31%;
  height: auto;
  position: relative;
  margin: 15px 1%;
  display: none;
  vertical-align: top;
  background: #f9f9f9;
  border: 1px solid #efefef;
  color: transparent;
}

.newsBox .cover {
  background: #0066cc;
  opacity: 0;
  z-index: 99;
  transition: opacity 0.2s ease-out;
}

.newsBox .cover span {
  width: 75px;
  height: 75px;
  border-radius: 99em;
  background: transparent;
  border: 1px solid #fff;
  font-size: 52px;
  color: #fff;
  font-weight: normal;
  text-align: center;
  line-height: 65px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 0;
  transform: translateY(300%);
  transition: opacity 0.25s, transform 0.3s;
}

.newsBox .imgBox {
  width: 100%;
  height: 265px;
  overflow: hidden;
  position: relative;
}

.newsBox .imgBox img {
  width: 100%;
  height: auto;
  transform: scale(1);
  transition: transform 0.3s ease-out;
}

.newsBox .dateBox {
  width: 60px;
  height: 60px;
  border-radius: 99em;
  background: #0066cc;
  position: absolute;
  bottom: 18px;
  left: 18px;
  z-index: 9;
  overflow: hidden;
}

.newsBox .dateBox:before {
  content: "";
  width: 100%;
  height: 50%;
  position: absolute;
  background: #0d3d83;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.newsBox .dateBox span {
  color: #fff;
  text-align: center;
  display: block;
  position: relative;
}

.newsBox .dateBox span.day {
  font-size: 1.25rem;
  font-weight: bold;
  top: 2px;
}

.newsBox .dateBox span.month {
  font-size: 0.813rem;
}

.newsBox .textBox {
  width: 100%;
  height: 220px;
  padding: 15px 20px;
  position: relative;
  transition: background 0.3s ease-out;
}

.newsBox .textBox h3 {
  font-size: 1.25rem;
  color: #3f3f3f;
  font-weight: normal;
  margin: 0px 0;
}

.newsBox .textBox .yearBox {
  padding: 5px 0 10px 0;
  border-bottom: 2px solid #ededed;
  position: relative;
}

.newsBox .textBox .yearBox span {
  font-size: 0.813rem;
  color: #979797;
  display: block;
  letter-spacing: 1px;
}

.newsBox .textBox .yearBox:after {
  content: "";
  width: 70px;
  height: 2px;
  background: #0066cc;
  display: block;
  position: absolute;
  bottom: -2px;
  left: 0;
}

.newsBox .textBox p.intro {
  font-size: 0.938rem;
  color: #767676;
  height: 82px;
  overflow: hidden;
}

.newsBox:hover .imgBox img, .newsBox:focus .imgBox img {
  transform: scale(1.1);
  transition: transform 0.25s ease-out;
}

.newsBox:hover .textBox, .newsBox:focus .textBox {
  background: #0066cc;
  transition: background 0.3s ease-out;
}

.newsBox:hover .textBox > *, .newsBox:focus .textBox > * {
  color: #fff !important;
  transition: color 0.2s ease-out;
}

.newsBox:hover .textBox .yearBox span, .newsBox:focus .textBox .yearBox span {
  color: #ddd;
  transition: color 0.2s ease-out;
}

.newsBox:hover .textBox .yearBox:after, .newsBox:focus .textBox .yearBox:after {
  background: #fff;
  transition: background 0.2s ease-out;
}

.max-lg-size .newsBox .imgBox {
  height: auto;
}

.max-sm-size .newsBox {
  width: 47%;
  margin: 10px 1.3%;
}

/*.max-sm-size .newsBox p.intro {
  height: auto;
}*/

.max-xs-size .newsBox {
  width: 100%;
  margin: 10px 0%;
}

.monthSelectWrapper {
  width: 155px;
  right: 0;
  position: absolute;
  top: 3px;
}

.monthSelectWrapper .control-label {
  font-size: 0.938rem;
  color: #3f3939;
  margin-right: 10px;
}

.monthSelectWrapper select {
  width: 85px;
  padding: 5px 10px;
  background: #fff;
  border: 1px solid #d5d5d5;
}

.newsTitleBox {
  padding: 45px 0 0 0;
  border-bottom: 1px solid #ececec;
  margin-bottom: 80px;
}

.newsTitleBox h2 {
  font-size: 1.875rem;
  color: #4b4b4b;
  font-weight: normal;
  text-align: left;
  line-height: 2.188rem;
  letter-spacing: 2px;
  margin: 0px 0 10px 0;
}

.newsTitleBox .date {
  font-size: 0.938rem;
  color: #0066cc;
  font-weight: normal;
  text-align: left;
  letter-spacing: 1px;
}

.newsTitleBox .shareBox {
  position: absolute;
  right: 10px;
  top: 45px;
}

.newsTitleBox .shareBox a {
  font-size: 1.563rem;
  color: #4b4b4b;
  display: inline-block;
  margin: 0 10px;
}

.newsTitleBox .shareBox a.fb:hover, .newsTitleBox .shareBox a.fb:focus {
  color: #46629e;
}

.newsTitleBox .shareBox a.wechat {
  font-size: 1.875rem;
}

.newsTitleBox .shareBox a.wechat:hover, .newsTitleBox .shareBox a.wechat:focus {
  color: #37903a;
}

.max-md-size .newsTitleBox .shareBox {
  top: initial;
  bottom: 8px;
}

.max-sm-size .newsTitleBox {
  padding: 30px 0 0 0;
}

.max-sm-size .newsTitleBox h2 {
  font-size: 1.563rem;
}

/* ==============================================================
   [ products.php ]
 ================================================================*/
.proSelectWrapper {
  width: 50%;
  height: 70px;
  display: block;
  position: absolute;
  background: rgba(0, 102, 204, 0.6);
  min-width: 630px;
  bottom: 0;
  right: 0;
  z-index: 999;
}

.proSelectWrapper:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 70px 80px;
  border-color: transparent transparent rgba(0, 102, 204, 0.6) transparent;
  position: absolute;
  left: -80px;
}

.proSelectWrapper .form {
  float: left;
  width: 100%;
  padding: 15px 10px;
}

.proSelectWrapper .form-group {
  width: 38%;
  margin: 0 1%;
  float: left;
}

.proSelectWrapper select 
{
  background: transparent;
  color: #fff;
  border-bottom: #557ea7 1px solid;
  border-width: 0 0 1px 0;
}

.proSelectWrapper select option {
  color: #222;
  padding: 3px 5px;
}

.proSelectWrapper button {
  font-size: 0.938rem;
  color: #fefefe;
  background: transparent;
  padding: 7px 25px 6px 25px !important;
  border-radius: 0;
  display: inline-block;
  position: relative;
  text-align: center;
  border: 1px solid #fefefe;
  margin: 5px 0 0 5px;
  font-family: Microsoft JhengHei , arial;
  transition: color 0.3s, background 0.3s ease-out;
}

.proSelectWrapper button:hover, .proSelectWrapper button:focus {
  color: #165390;
  background: #fefefe;
  transition: color 0.3s, background 0.3s ease-out;
}

.min-sm-size .proSelectWrapper .form {
  max-width: 630px;
}

.max-sm-size .proSelectWrapper {
  min-width: 100%;
  height: auto;
  position: relative;
  background: rgba(0, 102, 204, 0.95);
}

.max-sm-size .proSelectWrapper .form-group {
  width: 100%;
  margin: 10px 0%;
  float: none;
}

.max-sm-size .proSelectWrapper select {
  padding: 10px 12px;
  border: 1px solid #ececec;
}

.max-sm-size .proSelectWrapper button {
  width: 100%;
  margin: 5px 0 10px 0;
  padding: 10px 12px !important;
}

.proTypesWrapper {
  padding-top: 40px;
  margin-bottom: 5px;
  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

.max-sm-size .proTypesWrapper {
  padding-top: 0px;
}

.proTypeBox {
  width: 39%;
  max-width: 470px;
  display: inline-block;
  vertical-align: top;
  margin-top: 80px;
  position: relative;
  float: left;
}

.proTypeBox h2 {
  font-size: 2.188rem;
  color: #4e4e4e;
  font-weight: normal;
  text-align: left;
  margin-bottom: 25px;
  line-height: 2.5rem;
}

.proTypeBox h2:after {
  content: "";
  width: 50px;
  height: 3px;
  display: block;
  position: relative;
  background: #0066cc;
  margin-top: 25px;
  margin-left: 3px;
}

.proTypeBox p {
  color: #4b4b4b;
}

.max-bg-size .proTypeBox {
  width: 30%;
}

.max-md-size .proTypeBox {
  margin-top: 5px;
}

.max-sm-size .proTypeBox {
  width: 100%;
  margin: 0 0 10px 0;
}

.max-sm-size .proTypeBox h2 {
  font-size: 1.688rem;
  margin-bottom: 20px;
}

.max-sm-size .proTypeBox h2:after {
  margin-top: 20px;
}

.proTypeSilder {
  width: 60%;
  display: inline-block;
  float: right;
}

.max-bg-size .proTypeSilder {
  width: 70%;
  padding: 0 30px;
}

.max-bg-size .proTypeSilder .imgBox {
  height: auto;
}

.max-bg-size .proTypeSilder .slick-prev {
  left: 20px;
}

.max-bg-size .proTypeSilder .slick-next {
  right: 20px;
}

.max-bg-size .proTypeSilder .slick-prev:hover, .max-bg-size .proTypeSilder .slick-next:hover {
  transform: translateX(0px);
}

.max-lg-size .proTypeSilder p.format {
  margin: 2px 0 0px 0;
}

.max-sm-size .proTypeSilder {
  width: 100%;
  margin: 0 0 10px 0;
  padding: 0 0px;
}

.max-sm-size .proTypeSilder .slick-prev {
  left: 5px;
}

.max-sm-size .proTypeSilder .slick-next {
  right: 5px;
}

.productBox {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  padding: 0 35px;
  color: transparent;
}

.productBox .imgBox {
  width: 100%;
  height: 260px;
  display: block;
  position: relative;
  overflow: hidden;
}

.productBox .imgBox img {
  max-width: 100%;
  height: auto;
}

.productBox .imgBox .cover {
  width: 80px;
  height: 80px;
  border-radius: 99em;
  background: #0066cc;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 0;
  transform: translateY(180px);
  transition: opacity 0.25s, transform 0.3s ease-out;
}

.productBox .imgBox .cover:before {
  content: "+";
  font-size: 50px;
  color: #fff;
  font-weight: normal;
  text-align: center;
  line-height: 72px;
}

.productBox h3 {
  font-size: 1.25rem;
  color: #4e4e4e;
  font-weight: bold;
  text-align: center;
  width: 100%;
  height: 50px;
  overflow: hidden;
  margin: 0;
  position: relative;
}

.productBox p {
  display: block;
}

.productBox p.format {
  font-size: 0.938rem;
  color: #b1b1b1;
  font-weight: normal;
  text-align: center;
  border-bottom: #e2e2e2 1px solid;
  margin: 2px 0 20px 0;
  padding-bottom: 10px;
}

.productBox p.intro {
  font-size: 0.938rem;
  color: #4b4b4b;
  font-weight: normal;
  text-align: left;
  padding-bottom: 30px;
  margin-bottom: 0;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}

.productBox p.intro:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  background: #0066cc;
  height: 4px;
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.productBox:hover .imgBox .cover, .productBox:focus .imgBox .cover {
  opacity: 0.9;
  transform: translateY(0px);
  transition: opacity 0.25s, transform 0.3s ease-out;
}

.productBox:hover p.intro:before, .productBox:focus p.intro:before {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.max-sm-size .productBox h3 {
  height: auto;
}

#Products .mainBanner {
  height: 550px;
}

#Products .mainBanner .textBox p {
  width: 100%;
  max-width: 570px;
}

.max-sm-size #Products .mainBanner {
  height: 350px;
}

#Products.Result .mainBanner {
  height: 350px;
}

.max-sm-size #Products.Result .mainBanner {
  height: 300px;
}

#Products.Result .proBox {
  width: 33%;
  padding: 0 20px;
  margin: 35px 0;
  display: inline-block;
}

.max-md-size #Products.Result .proBox {
  width: 49%;
  margin: 20px 0;
}

.max-xs-size #Products.Result .proBox {
  width: 100%;
  margin: 15px 0;
  padding: 0 10px;
}

#Products.Result .pagination {
  padding: 30px 0 50px 0;
}

/* ==============================================================
   [ product.php ]
 ================================================================*/
#Products.Intro #header {
  box-shadow: 0 0 2px #ccc;
}

.proIntroContent {
  padding: 70px 0;
}

.max-md-size .proIntroContent {
  padding: 40px 0 30px;
}

.max-sm-size .proIntroContent {
  padding: 25px 0;
}

.proIntroArea {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  padding: 0 25px;
}

.proIntroArea h2 {
  font-size: 2.188rem;
  color: #303030;
  font-weight: normal;
  text-align: left;
  margin: 0;
  line-height: 2.5rem;
}

.proIntroArea p.type {
  font-size: 0.938rem;
  color: #a0a0a0;
  font-weight: normal;
  text-align: left;
  margin: 15px 0 25px 0;
}

.proIntroArea .html p {
  color: #4b4b4b;
}

.proIntroArea .btn {
  font-size: 0.938rem;
  color: #fff;
  background: #0066cc;
  padding: 11px 28px 10px 28px;
  border-radius: 0;
  display: inline-block;
  position: relative;
  text-align: center;
  margin: 30px 0 0 0;
  transition: background 0.3s ease-out;
}

.proIntroArea .btn:hover, .proIntroArea .btn:focus {
  background: #0d3d83;
  transition: background 0.3s ease-out;
}

.max-sm-size .proIntroArea h2 {
  font-size: 1.688rem;
  line-height: 2.188rem;
  margin: 20px 0 0 0;
}

.max-sm-size .proIntroArea p.type {
  margin: 10px 0;
}

.max-sm-size .proIntroArea .btn {
  width: 100%;
  padding: 7px 28px 6px 28px;
  margin: 0;
}

.proIntroSilder {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

.proIntroSilder img {
  max-width: 100%;
  height: auto;
}

.max-md-size .proIntroSilder {
  margin-top: 40px;
}

.proIntroNavSilder {
  max-width: 500px;
  width: 100%;
  margin: 30px auto;
  display: block;
  text-align: center;
}

.proIntroNavSilder .slick-list {
  padding: 0 !important;
}

.proIntroNavSilder .proBox {
  width: 90px;
  height: 90px;
  display: block;
  position: relative;
  position: relative;
  margin: 0 4px;
  padding: 0;
}

.proIntroNavSilder .proBox .border {
  border: 1px solid #c1c1c1;
  transform: border 0.3s ease-out;
}

.proIntroNavSilder .proBox img {
  max-width: 100%;
  height: auto;
}

.proIntroNavSilder .proBox.slick-current .border {
  border: 1px solid #999;
  transform: border 0.3s ease-out;
}

.proIntroNavSilder .slick-prev,
.proIntroNavSilder .slick-next {
  width: 35px;
  height: 35px;
  color: #b3b3b3;
  transition: all 0.3s ease-out;
}

.proIntroNavSilder .slick-prev:before,
.proIntroNavSilder .slick-next:before {
  font-family: 'icomoon' !important;
  font-size: 1.875rem;
  color: #b3b3b3;
  display: block;
  top: 0px;
  position: relative;
  transition: color 0.2s ease-out;
}

.proIntroNavSilder .slick-prev:hover,
.proIntroNavSilder .slick-next:hover {
  transition: all 0.3s ease-out;
}

.proIntroNavSilder .slick-prev:hover:before,
.proIntroNavSilder .slick-next:hover:before {
  color: #847878;
  transition: color 0.2s ease-out;
}

.proIntroNavSilder .slick-prev {
  left: -60px;
}

.proIntroNavSilder .slick-prev:before {
  content: "\e909";
  right: 1px;
}

.proIntroNavSilder .slick-prev:hover {
  transform: translateX(-8px);
}

.proIntroNavSilder .slick-next {
  right: -60px;
}

.proIntroNavSilder .slick-next:before {
  content: "\e90a";
  right: -1px;
}

.proIntroNavSilder .slick-next:hover {
  transform: translateX(8px);
}

.max-sm-size .proIntroNavSilder {
  width: 70%;
  margin: 20px auto;
}

.max-sm-size .proIntroNavSilder .slick-prev {
  left: -35px;
}

.max-sm-size .proIntroNavSilder .slick-next {
  right: -35px;
}

.proIntroTabWrapper {
  border-top: 4px solid #ededed;
}

.proIntroTabWrapper .tabsBG {
  width: 100%;
  height: 48px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  background: #fafafa;
}

.proTabs {
  position: relative;
  margin: 0px auto 40px auto;
  text-align: center;
  overflow: hidden;
  z-index: 1;
}

.proTabs .labelWrapper {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  background: #fafafa;
}

.proTabs label {
  width: 32.5%;
  padding: 11px 30px 10px 30px;
  background: #fff;
  position: relative;
  cursor: pointer;
  margin: 0;
  float: left;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}

.firefox .proTabs label {
  width: 32%;
}

.proTabs label:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  background: #0066cc;
  height: 4px;
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.25s;
  transition-duration: 0.25s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.proTabs label h2 {
  font-size: 15px;
  color: #3d3d3d;
  font-weight: normal;
  text-align: center;
  margin: 0;
  transition: color 0.2s;
}

.proTabs label:hover {
  background: #efefef;
  transition: border 0.2s, background 0.3s ease-out;
}

.proTabs label:hover:before {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.proTabs input {
  opacity: 0;
  visibility: none;
  width: 1px;
}

.proTabs input:checked + label {
  background: #efefef;
  border-top: 2px solid #0066cc \9\0;
  transition: border 0.2s, background 0.3s ease-out;
}

.proTabs input:checked + label:before {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.proTabs .content {
  position: relative;
  width: 100%;
  min-height: 300px;
  height: auto;
  z-index: 5;
  overflow: hidden;
  margin: 60px 0 0 0;
}

.max-sm-size .proTabs {
  margin: 0px auto 30px auto;
}

.max-sm-size .proTabs label {
  width: 100% !important;
  padding: 7px 15px 6px 15px;
  float: left;
  margin: 0;
  left: 0px;
  border: 1px solid #ddd;
}

.max-sm-size .proTabs label.tab-label-1, .max-sm-size .proTabs label.tab-label-2 {
  border-bottom: 0;
}

.max-sm-size .proTabs table {
  text-align: left;
}

.content .individualBox {
  position: absolute;
  top: 0;
  z-index: 1;
  opacity: 0;
  visibility: none;
  transition: all ease-out 0.35s;
}

.content-1, .content-3 {
  -webkit-transform: translateX(-250px);
  -moz-transform: translateX(-250px);
  -o-transform: translateX(-250px);
  -ms-transform: translateX(-250px);
  transform: translateX(-250px);
}

.content-2 {
  -webkit-transform: translateX(250px);
  -moz-transform: translateX(250px);
  -o-transform: translateX(250px);
  -ms-transform: translateX(250px);
  transform: translateX(250px);
}

.proTabs input.tab-selector-1:checked ~ .content .content-1,
.proTabs input.tab-selector-2:checked ~ .content .content-2,
.proTabs input.tab-selector-3:checked ~ .content .content-3 {
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  -o-transform: translateX(0px);
  -ms-transform: translateX(0px);
  transform: translateX(0px);
  z-index: 100;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  visibility: none;
  position: relative;
  z-index: 2;
  transition: all ease-out 0.35s;
}

.proIntroHtml .row {
  padding-top: 30px;
  padding-bottom: 30px;
}

.proIntroHtml h3 {
  margin: 30px 0;
}

.proIntroHtml p {
  font-size: 1.125rem;
}

.proIntroHtml .type01 h3, .proIntroHtml .type01 p {
  text-align: center;
}

.proIntroHtml .type02 h3 {
  text-align: left;
}

.proIntroHtml .type03 h3 {
  text-align: left;
}

.proIntroHtml .type04 h3 {
    text-align: right;
}

.max-sm-size .proIntroHtml .row {
  padding-top: 10px;
  padding-bottom: 10px;
}

.max-sm-size .proIntroHtml h3 {
  margin: 15px 0;
  text-align: center;
}

/* ==============================================================
   [ search_result.php ]
 ================================================================*/
/* ==============================================================
   [ Download ]
 ================================================================*/
.downloadSelectWrapper {
  padding: 20px 0;
  border-bottom: #d9d9d9 1px solid;
}

.downloadSelectWrapper label.title {
  font-size: 1.875rem;
  color: #0066cc;
  position: relative;
  margin: 10px 20px 0 0;
}

.downloadSelectWrapper .form-group, .downloadSelectWrapper label.title {
  float: left;
}

.downloadSelectWrapper .form-group {
  width: 26%;
}

.downloadSelectWrapper .form-group select {
  border: 1px solid #c7c7c7;
}

.downloadSelectWrapper .button {
  font-size: 1.875rem;
  color: #6b6b6b;
  position: relative;
  padding: 10px 15px;
  transform: rotate(0deg);
  transition: color 0.2s, transform 0.3s ease-out;
}

.downloadSelectWrapper .button:hover, .downloadSelectWrapper .button:focus {
  color: #0066cc;
  transform: rotate(40deg);
  transition: color 0.2s, transform 0.3s ease-out;
}

.max-md-size .downloadSelectWrapper label.title, .max-md-size .downloadSelectWrapper .form-group, .max-md-size .downloadSelectWrapper .button {
  width: 100%;
}

.max-md-size .downloadSelectWrapper label.title {
  text-align: center;
  margin: 15px 0;
  font-size: 1.563rem;
}

.max-md-size .downloadSelectWrapper .form-group {
  margin: 7px 0;
  padding: 0;
}

.max-md-size .downloadSelectWrapper .button {
  border: 1px solid #c7c7c7;
  margin-top: 7px;
  padding: 5px 15px !important;
}

.max-md-size .downloadSelectWrapper .button:hover, .max-md-size .downloadSelectWrapper .button:focus {
  color: #0066cc;
  transform: rotate(0deg);
  transition: color 0.2s, transform 0.3s ease-out;
}

.Download .content {
  padding-bottom: 100px;
}

.max-sm-size .Download .content {
  padding-bottom: 15px;
}

.tableWrapper {
  margin: 40px 0 20px 0;
}

.downloadTitle {
  font-size: 1.875rem;
  color: #4b4b4b;
  font-weight: normal;
  text-align: center;
}

.max-sm-size .downloadTitle {
  font-size: 1.25rem;
  margin: 15px 0 15px;
  border-top: 1px solid #ccc;
  padding-top: 25px;
}

.max-sm-size .downloadTitle:first-child {
  border-top: 0;
  padding-top: 0;
}

#downloadTable {
  border-radius: 5px;
}

#downloadTable tr {
  background: #fff;
  transition: background 0.3s ease-out;
}

/*#downloadTable tr:first-child th:nth-child(1) {
  border-top-left-radius: 5px;
}

#downloadTable tr:first-child th:nth-child(3) {
  border-top-right-radius: 5px;
}

#downloadTable tr:last-child td:nth-child(1) {
  border-bottom-left-radius: 5px;
}

#downloadTable tr:last-child td:nth-child(3) {
  border-bottom-right-radius: 5px;
}*/

#downloadTable tr:hover {
  background: rgba(0, 102, 204, 0.1);
  transition: background 0.3s ease-out;
}

#downloadTable th, #downloadTable td {
  padding: 10px 20px;
  text-align: left;
  font-weight: normal;
  font-size: 0.938rem;
  border-bottom: #bdbdbd 1px solid;
}

#downloadTable th {
  color: #fff;
  background: #393939;
}

#downloadTable th:nth-child(1), #downloadTable th:nth-child(2), #downloadTable th:nth-child(3), #downloadTable th:nth-child(4) {
    border-right: 1px solid #bdbdbd;
}

#downloadTable td {
  color: #4b4b4b;
  transition: background 0.3s ease-out;
  border-right: 1px solid #bdbdbd;
}

#downloadTable td:nth-child(1) {
  border-left: 1px solid #bdbdbd;
}

#downloadTable .name {
  width: 25%;
}

#downloadTable .download {
  width: 10%;
  text-align: center;
}

#downloadTable .download a {
    /*color: #c9c9c9;*/
    display: block;
}

#downloadTable .download a:hover span, #downloadTable .download a:focus span {
  transform: translateY(5px);
  color: #0066cc;
  transition: color 0.2s, transform 0.3s ease-out;
}

#downloadTable .download .text {
  font-size: 1.063rem;
}

#downloadTable .icon {
  font-size: 1.563rem;
  color: #c9c9c9;
  font-weight: normal;
  text-align: center;
  transition: color 0.2s ease-out;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  transform: translateY(0px);
  transition: color 0.2s, transform 0.3s ease-out;
}

.max-sm-size #downloadTable th {
  display: none;
}

.max-sm-size #downloadTable td, .max-sm-size #downloadTable td {
  padding: 7px 15px;
}

.max-sm-size #downloadTable td {
  display: block;
  width: 100%;
  border: 0;
  margin-bottom: 0;
  border-bottom: #bdbdbd 1px solid;
}

.max-sm-size #downloadTable td:last-child {
  border-bottom: 0;
}

.max-sm-size #downloadTable td span {
  margin-right: 15px;
  font-weight: bold;
}

.max-sm-size #downloadTable tr {
  display: block;
  margin: 15px 0;
  border: 1px solid #bdbdbd;
}

.max-sm-size #downloadTable tr.thTr {
  display: none;
}

.max-sm-size #downloadTable .download span {
  margin: 0 4px;
}

.max-sm-size #downloadTable .download .icon-link2 {
  font-size: 1.25rem;
}

#newDownloadTable {
  border-radius: 5px;
}

#newDownloadTable tr {
  background: #fff;
  transition: background 0.3s ease-out;
}

#newDownloadTable tr:first-child th:nth-child(1) {
  border-top-left-radius: 5px;
}

#newDownloadTable tr:first-child th:nth-child(4) {
  border-top-right-radius: 5px;
}

#newDownloadTable tr:last-child td:nth-child(1) {
  border-bottom-left-radius: 5px;
}

#newDownloadTable tr:last-child td:nth-child(4) {
  border-bottom-right-radius: 5px;
}

#newDownloadTable tr:hover {
  background: rgba(0, 102, 204, 0.1);
  transition: background 0.3s ease-out;
}

#newDownloadTable th, #newDownloadTable td {
  padding: 10px 20px;
  text-align: left;
  font-weight: normal;
  font-size: 0.938rem;
  border-bottom: #bdbdbd 1px solid;
}

#newDownloadTable th {
  color: #fff;
  background: #393939;
}

#newDownloadTable th:nth-child(1), #newDownloadTable th:nth-child(2), #newDownloadTable th:nth-child(3){
  border-right: 1px solid #bdbdbd;
}

#newDownloadTable td {
  color: #4b4b4b;
  transition: background 0.3s ease-out;
  border-right: 1px solid #bdbdbd;
}

#newDownloadTable td:nth-child(1) {
  border-left: 1px solid #bdbdbd;
}

#newDownloadTable .name {
  width: 25%;
}

#newDownloadTable .note {
  width: 10%;
  text-align: center;
}

#newDownloadTable .count {
  width: 10%;
  text-align: center;
}

#newDownloadTable .note a {
  color: #c9c9c9;
  display: block;
}

#newDownloadTable .note a:hover span, #newDownloadTable .note a:focus span {
  transform: translateY(5px);
  color: #0066cc;
  transition: color 0.2s, transform 0.3s ease-out;
}

#newDownloadTable .note .text {
  font-size: 1.063rem;
}

#newDownloadTable .download {
  width: 10%;
  text-align: center;
}

#newDownloadTable .download a {
  color: #c9c9c9;
  display: block;
}

#newDownloadTable .download a:hover span, #newDownloadTable .download a:focus span {
  transform: translateY(5px);
  color: #0066cc;
  transition: color 0.2s, transform 0.3s ease-out;
}

#newDownloadTable .download .text {
  font-size: 1.063rem;
}

#newDownloadTable .icon {
  font-size: 1.563rem;
  color: #c9c9c9;
  font-weight: normal;
  text-align: center;
  transition: color 0.2s ease-out;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  transform: translateY(0px);
  transition: color 0.2s, transform 0.3s ease-out;
}

.max-sm-size #newDownloadTable th {
  display: none;
}

.max-sm-size #newDownloadTable td, .max-sm-size #newDownloadTable td {
  padding: 7px 15px;
}

.max-sm-size #newDownloadTable td {
  display: block;
  width: 100%;
  border: 0;
  margin-bottom: 0;
  border-bottom: #bdbdbd 1px solid;
}

.max-sm-size #newDownloadTable td:last-child {
  border-bottom: 0;
}

.max-sm-size #newDownloadTable td span {
  margin-right: 15px;
  font-weight: bold;
}

.max-sm-size #newDownloadTable tr {
  display: block;
  margin: 15px 0;
  border: 1px solid #bdbdbd;
}

.max-sm-size #newDownloadTable tr.thTr {
  display: none;
}

.max-sm-size #newDownloadTable .download span {
  margin: 0 4px;
}

.max-sm-size #newDownloadTable .download .icon-link2 {
  font-size: 1.25rem;
}

#typeTable tr {
  background: #fff;
  transition: background 0.3s ease-out;
}

#typeTable tr:hover {
  background: rgba(0, 102, 204, 0.1);
  transition: background 0.3s ease-out;
}

#typeTable th, #typeTable td {
  padding: 10px 0px;
  text-align: left;
  font-weight: normal;
  font-size: 0.938rem;
  border-bottom: #bdbdbd 1px solid;
}

#typeTable th {
  color: #fff;
  background: #393939;
}

#typeTable th:nth-child(1), #typeTable th:nth-child(2) {
  border-right: 1px solid #bdbdbd;
}

#typeTable td {
    color: #4b4b4b;
    transition: background 0.3s ease-out;
    border-right: 1px solid #bdbdbd;
    text-align: center;
    width: 10%;
}

#typeTable td:nth-child(1) {
  border-left: 1px solid #bdbdbd;
}

#typeTable td.type {
  text-align: middle;
}

#typeTable .subTitle td {
  background: #e7e7e7;
}

.max-sm-size #typeTable td {
  width: 25%;
}

.max-sm-size #typeTable td.type {
  width: 50%;
}

p.introType {
  font-size: 1.125rem;
  color: #4b4b4b;
  font-weight: normal;
  text-align: center;
  margin: 30px 0;
}

p.introType span {
  display: inline-block;
  margin: 0 15px;
}

/* ==============================================================
   [ Complant ]
 ================================================================*/
.Complant .content {
  padding: 50px 20px 70px 20px;
}

.max-lg-size .Complant .content {
  padding: 30px 20px 30px 20px;
}

.Complant h3 {
  text-align: left;
  border-bottom: 2px solid #ececec;
  margin: 50px 0 30px;
  padding-bottom: 25px;
}

.Complant .form02 .form-control {
  width: 80%;
}

.Complant .form02 .TextArea .form-control {
  width: 98%;
}

.Complant .form02 .form-group.long .form-control {
  width: 90%;
}

/* ==============================================================
   [ Case ]
 ================================================================*/
#Case .fancybox-inner {
  overflow: hidden !important;
}

.caseWrapper {
  padding: 100px 20px;
}

.max-sm-size .caseWrapper {
  padding: 10px 20px 30px 20px;
}

.caseBox {
  display: none;
  padding: 40px 0;
  width: 40%;
}

.caseBox .imgBox {
  width: 100%;
  height: 300px;
  display: block;
  position: relative;
  overflow: hidden;
  float: left;
}

.caseBox .imgBox .cover {
  transition: background 0.3s ease-out;
}

.caseBox .imgBox .cover .play {
  width: 80px;
  height: 80px;
  border-radius: 99em;
  background: transparent;
  border: 1px solid #fff;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  transform: translateX(-50%) translateY(-300%);
  -webkit-transform: translateX(-50%) translateY(-300%);
  text-align: center;
  display: inline-block;
  position: absolute;
  transition: transform 0.35s ease-out;
}

.caseBox .imgBox .cover .play:before {
  content: "";
  display: block;
  position: relative;
  margin: 18px 0 0 25px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 22.5px 0 22.5px 39px;
  border-color: transparent transparent transparent #ffffff;
}

.caseBox .imgBox img {
  width: 100%;
  height: auto;
}

.caseBox .textBox {
  width: 60%;
  float: left;
  padding: 10px 0 10px 45px;
}

.caseBox .textBox h3 {
  font-size: 1.875rem;
  color: #595959;
  font-weight: normal;
  text-align: left;
}

.caseBox .textBox p {
  font-size: 0.938rem;
  color: #5e5e5e;
  font-weight: normal;
  text-align: left;
  margin: 20px 0 35px 0;
  height: 80px;
  overflow: hidden;
}

.caseBox .textBox .btn {
  font-size: 0.938rem;
  color: #fff;
  background: #0066cc;
  padding: 11px 28px 10px 28px;
  border-radius: 0;
  display: inline-block;
  position: relative;
  text-align: center;
}

.caseBox .intro{
	overflow: auto; 
	height: 180px;
}	

.caseBox:hover .imgBox .cover, .caseBox:focus .imgBox .cover {
  background: rgba(0, 102, 204, 0.8);
  transition: background 0.3s ease-out;
}

.caseBox:hover .imgBox .cover .play, .caseBox:focus .imgBox .cover .play {
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transition: transform 0.35s ease-out;
}

.caseWrapper .textBox {
  width: 60%;
  float: right;
  padding: 60px 30px 10px 100px; 
}

.max-lg-size .caseBox .imgBox, .max-lg-size .caseBox .textBox {
  float: none;
}

.max-lg-size .caseBox .imgBox {
  height: 250px;
  margin: auto;
}

.max-lg-size .caseWrapper .caseBox {
  width: 100%;
}

.max-lg-size .caseWrapper .textBox {
  width: 100%;
}

.max-lg-size .caseBox .intro{
  overflow: auto; 
  height: auto;
}	

.max-md-size .caseWrapper .textBox {
  width: 100%;
}

.fbconnect{
  color:#606060; 
}

.video-container {
  position: relative;
  padding-bottom: 56.25%; /*16:9*/
  padding-top: 30px; 
  height: 0; 
  overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ==============================================================
   [ Member ]
 ================================================================*/
.Modify .titleBox {
  border-bottom: 2px solid #ececec;
  margin: 25px 0;
}

.Modify .titleBox h3 {
  margin: 20px 0;
  display: inline-block;
}

.Modify .titleBox .logOut {
  position: absolute;
  right: 5px;
  bottom: 10px;
  color: #0066cc;
  text-decoration: underline;
}

.Modify .sideBar {
  width: 25%;
  float: left;
}

.Modify .sideBar li {
  width: 80%;
  background: #fff;
  margin-bottom: 2px;
  transition: background 0.3s ease-out;
}

.Modify .sideBar li a {
  width: 100%;
  height: auto;
  padding: 10px 20px;
  display: block;
}

.Modify .sideBar li:hover, .Modify .sideBar li:focus {
  background: #f1f1f1;
  transition: background 0.3s ease-out;
}

.Modify .sideBar li.active {
  border-left: 2px solid #0066cc;
  background: #f1f1f1;
}

.Modify .form02 {
  width: 75%;
  float: left;
  margin-bottom: 50px;
}

.Modify .form02 .form-control {
  width: 89%;
}

.Modify .form02 .Verity .form-control {
  width: 89% !important;
}

.max-lg-size .Modify .form02 .Verity .form-control {
  width: 100% !important;
}

.max-sm-size .Modify .sideBar, .max-sm-size .Modify .form02 {
  width: 100%;
  float: none;
}

.max-sm-size .Modify .sideBar li {
  width: 100%;
}

.memberLogin .form02 {
  margin: 50px 0;
}

.memberLogin .form-group {
  padding: 5px 0px;
  border: 1px solid #cecece;
}

.memberLogin .control-label {
  margin-right: 15px;
}

.memberLogin .form-control, .memberLogin select {
  border: 0px;
  width: 80%;
}

.memberLogin .Verity .form-control {
  width: 50% !important;
}

.max-sm-size .memberLogin .form02 {
  width: 84%;
  margin: 30px;
}

.max-sm-size .memberLogin .form02 .Verity img {
  top: 43px;
}

.Register .joinText {
  width: 90%;
  margin: 20px auto;
}

/* ==============================================================
   [ Catalog ]
 ================================================================*/
.HeaderStyle-FileName {
  width: 300px;
  background-color: #393939;
  color: White; 
  height: 46px; 
}

.HeaderStyle-Description {
  width: 780px;
  background-color: #393939; 
  color: White; 
  height: 46px;
}

.HeaderStyle-Filelink {
  width: 120px;
  background-color: #393939; 
  color: White; 
  height: 46px;
}

.Download-Button {
  text-align: center;
  height: 25px;
  width: 30px !important;
  opacity: 1 !important;
  margin: auto;
  display: block;
}

/* ==============================================================
   [ Locations.php ]
 ================================================================*/
#Locations header {
  box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, 0.15);
}

#worldMap {
  width: 100%;
  height: 700px;
  display: block;
  position: relative;
  background: #ddd;
}

#WorldSideBar {
  width: 600px;
  height: 100%;
  display: block;
  position: absolute;
  background: #fff;
  padding: 25px;
  box-shadow: 0 0 5px #ccc;
  top: 0;
  left: -600px;
  transition: left 0.6s ease-in-out;
}

#WorldSideBar .content {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

#WorldSideBar .sideBarToggle {
  width: 45px;
  height: 115px;
  display: block;
  position: absolute;
  background: #0066cc;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  top: 0;
  bottom: 0;
  right: -45px;
  margin: auto;
  cursor: pointer;
  box-shadow: 1px 0 3px #888686;
  transition: background 0.3s ease-out;
}

#WorldSideBar .sideBarToggle span {
  font-size: 1.25rem;
  color: #fff;
  text-align: center;
  line-height: 110px;
  display: block;
  position: relative;
  transform: translateX(0px);
  transition: transform 0.3s ease-out;
}

#WorldSideBar .sideBarToggle span:before {
  content: "\e90a";
}

#WorldSideBar .sideBarToggle:hover, #WorldSideBar .sideBarToggle:focus {
  background: #0d3d83;
  transition: background 0.3s ease-out;
}

#WorldSideBar .sideBarToggle:hover span, #WorldSideBar .sideBarToggle:focus span {
  transform: translateX(5px);
  transition: transform 0.3s ease-out;
}

#WorldSideBar h2 {
  font-size: 1.875rem;
  color: #626262;
  font-weight: normal;
  text-align: left;
}

#WorldSideBar .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: rgba(0, 0, 0, 0.5);
}

.max-bg-size #WorldSideBar {
  width: 450px;
  left: -450px;
}

.max-lg-size #WorldSideBar {
  width: 300px;
  left: -300px;
}

.max-sm-size #WorldSideBar {
  width: 250px;
  left: -250px;
}

.max-sm-size #WorldSideBar h2 {
  font-size: 1.563rem;
}

#WorldSideBar.open {
  left: 0;
  transition: left 0.6s ease-in-out;
}

#WorldSideBar.open .sideBarToggle span:before {
  content: "\e909";
}

#WorldSideBar.open .sideBarToggle:hover span, #WorldSideBar.open .sideBarToggle:focus span {
  transform: translateX(-5px);
}

.worldTagBox {
  padding: 30px 0;
}

.worldTagBox + .worldTagBox:before {
  content: "";
  position: absolute;
  top: 0;
}

.worldTagBox h3 {
  font-size: 1.25rem;
  color: #0066cc;
  font-weight: normal;
  text-align: left;
  letter-spacing: 1px;
  margin: 0;
}

.worldTagBox p.intro {
  font-size: 0.938rem;
  color: #626262;
  line-height: 1.875rem;pl
  margin-bottom: 0;
}

.max-sm-size .worldTagBox {
  padding: 20px 0;
}

.max-sm-size .worldTagBox h3 {
  font-size: 1rem;
  letter-spacing: 0;
}

.max-sm-size .worldTagBox p.intro {
  line-height: 1.688rem;
}
       }
   qq_41987694/article/details/81094583qq_41987694/article/details/81094583qq_41987694/article/details/81094583