@charset "utf-8";
/*───────────────────────────────────────────────────────────

	 리스트 타입 및 옵션

───────────────────────────────────────────────────────────*/
@import url("../goods/goods.css");

.main_cont_inner {padding: 0 16px;}

.main_title {position: relative; margin: 20px 0; color: #333; font-size: 20px; font-weight: bold;}
.main_title .btn_main_more {
	position: absolute; right: 0; top: 50%; height: 24px; line-height: 24px; padding-right: 30px; margin: -12px 0 0 0; font-size: 14px; font-weight: 400; color: #999; background: url(/assets/mobile/custom/img/arrow/m_arr_main_more.png) center right no-repeat; background-size: contain;
}
.noimg {display: inline-block; width: 90px; height: 90px; text-indent: -9999px; background: #b2b2b2 url(/assets/mobile/custom/img/common/logo_white.png) center no-repeat; background-size: 80%}

/*live spot prices*/
.gold_prices_bg {height:auto;background:#2a2a2a;padding: 20px 10px;}
.gold_prices_bg h3 { 
padding:10px;
    font-size: 16px;
    color: #333;
    font-weight: 700;
    line-height: 30px;
    background: #fff;
    border-bottom: 1px solid #aaa;}
.goldbox_bg {padding:1% 0; background: -webkit-linear-gradient(90deg, rgba(25, 27, 31, 0.95), rgba(64, 65, 67, 0.95)); background: linear-gradient(90deg, rgba(25, 27, 31, 0.95), rgba(64, 65, 67, 0.95));}
.gold_prices_box {overflow:hidden;border-radius: 10px;width: 100%; margin: 0 auto;}
.gold_prices_box table{background-color: #fff; width: 100%;}
.gold_prices_box table tr{border-bottom: 1px solid #F0F0F0;}
.gold_prices_box table thead tr{border-bottom: 1px solid #F0F0F0 !important; text-align: center;}
.gold_prices_box table thead tr:first-child{border-bottom: 1px solid #F0F0F0 !important; text-align: center;}
.gold_prices_box table tr td{padding: 11px 3px 10px;}
.gold_prices_box table tr td img{vertical-align:middle}
.gold_prices_box table tr:last-child{border-bottom: none;}
.gold_prices_box table thead tr td{ font-size: 14px; font-weight: 700;box-sizing: content-box;}
.gold_prices_box table tr td:first-child{width: 70px; font-size: 13px; font-weight: 700;padding: 8px 10px;}
.gold_prices_box table .ft10{font-size:11px}
.ct_up{color:#F42222}
.ct_dw{color:#2282F4}
/*** 쇼핑몰 메인본문 | main/index.php ***/
.main {}
.main .main_top_menu {display:table; width:100%;}
.main .main_top_menu li {display:table-cell; width:25%; text-align:center;}
.main .main_top_menu li a {display:block; padding:13px 0 13px 0;font-size:14px; color:#333333;}
.main .main_notice {display:table; width:100%; margin:0 auto; padding:22px 0 22px 0;}
.main .main_notice .tit {display:table-cell; width:84px; font-size:13px; font-weight:bold; color:#282828; text-align:center;}
.main .main_notice ul {display:table-cell;}
.main .main_notice ul li {overflow:hidden; width:80%; display:-webkit-box; text-overflow:ellipsis; -webkit-line-clamp:1; -webkit-box-orient:vertical; letter-spacing:-1px;}
.main .main_notice ul li a {display:block; width:100%;}

.main_slide {background-color: #323333;}

/* 메인배너 */
.main .main_banner_box {font-size:0;}
.main .main_banner_box img {width:100%; font-size:0;}
.main .main_banner_box1 {display:table; width:100%;}
.main .main_banner_box1 li {display:table-cell; width:50%; font-size:0; text-align:center; vertical-align:top;}
.main .main_banner_box1 li a {}
.main .main_banner_box1 li a img {width:100%; font-size:0;}
.main .main_banner_box2 {padding:10px 0; font-size:0;}
.main .main_banner_box2 img {width:100%; font-size:0;}

/* 공통 */
.main_title {position: relative; margin: 0 0 10px 0; line-height: 30px; font-size: 20px;}
.main_title .main_data_time {float: right; font-size: 12px; color: #999;  font-weight: normal;}
.main_title .main_data_time i {font-style: normal;}

/* 시세라인업 */
.main_market_cont{background-color: #323333}
.main_market_cont .main_cont_inner {position: relative; padding: 0;}
.main_market_cont .main_cont_inner:before {content:""; display: block; width: 100%; height: calc(100% - 160px); position: absolute; left: 0; bottom: 0; background-color: #fff; z-index: 0;}
/*.main_market_cont .main_cont_inner:after {content:""; display: block; width: calc(100% - 20px); height: calc(100% - 103px); margin: 0 10px; position: absolute; left: 0; bottom: 0; background-color: #fff; z-index: 0; border-radius: 20px;box-shadow: 0px 6px 14px 0 rgba(199, 199, 199, 0.5);}*/
.main_market_cont .main_cont_inner:after {content:""; display: block; width: calc(100% - 20px); height: calc(100% - 85px); margin: 0 10px; position: absolute; left: 0; bottom: 0; background-color: #fff; z-index: 0; border-radius: 20px;box-shadow: 0px 6px 14px 0 rgba(199, 199, 199, 0.5);}

/*.main_title_market {line-height: 58px; padding: 0 18px; margin: 0; color: #fff; border-bottom: 1px solid #555; background-color: #292929;}*/
.main_title_market {line-height: 45px; padding: 0 18px; margin: 0; color: #fff; border-bottom: 1px solid #555; background-color: #292929;}

/*.main_market_table {width: calc(100% - 20px); margin: 0 10px; position: relative; z-index: 1;}*/
*.main_market_table {width: calc(100% - 20px); margin: 0 10px; position: relative; z-index: 1;}*
.main_market_table caption {display: none;}
.main_market_table th,
/*.main_market_table td {padding: 0 0 0 10px; line-height: 1.4; text-align: center; font-weight: normal; vertical-align: top; }*/
.main_market_table td {padding: 0 0 0 10px; line-height: 1.4; text-align: center; font-weight: normal; vertical-align: top; }
/*.main_market_table thead th {height: 45px; color: #fff; font-size: 14px; font-weight: 500; text-align: left; letter-spacing: -1px; word-break: keep-all; vertical-align: middle;} */
.main_market_table thead th {height: 39px; color: #fff; font-size: 14px; font-weight: 500; text-align: left; letter-spacing: -1px; word-break: keep-all; vertical-align: middle;}
.main_market_table thead th b {font-size: 12px;}
.main_market_table tbody th,
.main_market_table tbody td { height: 80px; font-size: 12px; color: #666; border-top: 1px solid #ddd; text-align: left; white-space: nowrap; vertical-align: middle;}
.main_market_table tbody th {font-size: 14px; color: #333; font-weight: 500;}
.main_market_table tbody th b {display: block; font-size: 12px; color: #999; font-weight: normal;}
.main_market_table tbody tr:first-child th,
.main_market_table tbody tr:first-child td {border-top: 0 none;}
.main_market_table tbody td {color: #999; font-size: 12px; font-weight: normal;} 
.main_market_table tbody td .counter {font-size: 17px; font-weight: 500; color: #000;}
.main_market_table tbody td .counter:after {content:"원"; font-size: 12px;}
.main_market_table tbody td i {margin-right: -5px;}
.main_market_table tbody td .per {margin-right: 5px;}
.main_market_table tbody td b {font-weight: normal;}
.main_market_table tbody td .unchanged {color: #333; font-size: 15px;}

.main_market_dataset {display: none;}

/* 시세 정보 */
/*.main_data_cont {margin-top: 60px; border-bottom: 2px solid #f0f0f0;}*/
.main_data_cont {margin-top: 30px; border-bottom: 2px solid #f0f0f0;}
.main_data_cont + .main_data_cont {margin-top: 30px;}
.main_title_graph {margin: 0 -16px; padding: 0 16px 15px; line-height: 24px; border-bottom: 1px solid #eee;}
.main_title_graph .btn_data_more {top: 0; margin: 0 16px 0 0; }

/* 코멘트, 매매기준율*/
.main_market_etc {position: relative; min-height: 100px; margin-bottom: 20px;}
#mainComment {margin: 0 -15px;}
#mainComment .slick-dots {bottom: 20px;}
#mainComment .slick-dots li button {background-color: #dddddd; border-radius: 50%;}
#mainComment .slick-dots li.slick-active button {background-color: #ff5f00;}
.main_market_etc {position: relative; min-height: 100px; margin-bottom: 50px;}
.main_market_comment_graph {position: absolute; left: 0; top: 50%; z-index: 2; width: 160px; margin-top: -44px; background-color: #fff;}
.main_market_comment {padding: 30px 15px 0 160px; text-align: left; word-break: keep-all;}
.main_market_comment dt,
.main_market_comment .updown {font-size: 12px; color: #000; line-height: 1.4;}
.main_market_comment .updown span {margin-right: 5px; font-size: 17px; 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: 5px; font-size: 12px; color: #999; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

#mainCompare {margin-top: 30px;}
#mainCompare .main_market_etc {margin-bottom: 20px;}
.main_market_standard {text-align: left;}
.main_market_standard dt {margin: 0 0 15px; font-size: 20px; color: #000; font-weight: bold; line-height: 1;}
.main_market_standard dt span {display: block; line-height: 28px; float: right; font-size: 12px; color: #999; font-weight: normal;}
.main_market_standard dt span i {font-style: normal;}
.main_market_standard dd {display: table; width: 100%;}
.main_market_standard dd > * {display: table-cell; vertical-align: middle; text-align: center;}
.main_market_standard dd > strong {font-size: 22px; color: #ff5f00;}
.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: 85px; font-weight: 500; font-size: 14px; color: #040404; text-align: left; letter-spacing: .5px;}
.main_market_standard dd > p {font-size: 16px; color: #8a8a8a; font-weight: normal;}
.main_market_standard dd > p .up,
.main_market_standard dd > p .down
.main_market_standard dd > p .same {color: #8a8a8a;}
.main_market_standard dd > b {font-size: 16px; color: #8a8a8a; font-weight: normal;}

.main_graph_type_buttons {display: -webkit-flex; display: -ms-flex; display: flex; border-bottom: 7px solid #eee; margin: 0 -16px;}
.main_graph_type_buttons li {flex: auto; text-align: center;}
.main_graph_type_buttons li input {display: none;}
.main_graph_type_buttons li label {display: inline-block; line-height: 36px; padding: 0 6px; font-weight: 500; color: #999; font-size: 14px; border-bottom: 2px solid transparent;}
.main_graph_type_buttons li input:checked ~ label {color: #ff5f00; font-weight: bold; border-bottom: 2px solid #ff5f00;}

.main_graph_dt_buttons {display: -webkit-flex; display: -ms-flex; display: flex; margin: 15px 0; background-color: #f8f8f8; border: 1px solid #ddd; border-radius: 15px;}
.main_graph_dt_buttons li {flex: auto; text-align: center;}
.main_graph_dt_buttons li input {display: none;}
.main_graph_dt_buttons li label {display: block; line-height: 30px; border: 1px solid transparent; margin: -1px; border-radius: 15px; font-size: 13px; color: #999;}
.main_graph_dt_buttons li input:checked ~ label {color: #404040; border-color: #ff5f00; color: #ff5f00; font-weight: 500;}

.main_data_graph .graph {margin-left: -10px;}

/* 환율 */
.main_exchange_cont {margin: 30px 0;}

.main_exchange_table {width: 100%; 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; font-size: 14px; 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-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: 12px;}
.main_exchange_table .updown .up,
.main_exchange_table .updown .down,
.main_exchange_table .updown .same {color: #999;}
.main_exchange_table .number {font-size: 18px; font-weight: 500; color: #000; text-align: right;}
.main_exchange_table .nodata {text-align: center; padding:30px 0;}

/* 주가지수 */
.main_stock_table {width: 100%; margin: 10px 0; border-collapse: collapse;}
.main_stock_table caption {display: none;}
.main_stock_table th,
.main_stock_table td {padding: 4px 0; font-size: 14px; 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 {font-size: 16px;}
.main_stock_table .updown {font-size: 13px;}

.main_stock_table + .main_title_stock {border-top: 1px solid  #ddd; padding-top: 5px;}

/* 유가증권 */
.main_oil_cont {margin: 1px 0;}
.main_title_oil {margin: 60px 0 15px 0;}
.main_oil_table {width: 100%; font-size: 14px; margin-bottom: 15px;}
.main_oil_table caption {display: none;}
.main_oil_table thead th {padding: 10px 0; border-top: 1px solid #f0f0f0; border-left: 1px solid #f0f0f0; background: #333; color: #fff; font-weight: normal;}
.main_oil_table thead th:first-child {border-left: 0 none;}
.main_oil_table tbody th,
.main_oil_table tbody td {padding: 10px 0; color: #000; text-align: center; border: 1px solid #f0f0f0; font-weight: normal;}
.main_oil_table tbody th {background-color: #f0f0f0;}
.main_oil_table tbody th b,
.main_oil_table tbody td {font-weight: 500;}
.main_oil_table tbody th b {margin: 0 10px 0 0;}

.main_oil_banner {margin: 0 -16px}
.main_oil_banner img {width: 100%;}

/* 싱글 고정 배너 */
.main_single_banner {margin: 0 -16px}
.main_single_banner img {width: 100%;}

/* 다이아몬드 시세 */
.main_diamond_cont {font-size: 14px;}
.diamaond_info_table,
.diamaond_info_table * {display: block;}
.diamaond_info_table thead {display: none;}
.diamaond_info_table tr {position: relative; display: flex; padding-bottom: 42px; margin-top: 10px; border-top: 2px solid #333; border-bottom: 1px solid #ddd;}
.diamaond_info_table tr + tr {margin-top: 20px;}
.diamaond_info_table td {padding: 10px 0; width: 100%; text-align: center; color: #333; font-weight: 500;}
.diamaond_info_table td span {color: #999; font-weight: normal;}
.diamaond_info_table tr {}
.diamaond_info_table tr td:nth-child(7) {position: absolute; left: 0; bottom: 0; width: 100%; padding: 0; line-height: 41px; text-align: center; border-top: 1px solid #ddd;}
.diamaond_info_table tr td:nth-child(7) span {display: inline-block; margin-right: 16px;}
.diamaond_info_table tr td.number {display: none;}
.diamaond_info_table tr td.soldout {position: absolute; right: 0; bottom: 8px; padding: 0 15px;}
.diamaond_info_table tr td.soldout .flag_soldout {float: right; width: 36px; height: 24px; line-height: 24px; color: #fff; background-color: #ff6d0d; color: #fff;}

.main_diamond_cont .diamaond_info_table tr {padding-bottom: 0;}

/* 이벤트 최근게시물 */
.main .main_event {}
.main .main_event ul {}
.main .main_event ul li {position:relative; padding:7px 0;}
.main .main_event ul li .img_box {font-size:0;}
.main .main_event ul li .img_box img {width:100%;}
.main .main_event ul li .event_info_box {/*position:absolute; bottom:7px; left:0;*/ width:100%; }
.main .main_event ul li .event_info_box dl {padding:20px; background:rgba(255,255,255,0.8); box-sizing:border-box;}
.main .main_event ul li .event_info_box dl dt {}
.main .main_event ul li .event_info_box dl dt a {display:block; font-size:17px; color:#222222; font-weight:bold;}
.main .main_event ul li .event_info_box dl dd {font-size:15px; color:#ab295d; font-weight:bold;}

/* 하단 정보 BOX */
.main .main_info_box {padding:0 10px}
.main .main_info_box .main_info {display:table; width:100%; margin:0 auto; padding:12px 0 12px 0; text-align:center;}
.main .main_info_box .main_info dl {display:table-cell; width:50%; text-align:left; vertical-align:top;}
.main .main_info_box .main_info dl dt {font-size:13px; margin:0 5px; font-weight:bold; border-bottom:1px solid #999;}
.main .main_info_box .main_info dl dd {font-size:11px; padding-left:5px;}

/* CS CENTER */
.main .main_info dl dd p.phone {padding:5px 0;}
.main .main_info dl dd p.phone a {font-size:22px; color:#ab3e55;}
.main .main_info dl dd p.business_hours {font-size:11px; color:#666;}

/* BANK INFO */
.main .main_info dl dd .account_holder {padding:11px 0; font-size:14px;}
.main .main_info dl dd ul.main_bank {display:table-cell;}
.main .main_info dl dd ul.main_bank li { vertical-align:middle;}
.main .main_info dl dd ul.main_bank li span {font-weight:bold;}