@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: 320px; 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; } .modal-container { display: none; } .modal-container.hide { display: none; } .modal-container.show { display: block; z-index: 99999; } .modal-container.show .modal-bg { position: fixed; display: flex; justify-content: center; align-items: center; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); } .modal-wrap { min-width: 310px; max-width: 400px; position: fixed; -webkit-border-radius: 12px; -moz-border-radius: 12px; -ms-border-radius: 12px; border-radius: 12px; -o-border-radius: 12px; margin: auto !important; background: white; } .modal-wrap .modal-cont { padding: 24px 12px; } .modal-wrap .modal-cont p { margin: 0; } .modal-wrap .modal-btn { display: flex; justify-content: space-between; } .modal-wrap .modal-btn button.btn, .modal-wrap .modal-btn a.btn { width: 50%; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; -o-border-radius: 0; cursor: pointer; padding-top: 12px; padding-bottom: 12px; display: block; } .modal-wrap .modal-btn button.btn.cancel, .modal-wrap .modal-btn a.btn.cancel { background: #D3D6DE; } .modal-wrap .modal-btn button.btn.confirm, .modal-wrap .modal-btn a.btn.confirm { background: #374FA8; color: #FCFCFC; font-weight: bold; } .modal-wrap .modal-btn button.btn:first-of-type, .modal-wrap .modal-btn a.btn:first-of-type { -webkit-border-radius: 0 0 0 12px; -moz-border-radius: 0 0 0 12px; -ms-border-radius: 0 0 0 12px; border-radius: 0 0 0 12px; -o-border-radius: 0 0 0 12px; } .modal-wrap .modal-btn button.btn:last-of-type, .modal-wrap .modal-btn a.btn:last-of-type { -webkit-border-radius: 0 0 12px 0; -moz-border-radius: 0 0 12px 0; -ms-border-radius: 0 0 12px 0; border-radius: 0 0 12px 0; -o-border-radius: 0 0 12px 0; } .modal-wrap .modal-btn.btn-1 button.btn, .modal-wrap .modal-btn.btn-1 a.btn { width: 100%; -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; } .modal-wrap .modal-btn.btn-2 button.btn, .modal-wrap .modal-btn.btn-2 a.btn { width: 50%; } .modal-wrap .modal-btn.btn-3 button.btn, .modal-wrap .modal-btn.btn-3 a.btn { width: 33.3%; } .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; } .flex-row { flex-direction: row; } .flex-column { flex-direction: column; } .flex-1 { flex: 1; } .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: 0.625rem; } .fs-2xs { font-size: 0.6875rem; } .fs-xs { font-size: 0.75rem; } .fs-sm { font-size: 0.875rem; } .fs-base { font-size: 1rem; } .fs-lg { font-size: 1.125rem; } .fs-xl { font-size: 1.25rem; } .fs-2xl { font-size: 1.5rem; } .fs-3xl { font-size: 1.875rem; } .fs-4xl { font-size: 2.25rem; } .fs-5xl { font-size: 3rem; } .fs-6xl { font-size: 3.75rem; } .fs-7xl { font-size: 4.5rem; } .fs-8xl { font-size: 6rem; } .fs-9xl { font-size: 8rem; } .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 */ html { font-size: clamp(14px, 4.57vw, 16px); } body { font-family: "Spoqa Han Sans Neo", "Noto Sans KR", "Nanum Gothic", "MalgunGothic", Dotum, Lato, Roboto, Arial, sans-serif; line-height: 1.4; font-size: 100%; } body * { word-break: keep-all; } @media (max-width: 359px) { body { font-size: 76%; } } /* #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: 0.875rem; 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: 1rem; 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; max-width: 160px; } 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 .btn[data-bs-toggle=offcanvas] { margin-right: 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-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-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: 0.65625rem; /* 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; } 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; } /* AI - 뜨고 있는 종목 */ div#nav.navbar.navbar-dark.navbar-sub-2:after { content: ""; display: block; width: 100%; height: 3px; background: linear-gradient(90deg, #567AFF 5.29%, #7D40FF 96.44%); position: absolute; bottom: -3px; } #main.ai { position: relative; background-image: url(/images/icon_ai_rising.svg); background-repeat: no-repeat; background-position: calc(100% - 24px) 24px; background-size: 48px; padding-bottom: 60px; } #main.ai.sector { background-image: url(/images/icon_ai_industry.svg); } #main.ai.quant { background-image: url(/images/icon_ai_selection.svg); } #main.ai h2.local-title { font-size: 24px; margin: 32px 20px 16px; } #main.ai h2.local-title small { display: table; color: #FCFCFC; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; border-radius: 20px; -o-border-radius: 20px; padding: 4px 12px; font-size: 10px; font-weight: normal; margin-bottom: 12px; background: #2D81FF; background: linear-gradient(90deg, #2D81FF 0%, #784BFF 100%); } #main.ai .local-description { margin: 0 22px 22px; } #main.ai .local-description h3 { color: #5974D3; font-size: 16px; font-weight: bold; margin-bottom: 4px; } #main.ai .local-description p { color: #5974D3; font-size: 13px; line-height: 1.3; } #main.ai .local-description .sub { color: #949AA9; font-size: 12px; } #main.ai .footnote { margin: 28px 22px 0; display: flex; justify-content: space-between; } #main.ai .footnote h4 { color: #374FA8; font-size: 16px; font-weight: bold; } #main.ai .footnote div { color: #949AA9; font-size: 12px; margin-left: auto; } #main.ai ul.rising { margin: 0 16px; padding: 0; } #main.ai ul.rising li.item { margin-bottom: 4px; } #main.ai ul.rising li.item a { background: #ffffff; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; -o-border-radius: 8px; padding: 20px 16px 18px; display: block; height: 100%; display: flex; align-items: center; line-height: 1; border: 3px solid transparent; column-gap: 14px; } @media (max-width: 575px) { #main.ai ul.rising li.item a { padding-top: 8px; padding-bottom: 6px; min-height: 60px; } } #main.ai ul.rising li.item a .title { font-size: 18px; font-weight: bold; white-space: nowrap; } #main.ai ul.rising li.item a .title:before { margin-right: 4px; } #main.ai ul.rising li.item a .desc { font-size: 13px; color: #949AA9; margin-left: auto; line-height: 1.3; } @media (max-width: 575px) { #main.ai ul.rising li.item a .desc { max-width: 56%; } } #main.ai ul.rising li.item a .title:before { content: "🔍"; aria-label: "돋보기"; margin-right: 8px; width: 20px; display: inline-block; } #main.ai ul.rising li.item a[href$="/m_rising_view/1"] .title:before { content: "📊"; aria-label: "차트 증가"; } #main.ai ul.rising li.item a[href$="/m_rising_view/2"] .title:before { content: "📚"; aria-label: "책들"; } #main.ai ul.rising li.item a[href$="/m_rising_view/3"] .title:before { content: "🏆"; aria-label: "트로피"; } #main.ai ul.rising li.item a[href$="/m_rising_view/4"] .title:before { content: "✨"; aria-label: "반짝임"; } #main.ai ul.rising li.item a:hover { border-color: #7B93E5; -moz-transition: 0.3s all; -o-transition: 0.3s all; -webkit-transition: 0.3s all; transition: 0.3s all; } #main.ai ul.rising li.item:first-child a .title { color: #374FA8; } #main.ai ul.sector { margin: 0 16px; padding: 0; } #main.ai ul.sector li.item { margin-bottom: 4px; } #main.ai ul.sector li.item a { background: #ffffff; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; -o-border-radius: 8px; padding: 20px 16px 18px; display: block; height: 100%; display: flex; align-items: center; line-height: 1; border: 3px solid transparent; column-gap: 14px; } @media (max-width: 575px) { #main.ai ul.sector li.item a { padding-top: 8px; padding-bottom: 6px; min-height: 60px; } } #main.ai ul.sector li.item a .title { font-size: 18px; font-weight: bold; white-space: nowrap; } #main.ai ul.sector li.item a .title:before { margin-right: 4px; } #main.ai ul.sector li.item a .desc { font-size: 13px; color: #949AA9; margin-left: auto; line-height: 1.3; } @media (max-width: 575px) { #main.ai ul.sector li.item a .desc { max-width: 56%; } } #main.ai ul.sector li.item a .title:before { content: "🔍"; aria-label: "돋보기"; margin-right: 8px; width: 20px; display: inline-block; } #main.ai ul.sector li.item a[href$="m_sector_view/fin"] .title:before { content: "💰"; aria-label: "돈주머니"; } #main.ai ul.sector li.item a[href$="m_sector_view/real"] .title:before { content: "🏠"; aria-label: "집"; } #main.ai ul.sector li.item a[href$="m_sector_view/tech"] .title:before { content: "💻"; aria-label: "노트북"; } #main.ai ul.sector li.item a[href$="m_sector_view/eneg"] .title:before { content: "⚡️"; aria-label: "번개"; } #main.ai ul.sector li.item a[href$="m_sector_view/csdefen"] .title:before { content: "🍎"; aria-label: "빨간색 사과"; } #main.ai ul.sector li.item a[href$="m_sector_view/commun"] .title:before { content: "📞"; aria-label: "수화기"; } #main.ai ul.sector li.item a[href$="m_sector_view/indus"] .title:before { content: "🏭"; aria-label: "공장"; } #main.ai ul.sector li.item a[href$="m_sector_view/health"] .title:before { content: "⚽️"; aria-label: "축구공"; } #main.ai ul.sector li.item a[href$="m_sector_view/cscycl"] .title:before { content: "📚"; aria-label: "책"; } #main.ai ul.sector li.item a[href$="m_sector_view/util"] .title:before { content: "♻️"; aria-label: "재활용"; } #main.ai ul.sector li.item a[href$="m_sector_view/material"] .title:before { content: "💎"; aria-label: "보석"; } #main.ai ul.sector li.item a:hover { border-color: #7B93E5; -moz-transition: 0.3s all; -o-transition: 0.3s all; -webkit-transition: 0.3s all; transition: 0.3s all; } #main.ai ul.sector li.item:first-child a .title { color: #374FA8; } #main.ai ul.quant { margin: 0 16px; padding: 0; } #main.ai ul.quant li.item { margin-bottom: 4px; } #main.ai ul.quant li.item a { background: #ffffff; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; -o-border-radius: 8px; padding: 20px 16px 18px; display: block; height: 100%; display: flex; align-items: flex-start; line-height: 1; border: 3px solid transparent; row-gap: 14px; flex-direction: column; } @media (max-width: 575px) { #main.ai ul.quant li.item a { min-height: 60px; } } #main.ai ul.quant li.item a .title { font-size: 18px; font-weight: bold; white-space: nowrap; } #main.ai ul.quant li.item a .title:before { margin-right: 4px; } #main.ai ul.quant li.item a .desc { font-size: 13px; color: #949AA9; line-height: 1.3; } @media (min-width: 480px) { #main.ai ul.quant li.item a .desc br { display: none; } } #main.ai ul.quant li.item a .title:before { content: "🔍"; aria-label: "돋보기"; margin-right: 8px; width: 20px; display: inline-block; } #main.ai ul.quant li.item a[href$="m_selection_view/joel"] .title:before { content: "🪄"; aria-label: "Magic Wand"; } #main.ai ul.quant li.item a[href$="m_selection_view/snow"] .title:before { content: "❄️"; aria-label: "Snowflake"; } #main.ai ul.quant li.item a[href$="m_selection_view/synth"] .title:before { content: "⚖️"; aria-label: "Balance Scale"; } #main.ai ul.quant li.item a[href$="m_selection_view/fscore"] .title:before { content: "📊"; aria-label: "Bar Chart"; } #main.ai ul.quant li.item a[href$="m_selection_view/vscore"] .title:before { content: "🌟"; aria-label: "Glowing Star"; } #main.ai ul.quant li.item a[href$="m_selection_view/divcharm"] .title:before { content: "💰"; aria-label: "Money Bag"; } #main.ai ul.quant li.item a:hover { border-color: #7B93E5; -moz-transition: 0.3s all; -o-transition: 0.3s all; -webkit-transition: 0.3s all; transition: 0.3s all; } #main.ai .btn.btn-load.btn-dark { color: #FCFCFC; background-color: #3D4660; border-color: #3D4660; }