@media (min-width:1400px) {
    .container {
        width: 1350px;
    }
}

hr {
    border-color: black;
}

img {
    max-width: 100%;
    width: 100%;
}

/* navbar */

.navbar {
    background-color: #fff;
}

.navbar ul {
    list-style: none;
}

.navbar-nav {
    margin-top: 43px;
}

.navbar-nav li {
    position: relative;
}

.navbar-nav li a {
    font-size: 16px;
    padding: 20px 12px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    font-weight: 600
}

.navbar-nav li:hover a {
    color: #fff;
}

.navbar-nav li .effect {
    position: absolute;
    bottom: 0;
    left: 50%;
    height: 0;
    width: 0;
    background-color: #184ea0;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.attr-nav .search a {
    width: 30px;
    height: 30px;
    margin: 15px;
    border-radius: 100%;
    background-color: #184ea0;
    color: #fff;
    line-height: 27px;
    text-align: center;
    padding: 0;
    display: block;
}
#google_translate_element .goog-te-combo{
    color: black;
    font-size: 15px;
    border: solid #ababab 1px;
    padding: 3px;
    margin-top: -5px;
}

@media (min-width:500px) {
    .navbar-nav li:hover .effect {
        left: 0;
        width: 100%;
        height: 100%;
    }
    .attr-nav .search:hover a {
        background-color: #8fa1bd
    }
}
/* 改斷點 */
@media (max-width: 1330px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,
    .navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-nav {
        float: none !important;
        margin-top: 7.5px;
    }
    .navbar-nav > li {
        float: none;
    }
    .navbar-nav > li > a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in {
        display: block !important;
    }
    
    .navbar-brand img {
        margin: 10px;
    }
    /* 改搜尋斷點 */
    .attr-nav .hidden-max-1330 {
        display: none;
    }
    .max-1330-search {
        float: right;
        z-index: 1;
        position: relative;
    }

}

/* logo */

.navbar-brand {
    padding: 0;
}

.navbar-brand img {
    width: 370px;
    margin-top: 25px;
}

/* service */

.service-img {
    position: relative;
    display: inline-block;
    margin-bottom: 3vw;
    overflow: hidden;
}

.service-img img {
    max-width: 100%;
    width: 100%;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.service-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 45px;
    background-color:#154981;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.service-title h3 {
    font-size: 20px;
    padding: 0;
    margin: 0;
    display: table;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
}

.service-img:hover .service-title {
    height: 100%;
}

.service-img:hover img {
    transform: scale(1.1);
}
@media (min-width:1330px) {
    .attr-nav.hidden-min-1330 {
        display: none;
    }
}
@media (min-width:1330px) {
    .attr-nav.hidden-min-1330 {
        display: none;
    }
}

@media (max-width:1200px) {
/*
    .navbar-collapse.collapse {
        text-align: center;
    }
    .navbar-nav {
        margin: 0;
        float: none !important;
        display: inline-block;
    }
    
    .navbar-header {
        float: none;
    }
    .navbar > .container .navbar-brand {
        float: none;
        margin: auto;
    }
    .svg-container {
        margin: auto;
    }
*/
    .navbar-nav li a{
        padding: 15px
    }
    nav .container {
    width:100%;
}
}

@media (max-width:1330px) {
    .navbar-nav li a {
        padding-right: 15px;
        padding-left: 15px;
    }
   
}

@media (max-width:1330px) {
    .navbar-collapse.collapse {
        text-align: left;
        margin: 30px 0;
    }
    .svg-container {
        max-width: 290px;
        padding-right: 100px
    }
    .attr-nav .hidden-max-1330 {
        display: none;
    }
    .max-1330-search {
        float: right;
        z-index: 1;
        position: relative;
    }
    .navbar-toggle {
        font-size: 20px;
        margin-top: 15px;
        z-index: 1;
    }
    .attr-nav .search a {
        margin-top: 25px;
        margin-right: 10px;
    }
    .navbar-brand img{
        margin: 15px
    }
    .navbar-nav{
        margin-top: 0
    }
    
}
/* @media (max-width: 560px) {
    .navbar-brand img{
       width: 250px;
    }
} */
@media (max-width: 530px) {
    .navbar-brand img{
       width: 280px;
    }
}
@media (max-width: 400px) {
    .navbar-brand img{
       width: 230px;
       margin: 10px 0 10px 10px;
    }
}
.title-box {
    position: relative;
    padding: 70px 0 60px;
}

.main-title {
    position: relative;
    padding: 0 24px;
    display: table;
    margin: auto;
    background-color: #ffcc5f;
    height: 88px;
}

.main-title {
    font-size: 0;
}

.main-title * {
    font-size: 0;
    line-height: 88px;
    height: 88px;
    color: #253344;
}

.main-title::before {
    position: absolute;
    left: 0;
    top: 0;
    content: ' ';
    background-image: url('../../images/Decoration-left.svg');
    background-repeat: no-repeat;
    background-size: inherit;
    height: 88px;
    width: 24px;
}

.main-title::after {
    position: absolute;
    right: 0;
    top: 0;
    content: ' ';
    background-image: url('../../images/Decoration-right.svg');
    background-repeat: no-repeat;
    background-size: inherit;
    height: 88px;
    width: 24px;
}

.title-cn {
    position: relative;
    font-weight: bold;
    padding: 0 10px;
    font-size: 26px;
    display: inline-block;
    height: 72px;
    line-height: 74px;
    letter-spacing: 3px;
}

.title-en {
    position: relative;
    font-weight: bold;
    padding: 0 10px;
    font-size: 26px;
    display: inline-block;
    height: 72px;
    line-height: 74px;
}



.center-line {
    position: relative;
    width: 20px;
    font-size: 26px;
    height: 88px;
    display: inline-block;
}

.center-line::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: ' ';
    background-image: url('../../images/Decoration-center.svg');
    background-size: 20px 86px;
    background-repeat: no-repeat;
    height: 88px;
    width: 20px;
}

@media (max-width: 550px) {
    .title-box {
        padding: 20px 0;
    }
    .main-title {
        transform: scale(.7);
        padding: 0 17px;
    }
    .service-title h3 {
        font-size: 18px;
    }
}


/* about */

.about {
    padding: 90px 0;
    background-image: url(../../images/about-bgimg2.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}
.about .row{
    background: rgba(255,255,255,0.7);
}
.about-img img {
    max-width: 100%;
    width: 100%;
}

.about-title {
    font-size: 28px;
    color: black;
    font-weight: bold;
    padding: 25px 0 20px;
    border-bottom: 1px solid black;
    line-height: 2;
    letter-spacing: 1px;
}

.about-text {
    font-size: 18px;
    color:black;
    font-weight: 600;
    padding-top: 30px;
    line-height: 2;
    letter-spacing: 1px;
    
    padding-bottom: 30px
}

/* link-list */

.link-list {
    background-color: #fff;
    padding: 100px 0;
}

.link-list-item {
    padding-bottom: 30px;
}

.link-title {
    padding-bottom: 10px;
}

.link-title img {
    width: 40px;
}

.link-title h3 {
    display: inline-block;
    margin: 0;
    vertical-align: bottom;
    padding-left: 7px;
}

.link-list .img-box {
    overflow: hidden;
}

.link-list .img-box img {
    width: 100%;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.link-list-item:hover img {
    transform: scale(1.1);
}

.link-list #rwdnews_list {
    width: 100%;
    height: 0px;
    overflow-y: auto;
    padding-bottom: 83%;
    border: 1px solid #eee;
}

.link-list #rwdnews_list ul {
    list-style: none;
}

.link-list #rwdnews_list .pic,
.link-list #rwdnews_list p {
    display: none;
}

.link-list #rwdnews_list ul {
    padding: 10px 15px 0 15px;
}

.link-list .newscontent,
.link-list .newscontent a {
    font-size: 15px;
    color: #253344;
}

.link-list .newscontent h4 {
    margin-top: 0;
}

.link-list .newscontent a {
    color: #555;
}
.link-list .icon{
    font-size: 20px;
    color: #184ea0;
}
/* footer */

footer {
    padding: 50px 0;
    background-color:#184ea0;
    color: #fff;
}

footer img {
    width: 100%;
}

.footer-info {
    padding: 0 50px;
}

footer .title-en {
    font-size: 25px;
    display: block;
    border-bottom: 1px solid #fff;
    padding: 0;
}

footer .title-cn {
    font-size: 21px;
    display: block;
    padding: 0;
}

footer p {
    font-size: 16px;
    line-height: 1.8;
}
footer a{
    color: #9ed1ff;
    transition: all .3s ease
}
footer a:hover{
        color: #9ed1ff;
    opacity: 0.7
}
#gotop.gotop {
    padding: 10px 15px;
    line-height: 30px;
}

.info {
    position: fixed;
    right: 35px;
    bottom: 100px;
}

.info a {
    width: 50px;
    height: 50px;
    overflow: hidden;
    line-height: 50px;
    font-size: 30px;
    text-align: center;
    display: block;
    border-radius: 100%;
    background-color: #fff;
    margin-bottom: 10px;
    color: #253344;
}

.info .facebook a {
    color: #fff;
    background-color: #3b5998;
}

.info .line a {
    color: #00b900;
    font-size: 57px;
}

.info .line a i {
    transform: translate(0px, -5px);
}

@media (max-width:500px) {
    .footer-info {
        padding: 0 15px;
    }
    #gotop.gotop {
        right: 5px;
        bottom: 5px;
        line-height: 22px;
        padding: 8px 13px;
    }
    .info {
        right: 5px;
        bottom: 55px;
    }
    .info a {
        width: 45px;
        height: 45px;
        line-height: 45px;
        font-size: 25px;
    }
    .info .line a i {
        transform: translate(-2px, -6px);
    }
}
@media (max-width:768px) {
    .about-box {
    padding: 0;
    }
    .about-box .about {
    padding: 20px;
    }
}

/* 內頁banner */

.page-banner {
    height: 213px;
    background-image: url(../../images/page-banner.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative
}

.banner-title {
    text-align: center;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 45%;
    font-size: 24px;
    color: white;
    font-weight: 600;
    text-shadow: 0 0 3px black;
    letter-spacing: 5px;
}

/* 側邊攔 */

aside {
    padding: 12px 0;
}

.aside-title {
    background-color: transparent;
    border-bottom: 1px solid #253344;
    color: #253344;
    border-radius: 0;
}

aside .nav li a,
.headlinecate a,
.headlinecate0 a {
    font-size: 18px;
}

aside .nav li a:hover,
aside .nav li .topic {
    background-color:#e6e6e6;
    color: black
}

aside .nav li a i {
    padding-left: 30px;
    color: #253344;
}

.badge {
    background-color: #7b5827;
    line-height: 18px;
    vertical-align: top;
    margin-left: 10px;
}

.headlinecate img,
.headlinecate0 img {
    width: auto;
}
#category_parent_link{
    display: none
}
/* 樓層頁(產品列表頁) */

ol.breadcrumb,
#myTab {
    display: none;
}

.page-title {
    padding: 0 0 10px;
}

.page-title .main-title {
    font-weight: bold;
    font-size: 26px;
    max-width: 300px;
    width: 100%;
    height: 88px;
    line-height: 88px;
    padding: 0 30px;
    color: transparent;
}

.page-title .main-title * {
    width: calc(100% - 48px);
    position: absolute;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.page-title .main-title .center-line {
    z-index: 1;
}

.page-title .main-title .center-line::before {
    background-color: #ffcc5f;
    height: 86px;
}

.page-title .main-title .title-cn {
    width: calc(100% - 40px);
    z-index: 2;
}

.page-title .main-title .title-cn::before,
.page-title .main-title .title-cn::after {
    display: none;
}

.li-item,
.li-item:hover {
    padding: 15px;
    border: none;

}

.features-box a h4 {
    font-size: 18px;
    font-weight: bold;
    color: black;
}

#category_descr {
    margin: 0;
}


/* 商品詳述頁 */

#prod_intro h1 {
    font-size: 22px;
    font-weight: bold;
}

.descri-none,
.PersonNum {
    font-size: 16px;
    color: #7b5827;
}

/* 最新消息列表頁 */

.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > li > a:focus,
.pagination > li > a:hover {
    background-color: #7b5827;
    border-color: transparent;
}



/* 上架設定 */

.Article .row {
    padding: 20px 0;
}

.Article .subtitle {
    color: #7b5827;
    font-weight: 400;
    line-height: 26px;
}

.Article .title {
    font-weight: bold;
}

.Article .img-box {
    text-align: center;
    margin-bottom: 20px;
}

.Article .text {
    line-height: 26px;
    font-size: 16px;
}

.Article hr {
    margin-bottom: 55px;
}

.dr ol,
.dr ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dr h3.title {
    padding-bottom: 5px;
    border-bottom: 1px solid;
    display: inline-block;
    font-size: 32px;
}

.dr ul ul {
    padding-left: 20px;
}

.dr .title {
    padding-bottom: 15px;
}

.dr .title h4 {
    font-size: 24px;
    font-weight: bold;
}

.dr .text li {
    font-size: 18px;
    line-height: 1.5;
    font-weight: initial;
    padding-bottom: 10px;
}

/*line QR code*/

.line {
    cursor: pointer
}

#line_QR {
    position: fixed;
    bottom: 5%;
    right: 100px;
    display: none;
    width: 200px;
    box-shadow: 5px 5px 35px #2b2b2b;
}

#line_QR.active {
    display: block
}

.contact-wrapper img {
    width: auto
}
.features-box a h4{
    white-space: normal;
}