/* announcements */
.ann-wrapper {
  background-color: var(--color-bg-one);
  padding: 3.75rem 0;
}
.ann-wrapper .ann-content {
  position: relative;
  height: 30rem;
  background-color: var(--white);
  box-shadow: 0 0 2px 2px #e6e6e6;
  transition: all 0.3s;
  cursor: pointer;
  margin-bottom: 1.875rem;
}
.ann-wrapper .ann-content .image {
  height: 20rem;
  overflow: hidden;
}
.ann-wrapper .ann-content .test-box {
  height: 10rem;
  padding: 1.25rem 1.25rem 1.875rem;
  overflow: hidden;
}
.ann-wrapper .ann-content .test-box .date {
  margin: 0;
  margin-bottom: 0.875rem;
  color: var(--color-theme);
  font-size: var(--text-sm-size);
  font-weight: bold;
}
.ann-wrapper .ann-content .test-box .desc {
  margin: 0;
  color: var(--color-theme-two);
  font-size: var(--text-md-size);
}
.ann-wrapper .ann-content .learn {
  position: absolute;
  bottom: 0.875rem;
  left: 1.25rem;
  color: var(--color-theme);
  cursor: pointer;
  font-size: var(--text-xs-size);
}
.ann-wrapper .ann-content:hover {
  box-shadow: 0 0 6px 6px #e6e6e6;
}
.ann-wrapper .ann-content:hover .image img {
  transform: scale(1.1);
}

/* career */
.career-wrapper {
  background-color: var(--white);
  padding: 3.75rem 0;
}
.career-wrapper .career-header {
  margin-bottom: 1.25rem;
}
.career-wrapper .career-header p {
  margin-bottom: 0.625rem;
  color: var(--color-theme-two);
  font-size: var(--text-sm-size);
}
.career-wrapper .career-header p a {
  margin: 0;
  display: inline-block;
  color: var(--color-theme);
  text-decoration: underline;
  cursor: pointer;
}
.career-wrapper .career-header p a:hover {
  color: var(--color-theme);
}
.career-wrapper .job-title {
  margin: 1.3rem 0;
  color: var(--color-theme-two);
  font-size: var(--text-lg-size);
}
.career-wrapper .career-box {
  width: 100%;
  margin-bottom: 2.5rem;
  border: 1px solid #e6e6e6;
}
.career-wrapper .career-box .box-title {
  position: relative;
  background-color: var(--color-theme);
  padding: 0 15px;
}
.career-wrapper .career-box .box-title span {
  color: white;
  line-height: 2.5rem;
  font-size: var(--text-md-size);
}
.career-wrapper .career-box .box-content {
  padding: 15px;
}
.career-wrapper .career-box .box-content p {
  color: var(--color-theme-two);
  font-size: var(--text-sm-size);
}

/* contact US */
.contact-wrapper {
  background-color: var(--color-bg-one);
  padding: 4.735rem 0;
}
.contact-wrapper .tel-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.25rem;
}
.contact-wrapper .tel-box .left {
  flex: 0 0 3.125rem;
}
.contact-wrapper .tel-box .left .icon {
  font-size: 3.125rem;
  color: var(--color-theme);
}
.contact-wrapper .tel-box .right {
  flex: 1;
}
.contact-wrapper .tel-box .right .type {
  line-height: 1.25rem;
  margin: 0;
  color: var(--color-theme-two);
  font-size: var(--text-sm-size);
  font-weight: bold;
}
.contact-wrapper .tel-box .right .num {
  margin: 0;
  line-height: 2.5rem;
  color: var(--color-theme-two);
  font-size: var(--text-xxl-size);
  font-weight: bold;
}
.contact-wrapper .contact-header p {
  margin-bottom: 0.625rem;
  color: var(--color-theme-two);
  font-size: var(--text-sm-size);
}
.contact-wrapper .contact-header p a {
  margin: 0;
  display: inline-block;
  color: var(--color-theme);
  text-decoration: underline;
  cursor: pointer;
}
.contact-wrapper .contact-header p a:hover {
  color: var(--color-theme);
}
.contact-wrapper .contact-box {
  width: 100%;
  margin-bottom: 1.25rem;
  border: 1px solid #e6e6e6;
}
.contact-wrapper .contact-box .box-title {
  position: relative;
  background-color: var(--color-theme);
  padding: 0 15px;
}
.contact-wrapper .contact-box .box-title span {
  color: white;
  line-height: 2.5rem;
  font-size: var(--text-md-size);
}
.contact-wrapper .contact-box .box-content {
  padding: 15px;
}
.contact-wrapper .contact-box .box-content p {
  color: var(--color-theme-two);
  font-size: var(--text-sm-size);
}

.contact-wrapper .profile-box {
  margin: 15px 0;
}
.contact-wrapper .profile-box h2 {
  line-height: 2;
  color: var(--color-theme);
}
.contact-wrapper .profile-box p {
  margin: 0;
  line-height: 1.7;
  font-size: 16px;
}
.contact-wrapper .profile-box p a {
  display: inline;
  font-size: 16px;
}

/* history */
.history-wrapper {
  background-color: var(--color-bg-one);
  padding: 3.75rem 0;
}
.history-wrapper .history-header {
  margin-bottom: 3.75rem;
}
.history-wrapper .history-header h2 {
  margin-bottom: 1.25rem;
  color: var(--color-theme);
  font-size: var(--text-big-size);
}
.history-wrapper .history-header p {
  margin-bottom: 0;
  color: var(--color-theme-two);
  font-size: var(--text-md-size);
}
.history-wrapper .item-box {
  margin-bottom: 1.875rem;
}
.history-wrapper .item-box .title {
  margin: 0 0 1.25rem 0;
  color: var(--color-theme-two);
  font-size: var(--text-md-size);
}
.history-wrapper .item-box .line-box {
  position: relative;
  height: 2px;
  background-color: var(--color-theme);
  margin: 0 0 1.25rem 0;
}
.history-wrapper .item-box .line-box .icon {
  position: absolute;
  color: var(--color-theme);
  font-size: 1.25rem;
  top: -0.5rem;
  left: 0.625rem;
  background: var(--color-bg-one);
}
.history-wrapper .item-box .content {
  width: 80%;
}
.history-wrapper .item-box .content p {
  color: var(--color-theme-two);
  font-size: var(--text-sm-size);
}

/* management */
.management-map-wrapper {
  background-color: white;
  padding: 2.5rem 0;
}
.management-wrapper {
  background-color: var(--white);
  padding: 1rem 0 11.25rem;
}

.management-wrapper .test-box {
  margin-bottom: 1.875rem;
}
.management-wrapper .test-box .title {
  margin: 0 0 1.25rem 0;
  color: var(--color-theme);
  font-size: 3rem;
}
.management-wrapper .test-box .content {
  margin: 0 0 3.125rem 0;
}
.management-wrapper .test-box .content p {
  color: var(--color-theme-two);
  font-size: var(--text-lg-size);
}

/* market */
.market-wrapper {
  background-color: white;
  padding: 2.5rem 0;
}
.market-wrapper .test-box {
  padding: 2.5rem 1.875rem;
  border-bottom: 1px solid #d9d9d9;
}
.market-wrapper .test-box p {
  margin: 0;
}
.market-wrapper .test-box .date {
  color: var(--color-theme);
  margin-bottom: 0;
  font-weight: bold;
  font-size: var(--text-md-size);
}
.market-wrapper .test-box .desc {
  color: var(--color-theme-two);
  font-size: var(--text-md-size);
  font-weight: bold;
  line-height: 1.8;
}
.market-wrapper .test-box .content p {
  color: var(--color-theme-two);
  font-size: var(--text-md-size);
}

/* aboutus */
.about-wrapper {
  background-color: var(--white);
  padding: 7.5rem 0;
}
.about-textcontent {
  width: 100%;
  max-width: 500px;
  margin: 0 15px;
}
.about-textcontent h2 {
  color: var(--color-theme);
  font-size: 3rem;
  margin-bottom: 1.875rem;
  font-weight: normal;
}
.about-textcontent p {
  color: var(--color-theme-two);
  font-size: var(--text-md-size);
  margin-bottom: 0;
  font-weight: normal;
}
.about-bot-wrapper .div-table {
  margin: 0 auto;
  height: 37.5rem;
  max-width: 500px;
}
.about-textcontent.left h2 {
  color: var(--white);
}
.about-textcontent.left p {
  color: var(--white);
  font-size: var(--text-md-size);
}
.about-textcontent.right p {
  color: var(--color-theme);
  font-size: var(--text-xxl-size);
}

@media (max-width: 768px) {
  .about-textcontent {
    margin: 0;
    padding: 0 15px;
  }
}

/* expertise-wrapper */
.expertise-wrapper .expertise-content {
  /* height: 100vh; */
}
.expertise-wrapper .expertise-content:nth-of-type(even) .desc-content {
  float: right;
}
.expertise-wrapper .image {
  height: 100vh;
}
.expertise-wrapper .desc-content {
  margin: 0 3.75rem;
  /* max-width: 520px; */
  width: 90%;
}
.expertise-wrapper .desc-content h2 {
  margin: 0 0 1.875rem 0;
  color: var(--color-theme);
  font-size: 3rem;
}
.expertise-wrapper .desc-content p {
  margin: 0 0 10px 0;
  color: var(--color-theme-two);
  font-size: var(--text-md-size);
}
.expertise-wrapper .desc-content ul {
  margin: 0 0 10px 0;
  padding-left: 1.875rem;
}
.expertise-wrapper .desc-content ul li {
  margin: 0;
  color: var(--color-theme-two);
  font-size: var(--text-md-size);
}
h2 {
  color: var(--color-theme);
}

@media (max-width: 993px) {
  .expertise-wrapper .expertise-content:nth-of-type(even) .desc-content {
    float: unset;
  }
  .expertise-wrapper .desc-content {
    margin: 2rem auto;
    padding: 1rem 3rem;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
  }
  .expertise-wrapper .expertise-content {
    height: auto;
  }
  .expertise-wrapper .desc-content p,
  .expertise-wrapper .desc-content ul li {
    color: white;
  }
  .expertise-wrapper .content-bg-1 {
    background-image: url("../../images/expertise_ocean_opacity.png");
  }
  .expertise-wrapper .content-bg-2 {
    background-image: url("../../images/expertise_air_opacity.png");
  }
  .expertise-wrapper .content-bg-3 {
    background-image: url("../../images/expertise_trucking_opacity.png");
  }
  .expertise-wrapper .content-bg-4 {
    background-image: url("../../images/expertise_logistics_opacity.png");
  }
  .expertise-wrapper .content-bg-5 {
    background-image: url("../../images/expertise_customs_opacity.png");
  }
  .expertise-wrapper .content-bg-6 {
    background-image: url("../../images/expertise_ITs_opacity.png");
  }
  .expertise-wrapper .content-bg-7 {
    background-image: url("../../images/expertise_perishables_opacity.png");
  }
  .expertise-wrapper .content-bg-8 {
    background-image: url("../../images/expertise_cargo_opacity.png");
  }
}
