@charset "utf-8";
/* Global css */

/* Init style */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "微软雅黑";
    font-weight: 300;
}

input {
    outline: none;
    border: none;
    background: none;
}

.banner {
    width: 100%;
}

.banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-container {
    width: 100%;
    height: 100%;
}

.index-2 {
    position: relative;
    width: 100%;
}

.index-2 .con-box {
    position: relative;
    background: #fff;
}

.index-2 .con-box::after {
    content: '';
    /* after默认是行内元素，需要修改为块元素 */
    display: block;
    clear: both;
}

.index-2 .con-box .left {
    float: left;
    width: 60%;
    height: 100%;
}

.index-2 .con-box .left img {
    display: block;
    width: 80%;
    margin: auto;
    transition: 0.6s all;
}

.index-2 .con-box .left img:hover {
    transform: scale(1.05);
}

.index-2 .con-box .right {
    float: left;
    width: 40%;
    height: 100%;
    padding: 8% 6% 0 0;
}

.index-2 .con-box .right .paragraph {
    font-size: 15px;
    line-height: 26px;
    text-align: justify;
}

.index-2 .con-box .right a {
    display: inline-block;
    margin: 20px 0;
    font-size: 14px;
    color: #000;
}

.index-2 .con-box .right a:hover {
    text-decoration: underline;
}

.index-2 .con-box .card {
    position: absolute;
    background: #fff;
}

.index-2 .con-box .card .title {
    font-size: 60px;
    line-height: 100px;
    text-align: center;
}

.index-2 .con-box .card .list {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    text-align: center;
}

.index-2 .con-box .card .list a {
    color: #000;
    font-size: 14px;
}

.index-3 {
    position: relative;
    width: 100%;
}

.index-3 img {
    display: block;
    width: 100%;
}

.index-3 .title {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 60px;
    font-size: 60px;
    line-height: 60px;
    text-align: center;
    color: #fff;
    letter-spacing: 10px;
}

.index-4 {
    position: relative;
    width: 100%;
}

.index-4 img {
    display: block;
    width: 100%;
}

.index-4 .con-box {
    width: 100%;
    background: #fff;
}

.index-4 .con-box>h1 {
    text-align: center;
}

.index-4 .con-box>p {
    text-align: center;
}

.index-4 .con-box .min-con-box {
    position: relative;
    width: 100%;
    padding-top: 40px;
}

/* .index-4 .card{height:100%;background:#fff;}
.index-4 .card h1{text-align:center;}
.index-4 .card p{text-align:center;}
.index-4 .card a{display:block;border:1px solid #000;text-align:center;font-size:16px;color:#000;}
.index-4 .card a:hover{background:#000;color:#fff;} */

.index-5 {
    width: 100%;
    background: #d8d8d8;
}

.index-5 .list {
    width: 100%;
    overflow: hidden;
}

.index-5 .list .item {
    float: left;
    padding: 1px;
}

.index-5 .list .item .img {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.index-5 .list .item img {
    display: block;
    width: 100%;
    transition: all 0.3s;
}

.index-5 .list .item img:hover {
    transform: scale(1.05);
}

.index-5 .list .item .img div {
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    transition: all 0.3s;
    width: 200px;
    height: 200px;
}

.index-5 .list .item .img div:nth-child(2) {
    bottom: -180px;
    left: -180px;
    transform: rotate(45deg);
}

.index-5 .list .item .img div:nth-child(3) {
    top: -180px;
    right: -180px;
    transform: rotate(45deg);
}

.index-5 .list .item .img:hover div:nth-child(2) {
    bottom: -100px;
    left: -100px;
}

.index-5 .list .item .img:hover div:nth-child(3) {
    top: -100px;
    right: -100px;
}

.index-5 .img div span {
    position: absolute;
    top: 30px;
    right: 0;
    left: 0;
    margin: auto;
    transform: rotate(-45deg);
    text-align: center;
    font-size: 14px;
}

.index-6 {
    width: 100%;
}

.index-6 .box {
    width: 100%;
    background: #fff;
}

.index-6 .box>h1 {
    text-align: center;
}

.index-6 .box>p {
    text-align: center;
}

.index-6 .list {
    width: 100%;
    overflow: hidden;
    padding: 10px;
}

.index-6 .list .item {
    float: left;
    transition: all 0.3s;
}

.index-6 .list .item .img {
    width: 100%;
    overflow: hidden;
}

.index-6 .list .item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s;
}

.index-6 .list .item:hover {
    background: rgba(0, 0, 0, 0.1);
}

.index-6 .list .item:hover img {
    transform: scale(1.05);
}

.index-6 .list .item h2 {
    font-size: 15px;
    line-height: 30px;
    color: #000;
}

.index-6 .list .item span {
    font-size: 13px;
    color: #000;
}

.min-banner {
    width: 100%;
}

.min-banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-list {
    width: 100%;
    overflow: hidden;
    display:flex;
    flex-wrap:wrap;
}

.product-list .item {
    position: relative;
}
.product-list .item a
{
    display:block;
    width:100%;
    height:auto;
    overflow:hidden;
}
.product-list .item .img {
    position: relative;
    width: 100%;
    padding-bottom:66.66%;
}

.product-list .item .img::after {
    position: absolute;
    content: "";
    bottom: -10px;
    left: 0;
    right: 0;
    margin: auto;
    width: 50px;
    height: 2px;
    background: #000;
}

.product-list .item .img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position:absolute;
    top:0px;
    left:0px;
    z-index:-1;
}

.product-list .item h1 {
    font-size: 15px;
    text-align: center;
    margin-top: 15px;
    color: #000;
}

.product-list .item a::after {
    transition: all 0.3s;
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
}

.product-list .item a:hover::after {
    background: rgba(0, 0, 0, 0.2);
}

.product-view {
    padding-top: 50px;
    padding-bottom: 50px;
    width: 100%;
    margin: auto;
}

.product-view h1 {
    font-size: 18px;
    line-height: 30px;
    color: #666;
    padding: 10px 0;
}

.product-view h2 {
    position: relative;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-top: 20px;
}

.product-view h2::after {
    position: absolute;
    bottom: -2px;
    left: 0;
    content: "";
    width: 50px;
    height: 10px;
    background: #dbdbdb;
    z-index: -1;
}

.product-view .content {
    font-size: 16px;
    line-height: 30px;
    color: #666;
    padding: 10px 0;
}

.product-view .content a {
    font-size: 16px;
    color: #666;
}

.product-view .content a:hover {
    text-decoration: underline;
}

.product-view .img {
    max-width: 100%;
    margin: auto;
}

.product-view .img img {
    display: block;
    width: 100%;
    height: 100%;
}

.view-page {
    width: 100%;
    overflow: hidden;
    padding: 50px 0;
}

.view-page a {
    font-size: 16px;
    color: #000;
}

.view-page .prev {
    float: left;
}

.view-page .prev span {
    padding-right: 10px;
    font-size: 20px;
}

.view-page .next {
    float: right;
}

.view-page .next span {
    padding-left: 10px;
    font-size: 20px;
}

.view-page a:hover i {
    text-decoration: underline;
}

.Pagination__Nav {
    width: 100%;
    text-align: center;
    padding: 50px 0;
}

.Pagination__Nav span {
    padding: 5px 10px;
    background: #ccc;
    color: #000;
}

.Pagination__Nav a {
    padding: 5px 10px;
    background: #ccc;
    color: #000;
}

.Pagination__Nav .is-active {
    background: #000;
    color: #fff;
}

.div_box {
    min-height: 500px !important;
}

.article-list {
    width: 100%;
    overflow: hidden;
    display:flex;
    flex-wrap:wrap;
}

.article-list .item {
    position: relative;
}

.article-list .item a
{
    display:block;
    width:100%;
    height:auto;
    overflow:hidden;
}
.article-list .item .img {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-bottom:62.5%;
    
}
/* .article-list .item .img::after{position:absolute;content:"";bottom:-10px;left:0;right:0;margin:auto;width:50px;height:2px;background:#000;} */
.article-list .item .img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s;
    position:absolute;
    top:0px;
    left:0px;
}

.article-list .item h1 {
    font-size: 15px;
    text-align: left;
    margin-top: 10px;
    color: #000;
}

.article-list .item i {
    font-size: 12px;
    text-align: left;
    margin-top: 10px;
    color: #666;
}

.article-list .item a::after {
    transition: all 0.3s;
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
}

.article-list .item a:hover::after {
    background: rgba(0, 0, 0, 0.2);
}

.article-list .item a:hover .img img {
    transform: scale(1.05);
}

.article-view {
    width: 100%;
    margin: auto;
    text-align: justify;
}

.article-view h1 {
    text-align: center;
}

.article-view .info {
    text-align: center;
    font-size: 13px;
}

.article-view .content {
    font-size: 16px;
    line-height: 30px;
}

.article-view .content img {
    display: block;
    max-width: 100%;
}

.article-case-content {
    font-size: 16px;
    text-align: justify;
    line-height: 30px;
}

.store-list {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
}

.store-list .item {
    float: left;
    background: #333;
    display: flex;
}

.store-list .item a {
    display: flex;
    flex-direction: column;
}

.store-list .item .img {
    width: 100%;
    overflow: hidden;
    flex-grow: 1;
}

.store-list .item .img img {
    display: block;
    width: 100%;
    height: 100%;
    transition: all 0.3s;
}

.store-list .item h1 {
    font-size: 16px;
    color: #fff;
    padding: 10px;
}

.store-list .item:hover img {
    transform: scale(1.05);
}

.about-page {}

.about-page h1 {
    font-size: 30px;
    line-height: 30px;
    padding-bottom: 30px;
}

.about-page .about-content {
    font-size: 16px;
    line-height: 30px;
    text-align: justify;
}

.about-page .about-content img {
    display: block;
    max-width: 100%;
}

.page-show {
    width: 100%;
    margin: auto;
}

.page-show h1 {
    text-align: center;
}

.page-show .ex-title {
    text-align: center;
}

.page-show .page-content img {
    display: inline-block;
    max-width: 100%;
    margin-top: 20px;
}

.page-show .page-content {
    font-size: 16px;
    line-height: 30px;
}

.page-show .page-content-pc {
    width: 100%;
    overflow: hidden;
    padding: 50px 0;
}

.page-show .page-content-pc .img {
    width: 48%;
    float: left;
}

.page-show .page-content-pc .img img {
    width: 100%;
}

.page-show .page-content-pc .content {
    width: 49%;
    float: right;
    font-size: 14px;
    line-height: 30px;
}

.page-show .page-content-pc .content img {
    display: none;
}

.page-show .content .title {
    padding-bottom: 30px;
}

.page-show .content .title h2 {
    font-size: 40px;
}

.page-show .content .title p {
    font-size: 20px;
}

.album-history {
    width: 100%;
    max-width: 1200px;
    margin: auto;
}

.album-history .top {
    width: 100%;
    overflow: hidden;
}

.album-history .top .title {
    float: left;
    width: 35%;
}

.album-history .top .title h1 {
    font-size: 30px;
    line-height: 40px;
}

.album-history .top .summary {
    float: right;
    width: 65%;
}

.album-history .top .summary h2 {
    font-size: 22px;
}

.album-history .top .summary p {
    font-size: 16px;
    padding-top: 30px;
}

.album-history .history-list {
    width: 100%;
}

.album-history .history-list::after {
    content: '';
    clear: both;
    display: block;
}

.album-history .history-list li {
    float: left;
    background: #333;
    box-shadow: 0 0 5px #333;
    transition: 0.3s all;
}

.album-history .history-list li .img {
    width: 100%;
    overflow: hidden;
}

.album-history .history-list li img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s all;
}

.album-history .history-list li .content-box h1 {
    color: #fff;
}

.album-history .history-list li .content-box .content {
    color: #fff;
}

.album-history .history-list li:hover {
    background: #000;
}

.album-history .history-list li:hover .img img {
    transform: scale(1.1, 1.1);
}

.album-story {
    width: 100%;
    max-width: 1200px;
    margin: auto;
}

.album-story h1 {
    text-align: center;
}

.album-story ul {
    width: 100%;
}

.album-story ul li {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-bottom: 50px;
}

.album-story ul li:nth-child(1)::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 20px;
    height: 150px;
    background: rgba(231, 27, 38, 0.08);
    border-radius: 10px;
}

.album-story ul li:nth-child(2)::before {
    position: absolute;
    top: 80px;
    right: 0;
    content: "FANORE";
    width: 400px;
    height: 100px;
    line-height: 100px;
    /* background:rgba(231, 27, 38, 0.2); */
    font-size: 90px;
    font-weight: bold;
    transform: rotate(-45deg);
    color: rgba(231, 27, 38, 0.08);
}

/* .album-story ul li:nth-child(3)::before{position:absolute;top:0;left:0;content:"";width:20px;height:150px;background:rgba(231, 27, 38, 0.2);border-radius:10px;} */
.album-story li .content-box {
    height: 100%;
}

.album-story .odd .content-box {
    float: left;
}

.album-story .even .content-box {
    float: right;
}

.album-story li .content-box h2 {
    font-size: 20px;
    font-weight: 500;
}

.album-story li .content-box .content {
    position: relative;
    font-size: 14px;
    line-height: 40px;
    text-align: justify;
}

.album-story li .img {
    height: 100%;
    overflow: hidden;
}

.album-story .odd .img {
    float: right;
}

.album-story .even .img {
    float: left;
}

.album-story li .img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-contact {
    width: 100%;
    max-width: 900px;
    margin: auto;
    padding-bottom: 50px;
    position: relative;
}

.page-contact h1 {
    margin-top: 80px;
}

.page-contact p {
    margin-top: 10px;
}

.page-contact .text-1 {
    margin-top: 10px;
    font-size: 15px;
    color: #000;
}

.page-contact .text-1 a {
    font-size: 15px;
    color: #000;
    margin-left: 20px;
}

.page-contact .text-1 a:nth-child(1) {
    margin: 0;
}

.page-contact .qrcode {
    position: absolute;
    right: 150px;
    top: 150px;
    text-align: center;
    font-size: 14px;
}

.page-contact .qrcode img {
    width: 140px;
    display: block;
    margin-bottom: 10px;
}

@media screen and (max-width: 1024px) and (min-width:0px) {

    /* 移动端的尺寸 */
    .page-contact .qrcode {
        position: unset;
        margin-top: 15px;
        display: inline-block;
    }
}

.page-contact .form {
    width: 100%;
}

.page-contact .form .input-1 {
    width: 100%;
}

.page-contact .form .input-1>div {
    padding-left: 20px;
}

.page-contact .form .input-1>div:nth-child(1) {
    padding: 0;
}

.page-contact .form .input-1>div p {
    font-size: 14px;
}

.page-contact .form .input-1>div input {
    width: 100%;
    height: 35px;
    border: 1px solid #000;
    padding: 0 10px;
    font-size: 14px;
}

.page-contact .form .input-1>div textarea {
    background: none;
    border: 1px solid #000;
    width: 100%;
    height: 150px;
    padding: 10px;
    font-size: 14px;
    color: #000;
}

.page-contact .form .submit {
    width: 200px;
    height: 35px;
    line-height: 35px;
    border: 1px solid #000;
    font-size: 14px;
    color: #000;
    text-align: center;
    cursor: pointer;
}

.album-story-pc {
    width: 100%;
    max-width: 900px;
    margin: auto;
    overflow: hidden;
    padding: 80px 0;
}

.album-story-pc .img {
    width: 48%;
    float: left;
}

.album-story-pc .img img {
    width: 100%;
}

.album-story-pc .content {
    width: 40%;
    float: right;
    font-size: 15px;
    line-height: 24px;
}

.album-story-pc .content .title {
    padding-bottom: 40px;
}

.album-story-pc .content .title h1 {
    font-size: 30px;
    line-height: 40px;
}

.album-story-pc .content .title p {
    font-size: 20px;
    margin-top: 5px;
}

.article-case-list {
    width: 100%;
    overflow: hidden;
    display:flex;
    flex-wrap:wrap;
}

.article-case-list .item {
    transition: all 0.3s;
}

.article-case-list .item .img {
    width: 100%;
    overflow: hidden;
    position:relative;
    padding-bottom:75%;
}

.article-case-list .item .img img {
    width: 100%;
    transition: all 0.3s;
    position:absolute;
    top:0px;
    left:0px;
    height:100%;
    object-fit: cover;
}

.article-case-list .item h1 {
    font-size: 16px;
    color: #000;
    padding: 10px 0 0 0;
}

.article-case-list .item i {
    font-size: 12px;
    color: #666;
}

.article-case-list .item:hover {
    background: #fff;
    box-shadow: 0px 0px 5px #ccc;
}

.article-case-list .item:hover img {
    transform: scale(1.05);
}