@charset "utf-8";
.greetings-head {display: flex; align-items: center; gap: 20px var(--space-40); margin-bottom: var(--space-55);}
.greetings-head .img {width: 47.5%;}
.greetings-head .txt {position: relative; width: fit-content; padding: 0 64px; font-size: clamp(24px, calc(52 / var(--inner) * 100vw), 52px); font-weight: 700; line-height: 1.4423em; color: var(--dark-color); background: linear-gradient(to right, var(--primary-color), var(--dark-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.greetings-head .txt:before, .greetings-head .txt:after {position: absolute; left: 0; top: 0; content: ''; display: block; width: 45px; height: 37px; background: url('/images/sub/greetings-quotation.png') no-repeat center center; background-size: contain;}
.greetings-head .txt:after {left: auto; top:auto; right: 0; bottom: 0; transform: rotate(180deg);}
.greetings-body {font-size: var(--font-size-20); line-height: 1.6em;}
.greetings-body h2 {margin-bottom: var(--space-25);font-size: var(--font-size-32); line-height: 1.25em; font-weight: 500; color: var(--dark-color);}
.greeting-foot {position: absolute; bottom: 0;right: 0; opacity: .05; color: #000; font-size: clamp(50px, calc(120 / var(--inner) * 100vw), 120px); font-weight: 800; line-height: .7em;}
.vision-boxes {border: 1px solid #ddd; text-align: center;}
.vision-box:not(:last-child) {border-right: 1px solid #ddd;}
.vision-box {padding: var(--space-55) var(--space-30);}
.vision-box h3 {margin: var(--space-30) 0 var(--space-10); font-size: var(--font-size-20); font-weight: 600; color: var(--dark-color);}
.vision-box lord-icon {width: 80px; height: 80px;}
.vision-circle {position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 220px; height: 220px; margin: 0 auto 78px; border-radius: 100%; background: #f8f8f8; font-size: var(--font-size-24); font-weight: 700; color: var(--dark-color);}
.vision-circle:after {position: absolute; content:''; bottom: -45px; left: 50%; margin-left: -6px; display: block; width: 12px; height: 12px; background: #004e11; transform: rotate(45deg)}

.page-overview .sec:not(:last-child) {margin-bottom: var(--space-70);}
.table-wrap table {border-collapse: collapse; width: 100%; border-top: 2px solid var(--dark-color); font-size: var(--font-size-18); line-height: 1.6667em;}
.table-wrap th, .table-wrap td {border-bottom: 1px solid #ddd; padding: var(--space-15) var(--space-30); }
.table-wrap th {background: rgba(0,130,38,.05); color: var(--dark-color); font-weight: 600; font-size: var(--font-size-20);}
.table-wrap.type2 table {border-top: 1px solid var(--dark-color);}
.table-wrap.type2 th {background: #f8f8f8; font-size: var(--font-size-18); font-weight: 700;}
.table-wrap.type2 td {font-size: var(--font-size-16); text-align: center;}
.table-wrap.type2 th, .table-wrap.type2 td {padding: 4px 10px;}
.table-wrap.type2 th:not(:last-child), .table-wrap.type2 td:not(:last-child) {border-right: 1px solid #ddd;}

.sec-overview-slides {display: flex; flex-wrap: wrap; gap: var(--space-30); overflow: hidden; text-align: center;}
.sec-overview-slides .group {width: calc((100% - var(--space-30)) / 2);}
.overview-tit {background: var(--primary-color); border-radius: 0 0 var(--radius-16) var(--radius-16); color: #fff; font-size: var(--font-size-24); font-weight: 600; line-height: 1.25em; padding: var(--space-15) var(--space-30);}

.history-group {display: flex; font-size: var(--font-size-18); line-height: 1.6em;}
.history-year {flex:1; height: fit-content; text-align: right; padding-right: var(--space-60); font-size: var(--font-size-28); font-weight: 500; color: var(--dark-color); transition: .3s;}
.on .history-year {z-index: 1; position: relative; margin-right: var(--space-40);color: var(--primary-color);font-size: clamp(24px, calc(60 / var(--inner) * 100vw), 60px); font-weight: 600;}
.history-year:before, .history-year:after {transition: .2s; transform: translate(50%, -50%) scale(0);}
.history-year:before {content: ''; position: absolute; content: ''; top: 50%; right: calc(var(--space-40) * -1); display: block; width: 100px;  height: 100px; border-radius: 100%; background: rgba(0,130,38,.3); border: 20px solid rgba(255,255,255,.6);  animation-delay: .05s;}
.history-year:after {content: ''; position: absolute; content: ''; top: 50%; right: calc(var(--space-40) * -1); display: block; width: 40px; height: 40px; border-radius: 100%; background: #fff; border: 10px solid var(--primary-color); animation-delay: .08s;}
.on .history-year:before, .on .history-year:after {animation: ani .5s forwards ease;}
.history-list {position: relative; width: 55%; padding-left: clamp(30px, calc(100 / var(--inner) * 100vw), 100px); padding-bottom: var(--space-60);}
.history-group:not(:last-child) .history-list:before {content: ''; position: absolute; top: 9px; left: 0; display: block; width: 1px; height: 100%; background: #ddd;}
.history-list:after {content: ''; position: absolute; top: 9px; left: -5px; display: block; width: 10px; height: 10px; border-radius: 100%; background: #fff;border: 2px solid #000;}
.history-item {display: flex;}
.history-item:not(:last-child) {margin-bottom: var(--space-35);}
.history-content > li {display: flex;}
.history-content > li:not(:last-child) {margin-bottom: var(--space-15);}
.history-item-year {min-width: 70px; font-weight: 600; color: var(--dark-color);}
.history-month {min-width: 53px; font-weight: 600; color: var(--dark-color); transition: .2s;}

.on .history-item,
.on .history-item-year,
.on .history-month {font-weight: 700; font-size: var(--font-size-20);}
.on .history-month {min-width: 65px;}

@keyframes ani {
0% {transform: translate(50%, -50%) scale(0);}
100% {transform: translate(50%, -50%) scale(1);}
}

.location-group {display: flex; align-items: center;}
.location-group:not(:last-child) {margin-bottom: var(--space-100);}
.location-txt {width: 45%; padding-right: 30px;}
.location-group h2 {margin-bottom: var(--space-25); font-size: var(--font-size-22); font-weight: 700; color: var(--dark-color);}
.location-txt strong {display: inline-block; min-width: 110px; font-size: var(--font-size-18); color: var(--dark-color); font-weight: 500;}
.location-txt .icon {display: inline-block; min-width: 24px;}
.location-txt ul {margin-bottom: clamp(20px, calc(45 / var(--inner) * 100vw), 45px);}
.location-txt li {display: flex;}
.location-txt li:not(:last-child) {margin-bottom: clamp(10px, calc(27 / var(--inner) * 100vw), 27px);}
.location-map {flex:1;}
.location-map iframe {width: 100% !important; height: 350px !important;}

.btn-map {display:inline-block; padding:6px 45px; color:#686868; font-weight:600; line-height: 2em; border-radius:30px; background:#fff; border:2px solid #686868; text-align:center; text-decoration:none !important;}
.btn-map:hover {color:#fff; background:var(--primary-color); border-color:var(--primary-color);}

.product-welcome-txt h2 {position: relative;width: fit-content; padding: 0 70px; margin: 0 auto var(--space-60); text-align: center; font-size: var(--font-size-24); font-weight: 500; line-height: 1.458333em; color: var(--dark-color);}
.product-welcome-txt h2:before, .product-welcome-txt h2:after {position: absolute; left: 0; top: 8px; content: ''; display: block; width: 45px; height: 37px; background: url('/images/sub/product-quotation.png') no-repeat center center; background-size: contain;}
.product-welcome-txt h2:after {left: auto; right: 0;transform: rotate(180deg);}

/* LME시세 */
.lme_chart{padding:clamp(20px, calc(60 / var(--inner) * 100vw), 60px) 0 clamp(20px, calc(45 / var(--inner) * 100vw), 45px); border: 1px solid #ddd; margin-bottom: var(--space-100);}
.lme_chart #lme_chart01{height:500px;}

.lme_con01 ul li{position: relative; display:inline-block; vertical-align:top;}
.lme_con01 ul li:last-child {margin-left: 10px;}
.lme_con01 ul li:not(:first-child):before {content: ''; position: absolute; top: 50%; left: 0; width: 1px; height: 16px; margin-top: -8px; background: #ddd;}
.lme_con01 ul li > a{position: relative; display:flex; align-items: center; justify-content: center; height: 100%; padding: 0 20px; font-size:18px; text-align: center; font-weight: 600;}
.lme_con01 ul li > a.on{color:var(--primary-color);}
.lme_con01 ul li > a.on:before {content: ''; position: absolute; top: 0; left: 3px; width: 12px; height: 100%; background: url('/images/sub/lme-chk.png') no-repeat center center; background-size: contain;}
.lme_con01 .box input{display:inline-block; vertical-align:middle; padding:0 20px; box-sizing:border-box; font-size:16px; font-weight:500;}
.lme_con01 .box input.datepicker2 {width: 115px; padding: 0 10px;}
.lme_con01 .box span{display:inline-block; vertical-align:middle; width:30px; text-align:center; font-size:16px; font-weight:500;; color:#444;}
.lme_con01 .box a{display:inline-block; vertical-align:middle; margin-left:20px;}
.lme_con01 .box a button{width:100px; height:40px; line-height:40px; background:#009241; font-size:18px; font-weight:500; letter-spacing:-0.045em; color:#fff; text-align:center; border-radius:2px; box-shadow:5px 5px 10px rgba(0,0,0,0.1); border:0;}
.lme_con01 ul li select::placeholder{color:#666666}
.lme_con01 ul li select::-ms-expand { display:none;}

/* 금속시황 */
.lme-head {display: flex; justify-content:space-between; margin-bottom: 20px;}
.lme-head ul {display: flex;}
#avg button[type="submit"] {margin-left: 10px;}

.metal_table_box {overflow-x:auto;}
.metal_table_box table{width:100%; border-collapse: collapse; min-width:1000px;}
.metal_table_box table thead th{padding:10px; font-size:var(--font-size-18); color:var(--dark-color); letter-spacing:-0.045em; font-weight:500; border-right:1px solid #e8e8e8; border-bottom:1px solid #e8e8e8; border-top: 1px solid var(--dark-color);}
.metal_table_box table thead th:last-of-type{border-right:0;}
.metal_table_box table thead th.bg {color: #fff;}
.metal_table_box table thead th.bg00{background:var(--primary-color);}
.metal_table_box table thead th.bg01{background:var(--graph-color1);}
.metal_table_box table thead th.bg02{background:var(--graph-color2);}
.metal_table_box table thead th.bg03{background:var(--graph-color3);}
.metal_table_box table thead th.bg04{background:var(--graph-color4);}
.metal_table_box table thead th.bg05{background:var(--graph-color5);}
.metal_table_box table thead th.bg06{background:var(--graph-color6);}
.metal_table_box table thead th.bg07{background:var(--graph-color7);}
.metal_table_box table thead th.bg08{background:var(--graph-color8);}
.metal_table_box table thead th.bg09{background:var(--graph-color9);}

.metal_table_box table tbody th{padding:10px; font-size:var(--font-size-18);  letter-spacing:-0.045em; font-weight:300; border-right:1px solid #e8e8e8; border-bottom:1px solid #e8e8e8;}
.metal_table_box table tbody td{padding:10px 7px; color: var(--dark-color); border-right:1px solid #e8e8e8; border-bottom:1px solid #e8e8e8; text-align:right; letter-spacing: -.03em}
.metal_table_box table tbody td:last-of-type{border-right:0;}
.metal_table_box table tbody td.gray_bg{background:#f3f3f3;}

.metal_table_box table tbody tr.line{border-top:2px solid #000000;}
.metal_table_box table tbody tr.average th{background:#f4f8f6;}
.metal_table_box table tbody tr.average td{background:#f4f8f6 !important;}
.metal_table_box table tbody tr.average td.gray_bg{background:#f3f3f3;}

.page-all-price .group {margin-bottom: 25px;}
.page-all-price h2 {margin-bottom: 20px; font-size: var(--font-size-24); font-weight: 700; color: var(--dark-color);}
.table-help-txt {text-align: right; color: #686868;}
.price-contact-txt {margin-top: 5px; color: var(--primary-color);}
.market-price-table.metal_table_box table tbody td {text-align: center;}
.market-price-table.metal_table_box table tbody tr:nth-child(even) td {background: #f8f8f8;}
.market-price-table.metal_table_box table thead th {font-weight: 700;}