/*------------------------------------------------------
    product : #17091103 (Ying Template 1.0)
    author : Jason
    date : 2017-9-28
------------------------------------------------------*/




/*------------------------------------------------------
    initialize
------------------------------------------------------*/
/*
    common
*/
body{ font-family: Arial,Verdana,Helvetica,sans-serif,"Microsoft JhengHei","Microsoft YaHei","SimHei"; font-size: 16px; }
h1,h2,h3,h4,h5,h6,ul,ol.li{ list-style: none; margin: 0; padding: 0; }
a,a:hover,a:focus{ text-decoration: none; transition: all .3s; }




/*------------------------------------------------------
    components
------------------------------------------------------*/


/*
    popupQRcode
*/
#popupQRcode figure{ text-align: center; }
#popupQRcode figure img{ width: 160px; }


/*
    title
*/
.g-title{ text-align: center; font-size: 4rem; color: #151515; }

.g-title-3in1{ overflow: hidden; }
.g-title-3in1 .box-main{ display: flex; align-items: center;  justify-content: space-between;  text-align: left; }
.g-title-3in1 h2{ font-size: 5.5rem; color: #151515; }
.g-title-3in1 .words{ color: #9b9b9b; font-weight: 400; font-size: 24px; font-style: italic; }

.g-title-lg{ font-size: 4.6rem; font-weight: 700; color: #444444; line-height: 5.6rem; position: relative; padding-left: 120px; }
.g-title-lg:before{ position: absolute; width: 100px; height: 4px; background: #444444; content: ''; top: 50%; left: 0; margin-top: -2px; }

.g-title-lg-xs{ font-size: 3rem; line-height: 3.6rem; padding-left: 60px;  }
.g-title-lg-xs:before{ width: 50px;}

.g-title-sm{ color: #393a3c; font-size: 1.8rem; border-bottom: 1px solid #eee; padding: 1rem 0; }


/*
    background
*/
.bg-gray2{ background: #393a3c; }


/*
    margins and paddings helper
*/
.mt-80{ margin-top: 80px; }
.mt-40{ margin-top: 40px; }
.mb-15{ margin-bottom: 15px; }
.mt-15{ margin-top: 15px; }
.pb-40{ padding-bottom: 40px; }


/*
    buttons
*/
.btn-primary{ display: inline-block; color: #151515; border:2px solid #ebebeb; background-color: transparent; padding: 10px 50px; border-radius: 0; transition: all .3s; font-size: 1.6rem; }
.btn-primary:hover , .btn-primary:focus{ color: #FFF; background: #3f3e40; transition: all .3s; border-color: #3f3e40; }

.btn-secondary{display: inline-block; color: #FFF; border:2px solid #e25e90;padding: 10px 50px; border-radius: 0; transition: all .3s; font-size: 1.6rem; background: #e25e90; }
.btn-secondary:hover, .btn-secondary:focus{color: #FFF; background: #dac390; transition: all .3s; border-color: #3f3e40; }


/*
    useThumb
*/
.useThumb{}


/*
    boxes
*/
.box-main{ width: 1000px; margin: 0 auto; }


/*
    b2t
*/
.b2t{ cursor: pointer; width: 50px;  height: 50px; font-size: 24px;  line-height: 46px;  color: #FFF;  background: #e25e90;  border-radius: 50%;  position: fixed; right: 15px;  bottom: 15px;  overflow: hidden;  text-align: center;  text-decoration: none;  z-index: 20;  transition: .3s all ease;    transform: translateY(100px); }
.b2t.active{ transform: translateY(0); }
.b2t:hover{ background: #dac390; transition: .3s all; box-shadow: 5px 0 5px rgba(0,0,0,0.125); }


/*
    topbar-social
*/
.topbar-social{ color: #DCDCDC; float: right; }
.topbar-social ul{ display: flex; height: 80px; align-items: center; }
.topbar-social ul>li+li{ margin-left: 15px; font-size: 20px; }
.topbar-social a{ color: #FFF; display: inline-block; background: #babcba; width: 30px; height: 30px; text-align: center; line-height: 30px; border-radius: 100%; }
.topbar-social a:hover{ color: #FFF; background: #e25e90; transition: .3s all;  }


/*
    brand-logo
*/
.brand-logo{ text-align: center; display: block; overflow: hidden; float: left; }
.brand-logo a{ display: flex; align-items: center; height: 80px; }
.brand-logo img{ display: inline; margin-top: -10px; }


/*
    top-navbar
*/
.top-navbar{ height: 80px; position: relative; margin-left: 300px; }
.top-navbar .box-main{ position: relative; }


/*
    menu
*/
.menu{ float: left; }
.menu>li{ float: left; position: relative; }
.menu>li>a{ line-height: 80px; padding: 0 25px; color: #393a3c; display: block; position: relative; }
.menu>li>a:hover ,.menu>li.active>a { color: #e25e90; transition: all .3s; }
.menu .has-child>a>span{ position: relative; }
.menu .has-child>a>span:after{ font-family: FontAwesome; content: '\f107'; position: absolute; right: -15px; top: 50%; line-height: 20px; margin-top: -10px; color: #393a3c; }
.menu .has-child.active>a>span:after , .menu .has-child.hover>a>span:after{ transform: rotate(180deg); transition: all .3s; color: #e25e90; }


.menu .sub-menu{ z-index: 1; position: absolute; width: 240px; visibility: hidden;  opacity: 0;  transition: 0.3s;  background: #fff; left: 0; top: 80px; border-top: 1px solid #e5e7e9; }
.menu .sub-menu li{ position: relative; }
.menu .sub-menu li+li { border-top: 1px solid #e5e7e9; }
.menu .sub-menu a{ color: #393a3c; display: block; position: relative; padding: 15px; }
.menu .sub-menu a:hover{ color: #e25e90;  }
.menu .sub-menu a:hover span{ padding-left: 20px; transition: all .3s; }
.menu .sub-menu a span{ position: relative; display: block; transition: all .3s; }
.menu .sub-menu a span:after{ opacity: 0; visibility: hidden; position: absolute; font-family: FontAwesome; content: '\f105'; left: 0; top: 50%; line-height: 16px; margin-top: -8px; }
.menu .sub-menu a:hover span:after{  visibility: visible; opacity: 1; transition: all .3s; }


.menu>li.active>.sub-menu{ opacity: 1; visibility: visible; transition: all .3s; }


/*
    slicknav_menu
*/
.slicknav_menu{ display: none; }


/*
    main-slides
*/
.main-slides{ height: 770px; position: relative; }
.main-slides .bx-wrapper{ box-shadow: none; border: 0; margin: 0; }
.main-slides .bx-prev , .main-slides .bx-prev:hover , .main-slides .bx-next , .main-slides .bx-next:hover{ background: none; }
.main-slides .bx-controls-direction a{ transition: all .3s; text-indent: 0; width: 120px; height: auto; padding-bottom: 10px;  font-size: 24px; color: #151515 }
.main-slides .bx-controls-direction a:after{  content: '';  position: absolute;  left: 0;  right: 0; bottom: -5px;  border-bottom: 3px solid #c9ddc9;  }
.main-slides .bx-prev{ text-align: right; }
.main-slides .bx-next{ text-align: left; }
.main-slides .bx-prev:hover , .main-slides .bx-next:hover{ color: #e25e90; transition: all .3s; }
.main-slides .bx-prev:hover{ padding-right: 25px; }
.main-slides .bx-next:hover{ padding-left: 25px; }
.main-slides .slide{ background: no-repeat center center; background-size: cover; height: 770px; }
.main-slides .caption{ padding: 250px 0; max-width: 400px; }
.main-slides .caption h2{ color: #151515; font-size: 5.5rem; }
.main-slides .caption .con{ margin: 2rem 0; color: #9b9b9b; font-size: 1.6rem; }
.main-slides .caption .link-area a{ color: #151515;}
.main-slides .caption .link-area a:hover{ color: #e25e90; transition: all .3s; }
.main-slides .bx-pager{ display: none; }
.main-slides .bg{ display: none; }

.slide-box {
    width: 100%;
}
.slide-box .caption{ height: 400px;  max-width: 70%; padding-top: 180px; }
.slide-box .caption h2{ color: #FFF; font-size: 5.5rem; }
.slide-box .caption .con{ margin: 2rem 0; color: #FFF; font-size: 1.6rem; }
.slide-box .caption .btn-more{ display: inline-block; color: #fff;  transition: all .3s; font-size: 1.8rem; }
.slide-box .caption .btn-more:hover{color: #e25e90; transition: all .3s; }

.carousel-inner .item {
    width: 100%;
    height: 720px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


/*
    footer
*/
.footer{ overflow: hidden; background: #2c2c2c; color: #6c6c6c; }

.footer-heading{  font-size: 14px;  font-weight: 900;  letter-spacing: .24em;  text-transform: uppercase;  color: #fff;  }

.footer-cell ul{ margin-top: 20px; font-size: 14px; }
.footer-cell ul li+li{ margin-top: 12px; }
.footer-cell a{ color:#6c6c6c; }
.footer-cell a:hover{ color: #FFF; transition: all .3s; }

.footer-copyright{ border-top: 1px solid #3c3c3c; font-size: 12px; color: #6c6c6c; padding: 15px 0; text-align: center; }
.footer-copyright a{ color: #6c6c6c; }


/*
    box-service
*/
.box-service{ padding: 80px 0; background: url('../images/bg-image-7.jpg') no-repeat center center; background-size: cover }
.box-service .item{ text-align: center; }
.box-service .item a{ color: #151515; }
.box-service .item h5{ font-size: 2rem; margin-top: 15px; }
.box-service .item a:hover{ color: #dac390; }


/*
    box-case
*/
.box-case{ padding: 80px 0; }
.box-case .item{ margin-top: 40px; }
.box-case .item a{ display: block; border: 11px solid #f2f3f8; overflow: hidden; position: relative; }
.box-case .item figure{ max-width: 326px; height: 400px; overflow: hidden; }
.box-case .item .con{ opacity: 0; visibility: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%; align-items: center; display: flex;}
.box-case .item .con:before{ content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #000; opacity: .5;}
.box-case .item a:hover .con{ opacity: 1; visibility: visible; transition: .3s all; }
.box-case .item .con>div{ padding: 15px; position: relative; color: #FFF; text-align: center; }
.box-case .item .con h5{ margin-bottom: 15px; font-size: 1.8rem; }
.box-case .item .con p{ font-size: 1.4rem; }


/*
    subpage-top
*/
.subpage-top{ padding: 30px 0; background: url('../images/bg-image-1.jpg') no-repeat center center; background-size: cover; overflow: hidden; clear: both; position: relative; }
.subpage-top h2{ padding: 100px 0; text-align: center; font-size: 5rem; color: #FFF; }


/*
    page-nav
*/
.page-nav{ text-align: center; }
.page-nav li{ display: inline-block; font-size: 14px; padding: 0 15px; }
.page-nav a{ color: #dac390; position: relative; }
.page-nav a:hover{ color: #15aecf; text-decoration: underline; }
.page-nav a:after{ font-family: FontAwesome; content: '\f105'; position: absolute; right: -20px; top:0; color: #c0c0c0;  }
.page-nav span{ color: #c0c0c0; }

/*
    single-post
*/
.single-post{ padding: 80px 0; overflow: hidden; }
.single-post img{ max-width: 100%; }
.single-post p{ color: #777; }
.single-post .meta{ color: #777; font-size: 14px; margin-bottom: 40px; }
.single-post .meta span+span{ margin-left: 30px; }

/*
    g-tabs
*/
.g-tabs{ text-align: center; border-bottom: 1px solid #dcdcdc; font-size: 1.4rem; display: inline-block; }
.g-tabs li{ display: inline-block; }
.g-tabs a{ color: #777; display: block; padding:15px; position: relative; }
.g-tabs .active a , .g-tabs a:hover{ color: #222; }
.g-tabs .active a:after , .g-tabs a:hover:after{ transition: all .3s; position: absolute; content: ''; width: 100%; height: 1px; background: #e25e90; bottom: 0; left: 0; }

/*
    section-double
*/
.section-double{ overflow: hidden; padding: 80px 0; }
.section-double .unit-left{ float: left; width: 680px; }
.section-double .unit-right{ float: right; width: 280px; }


/*
    search
*/
.search{ background: #f0f0f0; overflow: hidden; }
.search .con{ margin-right: 80px; }
.search .txt{ height: 44px; border: 0; background: none; outline: none; width: 100%; padding: 0 15px; }
.search .btn{ float: right; width: 80px; color: #FFF; text-align: center; background: #e25e90; border-color: #e25e90; height: 44px; border-radius: 0; }


/*
    list-category
*/
.list-category li{ line-height: 3.6rem; }
.list-category a{ color: #15aecf; font-size: 1.4rem; position: relative; padding: 0 30px; display: block; }
.list-category a:before{ position: absolute; font-family: FontAwesome; content: '\f101'; color: #bfbfbf; left: 10px; top: 0; font-size: 1.4rem; }
.list-category a:hover{ background: #f6f6f6; }

.product-category .btn-area{ overflow: hidden;  margin-top: 15px; }
.product-category .btn{ font-size: 1.4rem; padding: 5px 20px; }


/*
    pagination
*/
.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover{ background: #e25e90; border-color: #e25e90; }
.pagination>li>a, .pagination>li>span{ color: #e25e90; }





/*------------------------------------------------------
    pages
------------------------------------------------------*/


/*
    list-download
*/
.list-download th{ background: #e25e90; color: #FFF; }
.list-download td{ color: rgb(119, 119, 119); }
.list-download>tbody>tr>td,
.list-download>tbody>tr>th,
.list-download>tfoot>tr>td,
.list-download>tfoot>tr>th,
.list-download>thead>tr>td,
.list-download>thead>tr>th{ padding: 13px 23px; vertical-align: middle; }



/*
    box-contact-lg
*/
.box-contact-lg{ padding: 140px 0; }
.box-contact-lg .contact-words{ color: #777; margin-top: 60px; }


/*
    contact-form
*/
.contact-form{ margin-top: 60px; }
.contact-form .item{ margin-bottom: 25px; overflow: hidden; }
.contact-form .btn{ padding: 15px 50px;}
.contact-form .txt{ border: none; width: 100%; background: #f2f3f5; -webkit-appearance: none;  line-height: 1;  padding: 10px 14px;  color: #393a3c;  height: 51px; }
.contact-form .txt-mul{ height: auto; }
.contact-form label{ font-size: 1.2rem; color:#777777; }


/*
    contact-social
*/
.contact-social a{ background: #777777; display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; color: #FFF; border-radius: 100%; }
.contact-social a:hover{ background: #dac390; }


/*
    contact-ways
*/
.contact-ways{ display: flex; }
.contact-ways .icon-area{ flex: 0 0 auto; color: #e25e90; font-size: 2rem; text-align: center; width: 30px; line-height: 2rem; }
.contact-ways .con{ flex: 0 1 auto; padding-left: 15px; color: #777; font-size: 1.4rem; line-height: 2rem; }
.contact-ways a{color: #777;}
.contact-ways a:hover{ color: #15aecf; }


/*
    page-404
*/
.page-404{ text-align: center; }
.page-404 .logo-area{ padding: 6rem 0; }
.page-404 h1{ font-size: 20rem; color: #dac390; font-family: Verdana; }
.page-404 h6{ font-size: 4rem; margin-top: 60px; color: #FFF; }
.page-404 .con{ color: #bfbfbf; font-size: 2.4rem; margin: 30px 0; }
.page-404 .btn-area{ margin: 60px 0; }
.page-404 .btn-area .btn{ padding: 20px 60px; font-size: 2.4rem; }
.page-404 .footer-area{ color: #777; }
.page-404 .footer-area a{ color: #777; }


/*
    list-gallery
*/
.list-gallery{ overflow: hidden; }
.list-gallery .item{ margin-top: 30px; }
.list-gallery a{ display: block; position: relative; }
.list-gallery figure{ width: 100%; height: 220px; }
.list-gallery .con{ visibility: hidden; opacity: 0; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; }
.list-gallery .con:before{ content: ''; background: #000; opacity: .5; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.list-gallery .con>div{ position: relative; text-align: center; padding: 15px; width: 100%; }
.list-gallery a:hover .con{ visibility: visible; opacity: 1; color: #FFF; font-size: 40px; }

.list-gallery .main {padding: 10px;overflow: hidden;}

.list-gallery h5 {
    color: #777;
    font-size: 18px;
    line-height: 22px;
    height: 48px;
    overflow: hidden;
    font-weight: 700;
}
/*
    list-news-lg
*/
.list-news-lg .item{ margin-top: 30px; overflow: hidden; }
.list-news-lg a{ display: block; background: #FFF; border: 1px solid #e9e9e9; }
.list-news-lg figure{ width: 100%; height: 220px; }
.list-news-lg .main{ padding: 15px; overflow: hidden; }
.list-news-lg .date , .list-news-lg .tags{ color: #777; font-size: 14px; }
.list-news-lg .date i{ color: #f9ad40; margin-right: 10px; }
.list-news-lg h5{ color:#777; font-size: 18px; line-height: 24px; height: 48px; overflow: hidden; font-weight: 700; margin: 15px 0; }
.list-news-lg .con{ color: #393a3c; font-size: 14px; margin-bottom: 15px; line-height: 18px; height: 54px; overflow: hidden; }


/*
    list-product
*/
.list-product{ overflow: hidden; }
.list-product figure{ width: 100%; height: 260px; overflow: hidden; margin: 0 auto; box-shadow: 5px 5px 5px rgba(0,0,0,0.125); }
.list-product .item{ margin-top: 30px; }
.list-product .item a{ display: block; }
.list-product .item a:hover figure{ box-shadow: none; transition: all .3s; }
.list-product h6{ color: #15aecf; font-size: 1.6rem; line-height: 1.8rem; height: 3.6rem; overflow: hidden; text-align: center; padding: 15px 0; }
.list-product .btn-area{ overflow: hidden;  margin-top: 15px; }
.list-product .btn{ font-size: 1.4rem; padding: 5px 20px;}


/*
    product-detail
*/
.product-detail{ overflow: hidden; margin-bottom: 60px; }
.product-detail figure{ float: left; width: 280px; height: 380px; }
.product-detail .main{ margin-left: 320px; }
.product-detail .con{ color: #777; font-size: 14px; line-height: 24px; }