/**
 * 标题字体
 */
@font-face {
  font-family: 'GillSans';
  src: url('https://static.igem.wiki/teams/5606/fonts/gilsanub.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/**
 * 正文字体
 */
@font-face {
  font-family: 'GillSansMT';
  src: url('https://static.igem.wiki/teams/5606/fonts/gil.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body { 
  background: #F0F5FF;
  font-family: 'GillSansMT';
}

.sms-header{
  background-image: url('https://static.igem.wiki/teams/5606/images/banner.webp');
  background-repeat: no-repeat;
  background-size: 1920px;
  background-position: center 0px;
}


/**
* banner
*/
.smm-banner{
  height: 800px;
  text-align: center;
  color: #FFFFFF;
  padding: 4em 0;
}
.smm-banner-logo{
  width: 383px;
}
.smm-banner-title{
  margin-top: 40px;
  font-family: 'GillSans';
  font-weight: 800;
  font-size: 64px;
  text-align: center;
}



/** 
* page_content
*/

.sms-body{
  background: #F0F5FF;
  min-height: 1500px;
}

.sms-body-box{
  max-width: 1920px;
  margin: 0 auto;
  padding: 24px 32px;
  /* background-color: #5bc0de; */
  overflow: hidden;
  cursor: pointer;
  transition: all 2s ease;
  backdrop-filter: blur(5px);
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.sms-body-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0.1;
  transition: opacity 2s ease;
  z-index: -1;
}

.bg-1::before {
  background-image: url('https://static.igem.wiki/teams/5606/images/home5.webp');
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center top;
}
.bg-2::before {
  background-image: url('https://static.igem.wiki/teams/5606/images/home2.webp');
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center top;
}
.bg-3::before {
  background-image: url('https://static.igem.wiki/teams/5606/images/home1.webp');
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center top;
}
.bg-4::before {
  background-image: url('https://static.igem.wiki/teams/5606/images/home3.webp');
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center top;
}
.bg-5::before {
  background-image: url('https://static.igem.wiki/teams/5606/images/home4.webp');
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center top;
}

.sms-body-box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0.1;
  transition: opacity 0.5s ease;
  z-index: -1;
}

.sms-body-box:hover .sms-body-t1, .sms-body-box:hover .sms-body-text{
  color: #FFFFFF;
}

.sms-body-box:hover::before {
  opacity: 1;
}

.sms-body-box:hover::after {
  opacity: 1;
}


.sms-body-t1{
  font-family: GillSansMT, GillSansMT;
  font-weight: bold;
  font-size: 32px;
  color: #1D4596;
  line-height: 48px;
  text-align: left;
  font-style: normal;
}
.sms-body-text{
  font-family: GillSansMT;
  font-size: 35px;
  color: #1D4596;
  line-height: 40px;
  text-align: left;
  font-style: normal;
  margin-top: 24px;
}
.sms-body-link{
  margin-top: 27px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 20px;
  line-height: 38px;
  text-align: left;
  font-style: normal;
}


.sms-body-box .box2-title{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.float-right{
  display: flex;
  flex-direction: column;
  align-items:end;
}




/**
* 其他
*/
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #343a40 !important; }
.bg-hero { background-color: #45b06cff; }

/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom: 1.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }

/* footer */
/* footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; } */


@media screen and (min-width: 1450px){
  .sms-body-box{
    height: 550px;
  }
}

@media screen and (max-width: 1400px){
  .bg-1::before, .bg-2::before, .bg-3::before, .bg-4::before, .bg-5::before{
    background-size: 1400px;
  }
}