69 lines
1.5 KiB
PHP
69 lines
1.5 KiB
PHP
<style>
|
|
/* ===== Logistics & Services Banner ===== */
|
|
.bt-banner {
|
|
position: relative;
|
|
min-height: 260px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-image: url("YOUR_BG_IMAGE_URL_HERE.jpg");
|
|
/* ← 배경이미지 교체 */
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 전체 톤 살짝 어둡게(원본 느낌) */
|
|
.bt-banner::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, .10);
|
|
z-index: 1;
|
|
}
|
|
|
|
/* 가운데 검정 박스 */
|
|
.bt-banner .bt-box {
|
|
position: relative;
|
|
z-index: 2;
|
|
width: min(780px, 86vw);
|
|
padding: 52px 24px;
|
|
background: rgba(0, 0, 0, .92);
|
|
text-align: center;
|
|
}
|
|
|
|
.bt-banner .bt-title {
|
|
color: #fff;
|
|
font-weight: 300;
|
|
font-size: clamp(28px, 2.6vw, 44px);
|
|
letter-spacing: .2px;
|
|
margin: 0 0 14px 0;
|
|
}
|
|
|
|
.bt-banner .bt-sub {
|
|
color: rgba(255, 255, 255, .85);
|
|
font-size: 11px;
|
|
letter-spacing: .2px;
|
|
margin: 0;
|
|
}
|
|
|
|
/* 하단 얇은 라인 */
|
|
.bt-banner .bt-bottom-line {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 1px;
|
|
background: rgba(255, 255, 255, .22);
|
|
z-index: 3;
|
|
}
|
|
</style>
|
|
|
|
<section class="bt-banner" id="logistics">
|
|
<div class="bt-box">
|
|
<h2 class="bt-title">Logistics & Services</h2>
|
|
<p class="bt-sub">End-to-End Logistics and Services Designed for Global Metal Supply.</p>
|
|
</div>
|
|
<div class="bt-bottom-line"></div>
|
|
</section> |