@charset "utf-8";
/* CSS Document */

/*
First Write : 2021-08-17
Last Update : 2021-12-30
Author: Jcode
*/


/* 기사상세 ----------------------------------------------------- */
/* 기사상세 : 헤드영역 */
.bodynews {padding: 0 49px 0 50px; border-right: 1px solid #ddd;}
.bodynews .header {position: relative; margin-bottom: 30px; padding-bottom: 15px; border-bottom: 1px solid #ddd; }
.bodynews h2 {margin-bottom: 15px; font-size: 2.2rem; letter-spacing: -2px; line-height: 1.2;}
.bodynews h3 {margin-bottom: 20px; color: #666; font-size: 1.1rem; border-left: solid 3px #888; padding-left: 10px;}
.bodynews .writetime {display: flex; margin-bottom: 20px; font-size: 0.9rem; color: #999;}
.bodynews .writetime p:nth-child(1) {
  padding-right: 30px;
  background-color: transparent;
  background-image: url(/images/bullet.png);
  background-repeat: no-repeat;
  background-position: right -65px top -1435px;
}
.bodynews .fncbtnbox {display: flex; justify-content: space-between; align-items: center;  justify-content: space-between;
  align-items: center;
  margin-top: 8px;}
.bodynews .fncbtnbox .tools { display: flex; align-items: center; gap:8px; }
.bodynews .fncbtnbox .viewtools, .extratools { display: flex; gap: 8px;}
.fncbtnbox button, .fncbtnbox a.btn { min-width: 60px; height: 36px; border: 1px solid #ccc; border-radius: 8px; background: #f8f8f8; font-size: 0.8rem; color: #333;  display: inline-flex; align-items: center; justify-content: center; gap: 4px;}
.fncbtnbox .viewtools button{ width: 36px; min-width: auto;  padding: 0; color: #666; }
.fncbtnbox .viewtools button .icon{ width: 24px; height: 24px;}

.bodynews .fncbtnbox button:hover, .bodynews .fncbtnbox a.btn:hover { background-color: #eee; border-color: #bbb;} 
.bodynews .fncbtnbox .icon { width: 16px; height: 16px; display: inline-block; }

.bodynews .fncbtnbox .viewtools button:nth-child(1) {font-size: 1.2rem;}
.bodynews .fncbtnbox .viewtools button:nth-child(2) {font-size: 0.8rem;}


.bodynews .fncbtnbox ul {display: flex;}
.bodynews .fncbtnbox ul li {margin-left: 5px;}
.bodynews .fncbtnbox ul li a {
  display: inline-block;
  width: 26px;
  height: 26px;
  text-indent: -9999px;
  background-image: url(/images/icon.png?20240430v1);
  background-repeat: no-repeat;
}
.bodynews .fncbtnbox ul li:nth-child(1) a {
  background-image: url(/images/common/sns_kakaotalk_ov.png);
}
.bodynews .fncbtnbox ul li:nth-child(2) a {background-position: left -40px top -80px;}
.bodynews .fncbtnbox ul li:nth-child(3) a {background-position: left -40px top -160px;}
/* .bodynews .fncbtnbox ul li:nth-child(4) a {background-position: left -120px top -160px;} */
.bodynews .fncbtnbox ul li:nth-child(4) a {background-position: left -200px top -160px;}

.tools .viewtools .btn_font{
  position: relative;
}
.tools .viewtools .btn_font span {
  position: absolute;
  text-indent: 0px;
  font-weight: normal;
}
.tools .viewtools .btn_font span:nth-child(1) {
  left: 7px;
  bottom: 5px;
  font-size: 0.7rem;
}
.tools .viewtools .btn_font span:nth-child(2) {
  right: 5px;
  top: 2px;
  font-size: 1rem;
}


/* 기사상세 : 본문내용 */
.bodynews .contents {padding-bottom: 20px; padding-left: 10px; padding-right: 10px; font-weight: 400;  font-size: 17px; line-height: 1.6; color: #222; letter-spacing: -0.3px;}
.bodynews .contents p {margin-bottom: 18px; margin-top: 18px;}
.bodynews .contents figure {margin: 40px auto; width: 600px;}
.bodynews .contents figure img {width: 100%;}
.bodynews .contents figcaption {padding-top: 10px; color: #666; font-size: 0.9rem;}
.bodynews .contents table { border-collapse: unset; }
.bodynews .contents .news_img_caption {padding-top: 10px; padding-bottom: 10px; color: #666; font-size: 0.9rem; line-height: 1.4;}

/*S: 인물디비 정치기사 하이라이트*/
.person-highlight {
  background-color: antiquewhite;
  cursor: default;
}
#profile {
  position:absolute;
  z-index: 5;
  overflow: hidden;
  width: 300px;
  background: #fff;
  border: 2px solid #a9a9a9;
  padding: 10px 10px;
  border-radius: 0.5rem;
  opacity: 0;
  display: none;
}
#profile .thumb {
  width: 120px;
  height: 150px;
  overflow: hidden;
  float: left;
  border-radius: 0.5rem;
  position: relative;
}
#profile .thumb img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#profile .txt li::before {
  float: left;
  margin-right: 4px;
  content: "•";
  color: #666666;
}
#profile .label {
  padding: 2px 4px !important;
  font-size: 0.75rem !important;
  color: #fff !important;
  display: inline;
}
.profile .txt {
  width: calc(100% - 140px);
  margin-left: 20px;
  float: left;
  font-size: 0.85rem;
}
.profile p { margin-bottom: 2px; }
.profile .name { margin-bottom: 15px; font-size: 1.4rem; font-weight: bold; }
.profile .history span { display: block; margin-bottom: 2px; }

/* 당컬러 */
.c_01 {background-color: #12298c;} /* 01 더불어민주당 */
.c_02 {background-color: #e60024;} /* 02 국민의힘*/
.c_03 {background-color: #ffed00;} /* 03 정의당 */
.c_04 {background-color: #ed6d00;} /* 04 개혁신당 */
.c_05 {background-color: gray;} /* 05 기본소득당 */
.c_06 {background-color: gray;} /* 06 무소속 */
.c_07 {background-color: #0073cf;} /* 07 조국혁신당 */
.c_08 {background-color: gray;} /* 08 자유통일당 */
.c_09 {background-color: #9d3fbc;} /* 09 진보당 */
.c_10 {background-color: #36babe;} /* 10 새로운미래 */
.c_11 {background-color: #F58400;} /* 11 사회민주당 */

/*E: 인물디비 정치기사 하이라이트*/

/* 종목 하이라이트 */
.symbol-highlight {
  border-radius: 3px;
  border: solid 1px #CFD8DC;
  background-color: #ECEFF1;
}
#symbolHighlight-tooltip {
  position:absolute;
  z-index: 5;
  overflow: hidden;
  width: 280px;
  background: #fff;
  border: 2px solid #a9a9a9;
  padding: 10px 10px;
  border-radius: 0.5rem;
  opacity: 0;
  display: none;
  font-weight: 700;
}

/* 기사상세 : 디지털뉴스콘텐츠 이용규칙 보기 */
.bodynews .newsrule {
  margin: 20px 0;
  padding: 5px 22px;
  background-image: url(/images/bullet.png);
  background-repeat: no-repeat;
  background-position: left 10px top -1028px;
}
.bodynews .newsrule a {text-decoration: underline;}


/* 기사상세 : 베스트기사 + 관련기사 + 주요포토 */
.bodynews .inbox {margin-bottom: 40px; padding: 20px 30px; background-color: #e4ebf2;}
.bodynews .inbox > div {padding-bottom: 30px; margin-bottom: 10px;}
.bodynews .inbox > div:last-child {padding-bottom: 0;}
.bodynews .inbox > div .sectit {padding: 12px 0 2px 0;}
.bodynews .inbox > div h3 {margin-bottom: 10px; font-size:  1.1rem; border: none; padding-left: 0px;}
.bodynews .inbox > div:nth-child(1), .bodynews .inbox > div:nth-child(2) {border-bottom: 1px dashed #ccc;}
.bodynews .inbox > div:nth-child(1) article .summary {color: #888;}
.bodynews .inbox > div:nth-child(1) h3 {color: #ff0000; margin-bottom: 0;}
.bodynews .inbox > div:nth-child(2) h3 {color: #0841c3;}
.bodynews .inbox .hotphoto > div:nth-child(2) {display: flex; flex-wrap: wrap;}
.bodynews .inbox .hotphoto > div:nth-child(2) > div:nth-child(1) {flex-basis: 260px; margin-right: 20px; margin-bottom: 0;}
.bodynews .inbox .hotphoto > div:nth-child(2) > div:nth-child(2) {display: flex; flex-wrap: wrap; flex: 1;}
.bodynews .inbox .hotphoto > div:nth-child(2) > div:nth-child(2) article {width: 120px;}
.bodynews .inbox .hotphoto > div:nth-child(2) > div:nth-child(2) {display: flex; justify-content: space-between;}
.bodynews .inbox .hotphoto > div:nth-child(2) > div:nth-child(2) article {position: relative; width: 32%; margin-bottom: 10px;}
.bodynews .inbox .hotphoto > div:nth-child(2) > div:nth-child(2) article:nth-child(4),
.bodynews .inbox .hotphoto > div:nth-child(2) > div:nth-child(2) article:nth-child(5),
.bodynews .inbox .hotphoto > div:nth-child(2) > div:nth-child(2) article:nth-child(6) {margin-bottom: 0;}
.bodynews .inbox .hotphoto > div:nth-child(2) > div:nth-child(2) .thumb {height: 85px;}
.bodynews .inbox .hotphoto > div:nth-child(2) > div:nth-child(2) .subject {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  text-align: center;
}
.bodynews .inbox .hotphoto > div:nth-child(2) > div:nth-child(2) .subject a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  padding: 10px;
  color: #fff;
  font-size: 0.9rem;
  background-color: rgba(0,0,0,.8);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  opacity: 1;
}
.bodynews .inbox .hotphoto > div:nth-child(2) > div:nth-child(2) .subject a:hover {text-decoration: none; opacity: 0;}



/* 기사상세 : 푸터영역 */
.bodynews .footer {margin-bottom: 30px;}
.bodynews .footer .fncbtnbox {
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f2f2f2;
  background-image: url(/images/divline.png);
  background-repeat: repeat-x;
  background-position: left 0 bottom -11px;
}
.bodynews .footer p {font-size: 0.9rem; margin-bottom: 40px; text-align: center;}
.bodynews .footer .footbtnbox {display: flex; justify-content: space-between; align-items: center;}
.bodynews .footer .footbtnbox button {
  display: inline-block;
  margin-left: 5px;
  padding: 0 30px 0 20px;
  height: 36px;
  border-radius: 5px;
  font-size: 0.9rem;
  border: 1px solid #ccc;
  background-color: #eee;
  background-image: url(/images/bullet.png?20250408v1);
  background-repeat: no-repeat;
}
.bodynews .footer .footbtnbox button:nth-child(1) {background-position: left 15px top -1718px; padding: 0 20px 0 30px;}
.bodynews .footer .footbtnbox button:nth-child(2) {background-position: right 10px top -947px;}



/* 상세 : GAM  기사추가 */
.gamrassiro {display: flex; margin: 30px 0; padding: 25px 10px 15px; background-color: #eee;    flex-direction: column;}
.gamrassiro h3 {
	margin-bottom: 10px;
	font-weight: bold;
  border: none;
  padding-left: 5px;
	color: #333;
}
.gamrassiro h3 span {display: inline-block;}
.gamrassiro .inbox { display: grid; grid-template-columns: 1fr 1fr; background-color: #fff; padding: 0; margin-bottom: 0px;}
.gamrassiro .inbox > article:nth-child(odd) {  border-right: 1px dashed #ccc;}
.gamrassiro .inbox > article:nth-child(-n+2) {  border-bottom: 1px dashed #ccc;}
.gamrassiro .thumb_h {display: flex; align-items: center; padding: 15px; margin-bottom: 0px;}
.gamrassiro .thumb_h .thumb {position: relative; flex-basis: 90px; height: 74px; background-color: #eee; margin-right: 0px;}
.gamrassiro .thumb_h .subject {font-size: 1rem; flex: 1; letter-spacing: -1px ;}
.gamrassiro article:nth-child(odd) .thumb {margin-right: 10px;}
.gamrassiro article:nth-child(even) .thumb {margin-left: 10px;}
.gamrassiro .thumb_h .thumb img {width: 100%; height: 100%; object-fit: cover;}
.gamrassiro .thumb_h .subject a {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

/* 2025 대선 */
.vote2025 {
  position: relative; display: flex; justify-content: space-between; margin-bottom: 40px; height: 85px;
  background: #fff url(https://img.newspim.com/web/images/2025/vote2025_bg_view.jpg) no-repeat 0 0;
}
.vote2025 .vote2025_logo {display: flex;}
.vote2025 h1 a  {
  display: inline-block; margin: 16px 30px 0 150px; padding: 0; width: 98px; height: 19px; text-indent: -9999px;
  background: transparent url(https://img.newspim.com/web/images/2025/vote2025_logo.png?20250421v1) no-repeat 0 0;
}
.vote2025 .vote2025_nav  {display: flex; flex-direction: column;}
.vote2025 .vote2025_nav h2  {margin: 0;}
.vote2025 .vote2025_nav h2 a  {
  display: block; margin: 16px 0 8px 0; padding: 0; width: 240px; height: 28px; text-indent: -9999px;
  background: transparent url(https://img.newspim.com/web/images/2025/vote2025_logo1.png?20250421v1) no-repeat 0 0;
}
.vote2025 .vote2025_nav nav ul {display: flex;}
.vote2025 .vote2025_nav nav ul li a {display: flex; margin-right: 5px; padding: 2px 6px; font-size: 0.9rem;}
.vote2025 nav ul li a:link, .vote2025 nav ul li a:visited, .vote2025 nav ul li a:hover, .vote2025 nav ul li a:active, .vote2025 nav ul li a:focus {color: #fff;}
.vote2025 .dday {margin: 17px 30px 0 0; text-align: center; color: #333;}
.vote2025 .dday p:nth-child(1) {font-size: 0.9rem; font-weight: 600;}
.vote2025 .dday p:nth-child(1) span{font-size: 1.3rem;}
.vote2025 .dday p:nth-child(2) span {margin: 0 4px; font-weight: bold; vertical-align: middle;}
.vote2025 .dday p:nth-child(2) span:nth-child(1), .vote2025 .dday p:nth-child(2) span:nth-child(3) {font-size: 1.6rem;}

.vote2025::before{ content: ''; position: absolute; bottom: -6px; right: 20px; width: 214px; height: 112px; background-image: url(https://img.newspim.com/web/images/2025/vote2025_win.png);}

/* 글자크기 조정 팝업 */
.pop_txtsize ul li button {
  border: 1px solid #9faab7;
}
.pop_txtsize ul li button.on {
  border: 1px solid #5a636d;
  background-color: #5a636d;
  color: #fff;
}
.pop_txtsize ul li:nth-child(1) button {
  font-size: 0.7rem;
}
.pop_txtsize ul li:nth-child(2) button {
  font-size: 0.9rem;
}
.pop_txtsize ul li:nth-child(3) button {
  font-size: 1rem;
}
.pop_txtsize ul li:nth-child(4) button {
  font-size: 1.2rem;
}
.pop_txtsize ul li:nth-child(5) button {
  font-size: 1.4rem;
}
.pop_txtsize ul li span {
  font-size: 0.85rem;
  margin-top: 4px;
  text-align: center;
}
/* 기사 번역 팝업 */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999999;
  background: rgba(0, 0, 0, 0.5);
  
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.overlay.hide {
  visibility: hidden;
  opacity: 0;
}
.pop_language {
  position: fixed;
  bottom: 0;
  width:100%;
  max-width: 880px;
  height: 75%;
  max-height: 90%;
  z-index: 9999999999;
  background: #ffffff;
  white-space: normal;
  box-shadow: 0 3px 37px 5px rgb(0 0 0 / 0.2);
  border-radius: 16px 16px 0 0;
  transform: translate(0, 0);
  transition: transform 0.05s ease-in-out;
}
.pop_language.hide  {
  transform: translate(0, 100%);
}
.pop_language .layer_head {
  position: relative;
  padding: 20px 20px 0 20px;
  border-radius: 16px 16px 0 0;
}
.pop_language .layer_head .tit{
  display: block;
  padding-right: 40px;
  margin-bottom: 16px;
  font-size: 1.4rem;
  line-height: 1.3;
  letter-spacing: -1px;
}
.pop_language .layer_head .txt{
  margin: 0 0 15px; font-size: 15px; color: #767678; padding:0px;
  letter-spacing: -0.74px;
}
.pop_language .layer_head > button {
  position: absolute;
  padding: 12px;
  top: 14px;
  right: 20px;
  background-color: transparent;
}
.pop_language .layer_head > button span{
  width: 20px;
  height: 20px;
  text-indent: -9999px;
  display: block;
  background: url(../images/ico_close1.png) no-repeat center;
  background-size: 100%;
  content: '';
}
.pop_language .layer_head::after {
  display: block;
  width: 100%;
  border-bottom: 1px solid #eee;
  content: '';
}
.pop_language .layer_body {
  display: flex;
  flex-direction: column;
  padding: 20px;
  height: calc(100% - 150px);
  font-size: 1rem;
  letter-spacing: -0.3px;
  overflow-y: auto;
}
.pop_language .layer_body .title{
  padding-bottom: 20px;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -1px;
}
.pop_language .layer_body p {
  margin-bottom: 20px;
  line-height: 28px;
  padding: 0;
}
select.languageDropdown {  
  width: 100%;
  padding: 16px;
  margin-bottom: 16px;
  border-radius: 8px;
  border: 1px solid #E7E7E7;
  box-sizing: border-box; 
  -moz-appearance: none; /* Firefox */
  -webkit-appearance: none; /* Safari and Chrome */
  appearance: none;
  background-image: url(/images/ico_down.png);
  background-repeat: no-repeat;
  background-position: 97% center;
  background-size: 1rem;
}

/* 종복 추적기 팝업 */
.stockicon .tit::before {
    background: url(../images/ico_stock.svg) no-repeat center center;
    background-size: 24px;
    width: 24px;
    height: 24px;
    display: inline-block;
    margin: 0 8px 0 0;
    vertical-align: top;
    content: '';
}
.stock-section {
  margin-bottom: 20px;
  border-radius: 14px;
  font-weight: 600;
  overflow: hidden;
}
.stock-section:last-child {
  margin-bottom: 0;
}
.stock-section.positive{  
  border: 1px solid rgba(230,0,0,0.05);
}
.stock-section.negative{
  border: 1px solid rgba(28,100,242,0.1);
}
.section-title {
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 600;
}
.stock-section.positive .section-title {
  color: #FF5722;
  background: rgba(230,0,0,0.05);
}
.stock-section.negative .section-title {  
  color: #1976D2;
  background: rgba(28,100,242,0.1);
}
.stock-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 25px 0;
  padding: 15px 0;
  margin: 0 16px;
}
.stock-item:not(:last-child) {
  border-bottom: 1px solid #f3f3f3;
}
.category-tag {  
  font-size: 13px;
  color: #ff5722;
  font-weight: 500;
  background: #fef2f2;
  padding: 2px 6px;
  border-radius: 20px;    
}
.stock-section.negative .category-tag {
  background: #e8effe;
  color: #1976D2;
}
.stock-section .stock-item .stock-con{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.company-name {
  font-size: 15.2px;
  font-weight: 700;
}
.company-desc {
  padding: 0 10px;
  line-height: 1.56;
  font-size: 14px;
  font-weight: 400;
}



/* 글자크기 조정 + 공유 팝업 (공통) */
.fncpop{
  position: fixed;
  z-index: 999999;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 3px 37px 5px rgb(0 0 0 / 0.2);
  background:#fff;
}
.fncpop h1 {
  margin-bottom: 20px;
  padding: 0;
  font-size: 1rem;
  font-weight: normal;
}
.fncpop ul {
  display: flex;     margin-bottom: 10px;
}
.fncpop ul li {
  display: flex;
  flex-direction: column;
  margin: 0 8px;
}
.fncpop ul li:first-child {
  margin-left: 0;
}
.fncpop ul li:last-child {
  margin-right: 0;
}
.fncpop ul li a,
.fncpop ul li button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border-radius: 17px;
  color: #666;
}
.fncpop > button {
  position: absolute;
  right: 15px;
  top: 10px;
  padding: 8px;
  background-color: transparent;
}
.fncpop > button span {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-indent: -9999px;
  background-image: url(../images/ico_close1.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}
#font_popup_btn { anchor-name: --font-anchor; }
.extratools > button:first-child { anchor-name: --lang-anchor; }

/* 기존 고정 위치 클래스 무력화 */
.font_box_position,
.translation_box_position { right:auto !important; }
#font_popup{
  position-anchor: --font-anchor;
  top:  anchor(bottom);
  left: anchor(center);
  transform: translate(-50%, 8px);
  max-inline-size: min(90vw, 340px);
}
#languageSelectBox{
  position: fixed;
  position-anchor: --lang-anchor;
  top:  anchor(bottom);
  left: anchor(center);
  transform: translate(-50%, 8px);
  width: 265px;
  max-inline-size: min(90vw, 320px);
}
#languageSelectBox { position-try-options: --below, --above; }
@supports not (position-anchor: --x) {
  #font_popup, #languageSelectBox{
    position: fixed;
    right: 8px; top: 64px;
    left: auto; transform:none;
  }
}

/* 스피너 */
.loading-spinner {
  width: 120px;
  height: 120px;
  background-image: url(/images/loading.svg);
}
.spinnerContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  height: 70%;
}
.loading-spinner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.spinner-hide {
  display: none;
}
.loading_message {
  
  font-size: 16px;
  color: #6196ff;
}