.w1640 {
    margin: 0 auto;
    width: 85.64%;
}

.h9 .proinfobodys,
.h9 .productlist {
    background-color: #202021;
}

.h9 .banner .imgs {
    padding-top: 0;
}

.pc-block {
    display: block;
}

.mb-block {
    display: none;
}

.h9 .banner .w1640 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 4.45rem;
    padding-right: 2.075rem;
}

.h9 .banner .imgs .t1 {
    position: relative;
    padding-top: 3.75rem;
    top: 0;
}

.h9 .banner .mb-block img {
    width: 100%;
}

.h9 .banner .imgs .t1 img:nth-child(2) {
    margin-top: -1.075rem;
    margin-left: 0;
    width: 16.6rem;
    /* width: calc(100% - 56.4%); */
}

.h9 .banner .imgs .t1 img:first-child {
    margin-top: -4.8rem;
    /* width: 56.4%; */
    width: 18.075rem;
}

.h9 .banner .more-span .icon {
    left: 4.45rem;
}

.h9 .banner .more-span .icon svg path {
    fill: #634D3F;
}

.h9 .banner .more-span .span {
    color: #634D3F;
}

.h9 .list-01 {
    background-color: #202021;
    padding: 4rem 0 .775rem;
}

.h9 .list-01 .list_ul .t1 {
    color: #634D3F;
}

.h9 .list-01 .list_ul .item {
    height: 8.85rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .975rem;
    flex-wrap: wrap;
}

.h9 .list-01 .list_ul .item .li {
    position: relative;
    width: calc((100% - .725rem) / 2);
    height: 100%;
    display: flex;
    align-items:flex-start;
    justify-content: center;
    padding-top: 2rem;
}

.h9 .list-01 .list_ul .item:first-child .li {
    width: 100%;
    margin-right: 0;
    align-items: center;
    justify-content: flex-start;
    padding: 1.9rem 3.5rem;
}

.h9 .list-01 .list_ul .item:first-child .li .t2 {
    margin-left: -0.825rem;
}

.h9 .list-01 .list_ul .item .li>img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    /* object-fit:cover; */
    height: 100%;
    z-index: 0;
}

.h9 .list-01 .list_ul .item .li .text {
    position: relative;
    z-index: 1;
}

.h9 .list-01 .list_ul .item .li .text .t2 {
    text-align: center;
    font-weight: 400;
    line-height: .9rem;
}

.h9 .list-01 .list_ul .item .li .text .t1 {
    text-align: center;
    font-weight: bold;
    color: #EDC17A;
    background: linear-gradient(0deg, #CC9A2F 0%, #FBDA94 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.3;
    margin-bottom: .75rem;
}

.h9 .list-02 {
    width: 100%;
    background: linear-gradient(0deg, #000000 0%, #383838 52%, #202021 94%);
}

.h9 .list-02 .box1 {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.h9 .list-02 .box1>img {
    /* margin-top: -3.75rem; */
    margin-top: -2rem;
    z-index: 0;
    width: 31.95rem;
    opacity: 1;
}

.h9 .list-02 .box1 .text {
    /* margin-top: .35rem; */
    margin-top: -2.5rem;
    margin-left: -6rem;
    position: relative;
    z-index: 1;
}

.h9 .list-02 .text .t1 {
    text-align: left;
    font-weight: bold;
    color: #EDC17A;
    line-height: 1.3;
    background: linear-gradient(0deg, #CC9A2F 0%, #FBDA94 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    /* margin-bottom: 1.175rem; */
    margin-bottom: 1.1rem;
}

.h9 .list-02 .text .t1::after {
    position: absolute;
    content: 'appearance';
    text-transform: uppercase;
    font-weight: bold;
    top: -.85rem;
    left: .5rem;
    font-size: 1.8rem;
    opacity: .03;
    color: #fff;
    width: 100%;
    padding-right: 2.25rem;
    height: 1.5rem;
    line-height: 1;
    -webkit-background-clip: none;
    -webkit-text-fill-color: #fff;
    text-align: left;
}

.h9 .list-02 .box1 .text .t1::after {
    text-align: left;
    left: 0;
}

.h9 .list-02 .text .t2 {
    line-height: 1.55rem;
    opacity: 1 !important;
    font-weight: 400;
    background: transparent !important;
    -webkit-text-fill-color: #fff !important
}

.h9 .list-02 .box2 {
    display: flex;
    margin: 0 auto;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
}

.h9 .list-02 .box2 .lefts {
    width: calc(100% - 36.375rem);
}

.h9 .list-02 .box2>img {
    width: 36.375rem;
    margin-top: -7.5rem;
    /* mix-blend-mode: difference; */
}

.h9 .list-02 .box2 .text {
    position: absolute;
    left: 40%;
    top: 0;
    transform: translateX(-50%);
    text-align: center;
    z-index: 1;
}

.h9 .list-02 .box2 .text .t2 {
    line-height: 1.2rem;
    padding-left: 0;
    text-align: left;
    /* padding-left: .425rem; */
}

.h9 .list-02 .box2 .text .t1::after {
    content: 'headlight';
}

.h9 .list-02 .box2 .t4 {
    font-weight: 400;
    background: linear-gradient(0deg, #FFFFFF 0%, #C2C2C2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 1;
    position: relative;
    padding-top: 1.125rem;
    text-align: center;
    line-height: 1;
}

.h9 .list-02 .box2 .ul {
    /* margin-right: -7.8rem; */
    /* margin-top: 10.1rem; */
    margin-top: 9.5rem;
    margin-left: 6rem;
    width: 13.35rem;
}

.h9 .list-02 .box2 .li {
    width: 100%;
    height: 9.55rem;
    overflow: hidden;
    position: relative;
}

.h9 .list-02 .box2 .li img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.h9 .list-02 .box2 .li:nth-child(2) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}

.h9 .list-02 .box2 .li:nth-child(2)::after {
    position: absolute;
    content: '';
    left: 0;
    width: 1.975rem;
    height: 1.905rem;
    bottom: 0;
    background-image: url(../img/h9/llb.png);
    background-position: center;
    background-size: 1.975rem 1.905rem;
    background-repeat: no-repeat;
    z-index: 1;
}

.h9 .list-02 .box2 .li:nth-child(2)::before {
    position: absolute;
    content: '';
    right: 0;
    width: 1.975rem;
    height: 1.905rem;
    bottom: 0;
    background-image: url(../img/h9/lrb.png);
    background-position: center;
    background-size: 1.975rem 1.905rem;
    background-repeat: no-repeat;
    z-index: 1;
}

.h9 .list-02 .box2 .li:nth-child(1)::after {
    position: absolute;
    content: '';
    left: 0;
    width: 1.975rem;
    height: 1.905rem;
    top: 0;
    background-image: url(../img/h9/ll.png);
    background-position: center;
    background-size: 1.975rem 1.905rem;
    background-repeat: no-repeat;
    z-index: 1;
}

.h9 .list-02 .box2 .li:nth-child(1)::before {
    position: absolute;
    content: '';
    right: 0;
    width: 1.975rem;
    height: 1.905rem;
    top: 0;
    background-image: url(../img/h9/lr.png);
    background-position: center;
    background-size: 1.975rem 1.905rem;
    background-repeat: no-repeat;
    z-index: 1;
}

.h9 .list-03 {
    background-color: #202021;
    padding-top: 4.15rem;
}

.h9 .list-03 .text {
    text-align: center;
    padding-bottom: 1.6rem;
}

.h9 .list-03 .text .t1 {
    position: relative;
    font-weight: bold;
    color: #EDC17A;
    line-height: 1;
    background: linear-gradient(0deg, #CC9A2F 0%, #FBDA94 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    margin-bottom: 1.175rem;
}

.h9 .list-03 .text .t2 {
    line-height: 1;
    opacity: 1;
    font-weight: 400;
    background: transparent !important;
    -webkit-text-fill-color: #fff !important;
}

.h9 .list-03 .text .t1::after {
    content: 'Vehicle space';
    position: absolute;
    text-transform: uppercase;
    font-weight: bold;
    top: -.85rem;
    left: 0;
    font-size: 1.8rem;
    opacity: .03;
    color: #fff;
    width: 100%;
    padding-right: 2.25rem;
    height: 1.5rem;
    line-height: 1;
    -webkit-text-fill-color: #fff;
    text-align: center;
}
.h9 .list-03 .box2 .text{padding: 0 4rem;
}
.h9 .list-03 .box2 .text .t1::after {
    display: none;
}

.h9 .list-03 .box {
    position: relative;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .01) 20%, rgba(14, 14, 14, 1) 100%);
    /* background: #0E0E0E; */
    padding-top: 1.7rem;
    overflow: hidden;
    border-radius: 1.7rem;
}

.h9 .list-03 .box .box1 {}

.h9 .list-03 .box1 .item {
    display: flex;
    justify-content: space-between;
}

.h9 .list-03 .box1 .item .li {
    position: relative;
    width: 100%;
}

.h9 .list-03 .box1 .item:first-child .li {
    width: calc((100% - 2rem) / 2);
}

.h9 .list-03 .box1 .item .li img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.h9 .list-03 .box1 .item {
    margin-bottom: 1rem;
}

.h9 .list-03 .box1 .item:first-child {
    height: 20.825rem;
}

.h9 .list-03 .box1 .item .t3,
.h9 .list-03 .box1 .item .t4 {
    z-index: 1;
    position: relative;
}

.h9 .list-03 .box1 .item .t3 {
    font-weight: bold;
    color: #FFFFFF;
    line-height: 1;
    background: linear-gradient(0deg, #CC9A2F 0%, #FBDA94 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 1;
}

.h9 .list-03 .box1 .item .t3 span {
    margin-left: .375rem;
    font-weight: bold;
    background: linear-gradient(0deg, #CC9A2F 0%, #FBDA94 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.h9 .list-03 .box1 .item:first-child .li:first-child {
    padding-left: 2.5rem;
    padding-top: .65rem;
}

.h9 .list-03 .box1 .item .li .t4 {
    font-weight: 400;
    background: transparent !important;
    -webkit-text-fill-color: #fff !important;
}

.h9 .list-03 .box1 .item:first-child .li:nth-child(2) {
    padding: 5rem 2.5rem 2rem;
}

.h9 .list-03 .box1 .item:first-child .li:nth-child(2) .t3,
.h9 .list-03 .box1 .item:first-child .li:nth-child(2) .t4 {
    text-align: left;
}

.h9 .list-03 .box1 .item:nth-child(2) {
    height: 19.175rem;
}

.h9 .list-03 .box1 .item:nth-child(2) .li {
    padding-left: 2.5rem;
    padding-top: 3.55rem;
}

.h9 .list-03 .box2 {
    /* padding: 0rem 1.5rem 2.25rem; */
    padding: 0rem 1.5rem 0;
    border-radius: 1.7rem;
    background-repeat: no-repeat;
    /* background-position: 28% 100%; */
    /* background-position:bottom; */
    /* background-size: 84%; */
    background-position: 10% bottom;
    background-size: 90% 210%;
}

.h9 .list-03 .box2 .image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 2.25rem;
    position: relative;
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 80% 220%;
}

.h9 .list-03 .box2 .image .img {
    margin: 0 auto;
    width: 18rem;
    /* height: 16.85rem; */
    position: relative;
}

.h9 .list-03 .box2 .image .img img {
    width: 100%;
    height: 100%;
    margin-left: .25rem;
    object-fit: cover;
}

.h9 .list-03 .box2 .text {
    padding-bottom: 0;
    padding-top: 1.625rem;
}

.h9 .list-03 .box2 .text .t1 {
    line-height: 1;
    margin-bottom: .45rem;
    font-weight: bold;
    background: linear-gradient(0deg, #CC9A2F 0%, #FBDA94 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.h9 .list-03 .box2 .text .t2 {
    line-height: 1;
    margin-bottom: 2.25rem;
}

.h9 .list-03 .box2 .image {
    position: relative;
}

.h9 .list-03 .box2 .image .img {}

.h9 .list-03 .box2 .image .ul {
    position: absolute;
    left: 51%;
    top: 0;
    transform: translateX(-50%);
    width: 17.25rem;
    height: 16.85rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.h9 .list-03 .box2 .ul .li {
    position: absolute;
}

.h9 .list-03 .box2 .ul .li .line {
    width: 2.775rem;
    height: 2px;
    position: relative;
    background-color: #fff;
    margin-left: .55rem;
}

.h9 .list-03 .box2 .ul .li .line::after {
    position: absolute;
    content: '';
    left: -14%;
    top: 50%;
    transform: translateY(-50%) rotate(-180deg);
    width: .6rem;
    height: .625rem;
    background-image: url('../img/h9/lr.svg');
    background-size: .6rem .625rem;
    background-repeat: no-repeat;
    background-position: center;
}

.h9 .list-03 .box2 .ul .li .line::before {
    position: absolute;
    content: '';
    right: -14%;
    top: 50%;
    transform: translateY(-50%);
    width: .6rem;
    height: .625rem;
    background-image: url('../img/h9/lr.svg');
    background-size: .6rem .625rem;
    background-repeat: no-repeat;
    background-position: center;
}

.h9 .list-03 .box2 .image .ul .li:nth-child(1) {
    left: -14%;
    transform: rotate(283deg) translate(-116%, 95%);
    transform: rotate(283deg) translate(-106%, 95%);
}

.h9 .list-03 .box2 .image .ul .li .t5 {
    line-height: 1;
    margin-bottom: .225rem;
    text-wrap: nowrap;
    white-space: nowrap;
}

.h9 .list-03 .box2 .image .ul .li .t5 span {
    font-weight: 500;
}

.h9 .list-03 .box2 .ul .li:nth-child(2) {
    align-self: end;
    left: 2%;
    bottom: 0%;
    padding-top: 0;
}

.h9 .list-03 .box2 .ul .li:nth-child(2) .line {
    width: 14.5rem;
    height: 2px;
    bottom: -0.25rem;
    left: 0%;
}

.h9 .list-03 .box2 .ul .li:nth-child(2) .line::before {
    right: -2%;
}

.h9 .list-03 .box2 .ul .li:nth-child(2) .line::after {
    left: -3%;
}

.h9 .list-03 .box2 .ul .li:nth-child(2) .lib {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 80%;
    margin: 0 auto;
}

.h9 .list-03 .box2 .image .ul .li:nth-child(2)>.t5 {
    text-align: center;
}

.h9 .list-03 .box2 .ul .li:nth-child(2) .lib .t5 {
    /* margin-top: .925rem; */
    margin-top: .75rem;
    border-bottom: 2px solid rgba(255, 255, 255, .2);
    border-radius: 1px;
    margin-bottom: 0;
    line-height: 1.2;
}

.h9 .list-03 .box2 .ul .li:nth-child(3) {
    transform: rotate(90deg);
    right: -35.5%;
}

.h9 .list-03 .box2 .ul .li:nth-child(3) .line {
    width: 12rem;
    height: 2px;
}

.h9 .list-03 .box2 .ul .li:nth-child(3) .line::after {
    left: -3%
}

.h9 .list-03 .box2 .ul .li:nth-child(3) .line::before {
    right: -3%
}

.h9 .list-03 .box2 .ul .li:nth-child(3) .t5 {
    text-align: center;
}

.h9 .list-03 .box2 .text .t2 br {
    display: none;
}

.h9 .list-04 {
    padding-top: 3.175rem;
    background-color: #202021;
}

.h9 .list-04 .image .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h9 .list-04 .text {
    width: 70%;
    padding-bottom: 0;
    padding-top: 2.45rem;
    text-align: center;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    z-index: 1;
}

.h9 .list-04 .text .t1 {
    line-height: 1;
    font-weight: bold;
    background: linear-gradient(0deg, #CC9A2F 0%, #FBDA94 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    text-align: center;
}

.h9 .list-04 .text .t1 img {
    margin: 0 auto;
}

.h9 .list-04 .text .t2 {
    line-height: 1;
    margin-bottom: 2.25rem;
}

.h9 .list-04 .box {
    margin: 0 auto;
}

.h9 .list-04 .img {
    width: 100%;
    opacity: 1;
}

.h9 .list-04 .img img {
    width: 100%;
}

.h9 .list-04 .text .t1::after {
    content: 'MAX Speed';
    position: absolute;
    text-transform: uppercase;
    font-weight: bold;
    top: -0.85rem;
    left: 0;
    font-size: 1.8rem;
    height: 1.5rem;
    width: 100%;
    opacity: .03;
    color: #fff;
    padding-right: 2.25rem;
    line-height: 1;
    z-index: 1;
    -webkit-text-fill-color: #fff;
    text-align: center;
}

.h9 .list-04 .ul-box {
    width: 100%;
    left: 50%;
    bottom: 3.05rem;
    transform: translateX(-50%);
    padding: 0 6.5rem;
    margin: 0 auto;
}

.h9 .list-04 .ul-box .wul {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.h9 .list-04 .ul-box .li {
    width: 16.825rem;
    /* height: 13.75rem; */
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: .8rem;
    margin-right: 1.375rem;
    position: relative;
}

.h9 .list-04 .ul-box .li:nth-child(2) {
    margin-right: 0;
}

.h9 .list-04 .ul-box .li:nth-child(1) {
    /* margin-top: .65rem; */
    /* height: 13.1rem; */
}

.h9 .list-04 .ul-box .li .t3 {
    position: absolute;
    left: 50%;
    bottom: 1.6rem;
    z-index: 5;
    width: 87.165%;
    height: 1.75rem;
    transform: translateX(-50%);
    background: linear-gradient(0deg, #CC9A2F, #FBDA94);
    border-radius: 3px;
    text-align: center;
    line-height: 1.75rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 .5rem;
    text-transform:uppercase;
    line-height: 1;
    font-weight: 800;
}

.h9 .list-04 .ul-box .li .t3 span {
    font-weight: 500;
    color: #202021;
    z-index: 1;
    background: linear-gradient(0deg, #131313 0%, #434343 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: #202021;
}
.h9 .list-04 .ul-box .li:nth-child(1) .t3 span{
    margin-left: .25rem;

}
.h9 .list-04 .ul-box .li .image {
    width: 100%;
}

.h9 .list-04 .ul-box .li .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h9 .list-04 .img .t5 {
    position: absolute;
    left: 50%;
    bottom: 38%;
    padding-left: 1.75rem;
    line-height: 1;
    font-weight: 400;
    margin-bottom: 1rem;
    opacity: .4 !important;
}

.h9 .list-04 .ul-box .li:nth-child(1)::after {
    content: '';
    position: absolute;
    left: -0.625rem;
    top: 0.625rem;
    width: 2.6rem;
    height: 2.7rem;
    background-image: url(../img/h9/l4l.png);
    background-size: 2.6rem 2.7rem;
    background-position: center;
    background-repeat: no-repeat;
}

.h9 .list-04 .ul-box .li:nth-child(2)::before {
    content: '';
    position: absolute;
    right: -0.5rem;
    top: 1.075rem;
    width: 2.6rem;
    height: 2.7rem;
    background-image: url(../img/h9/l4r.png);
    background-size: 2.6rem 2.7rem;
    background-position: center;
    background-repeat: no-repeat;
}

.h9 .list-04 .ul-box .li:nth-child(1)::before {
    content: '';
    position: absolute;
    left: -0.625rem;
    bottom: 0;
    width: 2.6rem;
    height: 2.7rem;
    background-image: url(../img/h9/l4lb.png);
    background-size: 2.6rem 2.7rem;
    background-position: center;
    background-repeat: no-repeat;
}

.h9 .list-04 .ul-box .li:nth-child(2)::after {
    content: '';
    position: absolute;
    right: -0.625rem;
    bottom: 0;
    width: 2.6rem;
    height: 2.7rem;
    background-image: url(../img/h9/l4rb.png);
    background-size: 2.6rem 2.7rem;
    background-position: center;
    background-repeat: no-repeat;
}

.h9 .list-05 {
    background-color: #202021;
    /* padding-top: 3.4rem; */
}

.h9 .list-05 .box {
    margin: 0 auto;
}

.h9 .list-05 .box1 {
    height: 25.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 1;
    padding-top: .625rem;
}

.h9 .list-05 .box1 .left {
    /* width: 29.1rem; */
    width: 62%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right 60%;
    z-index: 1;
    position: relative;
}

.h9 .list-05 .box1 .left .bgimg {
    width: 98.038%;
    left: 0;
    bottom: -1.75rem;
}

.h9 .list-05 .box1 .left .bgimg img {
    width: 100%;
}

.h9 .list-05 .box1 .left .image {
    text-align: center;
}

.h9 .list-05 .box1 .left .image>img {
    z-index: 1;
    opacity: 1;
    position: relative;
    margin: 0 auto;
    width: 48.935%;
}

.h9 .list-05 .box1 .left .image .img {
    width: 17.1rem;
    height: 20.35rem;
    left: 4.575rem;
    top: .575rem;
    z-index: 0;
    opacity: 1;
}

.h9 .list-05 .box1 .left .image .img img {
    width: 100%;
}

.h9 .list-05 .box1 .text {
    /* margin-left: -3.125rem; */
    margin-left: -5.5rem;
    /* margin-top: -3.4rem; */
    margin-top: -2rem;
    position: relative;
    z-index: 1;
}

.h9 .list-05 .box1 .text .t1 {
    position: relative;
    margin-bottom: 1.175rem;
    line-height: 1.3;
    font-weight: bold;
    background: linear-gradient(0deg, #CC9A2F 0%, #FBDA94 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.h9 .list-05 .box1 .text .t1::after {
    content: 'MAX Speed';
    position: absolute;
    text-transform: uppercase;
    font-weight: bold;
    top: -0.85rem;
    left: 0;
    font-size: 1.8rem;
    opacity: .03;
    color: #fff;
    width: 100%;
    padding-right: 2.25rem;
    height: 1.5rem;
    line-height: 1;
    z-index: 1;
    -webkit-text-fill-color: #fff;
    text-align: left;
}

.h9 .list-05 .box1 .text .t2 {
    line-height: 1.2rem;
    font-weight: 400;
    color: #E0D8CB;
    background: linear-gradient(0deg, #C2C2C2 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.h9 .list-05 .box2 {
    height: 26.4rem;
    width: 100%;
    /* margin-top: -4.35rem; */
    margin-top: -8rem;
    padding-top: 11.5rem;
    padding-left: 8rem;
    padding-bottom: 7.5rem;
}

.h9 .list-05 .box2>img {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.h9 .list-05 .box2 .tul {
    width: 18rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1;
    position: relative;
}

.h9 .list-05 .box2 .tul .tli {
    width: calc((100% - 1.5rem)/ 3);
}

.h9 .list-05 .box2 .tul .tli img {
    width: 100%;
}

.h9 .list-05 .box2 .t3 {
    width: 18rem;
    z-index: 1;
    position: relative;
    font-weight: 400;
    color: #fff;
    line-height: 1.2rem;
    margin-bottom: 1.5rem;
    padding-right: .5rem;
    text-align: justify;
    background: transparent !important;
    -webkit-text-fill-color: #fff !important;
}

.h9 .list-05 .box3 {
    padding-top: 3rem;
}

.h9 .list-05 .box3 .text {
    text-align: center;
    padding-bottom: 0;
}

.h9 .list-05 .box3 .text .t1 {
    margin-bottom: 1.175rem;
    line-height: 1;
    font-weight: bold;
    background: linear-gradient(0deg, #CC9A2F 0%, #FBDA94 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.h9 .list-05 .box3 .text .t1::after {
    content: 'isolator';
    position: absolute;
    text-transform: uppercase;
    font-weight: bold;
    top: -0.85rem;
    left: 0;
    font-size: 1.8rem;
    opacity: .03;
    color: #fff;
    width: 100%;
    padding-right: 2.25rem;
    height: 1.5rem;
    line-height: 1;
    z-index: 1;
    -webkit-text-fill-color: #fff;
}

.h9 .list-05 .box3 .text .t2 {
    font-family: OPPOSans;
    font-weight: 500;
    line-height: 1.2rem;
    background: linear-gradient(0deg, #C2C2C2 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 2rem;
}

.h9 .list-05 .box3 .imgtxt {
    padding: 0 10rem;
    margin: 0 auto;
}

.h9 .list-05 .box3 .imgtxt .img {
    width: 100%;
}

.h9 .list-05 .box3 .imgtxt .img img {
    width: 100%;
}

.h9 .list-05 .box3 .imgtxt .icon {
    right: 3.5rem;
    top: 1.05rem;
    width: 3.075rem;
    height: 2.65rem;
}

.h9 .list-05 .box3 .imgtxt .icon img {
    width: 100%;
}

.h9 .list-05 .box3 .imgtxt .ul {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.15rem 0 0;
}

.h9 .list-05 .box3 .imgtxt .ul .li {
    position: relative;
    padding-right: 2.05rem;
    padding-left: 2.05rem;
}

.h9 .list-05 .box3 .imgtxt .ul .li .image {
    margin: 0 auto;
    height: 2.75rem;
}

.h9 .list-05 .box3 .imgtxt .ul .li .image img {
    height: 100%;
}

.h9 .list-05 .box3 .imgtxt .ul .li:first-child {
    padding-left: 0;
}

.h9 .list-05 .box3 .imgtxt .ul .li:last-child {
    margin-right: 0;
    padding-right: 0;
}

.h9 .list-05 .box3 .imgtxt .ul .li:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 1.275rem;
    font-family: OPPOSans;
    font-weight: 500;
    background-color: #FFFFFF;
    opacity: 0.3;
}

.h9 .list-05 .box4 {
    padding-top: 5.5rem;
    display: flex;
    position: relative;
    z-index: 2;
}

.h9 .list-05 .box4 .text {
    padding-top: 3.65rem;
    left: 0;
}

.h9 .list-05 .box4 .text .t1 {
    position: relative;
    margin-bottom: 1.175rem;
    line-height: 1.2;
    font-weight: bold;
    background: linear-gradient(0deg, #CC9A2F 0%, #FBDA94 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
z-index: 1;
}

.h9 .list-05 .box4 .text .t1::after {
    content: 'Security';
    position: absolute;
    text-transform: uppercase;
    font-weight: bold;
    top: -0.5rem;
    left: 0;
    font-size: 1.8rem;
    opacity: .03;
    color: #fff;
    width: 100%;
    padding-right: 2.25rem;
    height: 1.5rem;
    line-height: 1;
    z-index: 1;
    -webkit-text-fill-color: #fff;
}

.h9 .list-05 .box4 .text .t2 {
    font-family: OPPOSans;
    font-weight: bold;
    background: linear-gradient(0deg, #C2C2C2 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.3;
    margin-bottom: .375rem;
}

.h9 .list-05 .box4 .text .t3 {
    /* font-family: OPPOSans; */
    font-weight: 400;
    opacity: .9 !important;
    line-height: 1;
    margin-bottom: 1.925rem;
}

.h9 .list-05 .box4 .text .t3 br {
}

.h9 .list-05 .box4 .left {
    position: relative;
    margin-left: 8rem;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.h9 .list-05 .box4 .image {
    align-self: flex-end;
    width: 31.2rem;
}

.h9 .list-05 .box4 .image img {
    width: 100%;
}

.h9 .list-05 .box4 .bgimg {
    right: 0;
    z-index: 0;
    top: 0%;
    width: 24.225rem;
}

.h9 .list-05 .box4 .bgimg img {
    width: 100%;
}

.h9 .list-05 .box4 .tul {
    display: flex;
    align-items: center;
}

.h9 .list-05 .box4 .tul .tli {
    margin-right: .625rem;
    width: 4.525rem;
}

.h9 .list-05 .box4 .tul .tli img {
    width: 100%;
}

.h9 .list-05 .box4 .tul .tli:last-child {
    margin-right: 0;
}

.h9 .list-05 .box5 {
    margin-top: -3.25rem;
}

.h9 .list-05 .box5 .img {
    position: relative;
    width: 100%;
}

.h9 .list-05 .box5 .img img {
    width: 100%;
}

.h9 .list-05 .box5 .txt {
    right: 7rem;
    top: 7rem
}

.h9 .list-05 .box5 .txt .t1 {
    font-weight: bold;
    line-height: 1;
    margin-bottom: .5rem;
    background: linear-gradient(0deg, #C2C2C2 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.h9 .list-05 .box5 .txt .t2 {
    margin-bottom: 1.425rem;
    font-weight: 400;
    line-height: 1.2rem;
    opacity: .8;
    background: transparent !important;
    -webkit-text-fill-color: #fff !important;
}

.h9 .list-05 .box5 .tul {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.h9 .list-05 .box5 .tul .tli {
    margin-right: .625rem;
    height: 1.325rem;
}

.h9 .list-05 .box5 .tul .tli img {
    height: 100%;
}

.h9 .list-05 .box5 .tul .tli:last-child {
    margin-right: 0;
}

.h9 .list-06 {
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    max-height: 36rem;
    padding-top: 4.45rem;
    overflow: hidden;
}

.h9 .list-06 .box {
    /* width: 23.25rem; */
    width: 27rem;
    margin: 0 auto;
}

.h9 .list-06 .box .text {
    text-align: center;
}

.h9 .list-06 .box .text .t1 {
    position: relative;
    margin: 0 auto;
    /* margin-bottom: 1.175rem;
        font-weight: bold;
        line-height: 1;
        background: linear-gradient(0deg, #FFFFFF 0%, #C2C2C2 100%);
        -webkit-background-clip: text; */
    -webkit-text-fill-color: transparent;
    margin-bottom: 1.175rem;
    line-height: 1.1;
    font-weight: bold;
    background: linear-gradient(0deg, #CC9A2F 0%, #FBDA94 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.h9 .list-06 .box .text .t1::after {
    content: 'Dashboard';
    position: absolute;
    text-transform: uppercase;
    font-weight: bold;
    top: -0.85rem;
    left: 0;
    font-size: 1.8rem;
    opacity: .06;
    color: #fff;
    width: 100%;
    padding-right: 2.25rem;
    height: 1.5rem;
    line-height: 1;
    z-index: 1;
    -webkit-text-fill-color: #fff;
}

.h9 .list-06 .box .text .t2 {
    margin-bottom: 2rem;
    font-weight: 500;
    line-height: 1.2rem;
    background: linear-gradient(0deg, #C2C2C2 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.h9 .list-06 .box .text .tul .tli .img {
    height: 1.225rem;
}

.h9 .list-06 .box .text .tul .tli .img img {
    height: 100%;
    margin: 0 auto;
}

.h9 .list-06 .box .text .tul .tli .t3 {
    font-weight: 400;
    font-size: .6rem;
    color: #FFFFFF;
    line-height: .825rem;
    margin-top: .5rem;
}

.h9 .list-06 .box .text .tul {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0 1.375rem;
}

.h9 .list-06 .box .text .tul .tli {}

.h9 .list-06 .box .text .tul .tli:nth-child(1),
.h9 .list-06 .box .text .tul .tli:nth-child(2) {
    margin-right: 2.25rem;
}

.h9 .list-06 .box .text .tul .tli:nth-child(3) {
    margin-right: 2.5rem;
}

.h9 .list-06 .box .image {
    top: 0;
    left: 0;
    width: 23.25rem;
    margin: -3.25rem auto 0;
}

.h9 .list-06 .box .image img {
    width: 100%;
}

.h9 .list-07 {
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 24rem;
    position: relative;
    padding-top: 4.675rem;
    z-index: 1;
}

.h9 .list-07 .box {
    margin: 0 auto;
    position: relative;
}

.h9 .list-07 .box1 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding-left: 7.95rem;
}

.h9 .list-07 .box1 .tli {
    width: 10.975rem;
    height: 3.225rem;
    position: relative;
}

.h9 .list-07 .box1 .tli:last-child {
    margin-bottom: 0;
}

.h9 .list-07 .box1 .tli .img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    /* height: 100%; */
}

.h9 .list-07 .box1 .tli .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h9 .list-07 .text .tli {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* padding: .625rem 1rem .625rem 3.75rem; */
}

.h9 .list-07 .box1 .text .t1 {
    margin-bottom: 2.125rem;
    position: relative;
    font-weight: bold;
    line-height: 1;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    background: linear-gradient(0deg, #CC9A2F 0%, #FBDA94 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
    text-wrap: nowrap
}

.h9 .list-07 .box1 .text .t1 br {
}

.h9 .list-07 .text .t1::after {
    content: 'Dashboard';
    position: absolute;
    text-transform: uppercase;
    font-weight: bold;
    top: -0.85rem;
    left: 0;
    font-size: 1.8rem;
    opacity: .03;
    color: #fff;
    width: 100%;
    padding-right: 2.25rem;
    height: 1.5rem;
    line-height: 1;
    z-index: 1;
    -webkit-text-fill-color: #fff;
    text-align: left;
}

.h9 .list-07 .box1 .text .t2 {
    font-weight: 400;
    color: #EDC27C;
    line-height: 1.2rem;
    background: linear-gradient(0deg, #C2C2C2 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.h9 .list-07 .box1 .right {
    margin-top: 4.8rem;
    opacity: 1;
    margin-left: -.75rem;
    width: 56.109%;
}

.h9 .list-07 .box1 .right img {
    width: 100%;
}

.h9 .list-08 {
    position: relative;
    overflow: hidden;
}

.h9 .list-08 .box {
    position: relative;
    margin: 0 auto;
    position: relative;
    background-color: #202021;
}

.h9 .list-08 .box1 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.h9 .list-08 .box1 .left {
    width: 26.05rem;
    height: 24.75rem;
    margin-top: -3rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.h9 .list-08 .box1 .left .image {
    opacity: 1;
    height: 100%;
}

.h9 .list-08 .box1 .left .image .img {
    position: absolute;
    opacity: 1;
}

.h9 .list-08 .box1 .left .image .img1 {
    right: 5.225rem;
    top: 6.35rem;
    width: 10.45rem;
}

.h9 .list-08 .box1 .left .image .img2 {
    left: 35%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 5.55rem;
    max-height: 5.55rem;
    animation: sc1 1s infinite ease .2s;
}

.h9 .list-08 .box1 .left .image .img2::before {
    position: absolute;
    content: '';
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: sc1 1s infinite ease .2s;
    width: 5.55rem;
    height: 5.55rem;
    background-image: url(../img/h9/662.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.h9 .list-08 .box1 .left .image .img2::after {
    position: absolute;
    content: '';
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: sc1 1s infinite ease .2s;
    width: 4.65rem;
    height: 4.65rem;
    background-image: url(../img/h9/662.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* .h9 .list-08 .box1 .left .image .img2::after{

width: ;
} */
@keyframes sc1 {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        transform: translate(-50%, -50%) scale(1.05);
    }
}

.list-08 .box1 .left .image .img3 {
    left: 0;
    bottom: 0;
    /* width: 10.925rem; */
    width: 9.5rem;
    height: 18.1rem;
    margin-bottom: -4rem;
}

.list-08 .box1 .left .image .img img {
    width: 100%;
}

.h9 .list-08 .box1 .left .image .img2 img {
    width: 3.5rem;
}

.h9 .list-08 .box1 .right {
    padding-top: 8.3rem;
}

.h9 .list-08 .box1 .text .t1 {
    margin-bottom: 1.175rem;
    position: relative;
    font-weight: bold;
    line-height: 1;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    background: linear-gradient(0deg, #CC9A2F 0%, #FBDA94 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.h9 .list-08 .text .t1::after {
    content: 'Cloud key';
    position: absolute;
    text-transform: uppercase;
    font-weight: bold;
    top: -0.85rem;
    left: 0;
    font-size: 1.8rem;
    opacity: .03;
    color: #fff;
    width: 100%;
    padding-right: 2.25rem;
    height: 1.5rem;
    line-height: 1;
    z-index: 1;
    text-align: left;
    -webkit-text-fill-color: #fff;
}

.h9 .list-08 .box1 .text .t2 {
    font-weight: 400;
    color: #EDC27C;
    line-height: 1.2rem;
    background: linear-gradient(0deg, #C2C2C2 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

.h9 .list-08 .box1 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.h9 .list-09 {
    width: 100%;
    height: 100%;
    padding-top: 2.625rem;
    overflow: hidden;
}

.h9 .list-09 .box {
    width: 35rem;
    margin: 0 auto;
}

.h9 .list-09 .box .text {
    text-align: center;
}

.h9 .list-09 .box .text .t1 {
    position: relative;
    margin-bottom: 1.175rem;
    font-weight: bold;
    line-height: 1;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    background: linear-gradient(0deg, #CC9A2F 0%, #FBDA94 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.h9 .list-09 .box .text .t1::after {
    content: 'Cloud key';
    position: absolute;
    text-transform: uppercase;
    font-weight: bold;
    top: -0.85rem;
    left: 0;
    font-size: 1.8rem;
    opacity: .03;
    color: #fff;
    width: 100%;
    padding-right: 2.25rem;
    height: 1.5rem;
    line-height: 1;
    z-index: 1;
    -webkit-text-fill-color: #fff;
}

.h9 .list-09 .box .text .t2 {
    margin-bottom: 1.5rem;
    font-weight: 500;
    line-height: 1;
    background: linear-gradient(0deg, #C2C2C2 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.h9 .list-09 .box .text .tul .tli .t3 {
    font-weight: 400;
    font-size: .6rem;
    color: #FFFFFF;
    line-height: 1;
    margin-top: -4px;
}

.h9 .list-09 .box .text .tul {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    /* padding: 0 1.375rem; */
}



.h9 .list-09 .box .text .tul .tli .img {
    height: 3.05rem;
}

.h9 .list-09 .box .text .tul .tli .img img {
    height: 100%;
}



.h9 .list-09 .box .image {
    width: 19.5rem;
    height: 19.5rem;
    border-radius: 50%;
    margin: 3.425rem auto 0;
    border: 1px dashed rgba(255, 255, 255, .4);
    position: relative;
    opacity: 1;
}

.h9 .list-09 .box .image .imgs {
    position: absolute;
    left: 5%;
    top: 5%;
    width: calc(90%);
    height: calc(90%);
    border-radius: 50%;
    opacity: 1;
}

.h9 .list-09 .box .image .imgss {
    width: 15.775rem;
    height: 19.525rem;
    position: relative;
    z-index: 1;
    opacity: 1;
    /* margin: 0 auto; */
    margin-top: -0.95rem;
}

.h9 .list-09 .box .image img {
    width: 100%;
}

.h9 .list-10 {
    position: relative;
    overflow: hidden;
    padding-top: 3.925rem;
    padding-bottom: 3.425rem;
}

.h9 .list-10 .box {
    padding: 0 8rem;
    margin: 0 auto;
}

.h9 .list-10 .box .text {
    text-align: center;
}

.h9 .list-10 .box .text .t1 {
    position: relative;
    margin-bottom: 2.65rem;
    line-height: 1;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    background: linear-gradient(0deg, #CC9A2F 0%, #FBDA94 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.h9 .list-10 .box .text .t1::after {
    content: 'aid fuctions';
    position: absolute;
    text-transform: uppercase;
    font-weight: bold;
    top: -0.85rem;
    left: 0;
    font-size: 1.8rem;
    opacity: .03;
    color: #fff;
    width: 100%;
    padding-right: 2.25rem;
    height: 1.5rem;
    line-height: 1;
    z-index: 1;
    -webkit-text-fill-color: #fff;
}

.h9 .list-10 .box .text .t3 {
    font-family: OPPOSans;
    font-weight: 500;
    color: #EDC27C;
    line-height: 2.425rem;
    background: linear-gradient(0deg, #C2C2C2 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: left;
}

.h9 .list-10 .box .text .tul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.h9 .list-10 .box .text .tli {
    /* width: ; */
    height: 6.8rem;
    position: relative;
    margin-bottom: .975rem;
}

.h9 .list-10 .box .text .tli:nth-child(1),
.h9 .list-10 .box .text .tli:nth-child(4) {
    width: 17.725rem;
}

.h9 .list-10 .box .text .tli:nth-child(2),
.h9 .list-10 .box .text .tli:nth-child(3) {
    width: calc(100% - 17.725rem - 1.025rem);
}

.h9 .list-10 .box .text .tli:nth-child(even) {
    margin-left: 1.025rem;
}

.h9 .list-10 .box .text .t3 {
    position: absolute;
    left: 1rem;
    bottom: 40%;
    line-height: 1.3;
}

.h9 .list-10 .box .text .tli .image {
    width: 100%;
    height: 100%;
}

.h9 .list-10 .box .text .tli img {
    width: 100%;
    height: 100%;
}

.h9 .list-10 .box .text .t3::after {
    position: absolute;
    bottom: -9px;
    left: -0;
    content: '';
    background-repeat: no-repeat;
    background-position: bottom;
    height: .075rem;
    background-size: cover;
}

.h9 .list-10 .box .text .tli:nth-child(1) .t3::after {
    background-image: url(../img/h9/83.png);
    width: calc(100% - .575rem);
    /* background-size: calc(100% - .575rem) .075rem; */
}

.h9 .list-10 .box .text .tli:nth-child(2) .t3::after {
    background-image: url(../img/h9/84.png);
    width: calc(100% - .4rem);
    /* background-size: calc(100% - .4rem) .075rem; */
}

.h9 .list-10 .box .text .tli:nth-child(3) .t3::after {
    background-image: url(../img/h9/85.png);
    width: calc(100% - .3rem);
    /* background-size: calc(100% - .3rem) .075rem; */
}

.h9 .list-10 .box .text .tli:nth-child(4) .t3::after {
    background-image: url(../img/h9/86.png);
    width: calc(100% - .85rem);
    /* background-size: calc(100% - .85rem) .075rem; */
}

.h9 .list-11 {
    width: 100%;
    height: 25rem;
    background: linear-gradient(90deg, #202021 0%, #CC9A2F 100%);
}

.h9 .list-11 .box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    height: 100%;
}

.h9 .list-11 .t1 {
    font-weight: bold;
    font-size: 1.75rem;
    color: #FFFFFF;
    position: relative;
    z-index: 1;
    line-height: 1.2;
    text-align: center;
}

.list.listg .pro-list-11 {
    padding-top: 3.625rem;
}

.list.listg .pro-list-11 .items .words .txts {
    padding-top: .25rem;
    line-height: 1.2;
}

.h9 .pro-list-13 .lis:before {
    border-left: 2px dashed rgba(255, 255, 255, .2);
}

@media (min-width: 1025px) {

    .list.listg .pro-list-11 .items .words,
    .list.listg .pro-list-11 .items .words .tits .span,
    .list.listg .pro-list-11 .items .words .txts {
        transition: 0.5s cubic-bezier(0.3, 0, 0.24, 1);
    }

    .list.listg .pro-list-11 .items:hover .words .tits .span,
    .list.listg .pro-list-11 .items:hover .words .txts {
        color: #202021 !important;
    }
}

.list.listg .pro-list-11 {
    margin: 0 auto;
    overflow: hidden;
}

.list.listg .items:hover .words {
    background: linear-gradient(0deg, #FBDA94 0%, #CC9A2F 100%);
}

.list.listg .pro-list-11 .swiper-container .swiper-scrollbar {
    background: #2C2A2A;
}

.list.listg .pro-list-11 .swiper-container .swiper-scrollbar-drag {
    background: linear-gradient(-90deg, #FBDA94 0%, #CC9A2F 100%);
}

.list.listg .pro-list-12 .pro-btn-list .icons:before {
    background-image: url(../img/h9/91.png);
}

.list.listg .pro-list-12 {
    margin: 0 auto;
}

.list.listg .pro-list-12 .pro-li-list .icons {
    top: 1.75rem;
    /* top: 3.25rem; */
    /* width: 22.1rem; */
    width: 100%;
}

.list.listg .pro-list-12 .pro-li-list .icons img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.list.listg .pro-list-13 {
    /* background-color: #000; */
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 1) 100%);
}

.list.listg .pro-list-13 .w1280 {
    background: #202021;
    margin: 0 auto;
}

.pro-list-13 .lis:first-child::before,
.pro-list-13 .lis:nth-child(6)::before {
    display: none;
}

.h9 .h120 {
    font-weight: 400;
    color: #969697;
    text-align: center;
    background-color: #000;
    padding-top: 1rem;
    line-height: 1;
}

.h9 img.bg {
    position: absolute;
    width: 100%;
    /* height: 100%; */
    left: 0;
    top: 0;
    z-index: 1;
    /* object-fit: cover; */
}

.h9 .img-h .w100 {
    position: relative;
}

@media(max-width:1480px) {
    .h9 .list-05 .box4 .left {
        margin-left: 4%;
    }

    .h9 .list-05 .box5 .txt {
        right: 2.1rem;
        top: 4rem;
    }

    .h9 .list-09 .box {
        width: 72%;
    }

    .h9 .list-10 .box {
        width: 72%;
        padding: 0 0;
    }

    .h9 .list-07 .box1 {
        padding-left: 5rem;
    }

    .h9 .list-06 .box {
        width: 72%;
    }

    .h9 .list-05 .box3 .imgtxt {
        padding: 0 8rem;
    }

    .h9 .list-05 .box2 {
        padding-left: 5rem;
    }
}

@media(max-width:1024px) {
    .list.listg .pro-list-12 .pro-bg {
        height: 20rem;
    }
}

@media(max-width:996px) {
    .w1640 {
        width: 92%;
    }

    .pc-block {
        display: none;
    }

    .mb-block {
        display: block;
    }

    .h9 .banner .mb-block {
        height: 100%;
    }

    .h9 .banner .mb-block img {
        height: 100%;
        object-fit: cover;
    }

    .banner .imgs {
        padding-top: 0;
    }

    .h9 .banner .imgs .img-h .w100.mbox {}

    .h9 .banner .w1640.more-span {
        display: none;
    }

    .h9 .banner .w1640 {
        padding-left: 0;
        padding-right: 0;
    }

    .h9 .banner .imgs .t1 {
        padding-top: 4rem;
        width: 92%;
        margin: 0 auto;
        padding-bottom: 2rem;
    }

    .h9 .banner .w1640 {
        align-items: flex-start;
        flex-direction: column;
    }

    .h9 .list-02 .box1 {
        position: relative;
    }

    .h9 .list-02 .box1>img {
        width: 100%;
    }

    .h9 .list-02 {
        background-color: transparent;
    }

    .h9 .list-02 .box2 {
        width: 100%;
        flex-direction: column;
        margin: 0 auto;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .h9 .list-02 .box2>img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
    }

    .h9 .list-03 {
        background-color: transparent;
    }

    .h9 .list-03 .box1 .item .li img {
        height: auto;
    }

    .h9 .list-03 .box1 .item:first-child,
    .h9 .list-03 .box1 .item:first-child .li:nth-child(2) {
        height: 15rem;
    }

    .h9 .list-03 .box1 .item:first-child .li:first-child {
        padding-left: .5rem;
        padding-top: 2rem;
    }

    .h9 .list-03 .box1 .item .li img {
        height: 100%;
    }

    .h9 .list-03 .box1 .item:first-child .li:nth-child(2) {
        padding: 7rem 1rem 1rem;
    }

    .h9 .list-03 .box1 .item .li:first-child img {
        object-fit: contain;
        height: 104%;
        width: 100%;
    }

    .h9 .list-03 .box1 .item:last-child .li img {
        height: 100%;
        width: 99%;
        left: 50%;
        transform: translateX(-50%);
    }

    .h9 .list-03 .box2 .text {
        padding-top: 0;
    }

    .h9 .list-04 {
        background-color: transparent;
    }

    .h9 .list-03 .box2 {
        background-size: 100% 100%;
    }
}

@media(max-width:996px) {
    .h9 .banner .imgs .t1 img:first-child {
        /* width: 64% !important; */
        margin: 0 auto 1.25rem;
    }

    .h9 .banner .imgs .t1 img:nth-child(2) {
        margin-top: 0;
        width: 92%;
        margin: 0 auto;
    }

    .h9 .banner .imgs .t1 {
        padding-bottom: 3rem;
    }

    .h9 .list-01 {
        padding-top: 0;
        background-color: transparent;
    }

    .h9 .list.listg {
        position: relative;
        z-index: 1;
        margin-top: -4rem;
        background-image: none !important;
    }

    .h9 .list-01 .list_ul .item {
        height: auto;
        margin-bottom: .5rem;
    }

    .h9 .list-01 .list_ul .item .li {
        height: 5rem;
        width: calc((100% - .5rem) /2);
    }

    .h9 .list-01 .list_ul .item .li .text .t1 {
        line-height: 1;
        margin-bottom: .5rem;
    }

    .h9 .list-01 .list_ul .item .li .text {
        width: 92%;
    }

    .h9 .list-01 .list_ul .item:first-child .li .text {
        width: 50%;
    }

    .h9 .list-01 .list_ul .item .li .text .t1 {
        font-size: .9rem;
    }

    .h9 .list-01 .list_ul .item .li .text .t2 {
        font-size: .5rem;
    }

    .h9 .list-02 {
        background: none;
        padding-top: 2.5rem;
    }

    .h9 .list-02 .box1 {
        flex-direction: column;
    }

    .h9 .list-02 .box1 .text {
        margin-left: 0;
        margin-top: 0rem;
    }

    .h9 .list-02 .text .t1 {
        margin: 0 auto 1rem;
        height: auto;
        /* font-size: ; */
    }

    .h9 .list-02 .text .t2 {
        text-align: center;
        line-height: 1.5;
        -webkit-text-fill-color: rgba(255, 255, 255, .8) !important
    }

    .h9 .list-02 .box2 .text .t2 {
        line-height: 1.5;
    }

    .h9 .list-02 .box1>img {
        margin-top: 0;
        width: 100%;
        margin: 0 auto;
    }

    .h9 .list-02 .box2 .text {
        position: absolute;
        width: 92%;
        margin: 0 auto;
        text-align: center;
        margin-top: 2.5rem;
    }

    .h9 .list-02 .box2 .lefts {
        width: 100%;
        height: 90%;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }

    .h9 .list-02 .box2>img {
        margin-top: -14rem;
        position: relative;
        left: 0;
        top: 0;
    }

    .h9 .list-02 .box2 .ul {
        width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        position: relative;
        z-index: 2;
    }

    .h9 .list-02 .box2 .ul .li {
        width: 48%;
        height: 6rem;
        overflow: visible;
    }

    .h9 .list-02 .box2 .li img,
    .h9 .list-02 .box2 .li:nth-child(2) img {
        width: auto;
        height: auto;
    }

    .h9 .list-02 .box2 .li:nth-child(2) {
        margin-right: 2%;
    }

    .h9 .list-02 .box2 .li:nth-child(1) {
        margin-left: 2%;
    }

    .h9 .list-02 .box2 .li:nth-child(1)::after {
        width: 1.5rem;
        height: 1.5rem;
        background-size: 1.5rem 1.5rem;
        top: -4px;
        left: -4px;
    }

    .h9 .list-02 .box2 .li:nth-child(1)::before {
        left: -4px;
        bottom: -8px;
        top: auto;
        width: 1.5rem;
        height: 1.5rem;
        background-image: url(../img/h9/llb.png);
        background-size: 1.5rem 1.5rem;
    }

    .h9 .list-02 .box2 .li:nth-child(2)::after {
        width: 1.5rem;
        height: 1.5rem;
        background-size: 1.5rem 1.5rem;
        top: -4px;
        left: auto;
        right: -4px;
        background-image: url(../img/h9/lr.png);
    }

    .h9 .list-02 .box2 .li:nth-child(2)::before {
        width: 1.5rem;
        height: 1.5rem;
        background-size: 1.5rem 1.5rem;
        bottom: -8px;
        right: -4px;
    }

    .h9 .list-03 {
        /* padding-top: 2.5rem; */
        padding-top: 1rem;
    }

    .h9 .list-03 .w1640 {
        position: relative;
    }

    .h9 .list-03 .text {
        margin: 0 auto;
        padding-bottom: 1.5rem;
        text-align: center;
    }

    .h9 .list-03 .text .t1::after {
        text-align: center;
    }

    .h9 .list-05 .box1 .text .t1::after {
        /* opacity: .1; */
        text-align: center;
    }

    .h9 .list-02 .w1640>.text {
        position: absolute;
        width: 92%;
    }

    .h9 .list-03 .box2 .text {
        margin: 0 0 0 auto;
        text-align: end;
    }

    .h9 .list-03 .text .t1 {
        margin-bottom: 1rem;
    }

    .h9 .list-03 .box2 .text .t2 {
        width: 100%;
        margin: 0 0 0 auto;
    }

    .h9 .list-03 .box2 .text .t2 br {
        display: block;
    }

    .h9 .list-03 .w1640 {
        width: 100%;
    }

    .h9 .list-03 .box {
        padding-top: 0;
    }

    .h9 .list-03 .box {
        background-color: transparent;
    }

    .h9 .list-03 .box1 .item:first-child .li {
        width: calc((100% - 1rem) / 2);
    }

    .h9 .list-03 .box1 .item:nth-child(2) {
        height: 12rem;
    }

    .h9 .list-03 .box1 .item .li img {
        object-fit: cover;
    }

    .h9 .list-03 .box1 .item:nth-child(2) .li {
        padding-left: 1rem;
        padding-top: 1rem;
    }

    .h9 .list-03 .box2 .text .t2 {
        line-height: 1.5;
    }

    .h9 .list-03 .box2 .text .t1 {
        margin-bottom: 1rem;
    }

    .h9 .list-03 .box2 {
        padding: 0 4% 0rem;
        padding-top: 2rem;
        background-image: url(../img/h9/m11.png) !important;
        /* background-position: -100px -20px;
        background-size: 140% 100%; */
        background-position: bottom;
        background-size: 100% 66%;
        background-color: #202021;
    }

    .h9 .list-03 .box2 .image {
        background-image: none;
    }

    .h9 .list-03 .box2 .mb-block img {
        margin: 0 auto;
        width: 100%;
    }

    .h9 .list-03 .box2 .image .img {
        width: 90%;
        height: 15rem;
    }

    .h9 .list-03 .box2 .image .ul {
        width: 90%;
        height: 14.85rem;
    }

    .h9 .list-03 .box2 .text .t2 {
        margin-bottom: 1rem;
    }

    .h9 .list-03 .box2 .ul .li:nth-child(2) .lib .t5 {
        margin-top: .5rem;
    }

    .h9 .list-03 .box2 .image .ul .li:nth-child(1) {
        left: -17%;
        transform: rotate(283deg) translate(-58%, 68%);
    }

    .h9 .list-03 .box2 .ul .li:nth-child(2) {
        width: 100%;
    }

    .h9 .list-03 .box2 .ul .li:nth-child(2) .line {
        width: 80%;
        margin: 0 auto;
    }

    .h9 .list-03 .box2 .ul .li:nth-child(3) {
        right: -32.5%;
    }

    .h9 .list-03 .box2 .ul .li:nth-child(3) .line {
        width: 9rem;
    }

    .h9 .list-04 {
        padding-top: 2.5rem;
    }

    .h9 .list-04 .text .t1::after {
        /* opacity: .1; */
        text-align: center;
    }

    .h9 .list-04 .mb-block img {
        width: 100%;
        margin-top: 0;
    }

    .h9 .list-04 .text {
        padding-top: .5rem;
        width: 100%;
    }

    .h9 .list-04 .img .t5 {
        bottom: 25%;
        left: .875rem;
    }

    .h9 .list-04 .ul-box {
        /* position: relative;
    left: 0;
    transform: translateX(0%);
    padding: 0;
    bottom: 0; */
    }

    .h9 .list-05 {
        padding-top: 2.5rem;
    }

    .h9 .list-05 .box1 {
        height: auto;
        flex-direction: column-reverse;
    }

    .h9 .list-05 .box1 .text {
        margin: 0 auto;
    }

    .h9 .list-05 .box1 .text .t1 {
        margin-bottom: 1rem;
    }

    .h9 .list-05 .box1 .text .t2 {
        text-align: center;
        line-height: 1.5;
    }

    .h9 .list-05 .box1 .left {
        width: 100%;
    }

    .h9 .list-05 .box1 .left .image .img {
        /* width:100%; */
        height: auto;
        left: 0;
        top: 2;
    }

    .h9 .list-05 .box2 {
        margin-top: 0;
        padding: 2.5rem 0 1.5rem;
    }

    .h9 .list-05 .box2>img {
        object-position: 0 -16rem;
    }

    /* .h9 .list-05 .box2::after{
        position:absolute;
        left: 0;
        top: 0;
        content: '';
        width: 100%;
        height: 7.5rem;
        background: linear-gradient(0deg, #000000 0%, #383838 52%, #202021 94%);
    } */
    .h9 .list-05 .box2 .tul {
        padding-left: 4%;
        width: 38%;
        flex-direction: column;
        align-items: flex-start;
    }

    .h9 .list-05 .box2 {
        height: 100vh;
    }

    .h9 .list-05 .box2 .t3 {
        width: 100%;
        font-size: .6rem;
        padding-left: 4%;
        -webkit-text-fill-color: rgba(255, 255, 255, .8) !important;
        padding-right: 0;
        margin-bottom: 2rem;
    }
    .h9 .list-05 .box2 .tul{
        width: 38%;
    }
    .h9 .list-05 .box2 .tul .tli {
        margin-bottom: 1rem;
        width: 100%;
    }
    .h9 .list-05 .box2 .tul .tli:nth-child(1){
        width: 84%;
    }
    .h9 .list-05 .box3 .text {
        margin: 0 auto;
    }

    .h9 .list-05 .box2 .tul .tli span {
        position: relative;
        margin-bottom: 1.175rem;
        line-height: 1;
        font-weight: bold;
        background: linear-gradient(0deg, #FBDA94 0%, #CC9A2F 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: .75rem;
    }

    .h9 .list-05 .box3 .text .t1 {
        width: 56%;
        line-height: 1.2;
        margin: 0 auto 1rem;
    }

    .h9 .list-05 .box3 .text .t2 {
        line-height: 1.5;
        margin-bottom: 1rem;
    }

    .h9 .list-05 .box3 .imgtxt {
        width: 100%;
        padding: 0;
        position: relative;
    }

    .h9 .list-05 .box3 .text .t1::after {
        /* opacity: .1; */
        text-align: center;
    }

    .h9 .list-05 .box3 .imgtxt .icon {
        right: 1.5rem;
    }

    .h9 .list-05 .box3 {
        padding-top: 0;
        margin-top: -2rem;
    }

    .h9 .list-05 .box3 .text {
        padding-bottom: 0;
    }

    .h9 .list-05 .box3 .imgtxt .ul {
        padding: 0 1.5rem 2rem;
        height: 100%;
        align-items: flex-end;
    }

    .h9 .list-05 .box3 .imgtxt .img>img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .h9 .list-05 .box3 .imgtxt .img {
        margin-bottom: 3rem;
    }

    .h9 .list-05 .box3 .imgtxt .ul {
        position: absolute;
        left: 0;
        top: 4.25rem;
        width: 100%;
        justify-content: space-between;
    }

    .h9 .list-05 .box3 .imgtxt .ul .li {
        padding-right: 0;
        margin-left: 0;
    }

    .h9 .list-05 .box3 .imgtxt .ul .li:not(:last-child)::after {
        display: none;
    }

    .h9 .list-05 .box4 .left {
        margin-left: 0;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .h9 .list-11 .t1 {
        font-size: 1.5rem;
    }

    .h9 .list-05 .box4 .text {
        position: relative;
        width: 30%;
        padding-top: 0;
        margin-left: 4%;
    }

    .h9 .list-05 .box4 {
        /* background-size: 100% 72%; */
        padding-top: 1.5rem;
        background-position: bottom;
        background-size: 107% 67%;
        background-repeat: no-repeat;
        background-image: url('../img/h9/m17.png');
    }

    .h9 .list-05 .box4 .image {
        /* background-position: bottom; */
    }

    .h9 .list-05 .box4 .text {
        width: 100%;
    }

    .h9 .list-05 .box4 .text .t1 {
        width: 100%;
        text-align: center;
        margin-bottom: 1.5rem;
    }

    .h9 .list-05 .box4 .text .t2 {
        margin-bottom: .75rem;
        width: 38%;
    }

    .h9 .list-05 .box4 .text .t3 {
        width: 100%;
        opacity: .5;
        font-weight: 400;
        line-height: 1.5;
    }

    .h9 .list-05 .box4 .text .t3 br {
        display: block;
    }

    .h9 .list-05 .box4 .tul {
        align-items: flex-start;
        flex-direction: column;
    }

    .h9 .list-05 .box4 .tul .tli {
        margin-right: 0;
        margin-bottom: 1rem;
        z-index: 1;
        width: 37%;
        text-align: center;
    }

    .h9 .list-05 .box4 .tul .tli:first-child {
        /* background-image:url('../img/h9/m18.png') ; */
        background-repeat: no-repeat;
        background-size: cover;
    }

    .h9 .list-05 .box4 .tul .tli:nth-child(2) {
        /* background-image:url('../img/h9/m181.png') ; */
        background-repeat: no-repeat;
        background-size: cover;
    }

    .h9 .list-05 .box4 .tul .tli:last-child {
        /* background-image:url('../img/h9/m182.png') ; */
        background-repeat: no-repeat;
        background-size: cover;
    }

    .h9 .list-05 .box4 .tul .tli .mb-block span {
        font-weight: bold;
        background: linear-gradient(0deg, #CC9A2F 0%, #FBDA94 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        display: block;
    }

    .h9 .list-05 .box4 .tul .tli .mb-block {
        font-family: OPPOSans;
        font-weight: 500;
        line-height: 1.2rem;
        background: linear-gradient(0deg, #C2C2C2 0%, #ffffff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .h9 .list-05 .box4 .image {
        width: 100%;
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: -1;
    }

    .h9 .list-05 .box4 .image img {
        margin: 0 0 0 auto;
    }

    .h9 .list-05 .box5 {
        margin-top: 0;
    }

    .h9 .list-05 .box5 .img>img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: bottom;
    }

    .h9 .list-05 .box5 .txt {
        right: 0;
        top: 1.5rem;
        width: 56%;
        padding-right: 4%;
    }

    .h9 .list-05 .box5 .tul {
        flex-wrap: wrap;
        padding-right: 4%;
        justify-content: flex-end;
    }

    .h9 .list-05 .box5 .txt {
        text-align: right;
        top: 2rem;
    }

    .h9 .list-05 .box5 .tul .tli {
        width: 32%;
        margin-bottom: .5rem;
        height: auto;
    }

    .h9 .list-05 .box5 .tul .tli .tit-30 {
        font-weight: bold;
        background: linear-gradient(0deg, #CC9A2F 0%, #FBDA94 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        /* line-height: 1.2; */
    }

    .h9 .list-05 .box5 .txt .t2 {
        margin-bottom: 1.5rem;
        font-size: 1.07rem;
        -webkit-text-fill-color: rgba(255, 255, 255, .8) !important;
    }

    .h9 .list-05 .box5 .tul .tli img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .h9 .list-05 .box5 .tul .tli:nth-child(even) {
        /* margin-right: 0;
        width: 40%; */
    }

    .h9 .list-06 {
        padding-top: 0;
        padding-top: 1rem;
    }

    .h9 .list-06 .box {
        width: 100%;
    }

    .h9 .list-06 .box .text {
        width: 100%;
        margin: 0 auto;
    }

    .h9 .list-06 .box .text .tul {
        padding: 0 4%;
    }

    .h9 .list-06 .box .text .tul .tli:nth-child(1),
    .h9 .list-06 .box .text .tul .tli:nth-child(2) {
        margin-right: .5rem;
    }

    .h9 .list-06 .box .text .tul .tli:nth-child(3) {
        margin-right: .5rem;
    }

    .h9 .list-06 .box .text .t1::after {
        /* opacity: .1; */
        text-align: center;
    }

    .h9 .list-07 {
        max-height: none;
        padding-top: 1rem;
        height: auto;
        background-position: 60% center;
    }

    .h9 .list-07 .box1 {
        padding-left: 0;
        flex-direction: column;
    }

    .h9 .list-07 .box1 .left {
        width: 100%;
    }

    .h9 .list-07 .box1 .text {
        width: 92%;
        margin: 0 auto;
    }

    .h9 .list-07 .box1 .text .t1 {
        text-align: center;
        margin: 0 auto 1.5rem;
        line-height: 1.2;
    }

    .h9 .list-07 .box1 .text .t1::after {
        /* opacity: .1; */
        text-align: center;
    }

    .h9 .list-07 .box1 .text .t2 br {
        display: none;
    }

    .h9 .list-07 .box1 .text .tul {
        width: 88%;
        margin: 0 auto;
    }

    .h9 .list-07 .box1 .text .tul .tli {
        width: 100%;
    }

    .h9 .list-07 .box1 .tli .img img {
        object-fit: unset;
    }

    .h9 .list-07 .box1 .text .t2 {
        font-size: .7rem;
    }

    .h9 .list-07 .box1 .right {
        margin-top: -1rem;
        margin-left: 0;
        width: 100%;
    }

    .h9 .list-07 .box1 .right img {
        margin: 0 auto;
    }

    .h9 .list-08 {
        background-color: #202021;
        overflow: visible;
    }

    .h9 .box12 {
        background-image: url(../img/h9/m32.png);
        background-repeat: no-repeat;
        background-position: bottom;
        background-size: cover;
    }

    .h9 .list-08 .box {
        padding-top: 0rem;
    }

    .h9 .list-08 .box1 {
        flex-direction: column-reverse;
    }

    .h9 .list-08 .box1 .text {
        width: 100%;
        margin: 0 auto;
    }

    .h9 .list-08 .box1 .text .t1 {
        margin-bottom: 1rem;
    }

    .h9 .list-08 .text .t1::after {
        text-align: center;
    }

    .h9 .list-08 .box1 .text .t2 {
        margin-bottom: 2;
        text-align: center;
        line-height: 1.5;
    }

    .h9 .list-08 .box1 .right {
        width: 100%;
        text-align: center;
        padding-top: 1.5rem;
    }

    .h9 .list-08 .box1 .left {
        width: 100%;
        height: 18rem;
        margin-top: 0;
    }

    .h9 .list-08 .box1 .left .image .img1 {
        right: 33%;
        top: 11%;
        width: 40%;
    }

    .h9 .list-08 .box1 .left .image .img2 {
        left: 30%;
        top: 42%;
    }

    .h9 .list-08 .box1 .left .image {
        height: 18rem;
    }

    .list-08 .box1 .left .image .img3 {
        left: 0rem;
        bottom: -2rem;
        height: auto;
        margin-bottom: 0;
        /* margin-bottom: 0; */
    }

    .h9 .list-09 {
        padding-top: 1rem;
    }

    .h9 .list-09 .box .mb-block img {
        width: 100%;
    }

    .h9 .list-09 .box {
        width: 100%;
    }

    .h9 .list-09 .box .text .t1 {
        margin: 0 auto 1rem;
    }

    .h9 .list-10 .box {
        width: 96%;
        padding: 0;
    }

    .h9 .list-10 {
        padding: 1.5rem 0 .5rem;
    }

    .h9 .list-10 .box .text .t1 {
        padding: 0;
        margin: 0 auto 2rem;
    }

    .h9 .list-10 .box .text .tul {
        width: 92%;
        margin: 0 auto;
    }

    .h9 .list-10 .box .text .tli {
        height: 5.65rem;
        margin-bottom: .5rem;
    }

    .h9 .list-10 .box .text .tli:nth-child(even) {
        margin-left: .5rem;
    }

    .h9 .list-10 .box .text .tli:nth-child(1),
    .h9 .list-10 .box .text .tli:nth-child(4) {
        width: 52%;
    }

    .h9 .list-10 .box .text .tli:nth-child(2),
    .h9 .list-10 .box .text .tli:nth-child(3) {
        width: calc(100% - 52% - .5rem);
    }

    .h9 .list-10 .box .text .t3 {
        bottom: 46%;
    }

    .h9 .list-11 {
        height: 8rem;
    }

    .h9 .list-04 .ul-box {
        padding: 0 1.5rem;
        left: 0;
        bottom: 1rem;
        transform: translateX(0);
    }

    .h9 .list-04 .img {
        width: 100%;
    }

    .h9 .list-04 .img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .h9 .list-05 .box1 .left {
        /* background-image: url(../img/h9/m13.png) !important;
        background-position: right 3rem;
        background-size:cover; */
    }

    .h9 .list-05 {
        background-color: transparent;
    }

    .h9 .list-06 {
        max-height: none;
        background-image: url('web/img/h9/m21.png');
    }

    .h9 .list-06 .box .image img {
        margin: 0 auto;
    }

    .h9 .list-06 .box .image {
        margin-top: 2rem;
        width: 100%;
    }

    .h9 .list-09 .box .text .tul {
        padding: 0 4%;
    }

    .h9 .list-09 .box .text .tul .tli {
        margin-right: 2%;
    }

    .h9 .list-09 .box .text .tul .tli:nth-child(3) {
        margin-right: 2%;
    }

    .clist-ch03 .uls2 .uls-bots .txts br {
        display: block;
    }

    .clist-ch03 .uls.uls1 .lis {
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        min-height: 4rem;
        margin-top: .5rem;
    }

    .clist-ch03 .uls.uls1 .icons {
        width: 40%;
        left: .5rem;
        bottom: -.75rem;
    }

    .clist-ch03 .uls.uls1 .lis .spans {
        margin-bottom: .5rem;
    }

    .clist-ch03 .uls.uls1 .texts {
        width: 45%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-left: 0;
        padding-right: .5rem;
    }

    .h9 .list-04 .ul-box .li .t3 {
        background: none;
        background-color: #8fb6f9;
    }

    .h9 .list-03 .box .box1 img {
        width: 100%;
    }

    .h9 .list-05 .box5 .img {
        height: 30rem;
    }

    .h9 .list-08 .box1 .left .image .img2::after {
        width: 2.5rem;
        height: 2.5rem;
    }

    .h9 .list-08 .box1 .left .image .img2::before {
        width: 3.8rem;
        height: 3.8rem;
    }

    .h9 .list-06 {
        background-image: none !important;
    }

    .h9 .box101 {
        background-image: url("../img/h9/m21.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .h9 .list-08 .left {
        background-image: none;
    }

    .h9 .list-08 {
        background-image: url('../img/h9/64.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .h9 .list-01 .list_ul .item:first-child .li .t2 {
        margin-left: 0;
    }

    .h9 .list-02 .box2 .t1::after {
        left: 0;
    }

    .h9 .list-05 .box1 .left .bgimg {
        display: none;
    }

    .h9 .list-05 .box1 .text .t2 {
        margin-bottom: 1rem;
    }

    .list-08 .box1 .left .image .img img {
        width: 80%;
    }

    .h9 .list-08 .box1 .left .image .img2 img {
        width: 100%;
    }

    .h9 .list-07 .box1 .tli {
        height: auto;
    }

    .h9 .list-07 .box1 .tli .img {
        position: relative;
        left: 0;
        top: 0;
    }

    .h9 .list-07 .box1 .text .t2 {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 72%;
    }

    .h9 .list-07 .text .tli {
        padding: 0;
    }

    .h9 .list-07 .box1 .text .t1 br {
        display: block;
    }

    .h9 .list-06 .box .text .t1 {
        margin-bottom: 1rem;
    }

    .h9 .clist-ch03 .uls {
        width: 100%;
    }

    .h9 .clist-ch03 .uls.uls1 .uls-tops {
        width: 100%;
        margin: 0 auto;
    }

    .list-13 img {
        width: 100%;
    }

    .clist-ch02 .li .images img {
        width: 100%;
    }

    .h9 .clist-ch03 .uls.uls1 .images {
        margin: 0 auto;
        margin-top: 1rem;
        /* width: 84%; */
    }

    .h9 .clist-ch03 .uls {
        width: 84%;
        margin: 0 auto;
    }

    .h9 .list-08 .box1 {
        background-image: url(../img/h9/64.png);
    }

    .h9 .list-08 .box1 .left {
        background-image: none !important;
    }

    .h9 .list-05 .box1 .left .image>img {
        width: 100%;
        margin-bottom: 0rem;
    }

    .h9 .list-05 .box1 .left .image .img img {
        width: 92%;
        margin: 0 auto;
    }

    .h9 .clist-ch02 .li .texts {
        padding: .5rem .5rem;
    }

    .clist-ch03 .uls3 .uls-bots .span {
        font-weight: 600;
    }
}

@media (max-width:767px) {
    .h9 .list-01 .list_ul .item:first-child .li {
        padding: 0;
    }

    .h9 .list-04 .text {
        padding-top: .5rem;

        width: 100%;
    }
    .h9 .list-04 .ul-box .li .t3 {
        width: 94%;
        height: 1.2rem;
        font-size: .3rem;
        line-height: 1.2rem;
    }

    .h9 .list-04 .ul-box .li .image {
        top: .25rem;
        height: 100%;
    }

    .h9 .list-04 .ul-box .li .image img {
        height: 100%;
    }

    .h9 .list-04 .ul-box .li:nth-child(1)::after {
        width: 1.5rem;
        height: 1.5rem;
        background-size: 1.5rem 1.5rem;
        left: -0.3rem;
        top: .175rem;
    }

    .h9 .list-04 .ul-box .li:nth-child(2)::after {
        width: 1.5rem;
        height: 1.5rem;
        background-size: 1.5rem 1.5rem;
        right: -0.375rem;
        bottom: -0.425rem;
    }

    .h9 .list-04 .ul-box .li:nth-child(2)::before {
        width: 1.5rem;
        height: 1.5rem;
        background-size: 1.5rem 1.5rem;
        right: -0.375rem;
        top: .225rem;
    }

    .h9 .list-04 .ul-box .li:nth-child(1)::before {
        width: 1.5rem;
        height: 1.5rem;
        background-size: 1.5rem 1.5rem;
        left: -0.375rem;
        bottom: -0.425rem;
    }

    .h9 .list-04 .ul-box .li {
        width: 48%;
        height: 6.5rem;
    }

    .h9 .list-04 .ul-box .li:nth-child(1) {
        height: 6.5rem;
    }

    .h9 .list-04 .ul-box .wul {
        align-items: flex-start;
        justify-content: space-between;
    }

    .h9 .list-04 .ul-box .li {
        padding-bottom: 0;
        margin-right: .25rem;
    }

    .h9 .list-04 .ul-box .li:nth-child(2) {
        height: 6.5rem;
    }

    .productlist .clist-ch02 {
        background-color: rgba(242, 242, 242, 1);
    }

    .clist-ch03 .uls.uls1 .uls-bots {
        margin-top: 1rem;
    }

    .h9 .clist-ch02 .li .span {
        font-size: .75rem;
        font-weight: 550;
        margin-bottom: .75rem;
    }

    .clist-ch02 .li .span span {
        font-weight: 600;
        background-image: -webkit-linear-gradient(top, #202021, #626262);
        -webkit-background-clip: text;
        -webkit-text-fill-color: #202021;
    }

    .clist-ch02 .li .txts {
        color: #000000;
        font-weight: 400;
    }

    .h9 .list-05 .box2 .t3 {
        width: 100%;
    }

    .h9 .list-05 .box2 .tul {
        width: 32%;
    }

    .h9 .list-05 .box2 {
        height: 80vh;
    }

    .h9 .list-05 .box2>img {
        object-position: 100%;
    }

    .h9 .list-05 .box5 .img {
        height: auto;
    }

    .h9 .list-04 .mb-block img {
        margin-top: 0;
    }

    .h9 .list-08 .box1 .left .image .img1 {
        right: -18%;
        top: 18%;
        width: 74%;
    }

    .list-08 .box1 .left .image .img1 img {
        width: 70%;
    }

    .list-08 .box1 .left .image .img3 img {
        width: 77%;
    }

    .h9 .list-08 .box1 .left .image .img2 {
        left: 42%;
        top: 42%;
        width: 5rem;
        height: 5rem;
    }

    .list-08 .box1 .left .image .img3 {
        left: 0px;
        width: 62%;
        /* margin-bottom: -3.5rem; */
    }

    .h9 .list-02 .box2>img {
        margin-top: -2rem;
    }

    .h9 .clist-ch02 .li .txts {
        line-height: 1.4;
    }
}

@keyframes fadeInScl {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
        transform: scale(0.5);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}
@media(max-width:475px){
    .list-08 .box1 .left .image .img1 img{
        width: 10rem;
    }
    .list-08 .box1 .left .image .img3 img{
        width:7.5rem;
    }
    .list-08 .box1 .left .image .img3{
        bottom: -2rem;
    }
    .h9 .list-08 .box1 .left .image{
        width: 92%;
    }
    .h9 .list-08 .box1 .left .image .img2{
        top: 48%;
    }
}

.fadeInScl {
    -webkit-animation-name: fadeInScl;
    animation-name: fadeInScl;
}

body {
    -webkit-text-size-adjust: 100% !important;
}

    @media (max-width:1920px){
        .h9 .list-02 .text .t1,
        .h9 .list-03 .text .t1,
        .h9 .list-03 .box2 .text .t1,
        .h9 .list-04 .text .t1,
        .h9 .list-05 .box3 .text .t1,
        .h9 .list-02 .text .t2,
        .h9 .list-03 .text .t2,
        .h9 .list-05 .box1 .text .t2,
        .h9 .list-05 .box2 .t3,
        .h9 .list-03 .box2 .text .t2,
        .h9 .list-05 .box3 .text .t2,
        .h9 .list-05 .box4 .text .t1,
        .h9 .list-05 .box4 .text .t3,
        .h9 .list-05 .box5 .txt .t1,
        .h9 .list-05 .box5 .txt .t2,
        .h9 .list-06 .box .text .t1,
        .h9 .list-06 .box .text .t2,
        .h9 .list-07 .box1 .text .t1,
        .h9 .list-08 .box1 .text .t1,
        .h9 .list-02 .text .t2,
        .h9 .list-08 .box1 .text .t2,
        .h9 .list-09 .box .text .t1,
        .h9 .list-09 .box .text .t2,
        .h9 .list-10 .box .text .t1,
        .h9 .list-11 .t1,
        .h9 .list-02 .text .t2,
        .pro-list-11 .items .words .tits, .pro-list-11 .items .words .txts
        .h9 .list-02 .box2 .text .t2,
        .h9 .list-02 .box2 .text .t2{
                line-height: 1.3;
        }
    }
    @media (max-width:996px) {
        .h9 .list-01 .list_ul .item .li{
            padding: .5rem 0;
        }
        .h9 .list-01 .list_ul .item .li .text .t1{
            font-size: .6rem;
        }
        .h9 .list-01 .list_ul .item .li .text .t2{
            line-height: 1;
        }
        .h9 .list-02 .text .t1{
            text-align: center;
        }
        .h9 .list-02 .box1 .text{
            width: 92%;
            margin: 0 auto; 
        }
        .h9 .list-02 .box2 .text .t2{
            line-height: 1.3;
    }
        .h9 .list-02 .text .t2 br{
            display: none;
        }
        .h9 .list-02 .box1 .text .t1::after{
            text-align: center;
        }
        .h9 .list-02 .box2 .text{
            left: 50%;
        }
        .h9 .list-01 .list_ul .item .li .text .t2 br{
            display: none;
        }
        .h9 .list-02 .box2 .text .t2{
            text-align: center;
        }
        .h9 .list-03 .text{
            width: 92%;
        }
        .h9 .list-03 .box2 .text{
margin: 0 auto;
text-align: center;
padding: 0;
        }
        .h9 .list-04 .text{
            position: relative;
            left: 0;
            transform: translateX(0);
        }
        .h9 .list-04 .text .t1 br{
            display: none;
        }
        .h9 .list-04 .mb-block img{
            margin-top: 0;
        }
        .h9 .list-05 .box5 .txt{
            position: relative;
            width: 92%;
            padding-right: 0;
            margin: 0 auto;
        }
        .h9 .list-05 .box5 .tul{
            padding-right: 0;
        }
        .h9 .list-05 .box1 .text .t1 br{
            display: none;
        }
        .h9 .list-05 .box1 .text .t1{
            text-align: center;
        }
        .h9 .list-05 .box2 .t3{
            padding: 0 4%;
            font-size: .75rem;
        }
        .h9 .list-05 .box2 .tul{
            width: 39%;
        }
        .h9 .list-05 .box2 .tul .tli{
            width: auto;
        }
        .h9 .list-05 .box3 .text .t1{
            width: 92%;
        }
        .h9 .list-05 .box3 .text .t2 br{
            display: none;
        }
        .h9 .list-05 .box4 .text .t1 br{
            display: none;
        }
        .h9 .list-05 .box4 .text .t2{
            width: 100%;
        }
        .h9 .list-05 .box4 .tul{
            z-index: 1;
            position: relative;
        }
        .h9 .list-05 .box5 .img>img{
            margin-top: -1.75rem;
        }
        .h9 .list-05 .box5 .img{
            margin-top: 1.5rem;
            display: flex;
                    flex-direction: column-reverse;
        }
        .h9 .list-06 .box .text .t2{
            width: 92%;
            margin: 0 auto 2rem;
        }
        .h9 .list-07 .box1 .text .tul .tli{
            margin-bottom: 1rem;
        }
        .h9 .list-08 .box1 .text .t2{
            margin-bottom:2rem ;

        }
        .h9 .list-08 .box1 .text .t2 br{
            display: none;
        }
        .h9 .list-09 .box .text .t2{
            width: 92%;
            margin: 0 auto 1.5rem;
        }
        .h9 .list-05 .box5 .tul .tli{
            width: auto !important;
            height: auto !important;
            margin-right: 1.2rem !important;
        }
        .h9 .list-05 .box5 .tul .tli:nth-child(even){
            margin-right: 0 !important;
        }
    }