/* @font-face {
  font-family: "Montserrat-Black";
  src: url("../../font/Montserrat-Black.otf") format("truetype");
}
@font-face {
  font-family: "Montserrat-Bold";
  src: url("../Montserrat-Bold.otf") format("truetype");
}
@font-face {
  font-family: "Montserrat-Regular";
  src: url("../../font/Montserrat-Regular.otf") format("truetype");
} */


@charset "UTF-8";

@font-face {
	font-family: Montserrat-Bold;
	src: url(../font/Montserrat-Bold.otf);
}

@font-face {
	font-family: Montserrat-Regular;
	src: url(../font/Montserrat-Regular.otf);
}
body {
  font-family: "Montserrat-Regular";
}
.content p,
.content span,
.content div{
	font-family: "Montserrat-Regular !important";
}
main {
  padding:1.24rem calc(90 / 1080 * 100vh); 
  /* background: #fff777; */
  min-height: calc(100vh - 0rem); 
  display: flex;
  flex-direction: column;
}
 
.title {
  font-family: "Montserrat-Bold";
  line-height: calc(62 / 1080 * 100vh); 
  font-size: calc(51 / 1080 * 100vh); 
  text-align: left;
  font-family: Montserrat;
  font-weight: 900;
  font-style: Black; 
  line-height: 100%; 
  text-transform: uppercase;
  margin-bottom: calc(66 / 1080 * 100vh);

} 
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(20 / 1080 * 100vh);
  width: 100%;
  height: calc((100vh - calc(90 / 1080 * 100vh) * 2 - calc(62 / 1080 * 100vh) - calc(66 / 1080 * 100vh) - calc(20 / 1080 * 100vh)) * 1.5); /* 计算总高度 */
}

.grid-item {
  position: relative;
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* font-family: "Montserrat-Bold";
  font-size: 24px; */
  height: 100%;
  overflow: hidden;
}

.item-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.item-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
}

.item-title {
  font-weight: 700;
  text-align: right;
  color: #000000;
  font-size: calc(28.16 / 1080 * 100vh);
  margin: 0;
  align-self: flex-end;
  font-family: Montserrat-Regular;
  font-weight: 700;
  font-style: Bold;

    
  line-height: 100%;
  letter-spacing: 0%;
  text-transform: uppercase;
  margin-right:calc(30 / 1080 * 100vh);
  margin-top:calc(32 / 1080 * 100vh);

}

/* .item-image {
  align-self: flex-start; 
  width: calc(592.18 / 1080 * 100vh); 
} */

.item-image {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: calc(630 / 1080 * 100vh);
}

.item-image img {
  max-width: 100%;
  height: auto;
}

.download-btn {
  align-self: flex-end;
  background: transparent;
  color: #000;
  border: 1px solid #000;
  border-radius: calc(51 / 1080 * 100vh);
  cursor: pointer;
  font-family: "Montserrat-Bold";
  margin-right:calc(30 / 1080 * 100vh);
  margin-bottom:calc(32 / 1080 * 100vh);
  width: calc(203 / 1080 * 100vh);
  height: calc(51 / 1080 * 100vh);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(12 / 1080 * 100vh);
  transition: all 0.3s ease;
  position: relative; 
  font-size: calc(15.2 / 1080 * 100vh);
}

.download-btn::after {
  content: "";
  display: inline-block;
  width: calc(24 / 1080 * 100vh);
  height: calc(24 / 1080 * 100vh);
  background-image: url('../img/download_icon.png');
  background-size: contain;
  background-repeat: no-repeat;
  position: relative; /* 改为相对定位 */
  right: auto; /* 移除固定定位 */
}

.download-btn:hover,
.download-btn:active {
  background: #000;
  color: #fff;
}

.download-btn:hover::after,
.download-btn:active::after {
  background-image: url('../img/download_icon_hover.png');
}


@media (max-width: 768px) {
  main {
    /* padding:20px calc(90 / 375 * 100vw);  */
    padding-left:calc(36 / 750 * 100vw); 
    padding-right: calc(36 / 750 * 100vw); 
    /* background: #fff777; */
    min-height: calc(100vh - 0rem); 
    display: flex;
   flex-direction: column;
  }
  .title { 
    line-height: calc(62 / 750 * 100vw);
    font-size: calc(51 / 750 * 100vw);  
    margin-bottom: calc(66 / 750 * 100vw);
    margin-top:  calc(40 / 750 * 100vw);
  
  } 
  .grid-container {
    grid-template-columns: 1fr;
    height: auto;
  }

  .grid-container {
    grid-template-columns: 1fr;
    height: auto;
  } 

  .grid-item { 
    background-image: url('../img/download_bg.jpg'); 
    position: relative;
    aspect-ratio: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start; 
    height: 100%;
    overflow: hidden; 
    display: block;
    background-size: 100% auto; /* 修改点：宽度100%适应容器，高度自动保持比例 */
    background-position: center; /* 新增：背景图居中显示 */
  }
   
  .item-title { 
    font-size: calc(28.16  / 750 * 100vw);  
    margin-right:calc(28  / 750 * 100vw);
    margin-top:calc(36  / 750 * 100vw);
  }
  
  .item-image {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    text-align: center;
    margin-top: calc(16  / 750 * 100vw) ;  
    margin-bottom: calc(16  / 750 * 100vw) ;     
    left:calc(-16  / 375 * 100vw);
  } 

  .download-btn {   
    width: 100%;
    height: calc(42 / 375 * 100vw); 
    border-radius: calc(42 / 375 * 100vw); 
    font-size: calc(15.2 / 375 * 100vw); 
  }
 
}

.footer {
  width: 100%;
}