Team:ZJU-China/css/home/ZJU-style2

.main{ width: 90%; margin: 0 auto; position: relative; } .container > header{ margin: 10px; padding: 20px 10px 10px 10px; position: relative; display: block; text-shadow: 1px 1px 1px rgba(0,0,0,0.2);

   text-align: center;

} .container > header h1{ font-size: 32px; line-height: 32px; margin: 0; position: relative; font-weight: 300; color: #777; text-shadow: 1px 1px 1px rgba(255,255,255,0.7); } .container > header h2{ font-size: 14px; font-weight: 300; font-style: italic; margin: 0; padding: 15px 0 5px 0; color: #888; text-shadow: 1px 1px 1px rgba(255,255,255,0.9); }

.ch-item {

   width: 100%;
   /* position: static; */
   height: 100%;
   /* border-radius: 50%; */
   position: relative;
   cursor: default;
   /* box-shadow: inset 0 0 0 0 rgba(200,95,66, 0.4), inset 0 0 0 16px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1); */
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;

background-repeat: no-repeat;

   background-position: center;

background-size:auto 40px; }

.ch-img-1 {

background-image: url(); }

.ch-img-2 {

   background-size: 160px 50px; 

background-image: url(); }

.ch-img-3 {

background-image: url(); }

.ch-img-4 { background-image: url(); } .ch-info { position: absolute;

   width: 210%;
   height: 250px;
   margin-top: -60px;
   margin-left: -9px;
   border-radius: 2em;

   opacity: 0;
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-backface-visibility: hidden;
   background-color: #FFFFFF;
   z-index:1000;

}

.ch-info h2 {

   font-size: 30px;
   color: red;
   font-family: "gennifer", Helvetica, sans-serif;
   padding: 0;

}

.ch-info p { font-size: 16px;

   text-align: justify;
   text-justify: inter-word;
   padding: 0 35px;
   font-family: "gennifer", Helvetica, sans-serif;
   margin-top: 10px;

}

.ch-info p a { display: block; color: #fff; color: rgba(255,255,255,0.7); font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif; }

.ch-info p a:hover { color: #fff222; color: rgba(255,242,34, 0.8); }

.ch-item:hover { /* box-shadow: inset 0 0 0 110px rgba(200,95,66, 0.4), inset 0 0 0 16px rgba(255,255,255,0.8), 0 1px 2px rgba(0,0,0,0.1); */ }

.ch-item:hover .ch-info { opacity: 1;

-webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .ch-grid {

   margin: 20px 0 0 0;
   padding: 0;
   list-style: none;
   display: block;
   text-align: center;
   width: 100%;
   margin-top: 0px;

}

.ch-grid:after, .ch-item:before { content: ;

   display: table;

}

.ch-grid:after { clear: both; }

.ch-grid li {

   width: 49%;
   height: 90px;
   position: static;
   display: inline-block;
   /* margin: 20px; */

}