@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;
}
div#main {
margin-top: -42px;
}
div#nav.navbar.navbar-dark.navbar-sub {
background: transparent !important;
}
div#nav.navbar.navbar-dark.navbar-sub .btn.btn-primary {
background: transparent !important;
border-color: transparent !important;
}
div#nav.navbar.navbar-dark.navbar-sub .navbar-brand {
display: none;
}
h1 {
font-family: "omnigothic", "Spoqa Han Sans Neo", "Noto Sans KR", "Nanum Gothic", "MalgunGothic", Dotum, Lato, Roboto, Arial, sans-serif;
font-weight: 300;
}
div#footer {
background: #252831;
color: #949AA9;
}
div#footer .inner {
width: 576px;
margin: 0 auto;
}
@media (max-width: 575px) {
div#footer .inner {
width: 100%;
}
}
div#footer a[aria-label=stockbotus] {
color: #949AA9;
}
div#footer a[aria-data=email] {
color: #949AA9;
}
div#container {
width: 100%;
max-width: 100%;
}
#nav {
width: 1024px;
max-width: 1024px;
margin: 0 auto;
display: none;
}
#nav.navbar .btn[aria-controls=search] {
display: none;
}
@media (max-width: 575px) {
#nav {
width: 576px;
}
}
#nav2.wide {
width: 100%;
max-width: 100%;
margin: 0 auto;
background: rgba(10, 24, 66, 0.6);
position: sticky;
z-index: 9999;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
#nav2.wide a {
color: #FCFCFC;
}
#nav2.wide a.home {
background: url('data:image/svg+xml,') no-repeat right;
padding-right: 15px;
}
#nav2.wide a.itooza img {
filter: grayscale(1) brightness(100);
height: 20px;
}
#nav2.wide a:hover {
filter: brightness(80%);
-webkit-filter: brightness(80%);
cursor: pointer;
}
#nav2.wide .inner {
width: 1024px;
max-width: 1024px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px;
}
@media (max-width: 1023px) {
#nav2.wide .inner {
width: 100%;
max-width: 100%;
}
}
@media (max-width: 575px) {
#nav2.wide .inner {
width: 100%;
max-width: 100%;
}
}
div[class^=intro-] {
width: 576px;
margin: 0 auto;
}
@media (max-width: 575px) {
div[class^=intro-] {
width: 100%;
}
}
div[class*=wide] {
width: 100%;
margin: 0 auto;
background: #F4F6FA;
}
div[class*=wide] .inner {
width: 576px;
margin: 0 auto;
}
@media (max-width: 575px) {
div[class*=wide] .inner {
width: 100%;
}
}
.intro-hero {
padding-top: 48px;
}
@media (max-width: 479px) {
.intro-hero {
padding-top: 24px;
}
}
.intro-hero.wide {
background-color: #8F00FF;
background-image: url("/images/intro/hero_background.png");
background-repeat: no-repeat;
background-position: center bottom;
background-size: cover;
color: #FCFCFC;
}
@supports (hanging-punctuation: first) and (-webkit-appearance: none) {
.intro-hero.wide {
margin-bottom: -10px;
}
}
.intro-hero .inner {
background: none;
min-height: 476px;
position: relative;
}
@media (max-width: 479px) {
.intro-hero .inner {
min-height: 340px;
}
}
.intro-hero .slogan {
margin: 70px auto 24px;
text-align: center;
}
@media (max-width: 575px) {
.intro-hero .slogan {
margin-right: 50px;
margin-left: 50px;
margin-bottom: 16px;
}
}
.intro-hero .slogan img {
max-width: 100%;
}
.intro-hero .title {
margin: 0 auto;
text-align: center;
}
@media (max-width: 575px) {
.intro-hero .title {
margin-right: 40px;
margin-left: 40px;
}
}
.intro-hero .title img {
max-width: 100%;
}
.intro-hero .statue {
background: url("/images/intro/hero_statue.svg") no-repeat center top/cover;
width: 127px;
height: 439px;
position: absolute;
}
@media (max-width: 575px) {
.intro-hero .statue {
height: 300px;
bottom: 0;
}
}
.intro-hero .phone {
margin: 0 60px -100px auto;
text-align: right;
position: absolute;
right: 0;
}
@media (max-width: 991px) {
.intro-hero .phone {
margin-right: 32px;
bottom: 0;
}
}
@media (max-width: 575px) {
.intro-hero .phone {
margin-right: 8px;
}
}
.intro-hero .phone img {
max-width: 330px;
}
@media (max-width: 575px) {
.intro-hero .phone img {
width: 250px;
}
}
.intro-goto {
display: flex;
justify-content: center;
padding: 18px 30px;
position: relative;
}
.intro-goto.wide {
background: #000E5A;
}
@media (max-width: 575px) {
.intro-goto {
padding: 16px 16px;
}
}
.intro-goto a {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
-o-border-radius: 8px;
background: #FF008A url('data:image/svg+xml,') no-repeat calc(100% - 34px);
color: #FCFCFC;
font-size: 26px;
padding: 26px 120px;
}
@media (max-width: 575px) {
.intro-goto a {
font-size: 18px;
padding: 16px 34px 16px 26px;
background-position: calc(100% - 10px);
width: calc(100% - 24px);
}
}
.intro-essential {
padding: 122px 16px 40px;
text-align: center;
}
@media (max-width: 575px) {
.intro-essential {
padding-top: 94px;
padding-bottom: 24px;
}
}
.intro-essential h3 {
font-family: "omnigothic", "Spoqa Han Sans Neo", "Noto Sans KR", "Nanum Gothic", "MalgunGothic", Dotum, Lato, Roboto, Arial, sans-serif;
margin-bottom: 42px;
letter-spacing: -0.03em;
}
.intro-essential h3 strong {
background: url(/images/intro/essential_text_01.svg) no-repeat center bottom/contain;
display: block;
height: 73px;
font-size: 0;
margin-bottom: 16px;
}
@media (max-width: 575px) {
.intro-essential h3 strong {
max-height: 50px;
}
}
.intro-essential h3 small {
background: url(/images/intro/essential_text_02.svg) no-repeat center top/contain;
display: block;
height: 40px;
font-size: 0;
margin-left: 8px;
margin-right: 8px;
}
@media (max-width: 575px) {
.intro-essential img {
max-width: 80%;
margin-top: 24px;
margin-bottom: 24px;
}
}
.intro-benefits {
padding: 53px 8px 116px;
text-align: center;
overflow-x: hidden;
}
@media (max-width: 575px) {
.intro-benefits {
padding-bottom: 80px;
}
}
.intro-benefits .tagline {
font-size: 24px;
color: #F81C51;
margin: 0 0 4px;
}
.intro-benefits h3 {
font-size: 40px;
letter-spacing: -0.03em;
margin-bottom: 64px;
}
.intro-benefits .item-group {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 48px 10px;
}
@media (max-width: 575px) {
.intro-benefits .item-group {
flex-direction: column;
}
}
.intro-benefits .item {
width: calc(50% - 10px);
text-align: center;
}
@media (max-width: 575px) {
.intro-benefits .item {
width: 100%;
margin: 0 auto;
}
}
.intro-benefits h4.title {
font-size: 25px;
font-weight: bold;
letter-spacing: -0.03rem;
}
.intro-benefits p.desc {
font-size: 15px;
color: #949AA9;
margin-bottom: 32px;
}
.intro-benefits .img {
background: #F4F6FA;
width: 156px;
height: 156px;
margin: 0 auto;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.intro-solution {
padding: 70px 0 0;
}
@media (max-width: 767px) {
.intro-solution {
overflow-x: hidden;
overflow-y: visible;
margin-bottom: -40px;
}
}
@media (max-width: 767px) {
.intro-solution .inner {
overflow: hidden;
margin-bottom: 88px !important;
}
}
@media (max-width: 575px) {
.intro-solution {
padding-top: 40px;
padding-bottom: 0px;
}
}
.intro-solution .customer {
position: relative;
padding-left: 153px;
margin-bottom: 60px;
}
@media (max-width: 575px) {
.intro-solution .customer {
padding-left: 0;
}
}
.intro-solution .customer h4 {
color: #F81C51;
font-size: 32px;
font-weight: bold;
letter-spacing: -0.03rem;
margin-bottom: 18px;
}
@media (max-width: 575px) {
.intro-solution .customer h4 {
text-align: center;
}
}
.intro-solution .customer .img {
background: url(/images/intro/solution_woman.svg) no-repeat center/100%;
width: 178px;
height: 192px;
position: absolute;
left: -53px;
top: -24px;
}
@media (max-width: 575px) {
.intro-solution .customer .img {
position: revert;
margin: 0 auto 24px;
width: 150px;
height: 150px;
}
}
.intro-solution .customer .item {
background: url(/images/intro/solution_customer.svg) no-repeat;
font-size: 0;
color: transparent;
height: 39px;
margin: 0 0 16px;
}
@media (max-width: 575px) {
.intro-solution .customer .item {
height: 29px;
background-size: 320px;
width: 320px;
margin-left: auto;
margin-right: auto;
}
}
.intro-solution .customer .item {
background-position: left top;
}
.intro-solution .customer .item + .item {
background-position: left center;
}
.intro-solution .customer .item + .item + .item {
background-position: left bottom;
}
.intro-solution .answer {
font-family: "omnigothic", "Spoqa Han Sans Neo", "Noto Sans KR", "Nanum Gothic", "MalgunGothic", Dotum, Lato, Roboto, Arial, sans-serif;
letter-spacing: -0.03rem;
line-height: 1.2;
margin-bottom: 76px;
position: relative;
padding-right: 159px;
}
@media (max-width: 575px) {
.intro-solution .answer {
padding: 0 20px;
}
}
.intro-solution .answer h4 {
padding-top: 16px;
}
@media (max-width: 575px) {
.intro-solution .answer h4 {
text-align: center;
margin-bottom: 34px;
}
}
.intro-solution .answer h4 span {
background: url(/images/intro/answer_text_01.svg) no-repeat left/contain;
display: block;
height: 53px;
font-size: 0;
margin-bottom: 16px;
}
@media (max-width: 575px) {
.intro-solution .answer h4 span {
background-position: center bottom;
max-height: 48px;
}
}
@media (max-width: 479px) {
.intro-solution .answer h4 span {
max-height: 44px;
}
}
.intro-solution .answer h4 span + span {
background: url(/images/intro/answer_text_02.svg) no-repeat left/contain;
display: block;
height: 53px;
font-size: 0;
margin-bottom: 16px;
}
@media (max-width: 575px) {
.intro-solution .answer h4 span + span {
background-position: center top;
max-height: 48px;
}
}
@media (max-width: 479px) {
.intro-solution .answer h4 span + span {
max-height: 44px;
}
}
.intro-solution .answer .img {
background: url(/images/intro/solution_man.svg) no-repeat center/100%;
width: 212px;
height: 168px;
position: absolute;
right: -47px;
top: 0;
}
@media (max-width: 575px) {
.intro-solution .answer .img {
position: revert;
margin: 0 auto;
width: 190px;
height: 150px;
}
}
.intro-solution [class^=question] {
background: #374FA8;
color: #FCFCFC;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
-ms-border-radius: 100px;
border-radius: 100px;
-o-border-radius: 100px;
padding: 18px;
display: flex;
align-items: center;
gap: 0 16px;
margin-bottom: 54px;
}
@media (max-width: 575px) {
.intro-solution [class^=question] {
margin: 0 16px 46px;
padding: 12px;
}
}
.intro-solution [class^=question] span {
display: block;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
-o-border-radius: 50%;
background: #B5C4FF;
color: #374FA8;
width: 66px;
height: 66px;
display: flex;
align-items: center;
justify-content: center;
font-size: 23px;
font-weight: bold;
flex-basis: 66px;
}
.intro-solution [class^=question] h3 {
max-width: calc(100% - 70px);
flex: 1;
margin-bottom: 0;
}
.intro-solution .question-01 + .item-group {
margin-bottom: 90px;
}
@media (max-width: 575px) {
.intro-solution .question-01 + .item-group {
margin-bottom: 0;
}
}
.intro-solution .item-group {
padding-bottom: 27px;
position: relative;
}
.intro-solution .item-group .item {
margin-left: 24px;
margin-bottom: 50px;
}
@media (max-width: 479px) {
.intro-solution .item-group .item {
width: calc(100% - 154px);
}
}
.intro-solution .item-group .item h4 {
font-size: 25px;
font-weight: bold;
position: relative;
margin-bottom: 16px;
letter-spacing: -0.03rem;
}
@media (max-width: 575px) {
.intro-solution .item-group .item h4 {
font-size: 22px;
}
}
.intro-solution .item-group .item h4::before {
content: "";
background: #5974D3;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
-o-border-radius: 50%;
width: 12px;
height: 12px;
display: inline-block;
position: absolute;
left: -20px;
top: 6px;
}
.intro-solution .item-group .item .text {
font-size: 16px;
color: #7E8597;
padding-right: 10px;
}
.intro-solution .item-group .item .text p {
margin-bottom: 12px;
line-height: 1.4;
}
.intro-solution .item-group .item .text .emphasis {
border-left: 3px solid #BBC5E9;
padding-left: 12px;
}
.intro-solution .item-group .item .text [class^=ai] {
margin-bottom: 40px;
}
@media (max-width: 479px) {
.intro-solution .item-group .item .text [class^=ai] {
margin-bottom: 24px;
}
}
.intro-solution .item-group .item .text [class^=ai] .img {
background-color: #E5E8FF;
background-repeat: no-repeat;
background-size: 34px;
background-position: center;
width: 60px;
height: 60px;
float: left;
margin-right: 18px;
}
@media (max-width: 479px) {
.intro-solution .item-group .item .text [class^=ai] .img {
width: 50px;
height: 50px;
background-size: 26px;
}
}
.intro-solution .item-group .item .text [class^=ai] p.strong {
font-size: 22px;
font-weight: bold;
margin-bottom: 4px;
color: #646FD9;
letter-spacing: -0.03rem;
margin-left: 80px;
}
@media (max-width: 479px) {
.intro-solution .item-group .item .text [class^=ai] p.strong {
margin-left: 66px;
font-size: 20px;
margin-bottom: 2px;
}
}
.intro-solution .item-group .item .text [class^=ai] .text {
font-size: 15px;
margin-left: 80px;
}
@media (max-width: 479px) {
.intro-solution .item-group .item .text [class^=ai] .text {
margin-left: 66px;
}
}
.intro-solution .item-group .item .text [class^=ai] ul.text {
padding: 0 0 13px 15px;
margin-right: 0;
margin-bottom: 0;
list-style-type: disc;
}
.intro-solution .item-group .item .text .ai-01 .img {
background-image: url(/images/icon_ai_daily.svg);
}
.intro-solution .item-group .item .text .ai-02 {
margin-bottom: 16px;
}
.intro-solution .item-group .item .text .ai-02 .img {
background-image: url(/images/icon_ai_trend.svg);
}
.intro-solution .item-group .item .text .ai-03 .img {
background-image: url(/images/icon_ai_rising.svg);
background-size: 30px;
}
.intro-solution .item-group .item.item-01 {
margin-left: 210px;
}
@media (max-width: 479px) {
.intro-solution .item-group .item.item-01 {
margin-left: 44px;
}
}
.intro-solution .item-group .item.item-02 {
margin-left: 268px;
margin-bottom: 94px;
}
@media (max-width: 479px) {
.intro-solution .item-group .item.item-02 {
margin-left: 44px;
}
}
.intro-solution .item-group .item.item-11, .intro-solution .item-group .item.item-12 {
margin-left: 32px;
margin-right: 256px;
}
@media (max-width: 479px) {
.intro-solution .item-group .item.item-11, .intro-solution .item-group .item.item-12 {
margin-left: 50px;
margin-right: 114px;
}
}
.intro-solution .item-group .item.item-11 {
padding-top: 24px;
}
.intro-solution .item-group .item.item-13 {
margin-top: 130px;
margin-left: 240px;
}
@media (max-width: 479px) {
.intro-solution .item-group .item.item-13 {
margin-top: 44px;
margin-left: 44px;
}
}
.intro-solution .item-group .item.item-13 .text > p {
margin-bottom: 24px;
}
.intro-solution .item-group .img {
position: absolute;
}
.intro-solution .item-group .img img {
max-width: 196px;
}
@media (max-width: 479px) {
.intro-solution .item-group .img img {
max-width: 124px;
}
}
.intro-solution .item-group .img.img-01 {
left: -29px;
}
@media (max-width: 479px) {
.intro-solution .item-group .img.img-01 {
left: unset;
right: -29px;
}
}
.intro-solution .item-group .img.img-02 {
left: 44px;
top: 180px;
}
@media (max-width: 479px) {
.intro-solution .item-group .img.img-02 {
left: unset;
right: -29px;
top: 300px;
}
}
.intro-solution .item-group .img.img-11 {
max-width: 159px;
right: 32px;
}
@media (max-width: 479px) {
.intro-solution .item-group .img.img-11 {
left: unset;
right: -29px;
}
}
.intro-solution .item-group .img.img-13 {
left: -44px;
top: 422px;
}
@media (max-width: 479px) {
.intro-solution .item-group .img.img-13 {
left: unset;
right: -29px;
top: 353px;
}
}
.intro-solution .item-group .img.img-13-2 {
left: -17px;
top: 528px;
}
@media (max-width: 479px) {
.intro-solution .item-group .img.img-13-2 {
left: unset;
right: -29px;
top: 622px;
}
}
@media (max-width: 575px) {
.intro-sms {
margin-top: -60px !important;
}
}
.intro-sms.wide {
background: #EAECFE;
}
.intro-sms .text {
padding: 58px 151px 58px 24px;
font-size: 21px;
background: url(/images/intro/sms_01.png) no-repeat right bottom/120px;
line-height: 1.6;
}
@media (max-width: 575px) {
.intro-sms .text {
padding-top: 46px;
padding-right: 24px;
padding-bottom: 220px;
background-position: center bottom;
font-size: 18px;
}
}
.intro-sms .text p {
margin: 0;
}
.intro-sms .text p span {
font-weight: bold;
display: inline-block;
background-image: linear-gradient(to top, #D2D6FA 40%, transparent 50%);
width: fit-content;
padding: 0 2px 0px;
}
.intro-merits {
padding: 90px 10px 88px;
}
@media (max-width: 575px) {
.intro-merits {
padding-top: 66px;
padding-bottom: 60px;
}
}
.intro-merits h3 {
text-align: center;
margin-bottom: 54px;
display: flex;
justify-content: center;
gap: 8px;
}
@media (max-width: 575px) {
.intro-merits h3 {
flex-direction: column;
align-items: center;
}
}
.intro-merits h3 span {
background: url(/images/intro/merits_text_01.svg) no-repeat center/contain;
display: block;
height: 42px;
width: 257px;
font-size: 0;
}
.intro-merits h3 span + span {
background: url(/images/intro/merits_text_02.svg) no-repeat center/contain;
display: block;
height: 42px;
width: 257px;
font-size: 0;
}
.intro-merits h3 br {
display: none;
}
@media (max-width: 575px) {
.intro-merits h3 br {
display: block;
}
}
.intro-merits .item {
margin: 0 12px 16px;
background-color: #FDE7E9;
background-size: 150px;
background-repeat: no-repeat;
background-position: right top;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-ms-border-radius: 12px;
border-radius: 12px;
-o-border-radius: 12px;
}
.intro-merits .item h4 {
font-weight: bold;
margin: 0 0 10px 24px;
padding-top: 28px;
}
.intro-merits .item p {
margin: 0 0 0 24px;
padding-bottom: 24px;
max-width: calc(100% - 176px);
font-size: 16px;
line-height: 1.4;
}
.intro-merits .item.item-01 {
background-image: url(/images/intro/merits_01.png);
background-position-y: bottom;
}
.intro-merits .item.item-02 {
background-image: url(/images/intro/merits_02.png);
background-position-y: top;
}
.intro-merits .item.item-03 {
background-image: url(/images/intro/merits_03.png);
background-position-y: bottom;
}
.intro-dday {
padding: 60px 8px 60px;
overflow-x: hidden;
text-align: center;
}
.intro-dday.wide.first {
background-color: #e2e3f2;
}
.intro-dday.wide.second {
background-color: #42248F;
}
@media (max-width: 575px) {
.intro-dday {
padding-top: 40px;
padding-bottom: 40px;
}
}
.intro-dday h4 {
color: #FCFCFC;
font-size: 22px;
font-weight: bold;
margin-bottom: 24px;
}
@media (max-width: 575px) {
.intro-dday h4 {
font-size: 20px;
margin-bottom: 20px;
}
}
.intro-dday h4 strong {
color: #FF557E;
}
.intro-dday h4 small {
font-weight: normal;
font-size: 14px;
}
@media (max-width: 575px) {
.intro-dday h4 small {
display: block;
margin-top: 4px;
}
}
.intro-dday.first h4 {
color: #39486E;
}
.intro-dday.first h4 strong {
color: #8D00FF;
}
.intro-dday .dday {
display: flex;
justify-content: center;
gap: 18px;
}
@media (max-width: 575px) {
.intro-dday .dday {
gap: 6px;
}
}
.intro-dday .dday span {
display: block;
font-size: 26px;
font-weight: bold;
line-height: 1;
background-color: rgba(255, 255, 255, 0.3);
color: #FCFCFC;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
-o-border-radius: 4px;
padding: 24px 24px;
min-width: 118px;
}
@media (max-width: 575px) {
.intro-dday .dday span {
font-size: 18px;
padding: 18px 8px;
min-width: 76px;
}
}
.intro-dday.first .dday span {
background-color: #B1B3E1;
}
.intro-join {
padding: 90px 8px 100px;
overflow-x: hidden;
}
.intro-join.wide {
background-color: #d3dcec;
}
@media (max-width: 575px) {
.intro-join {
padding-top: 80px;
}
}
.intro-join h3 {
font-family: "omnigothic", "Spoqa Han Sans Neo", "Noto Sans KR", "Nanum Gothic", "MalgunGothic", Dotum, Lato, Roboto, Arial, sans-serif;
font-weight: 600;
font-size: 52px;
color: #7E8597;
letter-spacing: -0.03rem;
margin-bottom: 38px;
}
@media (max-width: 575px) {
.intro-join h3 {
font-size: 36px;
text-align: center;
}
}
.intro-join h3 strong {
color: #F81C51;
}
@media (max-width: 575px) {
.intro-join h3 strong {
font-size: 42px;
}
}
.intro-join h3 strong span {
color: #374FA8;
}
.intro-join h3 strong {
background: url(/images/intro/join_text_01.svg) no-repeat left/contain;
display: block;
height: 55px;
font-size: 0;
margin-bottom: 8px;
}
@media (max-width: 575px) {
.intro-join h3 strong {
background-position: center bottom;
max-height: 50px;
}
}
.intro-join h3 strong + span {
background: url(/images/intro/join_text_02.svg) no-repeat left/contain;
display: block;
height: 50px;
font-size: 0;
}
@media (max-width: 575px) {
.intro-join h3 strong + span {
background-position: center top;
margin-left: 12px;
margin-right: 12px;
}
}
.intro-join .item-body {
min-height: 300px;
}
.intro-join .ticket-top {
background-color: #374FA8;
-webkit-border-radius: 18px 18px 0 0;
-moz-border-radius: 18px 18px 0 0;
-ms-border-radius: 18px 18px 0 0;
border-radius: 18px 18px 0 0;
-o-border-radius: 18px 18px 0 0;
color: #FCFCFC;
padding: 16px 24px 14px 38px;
font-size: 16px;
font-weight: bold;
display: flex;
justify-content: space-between;
}
@media (max-width: 575px) {
.intro-join .ticket-top {
background-image: none;
text-align: center;
padding-left: 14px;
padding-right: 14px;
}
}
.intro-join .ticket-top span.duration {
font-weight: normal;
margin-left: 8px;
font-size: 14px;
text-align: right;
opacity: 0.7;
}
@media (max-width: 479px) {
.intro-join .ticket-top span.duration span {
display: none;
}
}
.intro-join .ticket-wrap {
background: #ffffff;
padding: 26px 38px 12px;
position: relative;
border: none; /* 기존 border 제거 */
}
@media (max-width: 575px) {
.intro-join .ticket-wrap {
padding-left: 24px;
padding-right: 24px;
}
}
@media (max-width: 479px) {
.intro-join .ticket-wrap {
padding-left: 16px;
padding-right: 16px;
}
}
.intro-join .ticket-wrap::before, .intro-join .ticket-wrap::after {
z-index: 1234;
content: "";
position: absolute;
bottom: 0;
width: 18px;
height: 37px;
background-color: #d3dcec;
}
.intro-join .ticket-wrap::before {
left: -1px;
-webkit-transform: translateY(50%);
-moz-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%);
-webkit-border-radius: 0 50px 50px 0;
-moz-border-radius: 0 50px 50px 0;
-ms-border-radius: 0 50px 50px 0;
border-radius: 0 50px 50px 0;
-o-border-radius: 0 50px 50px 0;
}
.intro-join .ticket-wrap::after {
right: 0;
-webkit-transform: translateY(50%);
-moz-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%);
-webkit-border-radius: 50px 0 0 50px;
-moz-border-radius: 50px 0 0 50px;
-ms-border-radius: 50px 0 0 50px;
border-radius: 50px 0 0 50px;
-o-border-radius: 50px 0 0 50px;
}
.intro-join .ticket-go h4 {
font-size: 34px;
font-weight: bold;
letter-spacing: -0.03rem;
margin-top: 16px;
margin-bottom: 18px;
}
@media (max-width: 575px) {
.intro-join .ticket-go h4 {
text-align: center;
margin-bottom: 24px;
}
}
.intro-join .ticket-go h4 span {
color: #374FA8;
}
.intro-join .ticket-go .price-info {
display: flex;
}
@media (max-width: 575px) {
.intro-join .ticket-go .price-info {
margin-bottom: 24px;
justify-content: center;
}
}
.intro-join .ticket-go .price-info .through {
margin: 0 28px;
}
@media (max-width: 479px) {
.intro-join .ticket-go .price-info .through {
margin: 0 14px;
}
}
.intro-join .ticket-go .price-info .through span.go {
display: block;
width: 47px;
height: 22px;
background: url('data:image/svg+xml,') no-repeat center;
margin: 4px auto 12px;
}
.intro-join .ticket-go .price-info .through span.bar {
border-bottom: 2px solid #212121;
padding: 0 48px;
display: block;
position: relative;
}
@media (max-width: 479px) {
.intro-join .ticket-go .price-info .through span.bar {
padding: 0 24px;
}
}
.intro-join .ticket-go .price-info .through span.bar:after {
content: "";
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid #212121;
display: block;
position: absolute;
right: 0;
top: -5px;
}
.intro-join .ticket-go .price-info .origin,
.intro-join .ticket-go .price-info .final {
display: flex;
flex-direction: column;
}
.intro-join .ticket-go .price-info .origin .label {
color: #949AA9;
}
.intro-join .ticket-go .price-info .origin .price {
font-size: 23px;
color: #949AA9;
position: relative;
}
.intro-join .ticket-go .price-info .origin .price span {
font-size: 14px;
color: #949AA9;
}
.intro-join .ticket-go .price-info .origin .price::after {
content: "";
background: #949AA9;
height: 2px;
width: calc(100% - 16px);
display: block;
position: absolute;
top: 13px;
}
.intro-join .ticket-go .price-info .final .label {
color: #7B93E5;
color: #F81C51;
}
.intro-join .ticket-go .price-info .final .price {
font-size: 25px;
}
.intro-join .ticket-go .price-info .final .price span {
font-size: 14px;
color: #949AA9;
}
.intro-join .ticket-go .price-info .final .price small {
font-size: 14px;
color: #949AA9;
margin-left: 8px;
white-space: nowrap;
}
@media (max-width: 575px) {
.intro-join .ticket-go .price-info .final .price small {
display: block;
margin-left: 0;
}
}
.intro-join .benefit {
border-top: 1px solid #ECEEF2;
padding-top: 14px;
margin-top: 14px;
}
@media (max-width: 479px) {
.intro-join .benefit {
margin-left: 12px;
margin-right: 12px;
}
}
.intro-join .benefit h4 {
color: #F81C51;
font-size: 12px;
}
.intro-join .benefit .item {
display: flex;
gap: 6px;
margin-bottom: 14px;
}
@media (max-width: 575px) {
.intro-join .benefit .item {
flex-wrap: wrap;
}
}
.intro-join .benefit .item .num {
background: #F81C51;
color: #FCFCFC;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
-o-border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
width: 18px;
height: 18px;
font-size: 12px;
padding: 10px;
}
.intro-join .benefit .item .title {
font-size: 18px;
font-weight: bold;
flex-basis: 190px;
margin-right: auto;
letter-spacing: -0.03rem;
line-height: 1.3;
}
.intro-join .benefit .item ul {
list-style: disc;
margin: 0;
padding: 0;
color: #949AA9;
font-size: 13px;
width: 67%;
letter-spacing: -0.03rem;
}
@media (max-width: 575px) {
.intro-join .benefit .item ul {
width: 100%;
margin: 0 0 18px 12px;
}
}
@media (max-width: 575px) {
.intro-join .benefit .item.item-01 br {
display: none;
}
}
.intro-join .benefit .item.item-03 {
margin-bottom: 16px;
}
.intro-join .ticket-stub {
background: #374FA8 url('data:image/svg+xml,') no-repeat calc(100% - 34px) 58%;
position: relative;
-webkit-border-radius: 0 0 18px 18px;
-moz-border-radius: 0 0 18px 18px;
-ms-border-radius: 0 0 18px 18px;
border-radius: 0 0 18px 18px;
-o-border-radius: 0 0 18px 18px;
color: #FCFCFC;
}
@media (max-width: 575px) {
.intro-join .ticket-stub {
background-image: none;
}
}
.intro-join .ticket-stub::before {
content: "";
display: block;
width: 100%;
height: 3px;
background-image: linear-gradient(to right, white 50%, transparent 50%);
background-size: 37px 3px;
background-repeat: repeat-x;
background-position: top;
position: absolute;
top: 0;
left: 0;
-moz-transition: transform(0.5s ease-in-out);
-o-transition: transform(0.5s ease-in-out);
-webkit-transition: transform(0.5s ease-in-out);
transition: transform(0.5s ease-in-out);
transition: transform 0.5s ease-in-out; /* 부드러운 슬라이딩 효과 */
}
.intro-join .ticket-stub::after {
z-index: 1234;
content: "";
position: absolute;
top: -37px;
width: 18px;
height: 37px;
background-color: #d3dcec;
right: -1px;
-webkit-transform: translateY(50%);
-moz-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%);
-webkit-border-radius: 50px 0 0 50px;
-moz-border-radius: 50px 0 0 50px;
-ms-border-radius: 50px 0 0 50px;
border-radius: 50px 0 0 50px;
-o-border-radius: 50px 0 0 50px;
}
.intro-join .ticket-stub.pre-open .open-go {
display: none;
}
.intro-join .ticket-stub.get-started {
-moz-transition: transform 0.3s ease;
-o-transition: transform 0.3s ease;
-webkit-transition: transform 0.3s ease;
transition: transform 0.3s ease;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
.intro-join .ticket-stub.get-started .coming-soon {
display: none;
}
.intro-join .ticket-stub.get-started:hover {
transform: rotateX(0deg) rotateY(0deg) rotateZ(4deg);
}
.intro-join .ticket-stub a {
color: #FCFCFC;
}
.intro-join .ticket-stub .coming-soon {
padding: 36px 38px 32px;
font-size: 34px;
line-height: 1;
}
@media (max-width: 575px) {
.intro-join .ticket-stub .coming-soon {
text-align: center;
}
}
.intro-join .ticket-stub .coming-soon span {
font-weight: bold;
display: inline-block;
background-image: linear-gradient(to top, #0F2780 40%, transparent 50%);
width: fit-content;
padding: 0 6px 4px;
}
.intro-join .ticket-stub .open-go {
font-size: 34px;
line-height: 1;
position: relative;
}
.intro-join .ticket-stub .open-go a {
display: block;
padding: 36px 38px 32px;
}
@media (max-width: 575px) {
.intro-join .ticket-stub .open-go a {
text-align: center;
}
}
.intro-join .ticket-stub .open-go a strong {
display: inline-block;
background-image: linear-gradient(to top, #0F2780 40%, transparent 50%);
width: fit-content;
padding: 0 6px 4px;
}
@media (max-width: 479px) {
.intro-join .ticket-stub .open-go a strong {
display: block;
margin: 10px auto 0;
font-size: 43px;
}
}
.intro-join .ticket-stub .open-go span.cursor {
background: url(/images/intro/cursor_hand.png) no-repeat center;
width: 73px;
height: 135px;
display: block;
z-index: 3;
position: absolute;
right: 34%;
top: 22px;
transform: rotateX(0deg) rotateY(0deg) rotateZ(-16deg) translate(0, 0);
filter: drop-shadow(4px 5px 7px rgba(0, 0, 0, 0.6));
-webkit-filter: drop-shadow(4px 5px 7px rgba(0, 0, 0, 0.6));
animation: bounce 1s infinite; /* 애니메이션 이름, 지속 시간, 반복 횟수 설정 */
}
@media (max-width: 575px) {
.intro-join .ticket-stub .open-go span.cursor {
right: 40px;
}
}
@media (max-width: 479px) {
.intro-join .ticket-stub .open-go span.cursor {
right: 30px;
top: 76px;
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(-16deg) translate(0, 0px);
}
40% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(-16deg) translate(0, -10px);
}
60% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(-16deg) translate(0, -5px);
}
}
.intro-join .ticket-stub:hover:before {
background-image: linear-gradient(to right, #d3dcec 50%, transparent 50%);
}
.intro-join .ticket-desc {
color: #949AA9;
margin-top: 18px;
font-size: 13px;
}
.intro-join .ticket-desc ul {
list-style: disc;
}
@media (max-width: 479px) {
.intro-join .ticket-desc ul {
padding-left: 20px;
}
}
.intro-join .button.go-home {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
-o-border-radius: 8px;
background: #ABB2C6 url('data:image/svg+xml,') no-repeat calc(100% - 34px);
display: flex;
justify-content: center;
align-items: center;
margin: 50px 68px 0;
color: #FCFCFC;
font-size: 22px;
padding: 16px 24px;
}
@media (max-width: 575px) {
.intro-join .button.go-home {
margin-right: 16px;
margin-left: 16px;
}
}
.intro-join .button.go-home a {
color: #FCFCFC;
}
.intro-faq.wide {
padding: 40px 16px;
}
.intro-faq.wide.wide {
background-color: #303647;
color: #FCFCFC;
}
.intro-faq.wide .item {
border-top: 1px solid #444A59;
padding: 34px 12px 26px;
}
.intro-faq.wide h3 {
font-size: 24px;
padding-bottom: 12px;
}
.intro-faq.wide h4 {
font-size: 22px;
margin-bottom: 24px;
}
@media (max-width: 575px) {
.intro-faq.wide h4 {
font-size: 20px;
}
}
.intro-faq.wide .text {
font-size: 18px;
color: #ADB2BE;
}
@media (max-width: 575px) {
.intro-faq.wide .text {
font-size: 16px;
}
}
.intro-faq.wide .text ul {
margin: 0 0 0 24px;
padding: 0;
list-style-type: disc;
}
.intro-faq.wide .text li {
margin: 0;
padding: 0;
}
.intro-faq.wide a {
color: #AAC2FF;
}