body{
    /* background: #1e1e1e; */
}
/* 头部 */
.header-bar {
    width: 100%;
    height: 90px;
    display: flex;
    background: url("../images/nav/导航.png") no-repeat;
    background-size: cover;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    font-family: DINPro-Bold;
    font-weight: bold;
    position: relative;
}

.header-bar .logo {
    position: absolute;
    right: 72%;
    top: 50%;
    transform: translateY(-50%);
    background: url("../images/nav/logo.png") no-repeat;
    width: 251px;
    height: 34px;
    background-size: cover;
}


.main-bg{
    background: url("../images/develop/header.png") no-repeat;
    background-size: cover;
    width: 100%;
    height: 828px;
}
.main-bar{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.main-bar-title{
    margin: 446px 0 168px;
}
.main-bar-title p{
    font-style: italic;
    color: #fff;
    text-align: center;
}
.main-bar-title p:first-child{
	font-size: 35px;
    letter-spacing: 4px;
    margin-bottom: 25px;
}
.main-bar-title p:last-child{
	font-size: 64px;
	letter-spacing: 3px;
}
.bar-title{
    height: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bar-title .words {
    font-family: DINPro-Regular;
    font-style: italic;
    font-size: 18px;
    color: #fff;
    margin: 0 17px;
}
.bar-title .left-icon,.bar-title .right-icon {
    width: 14px;
    height: 12px;
    background-size: cover;
    /* cursor: pointer; */
}
.bar-title .left-icon {
    background-image: url(../images/develop/arrow-left.png)
}
.bar-title .right-icon {
    background-image: url(../images/develop/arrow-right.png)
}
.swiper-outer {
    width: 1003px;
    margin: 0 auto;
    margin-bottom: 20px;
    margin-top: 250px;
    position: relative;
}
.swiper-title {
    display: flex;
    align-items: center;
    position: absolute;
    top: -300px;
    left: 50%;
    transform: translateX(-50%);
}

.swiper-active-des {
    position: absolute;
    width: 400px;
    height: 174px;
    left: 50%;
    margin-left: -200px;
    top: -210px;
    background-image: url(../images/develop/swiper-des.png);
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.swiper-active-des .swiper-active-info{
    padding-right: 10px;
}
.swiper-active-des::before,.swiper-active-des::after {
    content: '';
    position: absolute;
    background-image: url(../images/develop/swiper-icon.png);
    background-size: cover;
    width: 96px;
    height: 57px;
    bottom: -30px;
}
.swiper-active-des::before {
    left: -196px;
}
.swiper-active-des::after {
    right: -196px;
}
.swiper-active-info p{
    color: #fff;
    text-align: center;
    font-style: italic;
    font-family: DINPro-Bold;
    font-weight: bold;
}
.swiper-active-info p:first-child{
    font-size: 24px;
    line-height: 25px;
}
.swiper-active-info p:nth-child(2){
    font-size: 14px;
    color: #cccccc;
}
.swiper-des-line {
    position: absolute;
    height: 62px;
    left: 50%;
    top: -27px;
	border-left: dotted 1px #fff;
}
/* .swiper-icon-left,.swiper-icon-right {
    position: absolute;
    width: 96px;
    height: 57px;
    background-image: url(../images/develop/swiper-icon.png);
    background-size: cover;
    top: -62px;
} */
.swiper-icon-left {
    left: 105px;
}
.swiper-icon-right {
    right: 105px;
}
.mySwiper{
    width: 806px;
    height: 150px;
}
.swiper-btn-next,.swiper-btn-prev {
    width: 32px;
    height: 32px;
    position: absolute;
    top: 59px;
    background-size: cover;
    cursor: pointer;
}
.swiper-btn-next{
    background: url("../images/develop/swiper-arrow-right.png") no-repeat;
    right: -10px;
}
.swiper-btn-prev{
    background: url("../images/develop/swiper-arrow-left.png") no-repeat;
    left: -10px;
}
.swiper-slide {
    text-align: center;
    font-size: 40px;
    font-style: italic;
    color: #fff;
    letter-spacing: 6px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    box-sizing: border-box;
}
.swiper-slide.swiper-slide-prev {
    justify-content: flex-start;
}
.swiper-slide.swiper-slide-next {
    justify-content: flex-end;
}
.swiper-slide-active{
    position: relative;
}
.swiper-slide-active::before {
    content: '';
    position: absolute;
    width: 162px;
    height: 100px;
    left: 50%;
    top: 10px;
    margin-left: -81px;
    background-image: url(../images/develop/swiper-year-active.png);
    background-size: cover;
}
.swiper-outer::before,.swiper-outer::after {
    position: absolute;
    top: 50%;
    margin-top: -2px;
    content: '';
    display: block;
    width: 35px;
	height: 4px;
    background: #454545;
}
.swiper-outer::before{
    left: 43px;
}
.swiper-outer::after{
    right: 43px;
}
.line-before,.line-after{
    position: absolute;
    background: url("../images/develop/swiper-line.png") no-repeat;
    background-size: cover;
    width: 201px;
    height: 12px;
    top: 50%;
    margin-top: -6px;
}
.line-before{
    left: 125px;
}
.line-after{
    right: 125px;
}

.experience-bar{
    display: flex;
    margin-bottom: 52px;
}
.experience-card{
    margin-right: 31px;
    width: 250px;
    position: relative;
}
.experience-card-left{
    width: 236px;
}
.experience-card-left img{
    display: block;
    width: 175px;
    height: 175px;
    margin: 0 auto 22px;
}
.experience-card-left p{
    font-size: 20px;
    color: #fff;
    letter-spacing: 2px;
    font-style: italic;
    text-align: center;
}
.arrow-right{
    background: url("../images/develop/arrow-right.png") no-repeat;
    background-size: cover;
    width: 14px;
    height: 12px;
    position: absolute;
    top: 84px;
    right: 0;
    transform: translateX(100%);
}
.brand-bar{
    margin-bottom: 34px;
}
.brand-bar-title{
    margin-top: 38px;
    margin-bottom: 49px;
}
.brand-bar-container{
    width: 1101px;
    height: 579px;
    position: relative;
}
.brand-bar-container .center{
    background: url("../images/develop/六边形.png") no-repeat;
    background-size: cover;
    width: 201px;
    height: 229px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.brand-bar-container .center p{
    font-style: italic;
    color: #fff;
}
.brand-bar-container .center p:first-child{
    font-family: DINPro-Regular;
    font-size: 18px;
    margin-bottom: 15px;
}
.brand-bar-container .center p:last-child{
    font-family: DINPro-Black;
    line-height: 55px;
}
.brand-bar-container .center p span:first-child{
    font-size: 76px;
}
.brand-bar-container .center p span:last-child{
    font-size: 54px;
}
.brand-bar-container .brand-img{
    background-size: cover;
    opacity: 0.1;
    position: absolute;
    cursor: pointer;
}
.brand-bar-container .brand-img:hover{
    opacity: 1;
}

.flagship-bar{
    margin-bottom: 41px;
}
.flagship-bar-title{
    margin: 38px 0 49px;
}
.flagship-bar-container, .trendy-bar-container{
    display: flex;
    justify-content: space-between;
    width: 1200px;
}
.flagship-card, .trendy-card{
    background-color: #333333;
	border-radius: 6px;
    border: solid 2px #ff6573;
    padding: 20px 17px 6px;
    color: #c1c1c1;
}
.trendy-card{
    padding: 30px 10px 60px;  
}
.flagship-card-title, .trendy-card-title{
    font-family: DINPro-Bold;
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 28px;
    text-align: center;
    color: #fff;
}
.flagship-card-info, .trendy-card-info{
    margin-bottom: 16px;
}
.flagship-card-info-item, .trendy-card-info-item{
    display: flex;
}
.flagship-card-info-item-icon, .trendy-card-info-item-icon{
    background: url(../images/develop/two-circle.png) no-repeat;
    background-size: cover;
    width: 13px;
    height: 14px;
    margin-right: 11px;
    margin-top: 2px;
}
.flagship-card-info-item p, .trendy-card-info-item p{
    flex: 1;
    line-height: 1.5em;
}
.flagship-card-img{
    background-size: cover;
    width: 100%;
    margin: 7px 0;
}
.flagship-card-tips{
    color: #c1c1c1;
    font-style: italic;
    font-size: 12px;
    font-family: DINPro-Light;
    line-height: 1.5em;
}
.trendy-bar{
    margin-bottom: 48px;
}
.trendy-bar-title{
    margin: 34px 0 36px;
}
.trendy-card-img{
    background-size: cover;
    width: 100%;
    position: relative;

}
.trendy-card-img p{
    position: absolute;
    white-space: nowrap;
    text-align: center;
    font-family: DINPro-Light;
    font-size: 14px;
    font-style: italic;
}
.flourish-bar{
    display: none;
    margin: 47px 0 61px;
}
.flourish-bar-title{
    margin-bottom: 66px;
}
.flourish-bar-container{
    display: flex;
    width: 1060px;
    justify-content: space-between;
}
.flourish-card-name{
    font-family: DINPro-Light;
    font-size: 16px;
    font-style: italic;
    color: #fcfbfa;
    margin-bottom: 23px;
    text-align: center;
}
.flourish-card-info{
    background-size: cover;
}
.contact-bar{
    display: none;
    margin: 64px 0 102px;
    background-size: cover;
}
.bottom-bar{
    margin-top: 64px;
    background: url("../images/nav/底条.png") no-repeat;
    background-size: cover;
    width: 100%;
    height: 200px;
}