@charset "utf-8";

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

html, body{
  font-size: 18px;
}

/*========================================== 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-1100{ max-width: 1100px }
.wrapper-1000{ max-width: 1000px }

  @media screen and (min-width:2000px){
    .wrapper{ max-width: 2000px; }
  }

/*== 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: #e493b6
}

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

.navbar-brand {
  padding: 0;
}

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

.navbar{ width: 100%; background: transparent; border-radius: 0; margin-bottom: 0; z-index: 4 }

.header_link > li > a{
  display: block;
  text-align: center;
  color: #231815 !important;
  font-family: 'Noto Serif', serif;
}

.header_link > li:hover > a,
.header_link > li > a:hover,
.header_link > li > a.active{
  color: #0e93c0 !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: 16px; font-family: 'Open Sans',Arial; }

  @media screen and (min-width:1030px){
  
    .header_link > li > a > p{ font-size: 18px; }

    .header_link > li > a > span{
      position: absolute;
      left: 50%;
      display: inline-block;
      transition: .5s;
      opacity: 0;
    }

    .header_link > li > a > span.icon-menu-top{
      background:url(../images/icon-menu-top.png) no-repeat center;
      width: 25px;
      height: 21px;
      
      top: -20px;
      margin-left: -12.5px;
    }

    .header_link > li > a > span.icon-menu-bottom{
      background:url(../images/icon-menu-bottom.png) no-repeat center;
      width: 71px;
      height: 15px;
      
      bottom: -20px;
      margin-left: -35.5px;
    }
    
    .header_link > li:hover > a > span,
    .header_link > li > a:hover > span,
    .header_link > li > a.active > span{
      opacity: 1;
    }

    .header_link > li > a.icon-home{
      color:#1897c3 !important;
      font-family: 'Open Sans', sans-serif;
    }

    .header_link > li > a.icon-home > p{
      font-size: 14px;
    }

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

    .dropdown-menu-link {
      opacity: 0;
      visibility: hidden;
      padding:15px 0 40px;
      background: transparent;
      border-radius: 0 !important;
      border:none;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
      box-shadow: none;
    }
    .dropdown-menu-link li{ background-color: #3499b5d2; padding:1.25rem 2.5rem; text-align: center; }
    .dropdown-menu-link li:last-child{  }
    .dropdown-menu-link li a{ color: #fff; padding: 0; } 
    .dropdown-menu-link li:hover{ background-color: #3499b5; }
    .dropdown-menu-link li a:hover,
    .dropdown-menu-link li a.active{ color:#fff; background: transparent !important }

  }

  @media screen and (max-width:1025px){
    .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 }
  }

footer{
  position: relative;
  float: left;
  width: 100%;
  overflow: hidden;
  padding: 25px 0 12.5px 0;
  font-size: 16px;
  height: auto !important;
  background-color: #1b1b1b;
  color:#fff;
}

footer .row{ display: flex; flex-wrap: wrap; align-items: center; }

footer ul.list-inline>li,
.list-inline.footer-info>li{ position: relative; line-height: 1.8; padding-left: 0; }
.list-inline.footer-info>li{ padding-left: 2.5em; }
.list-inline.footer-info>li img.icon-info{ position: absolute; left:0 }
.list-inline.footer-info>li span{ font-weight: 100; font-size: 17px; font-family: 'Open Sans',Arial; }



.footer h4{ text-align: center; line-height: 1.5; font-size: 1em; text-transform: uppercase; margin:5px 0 0 }
.footer h5{ text-transform: uppercase; color: #00a0e9; font-size: 1.2em; margin-bottom: 5px; }

.footer-iware{
  display: inline-block;
  background-color: #000000;
  padding:0px 10px 3px;
  text-align: center;
  margin-top: 1rem;
}

.list-bottom-link li{
  padding:0 1rem
}

.footer-link{ padding:1rem 3rem 1.5rem; background-color: #313131; }
.footer-link ul{ display: flex; align-items: center; justify-content: space-between; }
.footer-link ul li a { font-size: 19px; color:#fff; font-family: 'Noto Serif', serif; }

  @media screen and (min-width:1200px){
    .list-bottom-link li{
      padding:0 2rem
    }
  }

  @media screen and (max-width:1300px){
    .footer-link{ padding:1rem 1rem 1.5rem; }
    .list-bottom-link li {
      padding: 0 1rem;
    }
  }

  @media screen and (max-width:1025px){
    footer{ padding-top: 10px; padding-bottom: 25px; }
    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: 0em; }
    footer ul.list-inline.footer-info{ text-align: center; 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 }
    footer ul.list-inline.footer-info{ align-items: flex-start; text-align: left; }
    footer ul.list-inline.footer-info > li:first-child{ display: block; }
  }

  /* == Banner == */
    .banner-wrap{ text-align: center; }
    .banner-wrap img{ max-width: auto; width: 100%; }

      @media screen and (max-width:1025px){
        .banner-wrap .slick-dotted.slick-slider{ margin-bottom: 0; }
      }
    
  
/*== 首頁 ==*/
  .section-index{
    position: relative;
    padding:1rem
  }

    /* 產品介紹 */
      .pro-list-wrap{ margin-top: 2rem; }
      .pro-list-wrap .thumbnail,
      .pro-list-wrap .thumbnail figure{
        position: relative;
        border:none;
        overflow: hidden;
        border-radius: 0;
        padding: 0;
      }

      .pro-list-wrap .thumbnail figure{
        width: 100%;
        height: 100%;
        min-height: 500px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
      }

      .pro-list-wrap .thumbnail .caption{ transition: .5s; opacity: 0; visibility: hidden; display:flex; flex-direction: column; justify-content: space-between; position: absolute; top: 0; width: 100%; height: 100%; padding:1.25rem 1rem; background-color: rgba(14, 147, 192,.8); color: #fff; text-transform: uppercase;  }
      .pro-list-wrap .thumbnail .caption .h3{ max-width:12em; font-size: 20px; font-family: 'Roboto'; text-align: right; margin:0 0 0 auto }
      .pro-list-wrap .thumbnail .caption .txt{ font-size: 12px; font-family: 'Open Sans'; text-align: right; }
      .pro-list-wrap .thumbnail .caption .icon-hover{ text-align: center; }
      .pro-list-wrap .thumbnail .caption .icon-hover img{ display: inline-block; }

      .pro-list-wrap .thumbnail:hover .caption{ opacity: 1; visibility: visible; }
        
      .index-pro-slider{ padding-bottom: 5%; }
      .index-pro-slider .slick-dots{ bottom: -10px; }

      .index-pro-slider .slick-prev,
      .index-pro-slider .slick-next {
        width: 130px;
        height: 45px;
        border: #aaaaaa 1px solid;
        z-index: 2;
        top: auto;
        bottom: -10%;
        transform: translate(0, 0%);
      }
      
      .index-pro-slider .slick-prev::before,
      .index-pro-slider .slick-next::before{ font-size: 18px; font-family: Arial; font-weight: 100; color:#aaaaaa }

      .index-pro-slider .slick-prev::before {
        content: '←　PREV';
      }

      .index-pro-slider .slick-next::before {
        content: 'NEXT　→';
      }

      .index-pro-slider .slick-prev{ left: auto; right: 255px; }
      .index-pro-slider .slick-next{ right: 100px; }

        @media screen and (min-width:1600px) and (max-width:1700px){
          .pro-list-wrap .thumbnail figure{
            min-height: 400px;
          }
        }

        @media screen and (max-width:1025px){
          .index-pro-slider{ padding:0% 4vw 5%; }
          .index-pro-slider .pro-list-wrap{ margin-top: 0; }
        }

        @media screen and (max-width:800px){
          .index-pro-slider{ padding-top:0%; padding-bottom: 20%; }
          .index-pro-slider .slick-prev {
            right: auto;
            left: 0;  
          }
          .index-pro-slider .slick-next {
            right: 0%;
          }

          .section-index-pro .section-title h3{ margin-top: 0; }
        }

    /* Quality */
    .section-index-quality{
      width: 100%;
      height: 0;
      background: url(../images/index-quality-bg.png) no-repeat top;
      background-size: 100%;
      padding-top: 2rem;
      margin-bottom: 5rem;
      padding-bottom: 70%;
      overflow: hidden;
    }

    .qa-list-wrap .thumbnail figure{
      min-height: auto;
    }
    
    .qa-list-wrap .thumbnail figure img{ width: 100%; } 

    .qa-list-wrap .thumbnail .caption{ 
      justify-content: flex-end;
      opacity: 1; visibility: visible; background: transparent;
      background-image: linear-gradient(0deg, rgba(18, 21, 23,.95) 0%, transparent 40%);
      background-image: -webkit-linear-gradient(bottom,rgba(18, 21, 23,.95) 0%, transparent 40%);
      background-image: -moz-linear-gradient(bottom,rgba(18, 21, 23,.95) 0%, transparent 40%);
      background-image: -ms-linear-gradient(to bottom,rgba(18, 21, 23,.95) 0%, transparent 40%);
      background-image: -o-linear-gradient(0deg,rgba(18, 21, 23,.95) 0%, transparent 40%);
    }

    .qa-list-wrap .thumbnail .caption .txt{ font-size: 16px; text-transform: lowercase; text-align: center; }

      @media screen and (max-width:1500px){
        .section-index-quality {
          padding-bottom: 100%;
          background-size: cover;
          margin-bottom: 0;
          background-position: bottom;
        }
      }

      @media screen and (max-width:1025px){
        .section-index-quality{ height: auto; padding-top: 0; padding-bottom: 20%; margin-bottom: 0rem; background-size: cover; }
        .section-index-quality .section-title.outsp100-b{ margin-bottom: 20px !important }
        .section-index-quality .section-title.outsp100-b .h3{ margin-bottom: 1rem; }
        .section-index-quality .pro-list-wrap{ margin-top: 0; }
      }

      @media screen and (max-width:640px){
        .qa-list-wrap .thumbnail .caption .txt{ font-size: 14px; line-height: 1.3; }
      }

    /* NEWS */
      .index-news-slider{
        padding-left: 0;
        padding-right: 0;
      }

      .index-news-slider .slick-prev,
      .index-news-slider .slick-next,
      .index-news-slider .slick-prev:hover,
      .index-news-slider .slick-next:hover,
      .index-news-slider .slick-prev:focus,
      .index-news-slider .slick-next:focus{
        width: 38px;
        height: 58px;
        opacity: 1;
        z-index: 2;
      }

      .index-news-slider .slick-prev{
        background: url(../images/slide-prev.png) !important;
      }

      .index-news-slider .slick-next{
        background: url(../images/slide-next.png) !important;
      }

      .index-news-slider .slick-prev:before,
      .index-news-slider .slick-next:before{ display: none; }

        /* 列表 */
        .news-list-wrap{ padding: 1.25rem 1.5rem 1rem; border:#e2e4e6 2px solid; margin: 10px; }
        .news-list-wrap a { display: block; }
        .news-list-wrap .list{ margin-bottom: 15px; line-height: 1.3; font-size: 18px; }

        .news-list-wrap .item-wrap{ margin-bottom: 1.5rem; }
        .news-list-wrap .tag-item{ background: #0e93c0; font-size: 16px; color:#fff; text-transform: uppercase; padding:5px 10px; height: auto; }
        .news-list-wrap .text-wrap{ font-size: 20px; color:#525151; font-family: Arial; font-weight: 200; }
        .news-list-wrap .txt{ font-size: 16px; color:#898888 }

        .news-list-wrap .time-wrap{ margin-top: 1rem; }
        .news-list-wrap time{ font-family: 'Noto Sans TC'; color:#4f4f4f; }

        .news-list-wrap a:hover .tag-item{
          background: #a34e91;
        }

        .news-list-wrap .img-wrap{
          overflow: hidden;
        }
        
        .news-list-wrap .img-wrap img{
          position:relative;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          width: 100%;
          max-height: 100%;
          max-width: none;
        }

        .news-d-list-wrap{
          padding: 8px;
          margin-bottom: 30px;
        }

        .news-d-list-wrap .text-wrap{
          font-size: 18px;
          background-color: #0e93c0;
          color:#fff;
          padding: 10px 15px;
          line-height: 1.2;
          margin-bottom: 5px;
        }

        .news-d-list-wrap .time-wrap,
        .news-d-list-wrap .txt{ font-size: 16px; }

        .news-d-list-wrap .time-wrap{ margin-top: 8px; margin-bottom: 5px; }

        .news-d-list-wrap .item-wrap{ margin-bottom: 5px; }

        .news-d-list-wrap a .tag-item,
        .news-d-list-wrap a:hover .tag-item{ padding: 5px 25px; border:#0e93c0 1px solid; background-color:#fff; color:#0e93c0 }
        .news-d-list-wrap a:hover .tag-item{ background-color:#0e93c0; color:#fff }

        .news-d-info-wrap{}
      
          @media screen and (min-width:1200px){
            .index-news-slider .slick-prev{
              left: -76px;
            }
        
            .index-news-slider .slick-next{
              right: -76px;
            }
          }

          @media screen and (max-width:1500px){
            .section-index-news .wrapper{ max-width: 1000px; }
          }

          @media screen and (max-width:640px){
            .news-list-wrap{ margin:0 2rem }
            .index-news-slider .slick-prev{ left: -10px; } 
            .index-news-slider .slick-next{ right: -10px; }

            .news_wrap .news-list-wrap{ margin: 0; padding: 1rem; }
            .news_wrap .news-d-info-wrap{ padding-left: 0; padding-right: 0; }
            .news_wrap .news-d-list-wrap{ margin:5px 0 10px 0; }
          }


    /* WIN-WIN */
      .section-index-bottomInfo{
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 33%;
        background: url(../images/index-bottomInfo-img.png) no-repeat center;
        background-size: cover;
        margin-top: 10rem;
      }

      .section-index-bottomInfo .text-wrap{
        position: relative;
        max-width: 945px;
        width: 100%;
        margin:auto;
        background: url(../images/index-bottomInfo-img-radius.png) no-repeat top;
        background-size: contain;
        background-size: auto;
      }
      
      .section-index-bottomInfo .text-wrap .txt{
        font-family: 'ImprintMTShadow';
        font-size: 24px;
        line-height: 1.5;
        color:#fff;
        padding: 5rem 13rem 13rem;
      }
      
      .section-index-bottomInfo .text-wrap .txt .txt-48{ font-size: 1.1em; }

      .section-index-bottomInfo .text-wrap .img-wrap{
        position: absolute;
        left: -20%;
        top: -15%;
        z-index: 100;
      }

        @media screen and (max-width:1700px){
          .section-index-bottomInfo{ margin-top: 5rem; padding-bottom: 35%; }
        }

        @media screen and (max-width:1200px){
          .section-index-bottomInfo {
            padding-bottom: 40%;
          }
        }

        @media screen and (min-width:1000px) and (max-width:1100px){
          .section-index-bottomInfo .text-wrap{
            background-size: contain;
          }
          .section-index-bottomInfo .text-wrap .txt{
            padding: 5rem 13rem 9rem 9rem;
          }
        }

        @media screen and (max-width:1000px){
          .section-index-bottomInfo {
            margin-top: 2rem;
            padding-bottom: 60%;
          }
        }

        @media screen and (max-width:900px){
          
          .section-index-bottomInfo .text-wrap{
            max-width: 100%;
            background-size: contain;
          }

          .section-index-bottomInfo .text-wrap .txt {
            padding: 5rem 10rem 9rem 5rem;
            font-size: 21px;
            line-height: 1.5;
          }
        }

        @media screen and (max-width:640px){
          
          .section-index-bottomInfo .text-wrap{
            background-size: cover;
          }
          .section-index-bottomInfo .text-wrap .txt {
            padding: 2rem 4rem 8rem 2rem;
            font-size: 16px;
          }
        }

        @media screen and (max-width:480px){
          .section-index-bottomInfo .text-wrap .txt {
            padding: 2rem 4rem 4rem 2rem; 
          }
        }

/*== 活動資訊 ==*/
  .event-carousel{ padding: 1em; }
  .event-carousel .thumbnail{ padding: 0px; border-radius: 0; outline: none; border:none; margin: 5px; background: #fff }
  .event-carousel .thumbnail:hover{ outline: none; border:none }
  .event-carousel .thumbnail figure{ position: relative; margin: 0; overflow: hidden; }
  .event-carousel .thumbnail figure img{
    /* position:absolute;
    top:0;
    bottom:0;
    left:0;
    right: 0; */
    margin: auto;
    max-width: 100%;
    max-height: 100%;
  }
  
  .event-carousel .thumbnail .caption{ padding: 1em; text-align: center; background-color: #f8dc7b; }
  .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;
  }

  .text-ovw{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

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

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

    @media screen and (max-width:640px){
      .event-carousel{ padding: 0em; }
      .event-carousel .thumbnail .caption{ padding: .5em 0; }
    }


/*== 清單 ==*/
.menu-item { border-bottom: #cecccc 1px solid; position:relative; z-index: 1; margin-top: -3%;
  background-image: linear-gradient(to right, #fff 92%, transparent 0%);
  background-image: -moz-linear-gradient(0deg, #fff 92%, transparent 0%);/*Firefox 須減掉90deg*/
  background-image: -ms-linear-gradient(to right, #fff 92%, transparent 0%);
  background-image: -o-linear-gradient(0deg, #fff 92%, transparent 0%);
}
.menu-item>ul{ display: flex; align-items: center; flex-wrap: wrap; max-width: 1600px; margin: auto; }
.menu-item>ul>li{ position: relative; text-align: center; }
.menu-item>ul>li.home{ background: #0e93c0; }
.menu-item>ul>li.home i{ color: #fff }

.menu-item>ul>li a { display: block; font-size: 16px; padding-right: 30px; margin-left: 30px; padding-top: 1em; padding-bottom: 1em; line-height: 1; color: #6d5e58; font-weight: 300; }
.menu-item>ul>li a:hover,
.menu-item>ul>li.active a{ color: #6d5e58 }


.menu-item>ul>li.home a{ padding-left: 30px; margin-left: 0; border-left: #ccc 1px solid; }
  @media screen and (min-width:2000px){
    .menu-item{ margin-top: -1%; }
  }
  @media screen and (min-width:1001px){
    .menu-item>ul{ overflow: hidden; }
    .menu-item>ul>li { position: relative; flex: 0 0 auto;}
    .menu-item>ul>li::after{
      content:'';
      display: block;
      width: 1px;
      height: 130%;
      background-color: #d2d2d2;
      position: absolute;
      right: 0;
      top: -10%;
    }

    .menu-item > ul > li.home ~ li a {
      padding-right: 4em;
      position: relative;
      padding-left: 3rem;
      margin-left: 0;
    }
    .menu-item>ul>li.home ~ li.active a::before {
      content: "\f0d7";
      font-family: FontAwesome;
      display: block;
      position: absolute;
      right: 20px;
    }

    .menu-item>ul>li ol{
      display: none;
      width: 100%;
      position: absolute;
      top: 100%;
      background: #fff;
      z-index: 2;
      border-left: #cecccc 1px solid;
      border-bottom: #cecccc 1px solid;
      border-top: none;
      border-radius: 0;
    }
    .menu-item>ul>li ol li{ text-align: left; }
    .menu-item>ul>li ol li a{ margin-left: 0; padding-top: .8em; padding-bottom: .8em; padding-right: 0 !important; border-right: none; }
    .menu-item>ul>li:hover ol{ display: block; }
  }

  @media screen and (max-width:1000px){
    .menu-item{ padding-bottom: 10px; }
    .menu-item>ul>li a{ font-size: 1.2em; }
    
    .menu-item .mobile-pagination{ margin:.2em 10px }
    .menu-item .mobile-pagination li.select{ padding: 0; }
  }

  .sub-menu-item{ margin-bottom: 15px; }
  .sub-menu-item li{
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: #eee 1px solid;
    
  }
  .sub-menu-item li a{ display: block; position: relative; line-height: 30px; font-size: 18px; padding-left: 20px; }  
  .sub-menu-item li a::before{
    content: '';
    display: block;
    width: 6px;
    height: calc(100% - 8px);
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -10px;
    transition: .5s
  }

  .sub-menu-item li a:hover::before,
  .sub-menu-item li.active a::before{
    background-color: #309BE0;
  }

    @media screen and (max-width:1000px){
      .sub-menu-item{ display: flex; border-bottom: #eee 1px solid; }
      .sub-menu-item li{ padding-right: 10px; border-bottom: none; }
    }


/*== 內容區 ==*/
  .normal-content{ display: block; width: 100%; padding: 1em; position: relative; z-index: 2; }

    @media screen and (min-width:1100px) and (max-width:1500px){
      .normal-content{ padding-left: 2rem; padding-right: 2rem; }
    }
    
    @media screen and (max-width:1200px){
      .normal-content { padding:2%; }
    }

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

  .flex-row{ display: flex; padding-top: 1.5%; padding-bottom: 1%; }
  .flex-row .col-content.left{ position: relative; flex-shrink: 0; width: 300px; padding-left: 0; }
  .flex-row .col-content.right{ width: calc(100% - 300px); padding-left: 150px; padding-top: 2rem; }

    @media screen and (min-width:1600px) and (max-width:1700px){
      .flex-row .col-content.right{ padding-left: 50px; }
    }

    
    /* 左側連結 */
      .menu-title h3{
        font-size: 40px;
        color:#0e93c0;
        font-family: 'ink-free-normal';
      }

      .menu-title h3 span{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      .menu-link{ padding-left: 1rem }
      .menu-link .list-inline>li{ display: block; }
      .menu-link .list-inline>li a{ position: relative; display: block; padding: .2rem 0;font-size:20px; color:#656464; font-family: 'Noto Sans TC', Arial; word-break: break-all; }
      .menu-link .list-inline>li a:hover,
      .menu-link .list-inline>li.active a{ color:#000000 }
      .menu-link .list-inline>li.active a::before{
        content:'-';
        display: inline-block;
        margin-right: 8px;
      }

      
      .menu-link .list-inline>li>ol,
      .menu-link .list-inline>li>ol>li>ol{ margin-bottom: .5rem; }
      .menu-link .list-inline>li>ol>li>ol{ margin-top: .5rem; }

      .menu-link .list-inline>li>ol>li,
      .menu-link .list-inline>li>ol>li>ol>li{ margin-bottom: .25rem; }

      .menu-link .list-inline>li>ol>li>a,
      .menu-link .list-inline>li>ol>li>ol>li>a{
        font-size: 16px;
        background-color: #eeeeee;
        padding:.75rem 1.25rem .75rem 1rem;
        line-height: 1.2;
      }
      
      .menu-link .list-inline>li>ol>li>ol>li>a{
        background-color: #fff;
        padding-top: .5rem;
        padding-bottom: .65rem;
        border: #0088B7 1px solid;
        color: #0088B7 !important;
        margin-left: 1rem;
      }

      .menu-link .list-inline>li>ol>li a::before,
      .menu-link .list-inline>li>ol>li>ol>li a::before{ display: none !important; }
      
      .menu-link .list-inline>li>ol>li a:hover,
      .menu-link .list-inline>li>ol>li a:hover:after,
      .menu-link .list-inline>li>ol>li a.active,
      .menu-link .list-inline>li>ol>li a.active:after{ color:#0e93c0 }
      .menu-link .list-inline>li>ol>li a:hover:after,
      .menu-link .list-inline>li>ol>li a.active::after {
        content: "\f0da";
        font-family: FontAwesome;
        display: block;
        position: absolute;
        right: 10px;
        top: 15px;
      }
      
      .menu-link .list-inline>li>ol>li>ol>li>a:hover,
      .menu-link .list-inline>li>ol>li>ol>li>a.active{
        background: #0088B7 ;
        color: #fff !important;
      }
      .menu-link .list-inline>li>ol>li>ol>li>a:after{ display: none !important; }

      .menu-link .list-inline>li>ol,
      .menu-link .list-inline>li>ol>li>ol{ display: none; }
      .menu-link .list-inline>li.active>ol,
      .menu-link .list-inline>li>ol>li>a.active + ol{ display: block; }

        @media screen and (max-width: 1025px){
          .menu-title{ margin-bottom: .5rem }
        }

      /* Mobile */
        .select_wrapper {
          padding: .5rem;
          line-height: 36px;
          border-radius: 3px;
          cursor: pointer;
          position: relative;
        }
        .select_wrapper span{
          background: #f5f5f5 url("https://image.flaticon.com/icons/svg/118/118738.svg") no-repeat top 15px right 12px;
        background-size:15px;
        }
        /* .select_wrapper:hover { background: #fff url("https://image.flaticon.com/icons/svg/118/118738.svg") no-repeat top 15px right 12px; }
         */
        .select_wrapper span {
          display: block;
          margin: 0;
              padding: 5px 10px;
            border-radius: 4px;
        transition:0.4s ease;
            z-index: 9;
            position: relative;
        }
        .select_wrapper.openSelect span {
            display: block;
            margin: 0;
            transform: scale(1.04);
            box-shadow: 0 15px 35px rgba(50, 50, 93, .1), 0 5px 15px rgba(0, 0, 0, .07);
            -webkit-box-shadow: 0 15px 35px rgba(50, 50, 93, .1), 0 5px 15px rgba(0, 0, 0, .07);
            box-shadow: 0 15px 35px rgba(50, 50, 93, .1), 0 5px 15px rgba(0, 0, 0, .07);
        }
        .select_wrapper .select_inner {
          background: #fff;
        
          color: #687278;
          display: none;
          position: static;
          /* left: 0;
          top: 47px; */
          width: 100%;
        
        }
        
        .select_wrapper .select_inner li {
          border-bottom: 1px solid #eee;
          padding: 5px 15px;
          
          transition:0.4s ease;
        }
        .select_wrapper .select_inner li:hover {
        
            background: #142b82;
            color: #fff;
        }
        .select_wrapper .select_inner ul {     border-radius: 5px;
          
            background: #fff; }

    
    /*== 麵包屑 ==*/
      .breadcrumb-wrap{
        position: relative;
        background-color: #eeeeee;
      }

      .breadcrumb-wrap::before{
        content: '';
        display: block;
        width: 100vw;
        height: 100%;
        background-color: #eeeeee;
        position: absolute;
        z-index: -1;
      }

      .breadcrumb{ padding: 2rem 1rem; border-radius: 0; padding-left: 0; }
      .breadcrumb>li>a,
      .breadcrumb>li.active{ font-size: 16px; }
      .breadcrumb>li+li:before{ content: ' / ' }
      
      
    @media screen and (min-width:1026px) and (max-width:1500px){
      .flex-row .col-content.right {
        flex: auto;
        width: calc(100% - 320px);
        margin-right: 0rem;
        padding-left: 50px;
      }
    }

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

    @media screen and (min-width:1030px)and (max-width:1580px){
      .flex-row .col-content.left{  }
      .flex-row .col-content.right { padding-left: 2rem; }
      .main-content{ padding:0 3rem }
    }

    @media screen and (max-width:1025px){
      .flex-row .col-content.left,
      .flex-row .col-content.right{ flex:0 0 100%; max-width: 100%; border-left: none; padding: 0; left:0 }
      
      .flex-row .col-content.right{ padding-bottom: 1rem; }
    }

    /*== 收合 ==*/
      .qa-according-wrap{ margin-top: -1rem; }
      .qa-according-wrap .panel{ box-shadow: none }
      .qa-according-wrap .panel-group .panel + .panel{ }
      .qa-according-wrap .panel-default,
      .qa-according-wrap .panel-default > .panel-heading{ border:none; background: transparent; }

      .qa-according-wrap .panel-default > .panel-heading {
          padding-top: 1rem;
          padding-bottom: 1rem;
          box-shadow: none;
          border-bottom:1px solid #c5c5c7;
      }

      .qa-according-wrap .panel-default > .panel-heading a,
      .qa-according-wrap .panel-default > .panel-heading + .panel-collapse > .panel-body{
        font-size: 18px; font-weight: 100; font-family: 'Open Sans'; line-height: 1.5;
      }

      .qa-according-wrap .panel-default.active > .panel-heading{ background-color: #92cde1; border-color: #92cde1; border-radius: 0; }
      .qa-according-wrap .panel-default.active > .panel-heading .panel-title{ color:#fff; }
      .qa-according-wrap .panel-default.active > .panel-heading .panel-title a{ display: block; }

      .qa-according-wrap .panel-default > .panel-heading .panel-title a{ position: relative; display: block; padding-left: 75px;  }

      .qa-according-wrap .panel-default > .panel-heading .panel-title a::before,
      .qa-according-wrap .panel-default > .panel-heading + .panel-collapse > .panel-body::before{
        content:"";
        display: block;
        width: 35px;
        height: 35px;
        background-image:url(../images/panel-title-text-default.png);
        position: absolute;
        left: 17.5px;
        top: 50%;
        margin-top: -17.5px;
      }

      .qa-according-wrap .panel-default.active > .panel-heading .panel-title a::before{
        background-image:url(../images/panel-title-text-active.png);
      }

      .qa-according-wrap .panel-default > .panel-heading .panel-title a::after{
        content:'';
        display: block;
        width: 18px;
        height: 18px;
        background-image:url(../images/panel-title-icon-default.png);
        position: absolute;
        right: 0;
        top:50%;
        margin-top: -9px;
      }

      .qa-according-wrap .panel-default.active > .panel-heading .panel-title a::after{
        background-image:url(../images/panel-title-icon-active.png);
      }
      
      .qa-according-wrap .panel-default > .panel-heading + .panel-collapse > .panel-body{ position: relative; }
      
      .qa-according-wrap .panel-default > .panel-heading + .panel-collapse > .panel-body::before{
        background-image:url(../images/panel-title-text-body.png);
        top: 45px;
        left: 30px !important;
      }

      .qa-according-wrap .panel-default > .panel-heading .panel-title{ font-weight: 700; font-size: 22px; color: #333232 }
      .qa-according-wrap .panel-default > .panel-heading + .panel-collapse > .panel-body{ background-color: #fff; padding: 1.75rem 1rem 1rem; font-size: 16px; padding-left: 90px; }

        @media screen and (max-width:1100px){
          .qa-according-wrap{ margin-top: 2rem; }
          .qa-according-wrap .panel-default.active:first-child{ margin-top: 1em; }

          .qa-according-wrap .panel-default > .panel-heading .panel-title a{
            padding-left: 45px;
            padding-right: 10px;
          }
          .qa-according-wrap .panel-default > .panel-heading .panel-title a::before{
            left: 0px !important;
          }

          .qa-according-wrap .panel-default > .panel-heading + .panel-collapse > .panel-body {
            padding-left: 60px;
          }
          .qa-according-wrap .panel-default > .panel-heading + .panel-collapse > .panel-body::before{
            left: 10px !important;
          }
        }

    /*== Contact ==*/
      .contact-form{ padding-top: 2em; padding-bottom: 2em; }
      .contact-form .form-control,
      .contact-form .btn{ font-size: 16px; border-radius: 0; }

      .contact-form input.form-control{ height: 46px; }

      .contact-form .btn{ padding:.75rem 3em; }
      .contact-form .btn-default{ background-color: #dcdcdc; color:#6b6868 }
      .contact-form .btn-blue{ color:#fff; background-color: #00a0e9; border-color: #00a0e9; }
      
    /*== About ==*/
    .about-wrap .about-intro-list{
      display: flex;
      margin-bottom: 3rem;
    }
    .about-wrap .about-intro-list .img-wrap{
      flex:none;
      position: relative;
      z-index: 1;
      margin-left: -7rem;
      margin-top: 5rem;
    }
    .about-wrap .about-intro-list .list-wrap{
      flex:1;
      background:#fff;
      box-shadow: 0 0 50px -10px rgba(0,0,0,.2);
      padding: 4rem;
      padding-right: 10rem;
    }
    .about-wrap .about-intro-list .list-wrap .title{
      font-family: 'ink-free-normal';
      font-size: 48px;
      line-height: 1.25;
      margin-bottom: 2rem;
    }

    .bottom-wrap{
      background-color: #e5e5e5;
      padding:4rem 2rem;
      position: relative;
    }

    .infoIcon-list{
      display: flex;
    }

    .infoIcon-list ~ .infoIcon-list{ margin-top: 3rem; }

    .infoIcon-list .img-wrap{
      width: 160px;
      height: 149px;
      margin-top: 1.5rem;
    }

    .infoIcon-list .list-wrap{ flex:1; margin-left: 2rem; }
    .infoIcon-list .list-wrap .title{ color:#373636; font-size: 24px; text-transform: uppercase; }
    .infoIcon-list .list-wrap .list{ color:#656464; font-size: 16px; }

    .style-img-wrap{
      position: absolute;
      right: 10%;
      top: -35%;
      z-index: 1;
    }

      @media screen and (max-width:1500px){
        .about-wrap .about-intro-list .img-wrap {
          flex: 0 0 450px;
        }

        .about-wrap .about-intro-list .list-wrap {
          padding-right: 9rem;
        }

        .style-img-wrap{ z-index: -1; }
      }

      @media screen and (max-width:1025px){
        .style-img-wrap{ display: none; }
        .about-wrap .about-intro-list,
        .infoIcon-list{ flex-direction: column; }
        .about-wrap .about-intro-list .img-wrap{ margin-left: 0; margin-top: 1em; flex:auto }
        .about-wrap .about-intro-list .list-wrap{ padding: 1rem !important; }
        .about-wrap .about-intro-list .list-wrap .title{ font-size: 2rem; margin-bottom: 1rem; }

        .bottom-wrap{ padding: 1rem 0; }
        .infoIcon-list ~ .infoIcon-list{ margin-top: 1rem; }
        .infoIcon-list .img-wrap{ margin: auto; }
        .infoIcon-list .list-wrap{ margin: 0; padding:5px 15px; }
      }
    
    /* == Service == */
    .service_process_wrap{
      position: relative;
    }

    .service_process_wrap .style-img-wrap {
      right: -10%;
      top: -3.5%;
    }
    
    .service_process_title{
      position: relative;
      font-size: 30px;
      color:#040404;
      text-align: center;
      border-bottom: #6c6c6c 1px dotted;
      margin-bottom: 2rem;
      padding-bottom: 1.5rem;
      line-height: 1.25;
    }

    .service_process_title::before,
    .service_process_title::after{
      content:'';
      display: block;
      width: 0;
      height: 0;
      border-bottom: transparent 10px solid;
      border-left: transparent 10px solid;
      border-right: transparent 10px solid;
      position: absolute;
      left: 50%;
      margin-left: -5px;
    }
    
    .service_process_title::before{
      border-top: #040404 10px solid;
      bottom: -21px;
    }
    
    .service_process_title::after{
      border-top: #fff 10px solid;
      bottom: -20px;
    }

    .service_process_title.blue{ color:#269dc5; border-color:#269dc5; background: url(../images/ser_process_tite_blue.png) no-repeat bottom; background-size: cover; }
    .service_process_title.blue::before{
      border-top-color:#269dc5 ;
    }

    .service_process_title.purple{ color:#a36aa9; border-color:#a36aa9; background: url(../images/ser_process_tite_purple.png) no-repeat bottom; background-size: cover; }
    .service_process_title.purple::before{
      border-top-color:#a36aa9 ;
    }
    
    .circle-wrap {
      position: relative;
    }

    .circle {
      background: #2980b9;
    }
    .circle {
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        overflow: hidden;
    }

    .circle-text {
      position: absolute;
      top: 0;
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;
      padding-top: 2rem;
    }
    
    .service_process_content{ margin-top: 3rem; margin-bottom: 3rem; }
    
    .service_process_circle_wrap{ display: flex; justify-content: center; }
    .service_process_circle_wrap li{ width: 20%; }
    .service_process_circle_wrap li + li{ margin-left: -1rem; }
    .service_process_circle_wrap .img-wrap,
    .service_process_circle_wrap .txt-wrap{ text-align: center; }

    .service_process_circle_wrap .txt-wrap{ font-size: 16px; color: #fff; padding: 0 2rem; line-height: 1.4; }

    .service_process_circle_wrap li:nth-child(1) .circle{ background-color:rgba(49, 177, 221,.9) }
    .service_process_circle_wrap li:nth-child(2) .circle{ background-color:rgba(25, 133, 170,.9) }
    .service_process_circle_wrap li:nth-child(3) .circle{ background-color:rgba(14, 98, 192,.9) }
    .service_process_circle_wrap li:nth-child(4) .circle{ background-color:rgba(14, 48, 192,.9) }
    .service_process_circle_wrap li:nth-child(5) .circle{ background-color:rgba(26, 30, 168,.9) }
    
    .service_process_simple .service_process_simple_wrap{
      display: inline-block;
      vertical-align: top;
      width: calc(50% - 11px);
      padding: 0;
    }

    .service_process_simple .service_process_simple_wrap li{ min-height: 225px; }
    
    .service_process_simple_wrap .infoIcon-list .img-wrap {
      width: auto;
      height: auto;
      margin-top: 0;
    }
    
    .service_process_simple_wrap .infoIcon-list .list-wrap{ margin-left: .75rem; }
    .service_process_simple_wrap .infoIcon-list .list-wrap .title{ font-size: 24px; text-transform: lowercase; font-weight: 500; margin-bottom: 1rem; }
    .service_process_simple_wrap li{
      position: relative;
      background-color: #eedfcc;
      padding: 2rem 1.25rem 2rem .5rem;
      margin-bottom: 8px;
    }

    .num-list{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 53px;
      height: 53px;
      text-align: center;
      color: #fff;
      font-size: 18px;
      /* background-color: #f79057; */
      position: relative;
      z-index: 1;
    }

    .num-list:before{
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-top:#f79057 25px solid ;
      border-right:#f79057 25px solid ;
      border-bottom:transparent 25px solid ;
      border-left:transparent 25px solid ;
      position: absolute;
      z-index: -1
    }

    .service_process_simple_wrap .num-list{
      position: absolute;
      right: 0;
      top: 0;
      align-items: flex-start;
      justify-content: flex-end;
    }

    .service_process_simple_wrap .num-list span{
      padding-right: 9px;
      line-height: 1.8;
    }

      @media screen and (max-width:1600px){
        .service_process_wrap{ padding-right: 0; }
      }

      @media screen and (max-width:1400px){
        .service_process_circle_wrap .txt-wrap{ font-size: .8rem; }
      }

      @media screen and (min-width:1025px) and (max-width:1400px){
        .service_process_circle_wrap .img-wrap{ max-width: 70px; }
        .service_process_circle_wrap li + li {
          margin-left: .5rem;
        }
        .service_process_circle_wrap .txt-wrap{ padding: 0; }
      }

      @media screen and (max-width:1025px){
        .service_process_wrap .style-img-wrap{ display: none; }
        .service_process_circle_wrap{ flex-wrap: wrap; padding: 0 !important; margin: 0 !important; }
        .service_process_circle_wrap li {
          width: 50%;
          margin-bottom: 1rem;
        }

        .service_process_simple .service_process_simple_wrap{
          width: 100%;
        }
    
        .service_process_simple .service_process_simple_wrap li{ min-height: 100%; }

        .service_process_simple_wrap .infoIcon-list .list-wrap .title{ text-align: center; }
      }

      @media screen and (max-width:640px){
        .circle-text{ padding-top: 1rem; }
        .service_process_title{ font-size: 22px; margin-bottom: 1rem; padding-bottom: 1rem; }
      }

      @media screen and (max-width:380px){
        .circle-text {
          justify-content: center;
          padding: 0rem .5rem 1.1rem;
        }
        .service_process_circle_wrap .img-wrap{ max-width: 70px; }
        .service_process_circle_wrap .txt-wrap{ padding: 0; }
      }

    /* ==Brand== */
      /* Intro */
        .brand_intro_wrap{
          position: relative;
          padding-top: 20%;
        }
        .brand_intro_wrap::before{
          content: '';
          display: block;
          width: 100%;
          height: 0;
          background: url(../images/brand_intro_img01.png) no-repeat top;
          background-size: cover;
          padding-bottom: 33%;
          position: absolute;
          top:0;
          z-index: -1;
        }

        .brand_intro_wrap .style-img-wrap {
          top: 63%;
          left: -10%;
        }

        .brand_intro_wrap .brand_intro_list{
          display: flex;
          align-items: center;
          justify-content: space-around;
          padding: 0 4rem;
        }

        .brand_intro_wrap .brand_intro_list .txt-wrap{
          background-color: #fff;
          padding:3rem 4rem
        }

        .brand_intro_wrap .brand_intro_list .img-wrap{ flex:none; width: 355px; }

        .brand_intro_wrap .brand_intro_list.first .img-wrap{ order:1; margin-left: 1rem; }
        .brand_intro_wrap .brand_intro_list.second .img-wrap{ margin-left: 4rem; }
        .brand_intro_wrap .brand_intro_list.second .txt-wrap{ padding-left: 2rem; padding-right: 0; }
        
        .brand_equip_content .brand_equip_txt_wrap{ display: flex; flex-wrap: wrap; margin-top: 1rem; padding: 0; }
        .brand_equip_content .brand_equip_txt_wrap li{
          flex:0 0 calc(50% - 1rem);
          max-width: calc(50% - 1rem);
          margin: .5rem;
        }
        .brand_equip_content .brand_equip_txt_wrap .infoIcon-list{
          border:#bfbfbf 1px solid;
          background-color: #fff;
          padding:2rem;
          min-height: 245px;
        }

        .brand_equip_content .brand_equip_txt_wrap .infoIcon-list .list-wrap .title{
          font-size: 18px;
        }
        .brand_equip_content .brand_equip_txt_wrap .infoIcon-list .list-wrap .title span{
          text-decoration: underline;
          padding-bottom: 5px;
        }

        .brand_equip_content .brand_equip_txt_wrap .infoIcon-list .list-wrap{ margin-left: 0; }

      /* Special */
        .brand_special_content{ position: relative; }
        .brand_special_content .style-img-wrap{ top: -4%; right: -10%; }
        .brand_special_wrap{
          padding:8rem 2rem;
        }

        .brand_special_wrap .infoIcon-list{ align-items: center; }
        .brand_special_wrap .infoIcon-list + .infoIcon-list{ padding-top: 2rem; }
        .brand_special_wrap .infoIcon-list .img-wrap{ 
          padding: 0 1rem;
          margin-top: 0;
          text-align: center;
          max-width: 100%;
          height: auto;
          flex: none;
          width: auto;
        }
        .brand_special_wrap .infoIcon-list .list-wrap .title{ font-size: 20px; }
        .brand_special_wrap .infoIcon-list .list-wrap .list{ text-align: justify; }
        
        .brand_special_wrap .infoIcon-list:first-child{ max-width: 90%; margin:auto }
        .brand_special_wrap .infoIcon-list:nth-of-type(odd) .list-wrap .list{ padding-right: 14rem; }
        .brand_special_wrap .infoIcon-list:nth-of-type(even) .list-wrap .list{ padding-left: 15rem; padding-right: 1rem; }
        .brand_special_wrap .infoIcon-list:first-child .list-wrap .list { padding-right: 12rem; }

        .brand_special_wrap .infoIcon-list:nth-of-type(odd) .list-wrap .title{
          color:#0e93c0
        }
        
        .brand_special_wrap .infoIcon-list:nth-of-type(even) .list-wrap{
          order:-1
        }
        
        .brand_special_wrap .infoIcon-list:nth-of-type(even) .list-wrap .title{
          padding-right: 1rem;
        }
        .brand_special_wrap .infoIcon-list:nth-of-type(even) .list-wrap .title{
          text-align: right;
        }

      /* Equip */
      .brand_equip_content{
        padding:1rem 2rem 2rem;
        background-color: #eeeeee;
        margin:4rem 0 0
      }
      
      .equip-section-title{
        position: relative;
        display: inline-block;
        width:100%;
        padding: 0 10px;
        color: #2a2a2a;
        font-weight: bold;
        font-size: 22px;
      }
          
      .equip-section-title span {
        display: inline-block;
        vertical-align: middle;
        padding: 0 1rem;
        background: #eee;
        position: relative;
        z-index: 1;
      }

      .equip-section-title:before, .equip-section-title:after {
        content: '';
        position: absolute;
        top: 50%;
        display: inline-block;
        width: 100%;
        max-width: 436px;
        height: 7px;
        background:url(../images/icon-line-dotted.png) no-repeat;
        background-size: contain;
      }
      .equip-section-title:before {
        left: 0;
      }

      .equip-section-title:after {
        right: 0;
      }

      .brand_equip_info_wrap{
        padding:2rem 0rem
      }

      .brand_equip_info_wrap .title-wrap{
        font-size: 16px;
        color:#0b5084
      }

      .brand_equip_info_wrap .title-wrap{
        margin-bottom: 1rem;
      }
      
      .brand_equip_info_wrap .txt-wrap{
        font-size: 14px;
        line-height: 1.5;
        margin-top: 1rem;
      }


        @media screen and (max-width:1400px){
          .brand_intro_wrap .brand_intro_list{ align-items: flex-start; padding: 0px 2rem; }
          .brand_intro_wrap .brand_intro_list .txt-wrap { padding: 1rem 2rem; }
          .brand_special_wrap{ padding-top: 2rem; padding-bottom: 2rem; }
          .brand_special_wrap .infoIcon-list:nth-of-type(odd) .list-wrap .list {
            padding-right: 4rem;
          }
          .brand_special_wrap .infoIcon-list:nth-of-type(even) .list-wrap .list {
            padding-left: 1rem;
          }
        }

        @media screen and (max-width:1025px){
          .brand_intro_wrap::before{ display: none; }
          .brand_intro_wrap,
          .brand_intro_wrap .brand_intro_list{
            flex-wrap: wrap;
            padding: 0;
          }
          .brand_intro_wrap .brand_intro_list .txt-wrap,
          .brand_special_wrap {
            padding: 2rem 0 0 !important;
          }
          .brand_intro_wrap .brand_intro_list.first .img-wrap,
          .brand_intro_wrap .brand_intro_list.second .img-wrap,
          .brand_special_wrap .infoIcon-list .list-wrap{
            margin: 0;
            order: 0 !important;
          }
          .brand_intro_wrap .brand_intro_list.second .img-wrap{
            margin-top: 1rem;
          }
        
          .brand_special_wrap .infoIcon-list .list-wrap .title,
          .brand_special_wrap .infoIcon-list .list-wrap .list{
            padding-left: 0 !important;
            padding-right: 0 !important;
            text-align: left !important;
            line-height: 1.8;
          }
          .brand_special_wrap .infoIcon-list:first-child{ max-width:100% }
          .brand_special_wrap .infoIcon-list .img-wrap{ margin-bottom: 1rem; }

          .brand_equip_content { padding-left: 1rem; padding-right: 1rem; }
          .brand_equip_content .brand_equip_txt_wrap li {
            flex: auto;
            max-width: 100%;
          }
          .brand_equip_content .brand_equip_txt_wrap .infoIcon-list{
            padding:1rem;
            min-height: auto;
          }
          .brand_equip_info_wrap .title-wrap br{ display: none; }
        }

    /* Product */
      /* list */
        .pro_list_wrap{ padding:2rem 0 }
        .pro_list_wrap .event-carousel .thumbnail .img_wrap{
          width:100%;
          min-height: 400px;
          height: 100%;
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
        }
        .pro_list_wrap .event-carousel .thumbnail .caption{ padding-right: 2rem; background-color: transparent; position: relative; right: 10% }
        .pro_list_wrap .event-carousel .thumbnail .caption div{ display: flex; justify-content: space-between; color:#999 }
        .pro_list_wrap .event-carousel .thumbnail:hover .caption div{ color:#000 }
        .pro_list_wrap .event-carousel .thumbnail:hover .caption div i{ color:#0e93c0 }

        .pro_list_wrap .row .col-sm-4{
          float: none;
          display: inline-block;
          vertical-align: top;
          width: calc(33% - 4px);
        }

        .pro_intro_wrap .style-img-wrap{ top: 2%; right: 0;}

        .pro_intro_wrap .big-item,
        .pro_intro_wrap .small-item{
          line-height: 1.5;
          margin-bottom: 0.5rem;
        }

        .pro_intro_wrap .big-item{ font-size: 24px; }
        .pro_intro_wrap .small-item{ font-size: 18px; }

          @media screen and (max-width:1400px){
            .pro_list_wrap .event-carousel .thumbnail .img_wrap{ min-height: 300px; }
          }

          @media screen and (max-width:1025px){
            .pro_intro_wrap .txt{
              padding:1rem
            }
            .pro_list_wrap .event-carousel .thumbnail .img_wrap{ min-height: 250px; }
            .pro_list_wrap .event-carousel .thumbnail .caption{ position: static; padding-right: 0; }

            .pro_list_wrap .row .col-xs-6 {
              width: calc(50% - 4px);
            }
          }

          @media screen and (max-width:640px){
            .pro_list_wrap .event-carousel{ margin:0 -10px }
            .pro_list_wrap .event-carousel .thumbnail .img_wrap {
              min-height: 180px;
            }
          }

      /*== Detail ==*/
        .pro-d-wrap { position: relative; display: flex; margin-bottom: 3rem; }
        .pro-d-wrap .pro_carousel_wrap{ max-width: 760px; flex: 0 0 760px; }
        .pro-d-wrap .pro_info_wrap{ flex: 0 0 calc(100% - 760px); max-width: calc(100% - 760px); margin-left: 2rem; }

        .pro-d-wrap .style-img-wrap {
          top: auto;
          bottom: -25%;
          right: 0;
        }
        
        /* 照片 */
          .pro_carousel_wrap .swiper-container {
            width: 100%;
            margin-left: auto;
            margin-right: auto;
          }
          
          .pro_carousel_wrap .swiper-slide {
            background-size: cover;
            background-position: center;
          }

          .pro_carousel_wrap .gallery-top {
            height: 760px;
            width: 100%;
            /* padding-left: 2rem; */
          }

          .pro_carousel_wrap .gallery-thumbs .swiper-wrapper .swiper-slide{
            -webkit-clip-path: polygon(9% 0, 100% 0, 90% 100%, 0% 100%);
            clip-path: polygon(9% 0, 100% 0, 90% 100%, 0% 100%);
          }

          .pro_carousel_wrap .gallery-top .swiper-wrapper .swiper-slide > div{
            position: relative;
            width: 100%;
            height: 100%;
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
          }

          .pro_carousel_wrap .gallery-top .swiper-wrapper .swiper-slide video,
          .pro_carousel_wrap .gallery-top .swiper-wrapper .swiper-slide iframe {
            position:fixed;
            top:50%;left:50%;min-width:100%;
            min-height:100%;
            width:auto;
            height:auto;
            z-index:-100;
            -webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);
            z-index: 3;
          }

          .pro_carousel_wrap .gallery-thumbs {
            height: 130px;
            box-sizing: border-box;
            padding: 20px 0 0 5px;
          }
          .pro_carousel_wrap .gallery-thumbs .swiper-slide {
            width: 25%;
            height: 100%;
            opacity: 0.4;
          }
          .pro_carousel_wrap .gallery-thumbs .swiper-slide-thumb-active {
            opacity: 1;
          }
    
        /* Info */
          .pro_info_wrap .title-wrap{
            padding-bottom: 1rem;
            border-bottom: #666565 2px solid;
            margin-bottom: .5rem;
          }

          .pro_info_wrap .title-wrap .title-txt{
            font-family: Arial;
            font-size: 18px;
            color:#232323;
            line-height: 1.5;
          }

          .pro_info_wrap .list-wrap{
            border-bottom: 1px solid #e5e5e5;
            padding: .5rem 0 1rem;
            font-size: 14px;
          }
          
          .pro_info_wrap .list-wrap .big-txt{ line-height: 1.5; }
          .pro_info_wrap .list-wrap .small-txt{ font-size: 14px; color:#5a5959; margin-bottom: 5px; }

          .pro_info_wrap ul{
            margin: 0 !important;
            padding: 0 !important;
          }

          .pick-list ul li{
            min-width: 30px;
            height: 30px;
            line-height: 28px;
            font-size: 14px;
            display: inline-block;
            margin-right: 5px;
            text-align: center;
            border:#d1d1d0 1px solid
          }
          .pick-list ul li a{
            display: block;
            width: 100%;
            height: 100%;
          }

          .pick-list.size ul li a{
            background:#eeeeee
          }

            @media screen and (max-width:1700px){
              .pro-d-wrap .pro_info_wrap{ padding-right: 1rem; }
            }

            @media screen and (max-width:1400px){
              .pro-d-wrap .pro_carousel_wrap{ max-width: 450px; flex: 0 0 450px; }
              .pro-d-wrap .pro_info_wrap{ flex: 0 0 calc(100% - 450px); max-width: calc(100% - 450px); }
              
              .pro_carousel_wrap .gallery-top{ height: 465px; }
              .pro_carousel_wrap .gallery-thumbs{ height: 100px; }

              .pro-d-wrap .style-img-wrap{ display: none; }
            }

            @media screen and (max-width:1025px){
              .pro-d-wrap{ flex-wrap: wrap; margin-bottom: .5rem; }
              .pro-d-wrap .pro_carousel_wrap,
              .pro-d-wrap .pro_info_wrap{ flex:0 0 100%; max-width: 100%; margin: 0; padding: 0; }
              
              .pro_carousel_wrap .gallery-thumbs{ height: 100px; }
              .pro-d-wrap .pro_info_wrap{ margin-top: 1rem; }

              .pro_carousel_wrap .gallery-top .swiper-wrapper .swiper-slide video,
              .pro_carousel_wrap .gallery-top .swiper-wrapper .swiper-slide iframe {
                position: relative;;
              }
            }

            @media screen and (max-width:640px){
              .pro_carousel_wrap .gallery-top{ height: 325px; }
            }

/* 斜體 */
  .skew_fill{
    transform: skewX(-8deg);
    border:#d2d2d2 1px solid;
    background: #F1F0F6;
}

  .skew_fill > div.img_wrap{
    width: 125% !important;
    position: relative;
    left: -11%;
    transform: skewX(8deg);
  }

  .skew_fill_hover {
    opacity: 0;
    visibility: hidden;
    width: 85%;
    height: 85%;
    border: #4797b2 2px solid;
    position: absolute;
    top: 12%;
    left: 0%;
    transform: skewX(-8deg);
    transition: .25s;
    -webkit-transition: .25s;
    -moz-transition: .25s;
    -ms-transition: .25s;
    -o-transition: .25s;
  }

    @media screen and (max-width:640px){
      .skew_fill, .skew_fill > div.img_wrap{ transform: skewX(0deg); }
      .skew_fill_hover{ display: none; }
    }

.pro_list_wrap .event-carousel .thumbnail:hover .skew_fill_hover{ opacity: 1; visibility: visible; }

/*== 標題 ==*/
  .page-header{ margin-top: 0; margin-bottom: 0; border-bottom-color: #885636; line-height: 1; }
  .page-header h2{ font-size:24px; font-weight: 400; text-transform: uppercase; color:#885636; margin-bottom: 0; }

  .section-title{
    position: relative;
    margin-top: 10px;
    margin-bottom: 20px;
  }
  
  .section-title h3{ font-size: 48px; color: #0e93c0; padding-bottom: 5px; margin-bottom: 0; font-family: 'BASKVILL'; text-transform: uppercase; letter-spacing: 2px; }
  .section-title small{ font-size: 100%; font-family: 'Roboto' }

  .main-section-title{ margin-bottom: 3rem; }
  .main-section-title .title{ font-size: 24px; }
  .main-section-title .title span{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .main-section-title .title span img{ margin-top: 1rem; }

    @media screen and (max-width:1025px){
      .page-header h2{ font-size: 1.8em; }
      .section-title{ margin-top: 0; margin-bottom: 10px; padding:0 10px 15px; text-align: left; }
      .section-title small { display: block; line-height: 1.5; }
      .main-section-title{ margin-bottom: .5rem; }
      .main-section-title .title{ font-size: 1.2rem; text-align: center;  }
    }

    @media screen and (max-width:640px){
      .section-title span::after { left: 0; }
    }

/* Table */
.customer-table{
  border:#dcdcdc 1px solid;
  padding: 4px;
}

.customer-list > div{ padding:10px 15px; font-size: 16px; color: #646362; font-weight: 400; line-height: 1.5; }
.customer-list .title{ width: 110px; background-color: #eeeeee; text-align: center; }

.customer-table .middle-line{ margin: 4px 0; padding: 4px 0; }

  @media screen and (max-width:640px){
    .customer-table ul.flex-row{ flex-direction: column; }
    .customer-table ul.flex-row li{ border-bottom:2px #fff solid }
    .customer-table ul.flex-row {
      flex-direction: column;
      border: none;
      margin: 0;
      padding: 0;
    }
    .customer-list .title{ width:80px; }
  }

  /* 下載按鈕 */
  .btn-dwo-style{
    background-color: #fff;
    border-color:#525152;
    font-size: 18px !important;
  }

  .btn-dwo-style span{
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 20px;
    margin: -3px 0 0 6px;
    background: url(../images/icon-download.png) no-repeat center;
  }

  .btn-dwo-style:hover{
    background-color: #fff;
    color:#3e59bc;
    border-color: #3e59bc !important;
  }

  .btn-dwo-style:hover span{
    background-image: url(../images/icon-download-02.png)
  }

  @media screen and (max-width:1025px){
    .news-info-wrap .list-wrap,
    .news-detail-info-wrap .list-wrap ul li{ padding-top: 0; }
    .download-wrap .text { width: 100px; }
  }

  /* 圖片列表 */
    .img-list-wrap li{ padding: 0 15px; }

    @media screen and (max-width:1025px){
      /* 小標 */
      .record-title-wrap span {
        font-size: 18px;
        min-width: auto;
        display: inline-block;
        width: 100%;
        white-space: normal;
      }
    }

  /* 列表樣式 */
    .list-info-wrap{ padding-left: 0 !important; margin:10px 0 !important; }
    .list-info-wrap li{ border-bottom:#a0a0a0 1px dotted; line-height:1.5; padding: 10px; font-size: 16px; }
    .list-info-wrap .num-style{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      line-height: 30px;
      color: #fff;
      background-color: #88ABDA;
      border-radius: 50%;
      text-align: center;
    }
    
    @media screen and (max-width:1025px){
      .list-info-wrap li{ flex:0 0 100%; max-width: 100%; }
    }

    @media screen and (max-width:640px){
      /* .img-list-wrap{ flex-direction: column !important; } */
      .img-list-wrap li,
      .list-info-wrap li{ flex:0 0 100%; max-width: 100%; margin-bottom: 10px; }
      .img-list-wrap li{ flex:auto; max-width: 50%; }
    }


  /* Reponsive Table */
  .rwd-table {
    margin: 1em 0;
    min-width: 100%;
  }

  .rwd-table th {
    display: none;
  }
  .rwd-table td {
    display: block;
  }
  .rwd-table td:first-child {
    padding-top: .5em;
  }
  .rwd-table td:last-child {
    padding-bottom: .5em;
  }
  .rwd-table td:before {
    content: attr(data-th);
    font-weight: bold;
    width: 6.5em;
    display: inline-block;
    margin-right: 1rem;
  }

  @media (min-width: 1025px) {
    .rwd-table tr th,
    .rwd-table tr td {
      border-right: 1px solid #d2d2d2;
    }

    
    .rwd-table tr td{
      border-bottom: 1px solid #d2d2d2;
    }

    .rwd-table tr th:last-child,
    .rwd-table tr td:last-child{ border-right-color: transparent; }
    .rwd-table tr:last-child td{ border-bottom-color: transparent; }
  }

  @media (min-width: 480px) {
    .rwd-table td:before {
      display: none;
    }
  }
  .rwd-table th, .rwd-table td {
    text-align: left;
  }
  @media (min-width: 480px) {
    .rwd-table th, .rwd-table td {
      display: table-cell;
      padding: .25em .5em;
    }
    .rwd-table th:first-child, .rwd-table td:first-child {
      padding-left: 0;
    }
    .rwd-table th:last-child, .rwd-table td:last-child {
      padding-right: 0;
    }
  }
  
  .rwd-table {
    background: #fff;
    color: #1c2b64;
    overflow: hidden;
  }

  @media (min-width: 1025px) {
    .rwd-table tr,
    .rwd-table td {
      text-align: center;
    }
    
    .rwd-table th, .rwd-table td {
      margin: .5em 1em;
    }
  }

  @media screen and (max-width:640px){
    .rwd-table td{ padding: 1rem 1rem 0; }
  }

  @media (min-width: 480px) {
    .rwd-table th, .rwd-table td {
      padding: .5em !important;
      line-height: 1.5;
    }
  }

  .rwd-table th, .rwd-table td:before {
    color: #fff;
    font-weight: 400;
    text-align: center;
  }

  .rwd-table.country th, .rwd-table.country td:before{
    background-color: #8396c0;
  }

  .rwd-table.country tr {
    color: #1c2b64;
  }

  .rwd-table.city th, .rwd-table.city td:before{
    background-color: #83b1c0;
  }

  .rwd-table.city tr{
    color: #83b1c0;
  }

  @media screen and (max-width:1025px){
    .rwd-table td:empty{
      display: none;
    }
    .rwd-table td{ color:#000 }
  }
  

/*== 回上頁 ==*/
  .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: 18px; line-height: 1.5; font-weight: 200; font-family: Arial; color: #333; margin: 0 .25em; padding:5px 12px; border-radius: 0 !important; background-color: transparent; }

  .pagination>li>a:hover,
  .pagination>.active>a,
  .pagination>.active>a:hover,
  .pagination>.active>a:focus{ background-color: transparent; color:#0e93c0; }

  .pagination>li>a.prev,
  .pagination>li>a.next,
  .pagination>li>a.prev:hover,
  .pagination>li>a.next:hover{ padding-top: 7px; padding-bottom: 4px; }
  
  .pagination>li>a::after{
    content:'/';
    display: block;
    position: absolute;
    right: -5px;
    top: 5px;
  }
  .pagination > li:first-child > a::after,
  .pagination > li:last-child > a::after{ display: none; }

  .pagination > li:first-child > a,
  .pagination > li:last-child > a{
    padding: 0rem 1.25rem;
    margin-top: .25rem;
    border-radius: 20px !important;
    background: #d2d2d2;
    color: #fff;
  }
  
  .pagination > li:first-child > a:hover,
  .pagination > li:last-child > a:hover,
  .pagination > li:first-child > a:focus,
  .pagination > li:last-child > a:focus{
    background: #0e93c0;
  }
  
  .pagination > li:last-child > a{ margin-left: 1.5rem; }

  .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; }

    @media screen and (max-width:1025px){
      .pagination>li>a{ margin:0 2px }
      .pagination>li>a.prev,
      .pagination>li>a.next,
      .pagination>li>a.prev:hover,
      .pagination>li>a.next:hover{ border:none !important; background-color: transparent !important; }
    }

  /*== 搜尋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: auto;
      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;
    }

    .selectBox>i {
      color: #7b7979;
      font-size: 1.2rem;
      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) no-repeat;
    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{ font-size:12px; }

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

  .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:1025px){
    img{ float:none !important; }
    table{ width: 100% !important; table-layout: fixed; }
  }

.txt-uppercase{
  text-transform: uppercase;
}

.btn-backTo {
  display: flex;
  width: 130px;
  height: 45px;
  border: #aaaaaa 1px solid;
  align-items: center;
  justify-content: space-around;
  margin:auto;
  padding:0 1rem
}

.btn-backTo::before {
  content: '←';
  font-size: 18px;
  font-family: Arial;
  font-weight: 100;
  color: #aaaaaa;
}

.btn-blue,
.btn-blue:hover {
    background: #348ca9;
    border-color: #348ca9;
}

.btn-orange,
.btn-orange:hover {
    background: #d58e61;
    border-color: #d58e61;
}

.btn-back,
.btn-back:hover {
    border-color: #000;
    border-width: 2px;
}

.btn-backOn,
.btn-backOn:hover{
  background-color: #434343;
  border-color: #434343;
  color:#fff
}

.contact-btn{
  margin-bottom: 0;
  font-weight: 200;
  text-align: center;
  padding: 8px 4em;
  font-size: 18px;
  line-height: 1.42857143;
  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){
  .header_link{ padding-right: 0em !important; }
}

@media screen and (min-width: 1001px){
  /*== Header ==*/
  .navbar .wrapper .row{ display: flex; flex-wrap: wrap; align-items: flex-end; }
  
  .navbar-brand { height: auto; padding-right: 1em; margin-left:0 !important; }

  .header_link { display: flex; align-items: center; justify-content: flex-end; width: 100%; padding-bottom: 0px; position: relative; z-index: 2; }
  .header_link > li{ position: relative; float: none; display: inline-block; padding:4em 1.5rem 1.5em; }
  .header_link > li > a{ display: block; padding: .8em 0 0; }
}


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

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

}

@media screen and (min-width: 1001px) and (max-width: 1300px){
  .header_link{padding-right: 0em; justify-content: space-between; }
  .header_link > li{ padding:2em .25rem; }
}

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

  .navbar { position: static; }

  .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: auto;
    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,
  .menu-icon-plus-third{ background-color:#fff !important; padding:5px 10px; margin-top: 5px; padding: 5px 8px !important }
  
  .menu-icon-plus i,
  .menu-icon-plus-third i{ color: #737070; }

  .menu-icon-plus + .header-dropdown-menu,
  .menu-icon-plus-third + .sub-header-dropdown-menu-third { 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,
  .header-dropdown-menu > li .menu-icon-plus-third{ 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; }

  .header-dropdown-menu a{ right: -12px; top: -5px; }
  .sub-header-dropdown-menu,
  .sub-header-dropdown-menu-third{ display: none !important; }
  .sub-header-dropdown-menu.active,
  .sub-header-dropdown-menu-third.active{ display: block !important; }
  .sub-header-dropdown-menu li a{ color: #716a6a !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%; }
  .menu-icon-plus,
  .menu-icon-plus-third{ position: absolute !important; top:6px; right: 0; padding:5px 10px; margin-top: 5px; padding: 5px 8px !important }
  .menu-icon-plus + .header-dropdown-menu,
  .menu-icon-plus-third + .sub-header-dropdown-menu-third{ background: #ccc; border-radius: 0 }

}

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

  .navbar-brand{
    width: 30vw;
  }

  .navbar-toggle { right: -.5em; }

  .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;
  }

}

/* About Timeline - Milestones */

.timeline {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  margin-left: 10rem
}


.date {
  text-align: right;
  width: 350px;
  display: block;
  font-size: 35px;
  vertical-align: middle;
  line-height: 20px;
  font-weight: 100;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  left: 12.5px;
  font-family: 'Roboto', monospace;

  display: flex;
  align-items: center;
}

.date::before{
  content: '';
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 100%;
}

.date::after{
  content: '';
  display: block;
  width: 200px;
  height: 1px;
  position: relative;
  left: 5%
}

.date .time{
  order:-1;
  margin-right: 1rem
}

.job {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
}

.job::before{
  content: '';
  display: block;
  width: 25px;
  height: 100%;
  position: absolute;
  top: 0;
  left: calc(50% - 95px);
}

.job::after {
  content: '';
  display: block;
  height: 10px;
  width: 10px;
  border-radius: 100%;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
  left: calc(50% - 88px);
}

.job_description {
  position: relative;
  float: left;
  display: block;
  width: 50%;
  padding-top: 60px;
  padding-bottom: 60px
}

.job_description .content{
  font-size: 14px;
  line-height: 1.5;
}

.orange .date { color: #EB880E; }
.orange.job::before,
.orange .date::after,
.orange .date::before{ background: #EB880E }
.orange .job_description{
  margin-left: auto;
  margin-right: 0;
  padding-left: 0%
}

.orange .job_description .content{ color:#EB880E; }

.blue.job::before,
.blue .date::after,
.blue .date::before{ background-color: #0E93C0;  }
.blue .job_description .content{ color:#0E93C0;  }

.blue .date { color: #0E93C0; position: relative; left: calc(-50% + 175px) }

.blue .date::after{
  order: -1
}

.blue .date .time{
  order: 0;
  margin-left: 1rem;
  margin-right: 0;
}

.blue .job_description{
  order: -1;
  margin-right: auto;
  margin-left: -15%;
  padding-right: 70px;
  text-align: right
}

@media screen and (max-width: 1500px){
  .timeline { margin-left: 5rem }
}

@media screen and (min-width: 1025px) and (max-width: 1300px){
  .orange .job_description .content{ padding-left: 10% }
  .blue .date {
    left: calc(-50% + 190px);
  }
}

@media screen and (max-width: 1025px) {
  .timeline {
    width: 100%;
    margin-left: 0
  }

  .job {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 40px
  }

  .job::before, .date::after {
    left: 0
  }

  .job::after{
    left: 7px
  }

  .date{
    margin-top: 1rem
  }
  
  .date::before {
    display: none;
  }

  .orange .job_description,
  .blue .job_description {
    margin-left: 0;
    margin-right: auto;
    width: 100%;
    text-align: left;
    padding: 15px 0 30px
  }

  .blue .date{
    left: 0
  }

  .blue .date .time{
    margin-left: 0;
    margin-right: 1rem
  }

  .blue .job_description, .blue .date::after {
    order:0;
  }

}