@charset "UTF-8"; @import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css); @import url(//fonts.googleapis.com/icon?family=Material+Icons); @import url(//fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap); @import url(//fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp); @import url(//fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200); @import url(https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css); html, body { height: 100%; margin: 0; padding: 0; } body { font-size: 100%; font-family: "Spoqa Han Sans Neo", "Noto Sans KR", "Nanum Gothic", "MalgunGothic", Dotum, Lato, Roboto, Arial, sans-serif; min-width: 360px; position: relative; display: flex; flex-direction: column; } *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; text-decoration: none; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } input, select, textarea { font-family: "Spoqa Han Sans Neo", "Noto Sans KR", "Nanum Gothic", "MalgunGothic", Dotum, Lato, Roboto, Arial, sans-serif; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; line-break: after-white-space; -webkit-user-select: auto; user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } /* Fonts */ /* Fonts */ /* 실적 타이틀 */ @font-face { font-family: "GmarketSans"; src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff") format("woff"); font-weight: 300; font-style: normal; } @font-face { font-family: "GmarketSans"; src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff") format("woff"); font-weight: 500; font-style: normal; } @font-face { font-family: "GmarketSans"; src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff") format("woff"); font-weight: 700; font-style: normal; } /* S-CoreDream = CoreGothic-E */ @font-face { font-family: "SCoreDream"; font-weight: 100; font-style: normal; src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream1.woff2) format("woff2"), url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream1.woff) format("woff"); font-display: swap; } @font-face { font-family: "SCoreDream"; font-weight: 200; font-style: normal; src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream2.woff2) format("woff2"), url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream2.woff) format("woff"); font-display: swap; } @font-face { font-family: "SCoreDream"; font-weight: 300; font-style: normal; src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream3.woff2) format("woff2"), url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream3.woff) format("woff"); font-display: swap; } @font-face { font-family: "SCoreDream"; font-weight: 400; font-style: normal; src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream4.woff2) format("woff2"), url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream4.woff) format("woff"); font-display: swap; } @font-face { font-family: "SCoreDream"; font-weight: 500; font-style: normal; src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream5.woff2) format("woff2"), url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream5.woff) format("woff"); font-display: swap; } @font-face { font-family: "SCoreDream"; font-weight: 600; font-style: normal; src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream6.woff2) format("woff2"), url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream6.woff) format("woff"); font-display: swap; } @font-face { font-family: "SCoreDream"; font-weight: 700; font-style: normal; src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream7.woff2) format("woff2"), url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream7.woff) format("woff"); font-display: swap; } @font-face { font-family: "SCoreDream"; font-weight: 800; font-style: normal; src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream8.woff2) format("woff2"), url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream8.woff) format("woff"); font-display: swap; } @font-face { font-family: "SCoreDream"; font-weight: 900; font-style: normal; src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream9.woff2) format("woff2"), url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream9.woff) format("woff"); font-display: swap; } .banner.strip { height: 44px; background: #ECEFF5; position: relative; } @media (max-width: 767px) { .banner.strip { background: #DAE6FF; height: 34px; } } .banner.strip .wrap { margin: 0 auto; height: 100%; text-align: center; } @media (max-width: 575px) { .banner.strip .wrap { margin: 0 18px 0 6px; } } .banner.strip a:hover { filter: brightness(110%); -webkit-filter: brightness(110%); cursor: pointer; } .banner.strip .view-pc { display: block; } @media (max-width: 767px) { .banner.strip .view-pc { display: none; } } .banner.strip .view-mobile { display: none; } @media (max-width: 767px) { .banner.strip .view-mobile { display: block; } } .banner.strip img { height: 100%; margin: 0 auto; } .banner.strip button.btn { position: absolute; right: 12px; top: 10px; cursor: pointer; width: 24px; height: 24px; } .banner.strip button.btn.btn_close { font-size: 0; background: url('data:image/svg+xml,') no-repeat center; opacity: 0.2; } .banner.strip button.btn.btn_close:hover { opacity: 1; } @media (max-width: 575px) { .banner.strip button.btn { right: 4px; top: 6px; } } /* Slider https://splidejs.com/ */ .splide__arrow { background: transparent; cursor: pointer; } .splide__arrow svg { fill: #000; opacity: 0.3; height: 24px; width: 24px; } .splide__arrow:hover svg { opacity: 1; } .my-slider-progress { background: #ccc; margin-top: 8px; } .my-slider-progress-bar { background: #3c4e9b; height: 2px; transition: width 400ms ease; width: 0; } /* // https://splidejs.com/ */ .layout { text-align: center; min-width: 360px; display: flex; flex-direction: column; height: 120%; flex: 1; } .text-left { text-align: left; } .text-right { text-align: right; } .blue_font { color: #05a3e5; } .positive, .stock-up, .gapup { color: #ff4848 !important; } .negative, .stock-down, .gapdown { color: #3c4e9b !important; } .neutral { color: #6C7285 !important; } .font-title { font-family: Outfit, "Spoqa Han Sans Neo", "Noto Sans KR", "Nanum Gothic", "MalgunGothic", Dotum, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .grecaptcha-badge { display: none !important; } img.btinfo { width: 14px; height: 14px; opacity: 0.3; vertical-align: middle; } .material-icons[class*=help] { color: #BFC5D3; font-size: 16px; vertical-align: middle; cursor: pointer; } .material-icons[class*=help].help-txt { cursor: help; } .d-none, .sr-only { display: none !important; } *[role=readonly] { display: none; } .login_info { display: inline-block; line-height: 1.4; padding: 10px 20px; margin: 24px auto; text-align: center; font-size: 14px; color: #858DA2; border-radius: 10px; word-break: keep-all; } .login_info .login-title { color: #3c4e9b; font-size: 18px; margin-bottom: 16px; } .login_info strong { font-weight: bold; } .req_login { text-align: center; } .social-login { display: flex; list-style: none; margin: 0 auto 70px; padding: 0 20px; justify-content: center; gap: 16px; } @media (max-width: 767px) { .social-login { flex-direction: column; max-width: 360px; margin-bottom: 20px; gap: 8px; } } .social-login li { text-align: center; } .social-login li a { display: block; padding: 22px 35px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border: 1px solid #E0E0E0; color: #212121; -moz-transition: 0.5s; -o-transition: 0.5s; -webkit-transition: 0.5s; transition: 0.5s; } @media (max-width: 767px) { .social-login li a { padding: 10px; display: flex; gap: 16px; } } .social-login li a img { width: 36px; display: block; margin: 24px auto 39px; } @media (max-width: 767px) { .social-login li a img { width: 26px; margin: auto; flex: 0; } } .social-login li a span { display: block; margin: 20px 0 0; } @media (max-width: 767px) { .social-login li a span { flex: 1; text-align: center; margin: auto; } } .social-login li a:hover { border-color: #3c4e9b; } .social-login li a:hover img { width: 42px; } /* 모달 팝업 기본 배경 */ .modal { position: fixed; display: none; top: 0; z-index: 2; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); } /* 스톡워치에 바란다 */ .pop_request { position: fixed; display: none; z-index: 2; top: 130px; left: calc(50% - 768px / 2); width: 768px; border: 1px solid #a0a0a0; border-radius: 8px; background-color: #fff; min-height: 20vh; transition: 0.3s; text-align: left; } @media (max-width: 575px) { .pop_request { top: 100px; } } .pop_request .header { border-radius: 8px 8px 0 0; display: flex; align-items: center; position: relative; margin: 0 !important; } .pop_request .header:after { content: ""; height: 2px; background: #ededed; width: calc(100% - 40px); margin: 0 auto; position: absolute; bottom: 0; left: 20px; } .pop_request .header .title { font-size: 20px; color: #1e1e1e; font-weight: bold; text-align: center; margin: 16px 0 16px 26px; flex: 1; text-align: left; } @media (max-width: 767px) { .pop_request .header .title { font-size: 16px; } } .pop_request .header .title .blue_font { color: #569bf7; } .pop_request .header .close { flex: 0; margin-left: auto; } .pop_request .header .close button { cursor: pointer; border: none; background: none; } .pop_request .header .close button .material-icons { font-size: 40px; opacity: 0.3; } .pop_request .requests { padding: 30px 30px 30px 20px; } @media (max-width: 767px) { .pop_request .requests { padding: 16px; } } .pop_request .requests .sub_title { font-size: 16px; color: #282828; margin-top: 23px; } .pop_request .requests .reqCont, .pop_request .requests .reqInfo { display: flex; white-space: nowrap; margin-bottom: 16px; } @media (max-width: 767px) { .pop_request .requests .reqCont, .pop_request .requests .reqInfo { flex-direction: column; gap: 8px; } } .pop_request .requests .reqCont label, .pop_request .requests .reqInfo label { margin-right: 16px; margin-top: 10px; width: 12%; text-align: left; } @media (max-width: 767px) { .pop_request .requests .reqCont label, .pop_request .requests .reqInfo label { margin: 0; width: auto; } } .pop_request .requests .reqCont .material-icons, .pop_request .requests .reqInfo .material-icons { vertical-align: -4px; font-size: 20px; margin-right: 2px; color: #569bf7; } .pop_request .requests textarea { width: calc(100% - 32px); height: 300px; resize: none; padding: 16px; font-size: 16px; font-family: "Spoqa Han Sans Neo", "Noto Sans KR", "Nanum Gothic", "MalgunGothic", Dotum, Lato, Roboto, Arial, sans-serif; color: #222; line-height: 1.5; border-radius: 4px; background: #faf9f9; border: 1px solid #d1d1d1; } @media (max-width: 767px) { .pop_request .requests textarea { width: 100%; padding: 8px; height: 200px; } } @media (max-width: 575px) { .pop_request .requests textarea { height: 120px; } } .pop_request .requests textarea::placeholder { color: #888; } .pop_request .requests input[type=text] { width: calc(100% - 20px); padding: 10px; font-size: 16px; font-family: "Spoqa Han Sans Neo", "Noto Sans KR", "Nanum Gothic", "MalgunGothic", Dotum, Lato, Roboto, Arial, sans-serif; color: #222; border-radius: 4px; background: #faf9f9; border: 1px solid #d1d1d1; } @media (max-width: 767px) { .pop_request .requests input[type=text] { width: 100%; padding: 8px; } } .pop_request .requests input[type=text]::placeholder { color: #888; } .pop_request .requests input[type=checkbox] { all: revert; width: 14px !important; } @media (max-width: 767px) { .pop_request .requests input[type=checkbox] { width: 14px; } } .pop_request .requests .req_count { text-align: right; font-size: 12px; margin: -8px 0 16px 0; color: #858DA2; } @media (max-width: 767px) { .pop_request .requests .req_count { margin-top: -12px; margin-bottom: 0px; } } .pop_request .requests .reqPrivacy { text-align: center; margin: 36px 0; } @media (max-width: 767px) { .pop_request .requests .reqPrivacy { margin-top: 20px; margin-bottom: 20px; text-align: left; font-size: 14px; word-break: keep-all; } } .pop_request .requests .reqBtn { text-align: center; } .pop_request .requests .reqBtn button { border: none; border-radius: 4px; padding: 8px 32px; background-color: #569bf7; font-size: 20px; font-weight: bold; color: #fff; cursor: pointer; } @media (max-width: 767px) { .pop_request .requests .reqBtn button { font-size: 16px; } } @media (max-width: 991px) { .pop_request { width: calc(100% - 40px); max-width: 768px; margin: 0 20px; left: 0; } .pop_request .requests .reqPrivacy { text-indent: -24px; margin-left: 24px; } } /* 메인, 공지용 팝업 */ .pop_notice { position: fixed; background: white; top: 200px; left: 20vw; display: none; max-width: 500px; min-width: 200px; } .pop_notice .util { background: #333; color: #FFF; text-align: right; font-size: 12px; } .pop_notice .util button i.material-icons { font-size: 12px; display: inline-block; vertical-align: middle; } .pop_notice .util button.today { padding: 6px 0 6px 8px; border: 0; background: none; color: #999; font-size: 14px; vertical-align: middle; cursor: pointer; } .pop_notice .util button.today:after { content: ""; display: inline-block; margin: 0 5px -2px 10px; background: #676767; width: 1px; height: 12px; } .pop_notice .util button.close { padding: 6px 8px 6px 0; border: 0; background: none; color: #999; font-size: 14px; vertical-align: middle; cursor: pointer; color: #FFF; } .pop_notice .main .slogan img { display: block; width: 100%; } .pop_notice .main .btn { display: flex; justify-content: space-between; } .pop_notice .main .btn.btn2 a { display: block; width: 50%; } .pop_notice .main .btn.btn2 img { display: block; width: 100%; } @media (max-width: 767px) { .pop_notice { position: absolute; } } @media (max-width: 575px) { .pop_notice { top: 220px; left: 16px; position: absolute; min-width: 284px; width: calc(100% - 40px); } .pop_notice .main { width: 100% !important; } .pop_notice .main img { width: 100% !important; height: auto !important; } } /* 메인 "모달" 팝업 */ .pop_notice.pop_modal { width: 100%; height: 100%; position: absolute; top: 0; left: auto; max-width: 100%; min-width: auto; background: none; } .pop_notice.pop_modal .modal { display: block; } .pop_notice.pop_modal .main { position: relative; max-width: 100%; margin: 120px auto auto; z-index: 101; } @media (max-width: 767px) { .pop_notice.pop_modal .main { margin-right: 20px; margin-left: 20px; width: calc(100% - 40px) !important; } } @media screen and (max-width: 576px) { .pop_notice.pop_modal .main { width: calc(100% - 40px) !important; position: fixed; } } .pop_notice.pop_modal .main .slogan img.mobile { display: none; } @media screen and (max-width: 576px) { .pop_notice.pop_modal .main .slogan img.pc { display: none; } .pop_notice.pop_modal .main .slogan img.mobile { display: block; } } .pop_notice.pop_modal .main .util-on { position: absolute; right: 26px; top: 24px; } .pop_notice.pop_modal .main .util-on button { border: none; padding: 0; margin: 0; vertical-align: top; background: none; cursor: pointer; } .pop_notice.pop_modal .main .util-on button.today { font-size: 16px; color: #616161; opacity: 0.5; margin: 8px; } .pop_notice.pop_modal .main .util-on button.close { color: #616161; opacity: 0.5; height: 40px; } .pop_notice.pop_modal .main .util-on button.close span.bar { display: inline-block; width: 40px; height: 1px; background: #999; transform: rotate(45deg); } .pop_notice.pop_modal .main .util-on button.close span.bar + span.bar { transform: rotate(-45deg); margin-left: -40px; } .pop_notice.pop_modal .main .util-on button.close span[role=readonly] { display: none; } .pop_notice.pop_modal .main .util-on button:hover { transition: 0.3s; opacity: 1; } @media (max-width: 575px) { .pop_notice.pop_modal .main .util-on { right: 10px; top: 10px; } } /* ---------------------------- Captcha 모달 팝업 */ #vscore_block.modal { position: fixed; top: 0; left: 0; z-index: 101; width: 100%; height: 100%; background-color: #000000; opacity: 0.8; display: block; } #idxBooks { display: block; width: calc(100% - 60px); overflow: hidden; border-bottom: 1px solid #DEE4EC; margin: 0 30px 20px; padding-bottom: 20px; /* Exact height */ } @media (max-width: 991px) { #idxBooks { margin-right: 0; margin-left: 0; width: calc(100% - 8px); } } @media (max-height: 360px) { #idxBooks { display: none; } } #idxBooks .head { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #EAEEF4; margin-bottom: 24px; } #idxBooks .head h4 { margin: 16px 0; letter-spacing: -0.02em; } #idxBooks .head h4:before { content: ""; display: inline-block; border: 4px solid #f47d09; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -o-border-radius: 50%; width: 5px; height: 5px; margin-right: 6px; } #idxBooks .head h4 small { font-weight: normal; font-size: 12px; color: #BFC5D3; margin-left: 4px; } @media (max-width: 359px) { #idxBooks .head h4 small { display: none; } } #idxBooks .head a.more { color: #868686; font-size: 14px; } #idxBooks .head a.more:after { content: ""; display: inline-block; border-width: 1px 1px 0 0; border-color: #f47d09; border-style: solid; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); width: 4px; height: 4px; margin: 4px; } #idxBooks .head a.more:hover { color: #263fb0; } #idxBooks .body ul { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 0; margin: 0; list-style: none; } #idxBooks .body ul li { width: 25%; } #idxBooks .body ul li img { display: block; width: 100%; margin-bottom: 10px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px; -o-border-radius: 6px; } #idxBooks .body ul li img.border { border: 1px solid #dadada; width: calc(100% - 2px); } #idxBooks .body ul li div.title { color: #222; word-break: keep-all; letter-spacing: -0.02em; font-size: 15px; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 991px) { #idxBooks .body ul li div.title { font-size: 13px; } } @media (max-width: 359px) { #idxBooks .body ul li div.title { font-size: 12px; } } #idxBooks .body ul li a:hover img { filter: brightness(110%); -webkit-filter: brightness(110%); } #idxBooks .body ul li a:hover div.title { color: #263fb0; } @media (max-width: 359px) { #idxBooks .body ul li { width: 50%; } #idxBooks .body ul li:nth-child(3), #idxBooks .body ul li:nth-child(4) { display: none; } } .vscore_block_form { position: fixed; z-index: 102; top: 25%; left: calc(50% - 768px / 2); width: 768px; border: 1px solid #a0a0a0; border-radius: 8px; background-color: #fff; min-height: 30vh; transition: 0.3s; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; } @media (max-width: 991px) { .vscore_block_form { width: calc(100% - 58px); max-width: calc(992px - 42px); min-width: 320px; margin: auto; left: 8px; } } @media (max-width: 767px) { .vscore_block_form { min-width: calc(320px - 58px); } } @media (max-width: 575px) { .vscore_block_form { top: auto; bottom: -8px; } } @media (max-height: 836px) { .vscore_block_form { top: auto; bottom: -6px; } } .vscore_block_form form { border: none; text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column; margin: 40px 10px; } @media (max-width: 575px) { .vscore_block_form form { margin-top: 16px; margin-bottom: 16px; } } .vscore_block_form button { border: none; line-height: 1; padding: 14px 40px !important; font-size: 20px; font-weight: bold; background: #3c4e9b; color: white; transition: all 0.5s; outline: none; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; vertical-align: middle; white-space: nowrap; cursor: pointer; position: relative; font-family: "Spoqa Han Sans Neo", "Noto Sans KR", "Nanum Gothic", "MalgunGothic", Dotum, Lato, Roboto, Arial, sans-serif !important; letter-spacing: -0.02em; } .vscore_block_form button .material-icons { opacity: 0; color: #00ff00; position: absolute; transition: all 0.5s; font-size: 30px; left: 10px; top: 9px; } .vscore_block_form button:hover { filter: brightness(130%); padding: 14px 40px 14px 60px !important; } .vscore_block_form button:hover .material-icons { opacity: 1; display: inline-block; left: 20px; } .vscore_block_form button:active { filter: brightness(90%); -webkit-filter: brightness(90%); transform: translateY(4px); -webkit-transform: translateY(4px); -moz-transform: translateY(4px); -ms-transform: translateY(4px); -o-transform: translateY(4px); } .vscore_block_form .gpolicy { display: flex; margin-top: 20px; align-items: center; } .vscore_block_form .rc-anchor-logo-img { background: url(https://www.gstatic.com/recaptcha/api2/logo_48.png); background-repeat: no-repeat; transition: all 0.3s ease; background-size: 40px; margin: 5px 8px 0 0px; height: 40px; width: 40px; } .vscore_block_form .rc-anchor-text { display: flex; flex-direction: column; font-size: 13px; font-weight: 400; white-space: nowrap; color: #212121; line-height: 1.5; } .vscore_block_form .rc-anchor-text a { color: #263fb0; } .vscore_block_form .rc-anchor-text a:hover { text-decoration: underline; } .paging { margin: 50px; } @media (max-width: 767px) { .paging { margin: 40px 4px; } } .paging ul.pagination { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 15px; } @media (max-width: 767px) { .paging ul.pagination { font-size: 13px; gap: 6px; flex-wrap: wrap; } } .paging ul.pagination li[aria-label*=pagination] { display: block; max-width: 26px; border-radius: 4px; background: none; border: 1px solid #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; } @media (max-width: 767px) { .paging ul.pagination li[aria-label*=pagination] { margin: 0; } } .paging ul.pagination li a { color: #BFC5D3; display: block; padding: 0 4px; } .paging ul.pagination li a:visited { color: #BFC5D3; } .paging ul.pagination li a:hover { color: #212121; } .paging ul.pagination li a[aria-label*=pagination] { display: block; max-width: 26px; border-radius: 4px; background: #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: #3c4e9b; font-weight: light; } .paging ul.pagination li.active { color: #3c4e9b; font-weight: bold; padding: 0 6px; } .paging ul.pagination li.disabled { color: #BFC5D3; } .right > .paging { margin: 0; } /* QuickLink icon */ .qlink { position: fixed; display: flex; right: 20px; bottom: 120px; border-radius: 50%; width: 50px; height: 50px; overflow: hidden; color: white; font-size: 12px; word-break: keep-all; cursor: pointer; transition: 0.3s; background-color: #569bf7; background: rgba(86, 155, 247, 0.7); -webkit-backdrop-filter: blur(2px) brightness(68%); backdrop-filter: blur(2px) brightness(68%); z-index: 999; } .qlink span { align-self: center; } .qlink span.material-icons { font-size: 33px; text-align: center; margin: auto; } .qlink span.txt { display: none; } .qlink:hover, .qlink:active { width: 200px; border-radius: 30px 0 0 30px; right: 0; } .qlink:hover span.material-icons, .qlink:active span.material-icons { margin: auto auto auto 16px; } .qlink:hover span.txt, .qlink:active span.txt { display: block !important; margin: auto; font-size: 15px; white-space: nowrap; } @media mobile-max { .qlink { right: 10px; bottom: 20px; } } .qlink-scrolled { position: fixed; display: flex; right: 20px; bottom: 130px; } .qlink-scrolled a.btn { display: flex; justify-content: center; align-items: center; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -o-border-radius: 50%; width: 50px; height: 50px; overflow: hidden; color: white; font-size: 12px; word-break: keep-all; cursor: pointer; transition: 0.3s; background-color: #919191; background: rgba(204, 207, 211, 0.4); -webkit-backdrop-filter: blur(2px) brightness(68%); backdrop-filter: blur(2px) brightness(68%); z-index: 999; } .qlink-scrolled a.btn:hover, .qlink-scrolled a.btn:active { background: rgb(204, 207, 211); } @media (max-width: 767px) { .qlink-scrolled a.btn { width: 40px; height: 40px; } } @media (max-width: 575px) { .qlink-scrolled { right: 8px; bottom: 90px; } } /* Favorite */ button.favorite { width: 24px; height: 24px; cursor: pointer; -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s; border: none; outline: none; background: transparent url('data:image/svg+xml,') no-repeat center; } button.favorite:not(.on):hover, button.favorite:not(.on):focus { -webkit-filter: brightness(80%); -moz-filter: brightness(80%); -ms-filter: brightness(80%); -o-filter: brightness(80%); filter: brightness(80%); } button.favorite.on { background: url('data:image/svg+xml,') no-repeat center; } button.favorite.on:hover, button.favorite.on:focus { background: url('data:image/svg+xml,') no-repeat center; } /* Reactions : Like */ button.like { -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; -o-border-radius: 8px; background: #ffffff; border: 1px solid #BFC5D3; border-color: #BFC5D3 !important; display: flex; align-items: center; justify-content: center; gap: 8px; } button.like .icon { font-size: 0px; display: inline-block; width: 24px; height: 24px; -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s; border: none; outline: none; background: transparent url('data:image/svg+xml,') no-repeat center; } button.like .num { font-weight: normal; } button.like.on .icon { background: url('data:image/svg+xml,') no-repeat center; } button.like.on .num { font-weight: bold; } button.like:hover { background: rgb(255, 223, 223); border-color: rgb(255, 182, 182) !important; } button.like:hover .icon { background: url('data:image/svg+xml,') no-repeat center; } button.like:not(.on):hover .icon { -webkit-filter: brightness(140%); -moz-filter: brightness(140%); -ms-filter: brightness(140%); -o-filter: brightness(140%); filter: brightness(140%); opacity: 0.6; } body *::-webkit-scrollbar { width: 6px; height: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px; -o-border-radius: 6px; } body *::-webkit-scrollbar-thumb { background-color: #BFC5D3; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px; -o-border-radius: 6px; } body *::-webkit-scrollbar-track { background-color: #ECEFF5; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px; -o-border-radius: 6px; } /* Slider */ /* loading spinner - 2022.11.14 Loading spinner */ .loading { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; background-color: none; width: 96%; height: 100%; transition: all 0.3s ease; z-index: 999; } .loading.blurry { background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(4px); } .loading.modal { position: fixed; left: 0; top: 0; width: 100%; } .loading.layer { position: fixed; left: 50%; top: 50%; width: auto; height: auto; padding: 40px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; border-radius: 100px; -o-border-radius: 100px; } .loading.layer.blurry { background-color: rgba(255, 255, 255, 0.4); backdrop-filter: blur(4px); } .lds-ellipsis { display: inline-block; position: absolute; width: 80px; height: 80px; } .lds-ellipsis div { position: absolute; top: 33px; width: 13px; height: 13px; border-radius: 50%; background: #3c4e9b; animation-timing-function: cubic-bezier(0, 1, 1, 0); } .lds-ellipsis div:nth-child(1) { left: 8px; animation: lds-ellipsis1 0.6s infinite; -webkit-animation: lds-ellipsis1 0.6s infinite; } .lds-ellipsis div:nth-child(2) { left: 8px; animation: lds-ellipsis2 0.6s infinite; } .lds-ellipsis div:nth-child(3) { left: 32px; animation: lds-ellipsis2 0.6s infinite; } .lds-ellipsis div:nth-child(4) { left: 56px; animation: lds-ellipsis3 0.6s infinite; } @keyframes lds-ellipsis1 { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes lds-ellipsis3 { 0% { transform: scale(1); } 100% { transform: scale(0); } } @keyframes lds-ellipsis2 { 0% { transform: translate(0, 0); } 100% { transform: translate(24px, 0); } } /* Loading spinner : 2024.07.22 돌아가는 형태 */ .spinner { margin: auto; } .spinner svg { width: 3.75em; transform-origin: center; animation: rotate 2s linear infinite; -webkit-animation: rotate 2s linear infinite; } .spinner circle { fill: none; stroke: #00b25f; stroke-width: 4; stroke-dasharray: 1, 200; stroke-dashoffset: 0; stroke-linecap: round; animation: dash 1.5s ease-in-out infinite; } @keyframes rotate { 100% { transform: rotate(360deg); } } @keyframes dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 200; stroke-dashoffset: -35px; } 100% { stroke-dashoffset: -125px; } } /* Header */ #header { width: 100%; margin: 0 auto; position: relative; background: #ffffff; } #header .inner-wide { width: 1024px; margin: 0 auto; padding: 28px 0 24px; position: relative; display: flex; justify-content: space-between; align-items: center; } @media (max-width: 991px) { #header .inner-wide { width: auto; flex-direction: column; } } #header .inner-wide .google-auto-placed { display: none !important; } #header #utility_nav { position: absolute; right: 0; top: 0; z-index: 1; font-size: 15px; white-space: nowrap; overflow-x: hidden; } #header #utility_nav ul { list-style: none; margin: 10px 4px 0 0; padding: 0; display: flex; gap: 8px; } @media (max-width: 575px) { #header #utility_nav ul { margin-top: 4px; } } #header #utility_nav ul li[role=timestamp] { font-size: 14px; color: #3c4e9b; } @media (max-width: 991px) { #header #utility_nav ul li[role=timestamp] { font-size: 13px; } } #header #utility_nav ul li a { color: #3c4e9b; } @media (max-width: 991px) { #header #utility_nav ul li a { font-size: 13px; } } #header #utility_nav ul li a:before { content: "\e897"; display: inline-block; font-family: "Material Icons Outlined"; vertical-align: -2px; margin: 0 2px 0 0; color: #3c4e9b; opacity: 0.5; } #header #utility_nav ul li a[href$="/login"]:before { content: "\e897"; } #header #utility_nav ul li a[href$="/logout"] { color: #212121; } #header #utility_nav ul li a[href$="/logout"]:before { content: "\e853"; } #header #utility_nav ul li a[role^=admin] { color: #ff4848; } #header #utility_nav ul li a[role^=admin]:before { content: "\e8e8"; color: #ff4848; } #header #utility_nav ul li a[role^=admin]:before:hover { color: #ff4848; } #header #utility_nav ul li a:hover { filter: brightness(140%); -webkit-filter: brightness(140%); cursor: pointer; } #header #utility_nav ul li a:hover { color: #263fb0; } #header #utility_nav ul li a:hover:before { color: #263fb0; } #header #promotion a.service-quant { display: block; } #header #promotion a.service-quant img { display: block; } #header #promotion a.service-quant span { display: block; color: #939393; letter-spacing: -0.03em; font-size: 12px; margin-top: 4px; } @media (max-width: 991px) { #header #promotion { display: none; } } #header #brand { display: flex; align-items: center; margin-left: 50px; } #header #brand a { cursor: pointer; display: flex; } #header #brand a span { display: block; position: relative; } #header #brand a img { height: 100%; } #header #brand a.itooza { height: 60px; } #header #brand a.itooza span { width: 159px; } @media (max-width: 767px) { #header #brand a.itooza { height: 50px; } #header #brand a.itooza span { width: 132px; } } #header #brand a.stockwatch { height: 23px; } #header #brand a.stockwatch span { width: 96px; } @media (max-width: 767px) { #header #brand a.stockwatch { height: 16px; margin-top: 4px; } #header #brand a.stockwatch span { width: 67px; } } #header #brand .txt { font-size: 12px; color: #868686; margin: 8px 6px 0; } @media (max-width: 767px) { #header #brand .txt { font-size: 11px; } } @media (max-width: 991px) { #header #brand { order: 1; margin: 14px 0 14px 8px; } } #header #searchbox { position: relative; text-align: left; background: #ECEFF5; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; -o-border-radius: 4px; width: 270px; line-height: 15px; padding: 6px 8px; vertical-align: middle; display: flex; align-items: center; align-self: end; position: relative; } @media (max-width: 991px) { #header #searchbox { order: 2; align-self: center; border: 3px solid #3c4e9b; width: 364px; padding-top: 4px; padding-bottom: 4px; padding-left: 6px; } } @media (max-width: 575px) { #header #searchbox { width: 284px; padding-top: 2px; padding-bottom: 2px; } } #header #searchbox form { display: flex; align-items: center; justify-content: space-between; width: 100%; } #header #searchbox .search_title { white-space: nowrap; color: #394055; background: #D8DDE7; padding: 6px 8px; line-height: 1; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; border-radius: 2px; -o-border-radius: 2px; font-size: 13px; } #header #searchbox .search_title span { display: none; } #header #searchbox input[type=text] { border: 0px solid white; background: transparent; outline: none; font-size: 16px; font-weight: bold; line-height: 1; color: #3c4e9b; max-width: 668px; width: calc(100% - 38px); padding: 4px 12px; } #header #searchbox input[type=text]::placeholder { color: #868686; font-weight: normal; font-size: 14px; } #header #searchbox input[type=text]:focus { outline: none; } #header #searchbox input[type=text]:focus::-webkit-input-placeholder, #header #searchbox input[type=text]:focus:-moz-placeholder, #header #searchbox input[type=text]:focus::-moz-placeholder, #header #searchbox input[type=text]:focus:-ms-input-placeholder { color: transparent; } @media (max-width: 767px) { #header #searchbox input[type=text] { font-size: 14px; padding: 8px 5px; } } @media (max-width: 319px) { #header #searchbox input[type=text] { font-size: 14px; } } #header #searchbox input[type=image] { margin-top: -4px; margin-left: auto; cursor: pointer; width: 24px; height: 24px; padding: 4px 2px 4px 6px; } #header #searchbox .search_err, #header #searchbox .subsearch_err { color: #ff2849; font-size: 12px; position: absolute; right: calc(40% - 30px); } #header #searchbox .similar { position: absolute; z-index: 2; width: 284px; font-size: 14px; top: 54px; left: 1px; margin-top: -12px; background: rgba(255, 255, 255, 0.83); -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px; -o-border-radius: 6px; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } #header #searchbox .similar dl { border: 1px solid #D8DDE7; border-width: 0 1px 0; padding: 0 16px; margin: 0; cursor: pointer; text-align: left; font-weight: normal; } #header #searchbox .similar dl dd { margin: 0; padding: 8px; font-size: 16px; line-height: 1.4; border-bottom: 1px solid #D8DDE7; } #header #searchbox .similar dl dd:hover { background-color: #3c4e9b; border-color: transparent; color: #FCFCFC; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; -o-border-radius: 8px; } #header #searchbox .similar dl:first-of-type { border-width: 1px 1px 0; -webkit-border-radius: 6px 6px 0 0; -moz-border-radius: 6px 6px 0 0; -ms-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; -o-border-radius: 6px 6px 0 0; padding-top: 16px; } #header #searchbox .similar dl:last-of-type { border-width: 0 1px 1px; -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; -ms-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; -o-border-radius: 0 0 6px 6px; padding-bottom: 16px; } #header #searchbox .similar dl:last-of-type dd { border-bottom: 0; } #header #searchbox .similar.sub { position: absolute; z-index: 9999; background: #f3f3f3; width: 256px; font-size: 14px; margin-left: 748px; margin-top: 55px; overflow: visible; } @media (max-width: 991px) { #header #searchbox .similar.sub { margin: -27px auto 0; max-width: 773px; width: calc(100% - 60px); right: calc((100% - 773px) / 2); } } @media screen and (max-width: 830px) { #header #searchbox .similar.sub { margin: -27px auto 0; right: 29px; max-width: 823px; width: calc(100% - 60px); } } @media (max-width: 767px) { #header #searchbox .similar.sub { width: calc(100% - 32px); right: 16px; margin: -27px auto 0; } } #promotion_content { display: none; border: 1px solid #CDCCCD; background: linear-gradient(180deg, #FFF 0%, #F5F5F5 100%); } #promotion_content a { display: flex; justify-content: center; align-items: center; background: url('data:image/svg+xml,') no-repeat calc(100% - 12px) center; } #promotion_content a img { height: 20px; margin: 8px; } #promotion_content a span { color: #6F778C; font-size: 11px; } @media (max-width: 991px) { #promotion_content { display: block; max-width: calc(576px - 12px); min-width: calc(360px -12px); width: 100%; margin: 16px auto; grid-column: 1/span 4; } } @media (max-width: 575px) { #promotion_content { width: calc(100% - 24px); margin: 12px auto 24px; } } /* Footer */ #foot { background: #F9FAFB; border-top: 1px solid #E4E8EB; text-align: left; font-size: 13px; letter-spacing: -0.03em; } #foot .foot-inner { width: 1024px; min-width: 1024px; margin: 0 auto; padding: 20px 0 8px; position: relative; } @media (max-width: 991px) { #foot .foot-inner { max-width: calc(992px - 40px); min-width: calc(360px - 40px); padding: 0 10px; width: calc(100% - 40px); padding: 20px 20px 8px; display: flex; flex-direction: column; } } #foot h3, #foot h4, #foot ul { padding: 0; margin: 0; list-style: none; } #foot a { color: #212121; } #foot a:hover { color: #263fb0; } #foot .fnb { border-bottom: 1px solid #E4E8EB; padding-bottom: 16px; margin-bottom: 16px; display: flex; } @media (max-width: 991px) { #foot .fnb { flex-direction: column; margin-bottom: 4px; } } #foot .fnb img { margin-right: 20px; width: 160px; vertical-align: middle; display: none; } #foot .fnb ul { display: flex; gap: 16px; } @media (max-width: 991px) { #foot .fnb ul { flex-wrap: wrap; justify-content: center; row-gap: 4px; } } #foot .fnb ul.services { border-right: 1px solid #E4E8EB; margin-right: 16px; padding-right: 16px; } @media (max-width: 991px) { #foot .fnb ul.services { border-right: none; margin-right: 0; padding-right: 0; margin-bottom: 12px; font-weight: bold; } } #foot .fnb ul.services li { font-size: 14px; } #foot .fnb ul.terms li { font-size: 14px; } @media (max-width: 575px) { #foot .fnb ul.terms li { font-size: 12px; } } #foot .fnb ul.terms li a { color: #6F778C; } #foot .fnb ul li { letter-spacing: -0.03em; } #foot .fnb ul li i { font-size: 13px; opacity: 0.4; } #foot .newspaper { padding: 0; margin: 0 0 10px; } #foot .newspaper h4 { margin-right: 8px; display: inline-block; font-size: 12px; } #foot .newspaper ul { display: inline-block; } #foot .newspaper li { margin-right: 8px; display: inline-block; font-size: 12px; } #foot .newspaper li:last-of-type { margin-right: 0; } #foot .newspaper .info { margin-top: 10px; font-size: 12px; color: #ababab; } @media (max-width: 991px) { #foot .newspaper .info { margin-bottom: 0; } } @media (max-width: 991px) { #foot .newspaper { padding: 4px 0 0px; margin: 4px 0 0; line-height: 1.4; } } #foot .contact { padding: 0; margin: 8px 0 10px; } #foot .contact h4 { margin-right: 12px; display: inline-block; font-size: 12px; display: none; } #foot .contact ul { display: inline-block; } #foot .contact li { margin-right: 8px; display: inline-block; font-size: 12px; } #foot .contact li:last-of-type { margin-right: 0; } @media (max-width: 991px) { #foot .contact { padding: 16px 0 0px; margin: 8px 0; line-height: 1.4; } } #foot .company { border-top: 1px solid #E4E8EB; padding: 16px 0 0; margin: 16px 0 10px; } #foot .company h4 { margin-right: 8px; display: inline-block; font-size: 12px; } #foot .company ul { display: inline-block; } #foot .company li { margin-right: 8px; display: inline-block; font-size: 12px; } #foot .company li:last-of-type { margin-right: 0; } @media (max-width: 991px) { #foot .company { padding: 4px 0 0px; margin: 4px 0; line-height: 1.4; } } #foot .network { float: right; padding: 8px 4px 8px 16px; font-size: 13px; border-left: 1px solid #E4E8EB; background: #F9FAFB; min-width: 116px; } #foot .network h3 { margin-bottom: 20px; color: #CB0017; } #foot .network li { margin-bottom: 10px; } #foot .network li:last-of-type { margin-bottom: 0; } #foot .network li a { transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; } #foot .network li a:hover:before { content: "-"; display: inline-block; padding-right: 4px; } @media (max-width: 991px) { #foot .network { float: none; order: 4; min-width: auto; border: none; padding-left: 0; padding-right: 0; } #foot .network h3, #foot .network ul, #foot .network li { display: inline-block; font-size: 12px; } #foot .network h3 { margin-bottom: 0; margin-right: 8px; } #foot .network li { margin: 0 8px; } } /* ---------------------------- Footer partners logo scroll */ .partners { background: white; border-top: 1px solid #E4E8EB; margin-top: auto; } .partners .title { display: none; } .partners .brand-wheel { flex-direction: row; align-items: center; display: flex; overflow: hidden; position: relative; height: 50px; --animationspeed: 60s; --animationdelay: calc(var(--animationspeed) / 2); } .partners .brand-wheel::before { position: absolute; background-image: linear-gradient(to right, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%); content: ""; height: 100%; width: 5%; z-index: 1; pointer-events: none; } .partners .brand-wheel::after { position: absolute; background-image: linear-gradient(to left, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%); content: ""; height: 100%; width: 5%; z-index: 1; pointer-events: none; right: 0; } .partners .brand-wheel .brand-slide { flex-shrink: 0; position: absolute; animation-name: slidelogo; animation-duration: var(--animationspeed); animation-timing-function: linear; animation-iteration-count: infinite; min-width: 100%; display: flex; justify-content: space-around; margin: 0; padding: 0; } .partners .brand-wheel .brand-slide.delay { transform: translateX(100%); animation-name: slidelogo2; } .partners .brand-wheel .brand-slide img { max-height: 26px; } .partners .brand-wheel:hover .brand-slide { animation-play-state: paused; } .partners .brand-item { display: inline-flex; align-self: center; animation: fade-in 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards; padding: 0 20px; -webkit-animation: fade-in 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards; } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes slidelogo { from { transform: translateX(0%); } to { transform: translateX(-100%); } } @keyframes slidelogo2 { from { transform: translateX(100%); } to { transform: translateX(0%); } } #main_nav { width: 100%; min-width: 360px; background-color: #3c4e9b; } #main_nav.main_menufix { position: fixed; top: 0; animation: down 0.5s ease; z-index: 10; width: 100%; background-color: rgba(1, 26, 130, 0.74); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } #main_nav ul { width: 1024px; margin: 0 auto; display: grid; grid-template-columns: auto auto auto auto auto; list-style: none; padding-left: 0; } @media (max-width: 991px) { #main_nav ul { width: auto; } } #main_nav li { text-align: center; } #main_nav li a { display: block; padding: 16px 0; color: #FCFCFC; text-decoration: none; font-size: 18px; font-weight: bold; white-space: nowrap; cursor: pointer; -webkit-cursor: pointer; -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s; } @media (max-width: 575px) { #main_nav li a { font-size: 16px; letter-spacing: -0.03em; } } @media (max-width: 359px) { #main_nav li a { font-size: 15px; } } #main_nav li a:hover { background-color: rgba(33, 43, 105, 0.5); } #main_nav li.on a { background-color: rgba(1, 14, 68, 0.5); } ul.lnb { display: flex; justify-content: space-between; margin-bottom: 26px; } ul.lnb li { width: 100%; } ul.lnb a { border-bottom: 3px solid #ECEFF5; color: #535A6F; padding: 16px; display: block; font-size: 18px; text-align: center; -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s; white-space: nowrap; } ul.lnb a:hover, ul.lnb a:focus { border-color: #6875b2; color: #6875b2; font-weight: bold; } ul.lnb a.active { border-color: #3c4e9b; color: #3c4e9b; font-weight: bold; } ul.lnb a.active:hover:hover { filter: brightness(150%); -webkit-filter: brightness(150%); cursor: pointer; } @media (max-width: 767px) { ul.lnb a { font-size: 16px; padding: 8px; } ul.lnb a span { display: none; } } /* 2024.05.30 * 서브 페이지에서 공통으로 사용하는 파일 입니다. * 공통요소 : 아래 변수 위주 * main은 common 사용하지 않고 main.scss사용. */ /* 서브 공통 */ /* 서브에서만 좌측 정렬 */ @media (max-width: 991px) { #header #brand { margin: 20px auto 4px 16px; } } /* 로컬 검색 */ .content { position: relative; } .content .main_searchbox { position: relative; text-align: left; border: 2px solid #3c4e9b; width: 330px; max-width: 360px; line-height: 1; margin-top: 15px; padding: 4px 8px 4px 6px; vertical-align: middle; float: right; display: flex; justify-content: space-between; align-items: center; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; -o-border-radius: 4px; } @media (max-width: 991px) { .content .main_searchbox { border: 4px solid #3c4e9b; width: calc(100% - 86px); margin: 16px auto; display: flex; align-items: center; padding-left: 10px; float: none; } .content .main_searchbox .search_title:after { margin-right: 10px; margin-left: 4px; } } @media (max-width: 767px) { .content .main_searchbox { width: calc(100% - 60px); } .content .main_searchbox .search_title span { display: none; } } .content .main_searchbox .search_title { white-space: nowrap; color: #394055; background: #D8DDE7; padding: 6px 8px; line-height: 1; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; border-radius: 2px; -o-border-radius: 2px; font-size: 13px; } .content .main_searchbox input[type=text] { border: 0px solid white; background: transparent; outline: none; font-size: 16px; font-weight: bold; line-height: 1; color: #3c4e9b; max-width: 668px; width: calc(100% - 38px); padding: 4px 12px; } .content .main_searchbox input[type=text]::placeholder { color: #868686; font-weight: normal; font-size: 14px; } .content .main_searchbox input[type=text]:focus { outline: none; } .content .main_searchbox input[type=text]:focus::-webkit-input-placeholder, .content .main_searchbox input[type=text]:focus:-moz-placeholder, .content .main_searchbox input[type=text]:focus::-moz-placeholder, .content .main_searchbox input[type=text]:focus:-ms-input-placeholder { color: transparent; } @media (max-width: 319px) { .content .main_searchbox input[type=text] { font-size: 14px; } } .content .main_searchbox input[type=image] { margin-top: -5px; cursor: pointer; width: 24px; height: 24px; padding: 4px 2px 4px 6px; } .content .main_searchbox .search_err, .content .main_searchbox .subsearch_err { color: #ff2849; font-size: 12px; position: absolute; right: calc(40% - 30px); } .content .similar { position: absolute; z-index: 2; width: 284px; font-size: 14px; top: 54px; left: 1px; margin-top: -12px; background: rgba(255, 255, 255, 0.83); -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px; -o-border-radius: 6px; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .content .similar dl { border: 1px solid #D8DDE7; border-width: 0 1px 0; padding: 0 16px; margin: 0; cursor: pointer; text-align: left; font-weight: normal; } .content .similar dl dd { margin: 0; padding: 8px; font-size: 16px; line-height: 1.4; border-bottom: 1px solid #D8DDE7; } .content .similar dl dd:hover { background-color: #3c4e9b; border-color: transparent; color: #FCFCFC; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; -o-border-radius: 8px; } .content .similar dl:first-of-type { border-width: 1px 1px 0; -webkit-border-radius: 6px 6px 0 0; -moz-border-radius: 6px 6px 0 0; -ms-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; -o-border-radius: 6px 6px 0 0; padding-top: 16px; } .content .similar dl:last-of-type { border-width: 0 1px 1px; -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; -ms-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; -o-border-radius: 0 0 6px 6px; padding-bottom: 16px; } .content .similar dl:last-of-type dd { border-bottom: 0; } .content .similar.sub { position: absolute; z-index: 4; width: 256px; font-size: 14px; margin-top: 2px; overflow: visible; left: calc(100% - 256px); right: auto; max-width: 576px; } @media (max-width: 991px) { .content .similar.sub { left: calc(50% - 128px); } } @media (max-width: 991px) { #header .inner-wide { padding: 8px 0 2px; } #header #searchbox { display: none; } }