@charset "UTF-8"; @import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css); @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); html, body { height: 100%; margin: 0; padding: 0; } /*** The new CSS reset - version 1.9 (last updated 19.6.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *: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; } /* 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; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* 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; -webkit-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://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff") format("woff"); font-weight: light; font-style: normal; } @font-face { font-family: "GmarketSans"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff") format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "GmarketSans"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff") format("woff"); font-weight: bold; font-style: normal; } body { font-family: "Spoqa Han Sans Neo", "Noto Sans KR", "Nanum Gothic", "MalgunGothic", Dotum, Lato, Roboto, Arial, sans-serif; line-height: 1.6; background: #f5f5f5; } div#container { width: 852px; margin: 0 auto; display: flex; flex-direction: column; position: relative; background: white; } @media (min-width: 576px) { .container, .container-sm { max-width: 100% !important; } } div#nav.navbar { background: #F81C51; flex-wrap: wrap; padding: 0; } div#nav.navbar.navbar-dark { background-color: #F81C51; color: #FCFCFC; } div#nav.navbar div[class^=container] { position: relative; } div#nav.navbar .navbar-brand { color: #FCFCFC; font-size: 26px; font-weight: normal; margin-right: auto; margin-left: 40px; padding: 0; letter-spacing: -0.03em; } div#nav.navbar .navbar-brand a { color: #FCFCFC; font-weight: bold; } 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 .search-box { background: #FCFCFC; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; -o-border-radius: 4px; display: flex; justify-content: space-between; margin-left: 1rem; margin-right: 1rem; margin: 1rem; width: 210px; padding-left: 4px; } div#nav.navbar .search-box input[type=search], div#nav.navbar .search-box input#seName { border: none; padding: 4px 4px 4px 8px; color: #212121; width: calc(100% - 42px); max-height: 34px; } div#nav.navbar .search-box input[type=search]::placeholder, div#nav.navbar .search-box input#seName::placeholder { color: #B4B9CD; } div#nav.navbar .search-box button.btn { color: #F81C51; padding: 4px 16px; margin-left: auto; display: block; flex: 0; width: 34px; background: url(https://m.itooza.com/itoozamobile/images/icon_search.png) no-repeat center/contain; height: 100%; } div#nav.navbar .search-box button.btn i { padding: 6px 4px 4px 4px; display: block; font-size: 0px; width: 28px; height: 28px; } div#nav.navbar .sch_relation_item { width: 200px; position: absolute; right: 13px; top: 42px; background: white; font-size: 14px; filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.3)); -webkit-filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.3)); -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; -o-border-radius: 4px; } div#nav.navbar .sch_relation_item ul { margin: 8px; padding: 0; } div#nav.navbar .sch_relation_item ul li a { color: #6C7285; display: flex; justify-content: space-between; padding-top: 2px; padding-bottom: 2px; } div#nav.navbar .sch_relation_item ul li a span.item_tit { font-weight: bold; } div#nav.navbar .sch_relation_item ul li a span.item_code { margin-left: auto; } div#nav.navbar .nav { width: 100%; background: #ffffff; border-bottom: 2px solid #d8dde7; flex-wrap: nowrap; justify-content: space-between; line-height: 1; padding-left: 40px; padding-right: 40px; } div#nav.navbar .nav li a { color: #535A6F; font-weight: bold; display: block; padding: 1rem; font-size: 17px; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; } div#nav.navbar .nav li a:hover { color: #F81C51; } div#nav.navbar .nav li.focus a { color: #F81C51; border-bottom: 2px solid #F81C51; margin-bottom: -2px; } .sch_result_item { position: Absolute; top: 55px; right: 17px; width: 212px; background: rgba(255, 255, 255, 0.6); -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; -o-border-radius: 4px; padding: 12px 24px; backdrop-filter: blur(6px); } .sch_result_item ul { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; } /* FOOTER */ div#footer { margin-top: auto; background: #868DA4; position: relative; color: #FCFCFC; padding: 28px; font-size: 11px; } div#footer ul { margin: 0 0 0 24px; padding: 0; text-indent: -10px; font-size: 11px; line-height: 1.4; } div#footer li { margin-bottom: 0.2rem; } div#footer li:last-of-type { margin-bottom: 0; } div#footer 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 .btn-primary#gotoTop { background: #F81C51; -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; } a { color: #212121; text-decoration: none; } /* index */ .section { display: grid; align-content: start; } .section-more { display: grid; grid-template-columns: auto 34px; align-content: start; } .section-more .section-body { grid-column: 1/span 2; } .section-more a.section-more { opacity: 0.25; } hr.section-bar { display: block; height: 6px; background-color: #E0E4F0; border: none; margin: 8px 0; opacity: 1; } /* stock colors */ .price-rate, .company-count span { color: #6C7285 !important; } .price-rate.neutral, .company-count span.neutral { color: #6C7285 !important; } .price-rate.positive, .company-count span.positive { color: #e61e09 !important; } .price-rate.positive strong:before, .company-count span.positive strong:before { content: ""; display: inline-block; width: 0px; height: 0px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid #e61e09; margin: 0 3px 1px 0; } .price-rate.negative, .company-count span.negative { color: #183476 !important; } .price-rate.negative strong:before, .company-count span.negative strong:before { content: ""; display: inline-block; width: 0px; height: 0px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 9px solid #183476; margin: 0 3px 1px 0; } .table-up-list .price-rate.negative strong:before, .table-up-list .company-count span.negative strong:before { border-color: #6C7285 !important; } .company-count span strong:before, .company-count span.neutral strong:before { content: ""; display: inline-block; width: 5px; height: 5px; background: #6C7285; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; border-radius: 20px; -o-border-radius: 20px; margin: 0 3px 1px 0; } .neutral { color: #6C7285 !important; } .positive, .increase { color: #e61e09 !important; } .negative, .decrease { color: #183476 !important; } .rate, .price-rate, .company-rate { color: #6C7285; } .rate.neutral, .price-rate.neutral, .company-rate.neutral { color: #6C7285 !important; } .rate.positive, .price-rate.positive, .company-rate.positive { color: #e61e09 !important; } .rate.negative, .price-rate.negative, .company-rate.negative { color: #183476 !important; } .table-up-list .rate.negative, .table-up-list .price-rate.negative, .table-up-list .company-rate.negative { color: #6C7285 !important; } /* btn */ .btn.btn-primary { background-color: #F81C51; border-color: #F81C51; } .btn.btn-primary:hover { background-color: inherit; border-color: inherit; filter: brightness(90%); -webkit-filter: brightness(90%); } .btn.btn-primary:active { background-color: #F81C51; border-color: #F81C51; } .btn.btn-load { background-color: #E0E4F0; border-color: #E0E4F0; color: #6C7285; font-size: 14px; } .btn.btn-load i.material-icons { transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); color: #B4B9CD; opacity: 0.5; vertical-align: middle; font-size: 14px; margin-left: 4px; } .depth2 .btn-back { position: fixed; top: 0; z-index: 1020; background: #a41a08; border: 1px solid #a41a08; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; -o-border-radius: 0; height: 51px; width: 44px; } .depth2 .btn-back i.material-icons { margin-left: 2px; } .depth2 .btn-back:hover { background: #a41a08; } .depth2 .btn-back:focus { outline: none; } /* layout */ div#main.sub { padding: 40px 24px; } div#main.sub .col-3 { margin-left: 16px; width: calc(25% - 20px); } /* tabs */ .nav.nav-tabs { border-bottom: 1px solid #E0E4F0; } .nav.nav-tabs a { color: #6C7285; } .nav.nav-tabs a.nav-link { margin-bottom: -1px; border: none; color: #6C7285; font-weight: bold; -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 { border-bottom: 2px solid #F81C51; color: #F81C51; } .nav.nav-tabs#lnb { flex-wrap: nowrap; } .nav.nav-tabs#lnb.nav-fill { background: #F7F7FA; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; border-radius: 100px; -o-border-radius: 100px; border: none; padding: 4px; -moz-transition: all, 0.3s; -o-transition: all, 0.3s; -webkit-transition: all, 0.3s; transition: all, 0.3s; } .nav.nav-tabs#lnb.nav-fill .active { background: #6E7785; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; border-radius: 100px; -o-border-radius: 100px; border: none; color: #FCFCFC; } .nav.nav-tabs#lnb.nav-fill .active, .nav.nav-tabs#lnb.nav-fill :active, .nav.nav-tabs#lnb.nav-fill :focus, .nav.nav-tabs#lnb.nav-fill :hover { border: none; -moz-transition: all, 0.3s; -o-transition: all, 0.3s; -webkit-transition: all, 0.3s; transition: all, 0.3s; } /* titles */ h3.section-title { font-size: 18px; font-weight: 900; color: #212121; margin-bottom: 8px; } .condition h3 { color: #192971; font-size: 14px; font-weight: bold; } .condition h3 small { color: #6C7285; font-size: 12px; font-weight: normal; } h2.local-title { font-size: 24px; font-weight: 900; color: #212121; margin-bottom: 30px; } .bg-light { background-color: #F0F2F9 !important; } .bg-medium { background-color: #E0E4F0; } .bg-dark { background-color: #868DA4; } .sr-only { font-size: 0 !important; color: transparent !important; height: 0; width: 0; } /* INDEX */ #main.main .container.group-a .row { margin-top: 24px; margin-bottom: 24px; } #main.main .container.group-b .row { margin: 24px 14px; } #main.main .container.group-c .row { margin: 24px 14px 46px; } #recom { background: #ECEFF5; } #recom .section-body { overflow-x: scroll; padding-bottom: 4px; } @media screen and (min-width: 0\0 ) { #recom .section-body { scrollbar-face-color: #E0E4F0; scrollbar-track-color: #E9ECF6; scrollbar-arrow-color: #E9ECF6; scrollbar-shadow-color: transparent; scrollbar-3dlight-color: #E9ECF6; scrollbar-highlight-color: #E9ECF6; scrollbar-darkshadow-color: #E9ECF6; } } #recom .section-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; } #recom .section-body::-webkit-scrollbar-thumb { background-color: #E0E4F0; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px; -o-border-radius: 6px; } #recom .section-body::-webkit-scrollbar-track { background-color: transparent; } #recom ul { flex-wrap: nowrap; } #recom ul li.item { margin: 0 16px; } #recom ul li.item a { display: block; width: 130px; } #recom ul li.item .logo { -webkit-border-radius: 93px; -moz-border-radius: 93px; -ms-border-radius: 93px; border-radius: 93px; -o-border-radius: 93px; overflow: clip; border: 1px solid #E9ECF6; width: 93px; height: 93px; margin: 8px auto 0; background: white; display: flex; } #recom ul li.item .logo img { width: 80%; height: 80%; display: block; margin: auto; } #recom ul li.item .badge { display: block; width: 48px; margin: -8px auto 24px; } #recom ul li.item .text { min-width: 118px; font-size: 14px; letter-spacing: -0.03em; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #recom ul li.item .price { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #E0E4F0; padding: 8px 0; margin-top: 8px; } #recom ul li.item .price div:first-of-type { color: #6C7285; font-size: 11px; } #recom ul li.item .price div:last-of-type { color: #212121; font-size: 14px; } #recom ul li.item .price div:last-of-type strong { font-size: 16px; } #recom ul li.item .price div:last-of-type .price-hidden { display: inline-block; margin-right: 4px; } #recom ul li.item .price div:last-of-type img { max-width: 100%; max-height: 20px; display: inline-block; } #hit { background: #F7F7FA; margin-top: 10px; padding-top: 6px; margin-right: 24px; width: 36%; -webkit-border-radius: 12px; -moz-border-radius: 12px; -ms-border-radius: 12px; border-radius: 12px; -o-border-radius: 12px; } #hit .section-body { padding-top: 16px; } #hit ul { margin: 0 16px 0; padding: 0; display: Flex; flex-direction: column; align-items: flex-start; } #hit ul li.item { margin-bottom: 16px; } #hit ul li.item:last-of-type { margin-bottom: 0; } #hit ul li.item a { display: flex; justify-content: space-between; align-items: center; } #hit ul li.item a .badge { display: block; width: 48px; grid-column: 1; grid-row: 1; font-size: 12px; margin-bottom: 4px; } #hit ul li.item a .logo { margin-right: 8px; } #hit ul li.item a .company { font-size: 14px; font-weight: bold; letter-spacing: -0.03em; grid-column: 1; grid-row: 2; align-self: center; overflow: hidden; text-overflow: ellipsis; margin-right: auto; min-width: 100px; } #hit ul li.item a .rate { font-size: 16px; text-align: right; margin-left: auto; } #hit ul li.item a .date { font-size: 12px; color: #6E7785; margin-left: 8px; } #hit .badge { font-size: 10px; vertical-align: middle; } #port { margin-left: 24px; margin-right: 24px; width: 55%; } #port .section-body { display: flex; flex-wrap: wrap; border-top: 1px solid #ECEFF5; margin-top: 8px; } #port .section-body .port1 { width: calc(50% - 18px); margin-right: 36px; } #port .section-body .port1-list { padding: 0; width: calc(50% - 18px); order: 3; margin-right: 36px; } #port .section-body .port2 { width: calc(50% - 18px); order: 2; } #port .section-body .port2-list { padding: 0; width: calc(50% - 18px); order: 4; } #port .section-body .port1 a, #port .section-body .port2 a { display: flex; flex-direction: column; align-items: center; background: white; text-align: center; padding-top: 20px; padding-bottom: 20px; border: 5px solid transparent; position: relative; } #port .section-body .port1 a.active, #port .section-body .port1 a:active, #port .section-body .port2 a.active, #port .section-body .port2 a:active { border: 5px solid #F81C51; } #port .section-body .port1 a.active:after, #port .section-body .port1 a:active:after, #port .section-body .port2 a.active:after, #port .section-body .port2 a:active:after { content: ""; display: inline-block; width: 0px; height: 0px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 16px solid #F81C51; position: absolute; bottom: -21px; } #port .section-body .port1 a .label, #port .section-body .port2 a .label { font-size: 12px; color: #6C7285; } #port .section-body .port1 a .rate, #port .section-body .port2 a .rate { font-size: 30px; } #port .section-body .port1 a .title, #port .section-body .port2 a .title { font-size: 15px; font-weight: bold; } #port .section-body .port1 a .title:after, #port .section-body .port2 a .title:after { content: ""; display: inline-block; width: 4px; height: 4px; border-width: 1px 1px 0 0; border-color: #B4B9CD; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } #port .section-body .port1 a .date, #port .section-body .port2 a .date { font-size: 12px; color: #6C7285; } #port .section-body .port1-list li a, #port .section-body .port2-list li a { display: flex; align-content: center; justify-content: space-between; border-bottom: 1px solid #E9ECF6; font-size: 14px; padding-top: 4px; padding-bottom: 8px; margin-bottom: 8px; white-space: nowrap; } #port .section-body .port1-list li a strong, #port .section-body .port2-list li a strong { font-weight: normal; display: block; margin-right: auto; white-space: nowrap; } #port .section-body .port1-list li a span.num, #port .section-body .port2-list li a span.num { font-size: 13px; color: #6C7285; align-self: center; width: 24px; white-space: nowrap; } #port .section-body .port1-list li a span.rate, #port .section-body .port2-list li a span.rate { text-align: right; align-self: center; margin-left: auto; white-space: nowrap; } #port .section-body .port1-list li a span.rate strong, #port .section-body .port2-list li a span.rate strong { display: inline-block; margin: unset; } #port .section-body .port1-list li:last-of-type a, #port .section-body .port2-list li:last-of-type a { border-bottom: 0; } #mvp { margin-right: 24px; width: 36%; } #mvp .section-body { border-top: 1px solid #ECEFF5; margin-top: 8px; padding-top: 8px; overflow: hidden; } #mvp ol { margin-bottom: 24px; } #mvp ol li.item { position: relative; width: calc(50% - 8px); margin-bottom: 16px; margin-right: 16px; } #mvp ol li.item:nth-child(even) { margin-right: 0; } #mvp ol li.item:nth-child(5), #mvp ol li.item:nth-child(6) { margin-bottom: 0; } #mvp ol li.item .num { background: #F81C51; color: #FCFCFC; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 10px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; border-radius: 50px; -o-border-radius: 50px; position: absolute; left: 2px; top: 6px; } #mvp ol li.item a { display: flex; gap: 12px; align-items: center; } #mvp ol li.item .logo { -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; -o-border-radius: 8px; overflow: clip; border: 1px solid #E9ECF6; width: 60px; height: 60px; margin: 0; background: white; display: flex; } #mvp ol li.item .logo img { width: 80%; height: 80%; display: block; margin: auto; } #mvp ol li.item .text { line-height: 1.4; margin-left: 8px; } #mvp ol li.item .company { margin-top: 8px; text-align: left; font-size: 14px; color: #6C7285; white-space: nowrap; } #mvp ol li.item .mvp { text-align: left; font-size: 20px; white-space: nowrap; } #mvp ol li.item .mvp strong { font-size: 27px; font-weight: Bold; } .row.bg-dark { background: #ECEFF5 !important; } #port-condition { margin-left: 24px; margin-right: 24px; width: 55%; } #port-condition .section-body { border-top: 1px solid #ECEFF5; margin-top: 8px; padding-top: 8px; } #port-condition ul { margin: 8px 0 0; padding: 0; } #port-condition .item { width: calc(50% - 16px); margin-bottom: 34px; } #port-condition .item:nth-child(3), #port-condition .item:nth-child(4) { margin-bottom: 0; } #port-condition .item a { display: block; position: relative; } #port-condition .logo { position: absolute; left: 8px; top: 0; } #port-condition .badge { position: absolute; left: 0; top: 55px; width: auto; color: white !important; font-weight: normal !important; } #port-condition .badge.bg-dark.positive { background-color: #e61e09 !important; } #port-condition .badge.bg-dark.negatice { background-color: #183476 !important; } #port-condition .date { position: absolute; left: 5px; top: 78px; } #port-condition .company { font-size: 16px; font-weight: bold; margin-left: 75px; margin-bottom: 8px; padding-top: 6px; } #port-condition .info { font-size: 12px; margin-left: 75px; } #port-condition .info > div > span { display: inline-block; } #port-condition .info > div > span:first-of-type { color: #6E7785; width: 40px; } #port-condition .date { color: #6E7785; font-size: 12px; } #news { margin-left: 24px; margin-right: 24px; width: 55%; } #news .section-body { border-top: 1px solid #ECEFF5; margin-top: 8px; padding-top: 8px; } #news ul { margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; } #news ul li { margin-bottom: 12px; } #news ul li:last-of-type { margin-bottom: 0; } #news ul li a { display: flex; justify-content: space-between; } #news ul li .tit { overflow: hidden; text-overflow: ellipsis; font-size: 14px; position: relative; white-space: nowrap; max-width: 360px; } #news ul li .tit:before { content: ""; width: 3px; height: 3px; background: #212121; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -o-border-radius: 50%; display: inline-block; margin: 0 8px 4px 0; } #news ul li .date { margin-left: auto; text-align: right; color: #6E7785; font-size: 12px; white-space: nowrap; } #banner { margin-right: 24px; width: 36%; margin-top: 16px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; -o-border-radius: 8px; } #banner .automatic-slider { -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; -o-border-radius: 8px; height: 100%; } #banner .automatic-slider .bx-wrapper, #banner .automatic-slider .bx-viewport, #banner .automatic-slider .bxslider { height: 100%; } #banner li { height: 100%; } #banner li a { height: 100%; } #banner li a img { width: 100%; height: 100%; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; -o-border-radius: 8px; } #theme { background: white; margin: 32px 18px 32px 42px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; -o-border-radius: 10px; padding: 28px 24px; display: grid; grid-template-columns: auto 20px; } #theme a.section-more { opacity: 0.25; } #theme .section-body { margin-top: 8px; padding-top: 20px; border-top: 1px solid #E9ECF6; } #theme .section-body ul { margin: 0; padding: 0; } #theme li.item a { display: flex; align-items: center; font-size: 12px; margin-bottom: 8px; align-items: start; } #theme li.item .text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 40%; font-size: 14px; } #theme li.item .num { background: #E9ECF6; color: #B4B9CD; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 10px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; border-radius: 50px; -o-border-radius: 50px; margin-right: 8px; } #theme li.item .rate { margin-left: auto; margin-right: 8px; } #theme li.item .company { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 90px; } #theme li.item:first-of-type { margin-bottom: 16px; } #theme li.item:first-of-type .num { background-color: #F81C51; color: #FCFCFC; font-size: 12px; width: 22px; height: 22px; } #theme li.item:first-of-type .text { font-weight: bold; font-size: 16px; line-height: 1.2; padding-top: 3px; } #theme li.item:first-of-type .rate { font-size: 16px; } #theme li.item:first-of-type .company { font-weight: bold; font-size: 14px; color: #6C7285; padding-top: 1px; } #uplist { background: white; margin: 32px 42px 32px 18px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; -o-border-radius: 10px; padding: 28px 24px; } #uplist .section-body { margin-top: 8px; padding-top: 20px; border-top: 1px solid #E9ECF6; } #uplist .section-body ul { margin: 0; padding: 0; display: flex; flex-wrap: wrap; } #uplist .section-body li.item { width: 50%; display: flex; margin-bottom: 8px; } #uplist .section-body li.item:nth-child(5), #uplist .section-body li.item:nth-child(6) { margin-bottom: 0; } #uplist .section-body a { display: flex; flex-wrap: wrap; align-items: center; } #uplist .section-body .logo { margin-right: 8px; } #uplist .section-body .num { color: #6E7785; font-size: 14px; display: none; } #uplist .section-body .company { font-weight: bold; font-size: 14px; margin-top: -4px; } #uplist .section-body .info { width: 100%; display: flex; flex-wrap: wrap; align-items: center; padding-left: 34px; margin-top: -4px; } #uplist .section-body .price { font-size: 14px; margin-right: 4px; } #uplist .section-body .price strong { font-weight: normal; } #uplist .section-body .rate { font-size: 12px; } #uplist .section-body .rate strong { font-weight: normal; } /* ------------- tables */ table.table { width: 100%; } table.table thead th, table.table thead td { background: #F0F2F9 !important; color: #192971; white-space: nowrap; } table.table thead th span.num, table.table thead td span.num { width: 24px; margin-left: -4px; margin-right: 6px; } table.table tbody th, table.table tbody td { border-bottom: 1px solid #E9ECF6; white-space: nowrap; } table.table tbody th span.num, table.table tbody td span.num { width: 24px; margin-left: -4px; margin-right: 6px; } /* 포트폴리오 테이블 */ @media (max-width: 320px) { table.port-sub-1 { font-size: 13px; } } table.port-sub-1 th, table.port-sub-1 td { padding-left: 4px; padding-right: 4px; } table.port-sub-1 span.num { display: inline-block; background-color: #E9ECF6; color: #6C7285; font-size: 10px; width: 18px !important; height: 18px !important; text-align: center; vertical-align: middle; line-height: 1.9; margin-left: 4px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -o-border-radius: 50%; } table.port-sub-1 thead th { background-color: #F0F2F9 !important; border-bottom: none; } table.port-sub-1 thead th span.num { color: transparent; } table.port-sub-1 tbody tr:not(.cash) th strong { overflow: hidden; text-overflow: ellipsis; width: 90px; display: inline-block; vertical-align: middle; } table.port-sub-1 tbody tr.cash th, table.port-sub-1 tbody tr.cash td { background-color: #F0F2F9 !important; } table.port-sub-1 tbody tr.cash span.num { background-color: #F81C51; color: #FCFCFC; } table.table-mvp-list { margin-top: 40px; margin-left: 1rem; margin-right: 1rem; width: calc(100% - 2rem); } table.table-mvp-list span.num { display: inline-block; background-color: #E9ECF6; color: #6C7285; font-size: 10px; width: 18px !important; height: 18px !important; text-align: center; vertical-align: middle; line-height: 1.9; margin-left: 4px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -o-border-radius: 50%; } table.table-mvp-list thead th { background-color: #F0F2F9 !important; border-bottom: none; } table.table-mvp-list thead th span.num { color: transparent; } table.table-mvp-list tbody tr.cash th, table.table-mvp-list tbody tr.cash td { background-color: #F0F2F9 !important; } table.table-mvp-list tbody tr.cash span.num { background-color: #F81C51; color: #FCFCFC; } /* 테마 */ table.table-up-list { margin-left: 1rem; margin-right: 1rem; margin-top: 16px; width: calc(100% - 2rem); } table.table-up-list span.num { display: inline-block; background-color: #E9ECF6; color: #6C7285; font-size: 10px; width: 18px !important; height: 18px !important; text-align: center; vertical-align: middle; line-height: 1.9; margin-left: 4px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -o-border-radius: 50%; } table.table-up-list thead th { background-color: #F0F2F9 !important; border-bottom: none; } table.table-up-list thead th span.num { color: transparent; } table.table-up-list tbody tr.cash th, table.table-up-list tbody tr.cash td { background-color: #F0F2F9 !important; } table.table-up-list tbody tr.cash span.num { background-color: #F81C51; color: #FCFCFC; } /* // ------------- tables */ .paging { margin: 40px auto; } .paging > div { display: flex; justify-content: center; margin: 0 auto; align-items: center; gap: 16px; width: 100% !important; } .paging > div p { margin: 0; } .paging ul { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; align-items: center; font-size: 15px; } .paging ul li { margin: 0 8px; } .paging ul li[aria-label*=pagination] { display: block; max-width: 26px; border-radius: 4px; background: none; border: 1px solid #ECEFF5; -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: #ECEFF5; font-weight: light; } .paging ul li a { color: #A3AEBE; display: block; padding: 0 4px; } .paging ul li a:visited { color: #A3AEBE; } .paging ul li a:hover { color: #212121; } .paging ul li a[aria-label*=pagination] { display: block; max-width: 26px; border-radius: 4px; background: #ECEFF5; -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: #F81C51; font-weight: light; } .paging ul li a.focus { color: #F81C51; font-weight: bold; padding: 0 6px; } .paging ul li.active { color: #F81C51; font-weight: bold; padding: 0 6px; } .paging ul li.disabled { color: #A3AEBE; } .recom.list ul { gap: 24px; justify-content: space-between; } .recom.list ul li.item { margin: 0; width: 21%; } .recom.list ul li.item .logo { -webkit-border-radius: 93px; -moz-border-radius: 93px; -ms-border-radius: 93px; border-radius: 93px; -o-border-radius: 93px; overflow: clip; border: 1px solid #E9ECF6; width: 93px; height: 93px; margin: 8px auto 0; background: white; display: flex; } .recom.list ul li.item .logo img { width: 80%; height: 80%; display: block; margin: auto; } .recom.list ul li.item .badge { display: block; width: 48px; margin: -8px auto 24px; } .recom.list ul li.item .text { min-width: 118px; font-size: 14px; letter-spacing: -0.03em; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .recom.list ul li.item .price { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #E0E4F0; padding: 8px 0; margin-top: 8px; white-space: nowrap; } .recom.list ul li.item .price div:first-of-type { color: #6C7285; font-size: 11px; } .recom.list ul li.item .price div:last-of-type { color: #212121; font-size: 14px; } .recom.list ul li.item .price div:last-of-type strong { font-size: 16px; } .recom.list ul li.item .price div:last-of-type .price-hidden { display: inline-block; margin-right: 4px; } .recom.list ul li.item .price div:last-of-type img { max-width: 100%; max-height: 20px; display: inline-block; } .hit.list { background: #F7F7FA; padding: 24px 18px; height: 100%; } .hit.list h4 { font-size: 16px; margin-bottom: 22px; } .hit.list .badge { font-weight: normal; padding-bottom: 3px; } .hit.list ul { display: flex; flex-direction: column; gap: 16px; } .hit.list ul li { margin-bottom: 16px; } .hit.list ul li:last-of-type { margin-bottom: 0; } .hit.list ul li a { display: flex; flex-wrap: wrap; align-items: center; } .hit.list ul li a .logo { margin-right: 8px; } .hit.list ul li a .company { font-size: 14px; } .hit.list ul li a .yield { display: flex; gap: 0 8px; justify-content: flex-end; align-items: center; width: 100%; } .hit.list ul li a .yield .title { font-size: 12px; color: #6E7785; margin-right: 8px; } .algorithm { margin-top: 40px; letter-spacing: -0.03rem; } .algorithm .row { margin-left: 0; margin-right: 0; align-items: stretch; flex-wrap: nowrap; } .algorithm .item { border: 1px solid #ECEFF5; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; -o-border-radius: 8px; padding: 16px; position: relative; margin-right: 22px; width: auto; } .algorithm .item:after { position: absolute; right: -17px; top: 15px; content: ""; display: block; width: 12px; height: 20px; background: url('data:image/svg+xml,') no-repeat center/10px; } .algorithm .item .sub { white-space: nowrap; width: 126px; } .algorithm .item.alone h4 { border: none !important; } .algorithm .item.result { text-align: center; align-content: center; background: #FFEEEF !important; margin-right: 0; } .algorithm .item.result:after { display: none; } .algorithm .item.result h4 { border: none !important; font-size: 18px; color: #e61e09; } .algorithm .item.col { flex: auto; } .algorithm h3 { border-bottom: 1px solid #A3AEBE; padding-bottom: 8px; margin-bottom: 30px; font-size: 16px; color: #535A6F; } .algorithm h4 { border-bottom: 1px solid #C6CCD5; font-size: 16px; font-weight: bold; text-align: center; padding-bottom: 8px; margin-bottom: 16px; white-space: nowrap; } .algorithm p { font-size: 14px; font-weight: bold; color: #7E8597; line-height: 1.4; text-align: center; } .algorithm ul, .algorithm li { margin: 0; padding: 0; color: #7E8597; font-size: 12px; word-break: keep-all; overflow-wrap: break-word; } .algorithm li { position: relative; } .algorithm li:before { content: ""; display: inline-block; background: #A3AEBE; width: 3px; height: 3px; margin: 0 6px 4px 0; } .sub.recom .algorithm .item { width: 20% !important; } .sub.recom .algorithm .item:nth-child(2) { width: 40% !important; } .sub.invgood .algorithm .item { width: auto !important; } .sub.invgood .algorithm .item:nth-child(4) { width: 16%; } .sub.invgood .algorithm .item.alone { width: 20% !important; } .sub.invgood .algorithm .item.result { padding-left: 22px; padding-right: 22px; } .port-head { background: #F7F7FA; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; -o-border-radius: 8px; padding: 24px 36px 36px; margin-bottom: 30px; } .port-head #lnb.nav-fill { background: #ffffff !important; width: 58%; margin: 0 auto 26px; } .port-head .port-list { display: flex; } .port-head .port-item { border: 5px solid transparent; background: #ffffff; width: 50%; position: relative; } .port-head .port-item.active { border: 5px solid #e61e09; } .port-head .port-item a { display: block; padding: 24px; } .port-head .port-item a:hover { color: #212121; } .port-head .port-item .name { font-weight: bold; font-size: 16px; margin-bottom: 8px; } .port-head .port-item .yield .title { font-size: 12px; color: #6E7785; margin-bottom: 4px; } .port-head .port-item .yield .number { font-size: 36px; color: #e61e09; line-height: 1; } .port-head .port-item .graph { position: Absolute; right: 22px; top: 30px; border-left: 1px solid #C6CCD5; padding-left: 40px; } .port-head .port-item .graph p { color: #192971; font-size: 12px; font-weight: bold; } .port-head .port-item .date { color: #6E7785; font-size: 12px; margin-top: 8px; } .port-condition { position: relative; margin-bottom: 30px; overflow-x: auto; } .port-condition .condition { position: relative; } .port-condition .condition h3 { font-size: 14px; font-weight: bold; margin-bottom: 6px; } .port-condition .condition .btn_wrap { position: absolute; display: flex; top: -6px; left: 128px; gap: 6px; } .port-condition .condition.type02 ul { margin: 8px 0 0; padding: 10px 0; display: flex; flex-wrap: nowrap; overflow-x: auto; } .port-condition .condition.type02 ul::-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; } .port-condition .condition.type02 ul::-webkit-scrollbar-thumb { background-color: #E0E4F0; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px; -o-border-radius: 6px; } .port-condition .condition.type02 ul::-webkit-scrollbar-track { background-color: transparent; } .port-condition .condition.type02 li.item { margin-right: 12px; } .port-condition .condition.type02 li.item a { display: block; position: relative; overflow: hidden; } .port-condition .condition.type02 .logo { position: absolute; left: 8px; top: 0; } .port-condition .condition.type02 .badge { position: absolute; left: 0; top: 55px; width: auto; color: white !important; font-weight: normal !important; } .port-condition .condition.type02 .badge.bg-dark.positive { background-color: #e61e09 !important; } .port-condition .condition.type02 .badge.bg-dark.negatice { background-color: #183476 !important; } .port-condition .condition.type02 .date { position: absolute; left: 5px; top: 78px; } .port-condition .condition.type02 .company { font-size: 16px; font-weight: bold; margin-left: 75px; margin-bottom: 8px; padding-top: 6px; overflow: hidden; text-overflow: ellipsis; } .port-condition .condition.type02 .info { font-size: 12px; margin-left: 75px; } .port-condition .condition.type02 .info > div > span { display: inline-block; } .port-condition .condition.type02 .info > div > span:first-of-type { color: #6E7785; width: 40px; } .port-condition .condition.type02 .info .price { overflow: hidden; text-overflow: ellipsis; } .port-condition .condition.type02 .date { color: #6E7785; font-size: 12px; } .port-condition .condition.type01 ul { margin: 8px 0 0; padding: 10px 0; display: flex; flex-wrap: nowrap; overflow-x: auto; } .port-condition .condition.type01 ul::-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; } .port-condition .condition.type01 ul::-webkit-scrollbar-thumb { background-color: #E0E4F0; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px; -o-border-radius: 6px; } .port-condition .condition.type01 ul::-webkit-scrollbar-track { background-color: transparent; } .port-condition .condition.type01 .btn_wrap { left: 140px; } .port-condition .condition.type01 li.item { margin-right: 12px; } .port-condition .condition.type01 li.item a { padding: 16px 0; display: inline-block; } .port-condition .condition.type01 li.item .logo { float: left; padding: 2px; } .port-condition .condition.type01 li.item .company { margin-left: 56px; font-size: 15px; } .port-condition .condition.type01 li.item .date { margin-left: 56px; font-size: 12px; color: #6E7785; } .port-condition .condition.type01 .schedule { position: absolute; right: 0; top: 2px; font-size: 14px; color: #6E7785; } .port-condition .condition * { white-space: nowrap; } .port-condition .trade-list { border-top: 1px solid #ECEFF5; margin-top: 8px; } .port-group { display: grid; grid-template-columns: 50% 50%; background: #F0F2F9 !important; padding-top: 16px; } .port-group [class*=port] { margin-bottom: 16px; } .port-group [class*=port] a { display: flex; flex-direction: column; align-items: center; background: white; text-align: center; padding-top: 20px; padding-bottom: 20px; border: 5px solid transparent; position: relative; } .port-group [class*=port] a.active, .port-group [class*=port] a:active { border: 5px solid #F81C51; } .port-group [class*=port] a.active:after, .port-group [class*=port] a:active:after { content: ""; display: inline-block; width: 0px; height: 0px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 16px solid #F81C51; position: absolute; bottom: -21px; } .port-group [class*=port] a .label { font-size: 12px; color: #6C7285; } .port-group [class*=port] a .rate { font-size: 30px; } .port-group [class*=port] a .title { font-size: 15px; font-weight: bold; } .port-group [class*=port] a .title:after { content: ""; display: inline-block; width: 4px; height: 4px; border-width: 1px 1px 0 0; border-color: #B4B9CD; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } .port-group [class*=port] a .date { font-size: 12px; color: #6C7285; } .port-group .condition { grid-column: 1/span 2; } .port-group .condition ul.trade-list { overflow-x: scroll; flex-wrap: nowrap; } .port-group .condition ul.trade-list::-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; } .port-group .condition ul.trade-list::-webkit-scrollbar-thumb { background-color: #E0E4F0; } .port-group .condition ul.trade-list::-webkit-scrollbar-track { background-color: transparent; } .port-group .condition ul.trade-list li { margin-left: 16px; margin-right: 16px; } .port-group .condition ul.trade-list li a { display: grid; grid-column-gap: 16px; grid-row-gap: 8px; grid-template-columns: 58px max-content; } .port-group .condition ul.trade-list li a .logo { grid-column: 1; grid-row: 1/span 2; -webkit-border-radius: 46px; -moz-border-radius: 46px; -ms-border-radius: 46px; border-radius: 46px; -o-border-radius: 46px; overflow: clip; border: 1px solid #E9ECF6; width: 48px; height: 48px; margin: 8px auto 0; background: white; display: flex; } .port-group .condition ul.trade-list li a .logo img { width: 80%; height: 80%; display: block; margin: auto; } .port-group .condition ul.trade-list li a .badge { width: auto; } .port-group .condition ul.trade-list li a .signal { grid-column: 1; grid-row: 3; font-weight: normal; } .port-group .condition ul.trade-list li a .signal.bg-dark.positive { background-color: #e61e09 !important; color: #FCFCFC !important; } .port-group .condition ul.trade-list li a .signal.bg-dark.negative { background-color: #183476 !important; color: #FCFCFC !important; } .port-group .condition ul.trade-list li a .company { grid-column: 2; grid-row: 1; font-size: 16px; } .port-group .condition ul.trade-list li a .info { grid-column: 2; grid-row: 2/span 2; white-space: nowrap; font-size: 12px; } .port-group .condition ul.trade-list li a .info div span { display: inline-block; } .port-group .condition ul.trade-list li a .info div span:nth-child(1) { color: #6C7285; } .port-group .condition ul.trade-list li a .info div span:nth-child(2) { font-weight: bold; } .port-group .condition ul.trade-list li a .info .rate .negative { color: #6C7285 !important; } .port-group .condition ul.condition-list { margin: 0; padding: 0; } .port-group .condition ul.condition-list li a { display: flex; justify-content: space-between; align-items: center; padding-top: 2px; padding-bottom: 2px; } .port-group .condition ul.condition-list li strong { font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; } .port-group .condition ul.condition-list li span.date { text-align: right; font-size: 10px; color: #6C7285; } .port-detail { margin-bottom: 40px; display: block !important; } .port-detail:after { content: ""; display: block; float: none; clear: both; } .port-detail h4 { font-size: 14px; font-weight: bold; color: #6E7785; padding-bottom: 8px; border-bottom: 1px solid #E0E4F0; margin-bottom: 0; } .port-detail h4 small { display: inline-block; font-weight: normal; font-size: 12px; margin-left: 16px; } .port-detail .table { width: calc(100% - 290px); float: left; } .port-detail .table table { width: 100%; } .port-detail .table table thead th { background: #F7F7FA; color: #192971; padding: 4px 0; font-size: 14px; border: none; } .port-detail .table table tbody th, .port-detail .table table tbody td { border-bottom: 1px solid #E9ECF6; border-top: none; font-size: 14px; padding: 5px 2px; } .port-detail .table table tbody tr:first-of-type th, .port-detail .table table tbody tr:first-of-type td { border-top: 1px solid transparent !important; } .port-detail .table table tbody td { color: #6E7785; padding-right: 8px; } .port-detail .table table tbody td strong { color: #212121; font-weight: normal; display: inline-block; margin-right: 1px; } .port-detail .table table tbody td .num { color: #6E7785; font-size: 10px; text-align: center; padding: 5px 2px !important; } .port-detail .table table tbody .increase, .port-detail .table table tbody .positive { color: #e61e09 !important; } .port-detail .table table tbody .increase strong, .port-detail .table table tbody .positive strong { color: #e61e09 !important; font-weight: bold; } .port-detail .table table tbody .decrease, .port-detail .table table tbody .negative { color: #183476 !important; } .port-detail .table table tbody .decrease strong, .port-detail .table table tbody .negative strong { color: #183476 !important; font-weight: bold; } .port-detail .yield { width: 258px; float: right; margin-bottom: 24px; } .port-detail .yield .total-return { background: #F7F7FA; display: flex; justify-content: center; align-items: center; padding: 14px 12px; margin-bottom: 24px; } .port-detail .yield .total-return .title { color: #6E7785; font-weight: bold; font-size: 14px; white-space: nowrap; margin-right: 12px; } .port-detail .yield .total-return .yield { font-weight: bold; font-size: 20px; white-space: nowrap; width: auto; float: none; margin: 0; } .port-detail .yield .rect { display: flex; align-items: center; flex-direction: row-reverse; gap: 12px; } .port-detail .yield .rect .sub_title { font-size: 14px; width: 90px; word-break: keep-all; color: #6E7785; font-size: 12px; white-space: nowrap; } .port-detail .yield .rect .text { text-align: right; font-weight: bold; font-size: 16px; width: 70px; display: block; } .port-detail .yield .rect .text .place { display: none; } .port-detail .yield .rect .value { width: 50%; position: relative; height: 40px; overflow: hidden; } .port-detail .yield .rect .value::before { content: ""; display: inline-block; width: 1px; height: 100%; background: #A3AEBE; position: absolute; left: 50%; } .port-detail .yield .rect .value .blue_font { color: #e61e09; } .port-detail .yield .rect .value .red_font { color: #183476; } .port-detail .yield .rect .value .graph { height: 18px; width: 50%; position: relative; left: 50%; } .port-detail .yield .rect .value .graph .bar { height: 100%; position: absolute; top: 9px; } .port-detail .yield .rect.increase .bar { background-color: #e61e09; } .port-detail .yield .rect.decrease .bar { background-color: #183476; } .port-detail .yield table { width: 80%; margin: 0 auto; } .port-detail .yield table th, .port-detail .yield table td { padding: 8px 4px; border-bottom: 1px solid #C6CCD5; } .port-detail .yield table td { text-align: right; } .port-detail .rules { width: 258px; float: right; } .port-detail .rules .group { background: #F7F7FA; padding: 18px 18px 30px; } .port-detail .rules .slogan { font-size: 14px; font-weight: bold; color: #F81C51; margin-bottom: 8px; } .port-detail .rules h5 { font-size: 14px; font-weight: bold; color: #192971; margin-top: 34px; } .port-detail .rules ul { margin: 0 0 0 8px; padding: 0; font-size: 13px; display: flex; flex-direction: column; gap: 6px; } .port-detail .rules ul li { text-indent: -7px; margin-left: 7px; line-height: 1.4; } .port-detail .rules ul li:before { content: ""; width: 3px; height: 3px; margin: 0 4px 4px 0; display: inline-block; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; -o-border-radius: 3px; background: #6E7785; } .appointment { margin: 24px auto; background: #FFEBF0; text-align: center; } /* 포트폴리오 탭 2, 3 */ .tab-content > .tab-pane { min-height: 200px; padding: 1rem; } @media (max-width: 320px) { .tab-content > .tab-pane { padding: 8px; } } .tab-content > .tab-pane#rate .wrap { display: flex; gap: 16px; } .tab-content > .tab-pane#rate .wrap .port-intro { background-color: #F0F2F9 !important; width: 40%; padding: 16px 0; text-align: center; } .tab-content > .tab-pane#rate .wrap .port-intro .title { color: #F81C51; font-size: 15px; font-weight: bold; } .tab-content > .tab-pane#rate .wrap .port-intro .date { color: #6C7285; font-size: 10px; margin-bottom: 16px; } .tab-content > .tab-pane#rate .wrap .port-intro .target p { color: #192971; font-weight: bold; font-size: 12px; margin-top: 12px; } .tab-content > .tab-pane#rate .wrap table.port-sub-2 { width: 56%; margin-bottom: 0; } .tab-content > .tab-pane#rate .wrap table.port-sub-2 th, .tab-content > .tab-pane#rate .wrap table.port-sub-2 td { font-size: 12px; } .tab-content > .tab-pane#policy { word-break: keep-all; } .tab-content > .tab-pane#policy h4 { margin: 32px auto; font-size: 18px; color: #F81C51; } .tab-content > .tab-pane#policy h5 { font-size: 16px; color: #192971; } .tab-content > .tab-pane#policy ul { margin: 0 0 24px 15px; padding: 0; text-indent: -10px; } .tab-content > .tab-pane#policy ul li { line-height: 1.4; margin-bottom: 4px; } .tab-content > .tab-pane#policy ul li:before { content: ""; display: inline-block; width: 2px; height: 2px; background: #6C7285; margin: 0 4px 2px; } .recom-group { padding-top: 12px; } .recom-group .item { margin: 12px 0; } .recom-group a { display: grid; grid-column-gap: 16px; grid-row-gap: 8px; grid-template-columns: 70px auto auto; } .recom-group a .logo { grid-column: 1; grid-row: 1/span 2; -webkit-border-radius: 70px; -moz-border-radius: 70px; -ms-border-radius: 70px; border-radius: 70px; -o-border-radius: 70px; overflow: clip; border: 1px solid #E9ECF6; width: 72px; height: 72px; margin: 0 auto 0; background: white; display: flex; } .recom-group a .logo img { width: 80%; height: 80%; display: block; margin: auto; } .recom-group a .badge { width: 48px; } .recom-group a .target { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 10px; white-space: nowrap; } .recom-group a .target div:first-of-type { color: #6C7285; } .recom-group a .date { grid-column: 3; grid-row: 1; justify-self: end; color: #6C7285; font-size: 10px; padding-top: 4px; } @media (max-width: 320px) { .recom-group a .date { display: none; } } .recom-group a .text { grid-column: 2/span 2; grid-row: 2; word-break: keep-all; line-height: 1.4; } .badge { width: 48px; } .badge.bg-dark.type-turn { background-color: #FED5DF !important; color: #F81C51 !important; } .badge.bg-dark.type-growth { background-color: #C6ECEF !important; color: #00919E !important; } .badge.bg-dark.type-bluechip { background-color: #FFE3C1 !important; color: #F26718 !important; } ul.push-group { margin: 0 1rem; padding: 8px 0 0 0; border-top: 1px solid #E9ECF6; } ul.push-group li a { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; padding-bottom: 12px; } ul.push-group li a.disabled { cursor: default; pointer-events: none; } ul.push-group li strong { font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; } ul.push-group li span.date { text-align: right; font-size: 12px; color: #6C7285; white-space: nowrap; } .boardDetail { margin: 1rem; border-bottom: 1px solid #E9ECF6; padding-top: 1rem; padding-bottom: 1rem; word-break: keep-all; } .boardDetail h3.title { color: #192971; font-size: 20px; font-weight: bold; letter-spacing: -0.03em; } .boardDetail .date { color: #B4B9CD; font-size: 12px; white-space: nowrap; } .boardView { margin: 1rem; padding-top: 0.5rem; word-break: keep-all; } .boardView div { display: block; margin: 0 auto; max-width: 100%; float: none !important; } .boardView img { display: block; margin: 0 auto; max-width: 99%; float: none; } .boardView img.boardImg { margin: 1rem auto 2rem; max-width: 99%; } .boardView .aeditor { margin-bottom: 1rem; font-size: 13px; background: #F0F2F9 !important; padding: 10px; } .boardView .aeditor .label { font-weight: bold; color: #6874A0; } .boardView .aeditor .label:after { content: "|"; display: inline-block; margin: 0 4px; opacity: 0.6; } .boardView a[data-type=company] { color: #335599 !important; font-weight: bold; } .boardView .copyright { color: #6C7285; font-size: 12px; text-align: center; margin: 2rem 0 1rem; } .boardFooter { border-top: 1px solid #E9ECF6; margin: 1rem 1rem 40px; padding-top: 16px; } .boardFooter button.btn { display: block; margin: 0 auto; } /* ---------------------------- 추천 종목 상세 ss_view */ [data-category*=portfolio], [data-category*=hit], [data-category*=search] { margin-right: 1rem; margin-left: 1rem; } [data-category*=portfolio] h3, [data-category*=hit] h3, [data-category*=search] h3 { font-size: 18px; font-weight: bold; margin-bottom: 1rem; } [data-category*=recom] { margin-right: 1rem; margin-left: 1rem; } button.btn-back + [class*=type] { margin: 1.6rem 1rem 0.5rem; } button.btn-back + [class*=type] + .comapany-info { margin-top: 4px; } button.btn-back + [class*=type]:empty + .comapany-info { margin-top: 16px; } /* 종목 정보 */ .comapany-info { margin: 1.6rem 1rem 16px; border-bottom: 1px solid #E9ECF6; padding-bottom: 16px; } .comapany-info .logo { float: right; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -o-border-radius: 50%; overflow: clip; border: 1px solid #E9ECF6; width: 63px; height: 63px; margin: 8px 0 0 auto; background: white; display: flex; } .comapany-info .logo img { width: 80%; height: 80%; display: block; margin: auto; } .comapany-info .company { grid-column: 1/span 2; font-weight: bold; font-size: 24px; margin: 8px 0 0; } .comapany-info .price { grid-column: 1/span 2; font-size: 30px; } .comapany-info .price-rate { grid-column: 1; font-size: 13px; white-space: nowrap; margin-right: 14px; } .comapany-info .price-rate strong { font-weight: normal; } .comapany-info .rate { grid-column: 2; font-size: 13px; } .comapany-info .rate strong { font-weight: normal; } .comapany-info .company-data { grid-column: 3; font-size: 12px; color: #6C7285; white-space: nowrap; } .comapany-info .company-data span { margin-left: 4px; } .comapany-info .company-data span:first-of-type { margin-left: 0; } .comapany-info .company-desc { grid-column: 1/span 3; font-size: 13px; color: #6C7285; margin-top: 1rem; word-break: keep-all; } /* 추천 종목 테이블 */ .company-recom-group, .company-port-group { display: flex; flex-wrap: wrap; justify-content: stretch; margin-top: 1rem; margin-bottom: 3rem; } .company-recom-group .recom-item, .company-port-group .recom-item { width: calc(50% - 4px); border-bottom: 1px solid #E9ECF6; padding: 8px 8px; display: flex; justify-content: space-between; align-items: center; margin-right: 8px; } .company-recom-group .recom-item:nth-child(even), .company-port-group .recom-item:nth-child(even) { margin-right: 0; } .company-recom-group .recom-item .label, .company-port-group .recom-item .label { display: inline-block; width: 80px; color: #6C7285; font-size: 14px; white-space: nowrap; } .company-recom-group .recom-item .value, .company-port-group .recom-item .value { font-size: 16px; white-space: nowrap; } .company-recom-group .recom-item.opinion, .company-port-group .recom-item.opinion { grid-column: 1; grid-row: 1; } .company-recom-group .recom-item.opinion .value, .company-port-group .recom-item.opinion .value { display: inline-block; padding: 6px 8px; background: #F0F2F9 !important; border: 1px solid #E0E4F0; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; -o-border-radius: 4px; line-height: 1; } .company-recom-group .recom-item.price-sell, .company-port-group .recom-item.price-sell { grid-column: 1; grid-row: 2; flex-direction: column; } .company-recom-group .recom-item.price-sell .label, .company-port-group .recom-item.price-sell .label { width: 100%; } .company-recom-group .recom-item.price-sell .value, .company-port-group .recom-item.price-sell .value { margin-left: auto; } .company-recom-group .recom-item.price-sell:nth-child(3), .company-port-group .recom-item.price-sell:nth-child(3) { grid-column: 1; grid-row: 3; } .company-recom-group .recom-item.price-buy, .company-port-group .recom-item.price-buy { grid-column: 2; grid-row: 1; border-top: 1px solid #E9ECF6; } .company-recom-group .recom-item.price-target, .company-port-group .recom-item.price-target { grid-column: 2; grid-row: 2; } .company-recom-group .recom-item.rate-target, .company-port-group .recom-item.rate-target { grid-column: 2; grid-row: 3; } .company-recom-group .recom-item.rate-target .value, .company-port-group .recom-item.rate-target .value { color: #e61e09; } /* 매매 전략 */ .company-port-group .port-rate { grid-row: 2/span 2; } .company-port-group .port-rate .value { display: flex; gap: 22px; } @media (max-width: 374px) { .company-port-group .port-rate .value { gap: 8px; } } .company-port-group .port-rate .value .now, .company-port-group .port-rate .value .go { display: flex; flex-direction: column; } .company-port-group .port-rate .value .now .label, .company-port-group .port-rate .value .go .label { font-size: 13px; color: #6C7285; width: auto; } .company-port-group .port-rate .value .now .value, .company-port-group .port-rate .value .go .value { gap: 0; } .company-port-group .rate-target .negative { color: #6C7285 !important; } /* 투자매력 MVP */ .company-mvp { margin-bottom: 3rem; margin-right: 0; margin-left: 0; background-color: #FFEBF0; padding: 1.3rem 1rem; position: relative; } .company-mvp .mvp-score { display: flex; justify-content: space-between; word-break: keep-all; text-align: Center; } .company-mvp .mvp-score > div { min-width: 20%; padding: 16px 0 8px; text-align: left; } .company-mvp .mvp-score .total { background: white; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; -o-border-radius: 4px; text-align: center; margin-right: 16px; min-width: 96px; } .company-mvp .mvp-score .total .score { color: #F81C51; font-size: 22px; } .company-mvp .mvp-score .total .score strong { font-size: 28px; } .company-mvp .mvp-score .label { color: #6C7285; display: block; } .company-mvp .mvp-score .label small { display: block; font-size: 12px; font-weight: 200; line-height: 1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .company-mvp .mvp-score .score { font-size: 18px; display: block; margin-top: 4px; } .company-mvp p.desc { position: absolute; right: 16px; bottom: -24px; margin: 0; color: #6C7285; font-size: 11px; } .company-mvp p.desc:before { content: ""; display: inline-block; width: 2px; height: 2px; background: #6C7285; margin: 0 4px 2px; } /* 투자 포인트 */ .company-point { margin-bottom: 3rem; margin-right: 0; margin-left: 0; background-color: #F0F2F9 !important; padding: 1.3rem 1rem; } .company-point ul { padding: 0; margin: 0; } .company-point li { word-break: keep-all; } .company-point li:first-of-type { background: white; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; -o-border-radius: 4px; padding: 16px; font-weight: bold; margin-bottom: 12px; color: #212121; } .company-point li:not(:first-of-type) { font-weight: 300; color: #212121; margin-bottom: 4px; line-height: 1.4; text-indent: -10px; margin-left: 14px; } .company-point li:not(:first-of-type):before { content: ""; display: inline-block; width: 4px; height: 4px; background-color: #6C7285; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -o-border-radius: 50%; margin: 0 4px 2px 0; } /* 주요 투자지표 */ .company-index { margin-bottom: 3rem; } .company-index ul { display: flex; flex-wrap: wrap; justify-content: stretch; padding: 0; margin: 0; } .company-index li { width: calc(33% - 4px); margin-right: 8px; border-top: 1px solid #E9ECF6; border-bottom: 1px solid #E9ECF6; padding: 12px 8px; display: flex; flex-direction: column; margin-top: -1px; word-break: keep-all; justify-content: space-between; } .company-index li:nth-child(3n) { margin-right: 0; } .company-index li .label { display: block; color: #6C7285; font-size: 14px; margin-bottom: 4px; white-space: nowrap; } .company-index li .label strong { font-weight: bold; display: inline-block; margin-right: 4px; line-height: 1; } @media (max-width: 374px) { .company-index li .label strong { display: block; } } .company-index li .label small { font-size: 12px; font-weight: 200; } .company-index li .value { font-size: 16px; } /* 기업정보 */ .company-summary { margin-bottom: 3rem; } .company-summary h3 { border-bottom: 1px solid #E9ECF6; padding-bottom: 12px; } .company-summary .item { margin: 2rem 0 !important; } .company-summary .item h4 { font-size: 15px; color: #192971; } .company-summary .item .value { font-size: 14px; word-break: keep-all; } .company-summary p.desc { border-top: 1px solid #E9ECF6; margin: 24px 0 16px; padding-top: 8px; color: #6C7285; font-size: 11px; text-align: right; } /* 적중 - 추천가 */ .company-hit-group { margin-bottom: 3rem; display: grid; justify-content: stretch; grid-column-gap: 8px; grid-template-columns: calc(33% - 4px) calc(33% - 4px) calc(33% - 4px); } .company-hit-group .recom-item { border-top: 1px solid #E9ECF6; border-bottom: 1px solid #E9ECF6; padding: 12px 8px; display: flex; flex-direction: column; margin-top: -1px; } .company-hit-group .recom-item .label { display: block; color: #6C7285; font-size: 14px; } .company-hit-group .recom-item .label strong { font-weight: bold; display: inline-block; margin-right: 4px; margin-bottom: 4px; } .company-hit-group .recom-item .label small { font-size: 12px; font-weight: 200; } .company-hit-group .recom-item .value { font-size: 16px; } .company-hit-group .recom-item.rate-target .value { color: #e61e09; } /* 적중 투자포인트 */ .company-hit-point { margin-right: 0; margin-left: 0; } .company-hit-point .hit-point-prime { margin-bottom: 8px; margin-right: 0; margin-left: 0; background-color: #FFEBF0; padding: 1.3rem 1rem; position: relative; } .company-hit-point .hit-point-prime p { margin: 0; font-size: 16px; font-weight: bold; } .company-hit-point .hit-point-prime:before { font-family: "Material Icons"; content: "\e0f0"; display: block; background-color: #F81C51; color: #FCFCFC; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -o-border-radius: 50%; width: 34px; height: 34px; position: absolute; top: -22px; display: flex; justify-content: center; align-items: center; font-size: 18px; } .company-hit-point .hit-point-item { margin-bottom: 3rem; margin-right: 0; margin-left: 0; background-color: #F0F2F9 !important; padding: 1.3rem 1rem; } .company-hit-point .hit-point-item h3 strong { color: #F81C51; } .company-hit-point .hit-point-item ul { padding: 0; margin: 0; } .company-hit-point .hit-point-item li { word-break: keep-all; } .company-hit-point .hit-point-item li:first-of-type { background: white; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; -o-border-radius: 4px; padding: 16px; font-weight: bold; margin-bottom: 12px; color: #212121; } .company-hit-point .hit-point-item li:not(:first-of-type) { font-weight: 300; color: #212121; margin-bottom: 4px; line-height: 1.4; text-indent: -10px; margin-left: 14px; } .company-hit-point .hit-point-item li:not(:first-of-type):before { content: ""; display: inline-block; width: 4px; height: 4px; background-color: #6C7285; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -o-border-radius: 50%; margin: 0 4px 2px 0; } .company-chart { margin-bottom: 3rem; } .company-chart .chart-item { min-height: 300px; max-width: 100%; } /* 적중 차트 */ .company-hit-chart { margin-bottom: 3rem; } .company-hit-chart .hit-chart-item { min-height: 300px; max-width: 100%; } /* 검색 : 이 종목의 최근 추천 내역 */ .company-recent { display: none; } /* 검색 : 오늘의 추천주 */ .company-recom-today { display: none; } /* 검색 : 한눈에 보는 실적 */ .company-record { margin-bottom: 3rem; } .company-record thead th { border-bottom: none; font-size: 14px; } .company-record tbody th, .company-record tbody td { border-right: 1px solid #E9ECF6; font-size: 14px; } .company-record tbody th:last-of-type, .company-record tbody td:last-of-type { border-right: none; } .company-record p.desc { margin: 0; color: #6C7285; font-size: 11px; text-align: right; } /* 검색 : 최근 분석 보고서 */ .company-report { margin-bottom: 3rem; margin-right: 0; margin-left: 0; background-color: #F0F2F9 !important; padding: 1.3rem 1rem; } .company-report ul { margin: 0; padding: 0; } .company-report ul li a { display: flex; justify-content: space-between; align-items: center; padding-top: 2px; padding-bottom: 2px; } .company-report ul li strong { font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; } .company-report ul li span.date { text-align: right; font-size: 10px; color: #6C7285; } /* 투자매력 순위 */ .mvp-best { margin-bottom: 3rem; margin-right: 0; margin-left: 0; background-color: #FFEBF0; padding: 0 2em; position: relative; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; -o-border-radius: 8px; } .mvp-best a { margin: 0; display: flex; align-items: center; padding: 32px 0; color: #212121; position: relative; } .mvp-best a .num { position: absolute; top: 0; background: #F81C51; color: #FCFCFC; width: 24px; display: flex; justify-content: center; padding-top: 4px; -webkit-border-radius: 0 0 24px 24px; -moz-border-radius: 0 0 24px 24px; -ms-border-radius: 0 0 24px 24px; border-radius: 0 0 24px 24px; -o-border-radius: 0 0 24px 24px; } .mvp-best a .logo { justify-self: end; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -o-border-radius: 50%; overflow: clip; border: 1px solid #E9ECF6; width: 63px; height: 63px; background: white; display: flex; margin-right: 16px; } .mvp-best a .logo img { width: 80%; height: 80%; display: block; margin: auto; } .mvp-best a .mvp-company { margin-right: auto; } .mvp-best a .mvp-company .company { font-weight: bold; font-size: 20px; margin: 8px 0 0 0; white-space: nowrap; } .mvp-best a .mvp-company .price-info { display: flex; flex-direction: column; } .mvp-best a .mvp-company .price { font-size: 30px; white-space: nowrap; line-height: 1.2; } .mvp-best a .mvp-company .rate { font-size: 13px; } .mvp-best a .mvp-company .rate strong { font-weight: normal; } .mvp-best a .mvp-company .positive .price, .mvp-best a .mvp-company .positive .rate { color: #e61e09 !important; } .mvp-best a .mvp-company .negative .price, .mvp-best a .mvp-company .negative .rate { color: #183476 !important; } .mvp-best a .mvp-score { margin-left: auto; display: flex; align-items: center; word-break: keep-all; text-align: Center; border-left: 1px solid #E0E4F0; padding-left: 38px; margin-right: 20px; } .mvp-best a .mvp-score .total { background: white; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; -o-border-radius: 4px; text-align: center; min-width: 96px; padding: 8px 36px; margin-right: 16px; } .mvp-best a .mvp-score .total .score { color: #F81C51; font-size: 22px; } .mvp-best a .mvp-score .total .score strong { font-size: 28px; } .mvp-best a .mvp-score .market, .mvp-best a .mvp-score .value { margin-right: 16px; } .mvp-best a .mvp-score .label { color: #6C7285; display: block; } .mvp-best a .mvp-score .label small { display: block; font-size: 12px; font-weight: 200; line-height: 1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .mvp-best a .mvp-score .score { font-size: 18px; display: block; margin-top: 4px; } .mvp-best div.desc { position: absolute; right: 16px; bottom: 6px; margin: 0; color: #6C7285; font-size: 11px; } .mvp-best div.desc:before { content: ""; display: inline-block; width: 2px; height: 2px; background: #6C7285; margin: 0 4px 2px; } .mvp-table table { border-top: 1px solid #E0E4F0; font-size: 14px; } .mvp-table table thead { background: #F7F7FA; } .mvp-table table thead th { padding: 5px 2px; color: #192971; vertical-align: middle; text-align: center; line-height: 1.2; } .mvp-table table thead th.num { color: #6E7785; font-size: 10px; text-align: center; padding: 5px 2px !important; } .mvp-table table thead th.bl { border-left: 1px solid #E0E4F0; } .mvp-table table thead th.bgn { background: #d8dde7; } .mvp-table table thead .th2 { border-top: 1px solid #E0E4F0; width: 77px; } .mvp-table table thead .th3 { border-top: 1px solid #E0E4F0; width: 60px; } .mvp-table table thead .th3:first-of-type { border-left: 1px solid #E0E4F0; } .mvp-table table tbody tr:first-of-type td { border-top: 1px solid #E0E4F0; } .mvp-table table tbody td { border-bottom: 1px solid #E9ECF6; padding: 5px 2px; text-align: center; white-space: nowrap; } .mvp-table table tbody td.num { text-align: right; color: #6E7785; } .mvp-table table tbody td.num .rankgap { font-size: 12px; margin-left: 6px; margin-right: 4px; display: inline-block; min-width: 33px; text-align: left; } .mvp-table table tbody td.num .rankgap.neutral { padding-left: 4px; } .mvp-table table tbody td.num .rankgap.negative { color: #183476; } .mvp-table table tbody td.num .rankgap.positive { color: #e61e09; } .mvp-table table tbody td.num .rankgap.positive:before { content: "+"; } .mvp-table table tbody td.bl { border-left: 1px solid #E0E4F0; } .mvp-table table tbody td.sum_bg { background: #FFF0F0; } .mvp-table table tbody td.text-end { padding-right: 8px; } .mvp-table table tbody td.price { color: #6E7785; } .mvp-table table tbody td.price strong { font-weight: normal; color: #212121; } /* 업종/테마 */ .deco-wrap { background: #F0F2F9 !important; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; -o-border-radius: 8px; padding: 22px 20px; } .theme-head { margin: 10px 120px 24px; } .theme-head .nav.nav-tabs#lnb.nav-fill { background: #ffffff; } .theme-list { width: 100%; padding: 0 0 60px; align-items: center; } .theme-list ul.items { padding: 0; margin: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: center; align-items: stretch; } .theme-list li.theme-item { width: calc(50% - 10px); margin-right: 16px; margin-bottom: 16px; height: auto; position: relative; border: 1px solid transparent; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; -o-border-radius: 10px; transition: 0.3s; color: #212121; position: relative; border-color: #C6CCD5; -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s; background-color: #ffffff; } .theme-list li.theme-item:nth-child(even) { margin-right: 0; } .theme-list li.theme-item:hover { color: #335599; border-color: #F81C51; } .theme-list li.theme-item:hover a .represent { background: #ECEFF5; } .theme-list li.theme-item a { display: block; display: flex; flex-direction: column; justify-content: space-between; height: 100%; color: #212121; } .theme-list li.theme-item a strong { font-weight: bold; } .theme-list li.theme-item a .num { position: absolute; right: 18px; top: 0; background: #F81C51; color: #FCFCFC; } .theme-list li.theme-item a .title { font-size: 20px; color: #212121; border-bottom: 1px solid #ECEFF5; padding-bottom: 16px; margin-bottom: 16px; padding: 26px 0 16px; margin: 0 16px; min-height: 44px; } .theme-list li.theme-item a .company-specs { display: flex; gap: 12px; margin: 18px 16px; text-align: center; } .theme-list li.theme-item a .company-specs .label { font-size: 12px; color: #6E7785; display: block; letter-spacing: -0.03em; margin-bottom: 8px; } .theme-list li.theme-item a .company-specs .company-rate { display: flex; flex-direction: column; justify-content: space-between; } .theme-list li.theme-item a .company-specs .company-rate .value { font-size: 18px; } .theme-list li.theme-item a .company-specs .company-num { display: flex; flex-direction: column; justify-content: space-between; } .theme-list li.theme-item a .company-specs .company-num .value { font-size: 16px; margin-bottom: 2px; } .theme-list li.theme-item a .company-specs .company-count { display: flex; flex-direction: column; justify-content: space-between; } .theme-list li.theme-item a .company-specs .company-count .label { text-align: left; } .theme-list li.theme-item a .company-specs .company-count .value { display: flex; gap: 4px; font-size: 12px; margin-bottom: 4px; } .theme-list li.theme-item a .company-specs .company-count .value .positive { margin-right: 6px; } .theme-list li.theme-item a .company-specs .company-count .value .positive span:after { background-image: url('data:image/svg+xml,'); } .theme-list li.theme-item a .company-specs .company-count .value .negative { margin-right: 6px; } .theme-list li.theme-item a .company-specs .company-count .value .negative span:after { background-image: url('data:image/svg+xml,'); } .theme-list li.theme-item a .company-specs .company-count .value .neutral { margin-right: 6px; } .theme-list li.theme-item a .company-specs .company-count .value .neutral span:after { background-image: url('data:image/svg+xml,'); } .theme-list li.theme-item a .company-specs .company-count .value span { font-size: 0; color: transparent; vertical-align: middle; } .theme-list li.theme-item a .company-specs .company-count .value span:after { content: ""; display: inline-block; background-repeat: no-repeat; width: 12px; height: 12px; margin-right: 0px; } .theme-list li.theme-item a .represent { background: #ECEFF5; padding: 8px 16px; -webkit-border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; -ms-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; -o-border-radius: 0 0 10px 10px; display: flex; align-items: center; } .theme-list li.theme-item a .represent .logo { border: 1px solid #ECEFF5; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -o-border-radius: 50%; width: 26px; height: 26px; margin: 0; padding: 2px; } .theme-list li.theme-item a .represent .logo img { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -o-border-radius: 50%; width: 100%; height: 100%; border: 4px solid white; } .theme-list li.theme-item a .represent .company { font-weight: bold; font-size: 14px; color: #212121; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; padding-left: 8px; margin-right: auto; } .theme-list li.theme-item a .represent .company-price { display: flex; align-items: flex-end; gap: 8px; } .theme-list li.theme-item a .represent .company-price .price { font-size: 14px; font-weight: 300; color: #212121; margin-right: 8px; } .theme-list li.theme-item a .represent .company-price .price-rate { font-size: 12px; margin-right: 8px; } .theme-list li.theme-item a .represent .company-price .price-rate strong { font-weight: normal; } .theme-list li.theme-item a .represent .company-price .rate { display: none; font-size: 12px; } .theme-list li.theme-item a .represent .company-price .rate strong { font-weight: normal; } .theme-list li.theme-item:hover { border-color: #F81C51; } .theme-list li.theme-item .num { padding: 6px 8px 16px; font-size: 14px; display: none; } .theme-list li.theme-item .num:after { content: ""; display: block; width: 18px; height: 18px; background: #ffffff; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; margin: 8px 0 0 -4px; } .theme-list li.theme-item:nth-child(1) .num, .theme-list li.theme-item:nth-child(2) .num, .theme-list li.theme-item:nth-child(3) .num, .theme-list li.theme-item:nth-child(4) .num { display: block; } .theme-list li.theme-item:nth-child(1) .represent, .theme-list li.theme-item:nth-child(2) .represent, .theme-list li.theme-item:nth-child(3) .represent, .theme-list li.theme-item:nth-child(4) .represent { display: block; padding-top: 12px; padding-bottom: 12px; } .theme-list li.theme-item:nth-child(1) .represent .logo, .theme-list li.theme-item:nth-child(2) .represent .logo, .theme-list li.theme-item:nth-child(3) .represent .logo, .theme-list li.theme-item:nth-child(4) .represent .logo { float: left; width: 48px; height: 48px; } .theme-list li.theme-item:nth-child(1) .represent .company, .theme-list li.theme-item:nth-child(2) .represent .company, .theme-list li.theme-item:nth-child(3) .represent .company, .theme-list li.theme-item:nth-child(4) .represent .company { margin-left: 52px; margin-top: 4px; margin-left: 6px; font-size: 16px; } .theme-list li.theme-item:nth-child(1) .represent .company-price, .theme-list li.theme-item:nth-child(2) .represent .company-price, .theme-list li.theme-item:nth-child(3) .represent .company-price, .theme-list li.theme-item:nth-child(4) .represent .company-price { margin-left: 52px; display: flex; align-items: flex-end; padding-left: 12px; } .theme-list li.theme-item:nth-child(1) .represent .company-price .price, .theme-list li.theme-item:nth-child(2) .represent .company-price .price, .theme-list li.theme-item:nth-child(3) .represent .company-price .price, .theme-list li.theme-item:nth-child(4) .represent .company-price .price { font-size: 15px; } .theme-list li.theme-item:nth-child(1) .represent .company-price .rate, .theme-list li.theme-item:nth-child(2) .represent .company-price .rate, .theme-list li.theme-item:nth-child(3) .represent .company-price .rate, .theme-list li.theme-item:nth-child(4) .represent .company-price .rate { display: block; } .theme-list li.theme-item:nth-child(1) .num, .theme-list li.theme-item.item1 .num { background-color: #F81C51; } .theme-list li.theme-item:nth-child(2) .num, .theme-list li.theme-item.item2 .num { background-color: #FA9157; } .theme-list li.theme-item:nth-child(3) .num, .theme-list li.theme-item.item3 .num { background-color: #FFBC0F; } .theme-list li.theme-item:nth-child(4) .num { display: none; } .theme-list li.nodata { text-align: center; padding: 48px 24px; border-bottom: 1px solid #ECEFF5; width: 100%; } .theme-detail { display: grid; margin-right: 1rem; margin-left: 1rem; } .theme-detail h3 { text-align: center; padding-top: 24px; padding-bottom: 22px; grid-column: 1/span 3; } .theme-detail .company-count, .theme-detail .company-num, .theme-detail .company-rate { border-top: 1px solid #E9ECF6; border-bottom: 1px solid #E9ECF6; text-align: center; padding-top: 8px; padding-bottom: 8px; } .theme-detail .company-count *:not(strong), .theme-detail .company-num *:not(strong), .theme-detail .company-rate *:not(strong) { color: #6C7285 !important; font-size: 14px; } .theme-detail .company-count .positive strong, .theme-detail .company-num .positive strong, .theme-detail .company-rate .positive strong { color: #e61e09; } .theme-detail .company-count .negative strong, .theme-detail .company-num .negative strong, .theme-detail .company-rate .negative strong { color: #183476; } .theme-detail .company-count { grid-column: 1; display: flex; gap: 22px; justify-content: center; } .theme-detail .company-count span strong:before { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; -o-border-radius: 0; background-color: transparent; } .theme-detail .company-count span.neutral strong:before { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -o-border-radius: 50%; background-color: #6C7285; margin: 0 5px 2px 0; width: 8px; height: 8px; } .theme-detail .company-count span { display: flex; flex-direction: column; } .theme-detail .company-num { grid-column: 2; display: flex; flex-direction: column; margin-left: 8px; } .theme-detail .company-num strong { color: #212121; } .theme-detail .company-rate { grid-column: 3; display: flex; flex-direction: column; } .theme-detail .company-rate .rate.positive { color: #e61e09 !important; } .theme-detail .company-rate .rate.negative { color: #183476 !important; } .theme-detail + .company-info { position: relative; margin-right: 1rem; margin-left: 1rem; margin-top: 50px; display: flex; gap: 16px; padding: 8px 12px; font-size: 14px; } .theme-detail + .company-info h4 { position: absolute; top: -24px; font-size: 12px; color: #6C7285; } .theme-detail + .company-info .logo { display: none; } .theme-detail + .company-info .company { margin-right: auto; } .theme-company-list { padding: 24px 0 40px; } .theme-company-list h3 { font-size: 18px; margin-bottom: 16px; margin-top: 24px; } .theme-company-list table.table { margin-bottom: 24px; } .theme-company-list table.table thead th { border: none; background: #E0E4F0 !important; } .theme-company-list table.table thead th:nth-child(2) { border-right: 8px solid #F0F2F9 !important; } .theme-company-list table.table tbody tr th, .theme-company-list table.table tbody tr td { border-bottom: 1px solid #E0E4F0; } .theme-company-list table.table tbody tr th { text-overflow: ellipsis; overflow: hidden; max-width: 100px; } .theme-company-list table.table tbody tr td:first-of-type { border-right: 8px solid #F0F2F9 !important; } .themeWrap { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; border: 1px solid #ECEFF5; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; -o-border-radius: 10px; padding: 42px; position: relative; min-height: 900px; } @media (max-width: 991px) { .themeWrap { min-height: auto; padding-right: 32px; padding-left: 32px; } } @media (max-width: 575px) { .themeWrap { padding-right: 16px; padding-left: 16px; } } .themeWrap strong { font-weight: bold; } .themeDetail { margin-bottom: 40px; align-items: center; } .themeDetail h3.title { font-size: 24px; font-weight: bold; line-height: 1.3; margin-top: 0; padding-bottom: 30px; border-bottom: 1px solid #ECEFF5; } .themeDetail .company-specs { display: flex; margin: 22px 16px 22px 4px; text-align: center; } @media (max-width: 575px) { .themeDetail .company-specs { gap: 12px; margin-left: 0; margin-right: 0; } } .themeDetail .company-specs .label { font-size: 12px; color: #6E7785; display: block; letter-spacing: -0.03em; margin-bottom: 8px; white-space: nowrap; } .themeDetail .company-specs .company-rate { display: flex; flex-direction: column; justify-content: space-between; margin-right: 22px; } .themeDetail .company-specs .company-rate .value { font-size: 22px; } @media (max-width: 575px) { .themeDetail .company-specs .company-rate .value { font-size: 20px; } } .themeDetail .company-specs .company-num { display: flex; flex-direction: column; justify-content: space-between; margin-right: 22px; } .themeDetail .company-specs .company-num .value { font-size: 20px; margin-bottom: 2px; } @media (max-width: 575px) { .themeDetail .company-specs .company-num .value { font-size: 18px; } } .themeDetail .company-specs .company-count { display: flex; flex-direction: column; justify-content: space-between; } .themeDetail .company-specs .company-count .label { text-align: left; } .themeDetail .company-specs .company-count .value { display: flex; gap: 4px; font-size: 18px; margin-bottom: 4px; } @media (max-width: 575px) { .themeDetail .company-specs .company-count .value { font-size: 14px; } } .themeDetail .company-specs .company-count .value .positive { margin-right: 8px; } .themeDetail .company-specs .company-count .value .positive span { background: #e61e09; } .themeDetail .company-specs .company-count .value .negative { margin-right: 8px; } .themeDetail .company-specs .company-count .value .negative span { background: #183476; } .themeDetail .company-specs .company-count .value .neutral { margin-right: 8px; } .themeDetail .company-specs .company-count .value .neutral span { background: #6C7285; } .themeDetail .company-specs .company-count .value span { vertical-align: 2px; background: #e61e09; color: #FCFCFC !important; padding: 2px 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; -o-border-radius: 4px; opacity: 0.5; font-size: 10px; } @media (max-width: 575px) { .themeDetail .company-specs .company-count .value { gap: 2px; font-size: 14px; } .themeDetail .company-specs .company-count .value .positive { margin-right: 4px; white-space: nowrap; } .themeDetail .company-specs .company-count .value .positive span { background: none; } .themeDetail .company-specs .company-count .value .positive span:after { background-image: url('data:image/svg+xml,'); } .themeDetail .company-specs .company-count .value .negative { margin-right: 4px; white-space: nowrap; } .themeDetail .company-specs .company-count .value .negative span { background: none; } .themeDetail .company-specs .company-count .value .negative span:after { background-image: url('data:image/svg+xml,'); } .themeDetail .company-specs .company-count .value .neutral { margin-right: 4px; white-space: nowrap; } .themeDetail .company-specs .company-count .value .neutral span { background: none; } .themeDetail .company-specs .company-count .value .neutral span:after { background-image: url('data:image/svg+xml,'); } .themeDetail .company-specs .company-count .value span { font-size: 0; color: transparent; vertical-align: middle; } .themeDetail .company-specs .company-count .value span:after { content: ""; display: inline-block; background-repeat: no-repeat; width: 12px; height: 12px; margin-right: 0px; } } .themeDetail .num { position: absolute; right: 18px; top: 0; background: #F81C51; color: #FCFCFC; padding: 6px 8px 16px; font-size: 22px; display: none; } .themeDetail .num:after { content: ""; display: block; width: 23px; height: 23px; background: #ffffff; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); position: absolute; margin: 8px 0 0 -5px; } .themeDetail:nth-child(1) .num, .themeDetail.item1 .num { display: block; background-color: #F81C51; } .themeDetail:nth-child(2) .num, .themeDetail.item2 .num { display: block; background-color: #FA9157; } .themeDetail:nth-child(3) .num, .themeDetail.item3 .num { display: block; background-color: #FFBC0F; } @media (max-width: 991px) { .themeDetail { flex-wrap: wrap; } } .themeDetail .represent { flex: 1; background: #ECEFF5; padding: 16px 16px 16px 24px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; -o-border-radius: 10px; display: flex; align-items: center; } .themeDetail .represent .title { font-size: 14px; font-weight: bold; white-space: nowrap; padding-right: 30px; } .themeDetail .represent .title:after { content: ""; display: inline-block; width: 14px; height: 18px; margin-left: 4px; vertical-align: middle; background: url('data:image/svg+xml,') no-repeat right center; } .themeDetail .represent .logo { border: 1px solid #ECEFF5; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -o-border-radius: 50%; grid-column: 2; grid-row: 1/span 2; width: 48px; height: 48px; } .themeDetail .represent .logo img { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -o-border-radius: 50%; width: 100%; height: 100%; border: 3px solid white; } .themeDetail .represent .company { font-weight: bold; color: #212121; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 8px; margin-left: 4px; font-size: 16px; cursor: pointer; } .themeDetail .represent .company:hover { color: #335599; } .themeDetail .represent .company button.favorite { width: 18px; height: 18px; background-size: 18px; vertical-align: top; } .themeDetail .represent .company-price { display: flex; align-items: flex-end; padding-left: 12px; gap: 8px; } .themeDetail .represent .company-price .price { font-size: 15px; font-weight: 300; color: #212121; margin-right: 8px; } .themeDetail .represent .company-price .price-rate { font-size: 12px; } .themeDetail .represent .company-price .price-rate strong { font-weight: normal; } .themeDetail .represent .company-price .rate { display: block; font-size: 12px; } .themeDetail .represent .company-price .rate strong { font-weight: normal; } @media (max-width: 575px) { .themeDetail .represent { grid-template-columns: 48px auto; padding-bottom: 24px; } .themeDetail .represent .title { grid-column: 1/span 2; grid-row: 1; margin: 8px 0 16px 0; } .themeDetail .represent .logo { grid-column: 1; grid-row: 2/span 2; margin-top: 0; } .themeDetail .represent .company { grid-column: 2; grid-row: 2; } .themeDetail .represent .company-price { grid-column: 2; grid-row: 3; } } .themeBrief { font-size: 15px; line-height: 1.8; color: #212121; margin-bottom: 80px; } .themeGroup > .title { display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid #ECEFF5; } .themeGroup > .title h4 { font-size: 18px; color: #212121; padding: 0; margin: 0; } .themeGroup > .title h4 strong { color: #F81C51; } .themeGroup > .title p { font-size: 12px; color: #6E7785; } .themeGroup table { width: 100%; border-spacing: 0; display: block; } .themeGroup table thead { font-size: 12px; color: #6E7785; font-weight: bold; display: flex; flex-wrap: wrap; } .themeGroup table thead tr { width: 50%; border-bottom: 1px solid #ECEFF5; width: calc(50% - 20px); display: flex; justify-content: space-between; margin-right: 40px; } .themeGroup table thead tr:nth-child(2) { margin-right: 0; } .themeGroup table thead tr th { font-weight: normal; padding: 12px 0; display: block; } .themeGroup table thead tr th:nth-child(1) { text-align: left; padding-left: 10px; } .themeGroup table thead tr th:nth-child(2) { text-align: right; width: 46%; } .themeGroup table thead tr th:nth-child(3) { text-align: right; width: 20%; padding-right: 10px; } .themeGroup table tbody { display: flex; flex-wrap: wrap; justify-content: space-between; } .themeGroup table tbody tr { display: block; width: calc(50% - 20px); display: flex; justify-content: space-between; margin-right: 40px; border-bottom: 1px solid #ECEFF5; } .themeGroup table tbody tr:nth-child(even) { margin-right: 0; } .themeGroup table tbody tr td { padding: 12px 0; line-height: 1; white-space: nowrap; } .themeGroup table tbody tr td.company { font-weight: bold; color: #212121; font-size: 14px; padding-left: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: auto; min-width: 52%; display: block; flex: 1; } .themeGroup table tbody tr td.company a { color: #212121; } .themeGroup table tbody tr td.company a:hover { color: #335599; border: none; } .themeGroup table tbody tr td.company button.favorite { width: 16px; height: 16px; background-size: 16px; margin-right: 2px; vertical-align: middle; } .themeGroup table tbody tr td.price { margin-left: auto; text-align: right; width: 34%; } .themeGroup table tbody tr td.price strong { font-weight: normal; } .themeGroup table tbody tr td.change { text-align: right; width: 20%; padding-right: 10px; } .themeGroup table tbody tr td.change strong { font-weight: normal; } .themeGroup table tbody tr td p { padding: 0; margin: 0; } .themeGroup img { max-width: 100%; } .themeGroup a { color: #335599; } .themeGroup a:hover { color: #335599; border-bottom: 1px dotted #233db5; } .themeGroup span.change { color: #6E7785; margin-right: 4px; margin-left: 4px; font-size: 14px; } .themeGroup span.change.positive { color: #e61e09; } .themeGroup span.change.negative { color: #183476; } .themeGroup span.change:before { content: "("; color: #A3AEBE; margin-right: 2px; font-size: 12px; } .themeGroup span.change:after { content: ")"; color: #A3AEBE; margin-left: 2px; font-size: 12px; } .themeFooter { border-top: 1px solid #ECEFF5; margin-bottom: 40px; margin-top: 24px; grid-column: 1; } .themeFooter .bNav { display: flex; justify-content: space-between; border-bottom: 1px solid #ECEFF5; word-break: keep-all; } .themeFooter .bNav a { width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; color: #F81C51; padding: 12px 0; } .themeFooter .bNav a:hover { background: #ECEFF5; color: #335599; } .themeFooter .bNav a[href*=none] { cursor: default; color: #6E7785; } .themeFooter .bNav a .bd-small { color: #6E7785; font-size: 14px; margin: 0 16px; flex: 0; min-width: 100px; } .themeFooter .bNav a .bd-small:first-of-type { margin-left: 16px; } .themeFooter .bNav a .bd-small:last-of-type { margin-right: 8px; } .themeFooter .bNav a .bd-large { font-size: 16px; font-weight: bold; } .themeFooter .bNav a .label { min-width: 66px; } .themeFooter .bNav a .title { flex: 1; } .themeFooter .bNav a .writer { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .themeFooter button { display: block; max-width: 300px; margin: 40px auto; font-weight: bold; font-size: 16px; border: none; padding: 12px 40px; cursor: pointer; } .themeFooter button:hover { opacity: 0.6; } .themeFooter button.goList { padding: 12px 80px; background: #DDE0EE; color: #F81C51; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; } /* 급등주 */ .up-list { width: 100%; padding: 0 0 60px; align-items: center; } .up-list ul.items { padding: 0; margin: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-content: center; align-items: stretch; } .up-list li.item { width: calc(33.3% - 12px); margin-right: 16px; margin-bottom: 16px; height: auto; position: relative; border: 1px solid #FCFCFC; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; -o-border-radius: 10px; background: #FFF; transition: 0.3s; color: #212121; padding: 20px 16px; position: relative; background-color: #ffffff; border-color: #ECEFF5; -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s; } .up-list li.item:nth-child(3n) { margin-right: 0; } .up-list li.item:hover { background: #ECEFF5; color: #335599; } .up-list li.item a { align-items: center; } .up-list li.item a strong { font-weight: bold; } .up-list li.item a .num { float: left; color: #A3AEBE; font-size: 14px; display: block; padding: 8px; } .up-list li.item a .logo { float: left; border: 1px solid #ECEFF5; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -o-border-radius: 50%; width: 36px; height: 36px; margin: 0 8px 0 0; padding: 4px; } .up-list li.item a .logo img { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -o-border-radius: 50%; width: 100%; height: 100%; border: 2px solid white; } .up-list li.item a .company { grid-column: 3; grid-row: 1; font-weight: bold; font-size: 18px; color: #212121; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 16px; } .up-list li.item a .company-price { grid-column: 3; grid-row: 2; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 8px; margin-bottom: 4px; } .up-list li.item a .company-price * { white-space: nowrap; } .up-list li.item a .company-price .price { font-size: 16px; font-weight: 400; color: #212121; width: 100%; } .up-list li.item a .company-price .price-rate { font-size: 12px; } .up-list li.item a .company-price .rate { font-size: 12px; } .up-list li.item .favorite { width: 48px; height: 48px; display: block; position: absolute; right: 0; top: 0; 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; } .up-list li.item .favorite.on { background: url('data:image/svg+xml,') no-repeat center; } .up-list li.item .chart { width: 100%; border-top: 1px solid #ECEFF5; margin-top: 16px; padding-top: 16px; display: none; } @media (max-width: 991px) { .up-list li.item .chart canvas, .up-list li.item .chart svg { display: block; margin: 0 auto; } } .up-list li.item:nth-child(1) .chart, .up-list li.item:nth-child(2) .chart, .up-list li.item:nth-child(3) .chart { display: block; } @media (max-width: 991px) { .up-list li.item:nth-child(3) .chart { display: none; } } @media (max-width: 575px) { .up-list li.item:nth-child(3) .chart { display: block; } } .up-list li.item:hover { border-color: #F81C51; } .up-list li.nodata { text-align: center; padding: 48px 24px; border-bottom: 1px solid #ECEFF5; width: 100%; } /* News 뉴스 */ .news-group { margin-top: -16px; border-top: 3px solid #C6CCD5; padding-top: 10px; } .news-group ul.news-list { margin: 0; padding: 0; display: flex; flex-wrap: wrap; line-height: 1.4; } .news-group ul.news-list li { margin: 12px 24px; width: calc(50% - 24px); border-bottom: 1px solid #C6CCD5; } .news-group ul.news-list li:nth-child(odd) { margin-left: 0; } .news-group ul.news-list li:nth-child(even) { margin-right: 0; } .news-group ul.news-list li a { display: block; padding: 10px 0 12px; } .news-group ul.news-list li a:hover .title { color: #335599; } .news-group ul.news-list li .logo { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -o-border-radius: 50%; width: 64px; height: 64px; border: 1px solid #C6CCD5; float: left; margin-right: 14px; } .news-group ul.news-list li .title { font-size: 16px; font-weight: bold; color: #212121; margin-bottom: 8px; } .news-group ul.news-list li .meta { display: flex; flex-direction: row-reverse; justify-content: space-between; font-size: 14px; } .news-group ul.news-list li .meta .date { color: #6E7785; } .news-view-head { border-top: 3px solid #C6CCD5; margin-top: -16px; border-bottom: 1px solid #ECEFF5; padding: 36px 40px 12px; margin-bottom: 32px; } .news-view-head h1 { font-size: 26px; font-weight: bold; } .news-view-head .meta .date { font-size: 14px; text-align: right; color: #6E7785; } .news-view-body { margin: 0 40px; font-size: 16px; } .news-view-foot { margin: 30px 44px; font-size: 16px; color: #6E7785; } .ainfo_invest_container { display: grid; grid-template-columns: 358px auto; grid-template-rows: min-content min-content auto; gap: 12px 32px; } .ainfo_invest_container [class^=ainfo_invest] h4 { font-size: 18px; font-weight: bold; border-bottom: 1px solid #ECEFF5; padding-bottom: 8px; margin-bottom: 12px; } .ainfo_invest.company-info { grid-column: 1/span 2; grid-row: 1; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; -o-border-radius: 4px; background: #F7F7FA; padding: 12px 24px; margin-top: 60px; margin-bottom: 60px; } .ainfo_invest.company-info a { display: flex; align-items: center; column-gap: 24px; } .ainfo_invest.company-info .comapny-name { font-size: 16px; font-weight: bold; margin-right: 12px; } .ainfo_invest.company-info .price { font-size: 15px; } .ainfo_invest.company-info .price-change, .ainfo_invest.company-info .rate-change { font-size: 14px; } .ainfo_invest.report { grid-column: 1; grid-row: 3; background: #F7F7FA; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; -o-border-radius: 0; padding: 32px 24px 24px; } .ainfo_invest.report ul { margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .ainfo_invest.report ul li a { display: flex; justify-content: space-between; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .ainfo_invest.report ul li .title { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 14px; display: block; } .ainfo_invest.report ul li .date { text-align: right; color: #6E7785; font-size: 12px; } .ainfo_invest.performance { grid-column: 1; grid-row: 2; } .ainfo_invest.performance th, .ainfo_invest.performance td { padding: 8px; } .ainfo_invest.performance thead th { background: #F0F2F9 !important; color: #192971; font-weight: bold; text-align: right; border-bottom: 1px solid #E9ECF6; } .ainfo_invest.performance thead th:first-of-type { text-align: left; } .ainfo_invest.performance tbody th { text-align: left; border-bottom: 1px solid #E9ECF6; border-right: 1px solid #E9ECF6; } .ainfo_invest.performance tbody td { text-align: right; border-bottom: 1px solid #E9ECF6; border-right: 1px solid #E9ECF6; } .ainfo_invest.performance tbody td:last-of-type { border-right: none; } .ainfo_invest.performance .desc { text-align: right; color: #6E7785; font-size: 12px; margin-top: 8px; } .ainfo_invest.checkpoint { grid-column: 2; grid-row: 2/span 2; } .ainfo_invest.checkpoint .item .title { font-size: 16px; font-weight: bold; color: #192971; margin-bottom: 4px; margin-top: 24px; } .ainfo_invest.checkpoint .item:first-of-type .title { margin-top: 0; } .ainfo_invest.checkpoint .item .content { font-size: 14px; } .buttons { border-top: 1px solid #C6CCD5; padding: 20px 0; margin: 50px 0; } .buttons .btn-center { margin: 0 auto; } .buttons .btn-lg { padding: 16px 140px; font-size: 14px; } .buttons .btn-light { background: #ECEFF5; color: #6E7785; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; -o-border-radius: 4px; } .logo { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -o-border-radius: 50%; border: 1px solid #C6CCD5; display: flex; justify-content: center; align-items: center; padding: 8px; background: #ffffff; overflow: hidden; text-align: center; } .logo img { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -o-border-radius: 50%; margin: auto; max-width: 80%; max-height: 80%; display: block; vertical-align: middle; } .logo-size-64 { width: 64px; height: 64px; } .logo-size-48 { width: 48px; height: 48px; } .logo-size-46 { width: 46px; height: 46px; } .logo-size-24 { width: 24px; height: 24px; padding: 4px; } .nomember-button { position: fixed; top: 0; left: 25%; z-index: 3; width: 100%; opacity: 0.9; } /* intro */ div#main.intro { padding-bottom: 0; margin: auto; height: 100%; } div#main.intro h3 { color: #192971; font-size: 34px; font-family: "GmarketSans", "Spoqa Han Sans Neo", "Noto Sans KR", "Nanum Gothic", "MalgunGothic", Dotum, Lato, Roboto, Arial, sans-serif; margin-bottom: 24px; letter-spacing: -0.03em; word-break: keep-all; } @media (max-width: 320px) { div#main.intro h3 { font-size: 30px; } } div#main.intro h3 strong { display: inline-block; background: linear-gradient(to top, #FFDD64 50%, transparent 50%); line-height: 1; padding-left: 4px; padding-right: 4px; } div#main.intro h3 + .slogan { color: #6C7285; font-size: 16px; word-break: keep-all; } div#main.intro h3 + .slogan p { margin-bottom: 16px; } div#main.intro h4 { color: #192971; } div#main.intro ul { padding: 0; margin: 0; } div#main .btn-primary#gotoTop { display: block; } .intro [class^=intro] { position: relative; } .intro [class^=intro] p, .intro [class^=intro] ul, .intro [class^=intro] ol { padding: 0; margin: 0; } .intro [class*=body] { padding: 46px 0 0px; } .intro00 { position: relative; } .intro00 .stamp { position: absolute; right: 10px; top: 10px; font-size: 12px; letter-spacing: -0.03em; text-align: right; opacity: 0.5; } .intro00 .stamp br { display: none; } .intro-visual { position: relative; background-color: #FFDD64; background: url(/itoozamobile/stockbot/default/intro_visual.png), linear-gradient(to bottom, rgb(255, 221, 100), rgb(255, 174, 100)); background-repeat: no-repeat; background-position: center center; background-size: 100%; padding: 40px 0 0 !important; } .intro-visual .slogan { margin: 0 0 40px 20px; } .intro-visual h1 { width: 80%; max-width: 300px; margin-top: 8px; } .intro-visual div.tagline { line-height: 1.4; margin-left: 8px; } .intro-visual p.stamp { position: absolute; right: 16px; top: 16px; font-size: 10px; letter-spacing: -0.03em; text-align: right; color: #212121; opacity: 0.5; } .intro-visual p.stamp br { display: none; } @media (max-width: 320px) { .intro-visual p.stamp { right: auto; margin-left: 26px; } } .intro-visual .foot-note { background-color: hsla(29, 100%, 50%, 0.6); color: white; font-size: 13px; word-break: keep-all; padding: 16px 10px; letter-spacing: -0.03rem; } .intro-visual .foot-note strong { color: #ffef0b; } .intro-feature { margin-bottom: 24px; } .intro-feature h3 { margin-bottom: 10px !important; } .intro-feature .intro-body { margin-left: 40px; margin-right: 40px; display: flex; align-items: flex-start; gap: 16px; } .intro-feature .item { margin-bottom: 28px; display: flex; flex-direction: column; width: 25%; } .intro-feature .item .img { grid-column: 1; grid-row: 1/span 2; width: 140px; height: 140px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -o-border-radius: 50%; background-color: #DBE0F4; display: flex; justify-content: center; align-items: center; margin: auto auto 26px; } .intro-feature .item .img img { width: 100%; height: 100%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -o-border-radius: 50%; } .intro-feature .item h4 { text-align: center; margin-bottom: 16px; } .intro-feature .item ul { color: #6C7285; text-indent: -4px; margin-left: 5px; } .intro-feature .item ul li { line-height: 1.4; margin-bottom: 4px; word-break: keep-all; font-size: 14px; letter-spacing: -0.03em; } .intro-feature .item ul li:before { content: ""; display: inline-block; width: 2px; height: 2px; background: #6C7285; margin: 0 4px 4px 0; } .intro-feature .item ul p { line-height: 1.4; margin-bottom: 4px; word-break: keep-all; font-size: 14px; letter-spacing: -0.03em; } .intro-feature .item p.item-desc { line-height: 1.4; margin-bottom: 4px; word-break: keep-all; color: #6C7285; font-size: 14px; } .intro-trophy { background-color: #F0F2F9 !important; } .intro-trophy .intro-body { max-width: 420px; margin-left: auto; margin-right: auto; padding-top: 24px; } .intro-trophy ul { max-width: 210px; margin-right: auto !important; margin-left: auto !important; text-indent: -42px; padding-left: 42px; } .intro-trophy ul li { font-size: 16px; word-break: keep-all; margin-bottom: 10px; line-height: 1.4; } .intro-trophy ul li small { font-size: 12px; color: #6C7285; } .intro-trophy ul li:before { content: ""; display: inline-block; background: url(/itoozamobile/stockbot/default/emoji_01.png) no-repeat center center/34px; width: 34px; height: 34px; margin: 0 8px -12px 0; } .intro-trophy ul li:nth-child(1):before { background-image: url(/itoozamobile/stockbot/default/emoji_01.png); } .intro-trophy ul li:nth-child(2):before { background-image: url(/itoozamobile/stockbot/default/emoji_02.png); } .intro-trophy ul li:nth-child(3):before { background-image: url(/itoozamobile/stockbot/default/emoji_03.png); } .intro-trophy .img img { width: 164px; display: block; margin: 0 auto -108px; } .intro-simple h3 { margin-top: 60px; } .intro-safe.bg-light { background-color: #FFF8DD; } .intro-sms { background-image: url(/itoozamobile/stockbot/default/intro_sms.png); background-repeat: no-repeat; background-position: center calc(100% - 33px); background-size: 100%; } .intro-sms .intro-body .img { visibility: hidden; } .intro-study { background-image: url(/itoozamobile/stockbot/default/intro_study.png); background-repeat: no-repeat; background-position: center calc(100% - 33px); background-size: 100%; } .intro-study .intro-body .img { visibility: hidden; } .intro-about h3 small { font-size: 20px; font-weight: 300; color: #6C7285; } .intro-about h3 strong { font-size: 38px; color: #192971; } .intro-about .item { -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; -o-border-radius: 8px; border: 1px solid #E9ECF6; padding: 20px 16px 16px 24px; margin-bottom: 16px; } .intro-about .item h4 { color: #192971; margin-bottom: 12px; } .intro-about .item h4:before { content: ""; display: inline-block; width: 6px; height: 6px; background: #6C7285; margin: 0 8px 6px 0; } .intro-about .item ul { color: #6C7285; text-indent: -7px; margin-left: 7px !important; } .intro-about .item ul li { line-height: 1.4; margin-bottom: 4px; word-break: keep-all; } .intro-about .item ul li:before { content: ""; display: inline-block; width: 2px; height: 2px; background: #6C7285; margin: 0 5px 4px 0; } .intro-term { padding: 60px 30px 70px; padding-bottom: 60px !important; margin-left: -24px; margin-right: -24px; } .intro-term h3 { color: #FCFCFC !important; font-size: 20px; } .intro-term.bg-dark { background-color: #515669 !important; color: #FCFCFC; } .intro-term .intro-body { padding-top: 30px !important; padding-bottom: 30px !important; } .intro-term * { background-color: transparent !important; color: #FCFCFC; border-color: #6C7285; } .intro-term .accordion { border-top: 1px solid #6C7285; border-bottom: 1px solid #6C7285; } .intro-term .accordion .accordion-button, .intro-term .accordion .accordion-button:focus { outline: none !important; font-size: 16px; font-weight: normal; padding-top: 24px; padding-bottom: 24px; } .intro-term .accordion-item { border-bottom-width: 1px; } .intro-term .accordion-item .accordion-body { padding: 24px 16px; } .intro-term .accordion-item .accordion-body h5 { margin: 0 0 16px; } .intro-term .accordion-item .accordion-body p + h5, .intro-term .accordion-item .accordion-body ul + h5 { margin-top: 24px; } .intro-term .accordion-item .accordion-body ul { text-indent: -6px; margin-left: 8px; } .intro-term .accordion-item .accordion-body li { line-height: 1.5; margin-bottom: 11px; font-size: 14px; word-break: keep-all; } .intro-term .accordion-item .accordion-body li:before { content: ""; display: inline-block; width: 2px; height: 2px; background: #FCFCFC; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -o-border-radius: 50%; margin: 0 4px 4px 0; } .intro-term .accordion-item .accordion-body .wrap { overflow: scroll; margin-left: -16px; margin-right: -16px; } .intro-term .accordion-item .accordion-body .wrap table.table { width: 100%; line-height: 1.2; } .intro-term .accordion-item .accordion-body .wrap table.table thead th { background: #3d4258 !important; color: #FCFCFC !important; border-bottom-color: #3a4158 !important; text-align: center; vertical-align: middle; font-size: 13px; border-right: 1px solid #515669; padding: 4px 2px; } .intro-term .accordion-item .accordion-body .wrap table.table thead th:last-of-type { border-right: none; } .intro-term .accordion-item .accordion-body .wrap table.table thead th:nth-child(1), .intro-term .accordion-item .accordion-body .wrap table.table thead th:nth-child(2), .intro-term .accordion-item .accordion-body .wrap table.table thead th:nth-child(3) { font-weight: bold; } .intro-term .accordion-item .accordion-body .wrap table.table thead th span { display: block; margin: 6px 0; } .intro-term .accordion-item .accordion-body .wrap table.table tbody th, .intro-term .accordion-item .accordion-body .wrap table.table tbody td { border-color: #3a4158 !important; text-align: center; vertical-align: middle; font-size: 13px; border-right: 1px solid #3a4158; padding: 4px 2px; } .intro-term .accordion-item .accordion-body .wrap table.table tbody th span, .intro-term .accordion-item .accordion-body .wrap table.table tbody td span { display: block; margin: 6px 0; } .intro-term .accordion-item .accordion-body .wrap table.table tbody th { line-height: 1.3; font-weight: bold; } .intro-term .accordion-item .accordion-body .wrap table.table tbody td:nth-child(1), .intro-term .accordion-item .accordion-body .wrap table.table tbody td:nth-child(2) { font-weight: bold; } .intro-term .accordion-item .accordion-body .wrap table.table tbody td:last-of-type { border-right: none; } .intro-term .accordion-item .accordion-body strong.red { color: #ff6e92; } .intro-term .accordion-button { padding-left: 0; } .intro-term .accordion-button:not(.collapsed) { color: #ff6e92 !important; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.125); } .intro-text { background: #F3EDE5; padding: 16px 8px 16px 22px; margin-bottom: 60px; font-size: 14px; letter-spacing: -0.03rem; } .intro-text strong { color: #B9272F; } .intro-text span { color: #B9272F; font-weight: bold; } button.btn.membership { max-width: calc(768px - 32px); color: #212121; font-size: 20px; font-weight: bold; border: none; } button.btn.membership strong { color: #192971; } button.btn[data=membership-first] { width: calc(100% - 24px); max-width: 250px; background-color: #4F3FC6; display: block; margin: 0 auto 16px; color: #FCFCFC; font-size: 14px; filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3)); -webkit-filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3)); } button.btn[data=membership] { width: 100%; font-family: "GmarketSans", "Spoqa Han Sans Neo", "Noto Sans KR", "Nanum Gothic", "MalgunGothic", Dotum, Lato, Roboto, Arial, sans-serif; background-color: #FFDD64; padding-top: 12px; padding-bottom: 12px; -webkit-border-radius: 16px 16px 0 0; -moz-border-radius: 16px 16px 0 0; -ms-border-radius: 16px 16px 0 0; border-radius: 16px 16px 0 0; -o-border-radius: 16px 16px 0 0; } button.btn[data=membership].z-3 { z-index: 3 !important; } .intro-text { word-break: keep-all; overflow-wrap: break-word; }