.topic-content-page{margin-top: 1.25rem;}

.topic-content-page .topic-banner-panel{position: relative;margin-bottom: 4rem;}
.topic-content-page .topic-banner-panel a{position: relative;width: 100%;height: 17.25rem;display: block;}
.topic-content-page .topic-banner-panel a img{width: 100%;height: 100%;display: block;border-radius: 2rem;object-fit: cover;}
.topic-content-page .topic-banner-panel a .detailWrap{position: absolute;padding: 0 3rem 1.5rem 1.25rem;bottom: 0;left: 0;display: flex;align-items: flex-end;width: 100%;z-index: 2;}
.topic-content-page .topic-banner-panel a .detailWrap h4{font-size: 1.875rem;font-weight: 900;color: #ffffff;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 15.625rem;margin-right: 1.5rem;}
.topic-content-page .topic-banner-panel a .detailWrap > p:nth-child(1){font-size: 1.875rem;font-weight: 900;color: #ffffff;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 15.625rem;margin-right: 1.5rem;}
.topic-content-page .topic-banner-panel a .detailWrap .amount{font-size: 1.5rem;color: #ffffff;font-weight: 400;}
.topic-content-page .topic-banner-panel a .detailWrap .dateUpdate{font-size: 1.375rem;color: #ffffff;margin-left: auto;font-weight: 400;}
.topic-content-page .topic-banner-panel a::after{position: absolute;content: "";height: 5.625rem;width: 100%;border-radius: 2rem;background: linear-gradient( 0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);bottom: 0;left: 0;z-index: 1;}
.topic-content-page .topic-banner-panel::before{position: absolute;content: "";bottom: -0.75rem;height: 100%;width: calc(100% - 5.375rem);background: #4AABFF;border-radius: 2rem;opacity: 0.6;left: 50%;transform: translateX(-50%);z-index: -1;}
.topic-content-page .topic-banner-panel::after{position: absolute;content: "";bottom: -1.5rem;height: 100%;width: calc(100% - 10.125rem);background: #4AABFF;border-radius: 2rem;opacity: 0.3;left: 50%;transform: translateX(-50%);z-index: -1;}

.topic-list-panel{margin-bottom: 1.875rem;}
.topic-list-panel .tab-button{display: flex;align-items: center;column-gap: 3.25rem;margin-bottom: 1.75rem;}
.topic-list-panel .tab-button a{font-size: 1.75rem;color: #999999;position: relative;}
.topic-list-panel .tab-button a span{position: relative;z-index: 2;}
.topic-list-panel .tab-button a.active{font-weight: 900;color: #404040;}
.topic-list-panel .tab-button a.active::after{position: absolute;content: "";z-index: 1;bottom: 0;left: 0;background-color: #4AABFF;height: 0.5rem;width: 100%;border-radius: 0.25rem;}
.topic-list-panel .topic-listing{display: flex;flex-wrap: wrap;column-gap: 1.5rem;row-gap: 1.5rem;justify-content: space-between;}
.topic-list-panel .topic-listing a{display: flex;flex-direction: column;flex: 0 0 20.625rem;max-width: 20.625rem;width: 20.625rem;}
.topic-list-panel .topic-listing a img{width: 100%;height: 11.625rem;display: block;object-fit: cover;border-radius: 0.75rem 0.75rem 0 0;}
.topic-list-panel .topic-listing a .detailWrap{display: flex;flex-direction: column;row-gap: 0.25rem;padding: 0.75rem 1.25rem 1.125rem;border-radius: 0 0 0.75rem 0.75rem;background-color: #F5F5F5;overflow: hidden;}
.topic-list-panel .topic-listing a .detailWrap h4{font-size: 1.75rem;font-weight: 900;color: #404040;width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.topic-list-panel .topic-listing a .detailWrap > p{font-size: 1.75rem;font-weight: 900;color: #404040;width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.topic-list-panel .topic-listing a .detailWrap .bottomWrap{display: flex;align-items: center;justify-content: space-between;}
.topic-list-panel .topic-listing a .detailWrap .bottomWrap p{font-size: 1.5rem;color: #999999;}
.topic-list-panel .topic-listing a .detailWrap .bottomWrap p span{color: #4AABFF;}
.topic-list-panel .topic-listing a .detailWrap .bottomWrap p:nth-child(3){display: none;}
.hot-topic-panel .hot-topic-content{display: flex;flex-direction: column;row-gap: 1.875rem;}
.hot-topic-panel .hot-topic-content .topic-banner-wrap{display: flex;column-gap: 1rem;overflow-x: scroll;}
.hot-topic-panel .hot-topic-content .topic-banner-wrap::-webkit-scrollbar{height: 0;}
.hot-topic-panel .hot-topic-content .topic-banner-wrap a{width: 15rem;flex: 0 0 15rem;max-width: 15rem;height: 10.875rem;position: relative;}
.hot-topic-panel .hot-topic-content .topic-banner-wrap a:last-child{margin-right: 1.875rem;}
.hot-topic-panel .hot-topic-content .topic-banner-wrap a img{width: 100%;height: 100%;border-radius: 1.25rem;object-fit: cover;}
.hot-topic-panel .hot-topic-content .topic-banner-wrap a .infoWrap{position: absolute;bottom: 0;border-radius: 0 0 1.25rem 1.25rem;display: flex;align-items: flex-end;column-gap: 1.25rem;background-color: #F7B3A0;padding: 0.63rem 1.125rem 0.63rem 0.875rem;justify-content: space-between;}
.hot-topic-panel .hot-topic-content .topic-banner-wrap a .infoWrap h4{font-size: 1.5rem;color: #ffffff;flex: 0 0 9rem;max-width: 9rem;width: 9rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight: normal;}
.hot-topic-panel .hot-topic-content .topic-banner-wrap a .infoWrap p{font-size: 1.25rem;color: #ffffff;}
.hot-topic-panel .hot-topic-content .topic-listing{display: flex;flex-wrap: wrap;gap: 1.25rem;}
.hot-topic-panel .hot-topic-content .topic-listing a{width: calc(50% - 0.625rem);height: 3.348rem;background-color: #EBF5FF;border-radius: 0.5rem;display: flex;align-items: center;justify-content: space-between;padding: 0 1.25rem;column-gap: 1rem;}
.hot-topic-panel .hot-topic-content .topic-listing a .title{font-size: 1.5rem;color: #4AABFF;flex: 0 0 10.625rem;width: 10.625rem;max-width: 10.625rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.hot-topic-panel .hot-topic-content .topic-listing a .amount{font-size: 1.25rem;color: #4AABFF;}
.hot-topic-panel .hot-topic-content .topic-listing-wrap{display: flex;flex-direction: column;row-gap: 1.5rem;}
.hot-topic-panel .hot-topic-content .topic-listing-wrap h2{font-size: 2.25rem;font-weight: 900;color: #404040;}