@charset "utf-8";

/* reset CSS */
@import url(reset.css);

/* Fonts */
@import url("https://cdnjs.cloudflare.com/ajax/libs/pretendard-gov/1.3.9/variable/pretendardvariable-gov.css");

/*Variables*/
@import "variables.css?202502051";

:root{
  font-size:10px;
}
   
*{
  box-sizing: border-box;
}

body {
  display:flex;
  flex-direction: column;
  gap:var(--gsifn-height);
  font-family: "Pretendard GOV Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  accent-color: var(--kepco-gray-90);
  margin:0 auto;
  font-size:1.5rem;
  font-weight:400;
  color:var(--kepco-gray-70);
}


/*  
section : 반응형 레이아웃 컨테이너 영역
article : 재사용가능한 하나의 컴포넌트 단위. 레이아웃 바뀌지 않음.

section 안에 article 

article에 #을 달아서 customizing

*/


.flex, section, .container { display:flex; flex-direction: row; justify-content: space-between; align-items:start;}
.flex.col,section.col, .container.col {  flex-direction: column; }
.flex.x-start, section.x-start, .container.x-start{justify-content:flex-start;}
.flex.x-center, section.x-center, .container.x-center{justify-content: center;}
.flex.x-end, section.x-end, .container.x-end{justify-content:flex-end;}
.flex.y-start, section.y-start, .container.y-start{align-items:flex-start;}
.flex.y-center, section.y-center, .container.y-center{align-items:center;}
.flex.y-end, section.y-end, .container.y-end{align-items:flex-end;}
.flex.gap, section.gap, .container.gap { gap:var(--gsifn-height); }
.flex.gap-height, section.gap-height, .container.gap-height { gap:calc(2.25 * var(--gsifn-height)); }

section.item-3 > *, .container.item-3 > * {width: 30%;}



dl{display:grid; grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(2,1fr);}
dl.col-3 {grid-template-columns:repeat(3,1fr);}
dl.col-4 {grid-template-columns:repeat(4,1fr);}
dl.row-3 {grid-template-rows: repeat(3,1fr);}
dl.row-4 {grid-template-rows: repeat(4,1fr);}


a:link,a:visited{
  color:var(--kepco-gray-70);
  text-decoration: none;
}

.hidden {
    overflow: hidden;
    border: 0;
    position: absolute;
    z-index: -1;
    width: 1px;
    height: 1px;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
  }

.mb_view {
  display: none;
}
.pc.view{
  display:block;
}  
table.pc_view {
  display: table;
}

.up {
  color: var(--kepco-red-50);
}
.down {
  color: var(--kepco-blue-50);
}
.same {
  color: var(--kepco-gray-90);
}

.em {
  /* background: #eeeeee; */
}

header,section,div,article,dl,dt,dd{
  width:100%;
}

table {
  width: 100%;
  border-bottom: var(--gsifn-border);
}

caption{
  font-size:2rem;
  margin-bottom:0.8rem;
  text-align: left;
  font-weight:400;
}

fieldset{display:flex; justify-content: center; align-items: center;}
fieldset input { margin-right:0.27cqmax }
fieldset label { margin-right:1.6rem; }

/* border */
table th, table td {
  border-bottom: var(--gsifn-border);
}
table thead tr:last-child {
  border-bottom: var(--gsifn-border);
}
table tr:last-child {
  border-bottom: none;
}

table thead tr:first-of-type th, table thead tr:first-of-type td{
  border-top:var(--gsifn-border);
} 

table.mini_stock tbody tr:first-of-type th,table.mini_stock tbody tr:first-of-type td{border-top:var(--gsifn-border);}

table tfoot tr:first-child {
  border-top: var(--gsifn-border);
}

/* table height */
th, td {
  /* height: var(--gsifn-height); */
  padding: 1.6rem;
  text-align:center;
  line-height: 150%;
  border-right: var(--gsifn-border);
  vertical-align: middle;
}
th:last-child, td:last-child {
  border-right: none;
}
td {
  text-align: right;
}

dt, dd {
  text-align: center;
  line-height: 150%;
}

p>strong{
  color:#6e6e6e;
}
/* bold */
th, dt { font-weight:700; }
/* td, dd { color:var(--kepco-gray-70); } */

/* bg-color */
thead th, thead td, tfoot th, tfoot td, tbody th { background-color:var(--kepco-gray-20); } 
.ohlv dt { background-color:var(--kepco-gray-20); border-top:var(--gsifn-border); }



/* 기본 Arrow */
.arrow{display:flex;justify-content:center;align-items:center; gap:0.2rem; }



.arrow.up:before, .arrow.up:before {
  background-color: var(--kepco-red-50);
  clip-path: polygon(50% 0%,100% 100%,0% 100%);
}

.arrow.down:before, .arrow.down:before {
  background-color: var(--kepco-blue-50);
  clip-path: polygon(0% 0%,100% 0%,50% 100%);
}

.arrow.up:before, .arrow.down:before{
  content: '';
  display: inline-block;
  width: 12px;
  height: 8px;
  margin-right:0.2rem;
}

td.same>span:before, dd.same>span:before { display:none; }

table .arrow{display:table-cell;}

table .arrow.up:before, table .arrow.down:before{
  content: '';
  display: inline-block;
  width: 12px;
  height: 8px;
  margin-right:0.2rem;
}

/* 지수 Arrow CSS */
.index-arrow {
  position:relative;
  font-weight: 700;
  color:var(--gsifn-white);
  height:calc( 2.4 * var(--gsifn-height));
}

.index-arrow.up:before {
  content: "";
  display: inline-block;
  width: 130px;
  height: 70%;
  background-color: #e0180a;
  clip-path: polygon(50% 0%, 100% 50%, 80% 50%, 80% 100%, 20% 100%, 20% 50%, 0% 50%);
  position: absolute;
  z-index: -9999;
  text-shadow: 4px 4px 9px rgba(0,0,0,0.6);
  box-shadow: 10px 10px 32px 0px #e0180a;
-webkit-box-shadow: 10px 10px 32px 0px #e0180a;
-moz-box-shadow: 10px 10px 32px 0px #e0180a;
}

.index-arrow.down:before {
  content: "";
  display: inline-block;
  width: 125px;
  height: 70%;
  clip-path: polygon(50% 0%, 100% 50%, 80% 50%, 80% 100%, 20% 100%, 20% 50%, 0% 50%);
  transform:rotate(180deg);
  position: absolute;
  z-index: -9999;
  background-color: var(--kepco-blue-50);
}

.index-arrow.same{
  color: black; 
}

/* 페이징 Arrow */
.arrows-left:before {
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  background-color: black;
  clip-path: polygon(
      0% 50%, 50% 0%, 60% 10%, 20% 50%, 60% 90%, 50% 100%,  0% 50%,    /*first arrow*/
      40% 50%, 90% 0%, 100% 10%, 60% 50%, 100% 90%, 90% 100%, 40% 50%);  /*second arrow*/
}


.arrow-left:before{
  content:'';
  display: inline-block;
  width: 13px;
  height: 13px;
  background-color: black;
  clip-path: polygon(25% 50%, 75% 0%, 85% 10%, 45% 50%, 85% 90%, 75% 100%, 25% 50%)}


.arrow-right:before{
  content:'';
  display: inline-block;
  width: 13px;
  height: 13px;
  background-color: black;
  clip-path: polygon(25% 50%, 75% 0%, 85% 10%, 45% 50%, 85% 90%, 75% 100%, 25% 50%);
  transform: rotate(180deg);
  }
  

.arrows-right:before {
  content:'';
  display: inline-block;
  width: 13px;
  height: 13px;
  background-color: black;
  clip-path: polygon(
      0% 50%, 50% 0%, 60% 10%, 20% 50%, 60% 90%, 50% 100%,  0% 50%,    /*first arrow*/
      40% 50%, 90% 0%, 100% 10%, 60% 50%, 100% 90%, 90% 100%, 40% 50%);  /*second arrow*/
  transform: rotate(180deg);
  }







/* common에서는 컴포넌트 단위로 관리*/

/* stock_info */
.stock_info{
  display:flex;
  justify-content: space-between;
  padding:0 0 2.2rem;
  border-bottom:var(--gsifn-border);
  font-weight:400;
}

.stock_info > span {
  align-self: flex-end;
  font-size: 1.4rem;
  color:var(--kepco-gray-70);
}

.stock_info h4 {
  font-size: 2.3rem;
  font-weight: 700;
  text-align: center;
  color:var(--kepco-gray-90);
}

.stock_info h4 span{
  margin-left: 0.4rem;
}

.stock_info--mini h5{
  font-size:1.8rem;
}


/* cup */
.cup div { font-size:4.5rem; display:flex; justify-content:center; align-items:center; font-weight:700; }
.cup.container.gap { gap:2.2rem; }
.cup--small div { font-size:2.4rem; }
.cup--small dl { font-size:1.5rem; }


/* ohlv */
.ohlv dl { grid-auto-flow:column; border-bottom:var(--gsifn-border); }
.ohlv dt { border-bottom:var(--gsifn-border); }
/* .ohlv dt, .ohlv dd { height: var(--gsifn-height); line-height: var(--gsifn-height); } */
.ohlv dt, .ohlv dd { padding:1.6rem; }
.ohlv dt, .ohlv dd { border-right:var(--gsifn-border);}
.ohlv dt:last-of-type, .ohlv dd:last-of-type { border-right:none; }


/* Button */
a.btn, .btn {
  padding: 8px 16px;
  background: var(--kepco-blue-50);
  border-radius: 8px;
  color: #fff;
  transition: 0.5s;
}

a.btn:focus{
  transform: scale(0.97);
}

/*form */
.index_form{
  display:flex;
  justify-content: space-evenly;
  align-items: baseline;
  padding: 2rem;
  border: var(--gsifn-border);
  border-radius: 20px;
}
.index_form a.btn{align-self: center;}

/*fieldset */
select, option { padding:4px 8px; height:28px; font-size:inherit; font-family: inherit; }


/* chart_axis_ex */
.chart_axis_ex { display:flex; justify-content: space-between; padding:0.625rem; background-color:var(--kepco-gray-20); }
.chart_axis_ex .left_axis { width:50%; font-weight:700; }
.chart_axis_ex .right_axis { width:50%; text-align:right; font-weight:700; }

/* frg_legend */
.frg_legend { display:flex; justify-content:flex-start; gap:2.4rem; padding:1.6rem 1.2rem; background-color:var(--kepco-gray-5); border:1px solid var(--kepco-gray-10); border-radius:0.6rem; }
.frg_legend .left_axis { flex:1 0 auto; font-weight:400; }
.frg_legend .right_axis { flex:1 0 auto; text-align:right; font-size:1.3rem; font-weight:400; color:var(--kepco-gray-70); }



/* 페이징 */
.page_navi {text-align:center; display:flex; justify-content: center; align-items: center; gap: 1.6rem; opacity: 0.75;}
.page_navi li { display:inline-block; display: flex; justify-content: center; align-items: center;}
.page_navi li, .page_navi li a { color:#aaa; }
.page_navi li.on a { color:var(--kepco-gray-90); font-weight:700;}
.page_navi li a { color:#aaa; font-weight:400;display:inline-block; width:24px; height:24px; line-height: 24px;}
.page_navi li img {width:24px; height:24px; opacity: 0.8;}


.page_navi li.first a{
  display:flex;
  justify-content: center;
  align-items: center;
}

.page_navi li.prev a{
  display:flex;
  justify-content: center;
  align-items: center;
}
.page_navi li.next a{
  display:flex;
  justify-content: center;
  align-items: center;
}
.page_navi li.last a{
  display:flex;
  justify-content: center;
  align-items: center;
}


/* cup */
.cup dl {
  row-gap:1.6rem;
}

/* index */
.index { border-top:var(--gsifn-border); border-bottom:var(--gsifn-border); }
.index:last-of-type{border-right:none;}
.index h5 { text-align:center; padding:1.6rem; background-color:var(--kepco-gray-20); display:flex; justify-content:center; align-items: center; font-weight:700; line-height:150%; border-bottom:var(--gsifn-border); color:var(--kepco-gray-70); }
.index div:first-of-type{display:flex; justify-content: center; align-items:center;}
.index div:last-of-type{display:flex; justify-content: center; align-items:center; padding:1.8rem 0; }

/* 호가 table */
.hoga_tb thead th { width:calc(100%/3); }
.hoga_tb td { text-align:center; }

/* 자본금 table */
.capital_tb.pc_view tbody th { padding:1.6rem 0.8rem; width:30%; }
.capital_tb tbody tr:first-of-type th, .capital_tb tbody tr:first-of-type td,.capital_tb-m tbody tr:first-of-type th, .capital_tb-m tbody tr:first-of-type td{
  border-top:var(--gsifn-border);
}
.capital_tb tbody th,.capital_tb-m tbody th{
  background-color:var(--kepco-gray-20);
  text-align: center;
}
.capital_tb tbody td, .capital_tb-m tbody td{
  padding-right:6px;
  text-align:right;
}

/* 일자별 table */
.daily_tb thead th{width:calc(100%/8);}

/* 지수비교 table */
.compare_tb thead th{width:calc(100%/7);}

/* 외국인 일자별 table */
.foreign_list thead th{width:calc(100%/7);}

/* 주가검색 미니주가 table */
.mini_stock tbody th{width:40%;}
.mini_stock tbody td{width:60%;}

/* 동업종시세비교 table */
.compare thead th{width:calc(100%/6);}

/* 마켓뷰 table */
.marketview_tb thead th{width:calc(100%/5);}


/* market_price */
.market_price > div:first-of-type{
  width:60%;
}
.market_price > div:last-of-type{
  width:40%;
}
.market_price tbody tr{cursor:pointer;}
.market_price tbody tr:hover{background-color:#f0eeee;}
.market_price tbody th {text-align:left; padding-left: 0.8rem;}
.market_price h4{font-size:2rem; margin-bottom:0.8rem; font-weight:400;}


/* 주주현황 */
.sel_year select{
  font-size:1.8rem;
}



/* 재무상태표 */
#fnchart_area {
  width: 100%;
  border-bottom:var(--gsifn-border);
  padding: 40px 0;
  display:flex;
  justify-content: space-between;
  gap:1.6rem;
}
#fnchart_area h3 { font-weight:700; color:var(--kepco-gray-90); }
#fnchart_area h3 span { font-weight:400; color:var(--kepco-gray-70); }
#fnchart_area h4 { font-size:1.8rem; text-align: center; font-weight:400; }

#fnchart_area ul{display:flex; justify-content: space-between; align-items: center; margin-bottom:0.8rem;}
/* #fnchart_area ul li {flex:1 1 0;} */

#fnchart_area > .img_chart {
  text-align: center;
  width: 33.33333%;
}

#fnchart_area > .img_chart0{
  width: 33.33333%;
}


.title_unit {
  display:flex; 
  justify-content: space-between;
  font-weight:400;
  padding-bottom:1.2rem;
  border-bottom:1px solid var(--kepco-gray-20);
  margin-bottom:1.2rem;
}

.title_unit h3 {
  font-size:2.2rem;
  font-weight: 700;
  color: var(--kepco-gray-90);
}

.title_unit h4 {
  font-size:1.8rem;
}

.title_unit span{
  align-self:flex-end;
}

.title_unit select{height:25px;}
.title_unit > .title {display:flex; gap:1.6rem; align-items: center;}

.title_unit > .title > form {
  display:flex; gap:0.4rem; align-items: center;
}

.title_unit .btn {
  display:inline-block;
  padding: 0.375rem;
  font-size:1.4rem;
}


.title_unit .unit {
  align-self: flex-end;
  text-align:right;
  width:30%;
  font-size:1.3rem;
}


/* fn_list */
.fn_list th { background-color: #F0F0F0; }
.fn_list thead th { width:calc(100%/6); }


.sel_year .btn { padding:0.4rem; }



/* 손익계산서 */
/* 현금흐름표 */
/* 재무지표 */
/* 주당지표 */
/* 동업종재무비교 */
.tb_all_title caption {display:flex; justify-content: space-between;}
.tb_all_title h4 {font-size: 1.25rem;font-weight: 400;}
.tb_all_title span {align-self:flex-end;}




/*---- 재무정보 ----*/
.menu_navi {text-align:center; }
.menu_navi li { display:inline-block; padding:1rem 2rem; background:url("../images/menu_bar.png") no-repeat left; }
.menu_navi li:first-child { background:none; }
.menu_navi li span, .menu_navi li a:hover { padding-bottom:2px; font-weight:400; color:var(--kepco-gray-90); border-bottom:var(--gsifn-border); }
.menu_navi li a { font-weight:400; color:#333; border-bottom:none; }

.form_area { margin-bottom:2rem; padding:3rem 0 2rem 0; text-align:center; border-top:var(--gsifn-border); border-bottom:var(--gsifn-border); }
.form_area form { padding-bottom:1rem; }
.form_area form label { font-weight:400; }
.form_area form select { width:200px; }
#item_compare form select { width:150px; }
#state_search { padding-left:2rem; text-align:left; }

#fnchart_area .img_chart { text-align:center; width:100%;}
#fnchart_area .img_chart2 { text-align: center; width:48%; }
#fnchart_area .img_chart3 { text-align: center; width:32%; }
#fnchart_area .img_chart0 { display:none;}
#fnchart_area.chart5 { padding:0; height:230px; border:none; }
#fnchart_area .unit { color:var(--kepco-gray-70); }

#fnchart_area .legend { margin-bottom:10px; padding:5px 1%; width:98%; height:20px; font-size:1.3rem; background:var(--kepco-gray-20); }
#fnchart_area .legend ul { width:100%; color: #868686; }
#fnchart_area .legend .left_item { float:left; width:59%; text-align:left; }
#fnchart_area .legend .left_item span { display:inline-block; margin-right:10px; }
#fnchart_area .legend .right_item { float:right; width:39%; text-align:right; }


/* 기본 공시 */
.notice_tb td { text-align:center; }
#dart { margin-top:1.6rem; }


/*----통합공시-------*/
.term_set {
  display:flex;
  margin-bottom:3rem;
  border-top:var(--gsifn-border);
  border-bottom:var(--gsifn-border);
  text-align:center;
}
.term_set>h3 {
  width:20%;
  border-right:var(--gsifn-border);
  background-color:var(--kepco-gray-20);
  padding:2.4rem 0;
  display:flex;
  justify-content: center;
  align-items: center;
  font-weight:400;
}

.term_set>fieldset {
  width:80%;
  padding:2.4rem 0;
}

.term_set>dd>input,
.term_set>dd>label { vertical-align: middle; }
.term_set>dd>input { margin-right:3px; }
.term_set>dd>label { margin-right:12px; }

.opt_set {
  display:grid;
  grid-template-columns: repeat(5,1fr);
  grid-template-rows: repeat(2,1fr);
  gap:0.8rem;
  margin-bottom:1.6rem;
  text-align:center;
}

.opt_set label{
  display:block;
  outline:var(--gsifn-border);
  border-radius:0.4rem;
  line-height:30px;
  cursor:pointer;
  background-color:var(--kepco-gray-20);
  box-shadow:0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.btn_set{
  display:flex;
  justify-content: center;
  align-items: center;
  gap:2.5rem;
}

.noticeBtn{
  max-width:200px;
  text-align: center;
}

.opt_wrap label{
  display:block;
  outline:var(--gsifn-border);
  border-radius:0.4rem;
  line-height:30px;
  cursor:pointer;
  background-color:var(--kepco-gray-20);
  box-shadow:0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}


.opt_wrap label[for="btnSearch"]{
  background-color: #000000;
  color:var(--gsifn-white);
}

.opt_wrap label[for="test00"]{
  background-color: #053b93;
  color: var(--gsifn-white);
}


.opt_wrap input:checked + label{
  background-color: #87b8fd;
  color: var(--gsifn-white);
}

.source{margin-top:1.6rem;}


/* 종합 시세 */
.index-row {display:flex; justify-content: space-between; align-items:center; border-top: var(--gsifn-border);}
.index-row h5{width:30%;text-align: center; font-weight:400;}
.index-row div:nth-child(2){width:35%; display:flex; justify-content: center; align-items: center;}
.index-row:last-of-type{border-bottom:var(--gsifn-border);}

.index-row div:nth-child(3){width:35%;}

/* gap 조정 */
.gap0 { margin-bottom:0; }


@media screen and (max-width:768px) {
  /* :root{
    font-size:8px;
  } */

  body{
    gap:calc(var(--gsifn-height)/2);
    font-size:1.3rem;
  }


  section.item-3 > *, .container.item-3 > * {
    width:100%;
  }

  .flex.gap, section.gap, .container.gap,.flex.gap-height, section.gap-height, .container.gap-height { gap:calc(var(--gsifn-height)/2); }

  section,.container {
    flex-direction: column;
  }

  th, td {
    padding: 1.2rem;
  }

  table.mb_view {
    display:table;
  }

  .mb_view {
    display: block;
  }
  
  table.pc_view, .pc_view{
    display: none;
  }

  /* caption{
    
  } */

  /* .stock_info{
    flex-direction: column;
    gap:0.8rem;
    align-items: center;
  } */

  .stock_info h4 {
    font-size:1.8rem;
  }

  .stock_info > h4 > span {
    display:none;
  }

  .ohlv dt, .ohlv dd { 
    padding:1.2rem; 
  }
  
  .index_box{
    flex-direction: row;
  }

  .index h5 { 
    padding:1.2rem;
  }

  .index-arrow.up:before,.index-arrow.down:before {
    width: 110px;
  }

  input{width:10px; height:10px;}

  /* page_nav */
  .page_navi {
    gap:0.8rem;
  }

  /* cup */ 
  .cup { flex-direction:row; margin-bottom:0; }
  .cup div { font-size:2.8rem; text-align:left; }
  .cup dl { row-gap:1.2rem; }
  .cup dt { font-weight:400; }

  /* 외국인매매동향 */
  .foreign_list thead th:nth-child(4),.foreign_list thead th:nth-child(6),.foreign_list thead th:nth-child(7){
    display:none;
  }
  .foreign_list tbody td:nth-child(4),.foreign_list tbody td:nth-child(6),.foreign_list tbody td:nth-child(7){
    display:none;
  }

  /* 주가검색 */
  .stock_info--mini h5 {
    width:100%;
    text-align: left;
  }


  /*동업종 시세비교*/
  .compare thead th:nth-child(4),.compare thead th:nth-child(6),.compare thead th:nth-child(7){
    display:none;
  }
  .compare tbody td:nth-child(4),.compare tbody td:nth-child(6),.compare tbody td:nth-child(7){
    display:none;
  }


  /* 주가검색 */
  .cup--small dl {
    margin-top:8px;
  }

  /* market_price */
  .market_price > div:first-of-type{
    width:100%;
  }
  .market_price > div:last-of-type{
    width:100%;
  }

  /* IR활동 */
  /* .calendar tr:nth-child(2n)>td {
  
  } */

  .calendar tr:nth-child(2n-1)>td {
    font-size:1.5rem;
  }

  .calendar a{
    font-size: 1.5rem;
  }

  /* 배당현황 */
  .fn_list th:nth-child(2), .fn_list td:nth-child(2), .fn_list th:nth-child(3), .fn_list td:nth-child(3) {
    display: none;
  }

  /*재무정보*/
  #fnchart_area{
    flex-direction: column;
    padding:0;
  }
  /* .title_unit h3 {
    
  } */
  
  select{
    height:17px;
    
  }

  .title_unit select {
    height: 17px;
  }

  /* #fnchart_area h4{
    
  } */

  #fnchart_area .img_chart {
    width: 100%;
  }
  #fnchart_area .img_chart2 {
    width: 100%;
  }
  #fnchart_area .img_chart3 {
    width: 100%;
  }


  /* 통합공시 */
  fieldset label {
    margin-right: 1.6rem;
  }


  .term_set>h3 {
    width:15%;
  }

  .term_set>fieldset{
    width:85%;
  }

  .opt_set{
    grid-template-columns: repeat(3, 1fr);
  }



}