@charset "utf-8";

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

:root {
    --n-900: #0c0c0c;
    --n-800: #2d2d2d;
    --n-700: #4b4b4b;
    --n-600: #5d5d5d;
    --n-500: #848484;
    --n-400: #a5a5a5;
    --n-300: #cbcbcb;
    --n-200: #dedede;
    --n-100: #ececec;
    --n-75: #f2f2f2;
    --n-50: #f4f4f4;
    --green: #52bd94;
    --yellow: #ffb020;
    --red: #ea5355;
}

:root {
	font-size: 100%;

	--ir-black:var(--n-800);
	--ir-black-second:var(--n-600);
	--ir-black-third:var(--n-900);
	
	--ir-gray:var(--n-200);
	--ir-gray-second:var(--n-500);

	--ir-up-color:#EA5355;
	--ir-down-color:#0072C6;

	--ir-bg-color:var(--ir-black);
	--ir-text-color:var(--ir-black-second);
	--ir-title-color:var(--ir-black-third);
	
	--ir-border-color:var(--ir-gray);
}


* {
	padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: inherit;
    line-height: 160%;
    font-style: normal;
    box-sizing: border-box;
    word-wrap: break-word;
    word-break: break-word;
    touch-action: auto;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-tap-highlight-color: #ffffff00 !important;
}

html,body {
	font-family: "Pretendard Variable", sans-serif;
	letter-spacing: 0;
	-webkit-overflow-scrolling: touch;
	-moz-overflow-scrolling: touch;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-o-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	font-size: 1rem;
	accent-color: var(--ir-bg-color);
    background: transparent;
}

table { width:100%; border-collapse:separate; border:none; }
th, td, dt, dd { padding:1.2rem 0; }
thead th { font-weight:600; color:#FFF; background-color:var(--ir-bg-color); }
thead th:first-child { border-radius:0.8rem 0 0 0.8rem; }
thead th:last-child { border-radius:0 0.8rem 0.8rem 0; }
tbody th, tbody td,
tfoot th, tfoot td { border-right:1px solid var(--ir-border-color); border-bottom:1px solid var(--ir-border-color); }
tbody td:last-child,
tfoot td:last-child { border-right:none; }
tfoot th, tfoot td { background-color:var(--n-100); }

ul, ol, li {
    list-style: 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%);
  }


/* 폼 입력 */
input, select, textarea { font-size:1rem; color:var(--ir-text-color); }
label { margin-right:0.6rem; font-size:1rem; color:var(--ir-text-color); }

/* 링크 */
a {text-decoration:none}
a:visited {color:var(--ir-text-color);}

a.btn { background-color:var(--ir-bg-color);}

/* 등락 색상*/
.up { color:var(--ir-up-color); }
.down { color:var(--ir-down-color); }
.same { color:var(--ir-text-color); }

/* clear 리셋 */
.clear:after { display:none; }

/* 기본 Arrow */
.arrow { display:flex; justify-content:center; align-items:center; gap:0.2rem; }
 
.arrow.up:before, .arrow.up:before {
  background-color: var(--ir-up-color);
  clip-path: polygon(50% 0%,100% 100%,0% 100%);
}

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

.arrow.up:before, .arrow.down:before{
  content: '';
  display: inline-block;
  width: 0.6rem;
  height: 0.4rem;
  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: 0.6rem;
  	height: 0.4rem;
	margin-right:0.2rem;
}


/* 종목명 */
#stock_info { margin-bottom:3rem; width:100%; display:flex; flex-direction:row; align-items:flex-end; justify-content:space-between; }
h4.name, div.date { float:none; width:50%; line-height:100%; }
h4.name { margin:0; padding:0; font-size:1.5rem; font-weight:700; color:var(--ir-title-color); }
div.date { margin:0; padding:0; font-size:1rem; font-weight:400; color:var(--ir-text-color); text-align:right; }

/* 현재가, 시고저가 */
#quote_chart { margin:0; padding:0; height:auto; border:none; }
#cur_chart_box { margin-bottom:3rem; width:100%; display:flex; flex-direction:row; align-items:center; justify-content:space-between; }
#cup, #ohlv { float:none; width:48%; }

#cup { display:flex; flex-direction:row; align-items:center; justify-content:space-between; }
#cup .current, #cup .per_updown { float:none; margin:0; width:50%; }
#cur_close { font-size:3rem; font-weight:700; }
#cur_close.arrow.up:before, #cur_close.arrow.down:before { width:1.6rem; height:1.2rem; }
.per_updown > dt:first-child, .per_updown > dd:nth-child(2) { margin-bottom:1rem; }

#ohlv, #ohlv dl, #ohlv dl dt { border:none; }
#ohlv dl dt { font-weight:600; color:#FFF; background-color:var(--ir-bg-color); border-right:1px solid var(--ir-border-color); }
#ohlv dl:first-child dt { border-radius:0.8rem 0 0 0.8rem; }
#ohlv dl:last-child dt { border-radius:0 0.8rem 0.8rem 0; border-right:none; }
#ohlv dl dd { border-right:1px solid var(--ir-border-color); border-bottom:1px solid var(--ir-border-color); }
#ohlv dl:last-child dd { border-right:none; }

/* 시세 차트 */
#chart_min { float:none; margin:0; margin-bottom:3rem; padding:0; width:100%; }
.btn_check { margin-bottom:1rem; text-align:center; }

/* 호가정보, 자본금, 지수 */
#current_bottom { margin:0; padding:0; width:100%; display:flex; flex-direction:row; align-items:flex-start; justify-content:space-between; }
#hoga_tb { margin:0; float:none; width:40%; }
#cap_ind { margin:0; float:none; width:56%; }

.capital_tb tbody tr:first-child th, .capital_tb tbody tr:first-child td { border-top:1px solid var(--ir-bg-color); }
.capital_tb th:nth-child(2n-1) { padding-left:1rem; background-color:var(--n-100); }
.capital_tb tbody td { padding-right:1rem; }

#index_tb { margin-top:3.4rem; border:none; }
.indexs { display:flex; flex-direction:row; align-items:flex-start;	justify-content:flex-end; gap:1.5rem; }
.index { padding:1.5rem; width:100%; max-width:20rem; background:white; border-radius:1.6rem;
box-shadow:0px 1.336px 5.342px 0px rgba(0, 0, 0, 0.1); }
.index_name { display:inline-block; height:1.6rem; font-size:1.4rem; font-weight:700; color:var(--ir-title-color); overflow:hidden; }
.index_close { font-size:1.6rem; font-weight:700; }
.index_change { font-size:1rem; font-weight:400; }
.index_change.arrow { justify-content:flex-start; }

.index_arrow { width:100%; height:7rem; margin:1.7rem 0 1.7rem; }

.index_arrow.down{
	background: linear-gradient(0deg, var(--ir-down-color) 10.71%, rgba(186, 201, 255, 0) 117.79%);
	mask-image: url('data:image/svg+xml,%3Csvg%20width%3D%2264%22%20height%3D%2273%22%20viewBox%3D%220%200%2064%2073%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M61.7686%2030.2088C63.4367%2030.2088%2064.3717%2032.1305%2063.3423%2033.4431L33.5737%2071.398C32.7729%2072.4189%2031.227%2072.4189%2030.4263%2071.398L0.657674%2033.4431C-0.371754%2032.1305%200.563322%2030.2088%202.23138%2030.2088H15.8838C16.9884%2030.2088%2017.8838%2029.3133%2017.8838%2028.2088V2.00002C17.8838%200.895454%2018.7792%202.28882e-05%2019.8838%202.28882e-05H42.987C44.0915%202.28882e-05%2044.987%200.895454%2044.987%202.00002V28.2088C44.987%2029.3133%2045.8824%2030.2088%2046.987%2030.2088H61.7686Z%22%20fill%3D%22url(%23paint0_linear_1_2494)%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear_1_2494%22%20x1%3D%2231.6739%22%20y1%3D%2264.4316%22%20x2%3D%2231.6739%22%20y2%3D%22-12.8353%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%230072C6%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23BAC9FF%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E');
	mask-repeat: no-repeat;
	mask-size: contain;
	mask-position: center;
}

.index_arrow.up{
	transform: matrix(1, 0, 0, -1, 0, 0);
	background: linear-gradient(0deg, var(--ir-up-color) 10.71%, rgba(255, 186, 186, 0) 117.79%);
	mask-image: url('data:image/svg+xml,%3Csvg%20width%3D%2264%22%20height%3D%2273%22%20viewBox%3D%220%200%2064%2073%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M61.7686%2030.2088C63.4367%2030.2088%2064.3717%2032.1305%2063.3423%2033.4431L33.5737%2071.398C32.7729%2072.4189%2031.227%2072.4189%2030.4263%2071.398L0.657674%2033.4431C-0.371754%2032.1305%200.563322%2030.2088%202.23138%2030.2088H15.8838C16.9884%2030.2088%2017.8838%2029.3133%2017.8838%2028.2088V2.00002C17.8838%200.895454%2018.7792%202.28882e-05%2019.8838%202.28882e-05H42.987C44.0915%202.28882e-05%2044.987%200.895454%2044.987%202.00002V28.2088C44.987%2029.3133%2045.8824%2030.2088%2046.987%2030.2088H61.7686Z%22%20fill%3D%22url(%23paint0_linear_1_2494)%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear_1_2494%22%20x1%3D%2231.6739%22%20y1%3D%2264.4316%22%20x2%3D%2231.6739%22%20y2%3D%22-12.8353%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%230072C6%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23BAC9FF%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E');
	mask-repeat: no-repeat;
	mask-size: contain;
	mask-position: center;
}

.pc_view {display:block;}
.mb_view {display:none;}
th.pc_view, td.pc_view { display:table-cell; }
span.pc_view { display:inline; }


/* 모바일 */
@media screen and (max-width:999px) {
    /* 레이아웃 변경 */
    #current_bottom { flex-direction:column; }
    #hoga_tb, #cap_ind { width:100%; }
}

@media screen and (max-width:899px) {
    .pc_view {display:none;}
    .mb_view {display:block;}
    th.pc_view, td.pc_view { display:none; }
    span.pc_view { display:none; }

    /* 레이아웃 변경 */
    #stock_info, #cur_chart_box, #cup, #current_bottom { flex-direction:column; }
    h4.name, div.date, 
    #cup, #ohlv, 
    #cup .current, #cup .per_updown, 
    #hoga_tb, #cap_ind { width:100%; }

    /* 종목명 */
    #stock_info { margin-bottom:1rem; }
    h4.name { margin-bottom:1rem; }

    /* 현재가 */ 
    #cup { margin-bottom:1rem; }
    .per_updown { height:4rem; display:flex; flex-direction:column; align-items:center; justify-content:center; flex-wrap:wrap; }
    #updown_title, #updown, #percent_title, #percent { align-self:center; margin:0; padding:0; float:none; width:50%; height:2rem; }
    #updown_title, #percent_title, #percent { display:flex; flex-direction:column; justify-content:center; }

    /* 호가정보 */
    #hoga_tb { margin-bottom:3rem; }

    /* 자본금 */
    #cap_ind th, #cap_ind td { padding:inherit 1rem; width:50%; text-align:center; }
}

@media screen and (max-width:599px) {
    .indexs { width:100%; flex-direction:column; align-items:center; gap:1.5rem; }
    .index { width:100%; }
}

/* 재무정보 */
.fnchart_area { margin-bottom:3rem; display:flex; flex-direction:row; align-items:flex-start; justify-content:space-between; }
.fnchart_area .img_chart { width:32%; text-align:center; }
.fnchart_area h4 { margin-bottom:1.2em; font-size:1.2rem; font-weight:700; text-align:center; }
.fnchart_area .fnchart { height:250px; }

#title_unit,
.title_unit { margin-top:3rem; display:flex; flex-direction:row; align-items:center; justify-content:space-between; }
#title_unit .title, #title_unit .unit { float:none; width:50%; }
#title_unit .title h3,
.title_unit .title h3 { padding:1rem 0; font-size:1.5rem; font-weight:700; color:var(--ir-title-color); }
#title_unit .unit,
.title_unit .unit { font-size:1rem; font-weight:400; color:var(--ir-text-color); }
.fn_list th:first-child { width:28%; }
.fn_list th, .fn_list td { width:18%; }
/* .fn_list tbody th {  } */
.fn_list tbody td { padding-right:1rem; }

.fn_bottomTb { margin-top:6rem; }

@media all and (max-width:899px) {
    .pc_view,
    table .pc_view { display:none; }
    .mb_view { display:block; }
    table .mb_view { display:table-cell; }

    .fnchart_area { flex-direction:column; align-items:center; gap:1.5rem; }
    .fnchart_area .img_chart { width:100%; max-width:600px; }

    /* 재무정보 */
    /* #fnchart_area>.img_chart{
        width:100%;
        margin-bottom:30px;
        float:none;
    }
    #fnchart_area>div:last-child { margin-bottom:0; }
    #title_unit { margin-top:40px; }
    #title_unit>.title { width:70%; }
    #title_unit>.title>h3 {margin-right:20px;}
    #title_unit>.unit { width:30%; }
    .fn_list th:first-child, .fn_list td:first-child { width:30%; }
    .fn_list th, .fn_list td { width:23.333333%; }
    .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_area2{
        margin-bottom:40px;
        border-top: 2px solid #666;
        border-bottom: 1px solid #ccc;
        padding: 40px 0;
    }
    #fnchart_area2>div {
        width:100%;
        float:none;
        margin-top:40px;
    }
    #fnchart_area2>div:first-child {
        margin-top:0;
    } */

    /* 재무정보 차트 Style-2 */
    /* .legend li>span{
        display:block;
        margin-bottom:5px;
        margin-right:0px;
    }
    .right_item { margin-top:37px; } */
}