@charset "utf-8";

@import url('../css/font-style.css');
@import url('../css/normal.css');


/*========================================== Wrapper ==================================================*/
.wrapper{
  width: 100%;
  max-width: 1600px;
  margin: 0 auto
}

.wrapper-1500{ max-width: 1500px }
.wrapper-1400{ max-width: 1400px }
.wrapper-1300{ max-width: 1300px }
.wrapper-1200{ max-width: 1200px }
.wrapper-1000{ max-width: 1000px }

/*== Header ==*/
.navbar{ min-height: auto }

.navbar-inverse,
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a:focus,
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus{
  background-color: #fff;
}

.navbar-inverse,
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a:focus,
.navbar-inverse .navbar-collapse{
  border:none;
}

.navbar-inverse .navbar-toggle{ background-color: #fff; border-color:#00a1da }
.navbar-inverse .navbar-toggle .icon-bar {
  background-color: #00a1da
}

.navbar-header {
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
}

.navbar-brand {
  padding: 0;
}

.navbar-brand img {
    display: inline-block;
}

.navbar{ border-radius: 0; margin-bottom: 0 }

.header_link > li > a{
  display: block;
  text-align: center;
  color: #6b6969 !important;
}

.header_link > li > a:hover,
.header_link > li > a.active{
  color: #000 !important;
}

.dropdown-menu-link li{ display: block; padding-left: 0; padding-right: 0; }
.dropdown-menu-link li a{ display: block; line-height: 1.5; padding: 3px 20px; font-size: 18px; font-family: 'Open Sans',Arial; }

  @media screen and (min-width:1001px){
    .header_link > li > a > span{
      display: inline-block;
      width: 20px;
      height: 2px;
      background-color: #e7e7e7;
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -10px;
      margin-bottom: 5px;
      transition: .5s
    }

    .header_link > li > a > p{ text-transform: uppercase; font-size: 17px; font-family: 'Open Sans', Arial; font-weight: 600; }
    
    .header_link > li:hover > a > span,
    .header_link > li > a:hover > span,
    .header_link > li > a.active > span{
      width: 100%;
      margin-left: 0;
      left: 0;
      background-color: #11a6ea
    }
    
    .header_link > li:hover > a > span::before,
    .header_link > li > a:hover > span::before,
    .header_link > li > a.active > span::before{
      content: '';
      display: block;
      width: 25px;
      height: 30px;
      background-image: url(../images/header_icon_hover.png);
      background-repeat:no-repeat;
      background-position: top center;
      background-color: #fff;

      position: absolute;
      top: -20px;
      left:50%;
      margin-left: -12.5px;
    }

    .header_link > li:hover > .dropdown-menu-link { display: block; opacity: 1; visibility: visible; }

    .dropdown-menu-link {
      opacity: 0;
      visibility: hidden;
      padding:10px 0 20px;
      background: #4485aa;
      border-radius: 0 !important;
      min-width: 270px;
      left: 50%;
      transform: translateX(-50%);
      margin-top: -17px !important;
      z-index: 1;
      box-shadow: none;
      /*height: 100%;
      min-height: calc(100% + 217px)*/
    }
    .dropdown-menu-link li{ text-align: center; }
    .dropdown-menu-link li a{ color: #fff; } 
    .dropdown-menu-link li a:hover,
    .dropdown-menu-link li a.active{ color:#fff; background: #0d0c14 !important }

  }

  @media screen and (max-width:1000px){
    .dropdown-menu-link li{ position: relative; padding-left: 8px; }
    .dropdown-menu-link li::before{
      content: '〉';
      position: absolute;
      top: 5px
    }
    .dropdown-menu-link li a{ font-size: 16px; padding: 10px 20px !important; color: #00A1DA !important; }
    .dropdown-menu-link li a:hover{ color: #00A1DA !important }
  }

/*== Banner ==*/
  .index-banner{ margin-bottom: -8px; overflow: hidden; }
  .index-banner .slick-dots{ display: none !important; }
  .index-banner .slick-dotted.slick-slider{ margin-bottom: 0; }

  .section-mainHeading{
    padding: 70px 0 100px 0;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
    overflow: hidden;
  }

  .section-mainHeading::after{
    content: '';
    display: block;
    width: 100%;
    height: 50px;
    /*background: url(../images/main_heading_bg.png) no-repeat bottom center;*/
    background-size: cover;

    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
  }

  .section-mainHeading .row{ position: relative; }

  .section-mainHeading p {
    text-transform: uppercase;
    color: #fff;
    font-size: 2.1em;
    line-height: 1.3;
    font-family: 'Open Sans',Arial;
    font-weight: 600;
  }

    @media screen and (max-width:1000px){
      .section-mainHeading{ padding: 35px 0; }
      .section-mainHeading p{ font-size: 1.5em; }
      .section-mainHeading::after{ background-image: url(../images/main_heading_bg_mobile.png); bottom:-20px; }
    }

footer{
  position: relative;
  float: left;
  width: 100%;
  overflow: hidden;
  padding: 8px 0 8px 0;
  font-size: 16px;
  height: auto !important;
  background-color: #39393a;
  color:#fff;
  font-family: 'Open Sans', Arial;
}

footer ul.list-inline>li,
.list-inline.footer-info>li{ position: relative; display: block; line-height: 1.8; padding-left: 0; }


.list-inline.footer-info>li{ line-height: 2.5; padding-left: 2.5em; }
.list-inline.footer-info>li img{ position: absolute; top: 7px; left: 0 }

footer h4{ text-align: center; line-height: 1.5; font-size: 1em; text-transform: uppercase; }
footer h4 > img{ margin-top: 10px; margin-bottom: 10px; }
footer h4 > img[src="images/logo.png"]{ max-width: 75px; }

footer h5{ text-transform: uppercase; color: #00a0e9; font-size: 1.2em; margin-bottom: 5px; }

.footer-iware{
  float: left;
  width: 100%;
  background-color: #1b1b1b;
  padding:6px 12px;
  text-align: center;
}

  @media screen and (min-width:1001px){
    footer ul.list-inline.footer-info{ padding-top: 2.5em; }
    footer h4{ padding-top: 1.8em; }
  }

  @media screen and (max-width:1000px){
    footer{ margin-top: 1em; }
    footer h4{ display: flex; align-items: center; flex-direction: column; }
    footer h4 > p + img{ position: absolute; right: 14px; top: 7px; } 
    
    footer ul.list-inline{ padding-left: 1em; }
    footer ul.list-inline.footer-info{ padding-top: 1em; }
    footer ul.list-inline.footer-info>li{ line-height: 1.8; margin-bottom: 10px; }
    footer ul.list-inline.footer-info>li img{ top: 0 }
  }

/*== 首頁 ==*/
.section-index{
  position: relative;
}

  .section-index.main{ padding-bottom: 2.5em; }
  
  /*== Product Item ==*/
    .section-index.pro-carousel{ padding: 40px 0 80px; }
    .section-index.pro-carousel .wrapper{ padding-top: 3em; }

    .pro-carousel .event-carousel .thumbnail{ padding: 0; background: #fff }
    .pro-carousel .event-carousel .thumbnail .caption{
      background: url(../images/pro_caption_bg.png) no-repeat;
      background-size: cover;
      padding-top: 1.8em;
    }

    .pro-carousel .event-carousel .thumbnail .caption p{ text-transform: uppercase; color: #636566; margin-bottom: 5px; }
    .pro-carousel .event-carousel .thumbnail:hover{ border-color: #00a0e9; box-shadow: 0 0 15px 8px rgba(0,0,0,.1) }
    .pro-carousel .event-carousel .thumbnail:hover .caption{ background-image: url(../images/pro_caption_bg_hover.png); }
    .pro-carousel .event-carousel .thumbnail:hover .caption p{ color: #fff }

    .pro-carousel .slick-dots{ display: none !important; }

    .pro-carousel .slick-prev:before,
    .pro-carousel .slick-next:before {
      display: none;
    }

    .pro-carousel .slick-prev,
    .pro-carousel .slick-next{
      width: 68px;
      height: 67px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      z-index: 2;
      opacity: 1;
    }

    .pro-carousel .slick-prev,
    .pro-carousel .slick-prev:hover,
    .pro-carousel .slick-prev:focus{
      background-image: url(../images/carousel_arrow_left.png);
    }

    .pro-carousel .slick-prev:hover{
      background-image: url(../images/carousel_arrow_left_active.png);
    }

    .pro-carousel .slick-next,
    .pro-carousel .slick-next:hover,
    .pro-carousel .slick-next:focus{
      background-image: url(../images/carousel_arrow_right.png);
    } 

    .pro-carousel .slick-next:hover{
      background-image: url(../images/carousel_arrow_right_active.png);
    }


      @media screen and (min-width:1001px){
        .section-index.main{ margin-bottom: 3em; }
        .pro-carousel .slick-prev{
          left: -75px
        }

        .pro-carousel .slick-next{
          right: -75px
        }
      }

      @media screen and (min-width:1001px) and (max-width:1280px){
        .section-index.pro-carousel .wrapper{ max-width: 1100px }
      }

      @media screen and (max-width:1000px){
        .section-index.pro-carousel .wrapper{ padding-top: 2em; }
        .pro-carousel .event-carousel{ padding:0 3em 1.5em; }
        .pro-carousel .slick-prev{ left:-10px; }
        .pro-carousel .slick-next{ right: -10px }
      }

  /*== About ==*/
    .aboutContent_wrap{ position: relative; padding: 1em 3em 2em; z-index: 1; }
    .aboutContent_wrap > div{ position: relative; z-index: 2; }
    .aboutContent_wrap .text{ color:#3f3e3e; font-size: 16px; line-height: 1.8; margin-top: 15px; margin-bottom: 30px; }

    .aboutContent_wrap::before{
      content: '';
      width: 100%;
      height: 100%;
      background: #fff;
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 0
    }

    .aboutContent_wrap::after{
      content: '';
      width: 50%;
      height: 100%;
      background: #00a0e9;
      position: absolute;
      top: 20px;
      left: -20px;
      z-index: -1
    }
    
    .aboutWrap{ display: flex; }
    .aboutWrap .aboutImg_wrap{ position: relative; flex:2.3; }
    .aboutWrap .aboutContent_wrap{ flex:1.8; position: relative; margin-left: -8em; margin-top: 5em; }
    .aboutWrap .aboutContent_wrap{ padding: 5em }

        @media screen and (min-width:1001px){
          .aboutWrap{ padding-top: 7em; padding-bottom: 5em; }
        }
      
        @media screen and (max-width:1000px){
          .aboutWrap{ flex-direction: column; }
          .aboutWrap .aboutImg_wrap,
          .aboutWrap .aboutContent_wrap{ flex:1; margin: 5px; }
          .aboutWrap .aboutContent_wrap{ padding: 2em; }
        }

        /*== For 首頁 ==*/
          .aboutWrap.index .aboutContent_wrap::before{
            background-image: url(../images/index_about_img.png);
            background-position: top right;
            background-size: cover
          }

            /*== 內頁 ==*/
            .section-about{
              background: url(../images/about_bg.png) no-repeat top;
              background-size: cover;
            }
            
            .section-about .aboutWrap + .aboutWrap{ padding-top: 4em; padding-bottom: 4em; }

              @media screen and (min-width:1001px){
                .section-about{ margin-top: -3em; z-index: -1; }
                .section-about .aboutWrap + .aboutWrap{ align-items: flex-end; padding-top: 2.5em; }
                .section-about .aboutWrap + .aboutWrap .aboutImg_wrap{ order:1; flex:1.3; }
                .section-about .aboutWrap + .aboutWrap .aboutContent_wrap{ flex:1; margin-left: 0; margin-right: -4em; padding-right: 1em; }
                .section-about .aboutWrap + .aboutWrap .aboutContent_wrap::after { left: auto; right: -30px; top: -20px; height: calc(100% + 40px);}
              } 

            

  /*== Application ==*/
    .section-index-application{
      padding-top: 50px !important;
      padding-bottom: 70px !important;
      background: url(../images/index_application_bg.png) no-repeat;
      background-size: cover
    }
    
    .index-applicationWrap{ margin-top: 4em; }
    .index-applicationWrap ul{ overflow: hidden; }

    .index-applicationWrap ul li {
      float: left;
      width: calc(25% - 20px);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      margin: 0 10px;
      overflow: hidden;
    }

    .index-applicationWrap ul li p{ font-size: 18px; font-family: 'Open Sans', Arial; text-transform: uppercase; line-height: 1.5; }
    

    
    /*.index-applicationWrap ul li .hexagon-in2 a {
      display: block;
      text-align: center;
      position: absolute;
      bottom: -10px;
      z-index: 1;
      padding: 0 15px;
    }*/

    .index-applicationWrap ul li .hexagon-in2 a {
      display: block;
      text-align: center;
      position: absolute;
      bottom: -10px;
      z-index: 1;
      padding: 0 15px;
      left: 50%;
      transform: translate(-50%,0);
      width: 100%;
    }

    .index-applicationWrap ul li{ transition: .5s }
    .index-applicationWrap ul li .hexagon-in2::before{
      content: '';
      display: none;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,.5);
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
    }

    .index-applicationWrap ul li:hover .hexagon-in2::before{
      display: block;
    }
      
      @media screen and (min-width:1001px){
        .index-applicationWrap ul li:nth-child(5),
        .index-applicationWrap ul li:nth-child(6),
        .index-applicationWrap ul li:nth-child(7){ margin-top: -100px }

        .index-applicationWrap ul li:nth-child(5){ margin-left: 185px; }

        .index-applicationWrap ul li:nth-child(1) .hexagon-in2{ background-position: 30% }
        .index-applicationWrap ul li:nth-child(4) .hexagon-in2{ background-position: right }

        .index-applicationWrap ul li .hexagon-in2{ display: block; }
        .index-applicationWrap ul li:hover .hexagon-in2 a{ top:50%; bottom: auto; transform: translate(-50%,-50%); }
      }

      @media screen and (min-width:1001px) and (max-width:1280px){
        .index-applicationWrap ul li .hexagon-in2 a{ bottom: 20px }
      }

      @media screen and (max-width:1000px){
        .index-applicationWrap{ margin-top: 1em; }
        .index-applicationWrap ul li { width: calc(50% - 20px);}
        .index-applicationWrap ul li .hexagon{ width: 340px; }
        .index-applicationWrap ul li .hexagon-in2::before{ display: block; }
        .index-applicationWrap ul li .hexagon-in2 a { position: static; transform: translate(0); }
        .index-applicationWrap ul li p{ font-size: 15px; }
      }

      @media screen and (max-width:900px){
        .index-applicationWrap ul li { margin-top: 1em; }
        .index-applicationWrap ul li:last-child{ margin-bottom: 0; }

      }
      @media screen and (max-width:500px){
        .index-applicationWrap ul{ margin-bottom: -4em; }
        .index-applicationWrap ul li{ margin-top: -5em; margin-bottom: -7rem; }
        .index-applicationWrap ul li .hexagon-in2 a img{ max-width: 50px }
      }
      @media screen and (max-width:480px){
        .index-applicationWrap ul li{ margin-top: -4em; margin-bottom: -12rem; }
      }
      @media screen and (max-width:400px){
        .index-applicationWrap ul li{ margin-top: -6em; }
      }
    
    .hexagon {
      width: 350px;
      height: 400px;
      overflow: hidden;
      visibility: hidden;
      transform: rotate(120deg);
      cursor: pointer;
    }

    .hexagon-in1 {
      overflow: hidden;
      width: 100%;
      height: 100%;
      transform: rotate(-60deg);
    }

    .hexagon-in2 {
      width: 100%;
      height: 100%;
      visibility: visible;
      transform: rotate(-60deg);
      background-repeat: no-repeat;
      background-position: 50%;

      display: flex;
      align-items: center;
      justify-content: center;
    }

/*== 活動資訊 ==*/
  .event-carousel{ padding: 1em; }
  .event-carousel .thumbnail{ padding: 20px; border-radius: 0; border-color:#dddddd; margin: 5px; /*background: #fbb8b4*/ background: #eeeeee }
  /*.event-carousel .thumbnail figure{ position: relative; height: 0; padding-bottom: 100%; overflow: hidden; }
  .event-carousel .thumbnail figure img{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
  }*/
  .event-carousel .thumbnail figure{ margin: 0; }
  .event-carousel .thumbnail figure img{ width: 100%; height: 240px; object-fit: cover; object-position: center; }
  
  .event-carousel .thumbnail .caption{ padding-top: 1em; text-align: center; }
  .event-carousel .thumbnail .caption time{ display: block; font-family: Arial; font-size: 15px; margin-bottom: 5px; }
  .event-carousel .thumbnail .caption h3{ margin: 2px 0 0; font-size: 1.3em; }
  .event-carousel .thumbnail .caption .text-wrapper{
    padding-top: 10px;
    margin-top: 10px;
    border-top-width: 1px;
    border-top-style: dotted;
    border-top-color: #fff;
    font-size: 15px;
    line-height: 2;
  }

    @media screen and (min-width:1001px){ }

    @media screen and (max-width:1000px){ }



/*== 內容區 ==*/
  
  .normal-content{ display: block; width: 100%; padding: 1em; background-color: #fff; position: relative; z-index: 2; }
    
    @media screen and (max-width:1500px){
      .normal-content { padding:2%; }
    }

    @media screen and (max-width:1000px){
      .normal-content{ padding:1.5vw 3vw !important; overflow: hidden; }
    }

  .flex-row{ display: flex; }
  .flex-row .col-content.left{ flex-shrink: 0; width: 220px; padding-left: 0; }
  .flex-row .col-content.right{ flex: 1; width: calc(100% - 220px) }
  .flex-row .col-content.right .normal-content{ padding: 0 !important; }
    
    /*== 麵包屑 ==*/
      .breadcrumb{ /*background-color: #f5f5f5;*/ padding:8px 15px 8px 0px; border-radius: 0; }
      .breadcrumb>li>a,
      .breadcrumb>li.active{ font-size: 16px; }
      .breadcrumb>li>a{ color: #0275d8 }
      .breadcrumb>li+li:before{
        content: "›";
        vertical-align: top;
        font-size: 40px;
        line-height: 24px;
        padding: 0 8px 0 6px;
      }
      .breadcrumb>li.active{ color: #818a91; }

        @media screen and (min-width:1001px){
          .breadcrumb{ margin-bottom: 0; }
        }


    /*== 左側連結 ==*/
      .pro-item{  }
      .pro-item>li { position: relative; }
      .pro-item>li + li{ margin-top: 0; }
      .pro-item>li:hover,
      .pro-item>li.active{ border-color: #747070 }

      .pro-item>li>a{ position: relative; display: block; padding-left: .5em; color: #7b7b7a; margin: 20px 0 10px; padding: 15px 10px; border:#bfbfbf 1px solid; }
      .pro-item>li>a:hover,
      .pro-item>li.active>a{ color: #000 }

      .pro-item>li>a::before{
        content: "";
        width: 8px;
        height: 8px;
        background: transparent;
        border-radius: 50%;
        position: absolute;
        right: 10px;
        top: 50%;
        margin-top: -4px;
      }

      .pro-item>li>a:hover::before,
      .pro-item>li.active>a::before{
        background: #ff7151;
      }

      .pro-item>li>a,
      .pro-item>li>ol>li>a{ font-size: 18px; line-height: 1.2 }
      .pro-item-menu>li>ol{ margin-top: 10px; }
      .pro-item-menu>li>ol.active{ display: block; }
      .pro-item-menu>li>ol>li { position: relative; padding-top: 10px; padding-bottom: 10px; padding-left: .8em; border-bottom: #e2dfdf 1px dashed; }
      /*.pro-item-menu>li>ol>li::before {
          content: '';
          display: block;
          width: 3px;
          height: 15px;
          background: #ec7b58;
          position: absolute;
          left: 0;
          top: 10.5px;
      }*/
      .pro-item-menu>li>ol>li>a{ color: #7b7b7a; }
      .pro-item-menu>li>ol>li>a:hover,
      .pro-item-menu>li>ol>li.active>a{ color: #000 }
      
        @media screen and (min-width:1001px){
          .pro-item{  }
        }

        @media screen and (max-width:1000px){
          .mark-icon{ display: none; }
        }
      

    @media screen and (min-width:1001px)and (max-width:1400px){
      .flex-row .col-content.left{ padding-left: 1em }
    }

    @media screen and (min-width:1001px){
      .flex-row{ padding-top: 15px; }
      .flex-row .col-content.right{ padding-left: 3%; }
    }

    @media screen and (max-width:1000px){
      .flex-row .col-content.left,
      .flex-row .col-content.right{ flex:0 0 100%; max-width: 100%; border-left: none; padding-left: 0; padding-right: 0; }
    }
    
    /*== 產品 ==*/
      .section-index.main.pro-middle{ margin-bottom: 0; }
      .pro_info_wrap{ width: 100%; flex-wrap: wrap; margin-bottom: 1em; justify-content: space-between; }
      .pro_info_wrap > div{ flex:none; width: 55% }
      .pro_info_wrap > div + div{ width: calc(45% - 2rem); padding: 1rem 0; margin-left: 2rem; }

      .pro_info_wrap .pro_info_text{ font-size: 16px; }

      .pro_info_wrap .slick-dots { bottom: 20px }
      .pro_info_wrap .slick-dots li.slick-active button:before{ color: #00a0e9 }

      .pro_middle_info{ background: #e5e5e5; border-bottom: #fff 1px solid; }
      .pro_related_info{ flex-wrap: wrap; }
      .pro_related_info .event-carousel{ flex:none; margin-left: 0; padding: 0; }
      .pro_related_info .event-carousel.section-top-blueLine{ border-color: #7d7d7d; border-width: 3px }

      .pro_related_info .event-carousel{ width: 50%; margin-bottom: 1em; }

      .pro_related_info .event-carousel .thumbnail figure img{ height: 125px; }
      .pro_related_info .event-carousel .thumbnail{ padding: 0; margin:.5em 0 0; background: transparent; border-color: transparent; }
      .pro_related_info .event-carousel .thumbnail .caption{ text-align: left; }
      .pro_related_info .event-carousel .thumbnail .caption p{ font-size: 16px; }

        @media screen and (min-width:1001px){
          .pro_info_wrap{ margin: 0 -1em 1em; }
          .pro_related_info .event-carousel{ flex:auto; width: 33%; }
          .pro_related_info .event-carousel:nth-child(3n+2){ width: calc(33% - 20px); margin: 0 10px }
          .pro_related_info .event-carousel .thumbnail figure img{ height: 300px; }
        }

        @media screen and (max-width:1000px){
          .section-index.main.pro-middle{ margin-bottom: 0; }

          .pro_info_wrap .pro_info_img, .pro_info_wrap .pro_info_text{ flex: auto; width: 100% !important; padding:0 15px; }
          .pro_info_wrap .slick-dotted.slick-slider { margin-bottom: 0; }

          .pro_info_text{ margin:0 0 1em !important; }

          .pro_related_info .event-carousel:nth-child(2n+2){ width: calc(50% - 5px); margin-left: 5px; }
          .pro_middle_info { padding-bottom: 2em; }
        }

    /*== 服務 ==*/
      .section-index.service{ padding-left: 0 !important; padding-right: 0 !important; }
      .service_info_wrap{ margin: 0; }
      .service_info_wrap > div,
      .service_info_wrap > div + div{ flex:1; width: 50%; margin-left: 0; }
      .service_info_wrap .pro_info_img img{ width: 100% }

      .service_related_info .event-carousel .thumbnail figure img{ height: 425px; }

        @media screen and (min-width:1001px){
          .service_info_wrap .pro_info_text{ font-size: 18px; padding:10px 40px 10px 40px; }
          .service_related_info{ margin: 0; }
          .service_related_info .event-carousel{ flex:auto; width: calc(20% - 10px) !important; margin: 0 5px }
          .service_related_info .event-carousel:nth-child(3n+2){ margin: 0 }
          .service_related_info .event-carousel .thumbnail .caption{ text-align: center }

          .service_middle_info{ padding-top: 1em; padding-bottom: 3em; }
          .service_middle_info .embed-responsive-4by3{ padding-bottom: 50%; }
        }

        @media screen and (max-width:1000px){
          .service_related_info .event-carousel .thumbnail figure img{ height: 300px; }
        }

      /*== Circle Timeline ==*/
        .section-index.main.service.service_process{ background-color:#F7F7F7; background-image: url(../images/service_process_bg.png);
        background-position: bottom; background-size:cover; background-repeat: repeat-x; margin-bottom: 0; }
        .timeline-circle ol{
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          padding: 50px 0 80px
        }

        .service_process .timeline-circle{ max-width: 1300px; width: 100%; margin: auto; }

        .timeline-circle ol li{ position: relative; flex:none; width: calc(100% / 7); /*margin: 0 10px*/ }
        .timeline-circle ol li .bio{ margin: 0 1.25em }
        .timeline-circle ol li .bio .circle{ display: flex; align-items: center; justify-content: center;
          position: relative; box-shadow: 3px 1px 10px -5px rgba(0,0,0,.5); }
        .timeline-circle ol li .bio .circle img {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          box-shadow: 7px 3px 10px -5px rgba(0,0,0,.5);
          border-radius: 50%;
          background:#fff;
          border:#fff 10px solid;
          z-index: 3;
        }

        .timeline-circle ol li .timenum {
          display: block;
          width: 35px;
          height: 35px;
          line-height: 35px;
          border-radius: 50%;
          color: 

          #fff;
          font-size: 14px;
          text-align: center;
          font-family: Arial;
          position: absolute;
          left: 10px;
          top: 0px;
          z-index: 2;
        }

        .timeline-circle ol li .timetext{
          position: relative;
          display: block;
          color: #3f3e3e;
          font-size: 16px;
          font-weight: 100;
          margin-bottom: 8px;
          font-family: 'Open Sans', Arial;
          text-align: center;
          margin-top: 2.5em;
          line-height: 1.3;
         }

         .timeline-circle ol li .timetext::before{
          content: '  ';
          display: block;
          width: 16px;
          height: 16px;
          background: url(../images/service_process_arrow.png) no-repeat center;
          color: #999;

          position: absolute;
          left: 50%;
          margin-left: -8px;
          top:-25px;
         }

         .timeline-circle ol li:nth-child(1) .bio .circle,
         .timeline-circle ol li:nth-child(1) .timenum{ background:#0e59b1;  }
         .timeline-circle ol li:nth-child(1) .timetext{ color: #0e59b1 }

         .timeline-circle ol li:nth-child(2) .bio .circle,
         .timeline-circle ol li:nth-child(2) .timenum{ background:#f1bd5e;  }
         .timeline-circle ol li:nth-child(2) .timetext{ color: #ce9d43 }

         .timeline-circle ol li:nth-child(3) .bio .circle,
         .timeline-circle ol li:nth-child(3) .timenum{ background:#758f51;  }
         .timeline-circle ol li:nth-child(3) .timetext{ color: #688441 }

         .timeline-circle ol li:nth-child(4) .bio .circle,
         .timeline-circle ol li:nth-child(4) .timenum{ background:#ed6355;  }
         .timeline-circle ol li:nth-child(4) .timetext{ color: #ed6355 }

         .timeline-circle ol li:nth-child(5) .bio .circle,
         .timeline-circle ol li:nth-child(5) .timenum{ background:#804bf6;  }
         .timeline-circle ol li:nth-child(5) .timetext{ color: #804bf6 }

         .timeline-circle ol li:nth-child(6) .bio .circle,
         .timeline-circle ol li:nth-child(6) .timenum{ background:#af593c;  }
         .timeline-circle ol li:nth-child(6) .timetext{ color: #af593c }

         .timeline-circle ol li:nth-child(7) .bio .circle,
         .timeline-circle ol li:nth-child(7) .timenum{ background:#2d8fe6;  }
         .timeline-circle ol li:nth-child(7) .timetext{ color: #2d8fe6 }

            @media screen and (min-width:1700px){
              /*.timeline-circle ol li .bio{ margin: 0 2em }*/
            }

            @media screen and (min-width:1200px){
              .section-index.main.service .container { width: 100%; max-width: 1170px; }
            }

            @media screen and (min-width:1001px) and (max-width: 1500px){
              /*.timeline-circle ol li .bio{ margin: 0 1em }*/
              .timeline-circle ol li .timetext{ font-size: 15px; }
            }

            @media screen and (max-width: 1000px){
              .timeline-circle ol{ justify-content: space-between; padding-top: 15px; padding-bottom: 0px; }
              .timeline-circle ol li{ width: calc(25% - 20px); margin: 0 10px; margin-bottom: 1em; }
              .timeline-circle ol li .timetext{ font-size: 16px; margin-top: 2em; }

              .timeline-circle ol li .bio .circle{ display: block; }
              .timeline-circle ol li .bio .circle img{ left: 50%; transform: translate(-50%,-50%); }
            }

            @media screen and (max-width: 640px){
              .timeline-circle ol li{ width: calc(40% - 20px) }
            }

           @media screen and (max-width: 480px){
            .timeline-circle ol li{ width: calc(50% - 20px) }
           }

      /* TIMELINE  –––––––––––––––––––––––––––––––––––––––––––––––––– */
        /*.timeline {
          white-space: nowrap;
          overflow-x: hidden;
        }*/

        .timeline ol {
          font-size: 0;
          /*width: 100vw;*/
          padding: 380px 0;
          transition: all 1s;
          text-align: center;
        }

        .timeline ol li {
          position: relative;
          display: inline-block;
          list-style-type: none;
          width: 260px;
          height: 3px;
          background: #042778;
        }

        /*.timeline ol li:last-child {
          width: 280px;
        }*/

        .timeline ol li:not(:first-child) {
          /* margin-left: 14px; */
        }

        .timeline ol li .timenum {
          position: absolute;
           top: 100%; 
          left: 50%;
          width: 30px;
          height: 30px;
          line-height: 25px;
          transform: translate(-50%,0%);
          border-radius: 50%;
          background: #fff;
          z-index: 2;
          border: #05b9fc 3px solid;
          font-size: 16px;
          font-weight: 600;
          font-family: Arial;
          text-align: center;
          padding: 0;
          margin: 0;
        }

        .timeline ol li:nth-child(even) .timenum{
          border: #fc5c05 3px solid;
          top: -35px
        }

        .timeline ol li .timenum::before{
          content: '';
          display: block;
          width: 1px;
          height: 110%;
          background: #05b9fc;
          position: absolute;
          top: -120%;
          left: 50%;

        }

        .timeline ol li:nth-child(even) .timenum::before{
          top:auto;
          bottom: -120%;
          background: #fc5c05;
        }

        /*.timeline ol li:last-child .num{ left:50%; }*/

        /*.timeline ol li::after {
            content: ''; 
            position: absolute;
            top: 50%;
            left: calc(100% - 60px);
            bottom: 0;
            width: 24px;
            height: 24px;
            transform: translate(-50%,-50%);
            border-radius: 50%;
            background: #fff;
            z-index: 2;
            border: #05b9fc 3px solid;
        }

        .timeline ol li:nth-child(even)::after{
          border: #fc5c05 3px solid;
        }

        .timeline ol li:last-child::after{ left:50%; }*/

        .timeline ol li div {
          position: absolute;
          left: 0;
          /*width: 280px;*/
          width: 100%;
          padding: 15px;
          padding-bottom: 30px;
          font-size: 1rem;
          white-space: normal;
          color: black;
          /*background: white;*/
          text-align: center;
        }

        .timeline ol li div::before {
          content: '';
          position: absolute;
          top: 100%;
          left: 0;
          width: 0;
          height: 0;
          border-style: solid;
        }

        .timeline ol li:nth-child(odd) div {
          top: -16px;
          transform: translateY(-100%);
        }

        .timeline ol li:nth-child(odd) div::before {
          top: 100%;
          border-width: 8px 8px 0 0;
          border-color: white transparent transparent transparent;
        }

        .timeline ol li:nth-child(even) div {
          top: calc(100% + 16px);
          padding-top: 30px;
        }

        .timeline ol li:nth-child(even) div::before {
          top: -8px;
          border-width: 8px 0 0 8px;
          border-color: transparent transparent transparent white;
        }

        .timeline time {
          display: block;
          color: #3f3e3e;
          text-transform: uppercase;
          font-size: 18px;
          margin-bottom: 8px;
          font-family: Arial;
        }

        .bio {
          margin: 0.25em;
        }

        .bio .circle {
          width: 100%;
          height: 0;
          padding-bottom: 100%;

          -moz-border-radius: 50%;
          -webkit-border-radius: 50%;
          border-radius: 50%;

          background-repeat: no-repeat;
          background-position: center center;

          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
        }


      /* TIMELINE ARROWS
      –––––––––––––––––––––––––––––––––––––––––––––––––– 
        .timeline .arrows {
          display: flex;
          justify-content: center;
          margin-bottom: 20px;
        }

        .timeline .arrows .arrow__prev {
          margin-right: 20px;
        }

        .timeline .disabled {
          opacity: .5;
        }

        .timeline .arrows img {
          width: 45px;
          height: 45px;
        }
      */

      /* GENERAL MEDIA QUERIES
      –––––––––––––––––––––––––––––––––––––––––––––––––– */
        @media screen and (min-width:1001px){
          .timeline ol{ display: flex; align-items: center; justify-content: center; }
          .timeline ol li{ width: auto; flex:1; }

          .timeline ol li:first-child{ text-align: left; }
          .timeline ol li:last-child{ text-align: right; }
          .timeline ol li:first-child::before,
          .timeline ol li:last-child::after {
            content: '';
            display: inline-block;
            vertical-align: top;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #042778;
            margin-top: -4px;
            margin-left: -10px;
          }

          .timeline ol li div{ display: flex; flex-direction: column; }
          .timeline ol li:nth-child(odd) div .bio{ order:-1; margin-bottom: 1em; }

          .timeline ol li div .bio{ display: flex; align-items: center; justify-content: center; }
          .timeline ol li div .bio .circle{ flex:none; }
          .timeline ol li div .bio .circle + .circle{ margin-left: -4em; }
        }

        @media screen and (min-width:1001px){
          .timeline ol{ padding: 430px 0 400px 0 }
        }

        @media screen and (min-width: 1001px)  and (max-width:1300px){
          .timeline ol li div{ width: 85%; }
        }

        @media screen and (max-width: 1000px) {
          .timeline time{ font-size: 17px; }
          .timeline ol,
          .timeline ol li {
            width: auto; 
          }
          
          .timeline ol {
            padding: 0;
            transform: none !important;
          }
          
          .timeline ol li {
            display: block;
            height: auto;
            background: transparent;
          }
          
          .timeline ol li + li {
            margin-top: 25px;
          }
          
          .timeline ol li:not(:first-child) {
            margin-left: auto;
          }
          
          .timeline ol li div {
            width: 97%;
            height: auto !important;
            margin: 0 auto 25px;
          }
          
          .timeline ol li div {
            position: relative;
          }
          
          .timeline ol li:nth-child(odd) div {
            top: 0;
            transform: none;
          }

          .timeline ol li div,
          .timeline ol li:nth-child(even) div { padding: 0; }
          
          .timeline ol li:nth-child(odd) div::before,
          .timeline ol li:nth-child(even) div::before {
            left: 50%;
            top: 100%;
            transform: translateX(-50%);
            border: none;
            border-left: 1px solid white;
            height: 25px;
          }
          
          .timeline ol li:last-child,
          .timeline ol li:nth-last-child(2) div::before,
          .timeline ol li:not(:last-child)::after,
          .timeline .arrows {
            display: none;
          }

          .timeline ol li .timenum,
          .timeline ol li:nth-child(even) .timenum{ top:0px; left: 0; transform: translate(0,0); }
          .timeline ol li .timenum::before,
          .timeline ol li:nth-child(even) .timenum::before {
            display: none;
            /*top: 50%;
            bottom: auto;
            width: 100%;
            height: 1px;
            left: 110%;*/
          }

          .timeline ol li div .bio .circle + .circle{ margin-top: 1em; }

        }
      

    /*== Contact ==*/
      .list-inline.contact-info>li{ font-size: 15px; font-family: 'Roboto', Arial; }
      .list-inline.contact-info>li>img{ top: 5px }

      .contact-info{ margin-bottom: 4em; }
      .contact-info p{ font-size: 18px; }
      
      .contact-form{ padding: 2.5em; max-width: 1200px; margin: auto; }
      .contact-form .form-control{ border-radius: 0; }
      .contact-form input.form-control,
      .contact-form select.form-control{ height: 45px; }
      
      .contact-btn-list{ margin-top: 2em; }
      .contact-btn-list li .contact-btn{ color:#fff; background-color: #ababab }
      .contact-btn-list li + li .contact-btn{ background-color: #00a0e9; border-color: #00a0e9 }

        @media screen and (max-width:1000px){
          .contact-info{ padding: 15px 0; margin-top: 0; margin-bottom: 0; }
          .contact-info > p{ font-size: 1.2em; }
          .contact-btn-list{ flex-direction: column; }
          .contact-btn-list li{ padding-right: 0; }
          .contact-btn-list li + li{ padding-left: 0; margin-top: 10px; }
        }



/*== 標題 ==*/
  .page-header{ margin-top: 0; margin-bottom: 0; padding-bottom: 0; border-bottom: none; line-height: 1; }
  .page-header h2{ font-size:3em; font-weight: 600; text-transform: uppercase; color:#00a0e9; font-family: 'Roboto', Arial; margin-bottom: 0; }
  .page-header h2 + p{ font-weight: 300; line-height: 1.5; }

  .main-header{ margin-top: 0; margin-bottom: 40px; border-bottom: #00a0e9 2px solid; padding-bottom: 40px; }
  .main-header h2{ font-size: 30px; color: #3e3e3e }

  .main-header.pro{ border-bottom: none; margin-bottom: 10px; padding-bottom: 1rem; }

  
  .section-top-blueLine{ border-top: #00a0e9 2px solid; }
  .section-bottom-blueLine{ border-bottom: #00a0e9 2px solid; }

  .section-title{
    display: inline-block;
    position: relative;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }

  .section-title.wd{ color:#fff; }

  .section-title:after,
  .section-title:before {
    content: '';
    position: absolute;
    bottom: 0;
  }

  .section-title:after {
    height: 3px;
    background-color: #f83508;
    left: 50%;
    margin-left: -13px;
    width: 26px;
  }

  .section-title-slash{
    padding-bottom: 0;
    line-height: 1;
    font-size: 1.8em !important;
    color: #3f3f3f;
    font-weight: 600;
  }

  .section-title-slash:before,
  .section-title-slash:after{
    content: '';
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    background-color: #3f3f3f;
  }

  .section-title-slash:before{
    transform: rotate(20deg);
    left: -20px;
  }

  .section-title-slash:after{
    right: -20px;
    left: auto;
    transform: rotate(-20deg);
  }

  .sample01 {
    color: black;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: black;
  }

  .title_sample{
    font-size: 18px !important; color: #3f3e3e !important; text-transform: uppercase;
  }

    @media screen and (max-width:1000px){
      .page-header h2{ font-size: 1.8em; }
      .main-header{ margin-bottom: 10px; padding-bottom: 15px; }
    }


/*== 消息列表 ==*/
  .content-list-box{ margin-bottom: 2em; }

    .content-title {
        overflow: hidden;
        padding: 10px 0 10px 20px;
        background: #f5f4f4
    }

    .content-title span {
        font-size: 18px;
        color: #5c6274;
        margin-bottom: 0;
        line-height: 1;
    }

    .content-list {
        line-height: 2;
    }

    .content-list ul{ padding-left: 0; }

    .content-list li {
      font-size: 18px;
      padding-top: .5em;
    }

    .content-list a:hover,
    .content-list li a:hover{ color: #f83508 }

    
    /*== 內頁 ==*/ 
      .section-news{ padding-left: 0; padding-right: 0; }
      .main-newsList{ margin-bottom: 0; }
      .main-newsList li{ display: flex; justify-content: space-around; align-items: flex-start; padding-bottom: 1.5em !important; border-bottom: #e8e8e8 1px solid; }
      .main-newsList li + li{ margin-top: 1.5em; }
      .main-newsList li:last-child{ border-bottom: none; padding-bottom: 0 !important; }

      .main-newsList .news-text { font-size: 16px; line-height: 1.3; margin-top: 2px; padding-right: 30px;
        flex: 1; width: 100%; }
      .main-newsList .news-text .text{ padding-left: 0; }
      .main-newsList .news-text .text p{ margin-bottom: 5px; }
      .main-newsList .news-text .tag span{ display: inline-block; font-size: 14px; color: #666 }
      .main-newsList .news-text .tag span + span{ padding-left: 10px; }
      
      .news-time-wrap{ display: flex; align-items: center; font-family: Arial; }
      .news-time-wrap .news-time-date{ font-size: 46px; color: #15b1a3; line-height: 1; }
      .news-time-wrap .news-time-list{ padding-left: 5px; padding-right: 5px; font-size: 16px; color: #3f3e3e; line-height: 1.3; margin-top: 5px; }
      .news-time-wrap .news-time-list .news-time-month{ color: #6b6b6b; text-transform: uppercase; }
      .news-time-wrap .news-time-list .news-time-year{ color: #aaaaaa }

      .main-newsList .news-time,
      .main-newsList .news-btn{ width: 110px; }
      
      .main-newsList .btn{ font-size: 16px; line-height: 1.1; font-family: Arial; }

      .main-news-dWrap .content-list{ padding: 10px 0 10px 20px; border-bottom: #d7d7d7 1px solid; font-size: 16px; color: #5c5959 }
      .main-news-dWrap .content-list span ~ span{ padding-left: 15px; }
      .main-news-dWrap .content-list a{ text-decoration: underline; }
      .main-news-dWrap .attachment{ border-bottom: #d7d7d7 1px solid; margin-top: 15px; }

      .main-newsList li.title{ padding-bottom: 1em !important; justify-content: flex-start; color: #969595 }
      .main-newsList li.title .news-text{ flex:none; width: calc(100% - 265px); } 
      .main-newsList li.title .news-time-wrap .news-time-list{ color: #969595 }

      .main-newsList li.dt_list{ flex-direction: column; border-bottom: #d7d7d7 1px solid; padding-bottom: 1em !important; padding-left: 15px; margin-bottom: 30px; }
      .main-newsList li.dt_list .news-time-wrap,
      .main-newsList li.dt_list .news-time-wrap .news-time-list{ padding-left: 0; }

      .main-newsList li.dt_list .news-text .text p{ font-size: 18px; font-weight: 400; }

        @media screen and (min-width:1001px){
          .news-time-wrap{ padding-left: 30px; padding-right: 30px; }
          .main-newsList li.dt_list{ margin-top: -30px; }
          .main-newsList li.dt_list > div{ width: 100%; flex:auto; }
        }

        @media screen and (max-width:1000px){
          .section-news{ padding-left: 0 !important; padding-right: 0 !important; }
          .main-newsList li{ flex-wrap: wrap; justify-content: space-between; padding-bottom: 1.5em !important; align-items: center; }
          .main-newsList li + li{ margin-top: 1em; }
          .main-newsList .news-text{ flex:auto; width: 100%; margin-bottom: .5em; }
          .main-newsList .news-btn{ display: flex; justify-content: space-between; }
          .main-newsList .news-btn .btn{ margin-top: 1em; }

          .main-newsList li.title{ display: none; }
        }


/*== 回上頁 ==*/
  .page-arrow {
      width: 100%;
      height: auto;
  }

  .page-arrow:after {
      content: "";
      display: block;
      clear: both;
      visibility: hidden;
      line-height: 0;
      height: 0;
  }

  .page-arrow .prev a:hover{ color: #00bdc2 }

  .page-arrow .prev {
      width: 50%;
      height: 64px;
      float: left;
      background-image: url(../images/prev.jpg);
      background-repeat: no-repeat;
      background-size: 80px 64px;
      background-position: left center;
  }

  .page-arrow .prev a {
      display: block;
      font-size: 16px;
      color: #666;
      line-height: 24px;
      padding-left: 60px;
      margin-top: 40px;
  }

  .page-arrow .next {
      width: 50%;
      height: 64px;
      float: right;
      background-image: url(../images/next.jpg);
      background-repeat: no-repeat;
      background-size: 80px 64px;
      background-position: right center;
      text-align: right;
  }

  .page-arrow .next a {
      display: block;
      font-size: 16px;
      color: #666;
      line-height: 24px;
      padding-right: 60px;
      margin-top: 40px;
  }

  .page-arrow-full.page-arrow .prev {
      /*float: right;*/
      text-align: right;
      background-position: calc(100% - 50px) center;
  }


/*== 頁碼 ==*/
  .pagination *{ border:none !important; }
  .pagination>li>a{ font-size: 17px; line-height: 1.5; font-family: Arial; color: #333; margin: 0 .6em; padding: 3px 0px; line-height: 1; }

  .pagination>li>a:hover,
  .pagination>.active>a,
  .pagination>.active>a:hover,
  .pagination>.active>a:focus{ background-color: #fff; color:#00a0e9; border-bottom: #00a0e9 1px solid !important;/*color: #fff; background-color: #EA616F; border-radius: 14px; padding:2px 16px 1px;*/ }

  .pagination>li>a.prev,
  .pagination>li>a.next,
  .pagination>li>a.prev:hover,
  .pagination>li>a.next:hover{ font-family: 'opan sans'; border:none !important; background: transparent; color:#00a0e9; }

  .mobile-pagination {
    overflow: hidden;
    border: 1px solid #e7e7e7;
    border-radius: .188rem;

    display: flex;
    justify-content: space-between;
    padding: 0 !important;
  }

  .mobile-pagination li,
  .mobile-pagination li a{ margin: 0; border-radius: 0; }

  .mobile-pagination li{ display: inline-flex; justify-content: center; flex:1; }
  .mobile-pagination li:not(:last-child){ border-right: 1px solid#e7e7e7 !important; }
  .mobile-pagination li.select{ flex:2; padding-left: 3px; padding-right: 3px; }
  .mobile-pagination li a,
  .mobile-pagination li a:hover{ padding: 1rem 0; color: #00a0e9 }
  .mobile-pagination li a:hover{ border: none !important; background: transparent; border-radius: 0; }

  /*== 搜尋bar ==*/
    .selectBox {
      width: 100%;
      overflow: hidden;
      background: #fff;
      border: 1px solid #e7e7e7;
      border-radius: .188rem;
      position: relative;
    }

    .selectBox select,
    .selectBox select:focus {
      width: 100%;
      height: 3rem;
      overflow: hidden;
      background: #fff;
      color: #555;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: .625rem 2.5rem .625rem .625rem;
      cursor: pointer;

      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      border: none;
      border-radius: 0;
      box-shadow: none;

      font-size: 1.6rem;
    }

    .selectBox>i {
      color: #7b7979;
      font-size: 1.8rem;
      display: block;
      pointer-events: none;
      position: absolute;
      top: 50%;
      right: .625rem;
      z-index: 9;
      -webkit-transform: translate3d(0,-50%,0);
      transform: translate3d(0,-50%,0);
      transition: all .2s cubic-bezier(.77,0,.175,1);
    }

    .search-content{ background: #EEEEEE; padding: 12px; margin-top: 10px; }
    .search-content input,
    .search-content select{ height: 36px }
    
    
    .search-content .login-btn { padding-left: 1.5em; padding-right: 1.5em; }

/*== goTop ==*/
  .back-to-top,
  .back-to-top:hover,
  .back-to-top:focus {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    border:none;
    background: url(../images/gotop_bg.png);
    z-index: 4;
    height: 43px;
    width: 38px;
    font-size: 10px;
    font-family: Arial;
    color: #fff;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .back-to-top img{ margin-top: 0; }
  .back-to-top p{ transform: scale(.9); }

/*== 區塊列表 ==*/
  .attachment{
      clear: both;
      overflow: hidden;
      margin: 5px 0px 15px;
      padding: 10px 0;
      font-size: 16px;
  }

  .attachment ul {
      margin: 0 3px;
      padding: 0 15px;
      list-style: none;
      line-height: 150%;
  }

  .attachment .filename li {
    margin: 0 0 .5em;
    padding: 5px 0 5px 25px;
    background: url(../images/submenu_icon_active.png) no-repeat 5px 13px;
    line-height: 180%;
    font-size: 1.3em;
  }

  .attachment li a {
    color: #333;
    text-decoration: none;
  }

  .attachment .filename li span {
    margin-left: .2em;
  }

  .attachment .fileType {
    margin-right: 5px;
  }

  .attachment .filename li span {
    margin-left: .2em;
  }


/*==  ==*/
  @media screen and (max-width:1000px){
    img{ float:none !important; }
    table{ width: 100% !important; table-layout: fixed; }
  }


/*== 清單 ==*/
  .menu-item-inline {
      clear: both;
      text-align: center;
      display: flex;
      flex-wrap: wrap;
      margin: 0 auto;
  }

  .menu-item-inline ul{
    display: inline-flex;
    flex-wrap: wrap;
    width: 100%;
  }

  .menu-item-inline ul li{ padding: 0 1em; color: #fff; font-size: 18px; flex:1; }
  .menu-item-inline ul li a:empty{ display: none; }
  .menu-item-inline ul li + li a{ }
  .menu-item-inline ul li a{ display: block; padding: .25em; }

  .menu-item-inline ul li.item{
    display: block;
    padding: .25em 1.5em;
  }
  .menu-item-inline ul li .header-dropdown-menu{ min-width: 100%; border-radius: 0; }
  
  .menu-item-inline ul li .header-dropdown-menu > li > a,
  .menu-item-inline ul li .header-dropdown-menu > li > a:hover,
  .menu-item-inline ul li .header-dropdown-menu > li > a:focus{ padding: 10px 40px; border:none; background: transparent; }

    @media screen and (min-width:1001px){
      .menu-item-inline ul li .nice-select{
        margin-left: -1.5em;
        margin-right: -1.5em;
      }

      .menu-item-inline ul li .header-dropdown-menu{ opacity:0;pointer-events:none; }
      .menu-item-inline ul li:hover .header-dropdown-menu{ opacity:1;pointer-events:auto}
      
      .menu-item-inline ul li a{ border-right: none; }
      .menu-item-inline ul li .header-dropdown-menu{ min-width: 100%; border-radius: 0; border-left:none; border-right: none }
      .menu-item-inline ul li .header-dropdown-menu > li { border-left: none !important; border-radius: 0 !important }

    } 

    @media screen and (max-width:1000px){
      .menu-item-inline ul{ width: 100%; border-bottom:transparent 1px solid }
      .menu-item-inline ul li{ flex:auto; font-size: 1.1em; }
      .menu-item-inline ul li.item{ width: 50%; }
      .menu-item-inline ul li a { padding: 15px; }
      .menu-item-inline ul li .nice-select{ width: 100%; display: flex; justify-content: center; padding: 0; }

      .menu-item-inline ul li .nice-select:after{ right: 2px; }
      .menu-item-inline ul li .nice-select li{ border:none; }
      .menu-item-inline ul li a.menu-icon-plus{ position: absolute; top: 8px; right: 8px; background: transparent !important; border:none !important; }
      .menu-item-inline ul li a.menu-icon-plus i{ color: #000 !important }
      .menu-item-inline ul li .header-dropdown-menu{ position: relative; top: 0; margin-bottom: 20px; }
    }


.text-small{ font-size: 15px; font-family: 'AVANTN'; font-weight: 600; letter-spacing: 1px }
.font-color-pink{ text-transform: uppercase; font-weight: bold; color: #db8af5;}

.download{ background: #ff7151; border-color: #ff7151; }
.more{ background: #00a0e9; border-color: #00a0e9; color:#fff; }

.center-block.main-newsList{ background: transparent; }
.center-block.main-newsList .btn{ padding-left: 2em; padding-right: 2em; line-height: 1.5; }

.btn-back-gray,
.btn-back-gray:hover {
    background: #ababab;
    border-color: #ababab;
}
.btn-back,
.btn-back:hover {
    background: #000;
    border-color: #000;
}
.contact-btn{
  margin-bottom: 0;
  font-weight: 200;
  text-align: center;
  padding: 8px 4em;
  font-size: 18px;
  line-height: 1.42857143;
  font-weight: 300;
}

.btn-back,
.btn-back-gray,
.btn-back:hover,
.btn-back-gray:hover {
    margin-bottom: 0;
    font-weight: 200;
    text-align: center;
    padding: 8px 4em;
    font-size: 18px;
    line-height: 1.42857143;
    color: #fff;
    font-weight: 300;
}

.tag-item {
    width: auto;
    font-size: 14px;
    line-height: 28px;
    display: inline-block;
    height: 28px;
    margin-top: 2.5px;
    margin-right: 5px;
    padding: 0 10px;
    text-align: center;
    color: #849aae;
    background: #f2f5fa;
}

/*=============================== RESPONSIVE ===================================*/

@media screen and (min-width: 1700px){
  .select_item{ padding-right: 10vw; }
  .header_link{ padding-right: 0em !important; }

  .product_showinfo{ height: auto; padding:5% 3%; }

}

@media screen and (min-width: 1001px){

  /*== Header ==*/
  .navbar .wrapper .row{ display: flex; flex-wrap: wrap; }
  
  .navbar-brand { height: auto; padding-right: 1em; }

  .header_link { width: 100%; text-align: right; padding-bottom: 5px; margin-bottom: -2.8em; }
  .header_link > li{ position: relative; float: none; display: inline-block; padding:2.8em 2em; }
  .header_link > li > a{ display: block; padding: .8em 0 0; }
}


@media screen and (min-width: 1001px) and (max-width: 1199px){

  /*== Header ==*/
  .header_link{padding-right: 0em;}
  .header_link > li > a { font-size: 1.5vw; padding-left: 0vw; padding-right: 0vw; }
  .header-dropdown-menu{ right: 20px }

}

@media screen and (max-width:1000px){

  .navbar { }

  .carousel-indicators{ bottom: -10px }

  .header_btn .visible-xs{ display: inline-block !important; }

  .index_carousel{  }

  /*== Header ==*/
  .navbar-header{ align-items: flex-start; justify-content: flex-start; flex-flow: column wrap; }

  .navbar-brand{
    width: 80vw;
    height: auto;
    margin-left: -5px;
  }

  .navbar-header + .navbar-collapse{ padding-left: 0; padding-right: 0; }
  .header_link{ display: flex; flex-wrap: wrap; }
  .header_link > li{ padding: 10px 0; width: 100%; flex: auto; border-bottom: #f5eeee 1px solid; }
  .header_link > li > a{ padding: 5px; font-size: 1.1em; text-transform: uppercase; text-align: left }

  .menu-icon-plus{ background-color:#fff !important; padding:5px 10px; margin-top: 5px; padding: 5px 8px !important }
  .menu-icon-plus i{ color: #737070; }
  .menu-icon-plus + .header-dropdown-menu { background: #f9f8f8 !important; border: #f5efef 1px solid !important; border-radius: 0; }
  .header-dropdown-menu > li:not(:last-child){ border-bottom: #cccccc47 1px solid; }
  .header-dropdown-menu > li a{ color: #0e6fb9 !important; padding-left: 0 !important; }
  
  .header-dropdown-menu > li > ul{ margin-top: .5em; }
  .header-dropdown-menu > li > ul > li{ background: #ffffff24; padding: 0.2em .5em;}
  .header-dropdown-menu > li > a.menu-icon-plus{ margin-top: -1.6em !important; padding: 5px !important; background-color: transparent !important; }
  .header-dropdown-menu > li > ul > li > ul{ background: #1f1e1e; padding: .2em .8em; }
  .header-dropdown-menu > li > ul > li > ul > li{ display: inline-block; float: none; width: calc(33% - 6px); text-align: center; }
  .sub-header-dropdown-menu{ display: none !important; }
  .sub-header-dropdown-menu.active{ display: block !important; }

  .navbar-toggle {
    position: absolute;
    right: -1em;
    margin-bottom: 0;
    top: 50%;
    margin-top: -20px;
    z-index: 4;
    /*border-radius: 50% !important;*/
    border:none;
    padding: 0;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center; 
    padding-left: .55em;
  }

  .top-menu{ width: 100%; }

}

@media screen and (max-width:400px){

  .mobile-menu-flex .header_link > li > a{ font-size: 16px; }

  .index-carousel figure{
    font-size: 16px;
  }

  .index-carousel figure > span,
  .index-carousel figure > figcaption {
      padding: .5em;
  }

  .index-carousel .carousel-indicators {
      bottom: -40px;
  }

}