/******************** site value *************************/
.brand-logo { background-image: url('https://cdn.kangnamtimes.com/kangnamtimes/2022/07/25044341/kangnamtimes_logo_450x194_black_bg.png'); }
.error-body .error-article .brand-logo { width: 90px; height: 39px; }
.header .logo-default { max-width: 300px; min-width: 88px; max-height: 69px; width:120px; }
.footer .logo-default { max-width: 110px; min-height: 50px; }
@media screen and (max-width:840px) {
.footer .logo-default {display:none !important;}
}
.gnb-wrap .menu li:hover a { color: #fff; }
.pagenation a.current, .pagenation .current.current { color: #fff; border-color: #000; }
.news-view p strong a { color: #FF6100; font-weight:bold;}
.news-view p a { color: #FF6100; font-weight:bold;}
.news-view a { color: #FF6100; font-weight:bold;}
.post-from p a { color: #fff; }
.gnb-wrap .menu li:checked::before, .gnb-wrap .menu li.current-menu-item::before { background-color: #000; bottom:-21px; }
.gnb-wrap .menu li:checked a, .gnb-wrap .menu li.current-menu-item a { color: #000; }
.comment-box .write-comment .absolute-box button { background-color: #000; }
body.policy .body ul.footer_link li.active { border: 1px solid #000 !important; }
body.policy .body ul.footer_link li:hover a { color: #000 !important; }
body.policy .body ul.footer_link li.active a, body.policy .body ul.footer_link li:hover a { color: #000 !important; }
.author-name { color: #000; }
.author-link>a::after { background: #000; }
/******************** site value end *************************/
/* 헤더디자인 변경시 주석을 풀어주세요 (어두운 헤더 BG + 밝은 텍스트) */
.header { background-color: #000; }
.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:840px) {
.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; }
}
.left-wrap .pagenation a.current, .pagenation .current.current {color:#000;}
/* header ad */
.news-view-wrap { padding-top: 320px; }
.pc-post-ad-header { width:1102px; height:250px; position:absolute; top:95px; }
@media screen and (max-width: 840px) {
.pc-post-ad-header { display:none; }
}
/* sidebar ad */
.news-view-wrap, .category .content-body { justify-content: center; }
.pc-post-ad-left-wrap { width: 160px; height: auto; position: relative; top: 0; left: 0; order: 0; z-index:9999; }
.pc-post-ad-right-wrap { width: 160px; height: auto; position: relative; top: 0; left: 0; order: 1; z-index:9999; }
.pc-post-ad-container { position: sticky; top: -610px; }
.pc-post-ad-left01 ins, .pc-post-ad-left02 ins, .pc-post-ad-right01 ins, .pc-post-ad-right02 ins, .pc-post-ad-right03 ins { background: #fff; }
.pc-post-ad-container > div { margin-bottom: 20px; }
@media screen and (max-width: 840px) {
.pc-post-ad-left-wrap, .pc-post-ad-right-wrap { display:none; }
}
/* container fix + article width fix */
@media screen and (min-width: 840px) {
.container { width: 1102px; }
.left-696 { min-width: 730px; }
}
/* Sticky below img ad */
#below-img { position:sticky; top:0; background:#fff; z-index:999; }
/* for AMP */
body.amp-mode-touch { padding-bottom:0 !important; }
body.amp-mode-touch .comment-wrap+article.ad-video { display:none; }
body.amp-mode-touch .btn-group { display:none; }
/* bottom floating ad close-btn */
.ad-close-btn { display: block; position: absolute; top: -18px; right: 0; }
/* 댓글모듈 */
.comments-rank-wrap { width: 100%; margin-bottom: 20px; margin-top: 10px; }
.right-sticky-wrap .comments-rank-wrap { margin-bottom: 40px; }
.comments-rank-wrap h2 { font-size: 20px; border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.comments-rank { margin-top: 10px; }
.comments-rank ul li {display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;justify-content: center;margin-bottom: 4px;}
.comments-rank ul li span.rank-num {font-size: 21px;font-weight: bold;color: red;margin-right: 8px;line-height: 1;}
.comments-rank ul li a.title {font-size: 16px;/* font-weight: bold; */color: #000;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;width: 89%;margin-right: 5px;}
.comments-rank ul li .comments-count-box { background-image: url("https://static.viewus.co.kr/image/bubble.png"); background-repeat: no-repeat; background-position: center; background-size: contain; display: block; width: 33px; height: 26px; position: relative; display: flex; justify-content: center; align-items: center; }
.comments-rank ul li .comments-count-box strong.comments-count { font-size: 12px; font-weight: bold; color: red; position: absolute; top: 2px; }
/* for AdSense Theme */
.ad-twin-space > div.ad {display:none;}
.ad-twin-space {display:block;}
.pc-var article.ad480 {width:auto;height:auto;}
@media screen and (max-width:840px) {
.news-view-wrap {margin-top:0;}
}
/* 기사 하단 author info 영역 개선 */
.author-wrap { width: 100%; display: flex; flex-direction: row; gap :10px; align-items: center; margin-top: 20px; padding:16px 0; border-top: 1px solid rgba(0,0,0,.1); border-bottom: 1px solid rgba(0,0,0,.7); }
.author-info { display: flex; gap: 7px; flex-direction: row; align-items: center; }
.author-img > img { width: 50px; display: block; border-radius: 50%; }
.author-link { margin-left: auto; }
.author-name { font-size: 15px; font-weight: bold; }
.author-mail { font-size: 12px; color: #707070; }
.author-link { font-size: 13px; letter-spacing: -1px; }
.comment-chat { border-top: 0; }
.post-from, .tags-group { padding: 0; }
.author-link>a { position: relative; }
.author-link>a::after { width:100%; height: 7px; content: ''; position: absolute; bottom: 0; left: 0; opacity: 0.2; }
@media screen and (max-width: 840px) {
.author-wrap { padding: 10px 0; }
.author-info { display: flex; gap: 2px; flex-direction: column; align-items: flex-start; }
.comment-chat { padding-top: 20px; }
.post-from { margin-bottom: 20px; }
.tags-group { margin-bottom: 0; }
.post-from, .tags-group { padding: 0 18px; }
}
/******************** UI fix css START *************************/
/* 검색결과 없을 때 하단 모듈 제거 */
.search-no-results .mobile-ad-box { display: none; }
/* 하단 bnb 여백 조정 */
@media screen and (max-width: 840px) {
.news-view-wrap {margin-bottom:30px;}
.footer {bottom:unset;}
}
/* 금주 베스트 인기글 하단 여백 조정 */
.weekly-best { margin-bottom: 30px !important; }
@media screen and (max-width: 840px) {
.weekly-best { margin-bottom: 20px !important; }
}
.weekly-best ul.swiper-slide > li:nth-child(5), .weekly-best ul.swiper-slide > li:nth-child(6) {margin-bottom:0;}
/* 하단모듈 여백 조정 */
@media screen and (max-width: 840px) {
.news-view-m-bt article { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
article.ad-m-post-bottom-01 {margin: 20px auto;}
article.ad-m-post-bottom-02 {}
article.ad-m-post-bottom-03 {margin-bottom: 20px;}
article.ad-m-post-bottom-04 {}
article.ad-m-post-bottom-05 {margin-bottom: 20px;margin-top:20px;}
article.news-rank {margin-bottom: 20px;margin-top:5px;}
article.taboola {margin-bottom:10px;}
}
/* 제목이 짧은 post가 모듈에 노출 될 때 정렬 수정 */
.news-rank li > div { justify-content: flex-start; }
/* 사이드바 동작 오류 해결 */
.right-sticky-wrap { position: sticky; display: flex; bottom: 0.1rem; top: 20px; }
.right-ad-event { position: sticky; bottom:0.1rem; top: unset; align-self: flex-end; }
@media screen and (max-width: 840px) {
.right-sticky-wrap { display:none !important; }
.right-ad-event { display:none !important; }
}
/* 모바일 헤더 검색버튼 위치 수정 */
@media screen and (max-width: 840px) {
.header .search-wrap .icon-btn i { top: 6px; }
}
/* 회사소개 스톡이미지 사이즈 고정 */
.about-us-featured-img img { width: 600px; }
@media screen and (max-width: 840px) {
.about-us-featured-img img { width: 100%; }
}
/* 본문에 태그로 감싸지지 않은 텍스트 대응 */
.news-article { font-size: 1.7rem !important; font-weight: 400 !important; line-height: 32px !important; }
@media screen and (max-width: 840px) {
.news-article { line-height: 26px !important; letter-spacing: -0.03em; }
}
/* 페이지 하단 gnb의 p tag 마진 제거 */
body.policy p.title-txt { margin-bottom: 0; }
/* 자동차AD 제거로 생긴 '이시각 인기 뉴스'의 상단 여백 조정 */
body.single-post .hot-news { margin-top: 15px; }
/* 푸터로고 사이즈가 비율과 상관없이 노출, 정렬되도록 변경 */
.footer .logo-default { display:flex; align-items: center; }
.footer .logo-default > img { object-fit: contain; }
@media screen and (max-width: 840px) {
.footer .logo-default { height: 30px; }
}
/* 뷰어스 ad 모듈의 썸네일 이미지 높이값 고정 */
.weekly-best .swiper-wrapper li img { height: 105px; }
/* 메인페이지에서 썸네일 마우스오버시 효과 삭제 */
.card-type1 a:hover ~ .img-box img { scale: none; }
/* 로고파일이 svg일때 높이값 고정 */
.logo-default > a > img { height: auto; }
/* 기사뷰 제목하단 작성자,날짜,조회수 영역의 폰트크기, 여백, 컬러 통일 */
div.line-txt-box > p > span.from,
div.line-txt-box > p > time.time,
div.line-txt-box > p > span.hit { line-height: 12px; font-size: 12px; }
.news-view .line-txt-box p span { font-size: 12px !important; }
.news-view .title-box .post-views span { color: #a3a3a3; line-height: 1 !important; }
.news-view .title-box .line-txt-box { align-items: baseline; }
.title-box .line-txt-box p > * { margin-left: 1px; }
/* 모바일 기사 하단 광고 wrapper 중 height 고정인 요소 수정 */
.ad-video { height: auto; }
/* 카테고리가 많을 때 gnb 폰트 사이즈 조정 */
.gnb-wrap .menu li a { font-size: 1.6rem; }
/* 모바일 gnb 특수문자 포함될경우 줄바꿈 방지 */
@media screen and (max-width: 840px) {
.header .gnb-wrap li { white-space: nowrap; display: flex; height: 50px; align-items: center; padding-bottom: 1px; }
}
/* 모바일 gnb 왼쪽 정렬 (1st 카테고리부터 노출되게끔) */
@media screen and (max-width: 840px) {
.header .gnb-wrap ul { justify-content: space-between; align-items: center; }
}
/* section.category에 적용되어야 할 내용이 body.category에도 적용 됨 */
body.category { padding-top: 0; }
/* 발행사, 태그 그룹영역의 여백 */
.post-from,.tags-group { padding: 0 18px; }
/* 태그 정렬 */
.tags-group { flex-wrap: wrap; }
/* gnb의 상단 여백 제거 */
@media screen and (max-width: 840px) {
.header .gnb-wrap { padding-top: 0px; }
}
/* 모바일 gnb 우측 여백 제거 */
@media screen and (max-width: 840px) {
.gnb-wrap .menu li:last-child { margin-right: 18px; padding-right: 0 !important; }
}
/* home에서 title 강제 제거 */
body.home h1 { display:none; }
/* 본문이미지 100% in Mobile */
@media screen and (max-width: 840px) {
body { overflow-x: hidden; }
body.single-post div.news-article table { width: 100%; }
body.single-post div.news-article img:not(.portrait):not(.comments-area img):not(.widget img) {width: calc(100% + 36px); margin-left: -18px !important; margin-right: -18px !important; max-width: none !important; }
}
/* 본문 h3 태그의 스타일 */
.news-view h3 { font-size: 1.7rem; padding: 0; margin: 20px 0; border: none; }
/* 모든 검색 페이지에서 하단 모듈 제거 */
.search .mobile-ad-box { display: none; }
/* 캡션 스타일 수정 */
body.single-post article.news-view .wp-caption-text,
body.single-post article.news-view figcaption,
body.single-post article.news-view figcaption *,
body.single-post article.news-view td.desc,
body.single-post article.news-view td.photocaption { font-size: 12px !important; line-height: 1.5 !important; color: #a1a1a1 !important; letter-spacing: -0.6px !important; }
/* PC 버전 로딩시 본문이미지 확대 문제 */
body.single-post article.news-view img { max-width: 100%; height: auto; object-fit: contain; }
/************************* UI fix css END *************************/
/* 2024.01.18 리뉴얼 PN과 동일하게 맞추기 위한 업데이트 */
/* 폰트 가독성 개선 */
@media screen and (max-width: 767px) {
.news-view p {line-height: 30px !important;letter-spacing: normal !important;font-size: 19px !important;padding: 10px 0 !important; }
}
/* 모바일 상단 ad 삭제로 여백 수정 */
@media screen and (max-width: 767px) {
.news-view .title-box { padding-top: 15px; }
}
.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; }
/* 최신 뉴스, 랭킹 뉴스 : Menu */
header #gnb ul {gap: 38px !important;}
header #gnb ul li {order: 4; margin-right: 0 !important;}
header #gnb ul li.breaking-news {order: 1;}
header #gnb ul li.ranking-news {order: 2;}
header #gnb ul li.custom-news:before {width: 20px; height: 20px; border-radius: 50%; background: #cc0000d9; color: #fff; position: absolute; right: -17px; top: -9px; display: flex; justify-content: center; align-items: center; font: normal normal 600 11px/1em sans-serif; letter-spacing: -0.4px;z-index:999;}
header #gnb ul li.breaking-news:before {content: '';font-family: Arial, sans-serif;}
header #gnb ul li.ranking-news:before {content: '';font-family: Arial, sans-serif;}
header #gnb ul li.current-menu-item:not(.custom-news),
header #gnb ul li.current-post-parent:not(.custom-news) {order: 3;} /* Current */
header #gnb ul li.custom-news a:after {display: inline-block; padding-right: 4px; line-height: 1em;}
header #gnb ul li.breaking-news a:after {content: '';background-image: url('data:image/svg+xml;utf8,');width: 24px; height: 24px;display: inline-block; position:absolute;top:-3px;right:-26px;display: none;}
header #gnb ul li.ranking-news a:after {content: '';background-image: url('data:image/svg+xml;utf8,');width: 24px; height: 24px;display: inline-block; position:absolute;top:-3px;right:-26px;display: none;}
@media (max-width: 767px) {
header #gnb ul {gap: 10px !important;}
header #gnb ul li a {padding: 14px 7px !important;}
header #gnb ul li.breaking-news a:after {top:12px;right:-18px;}
header #gnb ul li.ranking-news a:after {top:12px;right:-18px;}
header #gnb ul li.custom-news:before {top:4px;right: -5px;}
header #gnb ul li.breaking-news, header #gnb ul li.ranking-news {margin-right: 12px !important;}
}
/* 최신 뉴스, 랭킹 뉴스 : Archive */
body.archive .card-type5 li.up-down-card.ranking .title-box strong {position: relative; padding-left: 56px;}
body.archive .card-type5 li.up-down-card.ranking .title-box strong .ranking_idx {width: 44px; height: 56px; border-radius: 4px; background: #ff6200; color: #fff; position: absolute; left: 0; display: flex; justify-content: center; align-items: center; font: normal normal 400 26px/30px Impact, serif;}
.num01::before {content: '1'!important;}
.num02::before {content: '2'!important;}
.num03::before {content: '3'!important;}
.num04::before {content: '4'!important;}
.num05::before {content: '5'!important;}
.num06::before {content: '6'!important;}
.num07::before {content: '7'!important;}
.num08::before {content: '8'!important;}
.num09::before {content: '9'!important;}
.num09-plus::before {content: '9+'!important;}
body.archive.category-ranking-news .card-type5 li.up-down-card.ranking .title-box strong { min-height: 56px; }
body.archive.category-ranking-news .pagenation, body.archive.category-breaking-news .pagenation { display:none; }
@media screen and (max-width:767px) {
header { position: sticky; top: -63px; z-index: 9999; }
.footer .copy-right-wrap {padding-bottom:10px;}
}
/* bnb 좌우여백수정 */
.bnb .bnb-wrap .menu li:first-child {margin-left:40px;}
.bnb .bnb-wrap .menu li {margin-left: 40px;}
/* 모바일 bnb의 body와 간격 조정 */
@media screen and (max-width:840px) {
body {padding-bottom: 630px !important;}
.news-view-m-bt {margin-bottom:70px;}
/* for about_us page */
.page .body {margin-bottom:180px;}
.hot-news {margin-bottom:25px;}
.bnb .bnb-wrap .menu li:first-child {margin-left:0px;}
.bnb .bnb-wrap .menu li {margin-left: 0px;}
}