/*

*/
.article-container > h2 {
	position: relative;
}
.article-container > h2:after { content: ''; display: block; clear: both;  }
.article-container > h2 > span {
	cursor: pointer; text-decoration: underline;
	font-size: 17px; line-height: 1.2em;
}
.article-container > h2 > span.active ~ strong { display: block; }
.article-container > h2 > strong {
	position: absolute; bottom: -20px; left: 30px; display: none;
	padding: 5px;
	border: 1px solid #333; border-radius: 5px;
	background-color: #f9f9f9;
	font-size: 13px;
}

.stock-list {}
.stock-list table { width: 100%; border-collapse: collapse; }

.stock-list table tr th { background-color: #eee; }
.stock-list table tr th > a,
.stock-list table tr td > a { text-decoration: underline; }

.stock-list table tr th,
.stock-list table tr td {
	padding: 15px 10px;
	text-align: center; border: 1px solid #e9e9e9;
}
.stock-list table tr td { position: relative; cursor: default; text-align: left; }
.stock-list table tr td:last-child {
	text-align: center;
}

.stock-list table tr td[data-order="name"].favorite > a { color: #17a2b8; }

.stock-list table tr td[data-order="price_high"],
.stock-list table tr td[data-order="dividend_type"],
.stock-list table tr td[data-order="etc"],
.stock-list table tr td[data-order="eps_date"],
.stock-list table tr td[data-order="cost_rate"],
.stock-list table tr td[data-order="cost_total_rate"] { text-align: center; }

.stock-list table tr td[data-order="dividend_type"] { font-size: 15px; }

.stock-list table tr td[data-order="price_high"] > small {
	width: 70px; display: inline-block; padding: 1px 2px;
	border-radius: 3px;
	font-size: 14px;
}

.stock-list table tr td[data-order="proc"] .btn-warning {
	margin: 0 5px 0 0;
}

.stock-list table tr.active td,
.stock-list table tr:hover td {
	background-color: #eee; color: #333;
}
.stock-list > p { padding: 10px; font-size: 17px; text-align: right; }

/* ------------------------------ layer popup ------------------------------ */
.popup {
	position: fixed; top: 50%; left: 50%; z-index: 100; display: none;
	/*width: 100%; height: 100%;*/
	width: calc(100% - 40px); height: calc(100% - 40px);
	-webkit-transform:  translate(-50%, -50%);
    -moz-transform:     translate(-50%, -50%);
    -ms-transform:      translate(-50%, -50%);
    -o-transform:       translate(-50%, -50%);
    transform:          translate(-50%, -50%);
}

.popup > .popup-wrap {
	position: absolute; top: 0; left: 0;
	width: calc(100% - 40px); height: calc(100% - 40px);
	/*margin: 20px;*/ padding: 20px;
	background-color: #fff;
	border-radius: 5px;
}
.popup > .popup-wrap > .popup-head:after,
.popup > .popup-wrap > .popup-body:after,
.popup > .popup-wrap > .popup-body > .popup-content:after,
.popup > .popup-wrap > .popup-foot:after { content: ''; display: block; clear: both; }

.popup > .popup-wrap > .popup-head {
	box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.02);
}
.popup > .popup-wrap > .popup-head > h2 {
	position: relative; height: 30px;
}
.popup > .popup-wrap > .popup-head > h2 .popup-title {
	font-size: 18px; line-height: 30px;
}
.popup > .popup-wrap > .popup-head > h2 .close-btn {
	position: absolute; top: 0; right: 0;
	padding: 5px 17px;
}

.popup > .popup-wrap > .popup-body {
	position: absolute; top: 50px; left: 0;
	width: calc(100% - 30px); height: calc(100% - 150px);
	padding: 15px;
    overflow-y: auto; -ms-overflow-style: none;
    scrollbar-width: none;
}
.popup > .popup-wrap > .popup-body::-webkit-scrollbar { height: .5em; }
.popup > .popup-wrap > .popup-body::-webkit-scrollbar-track { background: #f1f1f1 ; }
.popup > .popup-wrap > .popup-body::-webkit-scrollbar-thumb { opacity: 0; background: #c1c1c1; border-radius: .5em; }
.popup > .popup-wrap > .popup-body::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }
.popup > .popup-wrap > .popup-body > .popup-intro { position: relative; margin: 0 0 15px; }
.popup > .popup-wrap > .popup-body > .popup-intro .openclose {
	display: inline-block; cursor: pointer;
	padding: 5px 10px 7px; background-color: #000;
	border-radius: 5px;
	font-size: 13px; color: #fff;
}
.popup > .popup-wrap > .popup-body > .popup-intro .popup-intro-content { display: none; padding: 15px 0 0; }
.popup > .popup-wrap > .popup-body > .popup-intro .popup-intro-content * { font-family: 'Nanum Gothic' !important; line-height: 1.5em; }
.popup > .popup-wrap > .popup-body > .popup-intro .popup-intro-content > h2 { font-weight: 600; margin: 0 0 15px; }
.popup > .popup-wrap > .popup-body > .popup-intro .popup-intro-content p b { font-weight: 600; }
.popup > .popup-wrap > .popup-body > .popup-intro .popup-intro-content ul { list-style-type: disc; margin: 8px 0 16px; padding: 0 0 0 24px; }
.popup > .popup-wrap > .popup-body > .popup-intro .popup-intro-content hr { border: none; border-top: 1px solid #eee; height: 15px; margin: 7px 0 0; }
.popup > .popup-wrap > .popup-body > .popup-intro .popup-intro-content > ul > li {}

.popup > .popup-wrap > .popup-body > .popup-content {
    width: 100%;
    border-collapse: collapse;
}
.popup > .popup-wrap > .popup-body > .popup-content {}
.popup > .popup-wrap > .popup-body > .popup-content > .tradingview-widget-container {
	float: left; width: calc(100% - 330px); margin: 0 10px 0 0;
}
.popup > .popup-wrap > .popup-body > .popup-content > .tradingview-widget-container iframe { height: 365px !important; }
.popup > .popup-wrap > .popup-body > .popup-content > .popup-info {
	/*margin: 15px 0 0; overflow-y: auto*/
	float: left; width: 310px; margin: 0 0 0 10px;
}
.popup > .popup-wrap > .popup-body > .popup-content > .popup-info:after { content: ''; display: block; clear: both;  }
.popup > .popup-wrap > .popup-body > .popup-content > .popup-info ul li {
	/*float: left; width: 50%;*/ margin: 0 0 15px; cursor: default;
}
.popup > .popup-wrap > .popup-body > .popup-content > .popup-info ul li:last-child { margin: 0; }
.popup > .popup-wrap > .popup-body > .popup-content > .popup-info ul li > span {
	display: inline-block; width: 170px;
}

.popup > .popup-wrap > .popup-body > .popup-content > .popup-info[data-type="etf"] { width: 100%; }
.popup > .popup-wrap > .popup-body > .popup-content > .popup-info ul li img[alt="chart image"] { max-width: 100%; }


.popup > .popup-wrap > .popup-body > .popup-content > .iframe-container:after { content: ''; display: block; clear: both;  }
.popup > .popup-wrap > .popup-body > .popup-content > .iframe-container > div {
	/*clear: both; overflow: hidden;*/
}
.popup > .popup-wrap > .popup-body > .popup-content > .iframe-container > div.chart0,
.popup > .popup-wrap > .popup-body > .popup-content > .iframe-container > div.chart1 {
	float: left; width: calc(50% - 10px); margin: 5px;
}
.popup > .popup-wrap > .popup-body > .popup-content > .iframe-container > div.chart2 {
	clear: both; overflow: hidden; margin: 5px 0;
}
.popup > .popup-wrap > .popup-body > .popup-content > .iframe-container > div > h2 {
	margin: 15px 0 0; padding: 15px 0 0;
	/*border-top: 1px solid #eee;*/
	font-size: 18px; font-weight: 900;
}
.popup > .popup-wrap > .popup-body > .popup-content > .iframe-container > div iframe {
	min-height: 745px; width: 100%;
	border: none;
}
/*@media screen and (max-width: 800px) {
	.popup > .popup-wrap > .popup-body > .popup-content > .iframe-container > div.chart0,
	.popup > .popup-wrap > .popup-body > .popup-content > .iframe-container > div.chart1,
	.popup > .popup-wrap > .popup-body > .popup-content > .iframe-container > div.chart2 {
		clear: both; margin: 10px 0;
	}
}*/

.popup > .popup-wrap > .popup-body > .my-info {
	margin: 15px 0 0; padding: 15px 0 0; border-top: 1px solid #e9e9e9;
}
.popup > .popup-wrap > .popup-body > .my-info h3 {
	font-size: 16px; line-height: 1.8em;
}
.popup > .popup-wrap > .popup-body > .my-info h3 span {
	font-size: 17px; padding: 5px 5px 6px; border-radius: 4px;
}
.popup > .popup-wrap > .popup-body > .my-info ul li {
	margin: 15px 0 0;
}

.popup > .popup-wrap > .popup-foot {
	position: absolute; bottom: 0px; left: 0;
	width: calc(100% - 30px); background-color: #fff;
	padding: 15px; border-top: 1px solid #e9e9e9;
	box-shadow: 0px -10px 10px rgba(0, 0, 0, 0.02);
}
.popup .popup-wrap .popup-foot > button {
	padding: 10px 15px; float: right;
	border: 1px solid #e9e9e9; border-radius: 5px;
}

#tradingviewstock > div { height: auto !important; }


@media screen and (max-width: 414px) {
	.popup > .popup-wrap > .popup-body > .popup-content > .popup-info ul li > span {
		width: 100%;
	}
}

@media screen and (max-width: 900px) {
	.popup > .popup-wrap > .popup-body > .popup-content > .tradingview-widget-container,
	.popup > .popup-wrap > .popup-body > .popup-content > .popup-info {
		float: none; width: 100%; margin: 0; clear: both;
	}
	.popup > .popup-wrap > .popup-body > .popup-content > .popup-info { margin: 20px 0 0; }

	.popup-body .popup-content {
		/*min-height: 300px;*/
	}
	.stock-list[data-type="etf"] table tr td[data-order="name"] { width: 220px; }
}

/*@media screen and (max-width: 1440px) {
    .table-responsive {
        overflow-x: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .table-responsive::-webkit-scrollbar { height: .5em; }
    .table-responsive::-webkit-scrollbar-track { background: #f1f1f1 ; }
    .table-responsive::-webkit-scrollbar-thumb { opacity: 0; background: #c1c1c1; border-radius: .5em; }
    .table-responsive::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }
    .table-responsive .table {
        width: 100%; min-width: 1440px;
        border-collapse: collapse;
    }
}*/

.no-data {
	margin: 0 0 10px; padding: 15px 0; border-bottom: 1px solid #e9e9e9;
	color: #a00;
}