/*定义变量 */
     :root {
    margin: 0;
    padding: 0;

    --body-fonts: "Helvetica", "Arial", sans-serif;
    --line-height: 1.5;

    /* Our palette */
    --dark-blue: #34647a;
    --blue-purple: #58508d;
    --purple: #bc5090;
    --pink: #ff6361;
    --yellow2: #ffa600;
    --dark-gray: #313335;
    --light-gray: #dfe3e6;

    --logo-yellow: #ffcc00ff;
    --yellow: #ffcc00ff;
    --logo-blue: #00aad4ff;

    --rosita: #fd6c6c8f;

    --green2:  rgb(86, 173, 119);
}

body { padding-top: 56px; }
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #343a40 !important; }
.bg-hero { background-color: #7952b3; }

/* 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:.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; }

/* 进度条 */
/*----------------------------------*/
#content_progress {
    /* Positioning */
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999999;
    width: 100%;
    height: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    background-color: #fff;
    color: #f391a9;
}

#content_progress::-webkit-progress-bar {
    background-color: transparent;
}

#content_progress::-webkit-progress-value {
    background-color: #f391a9;
}

#content_progress::-moz-progress-bar {
background-color: #f391a9;
}
/*----------------------------------*/


 
/* For Engneering success page */
/*----------------------------------*/

.abstract {
      background-color: #c9e4ed;
      color: white;
      padding: 2rem 7rem;
      margin: 2rem 5rem;
      font-family: 'Dosis';
      font-size: 20px;
      /* margin-bottom: .6em; */
  }

.eng_box {
    width: 100%;
    float: left;
    border-radius: 15px;
    padding: 2%;
    position: relative;
    border:7px solid #2468a2 !important;
    background-color: white !important;
  }

.eng_box2 {
    width: 100%;
    float: left;
    border-radius: 15px;
    padding: 2%;
    position: relative;
    border:7px solid #fcaf17 !important;
    background-color: white !important;
  }

.eng_box3 {
    width: 100%;
    float: left;
    border-radius: 15px;
    padding: 2%;
    position: relative;
    border:7px solid #d71345 !important;
    background-color: white !important;
  }

  .eng_icon {
    float: left;
    width: 20%;
  }
  .eng_title {
    float: left;
    width: 100%;
    padding: 2%;
  }

.eng_title2 {
    float: right;
    width: 90%;
    padding: 0%;
  }

.eng_title3 {
    float: left;
    width: 33%;
    padding: 0%;
    text-align: center;
  }

.eng_title4 {
    float: left;
    width: 30%;
    padding: 2%;
    text-align: left;
  }

  .eng-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .center_w {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.seqs{
    width: 100%;
    height: auto;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
    font-size: 0.9rem;
 }

 .center{
   width: 65% !important;
 }

/*----------------------------------*/

/*以下为新定义*/
 /* 侧边栏Sidebar */
/*----------------------------------*/
.toc_container {
      background: #ffffff;
      border-radius: 4%;
      border-left: 9px solid #f391a9;
      display: table;
      font-size: 120%;
      margin-bottom: 1em;
      margin-left: 0em;
      padding: 5px;
      width: 17rem;
      position: fixed;
      bottom: 0;
  }

/*边栏标题*/
  .toc_title {
      font-weight: 800;
      text-align: center; 
      color: #f05b72;
      font-size: 1.5rem;
      text-transform: uppercase;
  }


 .toc_container li, .toc_container ul, .toc_container ul li{
      list-style: outside none none !important;
  }
  
  .toc_list ul {
      margin-left: 1.5em;
  }
  
.toc_container a {
      text-decoration: none;
      font-size: 1.3rem;
      font-weight: 600;
      color: #f391a9;
  }

  .toc_container a:hover {
      text-decoration: none;
      font-size: 1.2rem;
      color: #d71345;
      font-weight: 600;
  }
/*----------------------------------*/

/* 参考文献 */
.references {
        font-size: 0.9rem !important;
    }

 .center {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 80%;
  }


/*一级标题*/
.page-content-wrapper h1 {
 	color:#1a3a7a;
	font-weight: bold;
}

.page-content-wrapper-for-team h1 {
 	color:#1a3a7a;
	font-weight: bold;
}

/*二级标题*/
.page-content-wrapper h2 {
	font-size: 1.9rem;
	line-height: 50px;
 	font-weight: bold;
 	color: #145b7d;
  	text-align: left;
}

.page-content-wrapper-for-team h2 {
	font-size: 1.9rem;
	line-height: 50px;
 	font-weight: bold;
 	color: #145b7d;
  	text-align: left;
}
/*三级标题*/
.page-content-wrapper h3 {
	font-size: 1.5rem;
	line-height: 50px;
 	font-weight: bold;
 	color: #4f5555;
  	text-align: left;
}

.page-content-wrapper-for-team h3 {
	font-size: 1.5rem;
	line-height: 50px;
 	font-weight: bold;
 	color: #4f5555;
  	text-align: left;
}

/*四级标题*/
.page-content-wrapper h4 {
	font-size: 1.3rem;
	line-height: 50px;
 	font-weight: bold;
 	color: #4f5555;
  	text-align: left;
}

.page-content-wrapper-for-team h4 {
	font-size: 1.3rem;
	line-height: 50px;
 	font-weight: bold;
 	color: #4f5555;
  	text-align: left;
}


/*正文（搭配p标签使用）*/
.page-content-wrapper p {
	font-size: 1.1rem;
	 line-height: 40px;
	 color: #6E6E6E;
         text-indent:2em;
}

.page-content-wrapper-for-team p {
	font-size: 1.1rem;
	 line-height: 40px;
	 color: #6E6E6E;
	 text-indent:2em;
}

/*缩进*/
.retract {
    margin-left:4rem;
  }

.img-center {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 100%;
  }

.home_box_right .img-center {
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-top: auto;
      margin-bottom: auto;
      width: 90%;
  }

.home_box_left .img-center {
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-top: auto;
      margin-bottom: auto;
      width: 90%;
  }

.img-left {
      display: block;
      float:left
      margin-left: 5px;
      margin-right: 5px;
      width: 60%;
  }

/*顶部简介框的背景颜色和位置*/
.Header {
	background:#feeeed;
	margin-top:30px;
		}

/*content部分的div排版*/
.page-content-wrapper {
}


/*content的文本框*/
.content_container {
      background: #ffffff;
      border-radius: 10px;
      border: 6px solid #c9e4ed;
      margin-bottom: 2em;
      padding: 20px;
      position: relative;
  }

/*team页面的文本框*/
.team_container {
      background: #ffffff;
      border-radius: 10px;
      border: 6px solid #5C799E;
      margin-bottom: 2em;
      padding: 20px;
      position: relative;
  }

/*根据屏幕大小调整边栏和正文容器的格式*/
/*小屏幕时的样式，屏幕宽度<768px*/

@media(max-width: 768px) {
    .toc_container {
          display: none !important;
      }
   
.page-content-wrapper {
 width: 100%;
 margin-left:0rem;
}

.page-content-wrapper-for-team {
 width: 100%;
 margin-left:0rem;
}

   }
/*大屏幕时的样式，屏幕宽度>768px*/
@media (min-width: 768px) {
  .toc_container {
    margin-left: 0;
    width: 17rem;
  }

  .page-content-wrapper {
    min-width: 0;
    width: calc(100% - 17rem);
    margin-left:17rem;
  }

  .page-content-wrapper-for-team {
    min-width: 0;
    width: 100%;
    margin-left:0rem;
  }

}

/*team gallery的样式*/
.bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

/*以下所有样式都是team成员卡的样式*/
.card{
        margin-bottom:30px;
    }

@media screen and (min-width: 40em) {
        .cards {
            /*弹性布局*/
            display: flex;
            /*自动换行*/
            flex-wrap: wrap;
            justify-content: space-around;
        }

.card {
            flex: 0 1 calc(50% - 1em);
            border: none;
        }

}

 @media screen and (min-width: 60em) {

        .card {
            flex: 0 1 calc(25% - 1em);
            border: none;
        }
    }

 .mycolor {
        --bg-color: rgb(176,213,108);
        --bg-color-light: rgb(208,233,105);
        --text-color-hover: #ffffff;
        --box-shadow-color: #f391a9;
    }

.c-card {
        margin: auto;
        width: 220px;
        height: 321px;
        border-radius: 10px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        box-shadow: 0 14px 26px rgba(128,128,128,0.2);
        transition: all 0.3s ease-out;
        text-decoration: none;
        font-size: 20px;
        padding: 0px !important;

    }

 .c-card:hover p {
        color: var(--text-color-hover);
    }

    .c-card:active {
        transform: scale(1) translateZ(0);
        box-shadow: 0 15px 24px rgba(0,0,0,0.11), 0 15px 24px var(--box-shadow-color);
    }

    .c-card p {
        font-size: 20px;
        color: #5C799E;
        margin-top: 30px;
        z-index: 1000;
        transition: color 0.3s ease-out;
        text-decoration: none;
    }

 .imgs{
        height: 100%;
        width: 100%;
        overflow: hidden;
        position: relative
    }

    .imgs> img{
        width: 100%;
    }

    .imgs:after {
        content:'\A';
        position:absolute;
        width:100%;
        height:100%;
        top:0;
        left:0;
        opacity:0;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        background: #f391a9;
    }

    .imgs:hover:after {
        opacity:1;
    }

/*s-img和img的区别在于鼠标放在图片上面会不会变成绿色*/
    .s-img-cont{
        height: 100%;
        width: 100%;
        overflow: hidden;
        position: relative
    }

    .s-img-cont > img{
        width: 100%;
    }

    .s-img-cont:after {
        content:'\A';
        position:absolute;
        width:100%;
        height:100%;
        top:0;
        left:0;
        opacity:0;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
    }

 .words {
        position: absolute;
        color: #ffffff;
        text-align: center;
        padding: 2%;
        margin: 0;
        opacity: 0;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        font-size: 15px;
        transform: translate(-50%, -50%);
        z-index: 1;
    }

    .imgs:hover .words {
        position: absolute;
        opacity: 1;
        color: #ffffff;
        transition: opacity .5s;
    }

/*以下是主页的样式*/
.home_box_left {
    margin:auto;
    width: 90%;
    float:center;
    border-radius: 15px;
    padding: 2%;
    position: relative;
    border:7px solid #5C799E !important;
    background-color: white !important;


  }

.home_box_right {
    margin:auto;
    width: 90%;
    float:center;
    border-radius: 15px;
    padding: 2%;
    position: relative;
    border:7px solid #5C799E !important;
    background-color: white !important;
  }


/*以下是safety页面的样式*/
  .safety_box_left {
    margin:auto;
    width: 100%;
    float:center;
    border-radius: 15px;
    padding: 2%;
    position: relative;
    border:7px solid #5C799E !important;
    background-color: white !important;
  }
  .safety_box_right {
    margin:auto;
    width: 100%;
    float:center;
    border-radius: 15px;
    padding: 2%;
    position: relative;
    border:7px solid #5C799E !important;
    background-color: white !important;
}

/*顶部图片放大效果*/

.div1 { 
position:relative;
top:210px;
left:12%;
width: 420px;
height:400px;

}

.div1 img{
  cursor: pointer;
  transition: all 0.3s;
}

.div1 img:hover{
  transform: scale(1.2);
}


.div2 { 
position:relative;
top:-170px;
left:63%;
width: 350px;
height:400px;

}

.div2 img{
  cursor: pointer;
  transition: all 0.3s;
}

.div2 img:hover{
  transform: scale(1.2);
}

/*下方漫画图片放大效果*/
.div3 { 
border: #000 solid 0px;
}

.div3 img{
  cursor: pointer;
  transition: all 0.3s;
}

.div3 img:hover{
  transform: scale(1.2);
}


/*用一张图片控制另一张图片的淡出效果*/

        .brother2{
        	}


	.brother2 img{
		opacity:0;
		transition: all 0.3s;
	}

        .div1:hover +.brother2 img{
            opacity:1;
        }

	.brother3{
        	}


	.brother3 img{
		opacity:0;
		transition: all 0.3s;
	}

        .div2:hover +.brother3 img{
            opacity:1;
        }

/*首页动画图片*/
.img-center2 {
      display: block;
      margin-left: 0;
      margin-right: 0;
      width: 100%;
  }

/*team页面的box*/
.Team_box {
    margin:auto;
    width: 93%;
    float:center;
    border-radius: 15px;
    padding: 2%;
    position: relative;
    border:7px solid #5C799E !important;
    background-color: white !important;

  }