﻿/* 마켓이슈 서브 메뉴(주요뉴스, 보유주식) */
#marketIssue-menu { padding: var(--main-padding-val); margin: 4% 0 3%; }
#marketIssue-menu .sub-menu-ellipse li {  border: none; background-color: var(--main-back-color); }
#marketIssue-menu .sub-menu-ellipse li a, #cntnts-area #menu li { font-weight: 600; }
#marketIssue-menu .sub-menu-ellipse li.on { background-color:var(--default-red); color:#fff; }
#marketIssue-menu .sub-menu-ellipse li.on a {color:#fff; }
/*************************************/

/* 주요뉴스 */

/* 상단 최신 게시글 슬라이더 - (컨텐츠 일반게시판 메뉴별 최신글) */
#cntnts-recent-area {position:relative;}
#cntnts-recent-area .cntnts-recent-list {}
#cntnts-recent-area .cntnts-recent-list .cntnts-thumb {width:100%; overflow:hidden; margin-bottom:3%; position:relative;}
#cntnts-recent-area .cntnts-recent-list .cntnts-thumb a { display: flex; height: fit-content; align-items: center; justify-content: flex-start; aspect-ratio: 600 / 238; }
#cntnts-recent-area .cntnts-recent-list .cntnts-thumb a img { position: absolute; top: 0; left: 0; }
#cntnts-recent-area .cntnts-recent-list .cntnts-thumb a p { width: 80%; height: auto; margin-left:5%; z-index: 1;}
#cntnts-recent-area .cntnts-recent-list .cntnts-thumb a p span { color: #fff; }
#cntnts-recent-area .cntnts-recent-list .cntnts-thumb a p span:first-of-type {font-size: 3.5rem; font-weight: bold; line-height: 1.2; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
#cntnts-recent-area .cntnts-recent-list .cntnts-thumb a p span:last-of-type {font-size: 2rem; font-weight: 300; display: inline-block; margin-top: 5%; opacity:0.9;}

#cntnts-recent-area .cntnts-recent-list .info {width: 100%; margin-top:3%; text-align: center;}
#cntnts-recent-area .cntnts-recent-list .info .title {font-size: 3.1rem; line-height: 1.25; font-weight:700; margin-bottom:1.5%;}
#cntnts-recent-area .cntnts-recent-list .info .date {font-size: 2.4rem; color: #aba4a4; font-weight:500;}

/* 시장 이슈 한눈에 보기 */
#cntnts-area { background-color: var(--main-back-color); padding: 4%; margin: 8% 0 10%; }
#cntnts-area .sub-title .bubble { display: inline-block; position: relative; margin-left: 1%; vertical-align: bottom; }
#cntnts-area #menu .sub-menu-ellipse {width:92%; gap:0%;}
#cntnts-area #menu .sub-menu-ellipse .swiper-slide {margin-right:2%;}

#cntnts-area #cntnts-thumbnail {margin:5% 0 0;}
#cntnts-area #cntnts-thumbnail div {display:none;  width: 100%; aspect-ratio: 500 / 184; background-color: #fff; border-radius: 2rem; align-items: center; justify-content: flex-start; gap: 6%; box-shadow: 0px 0px 2rem 0px #ebebeb; }
#cntnts-area #cntnts-thumbnail div img { width: 17rem; aspect-ratio: 160 / 164; margin:2.5% 0 0 1%;}
#cntnts-area #cntnts-thumbnail div p { width: 60%; font-size: 2.6rem; font-weight: bold; overflow: hidden; line-height:1.25;}
#cntnts-area #cntnts-thumbnail div p a { background-color: var(--default-gray); font-size: 1.5rem; color: #fff; padding: 2.5% 6%; display: inline-block; border-radius: 0.2rem; margin-top: 5%;}

#majorNews-area .board-info:last-of-type {border-bottom:none;}
/*************************************/

/* 주요 증시일정 */
#schedule-area { padding: var(--main-padding-val);  margin:7% 0 5%;}

/* 증시 캘린더 */
#schedule-calendar { width: 100%; border: 0.1rem solid var(--default-gray); border-radius: 2rem; padding: 8% 1% 0%; margin-bottom:10%;}
#schedule-calendar #calendar-head { width: 100%; display: flex; align-items: baseline; justify-content: space-between; padding:0 5% 0 6%;}
#schedule-calendar #calendar-head span:first-of-type { font-size: 2rem; font-weight: 700; color: var(--default-semi-gray); width: 50%; }
#schedule-calendar #calendar-head span:first-of-type b { font-size: 3rem; margin-right: 2%; }
#schedule-calendar #calendar-head span:last-of-type {width:50%; text-align: right;}
#schedule-calendar #calendar-head span:last-of-type button { width: 0.8rem; height: auto; aspect-ratio: 1 / 2; margin-left: 18%; }

#schedule-calendar table {width:100%; border-collapse:separate;/* border-spacing: 0 35px;*/ margin-top:2%; text-align:center;}
#schedule-calendar thead th {font-weight:600; font-size:2.4rem; padding:4% 0;}
#schedule-calendar thead th:is(:nth-of-type(1), :nth-of-type(7)) {color:var(--default-red);}

#schedule-calendar tbody tr td {height:7rem; font-size:2rem; position:relative; cursor:pointer;}
#schedule-calendar tbody tr td:is(.today, .on)::before { content: ''; display: block; position: absolute; background-color: var(--default-gray); border-radius: 50%; color: #fff; top: calc((7rem / 2) - 2rem); left: calc(50% - 2rem); width: 4rem; height: 4rem; z-index: 0;}
#schedule-calendar tbody tr td.today.on::before {background-color: var(--default-red);}
#schedule-calendar tbody tr td:is(.today, .on) b {color:#fff; position:relative; z-index:3;}
/*#schedule-calendar tbody tr td.count::after {content: ''; display: block; width: 5px; height: 5px; border-radius: 50%; background-color: var(--default-gray); position: absolute; bottom: -5%; left: calc(50% - 2.5px); }*/
#schedule-calendar tbody tr td .dots { display: flex; align-items: center; justify-content: center; gap: 2px; position: absolute; bottom: 0; left: calc(50% - 2.5px); }
#schedule-calendar tbody tr td .dots i {width: 4px; height: 4px; border-radius: 50%; background-color: var(--default-gray);}
#schedule-calendar tbody tr td .dots i:nth-of-type(2) {background-color: #B4B4B8;}
#schedule-calendar tbody tr td .dots i:nth-of-type(3) {background-color: #C7C8CC;}
#schedule-calendar tbody tr td .dots i:nth-of-type(4) {background-color: #E3E1D9;}
#schedule-calendar tbody tr td .dots i:nth-of-type(5) {background-color: #F2EFE5;}
#schedule-calendar tbody tr td.adjacent-date b {color: var(--default-gray);}

/* 증시 리스트 */
#schedule-list {margin-bottom:10%;}
#schedule-list > div { border-bottom: 0.1rem solid var(--default-gray); /*padding: 6% 0;*/}
#schedule-list > div:last-of-type { border-bottom: none; }
#schedule-list > div p { color:var(--default-semi-gray); font-weight: 600; font-size: 2.2rem; }
#schedule-list > div p.today { color: var(--default-red); }
#schedule-list > div p.today::after { content: "오늘"; background-color: var(--default-red); color: #fff; font-size: 1.5rem; margin-left: 3%; padding: 1.2% 2.5%; vertical-align: middle; border-radius: 2rem; font-weight:200; }
#schedule-list > div ul li { display: flex; align-items: center; justify-content: space-between; margin-top: 7%; }
#schedule-list > div ul li span { color: var(--default-semi-gray); font-size: 2rem; width: 80%; }
#schedule-list > div ul li span:last-of-type { width: 20%; text-align: right; }
#schedule-list > div ul li span i { font-style: normal; font-size: 2.4rem; font-weight: 600; margin-left: 3%; }

/*************************************/

/* 보유주식 */
#user-profile, /*#stock-report, */#stock-hotclip {padding:var(--main-padding-val);}

#user-profile { display: flex; align-items: center; gap: 3%; margin:5% 0;}
#user-profile span.nickname { display: inline-block; background-color: #9de2d1; width: 9rem; height: 9rem; color: #fff; text-align: center; border-radius: 50%; font-size: 3.8rem; line-height: 9rem; }
#user-profile span.greeting-txt { font-size: 2.3rem; font-weight: 500; line-height: 1.38; }
#user-profile span.greeting-txt b { color: var(--default-blue); }

/* 관심종목 분석 리포트, 핫클립 타이틀 */
/*:is(#stock-report, #stock-hotclip) h4 {font-size:3rem; margin:0;}*/

/* 관심종목 분석 리포트 */
/*#stock-report {width:92%; margin: 0% 4% 15%; border: 0.1rem solid var(--default-gray); border-radius: 2rem;*/ /*padding: 6% 6% 0;*/ /*position:relative; overflow:hidden;} 

#stock-report #stock-list { width:92%; margin: 10% 0 0; overflow:hidden;}
#stock-report #stock-list ul.swiper-slide {}
#stock-report #stock-list ul li { display: flex; align-items: center; gap: 5%; margin-bottom: 10%; }
#stock-report #stock-list ul li span {display:inline-block;}
#stock-report #stock-list ul li .stock-icon {width: 6rem; height:6rem; border-radius: 50%; overflow: hidden; }
#stock-report #stock-list ul li .stock {width:82%; position:relative; vertical-align: middle; font-size: 2.5rem; font-weight: 700;}
#stock-report #stock-list ul li .stock::after {content:''; display:inline-block; width:1rem; height:3.6rem; background:url('https://swimg.wowtv.co.kr/stockwinN/static/images/icons/arrow_black_r.png') no-repeat right; background-size:contain; position:absolute; top:3%; right:0;}
#stock-report #stock-list ul li .stock b { font-weight: 500; }*/

#stock-report { width: 92%; overflow: hidden; border: 0.1rem solid var(--default-gray); margin: 0 auto; border-radius: 2rem; padding: 0 5%;}
#stock-report h4 {font-size:2.6rem; margin: 7% 0 8%;}
#stock-report .swiper {width:100%; overflow:hidden;}
#stock-report #stock-list {}
/*#stock-report #stock-list ul {width:100%;}*/
#stock-report #stock-list ul li { margin-bottom: 8%; display: flex; align-items: center; gap: 4%; cursor:pointer;}
#stock-report #stock-list ul li .stock-icon {width: 5.5rem; height: auto; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; }
#stock-report #stock-list ul li .stock {display: inline-block; font-size: 2.2rem; font-weight: 500; position:relative; width:82%;}
#stock-report #stock-list ul li .stock::after { content: ''; display: inline-block; width: 1rem; height: auto; aspect-ratio: 1 / 2; background: url('https://swimg.wowtv.co.kr/stockwinN/static/images/icons/arrow_black_r.png') no-repeat right; background-size: contain; position: absolute; top: 14%; right: 0; }

.stock-report-pagination {text-align: center; margin: 4% 0 8%; font-size: 2rem; color: #323232; font-weight: 100;}
.stock-report-pagination .swiper-pagination-current {font-weight:bold;}

/* 관심종목 핫클립 */
#stock-hotclip {margin-bottom:10%;}
#stock-hotclip h4 {font-size:2.6rem; margin:0;}
#stock-hotclip h4 span {color:var(--default-red); font-weight:700;}
#stock-hotclip #hotclip-list { margin: 5% 0; /*gap: 2%;*/ }
#stock-hotclip #hotclip-list .hotclip { width: 50%; cursor:pointer;}
#stock-hotclip #hotclip-list .hotclip.swiper-slide > div { border-radius:1.5rem; overflow:hidden; position:relative;}
#stock-hotclip #hotclip-list .hotclip.swiper-slide > div span { position: absolute; right: 6%; bottom: 8%; background-color: rgba(0, 0, 0, 0.5); color: #fff; padding: 2%; border-radius: 0.3rem; font-size: 1.3rem; }
/*#stock-hotclip #hotclip-list .hotclip:last-of-type { margin-right:4%; }*/
#stock-hotclip #hotclip-list .hotclip p {width:85%; margin: 5% auto 0; font-size: 2.3rem; font-weight: 600; text-align: center; /*word-break:keep-all;*/}

#fake-data-area {position:relative; overflow:hidden;}
#fake-data-area::before { content: '주식창 앱에서 \A 내 관심종목을 추가해주세요'; display: block; position: absolute; top: 0; left: 0; width: 72%; height: 65%; background-color: rgba(246, 246, 246, 0.8); color: #303030; margin: 0 4%; border-radius: 2rem; text-align: center; padding: 50% 10% 0; z-index: 1; backdrop-filter: blur(5px); font-size: 2.7rem; font-weight: 600; text-shadow: 1px 5px 5px var(--default-gray); white-space: pre-wrap; line-height: 1.5;} 
#fake-data-area #hotclip-list {display:flex; gap:2%;}

.slider-index {font-size: 2.2rem;}
.slider-index::before {width: 2.2rem; height: auto; aspect-ratio: 1 / 1;}
.board-info.circle .board-thumbnail {width:14rem; height:auto; aspect-ratio: 1 / 1;}

@media (max-width: 600px){
/*    #schedule-calendar tbody tr td:is(.today, .on)::before {top:calc(4% + 0.7rem);}*/
    #cntnts-recent-area .cntnts-recent-list .cntnts-thumb a p span:first-of-type { font-size: 3.2rem;}
    #cntnts-recent-area .cntnts-recent-list .cntnts-thumb a p span:last-of-type { font-size: 1.8rem; }
    
    #cntnts-recent-area .cntnts-recent-list .info .title {font-size: 2.9rem;}
    #cntnts-recent-area .cntnts-recent-list .info .date {font-size: 2.2rem;}

    #cntnts-area #cntnts-thumbnail div img { width: 13.5rem; }
    #cntnts-area #cntnts-thumbnail div p { font-size: 2.35rem; }
    #cntnts-area #cntnts-thumbnail div p a { font-size: 1.4rem; }

    .board-info.circle .board-thumbnail {width:13rem;}

    .slider-index {font-size: 1.9rem;}
    .slider-index::before {width: 1.9rem;}
}