186 lines
4.5 KiB
PHP
186 lines
4.5 KiB
PHP
<style>
|
|
/* 전체 섹션 */
|
|
.bt-split-hero {
|
|
min-height: 92vh;
|
|
background: #0b0b0b;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 좌측 패널 */
|
|
.bt-left {
|
|
background: #111;
|
|
position: relative;
|
|
}
|
|
|
|
.bt-left::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: radial-gradient(1200px 600px at 30% 15%, rgba(255, 255, 255, .06), transparent 55%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.bt-left-inner {
|
|
position: relative;
|
|
padding: clamp(28px, 4vw, 64px);
|
|
color: #fff;
|
|
max-width: 560px;
|
|
margin-left: auto;
|
|
/* 가운데 경계 쪽으로 정렬 */
|
|
margin-right: 0;
|
|
}
|
|
|
|
.bt-left h1 {
|
|
font-weight: 300;
|
|
letter-spacing: .2px;
|
|
line-height: 1.15;
|
|
font-size: clamp(32px, 3.2vw, 54px);
|
|
margin: 0 0 18px;
|
|
}
|
|
|
|
.bt-divider {
|
|
width: 74px;
|
|
height: 1px;
|
|
background: rgba(255, 255, 255, .35);
|
|
margin: 14px 0 26px;
|
|
}
|
|
|
|
.bt-left p {
|
|
color: rgba(255, 255, 255, .86);
|
|
font-size: 13px;
|
|
line-height: 1.7;
|
|
margin-bottom: 18px;
|
|
max-width: 460px;
|
|
}
|
|
|
|
/* 우측 이미지 패널 */
|
|
.bt-right {
|
|
position: relative;
|
|
background: #0b0b0b;
|
|
min-height: 520px;
|
|
}
|
|
|
|
.bt-right::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image:
|
|
linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .25) 35%, rgba(0, 0, 0, .15) 100%),
|
|
url("YOUR_IMAGE_URL_HERE");
|
|
/* ✅ 여기만 교체 */
|
|
background-size: cover;
|
|
background-position: center;
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.bt-right-inner {
|
|
position: relative;
|
|
height: 100%;
|
|
padding: clamp(28px, 4vw, 64px);
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.bt-right-title {
|
|
margin-top: clamp(18px, 4vw, 64px);
|
|
font-weight: 700;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
color: rgba(255, 255, 255, .92);
|
|
line-height: 1.05;
|
|
font-size: clamp(44px, 5vw, 86px);
|
|
text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
|
|
}
|
|
|
|
/* 가운데 경계선 (이미지처럼) */
|
|
.bt-split-border {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 50%;
|
|
width: 1px;
|
|
background: rgba(255, 255, 255, .12);
|
|
z-index: 3;
|
|
}
|
|
|
|
/* 반응형: 모바일에서는 세로로 */
|
|
@media (max-width: 991.98px) {
|
|
.bt-split-border {
|
|
display: none;
|
|
}
|
|
|
|
.bt-left-inner {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.bt-right-inner {
|
|
align-items: center;
|
|
}
|
|
|
|
.bt-right-title {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<section class="bt-split-hero">
|
|
<div class="container-fluid px-0 position-relative">
|
|
<div class="bt-split-border"></div>
|
|
|
|
<div class="row g-0">
|
|
<!-- LEFT -->
|
|
<div class="col-lg-6 bt-left d-flex align-items-start">
|
|
<div class="bt-left-inner">
|
|
<h1>
|
|
Building a Better<br>
|
|
Tomorrow<br>
|
|
Through Precision<br>
|
|
Metal Supply
|
|
</h1>
|
|
|
|
<div class="bt-divider"></div>
|
|
|
|
<p>
|
|
Better Tomorrow, Inc. (BT-Trader) is a global supplier specializing
|
|
in titanium and specialty metals, connecting partners across the
|
|
U.S., Korea, and Southeast Asia.
|
|
</p>
|
|
|
|
<p>
|
|
We focus on delivering high-purity titanium ingots, solids, scrap,
|
|
and high-value alloys with consistency and precision, ensuring
|
|
manufacturers and industrial buyers receive materials they can trust.
|
|
</p>
|
|
|
|
<p>
|
|
Our mission is to create a transparent, dependable, and long-term
|
|
supply platform in a rapidly evolving global metals market. Through
|
|
verified sourcing, strict quality control, and efficient logistics
|
|
coordination, we streamline every step—from procurement to export
|
|
documentation—so our partners can operate with confidence.
|
|
</p>
|
|
|
|
<p class="mb-0">
|
|
Driven by integrity and a commitment to excellence, we continue to
|
|
expand our network and capabilities to meet the needs of modern
|
|
industries. BT-Trader aims to be more than a trading partner—we strive
|
|
to be a strategic ally that helps shape a better and more reliable
|
|
future for metal supply worldwide.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RIGHT -->
|
|
<div class="col-lg-6 bt-right">
|
|
<div class="bt-right-inner">
|
|
<div class="bt-right-title">
|
|
Titanium &<br>
|
|
Specialty<br>
|
|
Metals
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section> |