.banner {
    height: 300px;
    display: flex;
    align-items: center;
    background-image: url(https://img.asiancancer.com/images/newmalai/story1.png);
    background-repeat: no-repeat;
    background-position: center top
}

.banner .title {
    color: #fff;
    display: inline-block
}

.banner span {
    display: block;
    font-size: 35px
}
@media (max-width:768px) {
    .banner span {
        font-size: 16px
    }
}

.banner .first {
    font-size: 52px;
    margin-bottom: 5px;
    padding-bottom: 5px;
    position: relative
}
@media (max-width:768px) {
    .banner .first {
        font-size: 24px
    }
}

.banner .first::after {
    height: 2px;
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #13bfb1
}


.story-content .story_intro{margin:10px 0;}
.story-content .cancer_type{float:right;margin:10px 0;}
.story-content .caner_type_select{width:220px;height: 32px;}
.story-content .story_list .headlines{display: flex}
.story-content .story_list .headlines .img{width: 456px;}
.story-content .story_list .headlines img{border-radius: 16px 16px 0 0;}
.story-content .story_list .headlines .info{background: #ffffff;padding: 25px;margin-left: 15px;border-radius: 16px;}
.story-content .story_list .headlines .info dl{height: 242px;}
.story-content .story_list .headlines .info dt{font-size: 32px;font-weight: bold;}
.story-content .story_list .headlines .info dt span{font-size: 14px;color: #ffffff;background: #13BFB1;margin-left: 10px;padding: 5px;border-radius: 2px;}
.story-content .story_list .headlines .info dd span {margin-right: 10px;background: #deefee;color: #13BFB1;font-size: 14px;padding: 0 3px;}
.story-content .story_list .headlines .info .line{width: 60px;height: 4px;background:#13BFB1;margin-top: 30px;}
.story-content .story_list .headlines .info .desc{margin-top: 10px;}
.story-content .story_list .headlines .info .more{float: right;font-size: 14px;}
.story-content .story_list .headlines .info .more a{padding: 5px 50px;background: #13BFB1;color: #ffffff;border-radius: 4px;}

.story-content .story_list .story_page dl:hover{}
.story-content .story_list .story_page dl{width: 24.0%;display: inline-grid;margin-right: 13px;margin-bottom: 23px;background: #ffffff;border-radius: 16px;padding-bottom: 20px;
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%);}
.story-content .story_list .story_page dl dt img{border-radius: 16px 16px 0 0; max-width: 100%; height: auto;}
.story-content .story_list .story_page #wrap4,
.story-content .story_list .story_page #wrap8,
.story-content .story_list .story_page #wrap12,
.story-content .story_list .story_page #wrap16,
.story-content .story_list .story_page #wrap20
{margin-right: 0px;}
.story-content .story_list .story_page dl .first{font-size: 24px;font-weight: bold;padding-left: 20px;text-align:left;}
.story-content .story_list .story_page dl dt span{background:#13BFB1;color: #ffffff;padding: 3px 10px;border-radius: 0 0 0 8px;float: right;font-size: 16px;font-weight: normal;}

.story-content .story_list .story_page dl .second span {margin-right: 10px;background: #deefee;color: #13BFB1;font-size: 13px;padding: 0 3px;}
.story-content .story_list .story_page dl .second,.story-content .story_list .story_page dl p{padding: 5px 20px;}
.story-content .story_list .story_page dl .desc {
    padding: 5px 20px;
    display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.story-content .caner_type_select{display: none;}




.story-content .sect {
    margin-top: 30px;
}
.story-content .sect .sect_choose .myselect{
    width: 500px;
    border: 1px solid #62c0e0;
    border-radius: 20px;
    padding: 10px;
    margin: 10px auto;
    color: #46a8ca;
    display: block;
}
.myselect {
    position: relative;
    line-height: 1;
    background: #ffffff;
    font-size: 11px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    outline: 0;
    outline-offset: -2px;
    cursor: default;
}
.sod_select .sod_placeholder{display:none;}
.sod_select .sod_list {
    width: 450px;
    border: 1px solid #62c0e0;
    color: #46a8ca;
    border-top: none;
    margin-left: 25px;
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    height: auto;
    margin: 0 0 0 -3px;
    background: #ffffff;
    font-weight: 300;
    z-index: 1;
}
.sod_select .sod_list ul {
    overflow-y: auto;
    padding: 0;
    margin: 0;
}
.sod_select .sod_list .selected {
    font-weight: 700;
    padding-right: 25px;
}

.sod_select .sod_list .active {
    background: #f7f7f7;
    color: #333333;
}
.sod_select .sod_list li {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
    padding: 10px 10px;
    list-style-type: none;
}
.sod_select, .sod_select * {
    box-sizing: border-box;
}
.story-content .sect_hot {
    position: relative;
}
.story-content .sect_hot dl {
    display: flex;
    justify-content: center;
}
.story-content .sect_hot dl dt {
    float: left;
    margin-right: 10px;
}
.story-content .sect_hot dl dd {
    float: left;
    margin-right: 10px;
}

@media screen and (max-width:768px) {
    .banner{background: url("/uploads/allimg/2023/06/22/story.png") no-repeat center;height: auto;background-size: cover;}
    .banner .img{text-align: center;}
    .banner .banner-text{padding: 30px 20px;}
    .banner .banner-text .title{font-size: 36px;}
    .banner .banner-text .second{font-size: 20px;}

    .story-content .sect .sect_choose .myselect{width:90%;}
    .story-content .sect_hot{margin-left:25px;}
    .story-content .story_intro{display: none;}
    .story-content .story_list .headlines{width: auto;}
    .story-content .story_list .headlines .img{width: auto;}
    .story-content .story_list .headlines img{width: 100%;height: auto;}
    .story-content .story_list .headlines .info{width:auto;margin-left: 0;padding: 15px;}
    .story-content .story_list .headlines .info dl{height:auto;}
    .story-content .story_list .headlines .info .more{float: none;}
    .story-content .story_list .headlines .info .more a{width: auto;display: block;text-align: center;padding: 10px 50px;}

    .story-content .story_list .story_page dl{width: 46%;margin: 5px;height:380px;}
    .story-content .story_list .story_page dl dt img{width: 100%;}
    .story-content .story_page{text-align: center;}
    .story-content .story_list .story_page dl .second{height: 50px;}
    .story-content .story_list .story_page dl .second span{font-size: 12px;}
    .story-content .story_list .story_page dl .second, .story-content .story_list .story_page dl p{padding: 5px 8px;text-align:left;}
    
    .story-content .story_list .story_page dl dt span{font-size:12px;}
    .story-content .story_list .story_page dl .first{font-size:16px;}
    .story-content .story_list .story_page dl .second span{margin-right:5px;}
    .story-content .story_list .headlines .info dt{font-size:23px;}
    .paging ul li.next{width:32px;}


}