98 lines
2.6 KiB
PHP
98 lines
2.6 KiB
PHP
<style>
|
|
/* ===== Logistics Item (02 Container Drayage) ===== */
|
|
.bt-logi-item {
|
|
background: #070707;
|
|
padding: 72px 0;
|
|
}
|
|
|
|
.bt-logi-wrap {
|
|
max-width: 1180px;
|
|
}
|
|
|
|
.bt-num {
|
|
color: rgba(255, 255, 255, .95);
|
|
font-size: 22px;
|
|
font-weight: 500;
|
|
letter-spacing: .5px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.bt-logi-title {
|
|
color: rgba(255, 255, 255, .95);
|
|
font-size: 26px;
|
|
font-weight: 500;
|
|
margin: 0 0 18px 0;
|
|
}
|
|
|
|
.bt-logi-body p {
|
|
color: rgba(255, 255, 255, .75);
|
|
font-size: 12px;
|
|
line-height: 1.9;
|
|
margin: 0 0 10px 0;
|
|
max-width: 520px;
|
|
}
|
|
|
|
/* 오른쪽 이미지 카드 */
|
|
.bt-logi-img {
|
|
width: 100%;
|
|
max-width: 360px;
|
|
aspect-ratio: 4 / 3;
|
|
object-fit: cover;
|
|
display: block;
|
|
box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
|
|
}
|
|
|
|
.bt-logi-divider {
|
|
height: 1px;
|
|
background: rgba(255, 255, 255, .18);
|
|
margin-top: 56px;
|
|
}
|
|
|
|
@media (max-width: 991.98px) {
|
|
.bt-logi-item {
|
|
padding: 48px 0;
|
|
}
|
|
|
|
.bt-logi-img {
|
|
max-width: 420px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.bt-logi-body p {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<section class="bt-logi-item">
|
|
<div class="container bt-logi-wrap">
|
|
<div class="row align-items-start g-5 justify-content-center">
|
|
<!-- Left text -->
|
|
<div class="col-12 col-lg-7">
|
|
<div class="bt-num">02</div>
|
|
<h3 class="bt-logi-title">Container Drayage</h3>
|
|
|
|
<div class="bt-logi-body">
|
|
<p>
|
|
Our drayage services provide reliable movement of containers between ports,
|
|
warehouses, and processing facilities.
|
|
</p>
|
|
<p>
|
|
With a strong network of U.S.-based trucking partners, we ensure containers are
|
|
picked up promptly, efficiently staged, and delivered without unnecessary delays.
|
|
</p>
|
|
<p>
|
|
This minimizes dwell time, reduces shipping costs, and keeps your supply chain on schedule.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right image -->
|
|
<div class="col-12 col-lg-5 d-flex justify-content-center justify-content-lg-end">
|
|
<img class="bt-logi-img" src="YOUR_IMAGE_URL_HERE.jpg" alt="Container Drayage">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bt-logi-divider"></div>
|
|
</div>
|
|
</section> |