﻿.search-area{background-image:url('../../Images/Common/banner-stock-w.png');height:200px;max-width:unset !important}
.search-bar{display:flex;position:relative;box-shadow:0 0 15px 0 rgba(23,36,57,0.25)}
.search-bar-text{height:60px;width:560px;padding:15px 0 15px 20px;border:0;color:#8a919c;font-size:20px;font-weight:normal;line-height:1.5}
.search-bar .search{height:60px;width:60px}
.search-bar .search img{height:32px;width:32px}
.trend-area{ margin-top:100px;text-align: center;}
.trend-area .subtitle{margin:8px 0 44px}
.trend-detail{margin-top:32px}
.trend-detail-item{display:flex}
.trend-card{text-align:left;padding:110px 20px 20px 20px;height:242px;width:33%;background-size:cover;}
.trend-card:not(:first-of-type){margin-left:20px}
.trend-card .card-title{margin-top:4px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.trend-card .card-title .img{margin-top:6px;vertical-align:text-top;margin-right: 0px;margin-left:8px;width:20px;height:20px;}
.trend-card .card-desc{margin-top:4px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.trend-card .card-month-range{margin-top:12px;border-radius:28.1px;text-align:center;vertical-align:middle;display:inline-flex}
.trend-card .card-month-range .card-month-range-title{margin-left:20px;margin-top:8px}
.trend-card .card-month-range .card-month-range-num{margin:2px 20px 6px 12px}
.rise-fell-area{margin:80px 0 100px;display:flex}
.rise-fell-area>div{width:100%}
.rise-fell-area>div:not(:first-child){margin-left:10px}
.rise-fell-area>div:not(:last-child){margin-right:10px}
.rise-fell-area .subtitle{font-size:20px;font-weight:600;line-height:1.5;margin-top:8px}
.rise-fell-area .list{border-top:solid 2px #d9dde3;border-bottom:solid 2px #d9dde3;margin-top:24px}
.rise-fell-area .list .list-item{padding:16.5px 20px;display:flex}
.rise-fell-area .list .list-item:not(:first-child){border-top:solid 1px #d9dde3}
.rise-fell-area .list .list-item .title{width:57.4%;min-width:140px}
.rise-fell-area .list .list-item .title count{width:100%}
.rise-fell-area .list .list-item .title .web{vertical-align:middle}
.rise-fell-area .list .list-item .title .img{vertical-align:middle;margin-right:8px;width:16px;height:16px;}
.rise-fell-area .list .list-item .title span{margin-right:12px;min-width:22px;display:inline-block}
.rise-fell-area .list .list-item .mudp{margin: auto 0; min-width:145px}
.rise-fell-area .list .list-item .mudp .h6{margin-right:8px}
.rise-fell-area .list .list-item .apex-chart{width:120px;height:56px;margin-left:32px}
.topic-area{padding:100px 0;text-align:center}
.topic-area .subtitle{margin:8px auto 44px}
.topic-area .topic-detail{margin-top:32px}
.topic-area .tab-header-left{background-image:linear-gradient(to right,#f9fbff 74%,rgba(249,251,255,0))}
.topic-area .tab-header-right{background-image:linear-gradient(to left,#f9fbff 74%,rgba(249,251,255,0))}
.topic-area .card-area{display:flex;margin-bottom:23.7px}
.topic-area .card-area .left-card{text-align:left;margin-right:10px;padding:188px 40px 40px 40px;height:374px;width:50%;background-size:cover;}
.topic-area .card-area .left-card .card-title{margin-top:4px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.topic-area .card-area .left-card .card-title .img{margin-top:6px;vertical-align:text-top}
.topic-area .card-area .left-card .card-desc{margin-top:4px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.topic-area .card-area .left-card .card-month-range{margin-top:16px;border-radius:28.1px;text-align:center;vertical-align:middle;display:inline-flex;height:44px}
.topic-area .card-area .left-card .card-month-range .card-month-range-title{margin-left:20px;margin-top:8px}
.topic-area .card-area .left-card .card-month-range .card-month-range-num{margin:2px 20px 6px 12px}
.topic-area .card-area .right-card{margin-left:10px;width:50%}
.topic-area .card-area .right-card table{font-size:16px;font-weight:600;line-height:1.75}
.topic-area .card-area .right-card th{font-weight:400}
.topic-area .card-area .right-card th:nth-child(1){text-align:left}
.topic-area .card-area .right-card tr td:nth-child(1)>div{display:flex}
.topic-area .card-area .right-card tr td:nth-child(1) .td-item1{width:60px;min-width:60px}
.topic-area .card-area .right-card tr td:nth-child(1) .td-item2{width:calc(100% - 60px)}
.topic-area .card-area .right-card tr th:nth-child(2){width:17%}
.topic-area .card-area .right-card tr th:nth-child(3){width:17%}
.topic-area .card-area .right-card tr th:nth-child(4){width:17%}
.topic-area .sm-card-area{display:flex;flex-wrap: wrap;text-align:start}
.topic-area .sm-card{width:25%;margin-bottom:16px}
.topic-area .sm-card:nth-of-type(4n)::after{content: ' '; width:100%}
.topic-area .sm-card .sm-card-item{max-width:340px;padding:135px 20px 20px 20px}
.topic-area .sm-card .sm-card-item .img{margin-right:12px;width:24px;height:24px}
.topic-area .sm-card .desc{max-width:340px;padding:20px}
.topic-area .sm-card .desc .card-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.topic-area .sm-card .desc .card-desc{margin-top:4px;display:-webkit-box;max-width:100%;-webkit-line-clamp:1;-webkit-box-orient:vertical;white-space:unset;overflow: hidden;}
.topic-area .sm-card .desc .card-month-range{margin-top:12px}
.topic-area .sm-card .desc .card-month-range .card-month-range-title{margin-right:8px}

/****** RWD Setting ******/
@media screen and (max-width:1465px) {
.topic-area .sm-card{width:33.3%}
.topic-area .sm-card:nth-of-type(4n)::after{content: ''; width:0}
.topic-area .sm-card:nth-of-type(3n)::after{content: ' '; width:100%}
}
@media screen and (max-width:1080px) {
.topic-area .sm-card{width:50%}
.topic-area .sm-card:nth-of-type(3n)::after{content: ''; width:0}
.topic-area .sm-card:nth-of-type(2n)::after{content: ' '; width:100%}
}
@media screen and (max-width:767px) {
.trend-area{ margin-top:52px;text-align: center;}
.trend-area .subtitle{margin-bottom:32px}
.trend-detail{margin-top:20px}
.trend-detail-item{display:block}
.trend-card{margin-right:unset;padding:68px 16px 16px 16px;height:180px;width:100%}
.trend-card:not(:first-of-type){margin-left:0;margin-top:16px;}
.trend-card .card-title{margin-top:4px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.trend-card .card-title .img{margin-top:5px}
.trend-card .card-desc{max-width:100%}
.trend-card .card-month-range{margin-top:10px}
.trend-card .card-month-range .card-month-range-title{margin-left:16px;margin-top:7px}
.trend-card .card-month-range .card-month-range-num{margin:1px 16px 3px 8px}
.rise-fell-area{margin:0 0 52px;display:block}
.rise-fell-area>div{margin-top:44px}
.rise-fell-area>div:not(:first-child){margin-left:0}
.rise-fell-area>div:not(:last-child){margin-right:0}
.rise-fell-area .subtitle{font-size:14px;font-weight:600;line-height:1.71;margin-top:4px}
.rise-fell-area .list{margin-top:20px}
.rise-fell-area .list .list-item{padding:17.5px 8px}
.rise-fell-area .list .list-item .title{width:64.2%}
.rise-fell-area .list .list-item .apex-chart{width:106px;height:49.4px}
.topic-area{padding:52px 0}
.topic-area .subtitle{margin:4px auto 32px}
.topic-area .tab-content-item.active{display: block !important}
.topic-area .topic-detail{margin-top:20px}
.topic-area .card-area{display:block;margin-bottom:21px}
.topic-area .card-area .left-card{margin-right:unset;padding:56px 16px 16px 16px;height:180px;width:100%}
.topic-area .card-area .left-card .card-title{margin-top:4px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.topic-area .card-area .left-card .card-title .img{margin-top:5px}
.topic-area .card-area .left-card .card-desc{height:24px;max-width:100%}
.topic-area .card-area .left-card .card-month-range{margin-top:10px;height:34px}
.topic-area .card-area .left-card .card-month-range .card-month-range-title{margin-left:16px;margin-top:7px}
.topic-area .card-area .left-card .card-month-range .card-month-range-num{margin:1px 16px 3px 8px}
.topic-area .card-area .right-card{width:100%;margin-left:unset;margin-top:16px}
.topic-area .card-area .right-card table{font-size:14px;font-weight:600;line-height:1.75}
.topic-area .card-area .right-card th{font-weight:400}
.topic-area .card-area .right-card th:nth-child(1){text-align:left}
.topic-area .card-area .right-card tr td:nth-child(1){padding: 8px 0 7.5px 8px;}
.topic-area .card-area .right-card tr td:nth-child(1)>div{display:block}
.topic-area .card-area .right-card tr td:nth-child(1) .td-item1{width:100px}
.topic-area .card-area .right-card tr td:nth-child(1) .td-item2{width:100px;font-size:12px;font-weight:normal;line-height:1.5}
.topic-area .card-area .right-card tr th:nth-child(2){width:78px}
.topic-area .card-area .right-card tr th:nth-child(3){width:78px}
.topic-area .card-area .right-card tr th:nth-child(4){width:78px}
.topic-area .sm-card-area{justify-content: space-between}
.topic-area .sm-card{width:47.8%}
.topic-area .sm-card .sm-card-item{width:100%;padding:63px 8px 7px 8px}
.topic-area .sm-card .sm-card-item .img{margin-right:8px;width:16px;height:16px}
.topic-area .sm-card .desc{max-width:unset;padding:8px}
.topic-area .sm-card .desc .card-title{font-size:14px;font-weight:600;line-height:1.71}
.topic-area .sm-card .desc .card-desc{-webkit-line-clamp:2;height: 44px;}
}