@charset "utf-8";

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

body{
  font-size: 16px;
  line-height: 1.5
}


/*========================================== Wrapper ==================================================*/
.wrapper,
.wrapper-1700,
.wrapper-1550,
.wrapper-1500,
.wrapper-1450,
.wrapper-1400,
.wrapper-1350,
.wrapper-1300,
.wrapper-1200,
.wrapper-1100,
.wrapper-1000{
  width: 100%;
  max-width: 1600px;
  margin: 0 auto
}

.wrapper-1700{ max-width: 1700px }
.wrapper-1550{ max-width: 1550px }
.wrapper-1500{ max-width: 1500px }
.wrapper-1450{ max-width: 1450px }
.wrapper-1400{ max-width: 1400px }
.wrapper-1350{ max-width: 1350px }
.wrapper-1300{ max-width: 1300px }
.wrapper-1200{ max-width: 1200px }
.wrapper-1100{ max-width: 1100px }
.wrapper-1000{ max-width: 1000px }

.main{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  min-height: 100%;
}

.main header{ width: 100%; }
.main footer{ position: relative; margin-top: auto; }

.main main > .wrapper{ max-width: 1640px }


  @media screen and (min-width:1101px){
    .index-main header{ position: absolute; z-index: 2; }
  }

  @media screen and (min-width:1200px) and (max-width:1500px){
    .main .mobile-menu-flex .header_link{ margin-right: 1rem; }
    .main .mobile-menu-flex .header_link > li{ padding: 0rem 0.5rem 0rem }
  }

  @media screen and (max-width:1100px){
    .main footer{ margin-top: 0; }
  }

/*== 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: transparent;
  }

  .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:#7bcad3 }
  .navbar-inverse .navbar-toggle .icon-bar { background-color: #7bcad3 }

  .navbar{ background: transparent; border-radius: 0; margin-bottom: 0 }
  .navbar .wrapper{ max-width: 1670px }

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

  .navbar-brand { padding-top: 0; padding: 0; display: flex; align-items: center; margin-left: 0; }
  .navbar-brand img { display: inline-block; }
  .navbar-brand-info{ display: inline-flex; align-items: center; }
  .navbar-brand-info{ margin-right: 15px; }
  .navbar-brand-info figure{ margin-right: 10px; }
  .navbar-brand-info .list{ text-align: right; line-height: 1.3; }
  .navbar-brand-info .list p{ color: #624080; font-size: 1.2em; }
  .navbar-brand-info .list small{ color: #777 }

  .header_link > li > a{ display: block; text-align: center; color: #5b5a5a !important; font-weight: 500; }
  .header_link > li > a:hover,
  .header_link > li > a.active{ color: #13085e !important; }

  .nav_link > li > a::before { display: none; }

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

  .dropdown-menu-btn{ position: absolute !important; top: 9px; right: 0px; transition: .5s; width: 40px; height: 40px; text-align: center !important; z-index: 3; }
  .open .dropdown-menu-btn{ transform: rotate(180deg); top: 3px; }

  .mobile-menu-flex,
  .nav_link_right{ display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
  
  .nav_link_right{ margin-left: 1em; }
  .nav_link_right > li{ padding-top: .5em !important; }
  .nav_link_right > li > a{ position: relative; padding-bottom: 0; }
  .nav_link_right > li > a > p{ font-size: 16px !important; font-weight: 400; font-family: Arial; }
  .nav_link_right > li > a img{ display: inline-block; vertical-align: middle; margin-top: -6px; }
  .nav_link_right > li > .dropdown-menu{ top: 100% }
  .nav_link_right > li > .dropdown-menu > li > a{ line-height: 1 !important; }

  .header_lang{
    font-size: 14px;
    color:#fff;
  }

  .header_lang.eng{ background-color: #13085e; color: rgba(255,255,255,.5) }
  .header_lang.cht{ background-color:#d0a94e  }

  .nav_link_right > li > a:hover .header_lang{ background-color: #a3428d }

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

      /*== Header==*/
      .navbar .row,
      .navbar .row .col-lg-3,
      .navbar .row .col-sm-3{ display: flex; flex-wrap: wrap; align-items: center; }
      .navbar .row .col-lg-9{ margin-bottom: -1rem; }
      
      .navbar-brand { height: auto; }

      .header_link > li{ position: relative; float: none; display: inline-block; padding:0rem 3rem 0rem; }
      .header_link > li:first-child{ padding-left: 0; }
      .header_link > li > a,
      .nav_link_right > li > a{ position: relative; display: block; font-weight: 400; }
  
      .navbar-brand-info{ order:-1; }

      .header_link > li > a > span{ position: relative; display: inline-block; margin-left: 1em; transition:.5s }

      .header_link > li > a > p{ font-size: 16px; }
      .header_link > li > a > p > i{ font-size: 12px; font-weight: unset; transform: scale(0.8); }

      .header_link > li:hover > a > p,
      .header_link > li > a:hover > p,
      .header_link > li > a.active > p{ color: #13085e }
      
      .header_link > li:hover > a::before,
      .header_link > li > a.active::before,
      .header_link > li > a:hover::before{
        content: '';
        display: block;
        width: 22px;
        height: 14px;
        background:url(../images/link_active_icon.png);
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -30px;
        margin-left: -11px;
      }

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

      .dropdown-menu-link {
        opacity: 0;
        visibility: hidden;
        padding:5px;
        border-radius: 0 !important;
        left: 50%;
        top: 100%;
        transform: translateX(-50%);
        z-index: 5;
        background-color: #d0a94e;
        margin-top: -10px !important;
        border:none;
      }
      .dropdown-menu-link li{ position: relative; border-bottom: #F1F3DC 1px solid; }
      .dropdown-menu-link > li > a,
      .dropdown-menu-link > li > a:hover,
      .dropdown-menu-link > li > a:focus{
        color: #5f5d5d !important;
        font-size: 15px !important;
        background: transparent !important;
        padding: 8px 30px 8px 10px !important;
        line-height: 2 !important
      }

      .dropdown-menu-link > li > a:hover,
      .dropdown-menu-link > li > a.active{ color: #fff !important; background: #13085e !important; }
      .dropdown-menu-link > li > a:hover::after,
      .dropdown-menu-link > li > a.active::after{
        content: '';
        display: block;
        width: 10px;
        height: 2px;
        background: #fff;
        position: absolute;
        right: 10px;
        top: 50%;
        margin-top: -1px;
      }

      .nav_link_right > li + li{ margin-left: -.75rem }

      .mobile-menu-flex{ justify-content: space-between; }
      .mobile-menu-flex .navbar-nav{ flex: 1; display: inline-flex; align-items: center; float: none; justify-content: space-between; }
      .mobile-menu-flex .navbar-nav > li{ position: relative; flex:auto; padding: 0 }
      .mobile-menu-flex .navbar-nav > li::after {
        content: '';
        display: block;
        width: 1px;
        height: 15px;
        background-color: #c9c3b7;
        position: absolute;
        right: 0;
        top: 50%;
        transform: rotate(15deg);
        margin-top: -7.5px;
      }

      .mobile-menu-flex .navbar-nav > li:last-child::after{ display: none; }

      .header_lang{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        border-radius: 50%
      }

      .header_lang::after{
        content: '';
        display: none;
        width: 0;
        height: 0;
        border-top: 5px #a3428d solid;
        border-bottom: 5px transparent solid;
        border-left: 5px transparent solid;
        border-right: 5px transparent solid;

        position: absolute;
        bottom: -15px;
        left: 50%;
        margin-left: -2.5px;
      }

      .nav_link_right{ margin-top: -1em; }
      .nav_link_right > li > a:hover .header_lang::after,
      .nav_link_right > li > a.active .header_lang::after{ display: block; }

    }

    @media screen and (min-width: 1101px) and (max-width: 1400px){
      .mobile-menu-flex { padding-top:2rem; }
      .header_link > li{ padding: 0rem 2rem 0rem; }
    }

    @media screen and (min-width: 1101px) and (max-width: 1200px){
      .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:1100px){

      .navbar-brand-info{ flex:none; margin-left: .5em; }
      .navbar-brand-info .list{ font-size: 15px; }
      .navbar-brand-info figure img{ width: 45px; }
      .dropdown-menu-link{ width: 90vw; min-width: 100% }
      .dropdown-menu-link li{ position: relative; }
      .dropdown-menu-link li::before{ content: '〉'; position: absolute; top:5px }
      .dropdown-menu-link li a{ font-size: 16px; padding: 10px 5px 10px 20px !important; color: #74489A !important; white-space: normal; }

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

      .navbar-brand{ width: 80%; height: auto; }

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

      .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: none; padding: 0; width: 40px; height: 40px; line-height: 40px; text-align: center; padding-left: .55em; }

      .top-menu{ width: 100%; }

      .nav_link_right{ width: 100%; justify-content: center; margin-left: 0; }
      .nav_link_right > li{ flex:1; padding-bottom: 1em !important; }
      .nav_link_right > li a .header_lang{ padding: .5em 1em }
    }

    @media screen and (max-width:400px){
      .mobile-menu-flex .header_link > li > a{ font-size: 16px; }
    }

/*== Footer ==*/
  footer .wrapper, .footer-bottom, .footer-sub-link{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .footer-bottom{ display: block; padding: 1rem 0 }

  footer{
    padding:2rem;
    border-top: #e3e3e5 1px solid;
    overflow: hidden;
  }
  footer h5{ font-size: 18px; }
  footer .footer-wrap{ font-size: 16px; }
  footer .footer-logo{ width: 115px; flex: none; margin: 0 2rem }
  footer .footer-sub-link{ flex: none }
  footer .list-inline li{ padding-right: 1rem; }

  footer .mobile-menu-flex{ max-width:100% !important; border-bottom: none; padding: 0; }

  .footer-wrap{ width: 100% }
  .footer-top{ border-bottom: #595a5d 1px solid; padding-bottom: .5rem; }
  .footer-top .navbar .header_link > li > a{ padding-bottom: 0; }

  .footer-info-wrap ul li{ padding-right: 2rem; }

  .footer_social_wrap{ margin-bottom: 1rem; }

  .foot-goTop{ margin-bottom: 1rem; }

    @media screen and (max-width:1500px){
      footer{ padding: 1.8rem 1rem }
      .footer-sub-link{ flex: none }
      .foot-goTop{ margin-right: 2rem; }
    }

    @media screen and (max-width:1100px){
      footer h5{ font-size: 18px; }
      footer .footer-logo{ margin: 0; }
      footer .footer-wrap{ font-size: 16px; }
      footer .wrapper, .footer-top, .footer-bottom, .footer-sub-link, .footer-info-wrap ul{ display: block; }
      .footer-info-wrap ul li{ display: block; padding-right: 0; }
      .footer-sub-link .footer-iware{ text-align: left }

      .foot-goTop{ position: fixed; bottom: 1rem; right: 1rem; z-index: 5; }
    }


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


/*== 麵包屑 ==*/
  .breadcrumb > li,
  .breadcrumb > li > a { font-size: 14px; font-weight: lighter; color: #000000 }
  .breadcrumb > li + li::before { padding: 0 12px; color: #7f7e7e; }
  .breadcrumb img{ display: inline-block; vertical-align: middle; margin-top: -3px; margin-right: 4px; }

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

/*== 內文 ==*/
  .normal-content{ width: 100%; padding:3rem 2rem; overflow: hidden; }
  .main-normal-content{ display: block; width: 100%; overflow: hidden; }

  .main-container{ display: flex; flex-wrap: wrap; padding-top: 1rem; }
  .main-aside{ max-width: 360px; padding: .5rem 6rem }
  .main-aside,
  .main-section{ flex:1; }
  .main-aside + .main-section{ flex:none; width: calc(100% - 360px) }

  .section-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .section-list{ padding: 1rem 0; }

    @media screen and (min-width:1101px){
      .main-container{ padding-right: 1.25rem; }
      .section-list{ padding: 3rem 0; margin-bottom: 3rem; }
    }

    @media screen and (min-width:1100px) and (max-width:1500px){
      .main-aside { max-width: 200px; padding-left:0rem; padding-right: 2rem; }
      .main-aside + .main-section{ width: calc(100% - 250px) }
      .main-container { padding-right: 5rem; }
    }

    @media screen and (min-width:1101px) and (max-width:1300px){
      .main-container { padding-right: 0rem; }
    }

    @media screen and (max-width:1100px){
      .normal-content{ padding: 1rem 1rem 4rem; }
      .main-aside, .main-section{ flex: none; max-width: 100% !important; width: 100% !important; }
      .main-aside{ padding: 0; }
      .main-aside-link{ display: none; }
    }

/*== 圖文列表 ==*/
  .event-carousel-wrap .event-carousel{ position: relative; display: inline-block; vertical-align: top; width: calc(25% - 4px); padding: 0; }
  .event-carousel{ padding: 1em; }
  .event-carousel .thumbnail,
  .event-carousel .thumbnail:hover{ border-radius: 0; border-color:transparent; background: transparent; }
  .event-carousel .thumbnail{ margin: 5px; }
  .event-carousel .thumbnail figure{ position: relative; margin: 0; text-align: center; }
  .event-carousel .thumbnail figure img{}
  
  .event-carousel .thumbnail .caption{ padding: 1em 1.5em; font-size: 16px; }

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

    @media screen and (max-width:1100px){
      .event-carousel-wrap .event-carousel{ width: calc(50% - 4px); }
      .event-carousel .thumbnail figure img{ height: auto; }
      .event-carousel .thumbnail .caption{ padding: 1em 0;}
    }

/*== 標題 ==*/
  .main-header{ position: relative; float: left; display: block; width: 100%; overflow: hidden; font-weight: 100; padding-bottom: 9px; margin-bottom: 1rem; margin-top: 1rem; border-bottom: none; }
  .main-header p{ font-size: 35px; }
  .main-header p + span{ font-size: 1.25em; display: inline-block; margin-left: 1rem; }
  .main-header p::after{
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #9a00ff;
    border-radius: 50%;;
    margin-left: 2.5rem;
  }

  .main-header small{ font-size: 100%; }

  .main-header .sub-title{ margin-top: 0; color: #565656 }

  .main-header *{ color:#858282; }
   
  .main-sub-header *{ color: #000; font-weight: 400; } 
  .main-sub-header p::after{ width: 15px; height: 16px; margin-left: 2rem; margin-bottom: -.1em; }
  .main-sub-header span{ margin-left: 0; }

    @media screen and (max-width:1500px){
      .main-header p{ font-size: 2.5em; }
    }

    @media screen and (min-width:1101px) and (max-width:1300px){
      .main-header{ padding: 0 3rem; margin: 0; }
      .main-header p{ font-size: 2em; }
    }

    @media screen and (max-width:1100px){
      .main-header p{ font-size: 24px; text-align: left; }
      .main-header p::after{ margin-left: 1.5rem; }
      .main-header .sub-title{ font-size: 20px; }
      .main-header small{ font-size: 95%; }
      .main-sub-header{ padding-left: 1rem; }
    }

/*== 表單 ==*/
  .contact-title{ font-size: 20px; color: #170000; line-height: 2; padding: 1rem 4rem 2rem; font-weight: 300; }
  .contact-form { background: #fff; padding: 2.5em; border:#000000 1px solid; }
  .contact-form .form-group{ margin-bottom: 2.25rem; }
  .contact-form .form-group .form-title{ font-weight: normal; padding-left: 1rem; }
  .contact-form .form-group small {
    font-size: 16px;
    line-height: 1;
    padding-bottom: 15px;
    display: inline-block;
    vertical-align: top;
  }
  .contact-form .form-control{ border-radius: 0; box-shadow: none; border-width: 0 0 1px 0; font-size: 18px; }
  .contact-form input.form-control{ height: 55px; }

  .contact-btn {
    margin-bottom: 0;
    font-weight: 200;
    text-align: center;
    padding: 10px 4em;
    font-size: 18px;
    line-height: 1.42857143;
    font-weight: 300;
  }

  .contact-btn-list{ margin-top: 3rem; justify-content: end }
  .contact-btn-list li + li{ margin-left: 10px; }
  .contact-btn-list li .btn{ border-radius: 0; padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .contact-btn-list li:first-child .contact-btn{ border-color:#000; }
  .contact-btn-list li:first-child .contact-btn:hover,
  .contact-btn-list li:first-child .contact-btn:focus{ background: #fff }

    @media screen and (max-width:1100px){
      .contact-form{ padding: 1rem; }
      .contact-title{ padding-left: 0rem; line-height: 1.5; }
      .contact-btn { padding-left: 0; padding-right: 0; }
      .contact-btn-list li{ flex:1; }
      .contact-btn-list li .btn{ display: block; width: 100%; }
    }


/*== 頁碼 ==*/
  .pro-main-header,
  .pagination-list, .pagination-num{ display: flex; align-items: center; }
  .pro-main-header{ justify-content: space-between; }

  .pagination-list { flex: 1; width: 100%; justify-content: flex-end; }
  .pagination-num{ color: #676666; margin-right: 1rem; font-size: 14px; }
  .pagination-num b,
  .pagination-num .num-list{ color: #000000; padding: 0 .5rem; font-family: 'Roboto', Arial; font-size: 16px; }
  .pagination-btn{ margin-left: .25rem; }

    @media screen and (max-width:1100px){
      .pro-main-header{ flex-wrap: wrap; flex-direction: column; align-items: flex-start; }
      .pagination-list{ margin-top: 1.5rem; }
      .pro-main-header .pagination-list { padding-left: 1.5rem; }
      .pro-main-header .shopping-orderNum-list{ padding-left: 0; }
    }

    @media screen and (max-width:767px){
      .pagination-list{ flex-wrap: wrap; }
      .pagination-num{ width: 100%; flex: auto; justify-content: center; margin-bottom: 1em; }
    }


/*== 文字 ==*/
  .item-linethrough{ position: relative; width: 100%; text-align: center; padding: 20px 0; margin-top: 15px; margin-bottom: 15px; }
  .item-linethrough span{ position: relative; color: #c9c9c9; padding: 0 50px; font-size: 16px; background: #fff; }
  .item-linethrough::before{
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #c9c9c9;

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

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

/*== 按鈕 ==*/
  .btn-style,
  .btn-style-small{
    border:#666 3px solid;
    font-size: 20px;
    padding: 1.5rem 4rem;
    border-radius: 35px;
    transition: .3s
  }

  .btn-style:hover,
  .btn-style-small:hover{
    background: #7bcad3;
    color: #fff;
    border-color: #61acb5
  }

  .section-btLine { border-bottom: #8c8a8b 1px solid; }

  .btn-style-small{ background: #3ed0d7; color: #fff; padding: .25rem 2rem .3rem; font-size: 14px; border:none; }

  .btn-more{
    position: relative;
    display: inline-block;
    width: 106px;
    line-height: 3;
    font-size: 14px;
    color: #6f6f6f;
    text-align: center;
    background:url(../images/btn-more-line.png) no-repeat bottom;
  }

  .next-btn,
  .next-btn:hover {
    position: relative;
    display: block;
    text-align: center;
    transition: all 0.2s ease;
    line-height: 1.7 !important;
    font-size: 1rem;
    color: rgba(255, 255, 255, 1);
    font-size: 18px;
    background: #FF9100;
    margin: 0 auto;
    padding:.6em 1em;
    width: 100%;
  }

  .next-btn.addcart,
  .next-btn.addcart:hover{ color:#fff; background:#303030; }
  .next-btn.addcart_pay,
  .next-btn.addcart_pay:hover{ color:#fff; background:#6edadf; }

  .button-wrap .link-button:not(:last-child){ margin-bottom: 1rem; }
  .button-wrap .link-button img{ display: inline-block; vertical-align: middle; margin-top: -3px; margin-right: 4px; }

  .btnSize,
  .btnSize:hover,
  .btnSize-normal,
  .btnSize-normal:hover{ font-size: 18px !important; line-height: 1.8; height: auto; }

  .btnSize,
  .btnSize:hover{ color: #fff }

  .btnSize-normal,
  .btnSize-normal:hover{ color:#333 }

  .btn-lightBlue{ background: #2cccd3; }
  .btn-lightDeepBlue{ background: #019f9b }
  .btn-FbColor{ background: #3a559f }
  .btn-Google_plus_Color{ background: #da534f }
  .btn-line_Color{ background: #00c200 }
  .btn-Pink{ background: #f65e7d }
  .btn-lightPink{ background: #f4a18f }
  .btn-lightGreen{ background: #88d56f }
  .btn-lightBlue01{ background: #61e0ff }

  .btn-normal{ background: #ababab; }
  .btn-newRegist,
  .btn-newRegist:hover{ color: #029E9A; background: #C3FFFD;border-color: #46b8da; }
  .btn-deeppink,
  .btn-deeppink:hover{ color: #ff003e; background: #ffeded; border-color: #ff003e }

  .btn-padding{ padding: 8px 54px; font-size: 1.5rem; }

  .btn-delete,
  .btn-delete:hover{ color: #fff; background: #c70923; border-color: #c70923 }

    @media screen and (max-width:1100px){
      .btn-style, .btn-style-small{ font-size: 16px; padding: 1rem 2rem; }
    }

/*== 頁碼 ==*/
  .pagination > li:first-child > a, .pagination > li:last-child > a{ border-radius: 0 }
  .pagination > li > a{ margin-right: 5px; font-family: Arial; line-height: 1.5; color: #249EA4 }
  .pagination > .active > a, .pagination > .active > a:hover{ background-color: #249EA4; border-color: #249EA4; }

/*== 區塊列表 ==*/
  .attachment{
    clear: both;
    overflow: hidden;
    font-size: 18px;
  }

    @media screen and (max-width:1100px){
      .attachment br{ display: none; }
    }


/*== 首頁 ==*/
  
  /*== Banner ==*/
    .index-banner-wrap{ position: relative; width: 100%; background: #eee; }
    
    .index-banner-wrap .swiper-container .swiper-slide{ text-align: center; }
    .index-banner-wrap .swiper-container .swiper-slide img{}

    .index-banner-wrap .swiper-button-next,
    .index-banner-wrap .swiper-button-prev{color: #fff; }

      @media screen and (min-width:1101px){
        .index-banner-wrap .swiper-button-next,
        .index-banner-wrap .swiper-button-prev{ width: 60px; height: 60px; font-size: 100px; }
        .index-banner-wrap .swiper-button-next:after,
        .index-banner-wrap .swiper-button-prev:after{ font-size: 60px; }
        .index-banner-wrap .swiper-button-next{ right: 4rem  }
        .index-banner-wrap .swiper-button-prev{ left: 4rem }
      }

      @media screen and (max-width:1100px){
        .index-banner-wrap .swiper-container-horizontal > .swiper-pagination-bullets{ display: none; }
      }

  /*== 關於世基 ==*/
    .index-about-wrap{
      background-image: linear-gradient(0deg, #fff 0%, #fff 70%, #c7c6c6 160%);
      background-image: -webkit-linear-gradient(bottom, #fff 0%, #fff 70%, #c7c6c6 160%);
      
    }
    .single-info {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-right: -15px;
      margin-left: -15px;
    }

    .info-thumb, .info-content {
      flex: 1;
    }

    .info-thumb {
      overflow: hidden;
      display: inline-block;
      flex: 2;
      position: relative;
      z-index: 1;
      text-align: right;
    }

    .info-thumb-title{
      display: inline-block;
      min-width: 280px;
      line-height: 2;
      background-color: #602288;
      font-size: 33px;
      text-align: center;
      color: rgba(255, 255, 255, .65);
      font-family: 'Archivo Black', Arial;
      margin-right: 8rem;
      padding: .5rem 0
    }

    .img-fluid {
      width: 100%;
      height: auto;
    }

    .info-content {
        position: relative;
        background: #f5f5f5;
        padding: 1rem
    }

      @media screen and (min-width:1101px){
        .index-about-wrap{ padding-top: 235px; padding-bottom: 100px; }
        .single-info { margin-bottom: 2em; }
        .info-content {
          padding: 75px 100px 75px 15em;
          margin-left: -12rem;
          margin-top: 4rem;
        }
      }

      @media screen and (max-width:1500px){
        .index-about-wrap{ padding-top: 70px; padding-bottom: 35px; }
        .index-about-wrap .wrapper-1500{ max-width: 1300px }
        .info-content{ padding: 50px 50px 45px 12em; }
        .info-thumb-title{ min-width: 180px; font-size: 2.25rem; }
      }

      @media screen and (max-width:1300px){
        .index-about-wrap .wrapper-1500{ max-width: 1150px }
        .info-content{ padding: 30px 50px 40px 12em; }
        .info-thumb-title{ line-height: 3; }
      }

      @media screen and (max-width:1100px){
        .index-about-wrap { padding:.75rem 2rem; }
        .info-thumb, .info-content { flex: none; width: 100%; padding: 1rem; margin: 0; }
        .info-thumb-title{ min-width: none; font-size: 1.5rem; margin-right: 0; }
      }


  /*== 新品 ==*/
    .index-proNew-wrap{ position: relative; width: 100%; z-index: 1; padding-top: 70px;}
    .index-proNew-wrap::before{
      content: '';
      display: block;
      width: 100%;
      height: 587px;
      background: url("../images/index-pro-bg.png") no-repeat;
      background-size: contain;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
    }
    .index-proNew-wrap .main-header *{ color: #fff }
    .index-proNew-wrap .main-header{ margin-bottom: 60px }
    .index-proNew-wrap > div{ position: relative; z-index: 1; }

      @media screen and (max-width:1100px){
        .index-proNew-wrap{ padding-top: 1rem; padding-bottom: 1rem; }
        .index-proNew-wrap .main-header{ text-align: left; margin-bottom: 1.5rem; }
        .index-proNew-wrap::before { background-size: cover }
      }

/*== 新品介紹 ==*/

/*====*/
  .main-content{
    margin-bottom: 5rem;
  }

    @media screen and (min-width:1101px){
      .main-content{ padding: 9rem 18rem; }
    }

    @media screen and (min-width:1101px) and (max-width:1500px){
      .main-content{ padding: 5rem 7rem; }
    }

    @media screen and (max-width:1100px){
      .main-content{ margin-bottom: 1rem; }
    }

/*== 關於世基 ==*/
  .main-about-content{
    background:url(../images/main-about-img.png) no-repeat top;
  }

  @media screen and (max-width:1100px){
    .main-about-content{ padding: 2rem 4rem }
  }

  @media screen and (max-width:640px){
    .main-about-content{ padding: 2rem }
  }

/*== 影片 ==*/

    @media screen and (min-width:1101px){
      .video-wrap .embed-responsive-4by3{ padding-bottom: 50%; }
    }

    @media screen and (max-width:1100px){
      .main-video-content .h2{ font-size: 2rem; }
    }

/*== 專利結構 ==*/
  .main-patent-content{
    background:url(../images/main-patent-img.png) no-repeat top;
  }

  .patent-event-wrap .event-carousel{ width: calc(50% - 4px); }
  .patent-event-wrap .event-carousel .thumbnail{ background: #eeeeee; }
  .patent-event-wrap .event-carousel .thumbnail figure img{ width: 100%; }
  .patent-event-wrap .event-carousel .thumbnail .caption{ min-height: 180px; padding-left: 0em; padding-right: 0em; }
  .patent-event-wrap .event-carousel .thumbnail .caption .title{ font-size: 22px; margin-top: 10px; }
  .patent-event-wrap .event-carousel .thumbnail .caption .description p{ font-weight: 300; color: #5e5e60 }

    @media screen and (min-width:1101px){
      .main-patent-content{ padding-left: 9rem; padding-right: 0rem; padding-bottom: 0; }
      .patent-event-wrap .event-carousel .thumbnail{ padding: 1.5rem }
      .patent-event-wrap .event-carousel .thumbnail .caption .description{ text-align:left; padding-left: 1em; padding-right: 1em; }
    }

    @media screen and (max-width:1500px){
      .patent-event-wrap .event-carousel .thumbnail .caption .title { font-size:2rem; }
    }

    @media screen and (max-width:1100px){
      .patent-event-wrap .event-carousel .thumbnail{ padding:1rem; }
      .patent-event-wrap .event-carousel .thumbnail .caption{ line-height: 1.5; padding: 0; }
      .patent-event-wrap .event-carousel .thumbnail .caption .title{ margin-top: 15px; }
    }

    @media screen and (max-width:640px){
      .patent-event-wrap .event-carousel{ width: 100%; }
      .patent-event-wrap .event-carousel .thumbnail .caption{ min-height: 100% }
    }


  /*== list-content ==*/
    .list-content{}
    .list-content .big-title,
    .list-wrap{ margin-bottom: 50px; }

    .list-content .title img,
    .list-wrap .title img{ display: inline-block; vertical-align: middle; margin-top: -3px; }
    .list-wrap .description{ line-height: 1.25; }

    .list-line-bottom{ border-bottom:#000 1px solid; }
    
    .text-content{ position: relative; }

    .text-wrap .big-title,
    .list-content .big-title{ font-size: 25px; line-height: 1.6; }

    .list-wrap .title{ font-size: 22px; }
    .text-wrap .small-title{ font-size: 20px; line-height: 1.3; }
    .text-wrap .description{ font-size: 15px; margin-top: 30px; color: #5e5e60; line-height: 1.4; font-weight: 400; }
    .text-wrap .small-title + .description{ margin-top: 10px; }

    .text-float-wrap{ position: absolute; right: 0; width: 57%; bottom: 8%; }
    .text-float-wrap .text-sub-wrap .img-wrap{ float: right; margin-bottom: 7px; margin-left: 10px; }

      @media screen and (max-width:1500px){
        .text-wrap .small-title{ margin-bottom: 1rem; }
        .text-wrap .small-title + .description { margin-top: 0px; }
        .text-float-wrap{ width:60%; bottom: -17%; }
        .text-single-content .img-wrap{ flex:.6; }
        .text-float-wrap .text-sub-wrap{ margin-bottom: 10px; }
        .text-float-wrap .text-sub-wrap .img-wrap{ max-width: 43%; }
      }

      @media screen and (max-width:1300px){
        .text-float-wrap{ bottom: -40% }
        .text-float-wrap .text-sub-wrap .img-wrap{ max-width: 50% }
      }

      @media screen and (max-width:1100px){
        .list-content .big-title,
        .list-wrap{ line-height: 1.3; font-size: 2.1rem; }

        .list-wrap .title{ font-size: 2rem; }
        .text-wrap .description{ margin-top: 1rem; line-height: 1.5; }

        .text-float-wrap{ position: static; }
        .text-float-wrap .text-sub-wrap{ margin-bottom: 0; }
        .text-float-wrap .text-sub-wrap + .text-sub-wrap{ margin-top: 2rem; }
      }

  /*== 產品 ==*/
  .patent-pro-wrap .patent-pro-list{ flex:0 0 50%; max-width: calc(50% - 2rem); border:#7ecef4 3px solid; margin:1rem;  padding: 2rem }
  .patent-pro-wrap .patent-pro-list.patent-pro-quality-list{ border-color: transparent; }
  .patent-pro-wrap .patent-pro-list.patent-pro-quality-list .list-content .big-title{ margin-bottom: 2rem; margin-top: 0; }

    /*== 宮格 ==*/
    .patent-quality-eventList{ max-width: calc(50% - 2rem) !important; position: relative; padding: 2rem 0 2rem 1.25rem !important }

    @media screen and (min-width:1101px){
      .patent-pro-wrap .patent-pro-list.patent-pro-quality-list{ padding-top: 2rem; margin-left: 2rem; } 

      .patent-pro-quality-list{ padding-left: 0 !important; }
      .patent-pro-quality-list:nth-child(even) { margin-right: 0 !important; padding-right: 0 !important; }

      .patent-quality-eventList:nth-child(even) .img-wrap{ margin-left: 2rem; }

      .patent-quality-eventList,
      .patent-quality-eventList .description{ margin: 0 !important }

      .patent-quality-eventList::after{
        content: '';
        display: block;
        width: calc(100% - 2.5em);
        height: 1px;
        background: #a09d9d;
        position: absolute;
        bottom:0;
        left: 2.5em
      }

      .patent-quality-eventList::before{
        content: '';
        display: block;
        width: 1px;
        height: calc(100% - 4em);
        background: #a09d9d;
        position: absolute;
        top:2em;
        right:-1.25em;
        z-index: 1;
      }

      .patent-quality-eventList:nth-child(even)::before{ display: none; }

    }
    

    @media screen and (max-width:1100px){
      .patent-pro-wrap .patent-pro-list{ flex:0 0 100%; max-width: calc(100% - 2rem) }
      .patent-pro-wrap .patent-pro-list .text-content{ flex-wrap: wrap; }
      .patent-pro-wrap .patent-pro-list .text-content .img-wrap,
      .patent-pro-wrap .patent-pro-list .text-content .text-wrap{ flex:none; width: 100%; padding-left: 0; }
      .patent-pro-wrap .patent-pro-list .text-content > .img-wrap{ text-align: center; }

      .patent-pro-wrap .patent-pro-list .text-content .text-float-wrap .text-sub-wrap{ display: flex; flex-wrap: wrap; }
      .patent-pro-wrap .patent-pro-list .text-content .text-float-wrap .text-sub-wrap .img-wrap{ order:1; margin-left: 0; margin-top: 10px; }


      .patent-pro-wrap .patent-pro-list.patent-pro-quality-list{ padding: 1rem; }
      .patent-quality-eventList{ margin: 0 0 1.5rem 0 !important; max-width: 50% !important; padding: .5rem !important }
    }

    @media screen and (max-width:640px){
      .patent-quality-eventList{ max-width: 100% !important; }
    }

  /*== 不一樣 ==*/
    @media screen and (min-width:1101px){
      .patent_nosame_wrap{ padding-top: 50px; }
    }


/*== 聯絡我們 ==*/
  .main-contact-content{
    background: url(../images/main-contact-img.png) no-repeat top;
    padding-left: 6rem; padding-right: 6rem;
  }

  .contact-info{ align-self: center; padding: 0 6rem; }
  .contact-map .embed-responsive-4by3{ padding-bottom: 45%; }

  .contact-info-wrap{ width: 100%; }
  .contact-info-wrap ul li{ display: block; width: 100%; padding-right: 0; color: #000000; }
  .contact-info-wrap ul li + li{ margin-top: 2rem; }

    @media screen and (max-width:1100px){
      .main-contact-content{ padding: 0 2rem; }
      .contact-intro-wrap .contact-map,
      .contact-intro-wrap .contact-info{ flex:none; width: 100%; }
      .contact-intro-wrap .contact-info{ padding: 0; }
      .contact-intro-wrap .contact-info-wrap ul li + li{ margin-top: .5rem; }
    }



/*== 產品介紹 ==*/
  .pro-main-content{ position: relative; background-repeat: no-repeat; background-position: top; background-size: cover; background-color:#eeeeee; margin-bottom: 60px; }
  .pro-main-content .hidden-link{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; }

  .pro-list-wrap{ padding: 4rem 0 3rem 12rem; }
  .pro-list-wrap .main-header{ flex: none; padding: 12rem 0 8rem; width: 450px; }
  .pro-list-wrap .main-header p{ line-height: 1.5; }
  .pro-list-wrap .main-header p > span{ font-weight: 500; text-transform: uppercase; }
  .pro-list-wrap .attachment{ flex:1; }

  .pro-main-content:nth-child(6) .pro-list-wrap .main-header,
  .pro-main-content:nth-child(6) .pro-list-wrap .attachment{ flex:none; padding: 0; }
  .pro-main-content:nth-child(6) .pro-list-wrap .attachment{ text-align: center; }

    /*== 詳細頁 ==*/
    .pro-d-content{ overflow: hidden; padding: 1rem }
    .pro-d-content .h1,
    .pro-d-content .h3{ padding-left: 1.5rem; }

    .pro-text-wrap{ background: #fff; margin-top: 20px; margin-right: 1em; margin-bottom: 20px; }
    .pro-text-wrap .title,
    .pro-text-wrap .description{ font-size: 18px; }
    .pro-text-wrap .title{ line-height: 2; color: #8b8c8c; background: #f7f7f9 }
    .pro-text-wrap .description{ padding:1.5rem 2rem; margin-top: 0; color: #363636 }
    .pro-text-wrap .description span{ font-size: 16px; }
    .pro-text-wrap .description p.text{ display: flex; }

    .pro-text-wrap .description p.text span::after{
      content: '/ ';
      color: #13085e;
      padding-left: 1rem;
    }
    .pro-text-wrap .description p.text span + span{ padding-left: 1rem; font-weight: 500; }
    .pro-text-wrap .description p.text span + span::after{ display: none; }
    
    .pro-d-wrap{ padding-left: 4rem; padding-right: 2rem; }
    .pro-d-content{ width: 450px; }
    .pro-color-box{ display: inline-block; vertical-align: middle; margin-top: -1px; width: 72px; height: 15px; margin-right: 1rem; }

    /*== 介紹文字 ==*/
    .pro-dIntro-wrap .pro-d-content{ width: 100%; }
    .pro-dIntro-wrap .pro-text-wrap{ background: transparent; }

    @media screen and (min-width:1101px){
      .pro-main-content:nth-child(4) .pro-list-wrap .main-header,
      .pro-main-content:nth-child(5) .pro-list-wrap .main-header,
      .pro-main-content:nth-child(7) .pro-list-wrap .main-header{ width: 350px }
      .pro-main-content:nth-child(5) .pro-list-wrap .main-header{ padding-top: 4rem; }
      .pro-main-content:nth-child(7) .pro-list-wrap .main-header{ padding-top: 0rem; margin-top: -1rem; }

      .pro-main-content:nth-child(6) .pro-list-wrap{ flex-direction: column; }

      .pro-d-content .h1, .pro-d-content .h3{ display: flex; }
      .pro-d-content .h1 .insp10-l{ padding-left: 15px; }

      /*== 第五個產品 ==*/
      .pro-dImg-05-list .pro-dImg + .pro-d-content{ position: absolute; bottom: 6em; }
      .pro-dImg-05-list .pro-dImg01 + .pro-d-content{ left: 4em; }
      .pro-dImg-05-list .pro-dImg02 + .pro-d-content{ right: 4em; }
      .pro-dImg-05 + .pro-d-content { position: absolute; right: 0em; }
    }

    @media screen  and (min-width:1101px) and (max-width:1300px){
      /*== 第五個產品 ==*/
      .pro-dImg-05-list .pro-dImg01 + .pro-d-content{ left: 2em; }
      .pro-dImg-05-list .pro-dImg02 + .pro-d-content{ right: 1em; }
    }

    @media screen and (max-width:1100px){
      .pro-main-content{ margin-bottom: 1rem; }
      .pro-list-wrap,
      .pro-list-wrap .main-header{ padding: 1rem }
      .pro-list-wrap .main-header,
      .pro-list-wrap .attachment{ flex:none; width: 100% !important;  }

      .pro-text-wrap{ margin-right: 0; }
      .pro-d-content .h1, .pro-d-content .h3{ font-size: 2em; padding-left: 0; }

      .pro-text-wrap .description p.text{ flex-wrap: wrap; flex-direction: column; }
      .pro-text-wrap .description p.text span + span{ padding-left: 0; }

        /*== 第五個產品 ==*/
        .pro-d-wrap .pro-dImg-05,
        .pro-dImg-05-list{ flex-direction: column; width: 100%; }
        .pro-dImg-05-list .pro-dImg,
        .pro-dImg-05-list .pro-d-content{ flex:none; width: 100%; }
        .pro-dImg-05-list .pro-dImg{ text-align: center; }
        .pro-d-wrap .pro-dImg-05 + .pro-d-content{ order:-1; }
      
      /*== 介紹文字 ==*/
      .pro-dIntro-wrap .pro-text-wrap .description{ padding: 0; }

    }