
.packageBanner {
    margin-top: 64px;
    text-align: center;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    /* background: linear-gradient(to right,#E8EFFA,#FEF9FB,#FBE6ED); */
    background-image: url('../assets/package/img_bg.png');
    background-size: 100% 100%;
    padding: 100px 0;
}
.opacityImage {
    position: absolute;
    top: 50%;
    left: 0;
    height: 400px;
    width: 100%;
    background: linear-gradient(
    to bottom,
    rgba(249, 250, 255, 1) 0%,    /* 顶部不透明（蓝色） */
    rgba(249, 250, 255, 0) 100%    /* 底部完全透明 */
  );
    /* background: linear-gradient(to bottom,); */
}
.leftBackImg {
    position: absolute;
    left: 6.5%;
    top: 6.5%;
    background-image: url('../assets/package/img_bg2.png');
    background-size: 100% 100%;
    width: 326px;
    height: 326px;
    z-index: 1;
}
.rightBackImg {
    position: absolute;
    right: 3%;
    top: 2%;
    background-image: url('../assets/package/img_bg1.png');
    background-size: 100% 100%;
    width: 482px;
    height: 362px;
    z-index: 1;
}
.bannerInnerBox {
   position: relative;
   margin: 0 13%;
}
.bannerTitle {
    font-weight: bold;
    font-size: 36px;
    color: #222222;
}
.compareMainPart {
    margin-top: 80px;
    display: flex;
    justify-content: center;
}
.fristPart{
    width: 24%;
    margin-right: 31px;
    box-shadow: 0px 3px 16px 1px rgba(52,112,255,0.06);
    border-radius: 16px 16px 16px 16px;
}
.fristPart:hover {
    transform: scale(1.1);
}
.fristPart:last-child {
    margin-right: 0;
}
.fristPart .topLimit {
    width: 100%;
    height: 310px;
    background-image: url('../assets/package/img_bg_wxb.png');
    background-size: 100% 100%;
    text-align: center;
}
.levelIcon {
    margin-top: 56px;
}
.partName {
    font-size: 28px;
    color: #000000;
    margin: 16px 0 8px;
}
.partDesc {
    font-size: 14px;
    color: #A1A7BB;
}
.partPrice{
    font-size: 40px;
    color: #000000;
    font-weight: bold;
    margin-top: 14px;
}
.partPrice .time{
    font-size: 14px;
    margin-left: 6px;
    font-weight: 500;
}
.bottomPartDetail{
    background-color: #fff;
    height: calc(100% - 310px);
    border-radius: 0px 0px 16px 16px;
}
.centerLimit {
    width: 90%;
    margin: 0px auto 0;
}
.contactServiceBtn{
    width: 100%;
    background: linear-gradient( 90deg, #53B7FE 0%, #3278FB 100%);
    box-shadow: 0px 3px 10px 1px rgba(52,112,255,0.2);
    border-radius: 6px 6px 6px 6px;
    text-align: center;
    font-size: 16px;
    padding: 11px 0;
    color: #FFFFFF;
    position: relative;
    top: -20px;
}
.packageMainContent .title {
    text-align: center;
    position: relative;
    margin-bottom: 16px;
}
.packageMainContent .title::before {
    content: '';
    display: inline-block;
    width: 20%;
    height: 1px;
    background: #E6E6E6;
    border-radius: 0px 0px 0px 0px;
    position: absolute;
    left: 0;
    top: 10px;
}
.packageMainContent .title::after {
    content: '';
    display: inline-block;
    width: 20%;
    height: 1px;
    background: #E6E6E6;
    border-radius: 0px 0px 0px 0px;
    position: absolute;
    right: 0;
    top: 10px;
}
.contentFlex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 14px;
    color: #222222;
    padding: 8px 10px;
}
.hasBackgeItem {
    background: #F5F9FF;
    border-radius: 4px 4px 4px 4px;
}
.hasBackgeItem .arrowIcon {
    display: inline-block;
    width: 10px;
    height: 6px;
    background-image: url('../assets/package/icon_xiala.png');
    background-size: 100% 100%;
}
.zhankai.hasBackgeItem .arrowIcon {
    background-image: url('../assets/package/icon_shouqi.png');
}
.zhankai.hasBackgeItem {
    padding-bottom: 0;
    margin-bottom: 0;
}

.contentFlex .correctIcon {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 8px;
}
.yellowPart .topLimit{
    background-image: url('../assets/package/img_bg_wrjb.png');
}
.yellowPart .contactServiceBtn{
    background: linear-gradient( 90deg, #FFDE5D 0%, #FFAF00 100%);
}
.yellowPart .hasBackgeItem {
    background: #FFFDF3;
}

.purplePart .topLimit{
    background-image: url('../assets/package/img_bg_zysjb.png');
}
.purplePart .contactServiceBtn{
    background: linear-gradient( 90deg, #BCB1FF 0%, #7664E7 100%);
}
.purplePart .hasBackgeItem {
    background: #FAF8FF;
}

.redPart .topLimit{
    background-image: url('../assets/package/img_bg_zzb.png');
}
.redPart .contactServiceBtn{
    background: linear-gradient( 90deg, #FC8333 0%, #FE4B3E 100%);
}
.redPart .hasBackgeItem {
    background: #FFF7F5;
}
.finalPart {
    margin-top: 130px;
}
.finalPart .titleName {
    text-align: center;
    font-weight: bold;
    font-size: 36px;
    color: #222222;
} 
.finalPart .secondTitle {
    font-weight: 400;
    font-size: 20px;
    color: #666666;
    margin: 20px 0 80px;
}
.squreCompareBox {
    display: flex;
    align-items: center;
}
.squreCompareBox .leftPart {
    width: 50%;
    height: 286px;
    background-image: url('../assets/package/img_bg_2d.png');
    background-size: 100% 100%;
    margin-right: 29px;
    box-shadow: 0px 3px 16px 1px rgba(52,112,255,0.06);
}
.squreCompareBox .rightPart {
    background-image: url('../assets/package/img_bg_3d.png');
    margin-right: 0px;
}
.leftPart .title {
    font-weight: 500;
    font-size: 24px;
    color: #FFFFFF;
    margin-top: 20px;
}
.squreCompareBox .leftPart:hover {
    transform: scale(1.1);
}
.squeFlex {
    display: flex;
    align-items: center;
    margin: 55px 28px 0;
}
.squreItem {
    background: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    border: 2px solid #EDEEF5;
    position: relative;
    height: 136px;
    width: 33%;
    margin-right: 20px;
}
.squreItem .mainPrice {
    font-weight: bold;
    font-size: 26px;
    color: #222222;
    margin: 6px 0;
}
.squreItem p {
    font-size: 16px;
    color: #747C94;
    margin-top: 23px;
}
.squreItem .lineThrought{
    text-decoration: line-through;
    color: #A1A7BB;
}
.squreItem  .mainPrice span {
    font-size: 18px;
}
.hotIcon {
    position: absolute;
    left: -2px;
    top: -1px;
    width: 86px;
height: 24px;
background: linear-gradient( 91deg, #FF8470 0%, #FF486A 100%);
border-radius: 60px 60px 60px 0px;
font-size: 12px;
color: #FFFFFF;
line-height: 24px;
}
.togetherMainPart{
    padding: 8px 12px 10px 10px;
    background: #F5F9FF;
    border-radius: 4px 4px 4px 4px;
    margin-bottom: 22px; 
    display: none;
}
.yellowPart .togetherMainPart {
    background: #FFFDF3;
}
.purplePart .togetherMainPart {
    background: #FAF8FF;
}
.redPart .togetherMainPart {
    background: #FFF7F5;
}
.speciaTogetherMainPart {
    padding: 8px 12px 10px 10px;
    background: #FFF7F5;
    border-radius: 4px 4px 4px 4px;
    margin-bottom: 22px; 
    display: none;
}

.moreDetailConten {
    background: #FFFFFF;
    border-radius: 6px 6px 6px 6px;
    padding: 21px 20px 21px 20px;
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
}
.leftDetailItem img{
    vertical-align: middle;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    margin-bottom: 17px;
    position: relative;
    top: 8px;
}
.leftDetailItem {
    text-align: left;
}
@media screen and (max-width: 1680px) {
    .moreDetailConten {
        padding: 10px;
    }
}
@media screen and (max-width: 1500px) {
    .bannerInnerBox {
        margin: 0 10.4%;
    }
}