/*
    project: Chen Rong Ji
    author: Jason
    date: 2016-12-23
    update: 2024-1-11
 */
/*
    ============================================================================
    GLOBAL
    ============================================================================
*/
/*
    common
*/
body{ font-family: "Microsoft JhengHei","Helvetica Neue", Helvetica, Arial, sans-serif; background: url('../images/bg.jpg') repeat; }
h1,h2,h3,h4,h5,h6,li,ul,ol,p,figure{ padding: 0; margin: 0; list-style: none; }
a,a:hover,a:focus{ text-decoration: none; outline: none; }
a:hover{ opacity: .9; transition: all .3s; }
/*
    wrapper
*/
.wrapper{ width:1220px; background: url('../images/bg2.png') repeat-y; margin: 0 auto; }
/*
    container
*/
.container{ padding: 0; width: 1118px; }
/*
    side by side
*/
.page-sidebar{ float: left; width:240px; }
.page-main{ float: right; width:860px; }
.box-page{ overflow: hidden; }
/*
    header
*/
.header{ margin-bottom: 20px; }
/*
    logo
*/
.logo{ background: url('../images/logo.png') no-repeat; display: block; float: left; width: 355px; height: 70px; margin-top: 22px; }
/*
    menu
*/
.menu{ float: right; height: 92px; }
.menu>li{ float: left; position: relative; }
.menu>li>a{ display: block; line-height: 92px; height: 92px; color: #2f2f2f; font-size: 18px; padding: 0 20px; border-top:8px solid transparent;  }
.menu>li>a:hover , .menu>li>a.active , .menu>li:hover>a{ background: #f5f5f5; border-color: #f8cf03; }
.menu .sub-menu{ z-index: 10; display: none; width: 100%; position: absolute; left: 0; top: 92px; background: #f8cf03; }
.menu .sub-menu li{ line-height: 36px; border-bottom: 1px solid #FFF; font-size: 16px; }
.menu .sub-menu a{ color: #b29401; text-align: center; display: block; }
.menu .sub-menu a:hover{ color: #FFF; opacity: 1; }
.menu>li:hover .sub-menu{ display: block; }
/*
    footer
*/
.footer{ height: 72px; line-height: 72px; margin: 20px 10px 0 10px; background: #e9c200; color: #FFF; text-align: center; padding: 0 10px; }
.footer a{ color: #FFF; margin-left: 20px; }
/*
    page-banner
*/
.page-banner{ width: 100%; height: 297px; position: relative; overflow: hidden; }
.page-banner .title{ position: absolute; right: 15px; bottom: 60px; background: #f8d323; color: #FFF; font-size: 28px; padding: 6px 15px; }
/*
    page-title
*/
.page-title{ margin-top: 20px; }
/*
    ============================================================================
    SPECIAL
    ============================================================================
*/
/*
    plugins index
*/
.useThumb{ }
/*
    pic-middle
*/
.pic-middle{ width: 100%; display: table; table-layout: fixed; overflow: hidden; }
.pic-middle span{ display: table-cell; width: 100%; vertical-align: middle; text-align: center; }
.pic-middle img{ display: inline; max-height: 100%; }
/*
    box-title
*/
.box-title{ border-bottom: 1px solid #e2e2e2; padding: 10px 0; position: relative; margin-bottom: 20px; }
.box-title h3{ font-size: 28px; font-weight: 700; }
.box-title span{ color: #e9c200; }
.box-title em{ color: #d2d2d2; font-size: 16px; font-style: normal; }
.box-title .line{ width: 56px; border-bottom: 4px solid #f8cf03; position: absolute; bottom: -2px; }
/*
    tabs-block
*/
.tabs-block li{ float: left; }
.tabs-block a{ display: block; font-size: 16px; color: #555555; padding: 6px 10px; }
.tabs-block a:hover , .tabs-block a.active , .tabs-block li.active a{ background: #f8cf03; color: #FFF; }
/*
    cat-nav
*/
.cat-nav{ overflow: hidden; margin-top: 20px; }
.cat-nav .item{ overflow: hidden; margin-bottom: 10px; }
.cat-nav .trigger{ font-size: 16px; color: #000; display: block; line-height: 34px;  }
.cat-nav .trigger:before{ font-family: FontAwesome; content: '\f107'; margin-right: 6px; }
.cat-nav .trigger.collapsed:before{content: '\f105';}
.cat-nav ul li{ line-height: 30px; }
.cat-nav ul a{ color: #a0a0a0; display: block; padding: 0 32px; }
.cat-nav ul a:hover , .cat-nav ul a.active{ color: #f8cf03; }
.cat-nav .panel{ box-shadow: none; border: 0; border-radius: 0; }
/*
    page-jumper
*/
.page-jumper{ padding: 20px 0; display: block; width: 100%; margin: 0; overflow: hidden; }
.page-jumper>li>a{ color: #0d793a; }
.page-jumper>.active>a , .page-jumper>.active>a:hover , .page-jumper>li>a:hover{ color: #FFF; background: #e9c200; border-color: #e9c200; }
/*
    ============================================================================
    LIST
    ============================================================================
*/
/*
    list-product
*/
.list-product{ margin: 0 -10px; }
.list-product .item{ padding: 0 10px; }
.list-product a{ display: block; border-bottom: 1px solid #eaeaea; margin-bottom: 20px; }
.list-product figure{ border: 1px solid #eaeaea; height: 180px; }
.list-product figure span{ height: 180px; }
.list-product p{ line-height: 30px; height: 30px; overflow: hidden; text-align: center; color: #434343; margin: 5px 0; }
.list-product a:hover{ border-color: #f8d00a; }
.list-product a:hover figure{ border-color: #f8d00a; }
.list-product a:hover p{ color: #d6b200; }
/*
    ============================================================================
    DETAIL
    ============================================================================
*/
/*
    ALL : Single Page
*/
.single{ padding:20px 0; overflow: hidden; min-height: 540px; }
.single h3{ font-size: 3rem; color: #e9c200; margin-bottom: 20px; font-weight: 700; }
.single .con{ padding-bottom: 30px; }
.single .con p{ color: #4e4e4e; line-height: 24px; font-size: 1.4rem; }
.single .con a{ color: #4e4e4e; }
/*
    ============================================================================
    PAGES
    ============================================================================
*/
/*
    HOME : Banner
*/
.banner{ width:100%; height: 604px; overflow: hidden; position: relative; }
.banner .swiper-pagination{ bottom: 20px; }
.banner .swiper-pagination-bullet{ background: url('../images/dot.png') no-repeat; opacity: 1; border-radius: 0; width: 16px; height: 16px; }
.banner .swiper-pagination-bullet-active{ background: url('../images/dot-active.png') no-repeat; }
/*
    HOME : Contact
*/
.home-contact{ overflow: hidden; }
.home-contact .con{ margin: 30px 0; }
.home-contact .item{ padding: 0 20px; }
.home-contact h5{ font-size: 18px; color: #363636; line-height: 20px; margin-bottom: 5px; }
.home-contact .item .line{ border-top:2px solid #f8cf03; width: 18px; margin-bottom: 5px; }
.home-contact ul{ font-size: 12px; color: #a0a0a0; line-height: 24px; }
.home-contact a{ color: #a0a0a0; }
/*
    HOME : Product
*/
.home-product{ position: relative; padding-bottom: 30px; }
.home-product .tabs-block{ position: absolute; right: 0; top: 10px; z-index: 999; }
.home-product .btn-area{ text-align: center; margin: 20px 0; }
/*
    CONTACT : Main
*/
.contact{ overflow: hidden; padding: 40px; }
.contact-main{ float: left; width: 370px; }
.contact-main .item{ margin-bottom: 40px; }
.contact-main h5{ font-size: 18px; color: #f8cf03; margin-bottom: 5px; }
.contact-main ul{ line-height: 24px; color: #a0a0a0; }
.contact-main ul a{ color: #a0a0a0; }
.contact-map{ float: right; width: 550px; border: 1px dotted #9a9a9a; padding: 15px; }
/*
    PRODUCT : Main
*/
.product-page{ margin-top: 30px; }