.common-allergies-wrap{
    font-family: 'Noto Sans TC', sans-serif;
}
.common-allergies-wrap .banner{
    position: relative;
}
.common-allergies-wrap .banner span{
    color: #5e366f;
    font-size: 7.5vw;
    line-height: 9.11vw;
    letter-spacing: 0.37vw;
    position: absolute;
    top: 18.12vw;
    left: 12.28vw;
    font-weight: 500;
}
.common-allergies-wrap .banner .remarks{
    color: #5e366f;
    position: absolute;
    left: 1.1%;
    bottom: 1.8%;
    font-size: 9px;
    font-size: clamp(9px, 0.8vw, 15px);
}
@media (max-width: 767px) {
    .common-allergies-wrap .banner span {
        font-size: 12.29vw;
        top: 28.12vw;
    }
    .common-allergies-wrap .banner .remarks{
        display: none;
    }
}
.common-allergies-wrap .content{
    box-sizing: border-box;
    background: url('../images/common-allergies/background.jpg') no-repeat center center;
    background-size: cover;
    overflow: hidden;
}
@media (max-width: 1200px) {
    .common-allergies-wrap .content{
        box-sizing: border-box;
        background: url('../images/common-allergies/background-pad.jpg') no-repeat top center;
        background-size: cover;
        overflow: hidden;
    }
}
.common-allergies-wrap .content > div {
    max-width: 1173px;
    margin: 0 auto;
}
@media (max-width: 1200px) {
    .common-allergies-wrap .content > div {
        max-width: 83.56vw;
        margin: 0 auto;
    }
}
@media (max-width: 767px) {
    .common-allergies-wrap .content > div {
        max-width: 86.81vw;
        margin: 0 auto;
    }
}
.common-allergies-wrap .content>.title{
   text-align: center;
   font-size: 46px;
   font-weight: 700;
   line-height: 55px;
   letter-spacing: 2.3px;
   color: #5e366f;
   margin: 119px auto 20px;
}
@media (max-width: 1200px) {
    .common-allergies-wrap .content>.title{
        font-weight: 700;
        line-height: 4.03vw;
        margin: 9.39vw auto 3.5vw;
        letter-spacing: 0.17vw;
    }
}
@media (max-width: 991px) {
    .common-allergies-wrap .content>.title{
        font-size: 43px;
    }
}
@media (max-width: 767px) {
    .common-allergies-wrap .content>.title{
        font-weight: 700;
        font-size: 28px;
        line-height: 8.09vw;
        margin: 15.66vw auto 5.04vw;
        letter-spacing: 1.3px;
    }
}
.common-allergies-wrap .content .brand-des-wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
@media (max-width: 767px) {
    .common-allergies-wrap .content .brand-des-wrap{
        flex-direction: column;
    }
}
.common-allergies-wrap .content .brand-des-wrap .item{
    width: 50%;
    position: relative;
}
@media (max-width: 767px) {
    .common-allergies-wrap .content .brand-des-wrap .item{
        width: 100%;
    }
}
.common-allergies-wrap .content .brand-des-wrap .item .des{
    font-size: 24px;
    line-height: 36px;
    font-weight: 500;
    color: #5e366f;
    width: 433px;
    height: 312px;
    position: absolute;
    top: 96px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    letter-spacing: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}
@media (max-width: 1200px) {
    .common-allergies-wrap .content .brand-des-wrap .item .des{
        width: 31.70vw;
        height: 17.86vw;
        font-size: 1.71vw;
        line-height: 2.62vw;
        top: 8.07vw;
    }
}
@media (max-width: 767px) {
    .common-allergies-wrap .content .brand-des-wrap .item .des{
        width: 66.18vw;
        height: 34.98vw;
        font-size: 3.65vw;
        line-height: 5.35vw;
        top: 20.62vw;
    }
}
.common-allergies-wrap .content .brand-des-wrap .item .sub-top{
    font-size: 14px;
    position: relative;
    top: -10px;
}
@media (max-width: 1200px) {
    .common-allergies-wrap .content .brand-des-wrap .item .sub-top{
        font-size: 1.00vw;
        top: -0.71vw;
    }
}
@media (max-width: 767px) {
    .common-allergies-wrap .content .brand-des-wrap .item .sub-top{
        font-size: 1.95vw;
        top: -1.30vw;
    }
}
.common-allergies-wrap .content .brand-des-wrap .item .title{
    font-size: 34px;
    line-height: 36px;
    font-weight: 600;
    color: white;
    position: absolute;
    top: 36px;
    width: 100%;
    text-align: center;
    left: 1.5%;
}
@media (max-width: 1200px) {
    .common-allergies-wrap .content .brand-des-wrap .item .title{
        font-size: 2.42vw;
        line-height: 2.62vw;
        top: 2.6vw;
        font-weight: 600;
    }
}
@media (max-width: 767px) {
    .common-allergies-wrap .content .brand-des-wrap .item .title{
        font-size: 5.09vw;
        line-height: 5.35vw;
        top: 5.5vw;
        font-weight: 600;
    }
}
.common-allergies-wrap .content .brand-des-wrap .item .brand{
    position: absolute;
    top: 106px;
    width: 100%;
    text-align: center;
}
@media (max-width: 1200px) {
    .common-allergies-wrap .content .brand-des-wrap .item .brand{
        top: 7.77vw;
    }
}
@media (max-width: 767px) {
    .common-allergies-wrap .content .brand-des-wrap .item .brand{
        top: 15.79vw;
    }
}
.common-allergies-wrap .content .brand-des-wrap .item .brand img{
    width: 223px;
}
@media (max-width: 1200px) {
    .common-allergies-wrap .content .brand-des-wrap .item .brand img{
        width: 16.14vw;
    }
}
@media (max-width: 767px) {
    .common-allergies-wrap .content .brand-des-wrap .item .brand img{
        width: 33.42vw;
    }
}
.common-allergies-wrap .content .brand-des-wrap .item .button{
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 58px;
}
@media (max-width: 1200px) {
    .common-allergies-wrap .content .brand-des-wrap .item .button{
        bottom: 3.22vw;
    }
}
@media (max-width: 767px) {
    .common-allergies-wrap .content .brand-des-wrap .item .button{
        bottom: 6.52vw;
    }
}
.common-allergies-wrap .content .brand-des-wrap .item .button img{
    width: 150px;
    cursor: pointer;
}
@media (max-width: 1200px) {
    .common-allergies-wrap .content .brand-des-wrap .item .button img{
        width: 10.89vw;
    }
}
@media (max-width: 767px) {
    .common-allergies-wrap .content .brand-des-wrap .item .button img{
        width: 22.45vw;
    }
}
.common-allergies-wrap .content .brand-des-wrap .item .button span{
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: 1.2px;
    color: #fff;
    position: absolute;
    left: 41%;
    top: 3px;
    cursor: pointer;
}
@media (max-width: 1200px) {
    .common-allergies-wrap .content .brand-des-wrap .item .button span{
       font-size: 1.71vw;
       line-height: 2.62vw;
       letter-spacing: 0.8px;
       left: 41%;
       top: 0.20vw;
    }
}
@media (max-width: 850px) {
    .common-allergies-wrap .content .brand-des-wrap .item .button span{
       top: 0.5vw;
    }
}
@media (max-width: 800px) {
    .common-allergies-wrap .content .brand-des-wrap .item .button span{
       top: 0.6vw;
    }
}
@media (max-width: 767px) {
    .common-allergies-wrap .content .brand-des-wrap .item .button span{
       font-size: 3.65vw;
       line-height: 5.35vw;
       letter-spacing: 1.2px;
       left: 40.5%;
       top: 0.58vw;
    }
}
.common-allergies-wrap .content>.sub-title{
    margin: 120px auto 60px;
}
@media (max-width: 1200px) {
    .common-allergies-wrap .content>.sub-title{
        margin: 6.05vw auto 4.54vw;
    }
}
@media (max-width: 767px) {
    .common-allergies-wrap .content>.sub-title{
        margin: 13.05vw auto 7.31vw;
    }
}

.common-allergies-wrap .content .brand-bottom{
    width: 1173px;
}
@media (max-width: 1200px) {
    .common-allergies-wrap .content .brand-bottom{
        width: 84.80vw;
    }
}
@media (max-width: 767px) {
    .common-allergies-wrap .content .brand-bottom{
        width: 86.82vw;
    }
}
.common-allergies-wrap div.bottom-tips{
    margin: 60px auto;
    font-family: Noto Sans TC;
}
@media (max-width: 1200px) {
    .common-allergies-wrap div.bottom-tips{
        max-width: 83.56vw;
        margin: 6.05vw auto;
    }
}
@media (max-width: 767px) {
    .common-allergies-wrap div.bottom-tips{
        max-width: unset;
        width: 91.02vw;
        margin: 7.83vw auto 2.61vw;
    }
}
.common-allergies-wrap .bottom-tips > div{
    display: flex;
    font-weight: 500;
    font-size: 10px;
    line-height: 15px;
    letter-spacing: 0px;
    color: #5E366F;
}
.common-allergies-wrap .bottom-tips > div.mt{
    margin-top: 20px;
}
.common-allergies-wrap .bottom-tips > div span:first-child{
    width: 22px;
}
.common-allergies-wrap .bottom-tips > div span:last-child{
    width: calc(100% - 22px);
}
/* 翻转动画 - 不修改原有样式，只添加动画效果 */
.common-allergies-wrap .content .brand-des-wrap .item.flip-to-des .brand-show .brand {
    animation: flipOut 0.4s ease-in forwards;
}

.common-allergies-wrap .content .brand-des-wrap .item.flip-to-des .brand-show .button {
    animation: flipOut 0.4s ease-in forwards;
}

.common-allergies-wrap .content .brand-des-wrap .item.flip-to-des .des {
    display: flex !important;
    animation: flipIn 0.4s ease-in 0.4s forwards;
    opacity: 0;
}

.common-allergies-wrap .content .brand-des-wrap .item.flip-to-brand .des {
    animation: flipOut 0.4s ease-in forwards;
}

.common-allergies-wrap .content .brand-des-wrap .item.flip-to-brand .brand-show {
    display: block !important;
    opacity: 0;
}

.common-allergies-wrap .content .brand-des-wrap .item.flip-to-brand .brand-show .brand {
    animation: flipIn 0.4s ease-in 0.4s forwards;
}

.common-allergies-wrap .content .brand-des-wrap .item.flip-to-brand .brand-show .button {
    animation: flipIn 0.4s ease-in 0.4s forwards;
}

@keyframes flipOut {
    0% { transform: rotateY(0deg); opacity: 1; }
    100% { transform: rotateY(-90deg); opacity: 0; }
}

@keyframes flipIn {
    0% { transform: rotateY(90deg); opacity: 0; }
    100% { transform: rotateY(0deg); opacity: 1; }
}