.j-offset-top { -webkit-transition: all 750ms; -o-transition: all 750ms; -moz-transition: all 750ms; transition: all 750ms; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); opacity: 0; }
.j-offset-top.run { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; }
.big-wrap{width:1600px;margin: 0 auto}
@media (max-width: 1660px) {.big-wrap {width: 1430px;}}
@media (max-width: 1460px) {.big-wrap {width: 1230px;}}
@media (max-width: 1260px) {.big-wrap {width: 980px;}}
@media (max-width: 992px) {.big-wrap {width: 750px;} }
@media (max-width: 768px) {.big-wrap { width: 96%; }}
.brandMarketing .banner { width: 100%;}
.brandMarketing .banner img { width: 100%;}
.brandMarketing .title { text-align: center;}
.brandMarketing .title img { width: 623px;}
.brandMarketing .title p { margin-top: -44px; font-size: 48px; color: #0077C8; line-height: 1;}
.brandMarketing .s-title { margin-top: 30px; font-size: 18px; color: #333333; text-align: center;}
@media (max-width: 1460px) {
  .brandMarketing .title img { width: 500px;}
  .brandMarketing .title p { margin-top: -37px; font-size: 40px; line-height: 46px;}
}
@media (max-width: 1260px) {
  .brandMarketing .title img { width: 400px;}
  .brandMarketing .title p { margin-top: -30px; font-size: 30px; line-height: 36px;}
  .brandMarketing .s-title { margin-top: 25px; font-size: 16px;}
}
@media (max-width: 992px) {
  .brandMarketing .title img { width: 300px;}
  .brandMarketing .title p { margin-top: -25px; font-size: 28px; line-height: 34px;}
}
@media (max-width: 768px) {
  .brandMarketing .title p { margin-top: -20px; font-size: 24px; line-height: 30px;}
  .brandMarketing .s-title { margin-top: 15px; font-size: 14px;}
}

.brandMarketing .sec1 { padding: 110px 0;}
.brandMarketing .sec1 .cont .title { text-align: left;}
.brandMarketing .sec1 .cont .left { flex: 1; padding: 0 4% 0 8.3%;}
.brandMarketing .sec1 .cont .left .title { margin-top: 27px;}
.brandMarketing .sec1 .cont .left .desc { margin-top: 40px; font-size: 18px; color: #333333; line-height: 30px;}
.brandMarketing .sec1 .cont .left .list { margin-top: 40px; font-size: 18px;color: #333333;line-height: 1; justify-content: flex-start;}
.brandMarketing .sec1 .cont .left .list .item { width: 24%;}
.brandMarketing .sec1 .cont .left .list .item:nth-of-type(1) { width: 20%;}
.brandMarketing .sec1 .cont .left .list .item p { padding: 6px 0;}
.brandMarketing .sec1 .cont .left .text1 { display: inline-block; margin-top: 26px; padding: 10px 0; border-top: 1px solid #A1A1A1; border-bottom: 1px solid #A1A1A1; font-size: 18px; color: #333333; line-height: 26px;}
.brandMarketing .sec1 .cont .left .text2 { margin-top: 50px; font-size: 18px; color: #333333; line-height: 28px;}
.brandMarketing .sec1 .cont .right { width: 50%;}
.brandMarketing .sec1 .cont .right img { width: 100%;}
.brandMarketing .sec1 .cont::after { content: ''; display: block; clear: both;}
@media (max-width: 1460px) {
  .brandMarketing .sec1 { padding: 90px 0;}
  .brandMarketing .sec1 .cont .left .title { margin-top: 0;}
  .brandMarketing .sec1 .cont .left .desc { margin-top: 30px; font-size: 16px; line-height: 26px;}
  .brandMarketing .sec1 .cont .left .list { margin-top: 30px; font-size: 16px;}
  .brandMarketing .sec1 .cont .left .list .item { width: 33%;}
  .brandMarketing .sec1 .cont .left .list .item:nth-of-type(1) { width: 29%;}
  .brandMarketing .sec1 .cont .left .list .item p { padding: 5px 0;}
  .brandMarketing .sec1 .cont .left .text1 { margin-top: 20px; padding: 10px 0; font-size: 16px; line-height: 24px;}
  .brandMarketing .sec1 .cont .left .text2 { margin-top: 35px; font-size: 16px; line-height: 26px;}
}
@media (max-width: 1260px) {
  .brandMarketing .sec1 { padding: 60px 0;}
  .brandMarketing .sec1 .cont .right { width: 48%;}
  .brandMarketing .sec1 .cont .left .desc { margin-top: 25px;}
  .brandMarketing .sec1 .cont .left .list { margin-top: 25px;}
  .brandMarketing .sec1 .cont .left .text1 { margin-top: 25px;}
  .brandMarketing .sec1 .cont .left .text2 { margin-top: 30px;}
}
@media (max-width: 992px) {
  .brandMarketing .sec1 .cont .left .desc { margin-top: 20px; font-size: 14px; line-height: 24px;}
  .brandMarketing .sec1 .cont .left .list { margin-top: 20px; font-size: 14px;}
  .brandMarketing .sec1 .cont .left .list .item { width: 33%;}
  .brandMarketing .sec1 .cont .left .list .item:nth-of-type(1) { width: 29%;}
  .brandMarketing .sec1 .cont .left .text1 { margin-top: 10px; padding: 6px 0; font-size: 14px; line-height: 22px;}
  .brandMarketing .sec1 .cont .left .text2 { margin-top: 25px; font-size: 14px; line-height: 24px;}
}
@media (max-width: 768px) {
  .brandMarketing .sec1 { padding: 30px 0;}
  .brandMarketing .sec1 .cont .left { padding: 0 2%;}
  .brandMarketing .sec1 .cont .right { width: 100%; margin-top: 20px;}
}

.brandMarketing .sec2 { margin-top: 10px; padding-bottom: 110px;}
.brandMarketing .sec2 .cont { margin-top: 50px; position: relative;}
.brandMarketing .sec2 .cont .list { width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.brandMarketing .sec2 .cont .list .item {position: relative; width: 33.2%; height: calc(33.33% - 1px); margin-bottom: 1px; background: rgba(0, 0, 0, 0.6); text-align: center; display: flex; flex-direction: column; justify-content: center; position: relative;}
.brandMarketing .sec2 .cont .list .item .num { font-size: 120px; font-family: Poppins-SemiBold; line-height: 1; color: rgba(255, 255, 255, 0.08);}
.brandMarketing .sec2 .cont .list .item .name { padding: 0 10px; font-size: 20px; color: #FFFFFF; line-height: 1; z-index: 2;}
.brandMarketing .sec2 .cont .list .item img { display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1;}
.brandMarketing .sec2 .cont .list .item.active .name { font-size: 30px; font-weight: bold; position: absolute; right: 20px; bottom: 25px;}
.brandMarketing .sec2 .cont .list .item.active img { display: block;}
.brandMarketing .sec2 .cont .list .item .zz{position: absolute;top: 0;bottom: 0;left: 0;right: 0;opacity: 0}
.brandMarketing .sec2 .cont .list .item .zz:before{content: '';position: absolute;top: 0;left: 0;height: 100%;width: 100%;background: url("../img/brandmarketing/sec2-img-bg.png");background-size: 100% 100%;z-index: 99;
  opacity: 0.5;}
.brandMarketing .sec2 .cont .list .item .zz img{display: block;width: 100%}
.brandMarketing .sec2 .cont .list .item:hover .zz{opacity: 1}
 .brandMarketing .sec2 .cont .list .item:hover .name { font-weight: bold; position: absolute; right: 30px; bottom: 23px;z-index: 99999}
.brandMarketing .sec2 .cont .list .item:hover  img { display: block;}
@media (max-width: 1460px) {
}
@media (max-width: 1260px) {
  .brandMarketing .sec2 { padding-bottom: 60px;}
  .brandMarketing .sec2 .cont .list .item .num { font-size: 80px;}
  .brandMarketing .sec2 .cont .list .item .name { font-size: 18px;}
  .brandMarketing .sec2 .cont .list .item.active .name { font-size: 26px; right: 15px;}
  .brandMarketing .sec2 .cont .list .item:hover .name{bottom: 10px}
}
@media (max-width: 992px) {
  .brandMarketing .sec2 { padding-bottom: 30px;}
  .brandMarketing .sec2 .cont .list .item .num { font-size: 60px;}
  .brandMarketing .sec2 .cont .list .item .name { font-size: 16px;}
    .brandMarketing .sec2 .cont .list .item:hover .name{bottom: 5px;right: 15px}
}
@media (max-width: 768px) {
  /*.brandMarketing .sec2 .cont { margin-top: 3px;}*/
  .brandMarketing .sec2 .cont .list .item .num { font-size: 30px;}
  .brandMarketing .sec2 .cont .list .item .name { font-size: 12px;zoom: 0.8}
  .brandMarketing .sec2 .cont .list .item.active .name { font-size: 14px; right: 0; bottom: 10px;}
  .brandMarketing .sec2 .cont .list .item:hover .name {bottom: 2px;right: 0px;font-weight: 400}
}

.brandMarketing .sec3 { background-color: rgba(235, 235, 235, 0.3);}
.brandMarketing .sec3 .cont .left { padding: 125px 0 182px; width: 36.4%; min-width: 510px; padding-left: 8%; background-image: url(../img/brandmarketing/sec3-img.png); background-size: 100% 100%;}
.brandMarketing .sec3 .cont .left .title { text-align: left;}
.brandMarketing .sec3 .cont .left .title p { margin-top: -30px; color: #FFFFFF;}
.brandMarketing .sec3 .cont .left .text { margin-top: 18px; font-size: 18px;color: #FFFFFF;line-height: 30px;}
.brandMarketing .sec3 .cont .left .text span { font-weight: bold;}
.brandMarketing .sec3 .cont .left .text span em { font-style: normal;}
.brandMarketing .sec3 .cont .right { width: 63.6%; max-width: calc(100% - 510px); padding: 125px 8% 3% 4%;}
.brandMarketing .sec3 .cont .right .mySwiper { width: 100%; padding-bottom: 48px;}
.brandMarketing .sec3 .cont .right .mySwiper .swiper-slide { margin-bottom: 6px;}
.brandMarketing .sec3 .cont .right .mySwiper .swiper-slide img { width: 100%; height: 100%; object-fit: contain; transition: 0.3s;}
.brandMarketing .sec3 .cont .right .mySwiper .swiper-slide img:hover { transform: scale(1.1);}
.brandMarketing .sec3 .cont .right .mySwiper .swiper-pagination { text-align: right; bottom: 0;}
.brandMarketing .sec3 .cont .right .mySwiper .swiper-pagination .swiper-pagination-bullet { width: 11px; height: 11px; background: rgba(31, 30, 42, 0.7); opacity: 1;}
.brandMarketing .sec3 .cont .right .mySwiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { border: 1px solid #1F1E2A; background: #FFFFFF;}
@media (max-width: 1660px) {
  .brandMarketing .sec3 .cont .left { padding-left: 6%; min-width: 460px;}
  .brandMarketing .sec3 .cont .right { max-width: calc(100% - 460px); padding: 125px 6% 3% 3%;}
}
@media (max-width: 1460px) {
  .brandMarketing .sec3 .cont .left { padding: 100px 0 150px; padding-left: 6%;}
  .brandMarketing .sec3 .cont .right { padding: 100px 6% 2% 3%;}
  .brandMarketing .sec3 .cont .left .text { font-size: 16px; line-height: 26px;}
}
@media (max-width: 1260px) {
  .brandMarketing .sec3 .cont .left { padding: 60px 0 110px; padding-left: 6%; min-width: 370px;}
  .brandMarketing .sec3 .cont .left .title p { margin-top: -22px;}
  .brandMarketing .sec3 .cont .right { max-width: calc(100% - 370px); padding: 60px 6% 3% 3%;}
  .brandMarketing .sec3 .cont .right .mySwiper { padding-bottom: 30px;}
}
@media (max-width: 992px) {
  .brandMarketing .sec3 .cont .left { min-width: 370px;}
  .brandMarketing .sec3 .cont .right { max-width: calc(100% - 370px);}
  .brandMarketing .sec3 .cont .left .title p { margin-top: -20px;}
  .brandMarketing .sec3 .cont .left .text { font-size: 14px; line-height: 22px;}
}
@media (max-width: 768px) {
  .brandMarketing .sec3 .cont .left { padding: 30px 0; padding-left: 2%; width: 100%; min-width: unset;}
  .brandMarketing .sec3 .cont .right { width: 100%; max-width: unset; padding: 20px 2% 3% 2%;}
  .brandMarketing .sec3 .cont .right .mySwiper .swiper-slide { margin-bottom: 0;}
  .brandMarketing .sec3 .cont .right .mySwiper .swiper-slide img:hover { transform: scale(1);}
  .brandMarketing .sec3 .cont .right .mySwiper .swiper-pagination { text-align: center;}
  .brandMarketing .sec3 .cont .right .mySwiper .swiper-pagination .swiper-pagination-bullet { width: 8px; height: 8px;}
}

.brandMarketing .sec4 { padding: 101px 0 75px; background: url(../img/brandmarketing/sec4-img.png); background-size: 100% 100%;}
.brandMarketing .sec4 .cont { margin-top: 45px; position: relative; height: 462px;}
.brandMarketing .sec4 .cont img { position: absolute; transition: 0.3s;}
.brandMarketing .sec4 .cont img:hover { transform: scale(1.1);}
.brandMarketing .sec4 .cont img:nth-of-type(1) { left: 8.3%; top: 53.9%;}
.brandMarketing .sec4 .cont img:nth-of-type(2) { left: 26.9%; top: 16%;}
.brandMarketing .sec4 .cont img:nth-of-type(3) { left: 36.3%; bottom: 10.8%;}
.brandMarketing .sec4 .cont img:nth-of-type(4) { right: 35.7%; top: 0;}
.brandMarketing .sec4 .cont img:nth-of-type(5) { right: 27.2%; bottom: 0;}
.brandMarketing .sec4 .cont img:nth-of-type(6) { right: 8.2%; top: 27.9%;}
@media (max-width: 1460px) {
  .brandMarketing .sec4 .cont img:nth-of-type(1) { width: 169px;}
  .brandMarketing .sec4 .cont img:nth-of-type(2) { width: 151px;}
  .brandMarketing .sec4 .cont img:nth-of-type(3) { width: 178px;}
  .brandMarketing .sec4 .cont img:nth-of-type(4) { width: 225px;}
  .brandMarketing .sec4 .cont img:nth-of-type(5) { width: 195px;}
  .brandMarketing .sec4 .cont img:nth-of-type(6) { width: 175px;}
}
@media (max-width: 1260px) {
  .brandMarketing .sec4 { padding: 60px 0;}
  .brandMarketing .sec4 .cont { height: 350px;}
  .brandMarketing .sec4 .cont img:nth-of-type(1) { width: 135px;}
  .brandMarketing .sec4 .cont img:nth-of-type(2) { width: 120px;}
  .brandMarketing .sec4 .cont img:nth-of-type(3) { width: 142px;}
  .brandMarketing .sec4 .cont img:nth-of-type(4) { width: 180px;}
  .brandMarketing .sec4 .cont img:nth-of-type(5) { width: 156px;}
  .brandMarketing .sec4 .cont img:nth-of-type(6) { width: 140px;}
}
@media (max-width: 992px) {
  .brandMarketing .sec4 .cont { height: 280px;}
  .brandMarketing .sec4 .cont img:nth-of-type(1) { width: 108px;}
  .brandMarketing .sec4 .cont img:nth-of-type(2) { width: 96px;}
  .brandMarketing .sec4 .cont img:nth-of-type(3) { width: 113px;}
  .brandMarketing .sec4 .cont img:nth-of-type(4) { width: 144px;}
  .brandMarketing .sec4 .cont img:nth-of-type(5) { width: 124px;}
  .brandMarketing .sec4 .cont img:nth-of-type(6) { width: 112px;}
}
@media (max-width: 768px) {
  .brandMarketing .sec4 { padding: 30px 0;}
  .brandMarketing .sec4 .cont { height: auto; margin-top: 10px;}
  .brandMarketing .sec4 .cont img:hover { transform: scale(1);}
  .brandMarketing .sec4 .cont img { width: 26% !important; margin: 0 3%; position: unset; margin-top: 20px;}
  .brandMarketing .sec4 .cont img:nth-child(3n) { margin-right: 0;}
  .brandMarketing .sec4 .cont img:hover { transform: scale(1);}
}

.brandMarketing .sec5 { padding: 108px 0 110px;}
.brandMarketing .sec5 .list .item { margin-top: 80px; width: 29.81%;}
.brandMarketing .sec5 .list .item .img-box { border-radius: 10px; overflow: hidden;}
.brandMarketing .sec5 .list .item .img-box img { width: 100%; transition: 0.3s;}
.brandMarketing .sec5 .list .item .img-box img:hover { transform: scale(1.1);}
.brandMarketing .sec5 .list .item .name { margin-top: 50px; font-size: 24px; color: #222222; line-height: 30px;}
.brandMarketing .sec5 .list .item .more { margin-top: 27px; font-size: 16px; color: #222222; line-height: 1; display: flex; align-items: center;}
.brandMarketing .sec5 .list .item .more .icon { font-size: 22px; line-height: 1; margin-left: 5px;}
.brandMarketing .sec5 .list .item .more:hover { color: #0077C8;}
@media (max-width: 1460px) {
  .brandMarketing .sec5 { padding: 90px 0;}
  .brandMarketing .sec5 .list .item .name { margin-top: 40px;}
  .brandMarketing .sec5 .list .item .more { margin-top: 20px;}
}
@media (max-width: 1260px) {
  .brandMarketing .sec5 { padding: 60px 0;}
  .brandMarketing .sec5 .list .item { margin-top: 50px;}
  .brandMarketing .sec5 .list .item .name { margin-top: 30px; font-size: 20px;}
  .brandMarketing .sec5 .list .item .more { margin-top: 15px;}
}
@media (max-width: 992px) {
  .brandMarketing .sec5 .list .item .name { margin-top: 20px; font-size: 18px;}
  .brandMarketing .sec5 .list .item .more { margin-top: 10px; font-size: 14px;}
}
@media (max-width: 768px) {
  .brandMarketing .sec5 { padding: 30px 0;}
  .brandMarketing .sec5 .list .item { margin-top: 30px; width: 100%;}
  .brandMarketing .sec5 .list .item .img-box img:hover { transform: scale(1);}
  .brandMarketing .sec5 .list .item .name { margin-top: 10px;}
  .brandMarketing .sec5 .list .item .more { margin-top: 5px;}
}

.brand-form { padding: 111px 0; background: #0077C8;}
.brand-form .title { text-align: center;}
.brand-form .title p { margin-top: -44px; font-size: 48px; color: #FFFFFF; font-weight: normal;}
.brand-form .s-title { font-size: 16px; color: #FFFFFF; margin-top: 20px; text-align: center; line-height: 20px;}
.brand-form .form-box { margin-top: 40px; padding: 0 140px;}
.brand-form .form-box .item-box { flex: 1;}
.brand-form .form-box .item { border-bottom: 1px solid #FFFFFF; padding: 10px 0; margin-right: 20px;}
.brand-form .form-box .item img { float: left; margin-top: 6px; margin-right: 6px;}
.brand-form .form-box .item span { font-size: 16px; color: #FFFFFF; line-height: 30px;}
.brand-form .form-box .item input { width: calc(100% - 108px); font-size: 16px; color: #FFFFFF; line-height: 30px;}
.brand-form .form-box .btn { margin-left: 10px; display: inline-block; width: 141px;height: 52px;background: #FFFFFF;border-radius: 26px;font-size: 16px;color: #333333; line-height: 52px; text-align: center;}
.brand-form .form-box .btn:hover { opacity: 0.8;;}
@media (max-width: 1460px) {
  .brand-form .title img { width: 500px;}
  .brand-form .title p { margin-top: -32px; font-size: 40px; line-height: 46px;}
}
@media screen and (max-width: 1260px) {
  .brand-form .title img { width: 400px;}
  .brand-form .title p { margin-top: -32px; font-size: 30px; line-height: 36px;}
  .brand-form .form-box { padding: 0;}
  .brand-form .form-box .item { padding: 5px 0;}
  .brand-form .form-box .btn { width: 110px; height: 40px;line-height: 40px;}
}
@media screen and (max-width: 992px) {
  .brand-form { padding: 80px 0;}
  .brand-form .title img { width: 300px;}
  .brand-form .title p { margin-top: -25px; font-size: 28px; line-height: 34px;}
  .brand-form .form-box { margin-top: 30px;}
}
@media screen and (max-width: 767px) {
  .brand-form { padding: 50px 0;}
  .brand-form .title p { font-size: 24px; line-height: 30px;}
  .brand-form .s-title { font-size: 14px; margin-top: 15px;}
  .brand-form .form-box .item-box { flex: unset; width: 100%; margin-bottom: 10px;}
  .brand-form .form-box .item { width: 100%; margin-right: 0;}
  .brand-form .form-box .item img { width: 20px; height: auto;}
  .brand-form .form-box .item.item-email img { margin-top: 8px;}
  .brand-form .form-box .item span { font-size: 12px;}
  .brand-form .form-box .btn { display: block; width: 100%; margin-top: 20px; margin-left: 0; height: 36px; font-size: 14px;}
}

@font-face {
	font-family: 'Poppins-SemiBold';
    src: url('../font/Poppins-SemiBold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}