@charset "utf-8";

#container .content { width: 1450px; }
.top-search-area { background:#fff; border-bottom: 1px solid #d2d2d2; }
.top-search-area .section { position: relative; width: 1000px; margin: 0 auto; }


/* 상단 검색 인풋 */
.search-input { position: relative; text-align: center; width: 60%; margin: 30px auto 0; }
.search-input input[type="text"] { width: 100%; display: inline-block; background: #F1F1F1; border: 1px solid #d4d4d4; border-radius: 50px; outline: none; height: 50px; padding: 0 50px 0 25px; }
.search-input button { position: absolute; top: 12px; right: 25px; border: 0; cursor: pointer;}
.search-input button img { width: 25px; height: 25px; }


/* 탭메뉴 */
.tab-menu { padding-top: 20px;white-space: nowrap; overflow:hidden; width:100%; }
.tab-menu ul { overflow-y: auto; }
.tab-menu ul li { float: left; padding: 10px 20px; font-size: 14px; position: relative; font-weight: 600; cursor: pointer; transition: color .3s ease; border-bottom: 3px solid #fff; }
.tab-menu ul li.on { font-weight:700; border-bottom-color: #5283e0; }
.tab-menu ul li.on,
.tab-menu ul li:hover:not(.disabled) { color: #5283e0; border-bottom-color: #5283e0; }
.tab-menu ul li.disabled { color:#b0b0b0; cursor:no-drop; border-bottom-color: #fff; }


/* 탑탭 search 영역 */
.toptap-wrap { position: relative; width: 100%; margin: 30px 0 0; }
.toptap-wrap .layout-box {float: left; width: 50%; }
.toptap-wrap .layout-box .title-box { position: relative; float: left; width: 120px; height: 160px; text-align: center; }
.toptap-wrap .layout-box .title-box::before { content: ''; position: absolute; top:0; left:0; width: 100%; height: 100%; background-size: cover; }
.toptap-wrap .layout-box.left .title-box::before { background: url(../../../images/sub/search/tit_bg_01.png) no-repeat center; }
.toptap-wrap .layout-box.right .title-box::before { background: url(../../../images/sub/search/tit_bg_02.png) no-repeat center; }
.toptap-wrap .layout-box .title-box .align-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1;}
.toptap-wrap .layout-box .title-box .align-box .tit { position: relative; font-size: 15px; color: #fff; }
.toptap-wrap .layout-box .title-box .align-box .more-btn { position: relative; border:0; padding: 4px 15px; background:#fff; color: #000; font-size: 9px; font-weight: 600; border-radius: 30px; margin-top: 20px; z-index: 1; cursor: pointer;}
.toptap-wrap .layout-box .title-box .align-box .more-btn:hover { background: rgba(255,255,255,0.85); }
.toptap-wrap .layout-box .list-box { float: left; width: calc(100% - 120px); height: 160px; background: #fff; border: 1px solid #DEE3EB; border-left: 0; }
.toptap-wrap .layout-box .list-box ul { padding: 30px 15px; }
.toptap-wrap .layout-box .list-box ul li { float: left; width: calc(25% - 8px); cursor: pointer;}
.toptap-wrap .layout-box .list-box ul li:not(:last-child) { margin-right: 10px; }
.toptap-wrap .layout-box .list-box ul li .img-box { width: 100%; height: 70px; border: 1px solid #D3D3D3; text-align: center;}
.toptap-wrap .layout-box .list-box ul li .img-box img { max-width: 100%; max-height: 100%; padding:3px; }
.toptap-wrap .layout-box .list-box ul li .tit-box { font-size: 12px; color: #7D7D7D; text-align: center; font-weight: 600; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 100%; padding-top: 10px;}
.toptap-wrap .layout-box .list-box ul li:hover .tit-box { color: #333; }
.toptap-wrap .layout-box .list-box .chart-box { position: relative; width: 100%; height: 100%; }
.toptap-wrap .layout-box .list-box .chart-box img { max-width: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }



/* 검색결과 */
.result-list-wrap { position: relative; background: #fff; padding: 30px; margin-top: 30px; border: 1px solid #DEE3EB; }
.result-list-wrap .list-container { width: 100%; float: left; margin-top: 20px; padding-bottom: 20px; }
.result-list-wrap .list-container:not(:first-child) { margin-top: 30px;}
.result-list-wrap .list-container .info-title { font-size: 18px; font-weight: 900; display: block; margin-bottom: 15px; color: #000; text-shadow: 0 0 0 black;}
.result-list-wrap .list-container .info-title .label { position: relative; top: -3px; display: inline-block; height: 17px; padding: 0 10px; background: #fff; border:1px solid #B1B1B1; line-height: 17px; font-size: 10px; border-radius: 10px; margin-left: 10px; color: #999;}
.result-list-wrap .list-container .info-box { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #DEE3EB; position: relative; }
.result-list-wrap .list-container .info-box .star-toggle { position: absolute; top: 2px; left: -3px;  }
.result-list-wrap .list-container .info-box:last-child { margin-bottom: 0; border:0; padding-bottom: 0; }
.result-list-wrap .list-container .info-box:last-child:after { display: none; }
.result-list-wrap .list-container .info-box.img-box:after { content: ''; display: block; clear: both; }
.result-list-wrap .list-container .info-box.img-box .img-area { margin-right: 20px; }
.result-list-wrap .list-container .info-box.img-box .txt-area { width: calc(100% - 90px); }
.result-list-wrap .list-container .info-box.img-box .star-toggle { top: 2px; }
.result-list-wrap .list-container .info-box .img-area { float: left; width: 70px; height: 70px; border: 1px solid #dee3eb; vertical-align: top; }
.result-list-wrap .list-container .info-box .img-area .img { width: 100%; height: 100%; position: relative; overflow: hidden; background: #fff; }
.result-list-wrap .list-container .info-box .img-area .img .thumbnail { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 1; }
.result-list-wrap .list-container .info-box .img-area .img .thumbnail img { position: absolute; top: 0; left: 0; max-width: 100%; height: auto; z-index: 1; }

.result-list-wrap .list-container .info-box .txt-area { position: relative; display: inline-block; vertical-align: top; letter-spacing: 0; width: 100%; }
.result-list-wrap .list-container .info-box .txt-area .title { font-size: 14px; font-weight: 900; padding-left: 16px; color: #000; display: inline-block; margin-bottom: 5px; }
.result-list-wrap .list-container .info-box .txt-area .title:hover { text-decoration: underline; color: #5283e0; }
.result-list-wrap .list-container .info-box .txt-area .etc-info-list .etc-info { font-size: 12px; color: #000; display: inline-block; margin-right: 13px; position: relative; }
.result-list-wrap .list-container .info-box .txt-area .etc-info-list .etc-info:last-child { margin-right: 0; }
.result-list-wrap .list-container .info-box .txt-area .etc-info-list .etc-info:not(:last-child):after { position: absolute; width: 1px; background: #cbcbcb; height: 10px; top: 4px; right: -9px; content: ''; }
.result-list-wrap .list-container .info-box .txt-area .unit { letter-spacing: -1px; border-radius: 3px; color: #999; cursor: default; position: relative; padding-right: 5px; }
.result-list-wrap .list-container .info-box .txt-area .unit img { display: inline-block; width: 13px; height: 13px; vertical-align: middle; }
.result-list-wrap .list-container .btn-wrap { display: block; }
.result-list-wrap .list-container .btn-wrap .more-btn { float: right; font-size: 11px; color: #000; font-weight: bold; }


/* 페이징 */
.result-list-wrap .paging-wrap { margin-top: 10px; overflow: hidden; float: left; width: 100%; padding-top:20px; border-top:1px solid #e5e5e5;}
.result-list-wrap .paging-wrap .detail-paging { float: right; height: 35px; }
.result-list-wrap .paging-wrap .detail-paging ul { overflow: hidden; display: inline-block; }
.result-list-wrap .paging-wrap .detail-paging ul li { float: left; }
.result-list-wrap .paging-wrap .detail-paging ul li a { padding: 0 10px; display: block; height: 35px; line-height: 33px; border: 1px solid #e5e5e5; border-right: none; letter-spacing: 0; font-size: 12px;  color: #777; min-width: 35px; text-align: center; }
.result-list-wrap .paging-wrap .detail-paging ul li.select a { background: #5283e0; color: #fff; border-color: #5283e0; }
.result-list-wrap .paging-wrap .detail-paging ul li a img { width: 15px; opacity: 0.5; position: relative; top: 5px; }
.result-list-wrap .paging-wrap .detail-paging ul li.pre-btn a { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } 
.result-list-wrap .paging-wrap .detail-paging ul li.post-btn a { border-right: 1px solid #e5e5e5; border-top-right-radius: 3px; border-bottom-right-radius: 3px; }

.result-list-wrap .paging-wrap .number-limit { vertical-align: top; color: #999; font-size: 12px; line-height: 30px; float: left; }
.result-list-wrap .paging-wrap .number-limit .filter-title { line-height: 30px; vertical-align: top; margin-right: 5px; font-weight: 700; color: #888; }
.result-list-wrap .paging-wrap .number-limit ul { overflow: hidden; display: inline-block; }
.result-list-wrap .paging-wrap .number-limit ul li { float: left; }
.result-list-wrap .paging-wrap .number-limit ul li a { display: inline-block; min-width: 28px; height: 25px; text-align: center; font-weight: 500; font-size: 12px; color: #999; letter-spacing: 0; padding: 0 5px; border-radius: 4px; line-height: 25px; margin-right: 5px; }
.result-list-wrap .paging-wrap .number-limit ul li.select a { color: #fff; background: #5283e0; }
.result-list-wrap .paging-wrap .number-limit ul li a:hover { color: #222; }
.result-list-wrap .paging-wrap .number-limit ul li.select a:hover { color: #fff; }


/* 즐겨찾기 버튼 */
.star-toggle { position: relative; }
.star-toggle .star-toggle-input { display: none;}
.star-toggle .star-toggle-btn { width: 16px; height: 16px; background: url(../../../images/sub/common/star_toggle_img.png) no-repeat; display: block; background-size: 16px 34px; background-position: 0 0; cursor: pointer;}
.star-toggle .star-toggle-input:checked + .star-toggle-btn { background: url(../../../images/sub/common/star_toggle_img.png) no-repeat; background-size: 16px 34px; background-position: 0 -17px;}


/* result detail - 개별페이지 */
.detail-container { padding-top: 30px; }


/* common title */
.detail-container .com-title { position: relative; border-bottom: 4px solid #dee3eb; padding: 0 0 5px 40px; font-size: 15px; color: #0d003a; font-weight: bold; margin-bottom: 20px; }
.detail-container .com-title img { position: absolute; bottom:-1px; left:0; width: 27px; height: auto; }
.detail-container .com-title .more-btn { position: absolute; top: 0; right: 0; font-size: 11px; color: #000; font-weight: bold; }
.detail-container .com-sub-title { position: relative; font-size: 14px; font-weight: bold; color: #0d003a; padding-bottom: 7px; }
.detail-container .com-sub-title img { display: inline-block; width: 15px; height: auto; vertical-align: middle; margin-right: 5px; }
.detail-container .com-sub-text { font-size: 12.5px; color: #888; letter-spacing: -.5px; padding-bottom: 15px;}

/* common table */
.detail-container .info-table table { position: relative; table-layout: fixed; width: 100%; border-top: 1px solid #bfc3cc; font-size: 13px; text-align: center; }
.detail-container .info-table table .align-left { text-align: left !important; }
.detail-container .info-table table td,
.detail-container .info-table table th { background: #f5f7fa; border-bottom: 1px solid #dee3eb; border-right: 1px solid #dee3eb; height: 35px; padding: 5px 10px; }
.detail-container .info-table table td { background: #fff; }
.detail-container .info-table table tbody td:last-child,
.detail-container .info-table table thead th:last-child { border-right:0; }

/* 상단 기본정보 영역 */
.default-info { padding: 40px; margin-top: 0; }
.default-info .info-area { margin-top: 40px; }
.default-info .title-area { position: relative; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #dee3eb; padding-right: 140px;}
.default-info .title-area .logo-box { position: relative; float: left; width: 90px; height: 90px; margin-right: 20px; border: 4px solid #dee3eb; overflow: hidden; }
.default-info .title-area .logo-box img { max-width: 100%; max-height: 100%; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); }
.default-info .title-area .title-box { float: left; width: calc(100% - 110px); }
.default-info .title-area .title-box .tit { padding: 18px 0 7px; font-size: 20px; color: #000; text-shadow: 0 0 black; }
.default-info .title-area .title-box .txt { font-size: 13px; color: #999; }
.default-info .title-area .util-btn { position: absolute; top: 10px; right: 0;}
.default-info .title-area .util-btn .item { float: left; text-align: center; margin-left: 15px; }
.default-info .title-area .util-btn .item button { position: relative; border: 0; background: transparent; width: 40px; height: 40px; background: #F2F4F7; border: 1px solid #D1D8E4; border-radius: 50px; cursor: pointer; }
.default-info .title-area .util-btn .item button img { width: 14px; height: 14px; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); }
.default-info .title-area .util-btn .item button .star-toggle { position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); }
.default-info .title-area .util-btn .item p { font-size: 11px; color: #64708D; padding-top: 5px; padding-top: 5px; }

/* 하단 컨텐츠 영역 */
.detail-info { padding: 0; }
.detail-info .category-wrap ul { overflow: hidden; border-bottom: 1px solid #dee3eb; padding: 0 35px; }
.detail-info .category-wrap ul li { float: left; margin-right: 30px; }
.detail-info .category-wrap ul li a { padding: 15px 0; display: block; font-weight: bold; letter-spacing: 0; position: relative; font-size: 13.5px; }
.detail-info .category-wrap ul li:hover a,
.detail-info .category-wrap ul li.on a { color: #5281dc; }
.detail-info .category-wrap ul li.on a:after { position: absolute; content: '' ; width: 100%; left: 0; bottom: 0; height: 2px; background: #5281dc; }
.detail-info .category-wrap ul li.disabled a { color: #b0b0b0; cursor: no-drop; }

.detail-info .info-box-wrap { padding: 30px; }
.detail-info .info-box-wrap .cont-nav { position: relative; padding: 10px 25px; background: #F2F4F7; border-left: 5px solid #5282DE; }
.detail-info .info-box-wrap .cont-nav ul li { display: inline-block; font-weight: bold; }
.detail-info .info-box-wrap .cont-nav ul li:not(:last-child) { padding-right: 20px; }
.detail-info .info-box-wrap .cont-nav ul li a { font-size: 13px; }
.detail-info .info-box-wrap .cont-nav ul li.on a,
.detail-info .info-box-wrap .cont-nav ul li a:hover { color: #5282DE; }

.detail-info .info-box-wrap .section:not(:first-child) { padding-top: 50px; }
.detail-info .info-box-wrap .section .chart-area { border: 1px solid #CCC; margin-top: 15px;}
.detail-info .info-box-wrap .section .chart-area img { max-width: 100%; }
.detail-info .info-box-wrap .section .dashboard-area { position: relative; width: 100%; }

/* news 영역 */
.news-area .com-title { margin-bottom: 0;}
.news-area .item { position: relative; border-bottom: 1px solid #dee3eb; padding: 20px 0;}
.news-area .item .left-box { float: left; width: 130px; text-align: center; background: #2D3043; padding: 32px 5px 25px; }
.news-area .item .left-box .date { font-size: 15px; color: #fff; font-weight: bold; }
.news-area .item .left-box .press { font-size: 12px; color: rgba(255,255,255,0.6); }
.news-area .item .right-box { float: right; width: calc(100% - 160px); }
.news-area .item .right-box .cont-info { padding-bottom: 7px; }
.news-area .item .right-box .cont-info span { display: inline-block; position: relative; font-size: 11px; color: #999; font-weight: bold;  }
.news-area .item .right-box .cont-info span:not(:last-child) { padding-right: 10px; }
.news-area .item .right-box .cont-info span:not(:last-child):after {content: ''; display: block; width: 1px; height: 9px; position: absolute; top:6px; right: 3px; background:#bfbfbf;}
.news-area .item .right-box .cont-tit { padding-bottom: 5px; }
.news-area .item .right-box .cont-tit a { font-size: 17.5px; font-weight: bold; color: #000; display: block; width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.news-area .item .right-box .cont-tit a:hover { text-decoration: underline; }
.news-area .item .right-box .cont-txt { font-size: 13px; letter-spacing: -0.5px; height: 40px; overflow: hidden; display: -webkit-box; white-space: normal; word-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/*  */
.news-area .paging { text-align: center; margin-top: 30px;}
.news-area .paging ul {display: inline-block;}
.news-area .paging ul li {display: inline-block; height: 30px; line-height: 30px; width:30px; text-align: center; margin:0 2px; }
.news-area .paging ul li:hover a { background: #eaeaea; }
.news-area .paging ul li.select a {background: #5282DE; color: #fff; }
.news-area .paging ul li a {display: block; width: 100%; height: 100%;color: #333; border-radius: 5px;}
.news-area .paging ul li:first-child a img {margin-left: -2px}
.news-area .paging ul li a img { width: 20px; height: 20px; position: relative; top: 5px; opacity: .7; }
.news-area .paging .rotate img {transform: rotate(180deg); margin-left: 1px}
.news-area .paging .rotate:last-child img {margin-left: 0}