Team:XMU-China/css/engineering

.main { 

   margin-top: 5vw;

} .event_box { 

   width: 70vw;
   margin: 0 auto 0;
   position: relative;
   min-height: 420px;

} .event_box .parHd { 

   width: 100%;
   display: inline-block;
   height: 92px;
   overflow: hidden;

} .limited_framework { 

   width: 80%;
   margin: 0 10%;
   overflow: hidden;

} .parHd ul { 

   width: 100%;
   text-align: center;
   margin: 0 auto;
   padding-top: 25px !important;

} .parHd .tempWrap { 

   margin: 0 auto;

} .parHd .tempWrap:after { 

   content: ;
   width: 150%;
   height: 1px;
   background: #2300a9;
   position: absolute;
   left: 0;
   top: 34%;
   z-index: 10;

} .parHd li.no_line:before { 

   display: none;

} .parHd li { 

   display: inline-block;
   cursor: pointer;
   padding-top: 30px;
   font-size: 15px;
   color: #2300a9;
   margin: 0 30px;
   position: relative;

} .parHd li:after { 

   content: ;
   background: url(T--XMU-China--timeline_dot.png) no-repeat;
   background-size: 100%;
   width: 24px;
   height: 24px;
   position: absolute;
   z-index: 20;
   top: -12px;
   left: 28px;
   margin-left: -12px;

} .parBd { 

   text-align: center;
   width: 50vw;
   margin: 1vw auto;

} .parBd h1 { 

   position: relative;
   font-size: 40px;
   width: 25vw;
   display: inline-block;
   text-align: center;
   color: #2300a9;
   line-height: 100%;
   overflow: visible;

} .parBd h1:after { 

   content: ;
   background: #2300a9;
   width: 15vw;
   height: 1px;
   display: inline-block;
   position: absolute;
   right: -15vw;
   top: 11.5px;

} .parBd h1:before { 

   content: ;
   background: #2300a9;
   width: 15vw;
   height: 1px;
   display: inline-block;
   position: absolute;
   left: -15vw;
   top: 11.5px;

} .parBd p { 

   line-height: 180%;
   font-size: 16px;
   width: 95%;
   margin: 1vw auto 0;
   color: 5f5f5f;

} div#listBox { 

   width: 100%;

} .sPrev, .sNext { 

   display: block;
   position: absolute;
   top: 10px;

} .sPrev { 

   left: 0;

} .sNext { 

   right: 0;

} .sPrev img, .sNext img { 

   transition: all .6s cubic-bezier(.51, 1.1, .9, .95);
   -moz-transition: all .6s cubic-bezier(.51, 1.1, .9, .95);
   -webkit-transition: all .6s cubic-bezier(.51, 1.1, .9, .95);
   -o-transition: all .6s cubic-bezier(.51, 1.1, .9, .95);
   width: 25px;
   cursor: pointer;

} .parHd li.act span { 

   display: block;
   width: 24px;
   height: 24px;
   overflow: hidden;
   background: url(T--XMU-China--timeline_cat.png) no-repeat;
   background-size: 100%;
   position: absolute;
   top: -12px;
   left: 28px;
   z-index: 21;
   margin-left: -12px;

} .parHd li span, .parHd li.clone span { 

   display: none;

} @media screen and (max-width: 45rem) { 

   .event_box {
       width: 85vw;
   }
   .parBd {
       margin-top: 3vw;
       width: 85vw;
   }
   .parBd h1:before {
       left: -25vw;
       top: 0.98rem;
       width: 20vw;
   }
   .parBd h1:after {
       right: -25vw;
       width: 20vw;
       top: 0.98rem;
   }
   .parBd h1 {
       font-size: 1.25rem;
       font-weight: bold;
   }
   .sPrev img,
   .sNext img {
       width: 1rem;
   }
   .parHd li.act span,
   .parHd li:after {
       width: 18px;
       height: 18px;
       top: -7px;
   }
   .parHd li {
       font-size: 0.8rem;
       margin: 0 25px;
   }
   .notebook .slideBox>p {
       text-align: left;
       text-indent: 0;
   }
   .dipic_1 img,
   .dipic_2 img {
       width: 40vw !important;
   }

} @media screen and (min-width: 45rem) and (max-width: 769px) { 

   .event_box {
       width: 85vw;
   }
   .parBd h1 {
       font-size: 2rem;
       font-weight: normal;
   }
   .parBd {
       margin-top: 3vw;
       width: 85vw;
   }

} @media screen and (min-width: 769px) and (max-width: 89.9375rem) { 

   .parBd h1 {
       font-size: 2rem;
   }

} @media screen and (min-width: 90rem) {} .description_banner { 

   margin: 0 25vw;
   position: relative;
   width: 50vw;
   margin-top: 6rem;
   background-size: 100%;
   background-repeat: no-repeat;
   text-align: center;
   background-image: url(T--XMU-China--description_headline.png);

} .description_banner>.word { 

   font-size: 3vw;
   padding: 4vw 0vw;
   line-height: 3vw;
   color: white;
   font-weight: bolder;

} @media screen and (max-width: 769px) { 

   .description_banner>.word {
       font-size: 5vw;
       padding: 8vw 0vw;
   }
   .description_banner {
       width: 90VW;
       margin: 5rem 5vw 0;
   }

} @media screen and (min-width: 769px) and (max-width: 89.9375rem) { 

   .description_banner {
       width: 60vw;
       margin: 6rem 20vw 0;
   }
   .description_banner>.word {
       padding: 5vw 0vw;
   }

} @media screen and (min-width: 90rem) {}

  1. engineering p,
  2. engineering h1 {
   margin: 0 auto;
   padding: 0;
   text-align: center !important;

}

  1. engineering img {
   margin: 0 auto;
   padding: 0;
   border-radius: 5px;

}

  1. engineering h2 {
   margin: 0.5vw 0 0;
   font-weight: normal !important;

}

  1. engineering .F3>img {
   margin-top: 1vw;

} .dipic_1 img { 

   width: 23vw;
   margin-top: 1vw;

} .dipic_2 img { 

   width: 20vw;
   margin-top: 1vw;

} .dipic_2 img:nth-child(1) { 

   margin-bottom: 1vw;

}

  1. engineering .slideBox:nth-child(9) .dipic_1,
  2. engineering .slideBox:nth-child(13) .dipic_1 {
   margin-top: 1vw;

} .dipic_3 img, .dipic_4 img { 

   margin-top: 1vw;

} .slideBox .dipic_4, .slideBox .dipic_3 { 

   text-align: center !important;

} .dipic_3 img:nth-child(1) { 

   width: 30VW;

} .dipic_3 img:nth-child(2) { 

   width: 15VW;

} .dipic_4 img:nth-child(1) { 

   width: 20VW;

} .dipic_4 img:nth-child(2) { 

   width: 20VW;

} @media screen and (max-width: 769px) { 

   .dipic_3 img:nth-child(1) {
       width: 80vw;
       margin-left: 5vw;
   }
   .dipic_3 img:nth-child(2) {
       width: 50vW;
   }
   .dipic_1 img,
   .dipic_2 img {
       width: 30vw !important;
       text-indent: 0 !important;
   }
   .notebook>.slideBox>.dipic_3,
   .notebook>.slideBox>.dipic_4 {
       text-align: center;
   }
   .dipic_4 img:nth-child(1) {
       width: 55VW;
   }
   .dipic_4 img:nth-child(2) {
       width: 55VW;
   }

} .notebook li:after { 

   left: 42px !important;

} .notebook li.act span { 

   left: 42px;

} .notebook .F25, .notebook .F3, .notebook .F7, .notebook .F8{ 

   text-align: center!important;

}