@charset "utf-8";

.main-warp {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3125rem;
    max-width: 75rem;
    margin: 0 auto;
}

.row-first {
    display: flex;
    width: 100%;
    gap: 0.3125rem;
    margin-bottom: 0.3125rem;
}

.idx-p1 {
    width: calc(25% - 0.234375rem);
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
}

.idx-p1 .sub-btn-down {
    width: 100%;
    min-height: 8.4375rem;
}

.idx-p1 .btn-row {
    display: flex;
    gap: 0.3125rem;
}

.idx-p1 .btn-row .idx-down {
    flex: 1;
    height: 3.75rem;
    margin-bottom: 0;
}

.idx-p2 {
    width: calc(50% - 0.15625rem);
    height: 16.5625rem;
    overflow: hidden;
}

.silder-box {
    width: 100%;
    height: 100%;
    position: relative;
}

.silder-box ul {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.silder-box ul li {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
}

.silder-box ul li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.silder-box .number {
    position: absolute;
    left: 1.5625rem;
    bottom: 0.5625rem;
    z-index: 11;
}

.idx-p3 {
    width: calc(25% - 0.234375rem);
    height: 16.5625rem;
    overflow: hidden;
    padding: 0.9375rem 1.25rem;
    background-color: #101010;
    box-sizing: border-box;
}

.idx-p3 .hd {
    border-bottom: 0.0625rem solid #4f4442;
    color: #c9b075;
    height: 1.6875rem;
    padding-top: 0.9375rem;
    position: relative;
    margin-bottom: 0.75rem;
}

.idx-p3 h2 {
    font: 1rem/1.125rem "微软雅黑";
}

.idx-p3 .more {
    top: 0.9375rem;
    right: 0;
}

.idx-p3 .idx-news .first a {
    width: 100%;
    color: #af8a33;
    font-size: 0.875rem;
    font-weight: 700;
}

.idx-p3 .idx-news .first span {
    display: none;
}

.idx-p4 {
    width: 100%;
    flex: 0 0 100%;
    height: 18.125rem;
    overflow: hidden;
    margin-bottom: 2.5rem;
}

.idx-p4 ul {
    display: flex;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.idx-p4 li {
    width: 25%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.idx-p4 a {
    display: block;
    width: 100%;
    height: 100%;
}

.idx-p4 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease-in;
}

.idx-p4 .img-blank {
    width: 100%;
    height: 6.875rem;
    bottom: -2.5rem;
}

.idx-p4 p {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4.375rem;
    overflow: hidden;
    padding: 0.625rem 1.25rem;
    z-index: 5;
    transition: all 0.3s ease-in;
    box-sizing: border-box;
}

.idx-p4 p strong {
    color: #efcc87;
    display: block;
    font-size: 1.25rem;
    height: 2rem;
    line-height: 2rem;
    font-weight: 400;
    font-family: "微软雅黑";
    transition: color 0.3s ease-in;
}

.idx-p4 p span {
    color: #706553;
    display: block;
    font-size: 0.875rem;
    height: 1.25rem;
    line-height: 1.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.idx-p4 .more {
    display: block;
    width: 6.3125rem;
    height: 1.4375rem;
    line-height: 1.4375rem;
    font-size: 0.875rem;
    color: #fff;
    text-align: center;
    background: url(../images/idx-p4-more.png) center top no-repeat;
    margin-top: 0.3125rem;
    background-size: contain;
    opacity: 0;
    transform: translateY(1rem);
    transition: all 0.3s ease-in;
}

.idx-p4 a:hover img {
    transform: scale(1.1);
}

.idx-p4 a:hover p {
    height: 6.25rem;
}

.idx-p4 a:hover strong {
    color: #af8a33;
}

.idx-p4 a:hover .img-blank {
    bottom: 0;
}

.idx-p4 a:hover .more {
    opacity: 1;
    transform: translateY(0);
}

.row-third {
    display: flex;
    width: 100%;
    max-width: 75rem;
    gap: 0.3125rem;
    margin-bottom: 0.3125rem;
    box-sizing: border-box;
}

.idx-p5, .idx-p6, .idx-p7 {
    flex: 1;
    min-width: 0;
    height: 15.9375rem;
    overflow: hidden;
}

.idx-p5 .bd, .idx-p6 .bd, .idx-p7 .bd {
    height: calc(100% - 2.8125rem);
    background-color: #101010;
}

.idx-p5 .hd, .idx-p6 .hd, .idx-p7 .hd, .idx-p8 .hd {
    height: 2.125rem;
    padding-top: 0.6875rem;
    position: relative;
}

.idx-p5 h2, .idx-p6 h2, .idx-p7 h2, .idx-p8 h2 {
    border-left: 0.3125rem solid #873228;
    font: 1.25rem/1.375rem "微软雅黑";
    color: #c2a971;
    padding-left: 0.5625rem;
}

.img-scroll {
    position: relative;
    width: 100%;
    height: 100%;
}

.img-scroll .prev, .img-scroll .next {
    width: 1.375rem;
    height: 2.6875rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
    background-image: url(../images/idx-scroll-jt.png);
    background-size: contain;
}

.img-scroll .prev {
    left: 0;
    background-position: left top;
}

.img-scroll .next {
    right: 0;
    background-position: right top;
}

.img-scroll .prev:hover {
    background-position: left bottom;
}

.img-scroll .next:hover {
    background-position: right bottom;
}

.img-list {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.img-list ul {
    width: 100%;
    height: 100%;
}

.img-list li {
    width: 100%;
    height: 100%;
    text-align: center;
}

.img-list li div {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-list li img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.idx-p6 .con {
    padding: 0.9375rem 0 0 1.25rem;
}

.idx-p6 p {
    line-height: 1.5rem;
    margin-bottom: 0.3125rem;
}

.idx-p6 strong {
    color: #968663;
    margin-right: 0.5rem;
}

.idx-p6 a {
    color: #706553;
    margin-left: 0.875rem;
}

.idx-p6 a:hover {
    color: #f40;
}

.idx-p7 .idx-news {
    padding: 0.9375rem 0 0 1.25rem;
}

.idx-p7 .idx-news li {
    width: 100%;
}

.idx-p7 .idx-news li a {
    width: 80%;
}

.idx-p8 {
    width: 100%;
    max-width: 75rem;
    height: 20.5rem;
    overflow: hidden;
    box-sizing: border-box;
    margin: 0 auto;
}

.idx-p8 ul {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 0.25rem;
}

.idx-p8 li {
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.idx-p8 li div {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.idx-p8 li a {
    color: #c2a971;
}

.idx-p8 img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    transform: scale(1);
    transition: transform 0.8s ease-in;
}

.idx-p8 .img-blank {
    width: 100%;
    height: 3.9375rem;
    z-index: 2;
    opacity: 0.7;
}

.idx-p8 p {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    color: #c2a971;
    padding: 1.1875rem 0;
    z-index: 3;
    text-align: center;
    transition: color 0.5s ease-in;
}

.idx-p8 p strong {
    font-weight: 400;
    font: 1.25rem/1.625rem "微软雅黑";
    white-space: nowrap;
}

.idx-p8 a:hover p {
    color: #af8a33;
}

.idx-p8 a:hover img {
    transform: scale(1.1);
}

@media (min-width: 48rem) and (max-width: 74.9375rem) {
    .warp {
        width: 100%;
        padding: 0 1.25rem;
        box-sizing: border-box;
    }
    
    .main-warp {
        width: 100%;
        padding: 0;
    }
    
    .row-first {
        flex-wrap: wrap;
        padding: 0 0.3125rem;
    }
    
    .idx-p1 {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 0.3125rem;
    }
    
    .idx-p1 .sub-btn-down {
        width: 100%;
        max-width: none;
        min-height: 7.5rem;
        grid-row: 1 / 3;
    }
    
    .idx-p1 .btn-row {
        width: 100%;
        flex-direction: row;
        gap: 0.3125rem;
    }
    
    .idx-p1 .btn-row .idx-down {
        flex: 1;
        height: 3.5rem;
        font-size: 0.875rem;
        margin: 0;
    }
    
    .idx-p2 {
        width: calc(66.666% - 0.15625rem);
        height: 14rem;
    }
    
    .idx-p3 {
        width: calc(33.333% - 0.15625rem);
        height: 14rem;
        padding: 0.75rem 1rem;
    }
    
    .idx-p4 {
        height: auto;
        min-height: 28rem;
    }
    
    .idx-p4 ul {
        flex-wrap: wrap;
        height: auto;
    }
    
    .idx-p4 li {
        width: 50%;
        height: 14rem;
    }
    
    .row-third {
        flex-wrap: wrap;
        padding: 0 0.3125rem;
    }
    
    .idx-p5 {
        flex: 0 0 100%;
        width: 100%;
        height: 12rem;
        margin-bottom: 0.3125rem;
    }
    
    .idx-p6 {
        flex: 0 0 calc(50% - 0.15625rem);
        width: calc(50% - 0.15625rem);
        height: 15rem;
    }
    
    .idx-p7 {
        flex: 0 0 calc(50% - 0.15625rem);
        width: calc(50% - 0.15625rem);
        height: 15rem;
    }
    
    .idx-p6 .bd, .idx-p7 .bd {
        height: calc(100% - 2.125rem);
        overflow: hidden;
    }
    
    .idx-p6 .con {
        display: flex;
        flex-wrap: wrap;
        padding: 0.625rem 0 0 0.9375rem;
    }
    
    .idx-p6 .con p {
        width: 50%;
        padding-right: 0.625rem;
        box-sizing: border-box;
        line-height: 1.25rem;
        margin-bottom: 0.25rem;
    }
    
    .idx-p7 .idx-news {
        padding: 0.625rem 0 0 0.9375rem;
    }
    
    .idx-p7 .idx-news li {
        line-height: 1.25rem;
        margin-bottom: 0.25rem;
    }
    
    .idx-p8 {
        width: 100%;
        height: auto;
        min-height: 22rem;
        max-width: 75rem;
        margin: 0 auto;
    }
    
    .idx-p8 .bd {
        height: auto;
    }
    
    .idx-p8 ul {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.25rem;
        width: 100%;
        height: auto !important;
    }
    
    .idx-p8 ul li,
    .idx-p8 li {
        width: 100% !important;
        height: 10.5rem !important;
        box-sizing: border-box;
        overflow: hidden;
    }
}

@media (max-width: 47.98rem) {
    .warp {
        width: 100%;
        padding: 0 0.625rem;
        box-sizing: border-box;
    }
    
    .main-warp {
        width: 100%;
        padding: 0 0.3125rem;
    }
    
    .row-first {
        flex-direction: column;
    }
    
    .idx-p1 {
        width: 100%;
        padding: 0.9375rem 0.625rem;
    }
    
    .idx-p1 .sub-btn-down {
        display: inline-flex;
        max-width: 100%;
        min-height: 3.5rem;
    }
    
    .idx-p1 .btn-row {
        flex-wrap: wrap;
    }
    
    .idx-p1 .btn-row .idx-down {
        width: calc(50% - 0.15625rem);
        height: 3rem;
        font-size: 0.8125rem;
    }
    
    .idx-p2 {
        width: 100%;
        height: 9.375rem;
        padding: 0.625rem;
    }
    
    .idx-p3 {
        width: 100%;
        height: auto;
        min-height: 10rem;
        padding: 0.9375rem 0.625rem;
    }
    
    .idx-p4 {
        height: auto;
    }
    
    .idx-p4 ul {
        flex-direction: column;
    }
    
    .idx-p4 li {
        width: 100%;
        height: auto;
        min-height: 9.375rem;
    }
    
    .row-third {
        flex-direction: column;
    }
    
    .idx-p5, .idx-p6, .idx-p7 {
        width: 100%;
        height: auto;
        min-height: 10rem;
    }
    
    .idx-p8 {
        height: auto;
    }
    
    .idx-p8 ul {
        flex-direction: column;
    }
    
    .idx-p8 li {
        width: 100%;
        height: auto;
        min-height: 10rem;
    }
}