@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

/* 공통 스타일 */
/* 변수 */
:root {
    --main-font-color: #1a0101;
    --main-back-color: #f6f6f6;
    --main-padding-val: 0 4%;
    --default-red: #ff5050;
    --default-blue: #5664f4;
    --default-semi-gray: #9f9797;
    --default-gray: #dadada;
    --default-background: #f6f7f8;
}

html {font-size:62.5%;}
html, body, p, ul {margin:0; padding:0;}
input {font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; font-weight:400; color:var(--main-font-color);}
li {list-style:none;}
a {text-decoration:none; color:var(--main-font-color); font-weight:400;}
button {background-color:transparent; border:none; cursor:pointer;}
img {display:block;}

body * {font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; font-weight:400; color:var(--main-font-color); box-sizing:border-box;}
h1, h2, h3, h4, h5, h6 {font-weight:700;}
b {font-weight:bold;}

.screen-reader-only { overflow: hidden; position: absolute; clip: rect(0, 0, 0, 0); clip-path: polygon(0 0, 0 0, 0 0); width: 1px; height: 1px; margin: -1px; }

/* 영역 내 이미지 100% 설정 */
.img-fit {width:100%;}

/* 영역 내 제목 */
.page-title {display:inline-flex; align-items:center; gap:4%; width:55%; font-size:3.2rem; margin:0;}
.sub-title {font-size:2.8rem; margin:5% 0;}
.sub-title .point {color:#6200ee;}
.info-title  {color:var(--default-semi-gray); font-weight:500; font-size:2.2rem; margin:2% 0 5%;}

/* 제목 옆에 말풍선 설명 */
.bubble {display: block; font-size: 1.8rem; font-style: normal; background-color: var(--default-blue); width: fit-content; color: #fff; font-weight: 300; padding: 1.5% 3% 1.5% 2.7%; border-radius: 2rem 2rem 2rem 0; position: absolute; top: -25%; }

/* 폰트 컬러 css */
.f-r {color:var(--default-red);}
.f-b {color:var(--default-blue);}
.f-w {color:#fff;}
.f-bc {color:#303030;}
.f-neon {color:#7ffe7f;}

#wrapper.wall::before {content:''; position:fixed; top:0; left:0; z-index:5; display:block; width:100%; height:100%; background-color:var(--default-background); opacity:0;}

/* 데이터 없음 안내 */
.empty-data {text-align:center !important; font-size:2rem;}

#empty-area { position: relative; min-height: calc(100vh - 40rem); background-color: #fff; background-image: url('https://swimg.wowtv.co.kr/stockwinN/static/images/icons/info.png'); background-repeat: no-repeat; background-position: 50% 25%; display: flex; justify-content: center; background-size: 15%; }
#empty-area::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; opacity: 0.8; }
#empty-area .empty-data { text-align: center !important; font-size: 3rem; font-weight: bold; z-index: 1; margin-top: 50%; }

/* 이전 버튼 */
#btn-prev {width:1.4rem; height:2.9rem; padding:0;}

/* 위로 이동 버튼 */
#btn-top {display:none; position:fixed; bottom:2%; right:3%; width:4.5rem; height:4.5rem; z-index:10;}

/* 기본 헤더 없는 경우 */
.no-header {display:flex; align-items:center; justify-content:space-between; width:92%; padding:5% 0;}
#search-area .no-header {width:100%;}
/*.no-header a {}*/
/*.no-header a::before {content: ''; display: inline-block; background: url('https://swimg.wowtv.co.kr//stockwinN/static/images/icons/arrow_black_r.png') no-repeat center; background-size: contain; width:28px; height:30px;}*/

/* 레이어 닫기 버튼 이미지 */
.close-layer {padding:0;}
.close-layer::before {content: ''; display: inline-block; background: url('https://swimg.wowtv.co.kr//stockwinN/static/images/icons/arrow_black_r.png') no-repeat center; background-size: contain; width: 1.2rem; height: auto; aspect-ratio: 1 / 2; vertical-align:middle;}

/* 제목 옆에 ... 표시 */
.sub-area {position:relative;}
.sub-area .more {position:absolute; top:3%; right:4%;}
.sub-area .more::before { content: ''; display: inline-block; background: url('https://swimg.wowtv.co.kr//stockwinN/static/images/icons/more.png') no-repeat center; background-size: contain; width:2rem; height:2rem; }

/* 리스트 더보기, 덜보기 */
/*.more-data {width:100%;}*/
.more-data::before {content:''; display:block; background:url('https://swimg.wowtv.co.kr/stockwinN/static/images/icons/arrow_gray_b.png') no-repeat center; background-size: 2.3rem 1.3rem; width: 3rem; height: 2rem; margin: 0 auto;}
.more-data.open::before {transform:scaleY(-1);}

/* 기본 스와이프 */
.base-swipe .swiper-slide {margin-right:3.5%;}
.base-swipe .swiper-slide:last-of-type {margin-right:0;}

/* 사각형 2개씩 2행 */
.four-square-row {display: flex ; flex-wrap: wrap; align-items: flex-start; width: 100%; justify-content:space-between;}
.four-square-row > div {width: calc(100% / 2.04); border: 0.1rem solid var(--default-gray); padding: 6% 2.5%; border-radius:1rem; position:relative;}
.four-square-row > div:nth-of-type(n+3) {margin-top:2%;}
.four-square-row > div a p:first-of-type {color: var(--main-font-color); font-weight: 600; font-size: 2.3rem;}
.four-square-row > div a p:last-of-type {color: #777; font-weight: 400; font-size: 2.3rem; }

/* 사각형 2개씩 2행 + 이미지 */
.four-square-row div.with-img { border: none; background-color: var(--default-background); aspect-ratio: 162 / 78; padding: 0 0 0 4%; display: flex; align-items: center; justify-content: flex-start; }
.four-square-row div.with-img a { display: inline-block; width:100%; }
.four-square-row div.with-img a p {line-height:1.5;}
.four-square-row div.with-img a p span {display:block; color:var(--main-font-color);}
.four-square-row div.with-img a p span:first-of-type {font-size: 2.45rem; font-weight: 700;}
.four-square-row div.with-img a p span:last-of-type {font-size:2.2rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight:500; letter-spacing: -0.04rem;}
.four-square-row div.with-img a img {width:32%; position:absolute; top:17%; right:5.5%;}

/* 배너 */
.banner img {width:100%; height:auto;}
.banner > div {overflow:hidden;}

/* 배너 - 납작 타원 페이지 형식 */
.banner.under-circle > div {border-radius:0.5rem;}
.banner.under-circle .slick-dots {width:100%; display:flex; justify-content:center; align-items:center; gap:1.5%; margin-top:3%;}
.banner.under-circle .slick-dots li {width:0.9rem; height:0.9rem; border-radius:50%; background-color:#dfdfdf;}
.banner.under-circle .slick-dots li.slick-active {width:2.7rem; border-radius:0.8rem; background-color:var(--default-blue); transform:scaleX(1); transition-duration:0.5s;}
.banner.under-circle .slick-dots li button {display:none;}

/* 배너 - 납작 사각형 페이지 형식 */
.banner.under-square .slick-dots {width: 50%; height: 3px; display: flex; align-items: center; justify-content:center; margin: 0 auto; padding:4% 0 6%;}
.banner.under-square .slick-dots li {width: 25%; height: 0.3rem; background-color:var(--default-gray);}
.banner.under-square .slick-dots li.slick-active {background-color: #000;}
.banner.under-square .slick-dots li button {display:none;}
#category-area .banner.under-square .slick-dots { padding: 4% 0 0; } 

/* 배너 - 텍스트 띠 */
.banner-text-belt {margin: 7% auto; background-color: #303030; border-radius:0.5rem; width:92%; padding:2% 4%;}
.banner-text-belt .text-item.slick-slide { display: flex; align-items: center; justify-content: flex-start; gap:2%;}
.banner-text-belt .text-item a {font-size:1.8rem; color: #fff; width: 70%;}
/*.banner-text-belt .text-item a::before {content: ''; display: inline-block; background: url('https://swimg.wowtv.co.kr/stockwinN/static/images/icons/database.png') no-repeat center; background-size: contain; width: 2.6rem; height: auto; aspect-ratio: 26 / 28; vertical-align:middle; margin:1% 1rem 1% 0;}*/
.banner-text-belt .text-item i::before {content: ''; display: inline-block; background: url('https://swimg.wowtv.co.kr/stockwinN/static/images/icons/text_banner_icon.png') no-repeat center; background-size: contain; width: 2rem; height: auto; aspect-ratio: 24 / 27;}
.banner-text-belt ul.text-banner-dots {width:fit-content; display:inline-flex; position: absolute; top: calc(51% - 1.55rem); right: 4%; background-color:#181818; padding:1% 2.5% 1.2% 2%; border-radius:2rem; font-size:1.5rem; font-weight:300; align-items:center;}
.banner-text-belt ul.text-banner-dots span {color:#fff;}
.banner-text-belt ul.text-banner-dots::before {content:''; display:inline-block; background: url('https://swimg.wowtv.co.kr/stockwinN/static/images/icons/pause_circle_white.png') no-repeat center; background-size: contain; width: 1.6rem; height: 1.6rem; margin-right: 1rem;}
.banner-text-belt .text-banner-dots li {display:none;}
.banner-text-belt .text-banner-dots li.slick-active {display:block;}

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

/* 슬라이더 인덱스 */
.slider-index { display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #323232; }
.slider-index::before {content:' '; background:url('https://swimg.wowtv.co.kr/stockwinN/static/images/icons/pause_circle_black.png') no-repeat center; display: inline-block; width: 2rem; height: 2rem; background-size: 100%; margin-right:2%;}
.slider-index b::after {content: '\00a0/'; font-weight: 100;}

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

/* 게시글 - 왼쪽 썸네일, 오른쪽 설명 스타일 */
.board-list {padding:4%;}

.board-info { padding: 7% 0; border-bottom: 0.1rem solid var(--default-gray); display: flex; align-items: center; gap: 5%; justify-content: center; }
.board-info:last-of-type { border-bottom: none; }

/* 게시글 - 이미지 1행 2열 스타일 */
.two-col { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.two-col .board-info { display: block; width: calc((100% / 2.08)); border-bottom: none; padding: 0; margin-bottom: 4%; }

.board-info .board-thumbnail {display:none; position:relative; overflow: hidden;}
.board-info .board-thumbnail.bcast a::before { content: ''; display: block; width: 100%; height: 100%; background-color: var(--main-font-color); position: absolute; top: 0; left: 0; opacity: 0.4; }
.board-info .board-thumbnail.bcast a::after { content: ''; background: url('https://swimg.wowtv.co.kr/stockwinN/static/images/icons/play.png') no-repeat center; display: block; width: 10rem; height: 10rem; background-size: 100%; position: absolute; top: calc(50% - 5rem); left: calc(50% - 5rem);}

/* 게시글 썸네일(사각형, 원형) */
.board-info.square .board-thumbnail {display:block; width:45%; border-radius:1rem;}
.board-info.circle .board-thumbnail {display:block; width:13.8rem; height:13.8rem; border-radius: 50%; background-color: var(--main-back-color);}
.board-list.event .circle .board-thumbnail {width:14.8rem; height:auto; aspect-ratio: 1 / 1; color:transparent;}

.board-info .board-text {width:100%;}
.board-info.square .board-text {width:55%;}
.board-info.circle .board-text {width:60%;}
.board-text p {display:flex; align-items:center; gap:3%; font-size: 2rem; color:var(--default-semi-gray);}
.board-text p.title {font-size:2.4rem; margin-bottom:4%; line-height:1.3; color:var(--main-font-color); font-weight:700; text-align:left; word-break:keep-all;}
.board-text p.title.free a::before {content: '[무료] '; color: var(--default-red); font-weight:600;}
.board-text p.title a {font-weight: 700;}
.board-text p span.dday {background-color: var(--default-red); border-radius: 2rem; font-size: 1.5rem; color: #fff; padding: 1.5% 3%; font-weight: 300; }
.board-text p span.dday::before {content:' D - ';}
.board-text p.today {color: var(--default-red);}
.board-text p.today::after { content: "오늘"; background-color: var(--default-red); color: #fff; font-size: 1.4rem; padding: 1.5% 3.5%; vertical-align: middle; border-radius: 2rem;}
.board-text span.always {background-color: var(--default-blue); border-radius: 2rem; font-size: 1.5rem; color: #fff; padding: 1.5% 3%; font-weight: 300; }
.board-text span.always::before {content:'상시';}

/* 이미지 틀 - 모서리 둥근 가로 직사각형(풀이미지), 모서리 둥근 가로 직사각형(테두리), 세로 직사각형(풀 이미지) */
.img-box {width:100%; border:0.1rem solid var(--default-gray); border-radius:2rem; overflow:hidden;}
.img-box.full {border:none;}

/********************************************/
/* 메뉴 */

/* 서브 메뉴 - 타원형 (swiper) */
.sub-menu-ellipse {width:100%; display: flex; align-items: center; justify-content: flex-start; gap: 1.2%;}
.sub-menu-ellipse li {width:fit-content; border: 0.1rem solid #c5c1c1; padding: 2.76% 5%; border-radius: 3rem; font-size:2.2rem; cursor:pointer;}
.sub-menu-ellipse li.on { background-color:#303030; color:#fff; }

/* 서브 메뉴 - 모서리 둥근 사각형 (swiper) */
.sub-menu-square {display: flex; align-items: center; justify-content: flex-start; gap:1.5%;}
.sub-menu-square li {width:fit-content; border: 0.1rem solid #aeaeae; /*padding: 2% 4%;*/ text-align: center; border-radius: 0.5rem; } 
.sub-menu-square li.on {background-color:var(--default-blue);}
.sub-menu-square li :is(span, a) {font-size: 2rem; font-weight: 500; color: #a8a1a1; display:inline-block; padding:7% 1.5rem;}
.sub-menu-square li.on {border-color:var(--default-blue); background-color:var(--default-blue);}
.sub-menu-square li.on :is(span, a) {font-weight:400; color:#fff;}

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

/* 로그인 */
#login-popup { position: absolute; top: 8%; z-index: 30; background-color: #fff; width: 80%; left: 10%; border-radius: 1.8rem; overflow: hidden; }
#login-popup h3 { text-align: center; font-size: 3rem; margin-top: 10%; }
#login-popup form {margin-top:7%;}
#login-popup form > *:not(#btn-login) { margin-left: 5%; margin-right: 5%; }
#login-popup form input {border: 0.1rem solid #d1d6e2; padding: 4% 3%; text-align: center; border-radius: 0.4rem; font-size: 1.8rem; width: 100%;}
#login-popup form input::placeholder {color:#bebebe;}
#login-popup form input:focus {border-color:var(--default-blue); background-color:#f2f6ff; outline:none;}
#login-popup form > input {width:90%;}
#login-popup form > div { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2%; }
#login-popup form > div input { width: 58%; text-align: left; }
#login-popup form #btn-get-number { width: 40%; font-size: 1.8rem; background-color: var(--default-blue); padding: 4% 0; border-radius: 0.4rem; color: #fff; }
#login-popup form p { display: none; align-items: center; justify-content: space-between; margin-top: 2%; }
#login-popup form p #time-remaining { font-size: 1.8rem; color: #7a7a7a; font-weight: 600; width: 50%; }
#login-popup form p #time-remaining b { color: var(--default-red); margin-left: 5%; }
#login-popup form p button { font-size: 1.8rem; text-decoration: underline; }
#login-popup form #btn-login { width: 100%; background-color: var(--default-blue); padding: 5% 0; color: #fff; font-size: 2.4rem; margin-top:10%;}

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

/* 앱 설치 안내 팝업 */
#popup-install {position: absolute; top: 8%; z-index: 30; background-color: #fff; width: 80%; left: 10%; border-radius: 1.8rem;}
#popup-install > div {position: relative;}
#popup-install > div::before { content: ''; background: url('https://swimg.wowtv.co.kr/stockwinN/static/images/icons/app.png') no-repeat center; display: block; width: 18.2rem; height: auto; aspect-ratio: 182 / 185; background-size: contain; position: absolute; top: -32%; left: calc(50% - 11rem);}
#popup-install > div h3 { text-align: center; font-size: 3rem; padding: 15% 0 0; color:#000;}
#popup-install > div p { text-align: center; font-size: 2.6rem; margin: 3% 5% 8%; font-weight: bold; line-height: 1.5; color:#000;}
#popup-install > div p span {}
#popup-install > div #btn-install { width: 100%; padding: 5% 0; background-color: var(--default-blue); border-radius: 0 0 1.8rem 1.8rem; color: #fff; font-size: 2.4rem; }
#popup-install > div .btn.close { position: absolute; bottom: -13%; right:0;}
#popup-install > div .btn.close img { width: 2rem; height: auto; aspect-ratio: 1 / 1; }
#popup-install > div .btn.close.today { left: 0; right: auto; color: #fff; font-size: 2rem; font-weight: 500; }

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

/* search */

/* 삭제 버튼 */
#search #btn-delete, #recent-search .btn-delete {background-color:transparent; border:none; width:10%; padding:4% 0; position:relative;}

/* 검색 */
body > #search-area #search-content {padding:var(--main-padding-val); }
#search-result-area {padding:0; background-color:var(--main-back-color);}

#search {width:100%; display:flex; align-items:center; justify-content: space-between; gap:2%; margin:7% 0 6%;}
#search-result-area #search {background-color:#fff; padding:0 4% 4%; margin-bottom:0;}

#search form {width:88%; position:relative;}
#search input[name="searchText"] {width:100%; padding:5% 16% 5%; background-color:#e6eefd; border:none; border-radius:5rem; font-size:2.2rem; font-weight:500;}
#search input[name="searchText"]:focus {outline:none;}
#search input[name="searchText"]::placeholder {color:#1a0101; font-size:2.2rem;}

#search :is(#btn-search, #btn-rst-srhtxt) {position:absolute; top:24%;}
#search :is(#btn-search, #btn-rst-srhtxt)::before {content:''; display:inline-block; width:3.3rem; height:3.3rem; background-repeat:no-repeat; background-size:contain;}
#search #btn-search {left:5%; top:30%;}
#search #btn-search::before {background-image:url('https://swimg.wowtv.co.kr/stockwinN/static/images/icons/search_blue.png'); background-position:left; width:2.7rem; height:2.7rem;}
#search #btn-rst-srhtxt {right: 4%;}
#search #btn-rst-srhtxt::before {background-image:url('https://swimg.wowtv.co.kr/stockwinN/static/images/icons/close_circle.png'); background-position:right;}

/* 검색 결과 - 파트너, 이벤트 정보 */
#search-partner, .search-board {margin-bottom:2%; padding:4%; background-color:#fff;}
.search-board .info-title {margin-bottom:0;}

/* 검색 취소 */
#search > a {font-size:2.5rem; font-weight:500;} 

/* 최근 검색어 */
#recent-search {margin-bottom:5%;}
#recent-search > ul {}
#recent-search > ul li {display:flex; justify-content:space-between; align-items:center; margin-bottom:3%;}
#recent-search > ul li a {font-size:2.1rem; font-weight: 500;}
#recent-search .btn-search-delete::before {content:' '; display: inline-block; width:1.2rem; height:1.2rem; background:url('https://swimg.wowtv.co.kr/stockwinN/static/images/icons/close.png') no-repeat right; background-size:contain;}

/* 최근 검색어 저장 slider checkbox */
#recent-search > div {width:100%; margin-top:4%; display:inline-flex; align-items:center; justify-content:flex-end; gap:2%;}
#recent-search > div span {font-size:1.8rem; color:#303030; font-weight:500;}
.switch {position: relative; display: inline-block; width:4.5rem; height:2.8rem;}
.switch input {opacity: 0; width: 0; height: 0;}
.slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; border-radius: 3.4rem;}
.slider:before {position: absolute; content: ""; width:2.2rem; height:2.2rem; left:0.4rem; bottom:9%; background-color: white; -webkit-transition: .4s; transition: .4s; border-radius: 50%;}
input:checked + .slider {background-color: var(--default-blue);}
input:focus + .slider {box-shadow: 0 0 1px var(--default-blue);}
input:checked + .slider:before {-webkit-transform: translateX(1.5rem); -ms-transform: translateX(1.5rem); transform: translateX(1.5rem);}

/* 검색 추천 키워드 */
.recommend-keywords {margin-bottom: 5%;}
.recommend-keywords a {display: inline-block; margin: 0 1% 5% 0; padding: 3% 5%; border-radius: 3rem; background-color: #f2f2f2; font-size: 2rem; font-weight: 600; text-align: center;}

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

/* 카테고리 */
body > :is(#category-area, #search-area, #full-popup-area) {visibility:hidden; width:600px; height:100%; background-color:#fff; position:fixed; top:0; left:calc(((100vw - 1200px) / 2 ) + 480px); z-index:24; overflow-x:hidden; scrollbar-width:none;}
body > :is(#category-area, #search-area, #full-popup-area)::-webkit-scrollbar {display:none;}
:is(#category-content, #search-content, #search-result-area, #full-popup-area) {min-height:calc(100vh - 40rem);}

#category-area #category-content > div:not(.banner.under-square) {margin:var(--main-padding-val);}

#category-area #category-content #banner-img-belt-category, #banner-img-belt-search {margin-bottom:5%;}

#category-area #category-partnerList :is(#my-partner, .sub-area:last-of-type) {margin-bottom:5%;}
/*#category-area #category-partnerList .sub-area:last-of-type {margin-bottom:18%;}*/
/*#category-area #category-partnerList .partner-circle {width:calc(100% / 5); height:fit-content;}
#category-area #category-partnerList .partner-circle a.swiper-slide {margin-right:12%;}*/
    
#category-area #ai-service {margin-top:7%;}
    
#category-area #category-content #partner-app {margin-top:7%; margin-bottom:7%;}
#partner-app div.swiper-wrapper {display:flex; justify-content:space-between;}
#partner-app div.swiper-wrapper a.swiper-slide {width:calc(100% / 4.5);}
#partner-app div.swiper-wrapper a.swiper-slide img {width:100%;}

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

/* 풀페이지 팝업(정보노트...) */
#full-popup-area {}
#full-popup-area .no-header {width: 100%; padding: 5% 4%; background-color: var(--default-blue);}
#full-popup-area .no-header h2 {color:#fff;}
#full-popup-area .no-header button {width:2.5rem; filter:invert(1); }

#full-popup-area .view-wrap .info { background-color: #fff; border-bottom: 0.1rem solid var(--default-gray); margin: 0 4%; padding: 4% 0; }
#full-popup-area .view-wrap .info .title {margin: 0 0 2%; font-weight:800;}
#full-popup-area .view-wrap .info .date {padding-left:0;}
#full-popup-area .view-wrap .info .date::before {content:none;}
#full-popup-area .view-wrap .info .date::after {content:none;}
#full-popup-area .view-wrap .content {padding:4% 4% 0; border:none; word-break: break-all;}
#full-popup-area .view-wrap .content :is(p, span) {font-size: 2.8rem !important; font-weight: 400 !important; font-family:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important; font-weight:400 !important; color:var(--main-font-color) !important;}

#full-popup-area .view-wrap.join {}
#full-popup-area .view-wrap.join img {width:80%; margin:0 auto;}
#full-popup-area .view-wrap.join .content {}
#full-popup-area .view-wrap.join .content label {display:block; text-align:center; overflow:hidden;}
#full-popup-area .view-wrap.join .content :is(p, span) { font-size: 4rem !important; word-break: keep-all; font-weight: 700 !important; line-height: 1.5; }
#full-popup-area .view-wrap.join .content a {display:block; width:65%; margin:4% auto 0;}

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

/* AI 인공지능 서비스 */
#ai-service {}
#ai-service .ai-service-icon {position:absolute; top:13%; right:3%; width:35%;}

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

/* 하단 이미지 배너 */
#category-bottom-img-banner {width:100% !important; margin:5% 0 7%;}

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

/* html 뷰 페이지 */
.view-wrap {width:100%;}
.view-wrap .info {background-color:var(--default-background); padding:4%;}
.view-wrap .info .title {margin: 2% 0 4%; font-size: 2.7rem; font-weight: 600; word-break: keep-all;}

.view-wrap .info .date {font-size: 2rem; color: var(--default-semi-gray); position:relative;}
/*.view-wrap .info .date::before {content:'기간'; position:absolute; left:0;}*/
/*.view-wrap .info .date::after {content:'|'; position:absolute; top:7%; left:8.8%; font-size:1.8rem; color:var(--default-gray);}*/

.view-wrap .content {width:100%; border:0.1rem solid var(--default-semi-gray); border-left:none; border-right:none; overflow:hidden;}
.view-wrap.join .content {border:none;}
.view-wrap .content img {width:100% !important; height: auto !important;}

.other-view {width:100%; position:relative; padding-top: 4%; text-align:center;}
.other-view #btn-list {display:block; width:fit-content; font-size: 1.8rem; background-color: var(--default-blue); border-radius: 0.3rem; color: #fff; padding: 1.5% 4%; font-weight: 400; margin: 4% auto; }
.other-view :is(.prev, .next) {background-color:var(--main-back-color);  padding:4%; font-size: 2.2rem; font-weight: 600; text-align:left;}
.other-view :is(.prev, .next) a {display: inline-block; width: 65%; margin-left: 5%; font-weight: 400; overflow: hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:text-top;}
.other-view :is(.prev, .next)::before { content: ''; display: inline-block; background: url('https://swimg.wowtv.co.kr/stockwinN/static/images/icons/arrow_gray_b.png') no-repeat left; width: 1.5rem; height: 1.5rem; margin: 0 2%; background-size: contain; vertical-align: middle; }
.other-view .prev::before {transform:scaleY(-1);}
.other-view .prev {border-top:0.1rem solid var(--default-gray); border-bottom:0.1rem solid var(--default-gray);}
.other-view .next {border-bottom:0.1rem solid var(--default-gray);}

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

/* 관리자 추가 메뉴별 홈 페이지 상단 소개 부분 */
#intro-area {position:relative; overflow:hidden;}

#intro-area.ai {display: flex; aspect-ratio: 54 / 23; align-items: center; justify-content: flex-start; }
#intro-area.ai > img {position:absolute; top:0; left:0; z-index:0;}
#intro-area.ai .service-info {display: flex; width: 55%; flex-direction: column; align-items: flex-start; margin-left:4%; z-index:1;}
#intro-area.ai .service-info span {font-weight: 600; }
#intro-area.ai .service-info span:first-child {border: 0.1rem solid var(--default-semi-gray); color: var(--default-semi-gray); padding: 2% 4%; font-size: 1.6rem; border-radius: 0.3rem;}
#intro-area.ai .service-info span:nth-child(2) {margin: 0.75rem 0 1.5rem; font-size: 3rem; font-weight: 700; line-height: 1.3; word-break:keep-all;}
#intro-area.ai .service-info span:last-child {color: var(--default-red); font-size: 2.2rem; width:100%; display:flex; align-items:center; gap:5%;}
#intro-area.ai .service-info span:last-child::after { content: ''; display: inline-block; width: 2rem; height: 0.7rem; background: url('https://swimg.wowtv.co.kr/stockwinN/static/images/icons/arrow_blue_r.png') no-repeat right; background-size: contain; filter: invert(53%) sepia(32%) saturate(4484%) hue-rotate(328deg) brightness(99%) contrast(103%); }

#intro-area.market { width: 100%; aspect-ratio: 540 / 185; display: flex; align-items: center; justify-content: flex-start; }
#intro-area.market > img { position: absolute; top: 0; left: 0; }
#intro-area.market .service-info {width:fit-content; margin-left:4%; z-index: 1; }
#intro-area.market .service-info span { font-size: 3.3rem; 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;}

#intro-area .intro {position:relative;}
#intro-area .intro .btn-join {position: absolute; bottom: 8%; right: 2%; background-color: var(--default-red); color: #fff; font-size: 1.8rem; padding: 0.8rem; border-radius: 0.4rem; }
#intro-area .intro .btn-join::after {}

#intro-area .swiper-pagination {position:absolute; bottom:8%;}
#intro-area .swiper-pagination-bullet {/*background: var(--default-semi-gray); opacity: 0.8;*/}
#intro-area .swiper-pagination-bullet-active {background:var(--default-red);}

/* 파트너홈, 컨텐츠 추가 메뉴 (swiper) */
#add-menu {width: 100%; display: flex; align-items: center; justify-content: flex-start; border-bottom:0.1rem solid var(--default-gray); margin:2% 0 0;}
#add-menu > ul li {width:calc(100% / 5); text-align: center;  cursor:pointer; position:relative;}
#add-menu > ul li :is(a, span) {display:inline-block; width:100%; color: var(--default-semi-gray); font-weight: 600; font-size: 2.4rem; margin: 10% 0 15%}
#add-menu > ul li.on::after { content: ''; width: 70%; height: 0.3rem; display: inline-block; background-color: var(--default-blue); position: absolute; bottom: 0; left: 15%; }
#add-menu > ul li.on :is(a, span) {color:var(--main-font-color);}
#add-menu > ul ul {display:none;}

#add-menu-2-depth {width:100%; padding:4% 4% 0;}
#add-menu-2-depth .sub-menu-square li.swiper-slide {margin-right:1%; cursor:pointer;}
#add-menu-2-depth .sub-menu-square li.swiper-slide:last-of-type {margin-right:4%;}

/* 새로운것 */
/*#add-menu {width: 92%; display: flex; align-items: center; justify-content: flex-start; margin: 4% auto; padding: 2% 0; border-radius:0.5rem; background-color:var(--default-blue);}
#add-menu > ul li {width:calc(100% / 5); text-align: center;  cursor:pointer; position:relative;}
#add-menu > ul li :is(a, span) {display:inline-block; width:100%; color:#fff ; font-weight: 600; font-size: 2.4rem; margin: 10% 0 15%}
#add-menu > ul li.on::after { content: ''; width: 70%; height: 0.3rem; display: inline-block; background-color: var(--default-blue); position: absolute; bottom: 0; left: 15%; }
#add-menu > ul li.on :is(a, span) {color:var(--main-font-color);}
#add-menu > ul ul {display:none;}

#add-menu-2-depth {width:100%; padding:4% 4% 0;}
#add-menu-2-depth .sub-menu-square li.swiper-slide {margin-right:1%; cursor:pointer;}
#add-menu-2-depth .sub-menu-square li.swiper-slide:last-of-type {margin-right:4%;}*/

/* 파트너홈, 컨텐츠 추가 메뉴별 컨텐츠 표시 화면 */
#menu-contents-area {width:100%; padding:4%; position:relative;}
#menu-contents-area #area-html {width:100%; }
#menu-contents-area #area-html img {width:100%;}

/* 파트너홈, 컨텐츠 추가 메뉴 게시글 뷰 페이지 */
.view-wrap.contents-home .content {border-color:var(--default-gray);}
.view-wrap.contents-home .other-view {background-color:transparent;}
/*.view-wrap.contents-home .other-view .next {border-bottom:none;}*/

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

/* 페이징 */
#paging-area {display:flex; align-items:center; justify-content:center; width:100%; margin:6% 0 4%; gap:5%;}
#paging-area a {color:var(--default-semi-gray); font-size:2rem;}
#paging-area a.on {font-weight:bold; color:var(--main-font-color);}
#paging-area a.prev-page {}
#paging-area a:is(.prev-page, .next-page)::before {content:''; display:inline-block; width:1.6rem; height:1.6rem; vertical-align:middle;}
#paging-area a.prev-page::before {background:url('https://swimg.wowtv.co.kr/stockwinN/static/images/icons/arrow_black_left.png') no-repeat left; background-size:contain;}
#paging-area a.next-page {}
#paging-area a.next-page::before {background:url('https://swimg.wowtv.co.kr/stockwinN/static/images/icons/arrow_black_r.png') no-repeat right; background-size:contain;}

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

/* 파트너 틀 */

/* 파트너 원 */
.partner-circle {display:flex;}
.partner-circle a {text-align:center; font-size:2.1rem; width:calc(100% / 5); height:auto; position: relative;}
.partner-circle a span {font-size:1.9rem; font-weight:500;}
.partner-circle a.swiper-slide {width:calc(100% / 5.5); margin-right:2.5%; }
.partner-circle a div { border-radius: 50%; overflow: hidden; background-color: #f2f2f2; margin-bottom: 10%; position: relative; width: 100%; aspect-ratio: 1 / 1; text-align: center; display: flex; justify-content: center; align-items: center; }
.partner-circle a div img { width: 115%; margin-top: 14%; }
.partner-circle.other a div img { width: 100%; margin-top: 0; }

/* 신규 파트너의 경우 new 표시 */
.partner-circle a.new div {background-color: #fde6e6;}
.partner-circle a.new::after {content: ''; background: url('https://swimg.wowtv.co.kr/stockwinN/static/images/icons/new.png') no-repeat center; display: flex; width: 3rem; aspect-ratio: 1 / 1; align-items: center; justify-content: center; position: absolute; bottom: 36%; right: 0; z-index: 3; background-size:contain;}

/* 라이브 중인 파트너의 경우 live 표시 */
.partner-circle a.live div {background-color: #fde6e6;}
.partner-circle a.live::before {content:''; display: block; background:url('https://swimg.wowtv.co.kr/stockwinN/static/images/icons/live_s.png') no-repeat left; background-size: contain; width: 5rem; aspect-ratio: 23 / 13; position:absolute; top: 3%; left: -15%; z-index: 3;}

/* 검색결과 파트너 */
#search-partner .partner-circle a.new::after {bottom: 28%;}

/* 파트너 둥근모서리 사각형 */
.partner-card {width: calc(100% / 3.15); background-color: #fff; text-align: center; position: relative; padding: 5% 0; border-radius: 20px; margin-bottom: 2.5%;}
.partner-card span {font-size: 1.6rem;}

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

/* 팝업창 */
.popup-background {display:none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); overflow: hidden; z-index:30;}
.popup-background :is(.popup, .popup-img) {background-color: #fff; width: 80%; margin: 0 auto; text-align: center; border-radius:2rem;} 

.popup-background .popup {overflow: hidden;} 
.popup-background .popup-img {position:relative;}

.popup-background .popup-img > img { position: absolute; top: -25%; left: 30%; width: 40%; }
.popup-background .popup-img .text {border-radius:2rem; overflow: hidden; width: 100%; display: flex; align-items: center; flex-direction: column; justify-content: space-between;}
.popup-background .popup-img .text .content {font-size: 2.7rem; font-weight: 700; margin:27% 0 10%;}
.popup-background .popup-img .text button {width: 100%; background-color: var(--default-blue); color: #fff; padding: 5% 0; font-size: 2.4rem;}

.popup-background .popup .text {margin: 10% 0;}
.popup-background .popup .text :is(.title, .content) {font-size: 2.7rem; font-weight: 700;}
.popup-background .popup .text .content {word-break: keep-all; width: 60%; margin: 0 auto; line-height: 1.5;}

.popup-background .popup .text .title { margin-bottom: 2%; }
.popup-background .popup .text .title.red { color: var(--default-red); }

.popup-background .popup #btn-popup-close {width: 100%; background-color: var(--default-blue); color: #fff; padding: 5% 0; font-size: 2.4rem;}

.popup-background .vod {position:fixed; width:calc(600px - 10%); left:calc((((100vw - 1200px) / 2 ) + 480px) + 5%); top:15%; display:flex; flex-direction:column; align-items:flex-end; gap:1.5rem;}
.popup-background .vod video {width:100%; aspect-ratio: 16 / 9;}
.popup-background .vod button {width:2.5rem; filter:brightness(5); padding:0;}

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

/* 정렬 버튼(최신순, 임박순) */
.btn-sort { display: flex; align-items: center; justify-content: flex-end; gap: 1.2%; }
.btn-sort button { border: 1px solid #aeaeae; color: #a8a1a1; padding: 1.2% 2%; border-radius: 0.5rem; font-size: 1.5rem; font-weight: 500; background-color: #fff; }
.btn-sort button.on { border-color: #303030; background-color: #303030; color: #fff; }

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

/* 댓글 */
.reply-area {margin: 7% 2% 7% 4%;}

.reply-area .btn-cancle {font-size: 1.7rem;}

.reply-area #frmSaveReply { width: 100%; display: flex; align-items: center; justify-content: space-between; position:relative;}
.reply-area .reply-modify { width: 100%; display:none; align-items: center; justify-content: space-between; position:relative;}

.reply-area #frmSaveReply label {position:absolute; left:7%; font-size:2.2rem; font-weight:500; color:#1a0101; z-index:1;}
.reply-area #frmSaveReply label span {font-weight:500; color:var(--default-blue);}

.reply-area :is(#frmSaveReply, .reply-modify) input[type=text] { background-color: #e6eefd; font-weight:500; border: none; font-size: 2.2rem; padding: 3.5% 7%; border-radius: 5rem; position:relative;}
.reply-area #frmSaveReply input[type=text] { width: 88%;}
.reply-area .reply-modify input[type=text] { width: 80%;}
.reply-area :is(#frmSaveReply, .reply-modify) input[type=text]:focus {outline:none; color:#000;}
.reply-area .btn-reply {}
.reply-area .btn-reply::before {content:''; display:block; background:url('https://swimg.wowtv.co.kr/stockwinN/static/images/icons/reply_regist.png') no-repeat center;     width: 6.2rem; height: auto; aspect-ratio: 1 / 1; background-size: contain;}
.reply-area .btn-reply.active {}
.reply-area .btn-reply.active::before {background-image: url('https://swimg.wowtv.co.kr/stockwinN/static/images/icons/reply_regist_active.png');}

.reply-list {margin: 1% 4% 1% 2%;}
.reply-list > li { padding: 6% 2%; border-bottom: 0.1rem solid var(--default-gray); position: relative; }
.reply-list > li .reply-view p { font-size: 2.4rem; font-weight: 600; }
.reply-list > li .reply-view > div { display: flex; align-items: center; justify-content: space-between; margin-top: 3%; }
.reply-list > li .reply-view .reply-data {width:85%; font-size: 1.8rem;}
.reply-list > li .reply-view .reply-data span { color: #a8a1a1; }
.reply-list > li .reply-view .reply-data span.date::before { content: '|'; color: var(--default-gray); margin: 0 1.5%; }
.reply-list > li .reply-view .reply-data span.date.udt::after {content: '수정됨'; color: #b3b3b3; margin-left: 3%; font-size: 1.5rem;}

.reply-area .btn-reply-modify {}
.reply-area .btn-reply-modify::before { content: ''; display:block; background: url('https://swimg.wowtv.co.kr/stockwinN/static/images/icons/more.png') no-repeat center; width: 1.8rem; height: auto; aspect-ratio: 2 / 1; background-size: contain; }
.reply-area .reply-tooltip {display:none; border: 0.1rem solid var(--default-red); border-radius: 0.5rem; width: 23%; padding: 3% 0; position: absolute; right: 0; bottom: -45%; background-color: #fff; text-align: center; line-height: 3; z-index:1;}
.reply-area .reply-tooltip li {}
.reply-area .reply-tooltip button { font-weight: 600; font-size: 1.7rem; }
.reply-area .reply-tooltip li:first-of-type button {color: var(--default-red);}

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

.btn-more { width: 100%; background-color: var(--main-back-color); color: #a8a1a1; border-radius: 0.3rem; padding: 3% 0; margin: 2% 0 10%; font-size:2rem;}
.btn-more::after {content:''; display:inline-block; width:1.4rem; height:auto; aspect-ratio: 27 / 17; background:url('https://swimg.wowtv.co.kr/stockwinN/static/images/icons/arrow_gray_b.png') no-repeat right; background-size:contain; margin: 0 -3% 0.3rem 3%;}

/* 애니메이션 */
/* 깜빡임 */
@keyframes blink-effect {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/**************************************************************/
@media (max-width:1200px){
    #popup-area .vod {left:calc(((100% - 600px) / 2) + 5%);}
}

@media (max-width:767px){
    .partner-circle a.live::before {width: 4.5rem; top: 1%;}
    .partner-circle a.new::after {width: 2.6rem; bottom: 48%;}
}

@media (max-width:600px){
    html {font-size:50%;}

    #popup-area .vod {width:90%; left:5%;}

    .four-square-row div.with-img a p span:first-of-type {font-size: 2.1rem;}
    .four-square-row div.with-img a p span:last-of-type {font-size:1.9rem;}

    /* 서브 메뉴 - 타원형 (swiper) */
    .sub-menu-ellipse li {font-size:2rem;}

    .reply-area .reply-modify input[type=text] {width: 75%;}
    .reply-area .reply-tooltip {bottom:-75%;}
}

@media (max-width:450px){
    #intro-area.market .service-info span {font-size:3rem;}

    /* 앱 설치 안내 팝업 */
    #popup-install > div::before {width: 14rem; top: -25%; left: calc(50% - 9rem);}
    #popup-install > div h3 {font-size: 2.6rem; padding-top: 18%;}
    #popup-install > div p {font-size: 2.3rem;}
    #popup-install > div #btn-install {font-size: 2.1rem;}
    #popup-install > div .btn.close.today {font-size: 1.8rem;}
}

@media (max-width:400px){
    .partner-circle a.live::before {width: 4rem;}
    .partner-circle a.new::after {width: 2.4rem; bottom: 50%;}

    #search-partner .partner-circle a.new::after {bottom: 40%;}
}

@media (max-width:380px){
    html {font-size: 45%;}
}