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

#contents .sub_content{width:auto; margin:0; padding:0;}/* 메인 */
.scroll_wrap{top:806px;}

/*live spot price*/
.livespotprice {padding:25px 37px;border:1px solid #ddd;  box-sizing:border-box;margin-top:20px !important;}
.livespotprice .livespot{display:flex; justify-content: space-between; width:100%;padding-bottom:10px}
.livespotprice .livespot span{background-color:#FFC000; border-radius:34px;padding:3px 7px}
.livespotprice table{background-color: #fff; width: 100%;border-top:2px solid #707070}
.livespotprice table tr:first-child td{font-weight:700;padding-top:10px}
.livespotprice table thead tr{text-align: center;}
.livespotprice table thead tr:first-child{text-align: center;}
.livespotprice table tr td{padding: 8px 3px;font-size:16px;width:167px}
.livespotprice table tr td.ftbd{font-weight:700}
.livespotprice table tr td img{vertical-align:middle;}
.ct_up{color:#F42222}
.ct_dw{color:#207BE7}

.livespotprice_tit{display:flex; justify-content: space-between;width:1080px;margin:100px auto 0;}
.livespotprice_tit h3{font-size:28px}
.livespotprice_tit .btn_main_more.btn_data_more{
    display: flex;
    align-items: flex-end;
    background-position: center right;
    margin-top: 20px;
}}

/* 메인 컨텐츠 */
.main_content{}
.main_cont {margin: 100px 0;}
.main_cont_inner {position: relative; width: 1080px; margin: 0 auto; z-index: 1;}
.noimg {display: inline-block; width: 200px; height: 200px; text-indent: -9999px; background: #b2b2b2 url(/assets/front/custom/img/common/logo_white.png) center no-repeat; background-size: 80%}

.main_title {position: relative; min-height: 28px; font-size: 28px; font-weight: bold; color: #000; line-height: 1;}
.main_title i {font-style: normal;}
.main_title_text {margin-top: 10px; font-size: 20px; color: #666;}
.main_title .btn_main_more {position: absolute; right: 0; top: 1px;}

.btn_main_more {padding-right: 17px; font-size: 16px; font-weight: 300; color: #8a8a8a; line-height: 1.6; background: url(/assets/front/custom/img/arrow/arr_right_grey_1.png) right 8px no-repeat;}
.btn_main_more.white {color: #fff; background: url(/assets/front/custom/img/arrow/arr_right_white_1.png) right 8px no-repeat;}

/* 메인 비주얼 */
.main_visual {overflow:hidden; width:100%;  margin:0 0 0 0;}
.main_visual .slick-dots {width: 1080px; left: 40%; text-align: right; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0);}
.main_visual .slick-prev,
.main_visual .slick-next {width: 45px; border-radius: 50%; background-color: #000; background-size: 9px; background-position: center; top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%);}
.main_visual .slick-prev {left: calc(calc(100% - 1080px - 120px) / 2);}
.main_visual .slick-next {right: calc(calc(100% - 1080px - 120px) / 2);}

/* 시세라인업 */
.main_market_cont {position: relative; width: 1080px; margin: 0 auto;}
.main_market_cont .main_cont_inner {position: absolute; left: 0; bottom: 100%; width: 541px; height: 554px; background: rgba(0,0,0,0.8);}

.main_market_table {width: 100%;}
.main_market_table caption {padding: 0 30px; height: 80px; line-height: 80px; font-size: 30px; font-weight: bold; color: #fff; text-align: left; background: rgba(0,0,0,0.6);}
.main_market_table caption .main_data_time {float: right; font-size: 14px; font-weight: 300; color: #999; }
.main_market_table th,
.main_market_table td {line-height: 1; color: #fff; text-align: left; font-weight: 500; vertical-align: top;}
.main_market_table th {font-size: 21px;}
.main_market_table td {font-size: 23px;}
.main_market_table thead th {padding: 20px 0; letter-spacing: -1px;}
.main_market_table tbody th,
.main_market_table tbody td {vertical-align: top; height: 75px;}
.main_market_table tbody th {padding-left: 30px;}

.main_market_table thead th b {font-size: 18px; font-weight: 500;}
.main_market_table tbody th b {display: block; margin-top: 5px; font-size: 14px; font-weight: normal; color: #bbb;}
.main_market_table tbody td b {display: block; margin-top: 5px; font-size: 16px; font-weight: normal; color: #ddd;}
.main_market_table tbody td .unchanged {font-size: 20px;}
.main_market_table tbody td .counter:after {content: "원"; font-size: 21px; font-weight: normal;}

.main_market_table .nodata td,
.main_market_table .loading td{vertical-align: middle; text-align: center;}
.main_market_table .nodata .reload {display: inline-block; margin: 0; font-size: 20px;}
.main_market_table .nodata .reload button {border: 1px solid #fff; border-radius: 4px; color: #fff; padding: 10px 20px; margin-top: 15px;}
.main_market_table .loading .loader {display: inline-block; margin: 0 0 0 0; font-size: 14px;}

.main_market_table .updown {margin-top: 5px; font-size: 16px;}
.main_market_table .updown * {font-weight: normal; color: #999 !important;}
.main_market_table .updown i {width: 10px !important;}
.main_market_table .updown .per {margin-right: 8px;}

.main_market_dataset {display: none;}

/* 시세 그래프 */
.main_data_cont .main_data_time {position: absolute; right: 0; top: 1px; font-size: 16px; font-weight: 300; color: #8a8a8a; line-height: 1.6;}
/* 시세 */
.main_data_cont {margin-top: 0;}
.main_data_cont_inner {display: table; table-layout: fixed;}
.main_data_cont_block {display: table-cell; position: relative; width: 50%; padding-top: 29px; vertical-align: top;box-sizing:border-box;}
.main_data_cont_block.left {padding-right: 28px;}
.main_data_cont_block.right {padding-left: 28px; border-left: 1px solid #ddd;}

/*.main_data_cont_inner + .main_data_cont_inner .main_data_cont_block:after {content: ""; display: block; position: absolute; bottom: 0; width: 512px; height: 1px; background-color: #ddd;}*/
.main_data_cont_inner + .main_data_cont_inner .main_data_cont_block.left:after {left: 0;}
.main_data_cont_inner + .main_data_cont_inner .main_data_cont_block.right:after {right: 0;}

.main_data_graph .graph {position: relative; width: 512px; height: 300px;}
.main_data_graph .graph .loader_box {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff; z-index: 1;}
.main_data_graph .graph .loader {color: #999; font-size: 12px;}

.main_data_graph .graph .reload {display: none; padding: 100px 0 0; text-align: center;}
.main_data_graph .graph .reload button {border-radius: 4px; padding: 10px 15px; color: #fff; background-color: #666; margin-top: 15px;}

/* 차트 tooltip */
.series_tooltip {padding: 10px;}
.series_tooltip > dt {padding: 10px; margin: -10px -10px 0; background-color: #f1f1f1;}
.series_tooltip > dd {display: table; margin-top: 10px;}
.series_tooltip > dd > dl {display: table-row;}
.series_tooltip > dd > dl > dt,
.series_tooltip > dd > dl > dd {display: table-cell; padding: 5px 5px;}
.series_tooltip > dd > dl > dt {width: 80px;}

/* 코멘트, 매매기준율*/
#mainComment {}
#mainComment .slick-arrow {width: 24px; height: 24px; background-color: #ddd; color: #fff;}
#mainComment .slick-arrow.slick-disabled {opacity: 0.5}
#mainComment .slick-arrow.slick-prev {background: url(/assets/front/custom/img/arrow/arr_slider_white_1.jpg) left no-repeat; right: 60px; top: 16px; left: auto; bottom: auto;}
#mainComment .slick-arrow.slick-next {background: url(/assets/front/custom/img/arrow/arr_slider_white_1.jpg) right no-repeat; right: 28px; top: 16px; left: auto; bottom: auto;}
.main_market_etc {position: relative; height: 120px; margin-bottom: 50px;}
.main_market_comment_graph {position: absolute; left: -10px; top: 0; z-index: 2; width: 200px; background-color: #fff;}
.main_market_comment {padding-top: 15px; padding-left: 220px; text-align: left}
.main_market_comment dt,
.main_market_comment .updown {font-size: 18px; color: #000; line-height: 1.4;}
.main_market_comment .updown span {margin-right: 5px; font-size: 24px; font-weight: bold;}
.main_market_comment .updown span i:after {font-size: 16px;}
.main_market_comment .updown b,
.main_market_comment .updown b * {color: #030303 !important}
.main_market_comment .text {margin-top: 10px; font-size: 16px; color: #999; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.main_market_comment .text a {color: #999;}
#mainCompare {}
.main_market_standard {text-align: left;}
.main_market_standard dt {margin: -25px 0 18px; font-size: 28px; color: #000; font-weight: bold; line-height: 1;}
.main_market_standard dt i {font-style: normal}
.main_market_standard dd {display: table; width: 100%;}
.main_market_standard dd > * {display: table-cell; vertical-align: middle; text-align: right;}
.main_market_standard dd > strong {font-size: 38px; color: #ff6e0e; line-height: 1;}
.main_market_standard dd > strong i {display: inline-block; font-size: 12px; margin-left: 5px; font-weight: 400; font-style: normal; color: #404040;}
.main_market_standard dd > span {width: 120px; font-weight: 500; font-size: 18px; color: #040404; text-align: left; letter-spacing: .5px;}
.main_market_standard dd > p {font-size: 22px; color: #8a8a8a; font-weight: normal; padding-top: 15px; min-width: 80px;}
.main_market_standard dd > p .down {color: #8a8a8a;}
.main_market_standard dd > b {font-size: 18px; color: #8a8a8a; font-weight: normal;}

.main_graph_type_buttons {margin-bottom: 30px; overflow: hidden;}
.main_graph_type_buttons li {float: left;margin-left: 8px;}
.main_graph_type_buttons li:first-child {margin-left: 0;}
.main_graph_type_buttons li input {display: none;}
.main_graph_type_buttons li label {display: block; min-width: 60px; height: 30px; padding: 0 15px; line-height: 29px; font-size: 16px; font-weight: 500; color: #999; border: 1px solid #999; text-align: center;}
.main_graph_type_buttons li input:checked ~ label {color: #ff6e0e; border-color: #ff6e0e;}

.main_graph_dt_buttons {margin: 25px 0 15px 0; overflow: hidden; text-align: right;}
.main_graph_dt_buttons li {display: inline-block; margin-left: 15px;}
.main_graph_dt_buttons li:first-child {margin-left: 0;}
.main_graph_dt_buttons li input {display: none;}
.main_graph_dt_buttons li label {display: block; font-size: 15px; color: #999;}
.main_graph_dt_buttons li input:checked ~ label {color: #404040;}

/* 환율 */
.main_exchange_table {width: 100%; margin-top: 15px; border-collapse: collapse;}
.main_exchange_table caption {display: none;}
.main_exchange_table th,
.main_exchange_table td {height: 60px; padding: 0 0 0 24px; border-top: 1px solid #ddd; text-align: left; white-space: nowrap; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.main_exchange_table tr:first-child th,
.main_exchange_table tr:first-child td {border-top: 0 none;}
.main_exchange_table .country {padding-left: 0; font-size: 21px; font-weight: 500; color: #000;}
.main_exchange_table .country .eng {margin-left: 15px; font-weight: normal; color: #999;}
.main_exchange_table .updown {padding-top: 4px; font-size: 18px;}
.main_exchange_table .updown .up,
.main_exchange_table .updown .down,
.main_exchange_table .updown .same {color: #999;}
.main_exchange_table .number {font-size: 22px; font-weight: 500; color: #000; text-align: right;}
.main_exchange_table .nodata {text-align: center; padding: 50px 0;}

/* 주가지수 */
.main_stock_table {width: 100%; border-collapse: collapse;}
.main_stock_table caption {display: none;}
.main_stock_table th,
.main_stock_table td {padding: 4px 0; font-size: 17px; text-align: right; white-space: nowrap;}
.main_stock_table .kinds {padding-left: 0;  font-weight: 500; color: #000; text-align: left;}
.main_stock_table .number {}
.main_stock_table .updown {}

/* 유가증권 */
.main_oil_cont .main_data_time {position: absolute; right: 0; top: 1px; font-size: 16px; font-weight: 300; color: #8a8a8a; line-height: 1.6;}
.main_oil_table {float: left; width: 541px; margin-top: 30px; table-layout: fixed; border-collapse: collapse;}
.main_oil_table caption {display: none;}
.main_oil_table th,
.main_oil_table td {height: 39px; padding: 5px; font-size: 16px; color: #666; border: 1px solid #ddd; text-align: center;}
.main_oil_table th {font-size: 18px; font-weight: 500; color: #000;}
.main_oil_table thead td {background-color: #ffe9da;}

.main_oil_banner {float: right; width: 539px; margin-top: 30px;}

/* 다이아몬드 */
.main_title_diamond {padding-left: 20px; letter-spacing: -1px; /*padding-left: 58px; background: url(/assets/front/custom/img/icon/ico_main_diamond.png) left 22px center no-repeat;*/}
.main_title_diamond .btn_diamond_more {right: 25px;}

.main_diamond_block {position: relative; width: 50%; height: 265px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow: hidden;}
#.main_diamond_block.left {float: left; padding: 20px 5px; background-color: #0067f2;}
.main_diamond_block.left {float: left; }

.main_diamond_table {width: 100%; margin-top: 10px; table-layout: fixed;}
.main_diamond_table caption {display: none;}
.main_diamond_table th,
.main_diamond_table td {padding: 3px 0; font-weight: normal; text-align: center;}
.main_diamond_table th {font-size: 17px; color: #97c3ff;}
.main_diamond_table td {font-size: 15px; color: #fff;}

.main_diamond_block.right {float: right;}
.main_diamond_banner {display: block;}
.main_diamond_banner .main_diamond_banner_img {width: 540px; height: 265px;}

/* 대리점 */
.main_agency_block {margin-left: -55px;}
.main_agency_block .block {float: left; width: 25%; padding: 55px 0 0 55px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

.main_agency_block .block dt {padding-bottom: 15px; font-size: 20px; font-weight: 500; color: #000; line-height: 1; border-bottom: 2px solid #000;}
.main_agency_block .block dd {overflow: hidden;}
.main_agency_block .block dd ul {overflow: hidden; margin: 15px 0 0 -10px;}
.main_agency_block .block dd ul li {float: left; display: block; margin: 10px 0 0 10px; white-space: nowrap;}
.main_agency_block .block dd .link {font-size: 16px; color: #666;}
.main_agency_block .block dd .link:hover,
.main_agency_block .block dd .link:focus {color: #000; text-decoration: underline;}

/* 뉴스 */
.main_cont.main_news_cont {margin: 80px 0 -20px;}
.main_news_cont .main_cont_inner {width: 1016px; padding: 45px 30px 15px; border: 2px solid #ddd;}
.main_news_list:not(.nodata) {position: relative;}
.main_news_list:not(.nodata) .item {position: relative; line-height: 50px; font-size: 18px;}
.main_news_list:not(.nodata) .item .item-img {display: none;}
.main_news_list .item-inner {position: relative; padding: 0 0 0 0; margin: 0; clear: both;}
.main_news_list .item-inner:after {content:""; display: block; clear: both;}
.main_news_list .item-img {width: 460px; height: 230px; float: right;}
.main_news_list .subject {display: block; font-weight: normal; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.main_news_list .cont {display: none;}
.main_news_list .date {display: block; position: absolute; right: 0; top: 0; color: #666;}
.main_news_list .date::before {content: ""; display: inline-block; width: 18px; height: 18px; margin: 0 8px 0 0; vertical-align: -2px; background-image: url(/assets/front/custom/img/icon/ico_main_clock.jpg); background-position: right center;}
.main_news_list .link {position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-indent: -9999px;}
.main_news_list:not(.nodata) .item:first-child {font-weight: 500; padding: 10px 0 30px; margin-bottom: 15px; border-bottom: 2px solid #eee;}
.main_news_list:not(.nodata) .item:first-child .item-img {display: block; background: url(/assets/front/custom/img/common/noimg_main_new.jpg) center no-repeat; background-size: cover}
.main_news_list .item:first-child .item-inner {padding: 0;}
.main_news_list .item:first-child .item-info {float: left; width: 520px;}
.main_news_list .item:first-child .subject {font-size: 20px; margin: 13px 0 10px; font-weight: 500;}
.main_news_list .item:first-child .cont {display: block; height: 130px; font-size: 18px; line-height: 1.75; color: #333; font-weight: normal; overflow: hidden;}
.main_news_list .item:first-child .date {right: auto; left: 0; top: auto; bottom: -5px; line-height: 1; color: #ff6e0e; font-weight: normal; }
.main_news_list .item:first-child .date::before {background-position: left center;}
.main_news_list.nodata {padding: 53px; margin-top: 15px; border: 1px solid #ddd;}
.main_news_list.nodata .item {font-size: 14px; text-align: center;}

/* 매거진 */
.main_magazine_list {margin: 20px 0 0 -20px;}
.main_magazine_list .item {position: relative; display: block; float: left; width: 255px; margin: 0 0 0 20px;}
.main_magazine_list .item.nodata {width: auto; float: none; text-align: center; padding: 53px; border: 1px solid #ddd;}
.main_magazine_list .item-inner {padding: 0; margin: 0;}
.main_magazine_list .item-img {display: block; width: 255px;}
.main_magazine_list .item-info {}
.main_magazine_list .item-info * {display: block;}
.main_magazine_list .item-info .date {display: block; margin: 0 5px; position: absolute; left: 0; color: #666;}
.main_magazine_list .item-info .subject {margin: 5px 0 0; font-size: 20px; font-weight: 500; line-height: 70px; color: #000; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.main_magazine_list .item-info .summary {font-size: 16px; color: #8a8a8a; height: 45px; line-height: 1.38; overflow: hidden;}
.main_magazine_list .link {display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-indent: -9999px;}

/* 패밀리 사이트 */
.main_family_cont {background-color: #a0a0a0;}
.main_family_block {display: flex;}
.main_family_block * {color: #fff;}
.main_family_block .block {flex: 1 1 auto; padding: 52px 0 61px; margin-left: 30px;}
.main_family_block .block:first-child {margin-left: 0;}
.main_family_block .block dt {font-size: 20px; font-weight: 500;}
.main_family_block .block dd {margin-top: 20px; border-top: 1px solid #fff;}
.main_family_block .block dd ul {padding: 11px 0;}
.main_family_block .block dd li {margin-top: 6px;}

/* top 배너 */
.main_top_banner_cont {position: relative;}
.main_top_banner_block {display: block; float: left; margin-left: 20px; margin-top: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.main_top_banner_block:nth-child(even) {}
.main_top_banner_block:nth-child(odd) {margin-left: 0;}
.main_top_banner_block img {width: 530px; height: 180px;}

/* 배너 */
.main_banner_cont {position: relative;}
/*.main_banner_cont .main_cont_inner {margin-top: -20px;}*/
.main_banner_cont .main_cont_inner {margin-top: -90px;}
.main_banner_block {display: block; float: left; margin-left: 20px; margin-top: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.main_banner_block:nth-child(even) {}
.main_banner_block:nth-child(odd) {margin-left: 0;}
.main_banner_block img {width: 530px; height: 240px;}

/* 스크롤 배너 */
.main_scroll_banner_cont {position: relative;}

/* 공지사항 */
.main_notice_list {margin: 15px 0 0 -20px}
.main_notice_list .item {float: left; width: 255px; margin-left: 20px; border: 1px solid #ddd; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.main_notice_list .item.nodata {width: 100%; text-align: center; padding: 53px;}
.main_notice_list .item-inner {padding: 26px 21px;}
.main_notice_list .item-inner dd {margin-top: 25px; overflow: hidden;}
.main_notice_list .item-inner dd * {display: block; height: 22px; line-height: 22px;}
.main_notice_list .subject {font-size: 16px; color: #404040; line-height: 1; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.main_notice_list .date {float: left}
.main_notice_list .link {float: right; width: 50px; font-size: 12px; color: #404040; text-align: center; background-color: #ddd; border-radius: 11px;}

/* 상품안내 */
.main_shopping_cont .item_cont {padding-bottom: 20px}
.main_shopping_cont .item_name {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 5px 10px 0 10px;}
.main_shopping_cont .slide_horizontal_7 {overflow: visible}
.main_shopping_cont .slick-arrow {top: 50%; color: #fff; background-repeat: no-repeat; background-position: center;}
.main_shopping_cont .slick-disabled {opacity: 0.5}
.main_shopping_cont .slick-prev {
	left: -30px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23999999'%2F%3E%3C%2Fsvg%3E");
}
.main_shopping_cont .slick-next {
	right: -30px;
	background-image:   url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23999999'%2F%3E%3C%2Fsvg%3E");
}