.brand .sec1 {background:url('../img/brand_bg.png')no-repeat left top;  position: relative; z-index: 1; overflow: hidden;}
.brand .sec1 .bg {position: absolute; left:50%; bottom:50px; transform: translate(-50%,0); }
.brand .sec1 .wid {max-width:1560px; padding:220px 30px 100px 30px; position: relative; margin:0 auto; }

.brand .sec1 h2 {font-size:50px; color:#111; font-weight:800; line-height:1.3em; text-align: center;}
.brand .sec1 h2 b {color:#FFACAC;}
.brand .sec1 h3 {font-size:18px; color:#333; line-height:1.5em; margin:25px 0 0 0; font-weight:300; text-align: center;}
.brand .sec1 h3 .mo {display: none;}

.brand .sec1 .img1 {position: absolute; left:0; top:-20px;}
.brand .sec1 .img2 {position: absolute; right:0;bottom:-20px;}

.brand .sec1 ul {margin-top:70px;}
.brand .sec1 ul:after {content:''; clear:both; display: table;}
.brand .sec1 ul li {float:left; width:75px; margin-right:25px; position: relative; border-radius:40px; background:#eee; padding:10px; overflow: hidden; height:440px; transition: .8s; cursor: pointer;}
.brand .sec1 ul li:after {content:''; position: absolute; left:0; top:0; height:100%; background:rgba(0,0,0,.25); z-index: 1; width:100%;}
.brand .sec1 ul li span {opacity: 0; font-size:16px; color:#fff; font-weight:300; line-height:1.4em; transition: .5s;}
.brand .sec1 ul li p {font-size:22px; color:#fff; font-weight:600; position: absolute; left:-72px; bottom:181px; transform: rotate(-90deg); width:220px; transition: .5s; z-index: 2;}
.brand .sec1 ul li img {position: absolute; top:372px; left:9px; transition: .3s; transition: .8s; z-index: 2;}
.brand .sec1 ul li:last-child {margin-right:0;}
.brand .sec1 ul li.on {width:calc(100% - 500px); padding:48px 0 0 120px;}
.brand .sec1 ul li.on:after {content:none;}
.brand .sec1 ul li.on img {bottom:initial; top:35px; left:40px;}
.brand .sec1 ul li.on p {transform: rotate(0); bottom:initial; position: relative; left:0; width:auto; margin-bottom:7px;}
.brand .sec1 ul li.on span {opacity: 1;}

.brand .sec1 ul li:nth-child(1) {background:url('../img/brand_img4.jpg')no-repeat center; background-size:cover; }
.brand .sec1 ul li:nth-child(2) {background:url('../img/brand_img1.jpg')no-repeat center; background-size:cover;}
.brand .sec1 ul li:nth-child(3) {background:url('../img/brand_img2.jpg')no-repeat center; background-size:cover;}
.brand .sec1 ul li:nth-child(4) {background:url('../img/brand_img3.jpg')no-repeat center; background-size:cover;}
.brand .sec1 ul li:nth-child(5) {background:url('../img/brand_img5_2.jpg')no-repeat center; background-size:cover;}
.brand .sec1 ul li:nth-child(6) {background:url('../img/brand_img5.jpg')no-repeat center; background-size:cover;}







.brand .sec2 {position: relative; z-index: 1; overflow: hidden;}
.brand .sec2 .wid {max-width:1560px; padding:140px 30px 100px 30px; position: relative; margin:0 auto; }

.brand .sec2 .box1 {position: relative; cursor: pointer;}
.brand .sec2 .box1:after {content:''; clear:both; display: table;}
.brand .sec2 .box1 .img {floaT:left; width:695px; background:url('../img/brand_img6.jpg')no-repeat center; background-size:cover; height:380px; border-radius:30px; box-shadow: 3px 3px 30px rgba(0,0,0,.1);}
.brand .sec2 .box1 .txt {float:right; width:Calc(100% - 695px); padding-left:70px; padding-top:60px;}
.brand .sec2 .box1 .txt h2 {font-size:50px; color:#222; font-weight:800;}
.brand .sec2 .box1 .txt h2 span {display: inline-block; margin-left:18px; font-weight:700; font-size:25px;}
.brand .sec2 .box1 .txt p {font-size:18px; margin-top:24px; color:#333; line-height:1.45em; font-weight:300;} 
.brand .sec2 .box1 .txt .txt1 {font-size:103px; color:#f5f5f5; font-family: "DM Sans", sans-serif; font-weight:800; margin:13px 0 0 -180px; display: inline-block; transition: .5s;}
.brand .sec2 .box1 .txt .txt1 .ani_img {margin:2px -57px 0 0px; opacity: 0; transition: .5s; animation: rotate_image 16s linear infinite;}
@keyframes rotate_image{
    100% {
        transform: rotate(-360deg);
    }
}
.brand .sec2 .box1 .txt .txt1 .arrow {opacity: .1; transition: .5s;}
.brand .sec2 .box1 .txt .txt2 {position: absolute; left:-90px; top:-230px; font-size:400px;  font-family: "DM Sans", sans-serif; color:#F7F7F7; font-weight:800; z-index: -1; transition: .5s;}

.brand .sec2 .box3 .img {background:url('../img/brand_img8.jpg')no-repeat center; background-size:cover;}
.brand .sec2 .box3 .txt .txt2 {top:-240px;}


.brand .sec2 .box2 {margin:200px 0 250px 0;}
.brand .sec2 .box2 {position: relative; cursor: pointer;}
.brand .sec2 .box2:after {content:''; clear:both; display: table;}
.brand .sec2 .box2 .img {floaT:right; width:695px; background:url('../img/brand_img7.jpg')no-repeat center; background-size:cover; height:380px; border-radius:30px; box-shadow: 3px 3px 30px rgba(0,0,0,.1);}
.brand .sec2 .box2 .txt {float:left; width:Calc(100% - 695px); padding-left:30px; padding-top:60px;}
.brand .sec2 .box2 .txt h2 {font-size:50px; color:#222; font-weight:800;}
.brand .sec2 .box2 .txt h2 span {display: inline-block; margin-left:18px; font-weight:700; font-size:25px;}
.brand .sec2 .box2 .txt p {font-size:18px; margin-top:24px; color:#333; line-height:1.45em; font-weight:300;} 
.brand .sec2 .box2 .txt .txt1 {font-size:103px; color:#f5f5f5; font-family: "DM Sans", sans-serif; font-weight:800; margin:5px 0 0 0px; display: inline-block; transition: .5s;}
.brand .sec2 .box2 .txt .txt1 .ani_img {margin:2px -57px 0 0px; opacity: 0; transition: .5s; animation: rotate_image 16s linear infinite;}
.brand .sec2 .box2 .txt .txt1 .arrow {opacity: .1; transition: .5s; margin-right:-20px;}
.brand .sec2 .box2 .txt .txt2 {position: absolute; right:-90px; top:-230px; font-size:400px;  font-family: "DM Sans", sans-serif; color:#F7F7F7; font-weight:800; z-index: -1; transition: .5s;}




.brand .sec2 .box1:hover .txt .txt1 .ani_img {margin:2px -57px 0 15px; opacity: 1;}
.brand .sec2 .box1:hover .txt .txt1 .arrow {opacity: 1;}
.brand .sec2 .box1:hover .txt .txt1 {color:#eee}
.brand .sec2 .box1:hover .txt .txt2 {color:#ddd}

.brand .sec2 .box2:hover .txt .txt1 .ani_img {margin:2px -57px 0 15px; opacity: 1;}
.brand .sec2 .box2:hover .txt .txt1 .arrow {opacity: 1;}
.brand .sec2 .box2:hover .txt .txt1 {color:#eee}
.brand .sec2 .box2:hover .txt .txt2 {color:#ddd}






@media screen and (max-width:1440px) {
    .brand .sec2 .box1 .txt .txt1 {font-size:80px; margin:13px 0 0 -61px; font-size:0;}
    .brand .sec2 .box1 .txt .txt1 .arrow {width:100px;}
    .brand .sec2 .box1 .txt {padding-left:55px;}

    .brand .sec2 .box1 .txt h2 {font-size:40px; }
    .brand .sec2 .box1 .txt h2 span {font-size:20px; margin-left:13px;}
    .brand .sec2 .box1 .txt p br {display: none;}

    .brand .sec2 .box2 .txt .txt1 {font-size:80px; margin:13px 0 0 -61px; font-size:0;}
    .brand .sec2 .box2 .txt .txt1 .arrow {width:100px;}
    .brand .sec2 .box2 .txt {padding-left:55px;}
    .brand .sec2 .box2 .txt {padding-left:10px; padding-right:20px;}
    .brand .sec2 .box2 .txt h2 {font-size:40px; }
    .brand .sec2 .box2 .txt h2 span {font-size:20px; margin-left:13px;}
    .brand .sec2 .box2 .txt p br {display: none;}

}

@media screen and (max-width:1200px) {
    .brand .sec1 .wid {padding:185px 30px 30px 30px}
    .brand .sec1 h2 {font-size:45px;}
    .brand .sec1 .bg {bottom:-30px;}

    .brand .sec1 ul {margin-top:65px;}
    .brand .sec1 ul li {width:65px; margin-right:15px; height:360px;}
    .brand .sec1 ul li img {top:304px; width:48px;}
    .brand .sec1 ul li p {left:-76px; bottom:168px; font-size:20px;}

    .brand .sec1 ul li.on {width:calc(100% - 400px); padding:34px 45px 0 96px}
    .brand .sec1 ul li.on img {top:25px; left:30px;}

    .brand .sec1 .img2 {bottom:initial; top:-40px;}

    .brand .sec2 .wid {padding-bottom:40px;}
    .brand .sec2 .box1 .img {width:100%; height:auto; padding-top:54%;}
    .brand .sec2 .box1 .txt .txt1 {margin-left:-24px;}
    .brand .sec2 .box1 .txt {width:100%; padding:35px 30px 0 30px;}
    .brand .sec2 .box1 .txt p {margin-top:15px;}
    .brand .sec2 .box1 .txt p br {display: block;}

    .brand .sec2 .box2 {MARGIN:30PX 0 50PX 0;}
    .brand .sec2 .box2 .img {width:100%; height:auto; padding-top:54%;}
    .brand .sec2 .box2 .txt .txt1 {margin-left:-24px;}
    .brand .sec2 .box2 .txt {width:100%; padding:35px 30px 0 30px;}
    .brand .sec2 .box2 .txt p {margin-top:15px;}
    .brand .sec2 .box2 .txt p br {display: block;}
}

@media screen and (max-width:768px) {
    .brand .sec1 h2 {font-size:22px; padding-left:5px;}
    .brand .sec1 .wid {padding:100px 15px 30px 15px;}
    .brand .sec1 .img1 {width:45px; top:-50px; display: none;}
    .brand .sec1 .img2 {top:-131px; width:45px; display: none;}
    .brand .sec1 h3 {font-size:14px;}
    .brand .sec1 h3 .mo {display: block;}

    .brand .sec1 ul {margin-top:35px;}
    .brand .sec1 ul li {width:100%; height:60px; margin-right:0; margin-top:10px;}
    .brand .sec1 ul li p {transform: rotate(0); left:67px; bottom:initial; top:18px; font-size:18px;}
    .brand .sec1 ul li img {top:8px; left:8px; width:45px;}
    .brand .sec1 ul li span {font-size:13px; line-height:1.3em; font-weight:500;}

    .brand .sec1 ul li:nth-child(3) span br {display: none;}

    .brand .sec1 ul li.on {width:100%; height:200px; padding:9px 20px 0 78px;}
    .brand .sec1 ul li.on img {top:16px; left:20px;}
    .brand .sec1 ul li.on p { margin-bottom:25px}


    .brand .sec2 .wid {padding:68px 25px 0 25px}
    .brand .sec2 .box1 .txt .txt2 {font-size:250px; top:-140px;}
    .brand .sec2 .box1 .img {border-radius:10px;}
    .brand .sec2 .box1 .txt {padding:25px 0;}
    .brand .sec2 .box1 .txt h2 {font-size:25px;}
    .brand .sec2 .box1 .txt h2 span {font-size:16px; margin-left:8px;}
    .brand .sec2 .box1 .txt p {font-size:14px; line-height:1.35em; margin-top:10px;}
    .brand .sec2 .box1 .txt p br {display: none;}
    .brand .sec2 .box1 .txt .txt1 .ani_img {margin:0px -32px 0 15px; width:80px;}
    .brand .sec2 .box1 .txt .txt1 .arrow {width:80px;}
    .brand .sec2 .box1 .txt .txt1 .ani_img {opacity: 1;}
    .brand .sec2 .box1 .txt .txt1 .arrow {opacity: 1;}

    .brand .sec2 .box2 .txt .txt2 {font-size:250px; top:-140px;}
    .brand .sec2 .box2 .img {border-radius:10px;}
    .brand .sec2 .box2 .txt {padding:25px 0;}
    .brand .sec2 .box2 .txt h2 {font-size:25px;}
    .brand .sec2 .box2 .txt h2 span {font-size:16px; margin-left:8px;}
    .brand .sec2 .box2 .txt p {font-size:14px; line-height:1.35em; margin-top:10px;}
    .brand .sec2 .box2 .txt p br {display: none;}
    .brand .sec2 .box2 .txt .txt1 .ani_img {margin:0px -32px 0 15px; width:80px;}
    .brand .sec2 .box2 .txt .txt1 .arrow {width:80px;}
    .brand .sec2 .box2 .txt .txt1 .ani_img {opacity: 1;}
    .brand .sec2 .box2 .txt .txt1 .arrow {opacity: 1;}
}