.banner {
    background: url("https://img.asiancancer.com/images/newmoderncancerthai/images/medical_technology.jpg") no-repeat center;
    background-size: cover;
}

.content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-flow: row-reverse;
}

.content .main {
    width: 1046px;
    background: #ffffff;
    padding: 30px 20px;
    box-sizing: border-box;
    border-radius: 4px;
    margin-bottom: 20px;
}

.content .sidebar {
    width: 338px;
    box-sizing: border-box;
}

.content .main .cancer_treatment {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.content .main .cancer_treatment .title {
    width: 80%;
    box-sizing: border-box;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
}

.content .time {
    text-align: center;
    margin: 10px 0;
}

.content .parameter {
    display: flex;
    justify-content: center;
    margin: 20px auto;
}

.content .parameter ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.content .parameter ul li {
    display: inline-flex;
    padding: 0 20px;
    line-height: initial;
    margin-bottom: 10px;
}

.content .parameter ul li img {
    width: 25px;
    height: 25px;
    margin-right: 8px;
}

.content .parameter ul li .share {
    margin-left: 10px;
}

.content .parameter ul li .share ul li {
    padding: 0px;
    margin-bottom: 0;
}

.content .main .info {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    border: 1px solid #eeeeee;
    border-radius: 8px;
    padding: 15px;
    box-sizing: border-box;
    position: relative;
    flex-wrap: wrap;
}

.content .main .info .top-right-border {
    position: absolute;
    top: -10px;
    right: -10px;
    content: '';
    width: 50px;
    height: 50px;
    border-top: 10px solid #2a78ba;
    border-right: 10px solid #2A78BA;
    border-radius: 0 16px 0 0;
}

.content .main .info .bottom-left-border {
    position: absolute;
    bottom: -10px;
    left: -10px;
    content: '';
    width: 50px;
    height: 50px;
    border-bottom: 10px solid #f59a23;
    border-left: 10px solid #f59a23;
    border-radius: 0 0 0 16px;
}

.content .main .info .left {
    /*float: left;*/
    width: 400px;
}

.content .main .info .left img {
    width: 400px;
}

.content .main .info .right {
    flex: 1;
    /*float: right;*/
    padding: 0 0 35px 15px;
    position: relative;
}

.content .main .info .right p {
    width: 100%;
    font-size: 18px;
    padding-bottom: 10px;
}

/*.content .main .info .right p.cancer-text,.content .main .info .right p.technical-advantages-text{*/
/*    display: -webkit-box;*/
/*    -webkit-box-orient: vertical;*/
/*    -webkit-line-clamp: 3;*/
/*    overflow: hidden;*/
/*    text-overflow: ellipsis;*/
/*}*/

.content .main .info .right p strong {
    color: #2A78BA;
    font-weight: bold;
}

.content .main .info .right p span {
    color: #000;
}

.content .main .info .right p.technical-advantages-text {

}

.content .main .info .right .botton {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #2A78BA;
    padding: 5px 15px;
    color: #ffffff;
    text-align: center;
    display: inline-block;
    border-radius: 4px;
    box-sizing: border-box;
}

.content .main .info .right .box-botton {
    text-align: right;
}

/* 内容区域 */
.content .main .cancer_treatment .neirong {
    width: 100%;
    padding: 20px 15px;
    box-sizing: border-box;
}

.content .main .cancer_treatment .neirong p, .content .main .cancer_treatment .neirong span, .content .main .cancer_treatment .neirong a {
    text-wrap: wrap !important;
    line-height: 30px;
}

.content .main .cancer_treatment .neirong img {
    max-width: 100%;
    margin: 10px 0;
}

/* 内容内表单 */
.content .neirong .form-title {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.content .neirong .form-title .title-text {
    font-size: 20px;
    color: #2A78BA;
    font-weight: bold;
    margin-bottom: 5px;
}

.content .neirong .hint-text {
    width: 100%;
    text-align: left;
    font-size: 18px;
    color: #FF0000;
    font-weight: bold;
    margin-bottom: 5px;
}

.content .neirong .form {
    width: 100%;
    background: #f0f7ff;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.content .neirong .form .form-item {
    width: calc(50% - 10px);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding: 15px 0 0 0;
    white-space: nowrap;
    font-size: 0;
}

.content .neirong .form .hidden-item {
    display: none;
}

.content .neirong .form .form-item .label-text {
    font-size: 16px;
    color: #000;
    margin-bottom: 5px;
    font-weight: bold;
    width: 100%;
}

.content .neirong .form .form-item input, .content .neirong .form .form-item .select-nat {
    width: 100%;
    height: 40px;
    padding: 10px;
    border-radius: 8px;
    border: 0;
    background: #fff;
    box-sizing: border-box;
    font-weight: 400;
}


.content .neirong .form .form-item .country {
    width: 150px;
    height: 40px;
    padding: 10px;
    border-radius: 8px 0 0 8px;
    border: 0;
    background: #fff;
    box-sizing: border-box;
}

.content .neirong .form .form-item .phone-input {
    flex: 1;
    height: 40px;
    padding: 10px;
    border-radius: 0 8px 8px 0;
    border: 0;
    border-left: 1px solid #f5f5f5;
    background: #fff;
    box-sizing: border-box;
}

.content .neirong .form .form-item .radio-val {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.content .neirong .form .form-item .radio-text {
    font-size: 16px;
    margin-right: 5px;
}


.content .neirong .form .submit-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.content .neirong .form .submit-btn .btn-style {
    width: 50%;
    font-size: 18px;
    background: #2A78BA;
    color: #fff;
    border-radius: 8px;
    text-align: center;
    padding: 10px 0;
    margin-top: 15px;
}

/*.content .neirong .form .form-item span {*/
/*    font-size: 16px;*/
/*    color: #000;*/
/*    margin-bottom: 5px;*/
/*    font-weight: bold;*/
/*}*/


/* 表单 */
/*.content .reserve-form {*/
/*    width: 100%;*/
/*    margin: 30px 0;*/
/*}*/

/*.content .reserve-form .form-title {*/
/*    width: 100%;*/
/*    display: flex;*/
/*    justify-content: flex-start;*/
/*    align-items: center;*/
/*}*/

/*.content .reserve-form .form-title .title-text {*/
/*    padding: 5px 20px;*/
/*    background: #2A78BA;*/
/*    border-radius: 8px 8px 0 0;*/
/*    font-size: 20px;*/
/*    color: #fff;*/
/*    box-sizing: border-box;*/
/*}*/

/*.content .reserve-form .form {*/
/*    width: 100%;*/
/*    padding: 20px;*/
/*    background: #f0f7ff;*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*    flex-wrap: wrap;*/
/*    box-sizing: border-box;*/
/*}*/

/*.content .reserve-form .form .form-item {*/
/*    !*width: 48%;*!*/
/*    width: calc(50% - 10px);*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: center;*/
/*    align-items: flex-start;*/
/*    padding: 20px 0 0 0;*/
/*}*/

/*.reserve-form .form .form-item .label-text {*/
/*    font-size: 16px;*/
/*    color: #000;*/
/*    margin-bottom: 5px;*/
/*    font-weight: bold;*/
/*}*/

/*.reserve-form .form .form-item .input, .reserve-form .form .form-item .select-nat {*/
/*    width: 100%;*/
/*    height: 50px;*/
/*    padding: 10px;*/
/*    border-radius: 8px;*/
/*    border: 0;*/
/*    background: #fff;*/
/*    box-sizing: border-box;*/
/*}*/

/*.reserve-form .form .form-item .phone-input {*/
/*    display: flex;*/
/*    width: 100%;*/
/*    align-items: center;*/
/*}*/

/*.form .form-item .phone-input .country {*/
/*    width: 150px;*/
/*    height: 50px;*/
/*    padding: 10px;*/
/*    border-radius: 8px 0 0 8px;*/
/*    border: 0;*/
/*    background: #fff;*/
/*}*/

/*.from .form-item .phone-input .input {*/
/*    flex: 1;*/
/*    height: 50px;*/
/*    padding: 10px;*/
/*    border-radius: 0 8px 8px 0;*/
/*    border: 0;*/
/*    border-left: 1px solid #f5f5f5;*/
/*    background: #fff;*/
/*}*/

/*.content .reserve-form .form .submit-btn {*/
/*    width: 100%;*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    margin: 20px 0;*/
/*}*/

/*.reserve-form .form .submit-btn .btn-style {*/
/*    width: 50%;*/
/*    font-size: 18px;*/
/*    background: #2A78BA;*/
/*    color: #fff;*/
/*    border-radius: 8px;*/
/*    text-align: center;*/
/*    padding: 10px 0;*/
/*}*/

/*患者故事*/
.content .storyBox {
    width: 100%;
    margin-bottom: 30px;
}

.content .main .cancer_treatment .storyBox .title {
    width: 100%;
    text-align: center;
    font-weight: bold;
    /*padding: 20px 0;*/
    position: relative;
}

.content .main .cancer_treatment .storyBox .title::after {
    display: inline-block;
    content: '';
    width: 80px;
    height: 4px;
    background: #3E4756;
    position: absolute;
    bottom: 0;
    left: calc((100% - 80px) / 2);
}

.content .main .cancer_treatment .storyBox .title a {
    font-size: 25px;
    color: #2A78BA;
}

.storyBox .swiper-container {
    width: 100%;
    padding: 30px 10px 0 10px;
    box-sizing: border-box;
}

.storyBox .dis_cat_c .dis_describe {
}

.storyBox .swiper-wrapper {
    width: 100%;
    display: flex;
    align-items: stretch;
    margin-bottom: 30px;
}

.storyBox .swiper-slide {
    width: calc(33% - 8px);
    height: auto;
    /*aspect-ratio: 338/451;*/
    background: #ffffff;
    border-radius: 16px;
    padding-bottom: 20px;
    box-shadow: 0 0 10px #ccc;
    /*box-shadow: 0 16px 5px -12px rgb(0 0 0 / 5%), 0 4px 15px 0 rgb(0 0 0 / 5%), 0 8px 10px -5px rgb(0 0 0 / 5%);*/
    transition: all 1s;
}

.storyBox .swiper-slide img {
    width: 100%;
    height: auto;
    aspect-ratio: 1.37;
    object-fit: cover;
    border-radius: 16px 16px 0px 0px;
}

.storyBox .swiper-slide dt {
    width: 100%;
    position: relative;
}

.storyBox .swiper-slide dt a {
    width: 100%;
}

.storyBox .swiper-slide dt span {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #2A78BA;
    /*background: #F96A08;*/
    color: #ffffff;
    padding: 3px 10px;
    border-radius: 8px 0 0 0;
    float: right;
    font-size: 16px;
    font-weight: normal;
}

.storyBox .swiper-slide dd.first {
    font-size: 20px;
    font-weight: bold;
    padding: 5px 20px;
}

.storyBox .swiper-slide dd.first span {
    /*background: #2A78BA;*/
    background: #F96A08;
    color: #ffffff;
    padding: 3px 10px;
    border-radius: 0 0 0 8px;
    float: right;
    font-size: 16px;
    font-weight: normal;
    position: absolute;
    top: 246px;
    right: 0;
}

.storyBox .swiper-slide dd {
    padding: 0 20px;
}

.storyBox .swiper-slide dd.second span {
    /*background: #e9f1f8;*/
    /*color: #2A78BA;*/
    display: inline-block;
    background: rgba(249, 106, 8, 0.1);
    color: #F96A08;
    font-size: 14px;
    padding: 2px 5px;
    border-radius: 4px;
    margin-bottom: 5px;
}

.storyBox .swiper-slide span:first-child {
    margin-right: 5px;
}

/*.storyBox .swiper-slide p {*/
/*    padding: 10px 20px 0 20px;*/
/*    display: -webkit-box;*/
/*    -webkit-box-orient: vertical;*/
/*    -webkit-line-clamp: 3;*/
/*    overflow: hidden;*/
/*    text-overflow: ellipsis;*/
/*}*/

.storyBox .swiper-slide p {
    width: 100%;
    padding: 5px 20px 0;
    box-sizing: border-box;
}

.storyBox dl.swiper-slide .technology-text {
    width: 100%;
    box-sizing: border-box;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.storyBox dl.swiper-slide .technology-text strong, .storyBox dl.swiper-slide .description-text strong {
    color: #2A78BA;
}

.storyBox dl.swiper-slide .description-text {
    width: 100%;
    box-sizing: border-box;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.storyBox .swiper-slide .more-text {
    width: 100%;
    text-align: right;
    padding-top: 5px;
}

.storyBox .swiper-slide .more-text a {
    color: #2A78BA;
    /*padding: 3px 0;*/
    /*font-weight: bold;*/
    border-bottom: 1px solid #2A78BA;
}

.storyBox .swiper-pagination-story {
    width: 100%;
    text-align: center;
}

.storyBox .swiper-pagination-story span {
    margin: 0 5px;
}

.storyBox .swiper-pagination-bullet {
    background: #c3c3c3;
    width: 15px;
    height: 10px;
    border-radius: 30px;
}

.storyBox .swiper-pagination-bullet-active {
    background: #2A78BA;
    width: 25px;
}

.content .story-wrapper {
    border-bottom: 1px solid #eeeeee;
}

.content .story-wrapper .list {
    display: flex;
    justify-content: center;
}

.content .story-wrapper dl {
    width: 312px;
    margin: 20px auto;
    border: 1px solid #EEEEEE;
    border-radius: 8px;
}

.content .story-wrapper .title {
    /*border-left: 2px solid #2A78BA;*/
    font-size: 26px;
    text-align: left;
    padding-left: 10px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 20px;
    position: relative;
}

.content .story-wrapper .title::before {
    position: absolute;
    top: 10%;
    left: 0;
    width: 4px;
    height: 80%;
    display: inline-block;
    content: '';
    background: #2A78BA;

}

.content .story-wrapper dl dt a img {
    border-radius: 8px 8px 0 0;
}

.content .story-wrapper dl .first {
    font-size: 24px;
    font-weight: bold;
    padding-left: 20px;
}

.content .story-wrapper dl .title-text {
    font-size: 24px;
    font-weight: bold;
    padding: 0 15px;
    margin-top: 35px;
    box-sizing: border-box;
}

.content .story-wrapper dl .first span {
    background: #2A78BA;
    color: #ffffff;
    padding: 3px 10px;
    border-radius: 0 0 0 8px;
    float: right;
    font-size: 16px;
    font-weight: normal;
}

.content .story-wrapper dl .second span {
    margin-right: 10px;
    background: #e9f1f8;
    color: #2A78BA;
    font-size: 14px;
    padding: 0 3px;
}

.content .story-wrapper dl .second {
    width: 100%;
    padding: 5px 15px;
    box-sizing: border-box;
}

.content .story-wrapper dl .description-text {
    width: 100%;
    padding: 5px 15px 0 15px;
    margin-bottom: 10px;
    box-sizing: border-box;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}


@media (any-hover: hover) {
    .storyBox .swiper-slide:hover {
        -webkit-box-shadow: 0 16px 38px -12px rgb(0 0 0 / 56%), 0 4px 25px 0 rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(0 0 0 / 20%);
        box-shadow: 0 16px 38px -12px rgb(0 0 0 / 56%), 0 4px 25px 0 rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(0 0 0 / 20%);
        transform: translate(0, -10px);
        cursor: pointer;
    }
}

@media screen and (max-width: 768px) {
    .content {
        width: 100%;
    }

    .content .main {
        background: #f5f5f5;
    }

    .content .main .cancer_treatment .title {
        font-size: 25px;
    }

    .content .main .info {
        display: inherit;
        background: #fff;
        margin-bottom: 20px;
    }

    .content .main .info .left {
        float: none;
        width: 100%;
    }

    .content .main .info .left a {
        width: 100%;
        display: inline-block;
    }

    .content .main .info .left a img {
        /*width: 330px;*/
        width: 100%;
    }

    .content .main .info .right {
        float: none;
        padding: 10px 0 0 0;
    }

    .content .main .info .right .box-botton {
        margin-top: 8px;
    }

    .content .main .cancer_treatment .neirong {
        background: #fff;
    }

    .content .story-wrapper {
        margin-top: 20px;
    }

    .content .story-wrapper .list {
        /*display: inline-flex;*/
        /*flex-wrap: wrap;*/
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .content .story-wrapper dl {
        /*width: 49%;*/
        /*margin: 5px auto;*/
        margin: 0;
        margin-bottom: 15px;
        width: calc(50% - 7.5px);
    }

    .content .main {
        float: none;
        width: 100%;
        padding: 30px 15px;
    }

    .content .sidebar {
        display: none;
    }

    .content .main .info .right .botton {
        width: 100%;
        box-sizing: border-box;
        position: initial;
        padding: 10px 15px;
        font-weight: bold;
    }

    .content .main .info .right p {
        font-size: 16px;
    }

    .content .main .cancer_treatment .storyBox .title a {
        font-size: 20px;
    }

    .content .main .cancer_treatment .storyBox .title::after {
        display: none;
    }

    .content .story-wrapper dl dt a img {
        width: 100%;
    }

    .content .story-wrapper dl .first {
        padding-left: 10px;
    }

    .content .story-wrapper dl .first span {
        background: #2A78BA;
        color: #ffffff;
        padding: 3px 10px;
        border-radius: 0 0 0 8px;
        float: right;
        font-size: 16px;
        font-weight: normal;
    }

    .content .story-wrapper dl .title-text {
        /*font-size: 24px;*/
        font-size: 20px;
        font-weight: bold;
        padding: 0 10px;
        margin-top: 35px;
        box-sizing: border-box;
    }

    .content .story-wrapper dl .second {
        padding: 5px 10px;
    }

    .content .story-wrapper dl p {
        padding: 5px 10px 0 10px;
    }

    /*表单*/
    .content .neirong .form .form-item {
        width: 100%;
    }

    .content .neirong .form .submit-btn .btn-style {
        width: 100%;
    }

    .content .neirong .form-title .title-text {
        margin-bottom: 5px;
    }

    .content .neirong .hint-text {
        margin-bottom: 5px;
    }

    /*.content .reserve-form {*/
    /*    margin: 20px 0;*/
    /*}*/
    /*.content .reserve-form .form {*/
    /*    width: 100%;*/
    /*    padding: 15px;*/
    /*    box-sizing: border-box;*/
    /*}*/
    /*.content .reserve-form .from .form-item {*/
    /*    width: 100%;*/
    /*    padding: 0 0 10px 0;*/
    /*}*/
    /*.content .reserve-form .from .submit-btn {*/
    /*    width: 100%;*/
    /*    margin: 15px 0 0 0;*/
    /*}*/
    /*.from .form-item .phone-input .input {*/
    /*    height: 40px;*/
    /*}*/
    /*.reserve-form .from .form-item .input, .reserve-form .from .form-item .select-nat {*/
    /*    height: 40px;*/
    /*}*/
    /*.from .form-item .phone-input .country {*/
    /*    height: 40px;*/
    /*}*/
    /*.reserve-form .from .submit-btn .btn-style {*/
    /*    width: 100%;*/
    /*    font-size: 16px;*/
    /*}*/
    /*患者故事*/
    .content .storyBox {
        margin: 0;
    }

    .content .storyBox .title {
        font-size: 26px;
        text-align: left;
        width: 100%;
        padding: 10px 0;
        box-sizing: border-box;
    }

    .storyBox .swiper-container {
        width: 100%;
        padding: 0;
    }

    .storyBox .dis_cat_c .dis_describe {
        width: 100%;
        padding: 0 0 10px;
        box-sizing: border-box;
    }

    .storyBox .swiper-slide {
        width: 100%;
    }

    .storyBox .swiper-slide dd {
        padding: 0 15px;
    }

    .storyBox .swiper-slide p {
        padding: 10px 15px 0 15px;
    }
}