/******************** site value *************************/ .brand-logo { background-image: url('https://cdn.epigraph.co.kr/epigraph/2025/06/19114243/epigraph-logo-409x122-1.png'); } .error-body .error-article .brand-logo { width: 200px; height: 50px; } .header .logo-default { max-width: 300px; min-width: 88px; max-height: 69px; width: 230px; } @media screen and (max-width: 767px) { .header .logo-default { width: 150px; } } .footer .logo-default { max-width: 180px; min-height: 50px; width: 180px; } .gnb-wrap .menu li:hover a { color: #059633; } .pagenation a.current, .pagenation .current.current { color: #059633; border-color: #059633; } .news-view p strong a { color: #059633; } .news-view a { color: #059633; font-weight: bold; } .post-from p a { color: #059633; } .gnb-wrap .menu li:checked::before, .gnb-wrap .menu li.current-menu-item::before { background-color: #059633; bottom:-28px; } .gnb-wrap .menu li:checked a, .gnb-wrap .menu li.current-menu-item a { color: #059633; } .comment-box .write-comment .absolute-box button { background-color: #059633; } body.policy .body ul.footer_link li.active { border: 1px solid #059633 !important; } body.policy .body ul.footer_link li:hover a { color: #059633 !important; } body.policy .body ul.footer_link li.active a, body.policy .body ul.footer_link li:hover a { color: #059633 !important; } .author-name { color: #059633; } .author-link>a::after { background: #059633; } .gnb-wrap .menu li.current-post-parent::before { background-color: #059633; bottom: -28px; } .gnb-wrap .menu li.current-post-parent a { color: #059633; font-weight: bold; } @media screen and (max-width: 767px) { .header .search-wrap .icon-btn i { top: 2px; } /* 모바일 헤더 검색버튼 위치 수정 */ .header .search-wrap { top: 0; } } /******************** site value end *************************/ /* 헤더디자인 변경시 주석을 풀어주세요 (어두운 헤더 BG + 밝은 텍스트) */ /* .header { background-color: #059633; } .gnb-wrap .menu li a { color: #fff; } .gnb-wrap .menu li:hover a { color: #fff; } .gnb-wrap .menu li:checked a, .gnb-wrap .menu li.current-menu-item a { color:#fff; } @media screen and (max-width: 767px) { .gnb-wrap .menu li:checked a, .gnb-wrap .menu li.current-menu-item a { color: #000; } .header .gnb-wrap { background-color: #fff; } .gnb-wrap .menu li a { color: #000; } .gnb-wrap .menu li:hover a { color: #000; } .icon-search { filter: invert(1); } .header .search-wrap .icon-btn i { top: 5px; } } */ /* 헤더디자인 변경시 주석을 풀어주세요 (밝은 헤더 BG + 검정 텍스트) */ /* .header { background-color: #ffcf35; } .gnb-wrap .menu li a { color: #000; } .gnb-wrap .menu li:hover a { color: #000; } .gnb-wrap .menu li:checked a, .gnb-wrap .menu li.current-menu-item a { color:#000; } @media screen and (max-width: 767px) { .header .gnb-wrap { background-color: #fff; } .gnb-wrap .menu li a { color: #000; } .gnb-wrap .menu li:hover a { color: #ffcf35; } .header .search-wrap .icon-btn i { top: 5px; } } */ /******************** UI fix css START *************************/ /* 기사본문 폰트 , 모바일 상단 ad 삭제로 여백 수정 */ .news-view p { text-align: justify; } @media screen and (max-width: 767px) { .news-article { letter-spacing: normal; } .news-view p { line-height: 30px !important; letter-spacing: normal !important; font-size: 18px !important; padding: 10px 0 !important; } .news-view .title-box { padding-top: 15px; } .news-view h2, .news-view h3 { font-size: 19px !important; line-height: 30px !important; } } /* 함께보면좋은뉴스 위젯의 디자인 수정버전 */ .modified.news-rank li { height:fit-content; background-size: 25px; background-repeat: no-repeat; background-position: left -1px top 27px; } .modified.news-rank .news-right { width:100px; height:100px; } .modified.news-rank .news-right img { aspect-ratio:unset; border-radius:5px; } .modified.news-rank .news-left { padding-right: 5px; padding-top: 10px; padding-bottom: 10px; box-sizing: border-box; padding-left: 25px; } .modified.news-rank .news-left .title { font-size: 18px; line-height: 1.5; letter-spacing: -1px; } .modified.news-rank li:nth-child(1) { background-image: url('https://static.viewus.co.kr/image/rank01.png'); } .modified.news-rank li:nth-child(2) { background-image: url('https://static.viewus.co.kr/image/rank02.png'); } .modified.news-rank li:nth-child(3) { background-image: url('https://static.viewus.co.kr/image/rank03.png'); } .modified.news-rank li:nth-child(4) { background-image: url('https://static.viewus.co.kr/image/rank04.png'); } .modified.news-rank li:nth-child(5) { background-image: url('https://static.viewus.co.kr/image/rank05.png'); } .modified.news-rank .news-left > span { font-size: 30px; line-height: 1; font-weight: 600; color: #777; margin-right: 5px; display: none; } .modified.news-rank .title-box .line-txt-box time { display: none; } .modified.news-rank .title-box .line-txt-box p > *:first-child { font-size: 15px; } /* 이시각인기뉴스와 댓글많은뉴스에 클래스 추가 */ .pc-hidden { display:none; } .mo-hidden { display:block; } @media screen and (max-width: 767px) { .mo-hidden { display:none; } .pc-hidden { display:block; } } /* 구글광고가 화면 보다 크게 그려질 경우 가로 스크롤 안되게 처리 */ @media screen and (max-width:767px) { #main { overflow-x: hidden; } } /* 하단모듈 영역조정 2024.01.10 */ @media screen and (max-width:767px) { .weekly-best { margin-top: 20px !important; } .hot-news { margin-bottom: 20px; } body.single-post .hot-news { margin-top: 20px; } .hot-news h3 { margin-bottom: 10px; } article.news-rank { margin-bottom: 20px; margin-top: 20px; } .ad.taboola { margin-bottom: 20px; margin-top: 20px; } } .hot-news h3 { font-size: 2rem; } .popular-news-module, .recommend-news-module { margin-bottom: 20px !important; margin-top: 20px !important; } /* 구독 */ button.post-follow-pc { background-image: url("data:image/svg+xml,%3Csvg fill='%233e3e40' viewBox='0 0 32 32' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E %3Cpath d='M2.002 27.959c0-0.795 0.597-1.044 0.835-1.154l8.783-4.145c0.63-0.289 1.064-0.885 1.149-1.573s-0.193-1.37-0.733-1.803c-2.078-1.668-3.046-5.334-3.046-7.287v-4.997c0-2.090 3.638-4.995 7.004-4.995 3.396 0 6.997 2.861 6.997 4.995v4.998c0 1.924-0.8 5.604-2.945 7.292-0.547 0.43-0.831 1.115-0.749 1.807 0.082 0.692 0.518 1.291 1.151 1.582l2.997 1.422 0.494-1.996-2.657-1.243c2.771-2.18 3.708-6.463 3.708-8.864v-4.997c0-3.31-4.582-6.995-8.998-6.995s-9.004 3.686-9.004 6.995v4.997c0 2.184 0.997 6.602 3.793 8.846l-8.783 4.145s-1.998 0.89-1.998 1.999v3.001c0 1.105 0.895 1.999 1.998 1.999h21.997v-2l-21.996 0.001v-2.029zM30.998 25.996h-3v-3c0-0.552-0.448-1-1-1s-1 0.448-1 1v3h-3c-0.552 0-1 0.448-1 1s0.448 1 1 1h3v3c0 0.552 0.448 1 1 1s1-0.448 1-1v-3h3c0.552 0 1-0.448 1-1s-0.448-1-1-1z'%3E%3C/path%3E %3C/g%3E%3C/svg%3E"); background-size: 18px; background-position: 12px 8px; background-repeat: no-repeat; margin-left: auto; margin-right: 0 !important; } button.post-follow-mo { display: none; } @media screen and (min-width: 768px) { .speech-bubble { display: none; } .post-follow-mo { display:none !important; } } @media screen and (max-width: 767px) { .header .gnb-wrap ul { overflow-y: hidden; } .post-follow-mo { background-image: url("data:image/svg+xml,%3Csvg fill='%23059633' viewBox='0 0 32 32' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E %3Cpath d='M2.002 27.959c0-0.795 0.597-1.044 0.835-1.154l8.783-4.145c0.63-0.289 1.064-0.885 1.149-1.573s-0.193-1.37-0.733-1.803c-2.078-1.668-3.046-5.334-3.046-7.287v-4.997c0-2.090 3.638-4.995 7.004-4.995 3.396 0 6.997 2.861 6.997 4.995v4.998c0 1.924-0.8 5.604-2.945 7.292-0.547 0.43-0.831 1.115-0.749 1.807 0.082 0.692 0.518 1.291 1.151 1.582l2.997 1.422 0.494-1.996-2.657-1.243c2.771-2.18 3.708-6.463 3.708-8.864v-4.997c0-3.31-4.582-6.995-8.998-6.995s-9.004 3.686-9.004 6.995v4.997c0 2.184 0.997 6.602 3.793 8.846l-8.783 4.145s-1.998 0.89-1.998 1.999v3.001c0 1.105 0.895 1.999 1.998 1.999h21.997v-2l-21.996 0.001v-2.029zM30.998 25.996h-3v-3c0-0.552-0.448-1-1-1s-1 0.448-1 1v3h-3c-0.552 0-1 0.448-1 1s0.448 1 1 1h3v3c0 0.552 0.448 1 1 1s1-0.448 1-1v-3h3c0.552 0 1-0.448 1-1s-0.448-1-1-1z'%3E%3C/path%3E %3C/g%3E%3C/svg%3E"); background-size: 17px; font-size: 15px; border: 1px solid #059633; color: #059633; padding: 0 9px 0 33px; line-height: 1; border-radius: 17px; background-position: 11px 5px; background-repeat: no-repeat; position: absolute; display: block; height: 30px !important; z-index: 999; transform: translateY(0); transition: transform 0.5s; } .post-follow-mo > a { color: #059633; font-weight: 400 !important; font-size: 12px !important; } .header .gnb-wrap li.post-follow-mo a { padding: 0 !important; font-size: 14px !important; } button.post-follow-pc { display: none; } .header .gnb-wrap li.speech-bubble { opacity: 0; transform: translateY(30px); margin: 0px; padding: 7px; color: #fff; border-radius: 8px; position: absolute; top: -8px; left: -3px; text-align: center; line-height: 1; background: linear-gradient(to top, #a1a7ff, #059633); z-index: 9999999; transition: opacity 0.5s, transform 0.5s; margin: 0 !important; position: absolute !important; height: auto !important; padding: 5px !important; } .speech-bubble::after { border-top: 9px solid transparent; content: ""; position: absolute; top: -14px; right: 50%; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid #059633; } .header .gnb-wrap li.speech-bubble a { font-size: 12px !important; color: #fff; font-weight: 400 !important; } #bnb .post-follow-mo { display: none; } .post-follow-mo::after { content: ""; } } @media screen and (max-width: 767px) { header { background: #fff; z-index: 999999999999; } body::-webkit-scrollbar-thumb { background-color: transparent; } body::-webkit-scrollbar { width: 5px; } body::-webkit-scrollbar-thumb { background-color: transparent; } } /* related article with yarpp */ body.single-post .yarpp-thumbnails-horizontal .yarpp-thumbnail { margin: 0; border: none; } @media screen and (max-width: 767px) { .yarpp { max-width: none !important; margin-left: 10px; } .yarpp h3, .yarpp-related h3 { font-size: 20px !important; } .yarpp-thumbnails-horizontal { display: flex; overflow-x: auto; overflow-y: hidden; height: fit-content; } .yarpp-thumbnails-horizontal::-webkit-scrollbar { display: none; } .yarpp-thumbnail > img { object-fit:cover; } .yarpp-thumbnails-horizontal .yarpp-thumbnail-title { font-size: 16px !important; letter-spacing: -0.5px; font-weight: normal !important; } .yarpp-thumbnails-horizontal .yarpp-thumbnail { width: 135px !important; } } /* below-yarpp */ .below-yarpp-title { font-size: 19px; padding: 0 18px; border: none; margin-top: 20px; } .below-yarpp { padding: 10px 18px 30px 18px; } .below-yarpp ul li { padding-left: 15px; position: relative; margin-bottom: 10px; } .below-yarpp ul li:last-child { margin-bottom: 0; } .below-yarpp ul li::before { content: '└'; font-size: 14px; position: absolute; left: -5px; /*top: 50%; transform: translateY(-50%); */color: #444; } .below-yarpp ul li a { font-size: 16px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 105%; display: block; } @media screen and (min-width: 768px) { .below-yarpp-title { padding: 0; margin-top: 30px; } .below-yarpp { padding-left: 0; } } /* comments-rank-wrap */ .comments-rank-wrap { padding: 0 18px; } /* 많이본뉴스 */ .popular-news { width: calc(100% + 36px); margin: 20px 0; } .popular-news-wrap { width: 100%; background: #f2f4f7; padding: 10px 18px; } h3.popular-news-title { font-size: 20px; margin-bottom: 10px; width: 100%; padding: 0 18px; } .popular-news-wrap ul { width: 100%; padding: 10px; box-sizing: border-box; background: #fff; border-radius: 8px; } .popular-news-wrap ul li { padding: 10px 0; } .popular-news-post { display: flex; justify-content: space-between; } .popular-news-post-content { order: 1; align-content: center; } .popular-news-post-content h4 { margin-bottom: 5px; } .popular-news-post-content h4 a { font-size: 16px; font-weight: normal; letter-spacing: -0.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; text-align: justify; } .popular-news-post-content p a { color: #666; font-size: 13px; } .popular-news-post-thumbnail { order: 2; } .popular-news-post-thumbnail img { width: 110px; height: 70px; object-fit: cover; border-radius: 8px; display: block; margin-left: 10px; border: 1px solid #f2f2f2; } /* 기존모듈추가수정 */ .comments-rank-wrap.pc-hidden { margin-top: 20px; } div.comments-bubble { display: flex; width: 45px; height: 45px; position: fixed; right: 10px; bottom: 125px; flex-direction: column; justify-content: center; align-items: center; border-radius: 100%; border: 1px solid rgba(0, 0, 0, .05); box-shadow: 0 1px 2px #00000040; background-color: #059633; z-index:999999999999999; } div.comments-bubble>a { display: flex; flex-direction: column; align-items: center; gap:3px; } div.comments-bubble p.commentCounter { font-size: 14px; color: #fff; line-height: 1; font-weight: bold; } /* breadcrumb */ .title-box > span { font-size: 14px; display: block; margin-bottom: 10px; } .title-box > span > span:nth-of-type(1)::after { content: '»'; padding-left: 6px; } .title-box > span a { color: #000; } .title-box .breadcrumb_last { display: none; } @media screen and (max-width: 767px) { .title-box > span { margin-bottom: 0px; } } /************************* UI fix css END *************************/ /* Single Post > Breadcrumb (2024.11.18) */ body.single-post .breadcrumb {margin-bottom: 10px;} body.single-post .breadcrumb ol li {display: inline-flex; flex-direction: row; justify-content: center; align-items: center;} body.single-post .breadcrumb ol li a {font-size: 14px; display: block; color: #000; font-weight: bold;} body.single-post .breadcrumb ol li:first-child:after {content: "»"; padding: 0 6px;} body.single-post .breadcrumb ol li:last-child {display: none;} /* 2025.04.11 gnb handler */ @media screen and (max-width: 767px) { #main { padding-top: 130px; } body.archive .img-box img { object-fit: contain; } header {position: fixed;top: 0;left: 0;width: 100%;background: #fff;z-index: 1000;transition: transform 0.3s ease-out, top 0.3s ease-out;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } header.gnb-down {transform: translateY(-100%); } /* gnb 영역만 노출시킬 높이 설정 필요 */ header.gnb-up {top: -49px !important;} .error-body {padding-top: 130px;} } [class^="kstyle-viewusglobal-ad-"] { text-align: center; }