@charset "UTF-8";
/* Fonts */
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);
/* Fonts */
@import url(//fonts.googleapis.com/icon?family=Material+Icons);
@import url(//fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap); /* 실적 타이틀 */
@import url(//fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp);
@import url(//fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200);
@import url(https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
font-size: 100%;
font-family: "Spoqa Han Sans Neo", "Noto Sans KR", "Nanum Gothic", "MalgunGothic", Dotum, Lato, Roboto, Arial, sans-serif;
min-width: 360px;
position: relative;
display: flex;
flex-direction: column;
}
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
all: unset;
display: revert;
}
/* Preferred box-sizing value */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Reapply the pointer cursor for anchor tags */
a, button {
cursor: revert;
text-decoration: none;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
}
/* Remove list styles (bullets/numbers) */
ol, ul, menu {
list-style: none;
}
/* For images to not be able to exceed their container */
img {
max-inline-size: 100%;
max-block-size: 100%;
}
/* removes spacing between cells in tables */
table {
border-collapse: collapse;
}
/* Safari - solving issue when using user-select:none on the text input doesn't working */
input, textarea {
-webkit-user-select: auto;
user-select: auto;
}
/* revert the 'white-space' property for textarea elements on Safari */
textarea {
white-space: revert;
}
input, select, textarea {
font-family: "Spoqa Han Sans Neo", "Noto Sans KR", "Nanum Gothic", "MalgunGothic", Dotum, Lato, Roboto, Arial, sans-serif;
}
/* minimum style to allow to style meter element */
meter {
-webkit-appearance: revert;
appearance: revert;
}
/* preformatted text - use only for this feature */
:where(pre) {
all: revert;
}
/* reset default text opacity of input placeholder */
::placeholder {
color: unset;
}
/* remove default dot (•) sign */
::marker {
content: initial;
}
/* fix the feature of 'hidden' attribute.
display:revert; revert to element instead of attribute */
:where([hidden]) {
display: none;
}
/* revert for bug in Chromium browsers
- fix for the content editable attribute will work properly.
- webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable=false])) {
-moz-user-modify: read-write;
-webkit-user-modify: read-write;
overflow-wrap: break-word;
-webkit-line-break: after-white-space;
line-break: after-white-space;
-webkit-user-select: auto;
user-select: auto;
}
/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable=true]) {
-webkit-user-drag: element;
}
/* Revert Modal native behavior */
:where(dialog:modal) {
all: revert;
}
@font-face {
font-family: "GmarketSans";
src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff") format("woff");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "GmarketSans";
src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff") format("woff");
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: "GmarketSans";
src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff") format("woff");
font-weight: 700;
font-style: normal;
}
/* S-CoreDream = CoreGothic-E */
@font-face {
font-family: "SCoreDream";
font-weight: 100;
font-style: normal;
src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream1.woff2) format("woff2"), url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream1.woff) format("woff");
font-display: swap;
}
@font-face {
font-family: "SCoreDream";
font-weight: 200;
font-style: normal;
src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream2.woff2) format("woff2"), url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream2.woff) format("woff");
font-display: swap;
}
@font-face {
font-family: "SCoreDream";
font-weight: 300;
font-style: normal;
src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream3.woff2) format("woff2"), url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream3.woff) format("woff");
font-display: swap;
}
@font-face {
font-family: "SCoreDream";
font-weight: 400;
font-style: normal;
src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream4.woff2) format("woff2"), url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream4.woff) format("woff");
font-display: swap;
}
@font-face {
font-family: "SCoreDream";
font-weight: 500;
font-style: normal;
src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream5.woff2) format("woff2"), url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream5.woff) format("woff");
font-display: swap;
}
@font-face {
font-family: "SCoreDream";
font-weight: 600;
font-style: normal;
src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream6.woff2) format("woff2"), url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream6.woff) format("woff");
font-display: swap;
}
@font-face {
font-family: "SCoreDream";
font-weight: 700;
font-style: normal;
src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream7.woff2) format("woff2"), url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream7.woff) format("woff");
font-display: swap;
}
@font-face {
font-family: "SCoreDream";
font-weight: 800;
font-style: normal;
src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream8.woff2) format("woff2"), url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream8.woff) format("woff");
font-display: swap;
}
@font-face {
font-family: "SCoreDream";
font-weight: 900;
font-style: normal;
src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream9.woff2) format("woff2"), url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream9.woff) format("woff");
font-display: swap;
}
@font-face {
font-family: "ROKAFSans";
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts2201-3@1.0/ROKAFSansMedium.woff") format("woff");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "ROKAFSans";
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts2201-3@1.0/ROKAFSansBold.woff") format("woff");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "KimjungchulGothic";
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/KimjungchulGothic-Bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
}
.banner.strip {
height: 44px;
background: #ECEEF2;
position: relative;
}
@media (max-width: 767px) {
.banner.strip {
background: #DAE6FF;
height: 34px;
}
}
.banner.strip .wrap {
margin: 0 auto;
height: 100%;
text-align: center;
}
@media (max-width: 575px) {
.banner.strip .wrap {
margin: 0 18px 0 6px;
}
}
.banner.strip a:hover {
filter: brightness(110%);
-webkit-filter: brightness(110%);
cursor: pointer;
}
.banner.strip .view-pc {
display: block;
}
@media (max-width: 767px) {
.banner.strip .view-pc {
display: none;
}
}
.banner.strip .view-mobile {
display: none;
}
@media (max-width: 767px) {
.banner.strip .view-mobile {
display: block;
}
}
.banner.strip img {
height: 100%;
margin: 0 auto;
}
.banner.strip button.btn {
position: absolute;
right: 12px;
top: 10px;
cursor: pointer;
width: 24px;
height: 24px;
}
.banner.strip button.btn.btn_close {
font-size: 0;
background: url('data:image/svg+xml,') no-repeat center;
opacity: 0.2;
}
.banner.strip button.btn.btn_close:hover {
opacity: 1;
}
@media (max-width: 575px) {
.banner.strip button.btn {
right: 4px;
top: 6px;
}
}
/*
Slider
https://splidejs.com/
*/
.splide__arrow {
background: transparent;
cursor: pointer;
}
.splide__arrow svg {
fill: #000;
opacity: 0.3;
height: 24px;
width: 24px;
}
.splide__arrow:hover svg {
opacity: 1;
}
.my-slider-progress {
background: #ccc;
margin-top: 8px;
}
.my-slider-progress-bar {
background: #3c4e9b;
height: 2px;
transition: width 400ms ease;
width: 0;
}
/* // https://splidejs.com/ */
.grecaptcha-badge {
display: none !important;
}
img.btinfo {
width: 14px;
height: 14px;
opacity: 0.3;
vertical-align: middle;
}
.material-icons[class*=help] {
color: #C0C4CD;
font-size: 16px;
vertical-align: middle;
cursor: pointer;
}
.material-icons[class*=help].help-txt {
cursor: help;
}
.d-none,
.sr-only {
display: none !important;
}
*[role=readonly] {
display: none;
}
.boardView a {
color: #32ADFF;
}
.login_info {
display: inline-block;
line-height: 1.4;
padding: 10px 20px;
margin: 24px auto;
text-align: center;
font-size: 14px;
color: #949AA9;
border-radius: 10px;
word-break: keep-all;
}
.login_info .login-title {
color: #374FA8;
font-size: 18px;
margin-bottom: 16px;
}
.login_info strong {
font-weight: bold;
}
.req_login {
text-align: center;
}
.social-login {
display: flex;
list-style: none;
margin: 0 auto 70px;
padding: 0 20px;
justify-content: center;
gap: 16px;
}
@media (max-width: 767px) {
.social-login {
flex-direction: column;
max-width: 360px;
margin-bottom: 20px;
gap: 8px;
}
}
.social-login li {
text-align: center;
}
.social-login li a {
display: block;
padding: 22px 35px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border: 1px solid #E0E0E0;
color: #212121;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
}
@media (max-width: 767px) {
.social-login li a {
padding: 10px;
display: flex;
gap: 16px;
}
}
.social-login li a img {
width: 36px;
display: block;
margin: 24px auto 39px;
}
@media (max-width: 767px) {
.social-login li a img {
width: 26px;
margin: auto;
flex: 0;
}
}
.social-login li a span {
display: block;
margin: 20px 0 0;
}
@media (max-width: 767px) {
.social-login li a span {
flex: 1;
text-align: center;
margin: auto;
}
}
.social-login li a:hover {
border-color: #374FA8;
}
/* 모달 팝업 기본 배경 */
.modal {
position: fixed;
display: none;
top: 0;
z-index: 2;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
/* 스톡워치에 바란다 */
.pop_request {
position: fixed;
display: none;
z-index: 2;
top: 130px;
left: calc(50% - 768px / 2);
width: 768px;
border: 1px solid #a0a0a0;
border-radius: 8px;
background-color: #fff;
min-height: 20vh;
transition: 0.3s;
text-align: left;
}
@media (max-width: 575px) {
.pop_request {
top: 100px;
}
}
.pop_request .header {
border-radius: 8px 8px 0 0;
display: flex;
align-items: center;
position: relative;
margin: 0 !important;
}
.pop_request .header:after {
content: "";
height: 2px;
background: #ededed;
width: calc(100% - 40px);
margin: 0 auto;
position: absolute;
bottom: 0;
left: 20px;
}
.pop_request .header .title {
font-size: 20px;
color: #1e1e1e;
font-weight: bold;
text-align: center;
margin: 16px 0 16px 26px;
flex: 1;
text-align: left;
}
@media (max-width: 767px) {
.pop_request .header .title {
font-size: 16px;
}
}
.pop_request .header .title .blue_font {
color: #569bf7;
}
.pop_request .header .close {
flex: 0;
margin-left: auto;
}
.pop_request .header .close button {
cursor: pointer;
border: none;
background: none;
}
.pop_request .header .close button .material-icons {
font-size: 40px;
opacity: 0.3;
}
.pop_request .requests {
padding: 30px 30px 30px 20px;
}
@media (max-width: 767px) {
.pop_request .requests {
padding: 16px;
}
}
.pop_request .requests .sub_title {
font-size: 16px;
color: #282828;
margin-top: 23px;
}
.pop_request .requests .reqCont,
.pop_request .requests .reqInfo {
display: flex;
white-space: nowrap;
margin-bottom: 16px;
}
@media (max-width: 767px) {
.pop_request .requests .reqCont,
.pop_request .requests .reqInfo {
flex-direction: column;
gap: 8px;
}
}
.pop_request .requests .reqCont label,
.pop_request .requests .reqInfo label {
margin-right: 16px;
margin-top: 10px;
width: 12%;
text-align: left;
}
@media (max-width: 767px) {
.pop_request .requests .reqCont label,
.pop_request .requests .reqInfo label {
margin: 0;
width: auto;
}
}
.pop_request .requests .reqCont .material-icons,
.pop_request .requests .reqInfo .material-icons {
vertical-align: -4px;
font-size: 20px;
margin-right: 2px;
color: #569bf7;
}
.pop_request .requests textarea {
width: calc(100% - 32px);
height: 300px;
resize: none;
padding: 16px;
font-size: 16px;
font-family: "Spoqa Han Sans Neo", "Noto Sans KR", "Nanum Gothic", "MalgunGothic", Dotum, Lato, Roboto, Arial, sans-serif;
color: #222;
line-height: 1.5;
border-radius: 4px;
background: #faf9f9;
border: 1px solid #d1d1d1;
}
@media (max-width: 767px) {
.pop_request .requests textarea {
width: 100%;
padding: 8px;
height: 200px;
}
}
@media (max-width: 575px) {
.pop_request .requests textarea {
height: 120px;
}
}
.pop_request .requests textarea::placeholder {
color: #888;
}
.pop_request .requests input[type=text] {
width: calc(100% - 20px);
padding: 10px;
font-size: 16px;
font-family: "Spoqa Han Sans Neo", "Noto Sans KR", "Nanum Gothic", "MalgunGothic", Dotum, Lato, Roboto, Arial, sans-serif;
color: #222;
border-radius: 4px;
background: #faf9f9;
border: 1px solid #d1d1d1;
}
@media (max-width: 767px) {
.pop_request .requests input[type=text] {
width: 100%;
padding: 8px;
}
}
.pop_request .requests input[type=text]::placeholder {
color: #888;
}
.pop_request .requests input[type=checkbox] {
all: revert;
width: 14px !important;
}
@media (max-width: 767px) {
.pop_request .requests input[type=checkbox] {
width: 14px;
}
}
.pop_request .requests .req_count {
text-align: right;
font-size: 12px;
margin: -8px 0 16px 0;
color: #949AA9;
}
@media (max-width: 767px) {
.pop_request .requests .req_count {
margin-top: -12px;
margin-bottom: 0px;
}
}
.pop_request .requests .reqPrivacy {
text-align: center;
margin: 36px 0;
}
@media (max-width: 767px) {
.pop_request .requests .reqPrivacy {
margin-top: 20px;
margin-bottom: 20px;
text-align: left;
font-size: 14px;
word-break: keep-all;
}
}
.pop_request .requests .reqBtn {
text-align: center;
}
.pop_request .requests .reqBtn button {
border: none;
border-radius: 4px;
padding: 8px 32px;
background-color: #569bf7;
font-size: 20px;
font-weight: bold;
color: #fff;
cursor: pointer;
}
@media (max-width: 767px) {
.pop_request .requests .reqBtn button {
font-size: 16px;
}
}
@media (max-width: 991px) {
.pop_request {
width: calc(100% - 40px);
max-width: 768px;
margin: 0 20px;
left: 0;
}
.pop_request .requests .reqPrivacy {
text-indent: -24px;
margin-left: 24px;
}
}
/* 메인, 공지용 팝업 */
.pop_notice {
position: fixed;
background: white;
top: 200px;
left: 20vw;
display: none;
max-width: 500px;
min-width: 200px;
}
.pop_notice .util {
background: #333;
color: #FFF;
text-align: right;
font-size: 12px;
}
.pop_notice .util button i.material-icons {
font-size: 12px;
display: inline-block;
vertical-align: middle;
}
.pop_notice .util button.today {
padding: 6px 0 6px 8px;
border: 0;
background: none;
color: #999;
font-size: 14px;
vertical-align: middle;
cursor: pointer;
}
.pop_notice .util button.today:after {
content: "";
display: inline-block;
margin: 0 5px -2px 10px;
background: #676767;
width: 1px;
height: 12px;
}
.pop_notice .util button.close {
padding: 6px 8px 6px 0;
border: 0;
background: none;
color: #999;
font-size: 14px;
vertical-align: middle;
cursor: pointer;
color: #FFF;
}
.pop_notice .main .slogan img {
display: block;
width: 100%;
}
.pop_notice .main .btn {
display: flex;
justify-content: space-between;
}
.pop_notice .main .btn.btn2 a {
display: block;
width: 50%;
}
.pop_notice .main .btn.btn2 img {
display: block;
width: 100%;
}
@media (max-width: 767px) {
.pop_notice {
position: absolute;
}
}
@media (max-width: 575px) {
.pop_notice {
top: 220px;
left: 16px;
position: absolute;
min-width: 284px;
width: calc(100% - 40px);
}
.pop_notice .main {
width: 100% !important;
}
.pop_notice .main img {
width: 100% !important;
height: auto !important;
}
}
/* 메인 "모달" 팝업 */
.pop_notice.pop_modal {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: auto;
max-width: 100%;
min-width: auto;
background: none;
}
.pop_notice.pop_modal .modal {
display: block;
}
.pop_notice.pop_modal .main {
position: relative;
max-width: 100%;
margin: 120px auto auto;
z-index: 101;
}
@media (max-width: 767px) {
.pop_notice.pop_modal .main {
margin-right: 20px;
margin-left: 20px;
width: calc(100% - 40px) !important;
}
}
@media screen and (max-width: 576px) {
.pop_notice.pop_modal .main {
width: calc(100% - 40px) !important;
position: fixed;
}
}
.pop_notice.pop_modal .main .slogan img.mobile {
display: none;
}
@media screen and (max-width: 576px) {
.pop_notice.pop_modal .main .slogan img.pc {
display: none;
}
.pop_notice.pop_modal .main .slogan img.mobile {
display: block;
}
}
.pop_notice.pop_modal .main .util-on {
position: absolute;
right: 26px;
top: 24px;
}
.pop_notice.pop_modal .main .util-on button {
border: none;
padding: 0;
margin: 0;
vertical-align: top;
background: none;
cursor: pointer;
}
.pop_notice.pop_modal .main .util-on button.today {
font-size: 16px;
color: #616161;
opacity: 0.5;
margin: 8px;
}
.pop_notice.pop_modal .main .util-on button.close {
color: #616161;
opacity: 0.5;
height: 40px;
}
.pop_notice.pop_modal .main .util-on button.close span.bar {
display: inline-block;
width: 40px;
height: 1px;
background: #999;
transform: rotate(45deg);
}
.pop_notice.pop_modal .main .util-on button.close span.bar + span.bar {
transform: rotate(-45deg);
margin-left: -40px;
}
.pop_notice.pop_modal .main .util-on button.close span[role=readonly] {
display: none;
}
.pop_notice.pop_modal .main .util-on button:hover {
transition: 0.3s;
opacity: 1;
}
@media (max-width: 575px) {
.pop_notice.pop_modal .main .util-on {
right: 10px;
top: 10px;
}
}
/* ---------------------------- Captcha 모달 팝업 */
#vscore_block.modal {
position: fixed;
top: 0;
left: 0;
z-index: 101;
width: 100%;
height: 100%;
background-color: #000000;
opacity: 0.8;
display: block;
}
#idxBooks {
display: block;
width: calc(100% - 60px);
overflow: hidden;
border-bottom: 1px solid #DEE4EC;
margin: 0 30px 20px;
padding-bottom: 20px;
/* Exact height */
}
@media (max-width: 991px) {
#idxBooks {
margin-right: 0;
margin-left: 0;
width: calc(100% - 8px);
}
}
@media (max-height: 360px) {
#idxBooks {
display: none;
}
}
#idxBooks .head {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid #EAEEF4;
margin-bottom: 24px;
}
#idxBooks .head h4 {
margin: 16px 0;
letter-spacing: -0.02em;
}
#idxBooks .head h4:before {
content: "";
display: inline-block;
border: 4px solid #f47d09;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
-o-border-radius: 50%;
width: 5px;
height: 5px;
margin-right: 6px;
}
#idxBooks .head h4 small {
font-weight: normal;
font-size: 12px;
color: #C0C4CD;
margin-left: 4px;
}
@media (max-width: 359px) {
#idxBooks .head h4 small {
display: none;
}
}
#idxBooks .head a.more {
color: #868686;
font-size: 14px;
}
#idxBooks .head a.more:after {
content: "";
display: inline-block;
border-width: 1px 1px 0 0;
border-color: #f47d09;
border-style: solid;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
width: 4px;
height: 4px;
margin: 4px;
}
#idxBooks .head a.more:hover {
color: #335599;
}
#idxBooks .body ul {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
padding: 0;
margin: 0;
list-style: none;
}
#idxBooks .body ul li {
width: 25%;
}
#idxBooks .body ul li img {
display: block;
width: 100%;
margin-bottom: 10px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
border-radius: 6px;
-o-border-radius: 6px;
}
#idxBooks .body ul li img.border {
border: 1px solid #dadada;
width: calc(100% - 2px);
}
#idxBooks .body ul li div.title {
color: #222;
word-break: keep-all;
letter-spacing: -0.02em;
font-size: 15px;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 991px) {
#idxBooks .body ul li div.title {
font-size: 13px;
}
}
@media (max-width: 359px) {
#idxBooks .body ul li div.title {
font-size: 12px;
}
}
#idxBooks .body ul li a:hover img {
filter: brightness(110%);
-webkit-filter: brightness(110%);
}
#idxBooks .body ul li a:hover div.title {
color: #335599;
}
@media (max-width: 359px) {
#idxBooks .body ul li {
width: 50%;
}
#idxBooks .body ul li:nth-child(3), #idxBooks .body ul li:nth-child(4) {
display: none;
}
}
.vscore_block_form {
position: fixed;
z-index: 102;
top: 25%;
left: calc(50% - 768px / 2);
width: 768px;
border: 1px solid #a0a0a0;
border-radius: 8px;
background-color: #fff;
min-height: 30vh;
transition: 0.3s;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
}
@media (max-width: 991px) {
.vscore_block_form {
width: calc(100% - 58px);
max-width: calc(992px - 42px);
min-width: 320px;
margin: auto;
left: 8px;
}
}
@media (max-width: 767px) {
.vscore_block_form {
min-width: calc(320px - 58px);
}
}
@media (max-width: 575px) {
.vscore_block_form {
top: auto;
bottom: -8px;
}
}
@media (max-height: 836px) {
.vscore_block_form {
top: auto;
bottom: -6px;
}
}
.vscore_block_form form {
border: none;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 40px 10px;
}
@media (max-width: 575px) {
.vscore_block_form form {
margin-top: 16px;
margin-bottom: 16px;
}
}
.vscore_block_form button {
border: none;
line-height: 1;
padding: 14px 40px !important;
font-size: 20px;
font-weight: bold;
background: #3c4e9b;
color: white;
transition: all 0.5s;
outline: none;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
vertical-align: middle;
white-space: nowrap;
cursor: pointer;
position: relative;
font-family: "Spoqa Han Sans Neo", "Noto Sans KR", "Nanum Gothic", "MalgunGothic", Dotum, Lato, Roboto, Arial, sans-serif !important;
letter-spacing: -0.02em;
}
.vscore_block_form button .material-icons {
opacity: 0;
color: #00ff00;
position: absolute;
transition: all 0.5s;
font-size: 30px;
left: 10px;
top: 9px;
}
.vscore_block_form button:hover {
filter: brightness(130%);
padding: 14px 40px 14px 60px !important;
}
.vscore_block_form button:hover .material-icons {
opacity: 1;
display: inline-block;
left: 20px;
}
.vscore_block_form button:active {
filter: brightness(90%);
-webkit-filter: brightness(90%);
transform: translateY(4px);
-webkit-transform: translateY(4px);
-moz-transform: translateY(4px);
-ms-transform: translateY(4px);
-o-transform: translateY(4px);
}
.vscore_block_form .gpolicy {
display: flex;
margin-top: 20px;
align-items: center;
}
.vscore_block_form .rc-anchor-logo-img {
background: url(https://www.gstatic.com/recaptcha/api2/logo_48.png);
background-repeat: no-repeat;
transition: all 0.3s ease;
background-size: 40px;
margin: 5px 8px 0 0px;
height: 40px;
width: 40px;
}
.vscore_block_form .rc-anchor-text {
display: flex;
flex-direction: column;
font-size: 13px;
font-weight: 400;
white-space: nowrap;
color: #212121;
line-height: 1.5;
}
.vscore_block_form .rc-anchor-text a {
color: #335599;
}
.vscore_block_form .rc-anchor-text a:hover {
text-decoration: underline;
}
.paging {
margin: 50px;
}
@media (max-width: 767px) {
.paging {
margin: 40px 4px;
}
}
.paging ul.pagination {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
font-size: 15px;
}
@media (max-width: 767px) {
.paging ul.pagination {
font-size: 13px;
gap: 6px;
flex-wrap: wrap;
}
}
.paging ul.pagination li[aria-label*=pagination] {
display: block;
max-width: 26px;
border-radius: 4px;
background: none;
border: 1px solid #ECEEF2;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
text-align: center;
font-size: 26px;
line-height: 1;
padding: 0 9px;
margin: 0 12px;
color: #ECEEF2;
font-weight: light;
}
@media (max-width: 767px) {
.paging ul.pagination li[aria-label*=pagination] {
margin: 0;
}
}
.paging ul.pagination li a {
color: #C0C4CD;
display: block;
padding: 0 4px;
}
.paging ul.pagination li a:visited {
color: #C0C4CD;
}
.paging ul.pagination li a:hover {
color: #212121;
}
.paging ul.pagination li a[aria-label*=pagination] {
display: block;
max-width: 26px;
border-radius: 4px;
background: #ECEEF2;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
text-align: center;
font-size: 26px;
line-height: 1;
padding: 0 10px;
margin: 0 12px;
color: #374FA8;
font-weight: light;
}
.paging ul.pagination li.active {
color: #374FA8;
font-weight: bold;
padding: 0 6px;
}
.paging ul.pagination li.disabled {
color: #C0C4CD;
}
.right > .paging {
margin: 0;
}
/* QuickLink icon */
.qlink {
position: fixed;
display: flex;
right: 20px;
bottom: 120px;
border-radius: 50%;
width: 50px;
height: 50px;
overflow: hidden;
color: white;
font-size: 12px;
word-break: keep-all;
cursor: pointer;
transition: 0.3s;
background-color: #569bf7;
background: rgba(86, 155, 247, 0.7);
-webkit-backdrop-filter: blur(2px) brightness(68%);
backdrop-filter: blur(2px) brightness(68%);
z-index: 999;
}
.qlink span {
align-self: center;
}
.qlink span.material-icons {
font-size: 33px;
text-align: center;
margin: auto;
}
.qlink span.txt {
display: none;
}
.qlink:hover, .qlink:active {
width: 200px;
border-radius: 30px 0 0 30px;
right: 0;
}
.qlink:hover span.material-icons, .qlink:active span.material-icons {
margin: auto auto auto 16px;
}
.qlink:hover span.txt, .qlink:active span.txt {
display: block !important;
margin: auto;
font-size: 15px;
white-space: nowrap;
}
@media mobile-lg {
.qlink {
right: 10px;
bottom: 20px;
}
}
.qlink-scrolled {
position: fixed;
display: flex;
right: 20px;
bottom: 130px;
}
.qlink-scrolled a.btn {
display: flex;
justify-content: center;
align-items: center;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
-o-border-radius: 50%;
width: 50px;
height: 50px;
overflow: hidden;
color: white;
font-size: 12px;
word-break: keep-all;
cursor: pointer;
transition: 0.3s;
background-color: #919191;
background: rgba(204, 207, 211, 0.4);
-webkit-backdrop-filter: blur(2px) brightness(68%);
backdrop-filter: blur(2px) brightness(68%);
z-index: 999;
}
.qlink-scrolled a.btn:hover, .qlink-scrolled a.btn:active {
background: rgb(204, 207, 211);
}
@media (max-width: 767px) {
.qlink-scrolled a.btn {
width: 40px;
height: 40px;
}
}
@media (max-width: 575px) {
.qlink-scrolled {
right: 8px;
bottom: 90px;
}
}
/* Favorite */
button.favorite {
width: 24px;
height: 24px;
cursor: pointer;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
border: none;
outline: none;
background: transparent url('data:image/svg+xml,') no-repeat center;
}
button.favorite:not(.on):hover, button.favorite:not(.on):focus {
-webkit-filter: brightness(80%);
-moz-filter: brightness(80%);
-ms-filter: brightness(80%);
-o-filter: brightness(80%);
filter: brightness(80%);
}
button.favorite.on {
background: url('data:image/svg+xml,') no-repeat center;
}
button.favorite.on:hover, button.favorite.on:focus {
background: url('data:image/svg+xml,') no-repeat center;
}
/* Reactions : Like */
button.like {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
-o-border-radius: 8px;
background: #ffffff;
border: 1px solid #C0C4CD;
border-color: #C0C4CD !important;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
button.like .icon {
font-size: 0px;
display: inline-block;
width: 24px;
height: 24px;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
border: none;
outline: none;
background: transparent url('data:image/svg+xml,') no-repeat center;
}
button.like .num {
font-weight: normal;
}
button.like.on .icon {
background: url('data:image/svg+xml,') no-repeat center;
}
button.like.on .num {
font-weight: bold;
}
button.like:hover {
background: rgb(255, 223, 223);
border-color: rgb(255, 182, 182) !important;
}
button.like:hover .icon {
background: url('data:image/svg+xml,') no-repeat center;
}
button.like:not(.on):hover .icon {
-webkit-filter: brightness(140%);
-moz-filter: brightness(140%);
-ms-filter: brightness(140%);
-o-filter: brightness(140%);
filter: brightness(140%);
opacity: 0.6;
}
body *::-webkit-scrollbar {
width: 6px;
height: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
border-radius: 6px;
-o-border-radius: 6px;
}
body *::-webkit-scrollbar-thumb {
background-color: #C0C4CD;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
border-radius: 6px;
-o-border-radius: 6px;
}
body *::-webkit-scrollbar-track {
background-color: #ECEEF2;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
border-radius: 6px;
-o-border-radius: 6px;
}
.scroll-x {
overflow-x: auto;
overflow-y: unset;
}
@media (max-width: 575px) {
.scroll-x {
cursor: grab;
}
}
.scroll-y {
overflow-x: unset;
overflow-y: auto;
}
@media (max-width: 575px) {
.scroll-y {
cursor: grab;
}
}
.scroll-all {
overflow: auto;
}
.scroll-no-bar {
-ms-overflow-style: none;
scrollbar-width: none;
}
.scroll-no-bar::-webkit-scrollbar {
display: none;
}
/* Slider */
/* loading spinner - 2022.11.14 Loading spinner */
.loading {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
background-color: none;
width: 96%;
height: 100%;
transition: all 0.3s ease;
z-index: 999;
}
.loading.blurry {
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(4px);
}
.loading.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
}
.loading.layer {
position: fixed;
left: 50%;
top: 50%;
width: auto;
height: auto;
padding: 40px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
-ms-border-radius: 100px;
border-radius: 100px;
-o-border-radius: 100px;
}
.loading.layer.blurry {
background-color: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(4px);
}
.lds-ellipsis {
display: inline-block;
position: absolute;
width: 80px;
height: 80px;
}
.lds-ellipsis div {
position: absolute;
top: 33px;
width: 13px;
height: 13px;
border-radius: 50%;
background: #3c4e9b;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
left: 8px;
animation: lds-ellipsis1 0.6s infinite;
-webkit-animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
left: 8px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
left: 32px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
left: 56px;
animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes lds-ellipsis3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes lds-ellipsis2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(24px, 0);
}
}
/* Loading spinner : 2024.07.22 돌아가는 형태 */
.spinner {
margin: auto;
}
.spinner svg {
width: 3.75em;
transform-origin: center;
animation: rotate 2s linear infinite;
-webkit-animation: rotate 2s linear infinite;
}
.spinner circle {
fill: none;
stroke: #374FA8;
stroke-width: 4;
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 200;
stroke-dashoffset: -35px;
}
100% {
stroke-dashoffset: -125px;
}
}
.red {
color: #ef4444;
}
.blue_font {
color: #05a3e5;
}
.positive,
.stock-up,
.gapup {
color: #F81C51 !important;
}
.negative,
.stock-down,
.gapdown {
color: #1971C2 !important;
}
.neutral {
color: #6C7285 !important;
}
.d-flex {
display: flex;
}
.d-none {
display: none;
}
.d-block {
display: block;
}
.d-inline-block {
display: inline-block;
}
.visible {
visibility: visible !important;
}
.invisible {
visibility: hidden !important;
}
.flex-row {
flex-direction: row;
}
.flex-column {
flex-direction: column;
}
.justify-start {
justify-content: flex-start;
}
.justify-center {
justify-content: center;
}
.justify-end {
justify-content: flex-end;
}
.justify-content-between {
justify-content: space-between;
}
.justify-content-around {
justify-content: space-around;
}
.justify-content-evenly {
justify-content: space-evenly;
}
.items-start {
align-items: flex-start;
}
.items-center {
align-items: center;
}
.items-end {
align-items: flex-end;
}
.align-content-start {
align-content: flex-start;
}
.align-content-center {
align-content: center;
}
.align-content-end {
align-content: flex-end;
}
.position-static {
position: relative;
}
.position-relative {
position: relative;
}
.position-absolute {
position: relative;
}
.position-fixed {
position: relative;
}
.position-sticky {
position: relative;
}
.m-0 {
margin: 0;
}
.m-1 {
margin: 0.25rem;
}
.m-2 {
margin: 0.5rem;
}
.m-3 {
margin: 1rem;
}
.m-4 {
margin: 1.5rem;
}
.m-5 {
margin: 3rem;
}
.m-auto {
margin: auto;
}
.ms-0 {
margin-left: 0;
}
.ms-1 {
margin-left: 0.25rem;
}
.ms-2 {
margin-left: 0.5rem;
}
.ms-3 {
margin-left: 1rem;
}
.ms-4 {
margin-left: 1.5rem;
}
.ms-5 {
margin-left: 3rem;
}
.ms-auto {
margin-left: auto;
}
.me-0 {
margin-right: 0;
}
.me-1 {
margin-right: 0.25rem;
}
.me-2 {
margin-right: 0.5rem;
}
.me-3 {
margin-right: 1rem;
}
.me-4 {
margin-right: 1.5rem;
}
.me-5 {
margin-right: 3rem;
}
.me-auto {
margin-right: auto;
}
.mt-0 {
margin-top: 0;
}
.mt-1 {
margin-top: 0.25rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-3 {
margin-top: 1rem;
}
.mt-4 {
margin-top: 1.5rem;
}
.mt-5 {
margin-top: 3rem;
}
.mt-auto {
margin-top: auto;
}
.mb-0 {
margin-bottom: 0;
}
.mb-1 {
margin-bottom: 0.25rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-3 {
margin-bottom: 1rem;
}
.mb-4 {
margin-bottom: 1.5rem;
}
.mb-5 {
margin-bottom: 3rem;
}
.mb-auto {
margin-bottom: auto;
}
.p-0 {
padding: 0;
}
.p-1 {
padding: 0.25rem;
}
.p-2 {
padding: 0.5rem;
}
.p-3 {
padding: 1rem;
}
.p-4 {
padding: 1.5rem;
}
.p-5 {
padding: 3rem;
}
.p-auto {
padding: auto;
}
.ps-0 {
padding-left: 0;
}
.ps-1 {
padding-left: 0.25rem;
}
.ps-2 {
padding-left: 0.5rem;
}
.ps-3 {
padding-left: 1rem;
}
.ps-4 {
padding-left: 1.5rem;
}
.ps-5 {
padding-left: 3rem;
}
.ps-auto {
padding-left: auto;
}
.pe-0 {
padding-right: 0;
}
.pe-1 {
padding-right: 0.25rem;
}
.pe-2 {
padding-right: 0.5rem;
}
.pe-3 {
padding-right: 1rem;
}
.pe-4 {
padding-right: 1.5rem;
}
.pe-5 {
padding-right: 3rem;
}
.pe-auto {
padding-right: auto;
}
.pt-0 {
padding-top: 0;
}
.pt-1 {
padding-top: 0.25rem;
}
.pt-2 {
padding-top: 0.5rem;
}
.pt-3 {
padding-top: 1rem;
}
.pt-4 {
padding-top: 1.5rem;
}
.pt-5 {
padding-top: 3rem;
}
.pt-auto {
padding-top: auto;
}
.pb-0 {
padding-bottom: 0;
}
.pb-1 {
padding-bottom: 0.25rem;
}
.pb-2 {
padding-bottom: 0.5rem;
}
.pb-3 {
padding-bottom: 1rem;
}
.pb-4 {
padding-bottom: 1.5rem;
}
.pb-5 {
padding-bottom: 3rem;
}
.pb-auto {
padding-bottom: auto;
}
.gap-1 {
gap: 0.25rem;
}
.gap-2 {
gap: 0.5rem;
}
.gap-3 {
gap: 1rem;
}
.gap-4 {
gap: 1.5rem;
}
.gap-5 {
gap: 3rem;
}
.fs-3xs {
font-size: 10px;
}
.fs-2xs {
font-size: 11px;
}
.fs-xs {
font-size: 12px;
}
.fs-sm {
font-size: 14px;
}
.fs-base {
font-size: 16px;
}
.fs-lg {
font-size: 18px;
}
.fs-xl {
font-size: 20px;
}
.fs-2xl {
font-size: 24px;
}
.fs-3xl {
font-size: 30px;
}
.fs-4xl {
font-size: 36px;
}
.fs-5xl {
font-size: 48px;
}
.fs-6xl {
font-size: 60px;
}
.fs-7xl {
font-size: 72px;
}
.fs-8xl {
font-size: 96px;
}
.fs-9xl {
font-size: 128px;
}
.fw-light {
font-weight: 300;
}
.fw-normal {
font-weight: 400;
}
.fw-medium {
font-weight: 500;
}
.fw-semibold {
font-weight: 600;
}
.fw-bold {
font-weight: 700;
}
.fw-black {
font-weight: 900;
}
.ff-basic {
font-family: "Spoqa Han Sans Neo", "Noto Sans KR", "Nanum Gothic", "MalgunGothic", Dotum, Lato, Roboto, Arial, sans-serif;
}
.ff-monospace {
font-family: "Spoqa Han Sans Neo", "Noto Sans KR", "Nanum Gothic", "MalgunGothic", Dotum, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.ff-title {
font-family: "KimjungchulGothic", "Spoqa Han Sans Neo", "Noto Sans KR", "Nanum Gothic", "MalgunGothic", Dotum, Lato, Roboto, Arial, sans-serif;
}
.font-title {
font-family: "KimjungchulGothic", "Spoqa Han Sans Neo", "Noto Sans KR", "Nanum Gothic", "MalgunGothic", Dotum, Lato, Roboto, Arial, sans-serif;
}
.text-start, .text-left {
text-align: left !important;
}
.text-end, .text-right {
text-align: right !important;
}
.text-center {
text-align: center !important;
}
/* Header */
body {
font-family: "Spoqa Han Sans Neo", "Noto Sans KR", "Nanum Gothic", "MalgunGothic", Dotum, Lato, Roboto, Arial, sans-serif;
line-height: 1.4;
}
body * {
word-break: keep-all;
}
div#container {
min-width: 320px;
max-width: 576px;
width: 100%;
margin: 0 auto;
height: 100%;
display: flex;
flex-direction: column;
position: relative;
}
div#container:before {
/* hiding left menu */
content: "";
display: block;
background: white;
height: 100vh;
width: 300px;
position: absolute;
left: -300px;
z-index: 3;
}
/* #footer */
div#footer {
margin-top: auto;
background: #ABB2C6;
position: relative;
color: #FCFCFC;
padding: 28px;
font-size: 11px;
}
div#footer a[aria-label=stockbotus] {
display: block;
color: #FCFCFC;
font-size: 20px;
font-weight: bold;
letter-spacing: -0.03em;
}
div#footer a[aria-data=email] {
display: flex;
color: #FCFCFC;
font-size: 16px;
align-items: center;
}
div#footer a[aria-data=email]:before {
content: "\e0be";
font-family: "Material Icons";
font-size: 10px;
display: flex;
background: #374FA8;
color: #FCFCFC;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
-o-border-radius: 50%;
width: 16px;
height: 16px;
margin-right: 4px;
justify-content: center;
align-items: center;
}
div#footer ul {
margin: 0;
padding: 0;
font-size: 11px;
line-height: 1.4;
}
div#footer ul.notice {
margin: 20px 0 20px 12px;
text-indent: -10px;
}
div#footer ul.notice li {
margin-bottom: 0.2rem;
}
div#footer ul.notice li:last-of-type {
margin-bottom: 0;
}
div#footer ul.notice li:before {
content: "";
width: 4px;
height: 4px;
background: #FCFCFC;
display: inline-block;
margin: 0 6px 4px 0;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
border-radius: 20px;
-o-border-radius: 20px;
}
div#footer ul.info {
margin: 0;
}
div#footer ul.info li {
display: inline-block;
}
div#footer ul.info li:after {
content: "";
display: inline-block;
width: 1px;
height: 8px;
background: #FCFCFC;
opacity: 0.3;
margin: 0 6px;
}
div#footer ul.info li:last-of-type:after {
display: none;
}
div#footer ul.company {
margin: 0;
}
div#footer ul.company li {
display: inline-block;
}
div#footer ul.company li:after {
content: "";
display: inline-block;
width: 1px;
height: 8px;
background: #FCFCFC;
opacity: 0.3;
margin: 0 6px;
}
div#footer ul.company li:last-of-type:after {
display: none;
}
div#footer .btn-primary#gotoTop {
background: #374FA8;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
-o-border-radius: 4px;
position: absolute;
top: -15px;
right: 15px;
width: 30px;
height: 30px;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
div#nav.navbar {
flex-wrap: wrap;
}
div#nav.navbar button {
box-shadow: none;
}
div#nav.navbar div[class^=container] {
position: relative;
}
div#nav.navbar .btn {
border: none;
outline: none;
}
div#nav.navbar .btn[data-bs-toggle=offcanvas] {
padding: 0;
background: transparent !important;
margin-right: auto;
order: 1;
}
div#nav.navbar .btn[data-bs-toggle=offcanvas] i[class*=material-icons] {
display: block;
font-size: 0;
width: 24px;
height: 24px;
background: url('data:image/svg+xml,') no-repeat center;
}
div#nav.navbar .btn[aria-controls=login],
div#nav.navbar .btn[aria-controls=member] {
padding: 0 4px 0 0;
display: flex;
align-items: center;
order: 2;
}
div#nav.navbar .btn[aria-controls=login] i.material-icons,
div#nav.navbar .btn[aria-controls=member] i.material-icons {
vertical-align: middle;
}
div#nav.navbar .btn[aria-controls=login] span,
div#nav.navbar .btn[aria-controls=member] span {
display: block;
margin-left: 2px;
margin-top: 2px;
font-size: 14px;
white-space: nowrap;
}
div#nav.navbar .btn[aria-controls=login] i[class*=material-icons] {
display: block;
font-size: 0;
width: 24px;
height: 24px;
background: url('data:image/svg+xml,') no-repeat center;
}
div#nav.navbar .btn[aria-controls=member] i[class*=material-icons] {
display: block;
font-size: 0;
width: 24px;
height: 24px;
background: url('data:image/svg+xml,') no-repeat center;
}
div#nav.navbar .btn[aria-controls=search] {
padding: 2px 6px;
background: #374FA8;
color: #ffffff;
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
-ms-border-radius: 999px;
border-radius: 999px;
-o-border-radius: 999px;
margin: -4px 0 0 8px;
order: 3;
}
div#nav.navbar .btn[aria-controls=search] i[class*=material-icons] {
display: block;
font-size: 0;
min-width: 24px;
width: auto;
height: 26px;
background: url('data:image/svg+xml,') no-repeat center;
background-position: left !important;
}
div#nav.navbar .btn[aria-controls=search] i[class*=material-icons]:after {
content: "검색";
color: #FCFCFC;
display: inline-block;
font-size: 14px;
margin: 3px 8px 0 24px;
}
div#nav.navbar .btn[aria-controls=gotoback] {
padding: 0;
margin-left: 10px;
}
div#nav.navbar .btn[aria-controls=gotoback] i[class*=material-icons] {
vertical-align: middle;
}
div#nav.navbar .btn[aria-controls=gotoback] i[class*=material-icons] {
display: block;
font-size: 0;
width: 24px;
height: 24px;
background: url('data:image/svg+xml,') no-repeat center;
}
div#nav.navbar .navbar-brand {
color: #FCFCFC;
font-size: 16px;
font-weight: normal;
margin-right: auto;
margin-left: 8px;
padding: 0;
letter-spacing: -0.03em;
order: 4;
margin: 0 0 24px 24px;
}
div#nav.navbar .navbar-brand a {
color: #FCFCFC;
padding: 8px;
}
div#nav.navbar .navbar-brand a:hover {
color: #FCFCFC;
opacity: 0.8;
}
div#nav.navbar .navbar-brand a:first-of-type {
font-weight: bold;
}
div#nav.navbar.navbar-dark {
background-color: #374FA8;
color: #FCFCFC;
}
div#nav.navbar.navbar-main {
background-color: rgba(231, 234, 250, 0.5) !important;
backdrop-filter: blur(16px);
padding-bottom: 0;
}
div#nav.navbar.navbar-main .container-fluid {
align-items: start;
}
div#nav.navbar.navbar-main .container-fluid:after {
content: "";
display: block;
height: 1px;
width: calc(100% - 32px);
min-width: clac(320px-32px);
background-color: #E3E6F0;
position: absolute;
bottom: 0;
}
div#nav.navbar.navbar-main .navbar-brand {
-webkit-transform: translate(-34px, 30px);
-moz-transform: translate(-34px, 30px);
-ms-transform: translate(-34px, 30px);
transform: translate(-34px, 30px);
/* 초기 상태 설정 */
-moz-transition: transform 0.3s ease;
-o-transition: transform 0.3s ease;
-webkit-transition: transform 0.3s ease;
transition: transform 0.3s ease;
margin-bottom: 24px;
width: 100%;
}
div#nav.navbar.navbar-main .navbar-brand a {
display: block;
position: relative;
}
div#nav.navbar.navbar-main .navbar-brand span.slogan {
display: block;
font-weight: 300;
color: #76809E;
opacity: 1;
-moz-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
div#nav.navbar.navbar-main .navbar-brand strong {
display: flex;
color: #374FA8;
margin: 4px 8px 12px 0;
}
div#nav.navbar.navbar-main .navbar-brand strong img {
height: 24px;
}
div#nav.navbar.navbar-main .navbar-brand strong img[data="US flag"] {
margin-left: 6px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
-o-border-radius: 50%;
border: 1px solid white;
}
div#nav.navbar.navbar-main .navbar-brand strong span.logo-brand {
display: block;
width: 114px;
height: 23px;
background: url(/images/stocktonight_20240822.svg) no-repeat left/contain;
font-size: 0;
}
div#nav.navbar.navbar-main .btn {
color: #374FA8;
}
div#nav.navbar.navbar-sub *, div#nav.navbar.navbar-sub-2 * {
order: unset !important;
}
div#nav.navbar.navbar-sub .btn[data-bs-toggle=offcanvas], div#nav.navbar.navbar-sub-2 .btn[data-bs-toggle=offcanvas] {
margin-right: unset !important;
}
div#nav.navbar.navbar-sub .navbar-brand, div#nav.navbar.navbar-sub-2 .navbar-brand {
margin: 0 auto 0 8px !important;
}
div#nav.navbar.navbar-sub {
background-color: #374FA8;
background-color: rgba(0, 31, 148, 0.78) !important;
backdrop-filter: blur(8px);
}
div#nav.navbar.navbar-sub .btn[data-bs-toggle=offcanvas] i[class*=material-icons] {
background: url('data:image/svg+xml,') no-repeat center;
}
div#nav.navbar.navbar-sub .btn[aria-controls=search] {
background: #0D247A;
}
div#nav.navbar.navbar-sub .btn[aria-controls=search] i.material-icons {
color: #FCFCFC;
}
div#nav.navbar.navbar-sub .btn[aria-controls=search] i[class*=material-icons] {
background: url('data:image/svg+xml,') no-repeat center;
}
div#nav.navbar.navbar-sub-2 {
color: #76809E;
background-color: rgba(231, 234, 250, 0.5) !important;
backdrop-filter: blur(16px);
}
div#nav.navbar.navbar-sub-2 .btn[aria-controls=search] i.material-icons {
color: #76809E;
}
div#nav.navbar.navbar-sub-2 .navbar-brand {
line-height: 1;
margin: 0 auto 0 0;
}
div#nav.navbar.navbar-sub-2 .navbar-brand a {
color: #76809E;
font-weight: normal;
padding-left: 0;
}
div#nav.navbar.navbar-main.sticky-top .navbar-brand {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
margin-bottom: 0;
width: auto;
order: 2;
margin-right: auto;
margin-left: 0;
}
div#nav.navbar.navbar-main.sticky-top .navbar-brand a {
padding: 4px 8px 10px 8px;
}
div#nav.navbar.navbar-main.sticky-top .navbar-brand span.slogan {
opacity: 0;
height: 1px;
}
div#nav.navbar.navbar-main.sticky-top .navbar-brand strong {
margin: 0;
height: 20px;
}
div#nav.navbar.navbar-main.sticky-top .navbar-brand strong span.logo-brand {
width: 92px;
height: 18px;
}
div#nav.navbar.navbar-main.sticky-top .btn[data-bs-toggle=offcanvas] {
margin-right: 0;
}
div#nav.navbar.navbar-sub-2 .btn[data-bs-toggle=offcanvas] {
padding: 0;
}
div#nav.navbar.navbar-sub-2 .btn[data-bs-toggle=offcanvas] i.material-icons {
color: #76809E;
}
div.offcanvas {
position: absolute;
background: rgba(50, 70, 150, 0.8);
color: white;
backdrop-filter: blur(4px);
}
div.offcanvas.offcanvas-start {
width: 260px;
overflow: hidden;
}
div.offcanvas .offcanvas-header {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
justify-content: space-between;
align-content: stretch;
padding: 1rem 2rem 0;
}
div.offcanvas .offcanvas-header .btn-close {
color: #FCFCFC;
grid-column: 1 span/2;
grid-row: 1;
margin: -7px 0 0 -20px;
}
div.offcanvas .offcanvas-header .btn[aria-controls=search] {
color: #FCFCFC;
grid-column: 2;
grid-row: 2;
padding: 2px;
margin-top: 20px;
background: #0D247A;
}
div.offcanvas .offcanvas-header .btn[aria-controls=search] i[class*=material-icons] {
display: block;
font-size: 0;
width: 24px;
height: 24px;
background: url('data:image/svg+xml,') no-repeat center;
}
div.offcanvas .offcanvas-header .brand {
grid-column: 1;
grid-row: 2;
color: #FCFCFC;
margin-top: 20px;
}
div.offcanvas .offcanvas-header .brand a {
color: #FCFCFC;
display: block;
}
div.offcanvas .offcanvas-header .brand a i.material-icons {
vertical-align: middle;
}
div.offcanvas .offcanvas-header .brand a img {
height: 24px;
}
div.offcanvas .offcanvas-header .brand a span.logo-brand {
display: block;
width: 114px;
height: 23px;
background: url(/images/stocktonight_20240822.svg) no-repeat left/contain;
font-size: 0;
filter: brightness(900%);
-webkit-filter: brightness(900%);
}
div.offcanvas .offcanvas-body {
position: relative;
padding: 1rem 2rem;
}
div.offcanvas .nav {
margin-top: 1rem;
}
div.offcanvas .nav .nav-item .badge.bg-dark.new {
height: 18px;
margin-left: 8px;
}
div.offcanvas .nav .nav-item .nav-link {
color: #FCFCFC;
font-weight: bold;
padding: 14px 4px;
display: flex;
justify-content: space-between;
}
div.offcanvas .nav .nav-item .nav-link .badge {
margin-left: 2px;
font-size: 10.5px;
/* line-height: 1; */
}
div.offcanvas .nav .nav-item ul {
padding: 0;
margin: 0 0 16px;
}
div.offcanvas .nav .nav-item ul .nav-link {
padding: 8px 4px;
display: block;
font-weight: normal;
opacity: 0.6;
}
div.offcanvas .nav .btn-toggle::after {
content: "";
width: 24px;
height: 24px;
display: block;
background: url('data:image/svg+xml,') no-repeat right;
width: 1.25em;
line-height: 0;
transition: transform 0.35s ease;
transform-origin: 0.5em 50%;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
div.offcanvas .nav .btn-toggle[aria-expanded=true]::after {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
/* tabs */
.nav.nav-tabs {
border-bottom: 1px solid #D0D4E5;
padding-left: 16px;
padding-right: 16px;
}
.nav.nav-tabs a {
color: #76809E;
}
.nav.nav-tabs a.nav-link {
margin-bottom: -1px;
border: none;
color: #76809E;
font-weight: normal;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
border-radius: 0;
-o-border-radius: 0;
}
.nav.nav-tabs a.nav-link.active, .nav.nav-tabs a.nav-link:active {
background-color: transparent;
border-bottom: 2px solid #374FA8;
color: #374FA8;
font-weight: bold;
}
.nav.nav-tabs#lnb {
flex-wrap: nowrap;
}
.layout {
text-align: center;
min-width: 360px;
display: flex;
flex-direction: column;
height: 120%;
flex: 1;
}
/* 종목 상세 페이지 (통합) */
/* ------------- 종목 상세 // 타이틀 */
[data-category*=port],
[data-category*=type],
[data-category*=hit] {
padding-right: 1rem;
padding-left: 1rem;
}
[data-category*=port] h3,
[data-category*=type] h3,
[data-category*=hit] h3 {
font-size: 18px;
font-weight: bold;
margin-bottom: 1rem;
}
/* ------------- 종목 상세 // 공통 */
.badge-area {
margin-left: 20px;
margin-top: 24px;
margin-bottom: -16px;
}
.badge-area .badge.type-port.port-01 {
color: #FF543D !important;
background: #fbebe9 !important;
}
/* 모든 타입 아우터 */
.company-outer {
background: #E3E6F0;
margin: 0;
padding: 16px 16px 0;
}
.company-outer.bg-100 {
background-color: #F0F2F9;
}
.company-outer.alone {
padding-bottom: 16px;
}
.company-outer .bg-white {
background: white;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-ms-border-radius: 12px;
border-radius: 12px;
-o-border-radius: 12px;
margin: 0;
padding: 30px 20px;
}
.company-outer .start {
-webkit-border-radius: 12px 12px 0 0;
-moz-border-radius: 12px 12px 0 0;
-ms-border-radius: 12px 12px 0 0;
border-radius: 12px 12px 0 0;
-o-border-radius: 12px 12px 0 0;
padding-top: 20px;
}
.company-outer .middle {
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
border-radius: 0;
-o-border-radius: 0;
margin-top: -32px !important;
}
.company-outer .end {
-webkit-border-radius: 0 0 12px 12px;
-moz-border-radius: 0 0 12px 12px;
-ms-border-radius: 0 0 12px 12px;
border-radius: 0 0 12px 12px;
-o-border-radius: 0 0 12px 12px;
margin-top: -32px !important;
}
/* ------------------------ 공통 */
/* .company-info 종목 정보 */
.company-info {
margin: 36px 0 1.6rem;
display: grid;
position: relative;
}
.company-info .ticker-top {
grid-column: 1/span 2;
margin-left: 2px;
margin-bottom: -6px;
}
.company-info .ticker-top .ticker {
font-weight: normal;
color: #76809E;
font-size: 14px;
}
.company-info .ticker-top .market {
font-weight: normal;
color: #C8CCDF;
font-size: 14px;
margin-left: 4px;
}
.company-info .company {
grid-column: 1/span 2;
font-weight: bold;
font-size: 24px;
margin: 8px 0 2px;
width: calc(100% - 54px);
}
.company-info .price {
grid-column: 1/span 2;
font-size: 30px;
}
.company-info .change {
grid-column: 1;
white-space: nowrap;
font-size: 13px;
}
.company-info .change strong {
font-weight: normal;
}
.company-info .change .change-price {
margin-right: 8px;
margin-left: 4px;
}
.company-info .change .change-rate strong:before {
content: "";
display: inline-block;
margin: 0 2px 1px 0;
}
.company-info .change .change-rate.positive strong:before {
width: 0px;
height: 0px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 9px solid #F81C51;
}
.company-info .change .change-rate.negative strong:before {
width: 0px;
height: 0px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 9px solid #1971C2;
}
.company-info .change .change-rate.neutral strong:before {
width: 5px;
height: 5px;
background: #6C7285;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
border-radius: 20px;
-o-border-radius: 20px;
}
.company-info .logo {
position: absolute;
right: 16px;
top: 4px;
}
.company-info .company-data {
position: absolute;
right: 16px;
bottom: 0;
font-size: 12px;
color: #76809E;
white-space: nowrap;
}
.company-info .company-data strong {
font-weight: normal;
}
.company-info .company-data span {
margin-left: 4px;
}
.company-info .company-data span:first-of-type {
margin-left: 0;
}
/* .company-vscore 투자매력 V점수 */
.company-vscore {
display: grid;
grid-template-columns: 36% 60%;
grid-template-rows: min-content auto;
grid-column-gap: 28px;
}
@media (max-width: 575px) {
.company-vscore {
grid-template-columns: 28% 72%;
grid-column-gap: 14px;
}
}
@media (max-width: 359px) {
.company-vscore {
grid-template-columns: auto;
grid-template-rows: auto;
grid-column-gap: 16px;
}
}
.company-vscore h3 {
grid-column: 1/span 2;
}
.company-vscore .score-total {
grid-column: 1;
grid-row: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #374FA8;
padding: 20px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
-o-border-radius: 8px;
}
@media (max-width: 575px) {
.company-vscore .score-total {
padding: 20px 8px;
}
}
@media (max-width: 359px) {
.company-vscore .score-total {
grid-column: 1/span 2;
margin-bottom: 24px;
}
}
.company-vscore .score-total .label {
color: #7B93E5;
display: block;
font-size: 13px;
}
.company-vscore .score-total .value {
color: #FCFCFC;
font-size: 22px;
}
.company-vscore .score-total .value strong {
font-size: 28px;
}
.company-vscore .score-detail {
grid-column: 2;
grid-row: 2;
}
@media (max-width: 359px) {
.company-vscore .score-detail {
grid-column: 1/span 2;
grid-row: 3;
}
}
.company-vscore .score-detail [class^=detail] {
display: grid;
grid-template-columns: 20% auto 50px;
align-items: center;
grid-gap: 8px;
margin: 12px 0;
}
@media (max-width: 359px) {
.company-vscore .score-detail [class^=detail] {
grid-gap: 16px;
}
}
.company-vscore .score-detail .label {
color: #76809E;
font-size: 13px;
}
@media (min-width: 360px) {
.company-vscore .score-detail .label {
overflow: hidden;
text-overflow: ellipsis;
}
}
.company-vscore .score-detail .value {
color: #374FA8;
}
.company-vscore .score-detail .graph {
background: #E3E6F0;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
-o-border-radius: 10px;
width: 100%;
height: 8px;
line-height: 0;
}
.company-vscore .score-detail .graph .bar {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
-o-border-radius: 10px;
background: #5974D3;
height: 8px;
width: 50%;
display: inline-block;
position: relative;
}
.company-vscore .score-detail .graph .bar:after {
content: "";
display: inline-block;
width: 8px;
height: 8px;
background: #0D247A;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
-o-border-radius: 50%;
position: absolute;
right: 0;
}
/* .company-sic 기업 개요 */
.company-sic {
display: grid;
grid-template-columns: 50% 50%;
margin-top: 20px;
}
.company-sic .overview {
grid-column: 1/span 2;
grid-row: 2;
margin-top: 20px;
margin-bottom: 20px;
}
.company-sic .overview .value .preview {
display: inline;
}
.company-sic .overview .value #preview-more.show {
display: inline;
}
.company-sic .overview .value .more {
display: block;
text-align: right;
color: #76809E;
}
.company-sic .overview .value .more i.material-icons {
vertical-align: middle;
}
.company-sic .overview [aria-expanded=false] button.off {
display: none;
}
.company-sic .overview [aria-expanded=true] button.on {
display: none;
}
.company-sic .links {
grid-column: 1/span 2;
grid-row: 3;
margin-bottom: 20px;
}
.company-sic .links a {
display: inline-block;
border: 1px solid #C8CCDF;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
-o-border-radius: 4px;
color: #76809E;
font-size: 13px;
padding: 6px 10px;
}
.company-sic .links a span {
display: inline-block;
vertical-align: middle;
font-size: 18px;
color: #7B93E5;
}
.company-sic .label {
color: #76809E;
font-size: 13px;
margin-bottom: 4px;
}
.company-sic .value {
font-size: 15px;
}
.company-sic .value .company-name {
display: block;
}
.company-sic .value .ticker {
font-weight: normal;
color: #76809E;
font-size: 12px;
}
.company-sic .value .market {
font-weight: normal;
color: #76809E;
font-size: 12px;
}
.company-sic .value .market:before {
content: "/ ";
display: inline-block;
margin-right: 4px;
}
/* .company-index 주요 투자지표 */
.company-index {
margin-bottom: 3rem;
padding-bottom: 3rem;
padding-top: 3rem;
border-bottom: 8px solid #E4E7EF;
}
.company-index ul {
display: grid;
justify-content: stretch;
grid-column-gap: 8px;
grid-template-columns: calc(33% - 4px) calc(33% - 4px) calc(33% - 4px);
padding: 0;
margin: 0;
}
.company-index li {
border-top: 1px solid #F0F2F9;
border-bottom: 1px solid #F0F2F9;
padding: 12px 8px;
display: flex;
flex-direction: column;
margin-top: -1px;
word-break: keep-all;
justify-content: space-between;
}
.company-index li .label {
display: block;
color: #76809E;
font-size: 14px;
margin-bottom: 4px;
white-space: nowrap;
}
.company-index li .label strong {
font-weight: normal;
display: inline-block;
margin-right: 4px;
line-height: 1;
}
@media (max-width: 359px) {
.company-index li .label strong {
display: block;
}
}
.company-index li .label small {
display: none;
font-size: 12px;
font-weight: 200;
}
.company-index li .value {
font-size: 16px;
}
/* .company-chart 실적차트 */
.company-chart {
margin-bottom: 3rem;
}
.company-chart .unit {
font-size: 14px;
color: #949AA9;
}
.company-chart .nav {
margin-bottom: 20px;
}
.company-chart .nav.nav-pills#tab-chart {
background: #F0F2F9;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
border-radius: 50px;
-o-border-radius: 50px;
padding: 3px;
}
.company-chart .nav.nav-pills#tab-chart .nav-link {
color: #76809E;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
border-radius: 50px;
-o-border-radius: 50px;
}
.company-chart .nav.nav-pills#tab-chart .nav-link.active {
background: white;
color: #76809E;
font-weight: bold;
}
.company-chart .chart-item {
min-height: 300px;
max-width: 100%;
}
.company-chart .chart-item .tab-pane {
padding: 16px 8px;
}
.company-chart .chart-item .tab-pane:not(.active) {
display: none !important;
}
/* .price-chart 주가차트 */
.price-chart {
margin-bottom: 3rem;
padding-bottom: 3rem;
}
.price-chart .nav {
margin-bottom: 20px;
}
.price-chart .nav.nav-pills#tab-chart2 {
background: #F0F2F9;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
border-radius: 50px;
-o-border-radius: 50px;
padding: 3px;
}
.price-chart .nav.nav-pills#tab-chart2 .nav-link {
color: #76809E;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
border-radius: 50px;
-o-border-radius: 50px;
}
.price-chart .nav.nav-pills#tab-chart2 .nav-link.active {
background: white;
color: #76809E;
font-weight: bold;
}
.price-chart .chart-item {
min-height: 300px;
max-width: 100%;
}
.price-chart .chart-item .tab-pane {
padding: 16px 8px;
}
.price-chart .chart-item .tab-pane:not(.active) {
display: none !important;
}
.price-chart .chart-item .tab-pane ul {
display: flex;
padding: 0 1rem;
margin: 0 -5px 0 0;
}
@media (max-width: 575px) {
.price-chart .chart-item .tab-pane ul {
padding: 0;
}
}
.price-chart .chart-item .tab-pane ul li {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
padding: 8px 20px;
border-right: 1px solid #E3E6F0;
white-space: nowrap;
}
.price-chart .chart-item .tab-pane ul li:before {
content: "";
position: absolute;
bottom: 0;
left: -5px;
right: -5px;
z-index: 1111;
}
.price-chart .chart-item .tab-pane ul li:after {
content: "";
position: absolute;
top: 0;
left: -5px;
right: -5px;
z-index: 1111;
}
.price-chart .chart-item .tab-pane ul li:last-of-type {
border-right: 0;
}
@media (max-width: 575px) {
.price-chart .chart-item .tab-pane ul li {
padding: 8px 12px;
}
}
@media (max-width: 359px) {
.price-chart .chart-item .tab-pane ul li {
padding: 8px 8px;
}
}
.price-chart .chart-item .tab-pane ul .label {
display: block;
color: #949AA9;
font-size: 14px;
margin-bottom: 4px;
}
@media (max-width: 575px) {
.price-chart .chart-item .tab-pane ul .label {
font-size: 13px;
}
}
@media (max-width: 359px) {
.price-chart .chart-item .tab-pane ul .label {
font-size: 12px;
letter-spacing: -0.03em;
white-space: nowrap;
}
}
.price-chart .chart-item .tab-pane ul .label strong {
font-weight: normal;
}
.price-chart .chart-item .tab-pane ul .value {
display: block;
font-size: 16px;
}
/* -------------------------- recom : 추천종목 & port : 포트폴리오 */
/* .comapny-comment 추천의견 */
.comment-standonly {
background: #D0D4E5;
text-align: center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
-o-border-radius: 10px;
padding: 20px 10px;
margin-bottom: 16px;
}
.comapny-comment {
padding-top: 24px !important;
}
.comapny-comment h3 {
margin-bottom: 1.4rem;
display: none;
}
.comapny-comment .comment-detail {
display: flex;
gap: 0 44px;
flex-direction: row-reverse;
justify-content: left;
padding: 16px 0 0px;
}
@media (max-width: 575px) {
.comapny-comment .comment-detail {
gap: 0 18px;
}
}
@media (max-width: 479px) {
.comapny-comment .comment-detail {
padding-top: 0;
}
}
.comapny-comment h3 + .comment-detail {
padding-top: 0;
}
.comapny-comment .level {
display: flex;
align-items: center;
gap: 16px;
margin-left: 24px;
justify-content: right;
}
@media (max-width: 575px) {
.comapny-comment .level {
margin-left: 8px;
}
}
@media (max-width: 479px) {
.comapny-comment .level {
flex-direction: column;
align-items: start;
gap: 8px;
}
}
.comapny-comment .level .label {
display: block;
color: #76809E;
font-size: 12px;
}
.comapny-comment .level .badge {
font-weight: bold;
font-size: 16px;
min-width: 80px;
}
.comapny-comment .opinion {
display: flex;
align-items: center;
gap: 16px;
}
@media (max-width: 479px) {
.comapny-comment .opinion {
flex-direction: column;
align-items: start;
gap: 8px;
}
}
.comapny-comment .opinion .label {
display: block;
color: #76809E;
font-size: 12px;
}
.comapny-comment .opinion .badge {
font-weight: bold;
font-size: 16px;
min-width: 80px;
}
.comapny-comment .opinion .badge.type-action-buy {
background: #FF7A9A !important;
}
.comapny-comment .opinion .badge.type-action-cut {
background: #0D1A4D !important;
}
.comapny-comment .comment {
grid-column: 2;
grid-row: 1/span 2;
background: #7B93E5;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
-o-border-radius: 10px;
padding: 0 0 20px 20px;
display: flex;
align-items: start;
justify-content: center;
position: relative;
margin-top: 22px;
color: #374FA8;
}
.comapny-comment .comment:before {
content: "";
display: block;
width: 2px;
background: #F0F2F9;
height: 100%;
width: 4px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
-o-border-radius: 10px;
position: absolute;
left: 0;
top: 0;
}
/* 투자 포인트 */
.company-point h4 {
color: #76809E;
font-size: 12px;
position: relative;
margin-bottom: 16px;
}
.company-point h4:after {
content: "";
display: inline-block;
background-color: #E3E6F0;
height: 1px;
width: calc(100% - 80px);
position: absolute;
right: 0;
top: 5px;
}
.company-point ul {
padding: 0;
margin: 0 0 0 0;
}
.company-point ul li {
word-break: keep-all;
font-size: 14px;
color: #303647;
margin-bottom: 4px;
line-height: 1.4;
text-indent: -7px;
margin-left: 14px;
}
.company-point ul li:before {
content: "";
display: inline-block;
width: 3px;
height: 3px;
background-color: #76809E;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
-o-border-radius: 50%;
margin: 0 4px 3px 0;
}
/* AI 리포트 */
.company-report {
padding-bottom: 0 !important;
}
.company-report.end {
margin-top: -56px !important;
}
.company-report a {
display: flex;
border-top: 1px solid #E3E6F0;
padding: 16px 2px;
align-items: center;
}
.company-report a div.company {
font-size: 13px;
color: #7E8597;
margin-bottom: 2px;
}
.company-report a div.view {
font-size: 16px;
color: #7E8597;
}
.company-report a div.view .badge {
margin-right: 2px;
padding: 2px 3px !important;
font-size: 10px;
vertical-align: 3px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
border-radius: 2px;
-o-border-radius: 2px;
}
.company-report a:before {
content: "";
display: inline-block;
width: 48px;
height: 40px;
background: url('data:image/svg+xml,') no-repeat center center;
}
.company-report a:after {
display: inline-block;
content: "";
width: 24px;
height: 24px;
margin-left: auto;
background: url('data:image/svg+xml,') center center;
}
/* -------------------------- recom : 추천종목 */
/* 매매정보 */
.recom-trade h4 {
color: #76809E;
font-size: 12px;
position: relative;
margin-bottom: 16px;
}
.recom-trade h4:after {
content: "";
display: inline-block;
background-color: #E3E6F0;
height: 1px;
width: calc(100% - 60px);
position: absolute;
right: 0;
top: 5px;
}
.recom-trade .graph {
position: relative;
height: 140px;
margin-top: 24px;
display: grid;
grid-template-columns: auto auto auto auto;
grid-template-rows: auto auto;
}
.recom-trade .graph:before {
content: "";
display: block;
background: #E3E6F0;
height: 8px;
width: 100%;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
border-radius: 20px;
-o-border-radius: 20px;
position: absolute;
top: 53px;
}
.recom-trade .graph div {
text-align: center;
}
.recom-trade .graph div .label {
display: block;
color: #76809E;
font-size: 13px;
}
.recom-trade .graph div .price {
font-size: 18px;
}
.recom-trade .graph .price-out {
display: flex;
flex-direction: column;
align-items: center;
grid-column: 1;
grid-row: 1;
}
.recom-trade .graph .price-out .indicator {
width: 8px;
height: 8px;
background: #F81C51;
display: block;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
-o-border-radius: 8px;
margin-top: 9px;
z-index: 1;
}
.recom-trade .graph .price-in {
display: flex;
flex-direction: column;
align-items: center;
grid-column: 2;
grid-row: 1;
justify-self: end;
margin-right: -24px;
}
.recom-trade .graph .price-in .indicator {
width: 16px;
height: 16px;
background: #5974D3;
display: block;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
-o-border-radius: 8px;
margin-top: 5px;
z-index: 1;
}
.recom-trade .graph .price-target {
display: flex;
flex-direction: column;
align-items: center;
z-index: 1;
grid-column: 4;
grid-row: 1;
justify-self: start;
margin-left: -24px;
}
.recom-trade .graph .price-target .indicator {
width: 16px;
height: 16px;
background: #0D247A;
display: block;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
-o-border-radius: 8px;
margin-top: 5px;
}
.recom-trade .graph .price-target .price {
color: #374FA8;
}
.recom-trade .graph .rate-yield {
display: flex;
flex-direction: column-reverse;
z-index: 0;
grid-column: 3;
grid-row: 1/span 2;
align-self: center;
margin-top: 42px;
}
.recom-trade .graph .rate-yield .indicator {
width: 100%;
height: 8px;
background: #5974D3;
display: block;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
-o-border-radius: 8px;
margin-bottom: 24px;
}
.recom-trade .graph .rate-yield .price {
color: #F81C51;
}
/* -------------------------- port : 포트폴리오 */
/* 추천의견 : recom과 함께 사용 */
/* 투자 포인트 : recom과 함께 사용 */
/* .port-trade 매매정보 */
.port-trade {
padding-bottom: 8px !important;
}
.port-trade h4 {
color: #76809E;
font-size: 12px;
position: relative;
margin-bottom: 16px;
}
.port-trade h4:after {
content: "";
display: inline-block;
background-color: #E3E6F0;
height: 1px;
width: calc(100% - 60px);
position: absolute;
right: 0;
top: 5px;
}
.port-trade .graph {
position: relative;
height: 140px;
margin-top: 24px;
display: grid;
grid-template-columns: auto minmax(30%, calc(100% - 60px)) auto;
grid-template-rows: auto auto;
}
.port-trade .graph:before {
content: "";
display: block;
background: #E3E6F0;
height: 8px;
width: 100%;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
border-radius: 20px;
-o-border-radius: 20px;
position: absolute;
top: 53px;
}
.port-trade .graph div {
text-align: center;
}
.port-trade .graph div .label {
display: block;
color: #76809E;
font-size: 13px;
}
.port-trade .graph div .price {
font-size: 18px;
}
.port-trade .graph .price-in {
display: flex;
flex-direction: column;
align-items: center;
grid-column: 1;
grid-row: 1;
justify-self: end;
margin-right: -24px;
}
.port-trade .graph .price-in .indicator {
width: 16px;
height: 16px;
background: #5974D3;
display: block;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
-o-border-radius: 8px;
margin-top: 5px;
z-index: 1;
}
.port-trade .graph .price-target {
display: flex;
flex-direction: column;
align-items: center;
z-index: 1;
grid-column: 3;
grid-row: 1;
justify-self: start;
margin-left: -24px;
}
.port-trade .graph .price-target .indicator {
width: 16px;
height: 16px;
background: #0D247A;
display: block;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
-o-border-radius: 8px;
margin-top: 5px;
}
.port-trade .graph .price-target .price {
color: #374FA8;
}
.port-trade .graph .rate-yield {
display: flex;
flex-direction: column-reverse;
z-index: 0;
grid-column: 2;
grid-row: 1/span 2;
align-self: center;
margin-top: 42px;
}
.port-trade .graph .rate-yield .indicator {
width: 100%;
height: 8px;
background: #5974D3;
display: block;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
-o-border-radius: 8px;
margin-bottom: 24px;
}
.port-trade .graph .rate-yield .price {
color: #F81C51;
}
.port-trade .graph.minus .price-in {
grid-column: 3;
justify-self: start;
margin-left: -24px;
}
.port-trade .graph.minus .price-target {
grid-column: 1;
justify-self: end;
margin-right: -24px;
}
.port-trade .graph.minus .rate-yield .price {
color: #1971C2;
}
/* .port-portion 비중 */
.port-portion h4 {
color: #76809E;
font-size: 12px;
position: relative;
margin-bottom: 16px;
}
.port-portion h4:after {
content: "";
display: inline-block;
background-color: #E3E6F0;
height: 1px;
width: calc(100% - 42px);
position: absolute;
right: 0;
top: 5px;
}
.port-portion .graph {
display: flex;
justify-content: center;
gap: 16px;
margin: 30px 0 16px;
}
@media (max-width: 575px) {
.port-portion .graph {
gap: 4px;
}
}
.port-portion .graph .label {
color: #76809E;
display: block;
font-size: 13px;
margin-bottom: 6px;
text-align: center;
}
.port-portion .graph .value {
font-size: 18px;
}
.port-portion .graph .text {
display: flex;
flex-direction: column;
align-items: center;
}
.port-portion .graph .chart {
background: #E3E6F0;
width: 60px;
height: 60px;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
-ms-border-radius: 60px;
border-radius: 60px;
-o-border-radius: 60px;
position: relative;
}
.port-portion .graph .prev,
.port-portion .graph .now {
display: flex;
flex-direction: row;
gap: 20px;
align-items: center;
}
@media (max-width: 359px) {
.port-portion .graph .prev,
.port-portion .graph .now {
gap: 10px;
}
}
.port-portion .graph .prev:after {
content: "";
display: inline-block;
width: 24px;
height: 24px;
background: url('data:image/svg+xml,') no-repeat center center;
}
.port-portion .graph .prev .pie {
--c: #5974D3;
}
.port-portion .graph .now .value {
color: #F81C51;
}
.port-portion .graph .now .pie {
--c: #F81C51;
}
@property --p {
.port-portion .graph {
syntax: "";
inherits: true;
initial-value: 1;
}
}
.port-portion .graph .pie {
--p:20;
--b:0px;
--c:darkred;
--w:60px;
width: var(--w);
aspect-ratio: 1;
position: relative;
display: inline-grid;
place-content: center;
font-size: 25px;
font-weight: bold;
font-family: sans-serif;
}
.port-portion .graph .pie:before,
.port-portion .graph .pie:after {
content: "";
position: absolute;
border-radius: 50%;
}
.port-portion .graph .pie:before {
inset: 0;
background: radial-gradient(farthest-side, var(--c) 98%, rgba(0, 0, 0, 0)) top/var(--b) var(--b) no-repeat, conic-gradient(var(--c) calc(var(--p) * 1%), rgba(0, 0, 0, 0) 0);
}
.port-portion .graph .pie:after {
inset: calc(50% - var(--b) / 2);
background: var(--c);
transform: rotate(calc(var(--p) * 3.6deg)) translateY(calc(50% - var(--w) / 2));
-webkit-transform: rotate(calc(var(--p) * 3.6deg)) translateY(calc(50% - var(--w) / 2));
-moz-transform: rotate(calc(var(--p) * 3.6deg)) translateY(calc(50% - var(--w) / 2));
-ms-transform: rotate(calc(var(--p) * 3.6deg)) translateY(calc(50% - var(--w) / 2));
-o-transform: rotate(calc(var(--p) * 3.6deg)) translateY(calc(50% - var(--w) / 2));
}
.port-portion .graph .no-round:before {
background-size: 0 0, auto;
}
.port-portion .graph .no-round:after {
content: none;
}
/* -------------------------- hit : 적중 */
/* .company-hit 적중 : 적중 내역 */
.company-hit {
background: white;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-ms-border-radius: 12px;
border-radius: 12px;
-o-border-radius: 12px;
display: grid;
grid-template-columns: 90px auto;
padding: 16px;
}
@media (max-width: 359px) {
.company-hit {
display: block;
}
}
.company-hit h3 {
padding: 20px;
margin: 0;
}
@media (max-width: 359px) {
.company-hit h3 {
padding: 24px 0 0 8px;
}
}
.company-hit ul {
display: grid;
justify-content: stretch;
grid-column-gap: 8px;
grid-template-columns: calc(33% - 4px) calc(33% - 4px) calc(33% - 4px);
padding: 0;
margin: 0;
}
.company-hit ul li {
padding: 12px 8px;
display: flex;
flex-direction: column;
margin-top: -1px;
}
.company-hit ul li .label {
display: block;
color: #76809E;
font-size: 14px;
}
.company-hit ul li .label strong {
font-weight: bold;
display: inline-block;
margin-right: 4px;
margin-bottom: 4px;
}
.company-hit ul li .label small {
font-size: 12px;
font-weight: 200;
}
.company-hit ul li .value {
font-size: 16px;
}
.company-hit ul li.rate-target .value {
color: #F81C51;
}
/* .company-hit-chart 적중 : 차트 */
.company-hit-chart {
margin: 20px 0;
margin-bottom: 3rem;
}
.company-hit-chart .hit-chart-item {
min-height: 300px;
max-width: 100%;
}
/* .company-hit-point 적중 : 투자 포인트 */
.company-hit-point {
margin-right: 0;
margin-left: 0;
padding: 1.3rem 1rem;
padding-bottom: 4rem;
}
.company-hit-point h3 strong {
color: #374FA8;
}
.company-hit-point ul {
padding: 0;
margin: 0;
}
.company-hit-point li {
word-break: keep-all;
}
.company-hit-point li:first-of-type {
background: white;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
-o-border-radius: 4px;
padding: 16px;
font-weight: bold;
margin-bottom: 12px;
color: #303647;
}
.company-hit-point li:not(:first-of-type) {
font-weight: 300;
color: #303647;
margin-bottom: 4px;
line-height: 1.4;
text-indent: -10px;
margin-left: 14px;
}
.company-hit-point li:not(:first-of-type):before {
content: "";
display: inline-block;
width: 4px;
height: 4px;
background-color: #76809E;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
-o-border-radius: 50%;
margin: 0 4px 2px 0;
}