@charset "UTF-8";
/*------------------------------------*\
    _mixin.scss 模組化樣式
\*------------------------------------*/
/*------------------------------------*\
    變數樣式 _var.scss
\*------------------------------------*/
/*------------------------------------*\
    _base.scss 常會套用的樣式
\*------------------------------------*/
@import url("../css/icomoon.css");
@import url("../css/flexslider.css");
@import url("../css/buttons.css");
@import url("../css/animate-custom.css");
.p-relative {
  position: relative;
}

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-font-smoothing: antialiased !important;
  /* 在有動畫效果時，某些元素上的文字粗細會被改變。 */
  text-rendering: optimizelegibility;
  /* 瀏覽器運算時易讀性優先，會啟用字距調整和連字。 */
  font-family: Arial, "新細明體", sans-serif, Helvetica, "LiHei Pro";
  font-size: 12.195px;
}

/* 連結效果 */
a {
  -webkit-transition: color 0.25s ease-out;
  transition: color 0.25s ease-out;
  text-decoration: none;
}

/* 字級大小樣式 */
.font-bigger {
  font-size: 18.75px;
}

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

.font-large {
  font-size: 14.07px;
}

.font-middle {
  font-size: 12.195px;
}

.font-small {
  font-size: 11.25px;
}

.font-remark {
  font-size: 10.32px;
}

/* 圖片 分隔線 */
.title-hr {
  background: transparent url("../images/title_hr_bg.png") right center no-repeat;
  width: auto;
  height: 30px;
  vertical-align: middle;
  margin-top: 30px;
  margin-bottom: 30px;
}

.title-hr span {
  padding: 7px 35px;
  color: #276180;
  background-color: #dceced;
  font-family: '微軟正黑體';
  font-size: 19px;
  letter-spacing: 0.1em;
  font-weight: normal;
}

.clearfloat {
  clear: both;
}

/* 浮動靠左樣式 */
.float_left {
  margin-right: 15px;
  margin-bottom: 10px;
}

/* 浮動靠右樣式 */
.float_right {
  margin-left: 15px;
  margin-bottom: 10px;
}

/*icon 垂直置中*/
.icon_text_bottom {
  vertical-align: text-bottom;
}

/* 特別標註 */
strong {
  color: #ae522c;
  margin-right: 2px;
  margin-left: 2px;
  font-weight: bold;
}

.strong_orange {
  color: #FF6600;
}

.strong_bg_orange {
  color: #FFFFFF;
  background-color: #FF6600;
}

/* clearfix：參考"變動欄高，float和clear合併使用.html" */
div#main:after {
  display: block;
  /* 說明2. 指定「display:block;」，變換成讓"父元素寬度"放到最大的"塊級元素" */
  clear: both;
  /* 說明3. 用clear屬性解除float */
  height: 0;
  visibility: hidden;
  content: ".";
  /* 說明1. 使用after虛擬元素和content屬性，然後在div container區塊後面產生行內區塊元素 */
}

/*------------------------------------*\
    重置css
\*------------------------------------*/
/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://www.cssportal.com
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*------------------------------------*\
    整體版面 _layout.scss
\*------------------------------------*/
body {
  background-image: url("../images/body_bg.jpg");
  background-repeat: repeat-x;
  background-color: #e9f8fb;
  position: relative;
}

#wrapper {
  margin: 0 auto;
  line-height: 1.8;
  font-family: Arial, "新細明體", sans-serif, Helvetica, "LiHei Pro";
  width: 1100px;
  border-radius: 0;
  position: relative;
}

@media screen and (max-width: 1199px) {
  #wrapper {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  #wrapper {
    overflow-x: hidden;
  }
}

.index_top {
  margin-left: 30px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media screen and (max-width: 1199px) {
  .index_top {
    margin-left: 0;
    -ms-flex-pack: distribute;
        justify-content: space-around;
  }
}

@media screen and (max-width: 767px) {
  .index_top {
    position: fixed;
    z-index: 999;
    width: 100%;
    -webkit-box-shadow: 0px 0px 5px 5px #696969;
            box-shadow: 0px 0px 5px 5px #696969;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

#top {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media screen and (max-width: 767px) {
  #top {
    padding: 10px;
    background-color: #fff;
  }
}

.menu_slide {
  margin-left: 10px;
}

.rwd_menu {
  display: none;
  width: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: all .3s;
  transition: all .3s;
}

@media screen and (max-width: 767px) {
  .rwd_menu {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
}

.index_menu_btn {
  display: none;
}

@media screen and (max-width: 767px) {
  .index_menu_btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: #FF9900;
    font-family: 'Microsoft JhengHei', serif;
    font-size: 20px;
    font-weight: bold;
  }
}

@media screen and (max-width: 320px) {
  .index_menu_btn {
    margin-top: 0;
  }
}

.menu_r {
  display: none;
  -webkit-transition: all .3s;
  transition: all .3s;
}

@media screen and (max-width: 767px) {
  .menu_r {
    width: 100%;
    display: inline-block;
    max-height: 0px;
    overflow: hidden;
    margin-left: 10px;
  }
  .menu_r li {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .menu_r li a {
    color: #FF9900;
    font-family: 'Microsoft JhengHei','PingFangTC-Regular', serif;
    font-size: 25px;
    font-weight: bold;
  }
  .menu_r li small {
    margin-left: 20px;
    color: #666666;
    font-family: 'Microsoft JhengHei','PingFangTC-Regular', serif;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
  }
  .menu_r.open {
    max-height: 550px;
  }
}

.fb_btn {
  text-align: left;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0px 20px;
  background-color: #4267B2;
  color: #fff !important;
}

@media screen and (max-width: 767px) {
  .fb_btn {
    padding: 4px 20px;
    margin-left: 10px;
  }
}

#wrapper #logo {
  display: block;
  width: 546px;
  height: 200px;
  background: transparent url("../images/logo_top.png") top center no-repeat;
  background-size: cover;
}

@media screen and (max-width: 767px) {
  #wrapper #logo {
    width: calc(100%);
    height: 55px;
    background-position: center center;
    background-size: cover;
    background-image: url("../images/logo_top_no.png");
  }
}

@media screen and (max-width: 320px) {
  #wrapper #logo {
    height: 45px;
  }
}

#wrapper #top .index-link {
  position: absolute;
  text-align: center;
  right: -700px;
  top: -20px;
  padding: 1px 20px;
  color: #fff;
  background-color: #00479d;
}

#wrapper #top .index-link2 {
  text-align: center;
  margin-top: 50px;
  margin-right: 220px;
  padding: 1px 20px;
  color: #fff;
  background-color: #00479d;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (max-width: 1199px) {
  #wrapper #top .index-link2 {
    margin-right: 0;
  }
}

@media screen and (max-width: 767px) {
  #wrapper #top .index-link2 {
    width: 80%;
    margin-top: 5px;
    padding: 5px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    display: none;
  }
}

.svg_icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  -webkit-mask-size: cover;
          mask-size: cover;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: #fff;
}

.svg_animation {
  -webkit-mask-image: url(/images/svg/push-button.svg);
          mask-image: url(/images/svg/push-button.svg);
}

.svg_menu {
  -webkit-mask-image: url(/images/svg/menu.svg);
          mask-image: url(/images/svg/menu.svg);
  width: 30px;
  height: 30px;
  margin-right: 10px;
  background-color: #FF9900;
}

#wrapper #top .index-link img {
  width: 15px;
  height: 15px;
  display: inline-block;
  position: relative;
  top: 2px;
}

#wrapper #top .index-fb {
  text-align: center;
  margin-top: 50px;
  width: 30px;
  height: 30px;
  background-color: #fff;
  background-image: url("../images/index_fbBtn.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media screen and (max-width: 767px) {
  #wrapper #top .index-fb {
    margin-top: 5px;
    -ms-flex-item-align: start;
        align-self: flex-start;
    margin-left: 8%;
    display: none;
  }
}

/* 各頁背景圖 */
.bg_index {
  background-image: url("../images/bg_index.png");
  background-repeat: no-repeat;
  background-position: center top;
}

@media screen and (max-width: 991px) {
  .bg_index {
    background-position: right top;
  }
}

@media screen and (max-width: 767px) {
  .bg_index {
    background: transparent;
  }
}

.bg_about {
  background: transparent url("../images/bg_product.png") right top no-repeat;
}

.bg_news {
  background: transparent url("../images/bg_product.png") right top no-repeat;
}

.bg_product {
  background: transparent url("../images/bg_product.png") right top no-repeat;
}

.bg_use {
  background: transparent url("../images/bg_product.png") right top no-repeat;
}

.bg_work {
  background: transparent url("../images/bg_work.png") right top no-repeat;
}

.bg_contact {
  background: transparent url("../images/bg_product.png") right top no-repeat;
}

.bg_media {
  background: transparent url("../images/bg_product.png") right top no-repeat;
}

/*
.bg_about {
  background: transparent url("../images/bg_about.png") right top no-repeat;
}

.bg_news {
  background: transparent url("../images/bg_news.png") right top no-repeat;
}

.bg_product {
  background: transparent url("../images/bg_product.png") right top no-repeat;
}

.bg_use {
  background: transparent url("../images/bg_use.png") right top no-repeat;
}

.bg_work {
  background: transparent url("../images/bg_work.png") right top no-repeat;
}

.bg_contact {
  background: transparent url("../images/bg_contact.png") right top no-repeat;
}

.bg_media {
  background: transparent url("../images/bg_media.png") right top no-repeat;
}
*/

#sidebar {
  width: 175px;
  display: inline-block;
}

@media screen and (max-width: 1199px) {
  #sidebar {
    position: fixed;
    z-index: 999;
    top: 5vh;
  }
}

@media screen and (max-width: 320px) {
  #sidebar {
    top: 0px;
  }
}

#sidebar #bg_service {
  background: transparent url("../images/bg_service.png") center top no-repeat;
  width: 205px;
  height: 343px;
}

#main {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 15px;
  color: #797979;
  letter-spacing: 0.1em;
  line-height: 2;
  margin-left: 20px;
  margin-bottom: 40px;
  width: 770px;
  min-height: 530px;
  border-top-width: 0px;
  -webkit-border-radius: 0;
  padding: 30px 30px;
  background-color: #fff;
}

#main.forProduct {
  max-width: calc(100% - 200px);
  min-width: 770px;
  width: auto;
}

@media screen and (max-width: 1199px) {
  #main.forProduct {
    max-width: 100%;
    min-width: auto;
    width: calc(100% - 40px);
    margin-bottom: 300px;
  }
}

@media screen and (max-width: 991px) {
  #main.forProduct {
    margin-bottom: 50px;
  }
}

@media screen and (max-width: 767px) {
  #main.forProduct {
    width: calc(100% - 20px);
    margin-left: 10px;
    padding: 10px;
  }
}

@media screen and (max-width: 1199px) {
  #main {
    max-width: 100%;
    min-width: auto;
    width: calc(100% - 40px);
    margin-bottom: 300px;
    min-height: auto;
  }
}

@media screen and (max-width: 991px) {
  #main {
    margin-bottom: 50px;
  }
}

@media screen and (max-width: 767px) {
  #main {
    width: calc(100% - 20px);
    margin-left: 10px;
    padding: 10px;
  }
}

#main_index {
  font-size: 15px;
  color: #797979;
  letter-spacing: 0.1em;
  line-height: 2;
  border-top-width: 0px;
  -webkit-border-radius: 0;
  padding: 30px 30px;
  padding-bottom: 100px;
  margin-top: 100px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

@media screen and (max-width: 1199px) {
  #main_index {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-bottom: 100px;
  }
}

@media screen and (max-width: 767px) {
  #main_index {
    margin-top: 0;
    margin-bottom: 20px;
    padding: 20px 10px;
  }
}

#main.box-shadow {
  /*-------For CSS3 陰影-------*/
  box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.2);
  /*-------For Firefox和Webkit  陰影-------*/
  -moz-box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.2);
  /*-------For IE 5.5 - 7 陰影-------*/
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=135, Color='#000000');
  /*-------For IE 8 陰影-------*/
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=135, Color='#000000')";
}


#main .div_p {
  margin-bottom: 20px;
}

#info {
  /* width: 226px; */
  /* height: 360px; */
  margin-left: 40px;
  margin-bottom: 10px;
  padding-top: 120px;
  position: absolute;
  bottom: 0px;
  left: 0;
  text-align: center;
  background: transparent url("../images/info_logo.png") top center no-repeat;
  /* icon顏色 */
}

#info li {
  color: #918784;
  font-size: 12px;
  line-height: 1;
  margin-bottom: 10px;
  text-align: left;
}

#info span.iconColor {
  color: #c9bcb8;
  margin-right: 20px;
}

#info .icon {
  padding-left: 20px;
  margin-top: 20px;
}

#info .icon a span {
  font-size: 35px;
}

#info .icon a:hover span {
  color: #ae522c;
}

.designBy {
  position: absolute;
  right: 0px;
  bottom: -30px;
  font-family: Arial, "新細明體";
  font-size: 11.25px;
  color: #D5D5D5;
  line-height: 1;
  letter-spacing: 0.1em;
}

.designBy a {
  color: #D5D5D5;
  padding: 2px 8px;
}

.designBy a:hover {
  color: #ACFF00;
  background-color: #444444;
}

.copyright {
  font-family: "Myriad Pro";
  font-size: 13px;
  color: #808080;
  line-height: 30px;
}

@media screen and (max-width: 767px) {
  .copyright {
    line-height: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.copyright a {
  color: #fff;
  padding: 2px 8px;
}

.copyright a:hover {
  color: #ACFF00;
}

#footer {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  color: #808080;
  padding: 10px;
  background: #131413;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
}

@media screen and (max-width: 767px) {
  #footer {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}

/* ======== content 內容區=========== */
.h2_title {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1.3;
  width: 272px;
  margin-left: 18%;
  margin-right: calc( 70% - 270px);
  margin-bottom: 20px;
  font-size: 50px;
  font-weight: 100;
  letter-spacing: 7px;
  font-family: 'Microsoft JhengHei', serif;
  color: #54901E;
}

.h2_title.forUse {
  color: #fff;
}

.h2_title.forUse b {
  color: #fff;
}

.h2_title small {
  font-size: 30px;
}

.h2_title b {
  color: #858585;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: normal;
}

.h2_title span {
  margin-left: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media screen and (max-width: 1199px) {
  .h2_title {
    margin-left: 18%;
  }
}

@media screen and (max-width: 767px) {
  .h2_title {
    margin-left: 5%;
    color: #fff;
  }
  .h2_title small, .h2_title b, .h2_title span {
    text-shadow: 0px 0px 3px black;
  }
  .h2_title b {
    color: #fff;
  }
}

.title_about {
  background: transparent url("../images/title_about.png") left top no-repeat;
}

.title_service {
  background: transparent url("../images/title_service.png") left top no-repeat;
  width: 300px;
  height: 80px;
  text-indent: -9999px;
  margin: 25px 0 5px 0;
}

.title_news {
  background: transparent url("../images/title_news.png") left top no-repeat;
}

.title_product {
  background: transparent url("../images/title_product.png") left top no-repeat;
}

.title_videos {
  background: transparent url("../images/title_videos.png") left top no-repeat;
}

.title_use {
  background: transparent url("../images/title_use.png") left top no-repeat;
}

.title_work {
  background: transparent url("../images/title_work.png") left top no-repeat;
}

.title_contact {
  background: transparent url("../images/title_contact.png") left top no-repeat;
}

.title_media {
  background: transparent url("../images/title_media.png") left top no-repeat;
}

.bt_goback a {
  text-indent: -9999px;
  width: 128px;
  height: 35px;
  display: block;
  background: transparent url("../images/bt_goback.jpg") center center no-repeat;
}

.bt_goback a:hover {
  background: transparent url("../images/bt_goback_hover.jpg") center center no-repeat;
  background-color: #6f6c63;
}

/* ========主選單區=========== */
#mainMenu {
  width: 175px;
}

@media screen and (max-width: 767px) {
  #mainMenu {
    display: none;
  }
}

.menu {
  display: block;
}

@media screen and (max-width: 1199px) {
  .menu {
    display: none;
  }
}

.menu li a {
  display: block;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  width: 175px;
  height: 58px;
  padding: 0px;
  margin: 0px;
  border: none;
  color: black;
  text-overflow: ellipsis;
  /*-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
          -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
          -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
          transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;*/
}

/****首頁****/
.menu li.menu_index a {
  opacity: 0.65;
  background: url("../images/mainMenu_01---.jpg") 0% 50% no-repeat;
}

.menu li.menu_index a:hover {
  opacity: 1;
  background: url("../images/mainMenu_01---.jpg") 100% 50% no-repeat;
}

/****關於****/
.menu li.menu_about a {
  opacity: 0.65;
  background: url("../images/mainMenu_01.jpg") 0% 50% no-repeat;
}

.menu li.menu_about a:hover {
  opacity: 1;
  background: url("../images/mainMenu_01.jpg") 100% 50% no-repeat;
}

/****最新消息****/
.menu li.menu_news a {
  opacity: 0.65;
  background: url("../images/mainMenu_02.jpg") 0% 50% no-repeat;
}

.menu li.menu_news a:hover {
  opacity: 1;
  background: url("../images/mainMenu_02.jpg") 100% 50% no-repeat;
}

/****產品介紹****/
.menu li.menu_product a {
  opacity: 0.65;
  background: url("../images/mainMenu_03.jpg") 0% 50% no-repeat;
}

.menu li.menu_product a:hover {
  opacity: 1;
  background: url("../images/mainMenu_03.jpg") 100% 50% no-repeat;
}

/****影音介紹****/
.menu li.menu_video a {
  opacity: 0.65;
  background: url("../images/mainMenu_videos.jpg") 0% 50% no-repeat;
}

.menu li.menu_video a:hover {
  opacity: 1;
  background: url("../images/mainMenu_videos.jpg") 100% 50% no-repeat;
}

/****適用範圍****/
.menu li.menu_use a {
  opacity: 0.65;
  background: url("../images/mainMenu_04.jpg") 0% 50% no-repeat;
}

.menu li.menu_use a:hover {
  opacity: 1;
  background: url("../images/mainMenu_04.jpg") 100% 50% no-repeat;
}

/****工程實績****/
.menu li.menu_work a {
  opacity: 0.65;
  background: url("../images/mainMenu_05.jpg") 0% 50% no-repeat;
}

.menu li.menu_work a:hover {
  opacity: 1;
  background: url("../images/mainMenu_05.jpg") 100% 50% no-repeat;
}

/****聯絡我們****/
.menu li.menu_contact a {
  opacity: 0.65;
  background: url("../images/mainMenu_06.jpg") 0% 50% no-repeat;
}

.menu li.menu_contact a:hover {
  opacity: 1;
  background: url("../images/mainMenu_06.jpg") 100% 50% no-repeat;
}

/****媒體報導****/
.menu li.menu_media a {
  opacity: 0.65;
  background: url("../images/mainMenu_07.jpg") 0% 50% no-repeat;
}

.menu li.menu_media a:hover {
  opacity: 1;
  background: url("../images/mainMenu_07.jpg") 100% 50% no-repeat;
}

.menu li.menu_fb a {
  background: url("../images/mainMenu_fb.png") no-repeat;
  background-position: center;
  background-size: cover;
}

/* ========回頂按鈕CSS=========== */
#gotop {
  display: none;
  position: fixed;
  right: 20px;
  bottom: 58px;
  padding: 7px 15px;
  font-size: 12px;
  background: #640F1F;
  color: white;
  cursor: pointer;
}

#gotop:hover {
  background: #777;
  color: #fff;
  cursor: pointer;
}

/* ========導覽列======== */
#nav {
  position: absolute;
  top: 10px;
  right: 20px;
  text-align: right;
  color: #a7a7a7;
  font-size: 11.25px;
  line-height: 2.2em;
  height: 2.2em;
  font-family: Arial, "新細明體";
  padding-right: 0px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #D2D2D2;
  padding-bottom: 0px;
  float: right;
  margin-left: 10px;
  margin-bottom: 0px;
}

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

#nav a:hover {
  color: #54901E;
}

.here {
  color: #54901E;
}

/* Style for Usual tabs */
.usual {
  color: #111;
  margin: 30px auto;
}

.usual img {
  max-width: 735px;
}

.usual li {
  list-style: none;
  float: left;
}

.usual ul a {
  display: inline-block;
  margin-right: 10px;
}

.usual ul a:hover {
  color: #FFF;
  background: #111;
}

.usual ul a.selected {
  margin-bottom: -5px;
  color: #000;
  cursor: default;
}

.usual > div {
  padding: 20px 0px 8px 10px;
  *padding-top: 3px;
  *margin-top: -15px;
  clear: left;
  font: 16px "微軟正黑體";
}

.usual div a {
  color: #000;
  font-weight: bold;
}

#usual2 {
  background: #0A0A0A;
  border: 1px solid #1A1A1A;
}

#usual2 a {
  background: #222;
}

#usual2 a:hover {
  background: #000;
}

#usual2 a.selected {
  background: snow;
}

#tabs3 {
  background: #FF9;
}

/*首頁 按鈕 */
.index_menu {
  height: calc(245px);
}

.index_menu div {
  opacity: 0.65;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
}

.index_menu div:hover {
  opacity: 1;
}

@media screen and (max-width: 1199px) {
  .index_menu {
    margin-bottom: 50px;
  }
}

@media screen and (max-width: 767px) {
  .index_menu {
    height: auto;
    width: 80%;
    margin: 5px auto;
    display: none;
  }
}

.index_menu .bt small {
  display: none;
}

.index_menu .bt h3 {
  display: none;
}

@media screen and (max-width: 767px) {
  .index_menu .bt {
    position: static;
    display: block;
    width: 100%;
    background: inherit;
    width: auto;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .index_menu .bt small {
    text-transform: uppercase;
    display: inline-block;
    color: #666666;
    font-size: 25px;
  }
  .index_menu .bt h3 {
    display: inline-block;
    color: #FF9900;
    font-family: 'Microsoft JhengHei', serif;
    font-size: 50px;
    font-weight: bold;
    line-height: 50px;
    padding: 5px 0;
  }
}

.bt_about {
  position: absolute;
  top: calc(280px - 200px);
  left: calc(100px);
  display: inline-block;
  background: url("../images/bt_about.png") left top no-repeat;
  width: 160px;
  height: 160px;
}

@media screen and (max-width: 991px) {
  .bt_about {
    left: 0;
  }
}

.bt_news {
  position: absolute;
  top: calc(400px - 200px);
  left: calc(225px + 20px);
  display: inline-block;
  background: url("../images/bt_news.png") left top no-repeat;
  width: 160px;
  height: 160px;
}

@media screen and (max-width: 991px) {
  .bt_news {
    left: calc(225px - 100px);
  }
}

.bt_product {
  position: absolute;
  top: calc(130px - 120px);
  left: calc(330px - 70px);
  display: inline-block;
  background: url("../images/bt_product.png") left top no-repeat;
  width: 160px;
  height: 160px;
}

@media screen and (max-width: 991px) {
  .bt_product {
    left: calc(330px - 200px);
  }
}

.bt_use {
  position: absolute;
  top: calc(130px - 200px);
  left: calc(330px + 30px);
  display: inline-block;
  background: url("../images/bt_use.png") left top no-repeat;
  width: 160px;
  height: 160px;
}

@media screen and (max-width: 991px) {
  .bt_use {
    left: calc(330px - 100px);
  }
}

.bt_work {
  position: absolute;
  top: calc(140px - 200px);
  left: calc(460px + 30px);
  display: inline-block;
  background: url("../images/bt_work.png") left top no-repeat;
  width: 160px;
  height: 160px;
}

@media screen and (max-width: 991px) {
  .bt_work {
    left: calc(460px - 100px);
  }
}

.bt_contact {
  position: absolute;
  top: calc(100px - 200px);
  left: calc(580px + 40px);
  display: inline-block;
  background: url("../images/bt_contact.png") left top no-repeat;
  width: 160px;
  height: 160px;
}

@media screen and (max-width: 991px) {
  .bt_contact {
    left: auto;
    right: 120px;
  }
}

.bt_media {
  position: absolute;
  top: calc(100px - 200px);
  left: calc(750px + 40px);
  display: inline-block;
  background: url("../images/bt_media.png") left top no-repeat;
  width: 160px;
  height: 160px;
}

@media screen and (max-width: 1199px) {
  .bt_media {
    left: auto;
    right: 100px;
  }
}

@media screen and (max-width: 991px) {
  .bt_media {
    top: 100px;
    right: 200px;
  }
}

.bt_videos {
  position: absolute;
  top: calc(150px - 205px);
  left: calc(900px + 55px);
  display: inline-block;
  background: url("../images/bt_videos.png") left top no-repeat;
  width: 160px;
  height: 160px;
}

@media screen and (max-width: 1199px) {
  .bt_videos {
    left: auto;
    right: 0;
  }
}

/*首頁 最新消息 */
@media screen and (max-width: 1199px) {
  .index_news_box {
    width: calc(260px *3);
    margin: 100px 0 50px;
  }
}

@media screen and (max-width: 991px) {
  .index_news_box {
    width: calc(100% - 20px);
    margin: 40px 0;
  }
}

@media screen and (max-width: 767px) {
  .index_news_box {
    margin-top: 120px;
  }
}

.index_work_box {
  position: relative;
}

@media screen and (max-width: 1199px) {
  .index_work_box {
    width: calc(260px *3);
    margin: 0 0 75px;
  }
}

@media screen and (max-width: 991px) {
  .index_work_box {
    width: calc(100% - 20px);
  }
}

@media screen and (max-width: 767px) {
  .index_work_box {
    margin-bottom: 50%;
  }
}

.index_title_news {
  background: url("../images/index_news_title.png") left top no-repeat;
  width: 410px;
  height: 20px;
  text-indent: -999px;
  margin-bottom: 10px;
}

@media screen and (max-width: 1199px) {
  .index_title_news {
    width: calc(410px *1.25);
    height: calc(20px *1.25);
    background-size: cover;
  }
}

@media screen and (max-width: 767px) {
  .index_title_news {
    width: 100%;
    background-size: contain;
  }
}

.index_title_news a {
  position: absolute;
  left: 270px;
  top: 0px;
  width: 50px;
  height: 15px;
  display: block;
}

.index-news-column {
  margin-bottom: 8px;
  margin-left: -5px;
}

@media screen and (max-width: 1199px) {
  .index-news-column {
    width: 100%;
  }
}

.index-title {
  font-family: "微軟正黑體";
  font-size: 16px;
  font-weight: bolder;
  color: #1e6770;
  line-height: 2;
  height: 2;
  letter-spacing: 0.2em;
  background: transparent url("../images/red-icon.gif") 280px center no-repeat;
}

li.index-news-list {
  border-bottom-width: 0px;
  border-bottom-style: dashed;
  border-bottom-color: #000000;
  list-style-position: inside;
  letter-spacing: 0.1em;
  overflow: hidden;
}

@media screen and (max-width: 1199px) {
  li.index-news-list {
    width: 100%;
    font-size: 20px;
  }
}

@media screen and (max-width: 767px) {
  li.index-news-list {
    margin: 20px 0;
  }
}

li.index-news-list a {
  color: #000000;
  line-height: 2;
  display: block;
  padding-left: 5px;
  font-family: '微軟正黑體';
  text-decoration: none;
  letter-spacing: normal;
}

li.index-news-list a:hover {
  color: #54901E;
  background-color: rgba(200, 198, 198, 0.5);
}

@media screen and (max-width: 767px) {
  li.index-news-list a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.news-li {
  vertical-align: top;
}

@media screen and (max-width: 1199px) {
  .news-li {
    width: auto;
  }
}

@media screen and (max-width: 767px) {
  .news-li {
    display: inline-block;
    line-height: 1.3;
  }
}

.index-icon-size {
  font-size: 1em;
  margin-right: 5px;
}

.index-date {
  text-align: right;
  color: #5e5e5e;
  font-family: Arial;
  margin-left: 3px;
}

@media screen and (max-width: 767px) {
  .index-date {
    text-align: left;
    line-height: 1.3;
  }
}

/*首頁 工程實績 */
.index_title_work {
  background: url("../images/index_work_title.png") left top no-repeat;
  width: 411px;
  height: 30px;
  text-indent: -9999px;
  margin-bottom: 10px;
}

@media screen and (max-width: 1199px) {
  .index_title_work {
    margin-top: 20px;
    width: 100%;
    height: calc(28px);
    background-size: contain;
  }
}

.index_title_work a {
  position: absolute;
  left: 370px;
  top: 0px;
  width: 50px;
  height: 15px;
  display: block;
}

.infiniteCarousel {
  position: relative;
  margin-left: 0px;
  width: 100%;
}

.infiniteCarousel .wrapper_2 {
  width: 402px;
  /* .infiniteCarousel width - (.wrapper_2 margin-left + .wrapper_2 margin-right) */
  overflow: auto;
  height: 105px;
  position: absolute;
  top: 0;
}

@media screen and (max-width: 1199px) {
  .infiniteCarousel .wrapper_2 {
    width: 100%;
    height: 160px;
  }
}

@media screen and (max-width: 767px) {
  .infiniteCarousel .wrapper_2 {
    left: calc(50% - (264px / 2));
    width: calc(100% - 70px);
  }
}

@media screen and (max-width: 576px) {
  .infiniteCarousel .wrapper_2 {
    width: calc(100% - 69px);
  }
}

@media screen and (max-width: 320px) {
  .infiniteCarousel .wrapper_2 {
    width: calc(100% - 15px);
  }
}

.infiniteCarousel .wrapper_2 .index_slick li a img {
  width: 130px;
  height: 80px;
}

@media screen and (max-width: 1199px) {
  .infiniteCarousel .wrapper_2 .index_slick li a img {
    width: 260px;
    height: 160px;
  }
}

.infiniteCarousel ul a img {
  border: 2px solid #fff;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
}

.infiniteCarousel .wrapper_2 ul {
  width: 402px;
  /* single item * n */
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  padding: 0;
  position: absolute;
  top: 0;
}

.infiniteCarousel ul li {
  display: block;
  float: left;
}

.infiniteCarousel ul li img {
  -webkit-transition: border-color 400ms;
}

.infiniteCarousel ul:hover li img {
  border-color: #fff;
}

.infiniteCarousel ul:hover li:hover img {
  border-color: #54901E;
}

.infiniteCarousel ul li a img {
  display: block;
}

.infiniteCarousel .arrow {
  display: block;
  height: 36px;
  width: 37px;
  text-indent: -9999px;
  position: absolute;
  top: 37px;
  cursor: pointer;
  outline: 0;
  background-image: url(../images/arrow.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  display: none;
}

.infiniteCarousel .forward {
  background-position: 0 0;
  right: 0;
}

.infiniteCarousel .back {
  background-position: 0 -72px;
  left: 0;
}

.infiniteCarousel .forward:hover {
  background-position: 0 -36px;
}

.infiniteCarousel .back:hover {
  background-position: 0 -108px;
}

.video a {
  background-color: #3b3b3b;
  color: #fff;
  line-height: 2em;
  padding: 5px 20px;
}

.video a:hover {
  background-color: #C6C66A;
  color: #3B3B3B;
}

.service_title {
  margin-top: 30px;
  width: 300px;
  float: left;
}

.service_title li {
  font-size: 20px;
  font-family: "微軟正黑體";
  line-height: 1;
  list-style-type: none;
  border-left: solid 20px #BF5F06;
  padding-left: 15px;
  margin-bottom: 15px;
  color: #387613;
  display: block;
  width: 220px;
}

.service_pic {
  width: 400px;
  height: 200px;
  background-color: #666;
  float: left;
  margin-left: 60px;
}

@media screen and (max-width: 1199px) {
  .service_pic {
    margin-left: 20px;
  }
}

@media screen and (max-width: 767px) {
  .service_pic {
    width: 100%;
    height: auto;
    margin-left: 0;
    background-color: transparent;
  }
  .service_pic img {
    width: 100%;
    height: auto;
  }
}

.about_pic_03 {
  float: right;
  margin-bottom: 5px;
  margin-left: 15px;
}

@media screen and (max-width: 767px) {
  .about_pic_03 {
    margin-left: 0;
    float: none;
    width: 100%;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .about_pic_03 img {
    width: 100%;
  }
}

.video_btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media screen and (max-width: 767px) {
  .video_btn {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.bg-news {
  background: url("../images/bg-news.jpg") center top no-repeat;
  min-height: 800px;
}

@media screen and (max-width: 1199px) {
  .news-list {
    padding-bottom: 200px;
  }
}

@media screen and (max-width: 991px) {
  .news-list {
    padding-bottom: 0;
  }
}

.news-list li {
  font-family: "新細明體";
  font-size: 12.195px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #bcbcbc;
  list-style-position: inside;
  letter-spacing: 0rem;
  margin-bottom: 0px;
}

.news-list li > a {
  font-family: '微軟正黑體';
  color: #7D8888;
  font-size: 14.07px;
  line-height: 2.5;
  display: block;
  padding-left: 10px;
  text-decoration: none;
}

@media screen and (max-width: 1199px) {
  .news-list li > a {
    font-size: 30px;
  }
}

@media screen and (max-width: 767px) {
  .news-list li > a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.news-list li > a:hover {
  color: #232828;
  background-color: rgba(255, 255, 255, 0.5);
}

.news-list li > a .icon-size {
  font-size: 1.2em;
  vertical-align: middle;
  margin-right: 10px;
  color: #3b6615;
}

.news-list li > a .date {
  color: #3b6615;
  font-family: Arial;
  font-size: 13px;
  margin-right: 20px;
  letter-spacing: 0.1em;
}

@media screen and (max-width: 1199px) {
  .news-list li > a .date {
    font-size: 30px;
  }
}

.news_page_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .news_page_list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .news_page_list li {
    width: 100%;
  }
  .news_page_list li a {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding-left: 0px;
    padding: 5px;
    width: 100%;
  }
  .news_page_list li a img {
    width: 100%;
    height: auto;
  }
}

/* 最新消息 導覽選單 CSS */
.news-nav {
  /* width: 500px; */
  margin-top: 50px;
  margin-bottom: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media screen and (max-width: 767px) {
  .news-nav {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

@media screen and (max-width: 767px) {
  .news-nav li {
    width: calc(100% / 7);
    margin-bottom: 4%;
  }
}

@media screen and (max-width: 320px) {
  .news-nav li {
    width: calc(100% / 6);
  }
}

.news-nav li a {
  line-height: 1.8em;
  padding: 5px 10px;
  margin-right: 10px;
  background-color: #fff;
  color: #626262;
  font-family: Arial;
  font-size: 12.195px;
  text-decoration: none;
  /* 邊框CSS */
  border-width: 1px;
  border-style: solid;
  border-color: #8e8e8e;
  /* 內陰影 */
  -webkit-box-shadow: 0 0 17px -5px rgba(0, 0, 0, 0.5) inset;
  box-shadow: 0 0 17px -5px rgba(0, 0, 0, 0.5) inset;
}

@media screen and (max-width: 1199px) {
  .news-nav li a {
    font-size: 20px;
    margin-right: 10px;
  }
}

.news-nav li a:hover {
  color: #fff;
  background-color: #3b6615;
  border-color: #FFF57C;
}

.news-nav-i {
  padding: 0;
}

/* 最新消息 頁面 CSS */
/*.icon-size-big {
	font-size: 3em;
	color: #12726c;
	margin-bottom: 10px;
}*/
.news-list {
  /*下底線 CSS*/
  /* margin-bottom: 15px; */
}

.news-title {
  color: #555555;
  font-size: 12px;
  font-family: Arial, "新細明體";
  font-weight: bold;
  /* background: #757575; */
  padding: 4px 10px;
}

.news-text {
  color: #555555;
  font-family: Arial, "新細明體";
  color: #6a6a74;
  font-weight: normal;
  margin-left: 5px;
}

.news-text-02 {
  display: block;
  font-family: Arial, "新細明體";
  color: #6a6a74;
  font-weight: normal;
  margin-left: 90px;
  margin-top: -38px;
  line-height: 2em;
}

.news-text a {
  color: #6a6a74;
  text-decoration: none;
}

.news-text-01 {
  color: #6a6a74;
  font-size: 18px;
  font-family: Arial, "微軟正黑體";
  /* font-weight: bold; */
  margin-left: 0px;
  vertical-align: middle;
}

.button-goback {
  display: inline-block;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  cursor: pointer;
  padding: 6px 20px 6px 50px;
  border: none;
  border-radius: 2px;
  font: normal normal bold 3px/normal "Quantico", Helvetica, sans-serif;
  color: rgba(255, 255, 255, 0.9);
  text-overflow: clip;
  background: url("../images/bt_goback.png"), #bcbab3;
  background-repeat: no-repeat;
  background-position: 14px 50%;
  background-origin: padding-box;
  background-clip: border-box;
  background-size: 20px auto;
  -webkit-box-shadow: 1px 1px 0 0 rgba(127, 123, 108, 0.66);
  box-shadow: 1px 1px 0 0 rgba(127, 123, 108, 0.66);
  text-shadow: 1px 1px 0 rgba(168, 168, 168, 0.66);
  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
}

.button-goback:hover {
  color: rgba(86, 84, 81, 0.9);
  background: url("../images/bt_goback_hover.png"), #c8c8c8;
  background-repeat: no-repeat;
  background-position: 14% 50%;
  background-origin: padding-box;
  background-clip: border-box;
  background-size: 20px auto;
  -webkit-box-shadow: 1px 1px 0 0 rgba(74, 76, 73, 0.66);
  box-shadow: 1px 1px 0 0 rgba(74, 76, 73, 0.66);
}

/* 產品介紹 類別 category css */
.product-column {
  margin-bottom: 40px;
  float: left;
}

.category {
  width: 210px;
  height: 210px;
  margin-bottom: 20px;
  float: left;
  margin-right: 10px;
}

.category a {
  width: 219px;
  height: 182px;
  background-image: url("../images/category-bg.png");
  display: block;
}

.category a:hover {
  background-image: url("../images/category-bg-hover.png");
}

.category-album {
  padding: 15px 10px 0 23px;
}

.category-title {
  color: #12726c;
  font-family: "微軟正黑體";
  font-weight: bold;
  font-size: 19.2px;
  margin-left: 40px;
  margin-top: 10px;
}

/* 產品介紹 子類別 category-sub css */
.category-sub {
  width: 190px;
  height: 140px;
  margin-bottom: 30px;
  float: left;
  margin-left: 15px;
  border-width: 1px;
  border-style: solid;
  border-color: #C1C1C1;
  padding: 0;
  overflow: hidden;
  -webkit-box-shadow: -2px 3px 5px 1px rgba(0, 0, 0, 0.2);
  box-shadow: -2px 3px 5px 1px rgba(0, 0, 0, 0.2);
}

.category-sub a {
  /* background-image: url(../images/category-sub-bg.png); */
  display: block;
  width: 210px;
  height: 210px;
}

.category-sub a:hover {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  border: none;
  text-overflow: ellipsis;
  background: rgba(255, 255, 255, 0.5);
  -webkit-box-shadow: 0 0 100px 10px rgba(132, 132, 132, 0.5) inset;
  box-shadow: 0 0 100px 10px rgba(132, 132, 132, 0.5) inset;
}

.photo {
  height: 200px;
  margin-bottom: 30px;
  float: left;
  margin-right: 30px;
  border-width: 1px;
  border-style: solid;
  border-color: #C1C1C1;
  padding: 0;
  overflow: hidden;
  -webkit-box-shadow: -2px 3px 5px 1px rgba(0, 0, 0, 0.2);
  box-shadow: -2px 3px 5px 1px rgba(0, 0, 0, 0.2);
}

.photo a {
  /* background-image: url(../images/category-sub-bg.png); */
  display: block;
  height: 200px;
  overflow: hidden;
}

.photo a:hover {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  border: none;
  text-overflow: ellipsis;
  background: #326F0C;
  -webkit-box-shadow: 0 0 100px 10px rgba(132, 132, 132, 0.5) inset;
  box-shadow: 0 0 100px 10px rgba(132, 132, 132, 0.5) inset;
}

.category-sub-album {
  padding: 11px 0px 10px 10px;
}

.category-sub-album img {
  width: 170px;
  overflow: hidden;
}

.photo img {
  padding: 10px 10px 0 10px;
  overflow: hidden;
  width: 190px;
  height: 140px;
}

.fancybox:hover {
  cursor: zoom-in;
  cursor: -webkit-zoom-in;
}

a .category-sub-title {
  color: #404851;
  font-weight: normal;
  font-size: 13px;
  margin: 10px auto 5px auto;
  margin-top: 5px;
  text-align: center;
  line-height: 1.8em;
  display: block;
  width: 100%;
  /* padding: 0 10px; */
  border-bottom-style: solid;
  border-bottom-color: #CBCBCB;
  border-bottom-width: 1px;
  border-top-style: solid;
  border-top-color: #CBCBCB;
  border-top-width: 1px;
}

a:hover .category-sub-title {
  border-bottom-color: #FFFFFF;
  border-top-color: #FFFFFF;
  color: #FFFFFF;
}

.photo-style-02 {
  height: 220px;
}

.photo-style-02 a {
  height: 220px;
}

.photo-style-02 a .category-sub-title {
  font-size: 12px;
  height: 3.5em;
}

.product-pager-photo {
  display: inline-block;
  margin-left: 0px;
  margin-top: 26px;
  background-color: #FFFFFF;
  padding: 15px 15px 40px 15px;
  border: 1px solid #c3c3c3;
  /*圖片內陰影*/
  -webkit-box-shadow: inset 0px 0px 39px rgba(40, 40, 40, 0.3);
  box-shadow: inset 0px 0px 39px rgba(40, 40, 40, 0.3);
  width: 333px;
  height: 256px;
}

.h3_title {
  font-family: "微軟正黑體";
  font-size: 20px;
  color: #666;
  letter-spacing: 0em;
  margin-top: 10px;
  margin-left: 10px;
  background: url(../images/h3-title_bg.gif) top left no-repeat;
  padding-left: 0px;
}

/*work*/
.work-list-menu li a {
  opacity: 0.8;
}

@media screen and (max-width: 767px) {
  .work-list-menu li a {
    display: block;
    padding: 25px;
    background-color: #979797;
    color: #fff;
    margin-bottom: 10px;
    background-position: center center;
    background-size: 2000px auto;
    background-repeat: no-repeat;
  }
}

.work-list-menu li a:hover {
  filter: alpha(opacity=100);
  opacity: 1;
}

@media screen and (max-width: 767px) {
  .work-list-menu li a.work_page_01 {
    background-color: #934a3b;
  }
  .work-list-menu li a.work_page_02 {
    background-color: #fec248;
  }
  .work-list-menu li a.work_page_03 {
    background-color: #abb39c;
  }
}

.work-list-menu li a h4 {
  font-family: "微軟正黑體";
  font-size: 0;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .work-list-menu li a h4 {
    font-size: 30px;
  }
}

.work-list-menu li a img {
  width: 100%;
}

@media screen and (max-width: 767px) {
  .work-list-menu li a img {
    display: none;
  }
}

.work-list {
  list-style: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media screen and (max-width: 767px) {
  .work-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-top: 5%;
  }
}

.work-list li {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: calc((90%) / 3);
  margin-right: calc(10% / 6);
  margin-left: calc(10% / 6);
  margin-bottom: 3.3%;
  border: 1px solid #C1C1C1;
  padding: 0;
  overflow: hidden;
  -webkit-box-shadow: -2px 3px 5px 1px rgba(0, 0, 0, 0.2);
  box-shadow: -2px 3px 5px 1px rgba(0, 0, 0, 0.2);
}

@media screen and (max-width: 991px) {
  .work-list li {
    width: calc((90%) / 2);
    margin-right: calc(10% / 4);
    margin-left: calc(10% / 4);
    margin-bottom: 5%;
  }
}

@media screen and (max-width: 767px) {
  .work-list li {
    width: calc((90%));
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 5%;
  }
}

.work-list li a {
  /* background-image: url(../images/category-sub-bg.png); */
  display: block;
  padding: 10px;
  overflow: hidden;
}

.work-list li a:hover {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  border: none;
  text-overflow: ellipsis;
  background: #326F0C;
  -webkit-box-shadow: 0 0 100px 10px rgba(132, 132, 132, 0.5) inset;
  box-shadow: 0 0 100px 10px rgba(132, 132, 132, 0.5) inset;
}

.work-list li a img {
  width: 100%;
}

.work-list li a .img_box {
  height: 140px;
  overflow: hidden;
}

.work_menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (max-width: 767px) {
  .work_menu {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.work_menu li {
  padding: 0;
  margin-right: 5px;
  width: 178px;
  line-height: 62px;
  height: 62px;
  margin-bottom: 50px;
  font-size: 22px;
}

@media screen and (max-width: 767px) {
  .work_menu li {
    width: 100%;
    height: 80px;
    margin-bottom: 10px;
  }
}

.work_menu li > a,
.work_menu li > .title > span {
  display: block;
  text-align: left;
  color: #666;
  font-family: "微軟正黑體";
  padding-left: 60px;
}

@media screen and (max-width: 767px) {
  .work_menu li > a,
  .work_menu li > .title > span {
    padding-left: 30px;
    text-align: center;
  }
}

.work_menu li > a:hover {
  color: #113879;
}

.work_menu li.water > a,
.work_menu li.down > .title > span {
  cursor: pointer;
  background: transparent url("../images/work_menu_water.png") center center no-repeat;
}

.work_menu li.water > a:hover,
.work_menu li.down > .title > span:hover {
  background: transparent url("../images/work_menu_water_hover.png") center center no-repeat;
}

.work_menu li.other a {
  background: transparent url("../images/work_menu_other.png") center center no-repeat;
}

.work_menu li.other a:hover {
  background: transparent url("../images/work_menu_other_hover.png") center center no-repeat;
}

.work_menu li > .title {
  text-align: center;
}

.work_menu li.down:hover > .title > a {
  display: inline-block;
}

.work_menu li.down > .title > a {
  color: #666;
  font-family: "微軟正黑體";
  font-size: 18px;
  position: relative;
  top: -22px;
}

.g_map {
  margin-top: 0px;
  margin-left: auto;
  background-color: #fff;
  padding: 8px;
  border-color: #fff;
  border-radius: 0px;
  border-style: solid;
  border-width: 1px;
  text-align: center;
  overflow: hidden;
  /*內陰影*/
  -webkit-box-shadow: inset 0px 0px 39px rgba(40, 40, 40, 0.3);
  box-shadow: inset 0px 0px 39px rgba(40, 40, 40, 0.3);
  background-color: #FFF;
  width: 640px;
  height: 300px;
  padding: 8px 8px 20px 8px;
  margin-right: auto;
  margin-bottom: 20px;
}

.contact {
  font-size: 12px;
  margin: 0 auto;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .table-tr {
    width: 100%;
    overflow: hidden;
    overflow-x: auto;
  }
}

#contact_form {
  background-color: #f7ece8;
  margin: auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media screen and (max-width: 1199px) {
  #contact_form {
    width: 100%;
  }
}

#contact_form tbody tr td {
  border-style: solid;
  border-width: 1px;
  border-color: #a0948f;
  padding: 5px 8px;
}

#contact_form tbody tr .td_bg {
  color: #6B6B6B;
  background-color: #DEDEDE;
  text-align: center;
  vertical-align: middle;
  width: 35%;
}

@media screen and (max-width: 767px) {
  #contact_form tbody tr .td_bg {
    white-space: nowrap;
    width: auto;
  }
}

#contact_form input {
  display: inline-block;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  padding: 0px 5px;
  border: none;
  font: normal 15px/2em "新細明體", Helvetica, sans-serif;
  color: rgba(105, 47, 54, 0.9);
  text-overflow: clip;
  background: #dedede;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.66);
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  vertical-align: middle;
}

#contact_form input.bt-contact {
  width: 80px;
  height: 30px;
  display: inline-block;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  cursor: pointer;
  padding: 4px 20px;
  border: 1px solid rgba(188, 188, 188, 0.9);
  border-radius: 1px;
  font: normal 15px/normal "新細明體", Times, serif;
  color: #505050;
  text-align: center;
  text-overflow: clip;
  background: rgba(252, 252, 239, 0.9);
  -webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.13);
  box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.13);
  text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.66);
  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  font-weight: bold;
}

#contact_form input.bt-contact:hover {
  border: 1px solid rgba(147, 147, 147, 0.9);
  color: rgba(255, 255, 255, 0.9);
  background: rgba(107, 107, 107, 0.9);
  -webkit-box-shadow: 2px 2px 2px 0 transparent;
  box-shadow: 2px 2px 2px 0 transparent;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.product_bt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
  .product_bt {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

.product_bt li {
  padding: 0;
  margin-right: 15px;
  width: calc(100% / 4);
  line-height: 71px;
  height: 71px;
  margin-bottom: 10px;
  background: transparent url("../images/product_bt_bg.jpg") center center no-repeat;
}

@media screen and (max-width: 767px) {
  .product_bt li {
    margin-right: 0;
    text-align: center;
    background-size: contain;
    width: calc(100% / 2);
  }
}

.product_bt li a {
  display: block;
  text-align: left;
  color: #fff;
  font-family: "微軟正黑體";
  padding-left: 58px;
}

@media screen and (max-width: 767px) {
  .product_bt li a {
    display: inline-block;
    padding-left: 0;
  }
}

.product_bt li a:hover {
  background: transparent url("../images/product_bt_bg_hover.jpg") center center no-repeat;
  color: #fff;
}

.mainImg_box {
  width: 100%;
}

.mainImg_box img {
  width: 100%;
}

.product_dm {
  margin: 0 auto 50px;
  padding: 20px;
  position: relative;
}

.product_dm img {
  margin: 0 auto;
}

@media screen and (max-width: 1199px) {
  .product_dm img {
    width: 100%;
  }
}

.product_content_box {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.product_content_box > div {
  margin-top: 30px;
}

.product_content_box .content_img.product_img_01 {
  width: calc(50%);
}

.product_content_box .content_img.product_img_02 {
  width: calc(22%);
}

.product_content_box .content_img.product_img_03 {
  width: calc(50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.product_content_box .content_img.product_img_03 span {
  line-height: 1;
  font-weight: 700;
  font-family: '微軟正黑體', serif;
  color: #dcdcdc;
  font-size: 60px;
  margin-bottom: 20px;
}

.product_content_box .content_img.product_img_04 {
  width: calc(50%);
}

.product_content_box .content_img.product_img_05 {
  width: calc(50%);
}

.product_content_box .content_img.product_img_06 {
  width: calc(20%);
}

@media screen and (max-width: 767px) {
  .product_content_box .content_img.product_img_01, .product_content_box .content_img.product_img_02, .product_content_box .content_img.product_img_03, .product_content_box .content_img.product_img_04, .product_content_box .content_img.product_img_05, .product_content_box .content_img.product_img_06 {
    width: calc(100%);
  }
}

.product_content_box .content_img img {
  width: 100%;
}

.product_content_box .product_content_text {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 15px;
}

.product_content_box .product_content_text.text_01 {
  width: 50%;
}

.product_content_box .product_content_text.text_02 {
  width: 78%;
}

.product_content_box .product_content_text.text_03 {
  width: 50%;
}

.product_content_box .product_content_text.text_06 {
  width: 80%;
}

@media screen and (max-width: 767px) {
  .product_content_box .product_content_text.text_01, .product_content_box .product_content_text.text_02, .product_content_box .product_content_text.text_03, .product_content_box .product_content_text.text_06 {
    width: calc(100%);
  }
}

.product_content_box .product_title_01 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

@media screen and (max-width: 767px) {
  .product_content_box .product_title_01 {
    margin-bottom: 20px;
  }
}

.product_content_box .product_title_01 span {
  font-family: '微軟正黑體', serif;
  font-size: 20px;
}

.product_content_box .product_title_01 span:nth-of-type(1) {
  font-weight: 700;
  font-size: 25px;
  padding-bottom: 20px;
}

.product_content_box .product_title_01 span:nth-of-type(2) {
  font-weight: 700;
}

.product_content_box .product_title_01 span:nth-of-type(3) {
  margin-left: 10px;
}

.product_content_box .product_title_02 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: '微軟正黑體', serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  padding-bottom: 3px;
  margin-bottom: 30px;
  border-bottom: 1px solid #535353;
}

.product_content_box .product_title_02 .d-flex {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -ms-flex-item-align: end;
      align-self: flex-end;
}

@media screen and (max-width: 767px) {
  .product_content_box .product_title_02 .d-flex {
    -ms-flex-item-align: start;
        align-self: flex-start;
  }
}

.product_content_box .product_title_02 .d-flex span {
  color: #fff;
}

.product_content_box .product_title_02 .d-flex span:nth-of-type(1) {
  font-size: 22px;
  background-color: #5EA64E;
  padding: 5px;
}

.product_content_box .product_title_02 .d-flex span:nth-of-type(2) {
  font-size: 22px;
  background-color: #217CCF;
  padding: 5px;
}

.product_content_box .product_title_02 span {
  color: #fff;
}

.product_content_box .product_title_02 > span:nth-of-type(1) {
  color: #efefef;
  font-size: 60px;
  margin-left: auto;
}

@media screen and (max-width: 767px) {
  .product_content_box .product_title_02 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

.product_content_box .product_title_03 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  font-family: '微軟正黑體', serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  padding-bottom: 3px;
  margin-bottom: 30px;
  border-bottom: 1px solid #535353;
}

.product_content_box .product_title_03 span {
  color: #fff;
}

.product_content_box .product_title_03 span:nth-of-type(1) {
  color: #efefef;
  font-size: 60px;
  margin-left: auto;
}

@media screen and (max-width: 767px) {
  .product_content_box .product_title_03 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

.product_A_02 {
  width: 420px;
  height: 132px;
  position: absolute;
  top: 200px;
  left: 350px;
}

.product_A_03 {
  width: 350px;
  height: 230px;
  position: absolute;
  top: 710px;
  left: 15px;
}

.product_A_04 {
  width: 590px;
  height: 240px;
  position: absolute;
  top: 430px;
  left: 170px;
}

.product_A_05 {
  width: 580px;
  height: 440px;
  position: absolute;
  top: 1428px;
  left: 180px;
  line-height: 1.85em;
}

.link-box {
  position: relative;
}

.youtube-01 {
  position: absolute;
  width: 334px;
  height: 187px;
  bottom: 450px;
  right: 40px;
}

@media screen and (max-width: 1199px) {
  .youtube-01 {
    width: 420px;
    height: 250px;
    bottom: 580px;
    right: 55px;
  }
}

@media screen and (max-width: 991px) {
  .youtube-01 {
    width: 300px;
    height: 180px;
    bottom: 425px;
    right: 40px;
  }
}

@media screen and (max-width: 767px) {
  .youtube-01 {
    width: 160px;
    height: 100px;
    bottom: 210px;
    right: 15px;
  }
}

@media screen and (max-width: 320px) {
  .youtube-01 {
    width: 130px;
    height: 80px;
    bottom: 180px;
    right: 15px;
  }
}

.youtube-02 {
  position: absolute;
  width: 334px;
  height: 187px;
  bottom: 100px;
  right: 40px;
}

@media screen and (max-width: 1199px) {
  .youtube-02 {
    width: 420px;
    height: 250px;
    bottom: 130px;
    right: 55px;
  }
}

@media screen and (max-width: 991px) {
  .youtube-02 {
    width: 300px;
    height: 180px;
    bottom: 100px;
    right: 45px;
  }
}

@media screen and (max-width: 767px) {
  .youtube-02 {
    width: 160px;
    height: 100px;
    bottom: 50px;
    right: 15px;
  }
}

@media screen and (max-width: 320px) {
  .youtube-02 {
    width: 130px;
    height: 80px;
    bottom: 45px;
    right: 15px;
  }
}

.specila {
  display: block;
  color: #0c620a;
}

.specila_02 {
  display: block;
  color: #ff5722;
}

.btns {
  margin-top: 20px;
  -ms-flex-item-align: end;
      align-self: flex-end;
  padding: 0px 10px;
  color: #fff;
  background-color: #83B22A;
  font-size: 20px;
  font-weight: 700;
  font-family: '微軟正黑體', serif;
  border-radius: 5px;
}

.videos_list {
  max-width: 770px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

@media screen and (max-width: 1199px) {
  .videos_list {
    max-width: 100%;
  }
}

.videos_list a,
.videos_list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  color: #666;
  width: calc((100% - 30px) / 3);
  height: 100%;
  margin: 0 5px 0px;
}

.videos_list a .content,
.videos_list li .content {
  text-align: center;
}

@media screen and (max-width: 1199px) {
  .videos_list a,
  .videos_list li {
    width: 100%;
    height: 450px;
  }
}

@media screen and (max-width: 991px) {
  .videos_list a,
  .videos_list li {
    height: 400px;
  }
}

@media screen and (max-width: 767px) {
  .videos_list a,
  .videos_list li {
    height: 250px;
  }
}

@media screen and (max-width: 1199px) {
  .use_flash {
    display: none;
  }
}

.use_movie {
  display: none;
  width: 100%;
  height: 520px;
}

@media screen and (max-width: 1199px) {
  .use_movie {
    display: inline-block;
  }
}

@media screen and (max-width: 991px) {
  .use_movie {
    height: 376px;
  }
}

@media screen and (max-width: 576px) {
  .use_movie {
    height: 188.5px;
  }
}

@media screen and (max-width: 320px) {
  .use_movie {
    height: 158px;
  }
}

.media-list {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media screen and (max-width: 767px) {
  .media-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-top: 5%;
  }
}

.media-list li {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: calc((90%) / 3);
  margin-right: calc(10% / 6);
  margin-left: calc(10% / 6);
  margin-bottom: 3.3%;
  border: 1px solid #C1C1C1;
  padding: 0;
  overflow: hidden;
  -webkit-box-shadow: -2px 3px 5px 1px rgba(0, 0, 0, 0.2);
  box-shadow: -2px 3px 5px 1px rgba(0, 0, 0, 0.2);
}

@media screen and (max-width: 991px) {
  .media-list li {
    width: calc((90%) / 2);
    margin-right: calc(10% / 4);
    margin-left: calc(10% / 4);
    margin-bottom: 5%;
  }
}

@media screen and (max-width: 767px) {
  .media-list li {
    width: calc((90%));
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 5%;
  }
}

.media-list li a {
  /* background-image: url(../images/category-sub-bg.png); */
  display: block;
  padding: 10px;
  overflow: hidden;
}

.media-list li a:hover {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  border: none;
  text-overflow: ellipsis;
  background: #326F0C;
  -webkit-box-shadow: 0 0 100px 10px rgba(132, 132, 132, 0.5) inset;
  box-shadow: 0 0 100px 10px rgba(132, 132, 132, 0.5) inset;
}

.media-list li a img {
  width: 100%;
}

.modal-bg {
  position: fixed;
  z-index: 100;
  top: 0;
  bottom: 100%;
  width: 100%;
  background-color: rgba(58, 58, 58, 0.9);
  overflow-y: auto;
  -webkit-transition: all .5s;
  transition: all .5s;
}

.modal-bg .modal {
  margin: 0 10px;
  position: absolute;
  top: 100px;
  left: calc(50vw - (1120px / 2));
}

@media screen and (max-width: 1199px) {
  .modal-bg .modal {
    top: calc(50vh - ((315px*1.8)/ 2));
    left: 0;
    width: calc(100% - 20px);
  }
}

@media screen and (max-width: 767px) {
  .modal-bg .modal {
    top: 100px;
    left: 0;
  }
}

.modal-bg .modal iframe {
  width: 1120px;
  height: 630px;
}

@media screen and (max-width: 1199px) {
  .modal-bg .modal iframe {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .modal-bg .modal iframe {
    width: 100%;
    height: 350px;
  }
}

.content-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media screen and (max-width: 1199px) {
  .content-flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

@media screen and (max-width: 767px) {
  .content-flex {
    margin-top: 120px;
  }
}

@media screen and (max-width: 320px) {
  .content-flex {
    margin-top: 150px;
  }
}

.d-none {
  display: none;
}

.d-block {
  display: block;
}

.d-md-block {
  display: none;
}

@media screen and (max-width: 767px) {
  .d-md-block {
    display: block;
  }
}

.d-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (max-width: 767px) {
  .d-md-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.flex-row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.flex-column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media screen and (max-width: 767px) {
  .flex-md-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.flex-wrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.align-items-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.mb-100 {
  margin-bottom: 100px;
}

@media screen and (max-width: 767px) {
  .mb-md-100 {
    margin-bottom: 300px !important;
  }
}

.w-100 {
  width: 100%;
}

.menu_btn {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 70px;
  height: 45px;
  padding: 10px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}

@media screen and (max-width: 1199px) {
  .menu_btn {
    display: block;
  }
}
/*# sourceMappingURL=style.css.map */