Team:SSTi-SZGD/css/Team

.Banner{ width: 100%; height: 400px; background: url() no-repeat center center; background-size: 50%; margin: 100px 0 0 0;} .Content{ width: 100%; margin: auto; margin: 0 auto 50px auto;} .abstract p{ background: #DCF4FB; border-radius: 10px; padding: 15px 20px; font-size: 1.8rem; float: none; margin: auto;}

.Members{ margin: 30px auto;} .Members .guide{ text-align: center; margin-bottom: 50px;} .Members .guide li{ width: 170px; margin: 10px 5px; cursor: pointer;} .Members .guide li img{ width: 80%; margin-bottom: 15px;} .Members .guide li a{ display: block; color: #333;} .Members .male{ border: 1px solid #00A0E9;} .Members .female{ border: 1px solid #E4007E;} .Members .guide li .duties{ text-align: center; font-size: 1.5rem; font-weight: 600; line-height: 1.4; cursor: text; box-shadow: -1px 2px 12px rgba(0, 0, 0, 0.12); border-radius: 30px; padding: 10px; cursor: pointer;}

.Members .introduction li{ width: 100%; padding: 5%; margin: 10px auto; cursor: pointer; box-shadow: -1px 2px 12px rgba(0, 0, 0, 0.12); border-radius: 10px;} .Members .introduction li .img{ text-align: center;} .Members .introduction li .img img{ border-radius: 100%; width: 80%; margin: auto;} .Members .introduction li .img img:nth-of-type(2){display: none;} .Members .introduction li:nth-of-type(2n)>div:nth-of-type(1){ float: right;} .Members .introduction li:nth-of-type(2n)>div:nth-of-type(2){ float: left;} .Members .introduction li .description{ font-size: 1.6rem; line-height: 1.4; cursor: text;padding-top: 10px;} .Members .introduction li .description .title{ line-height: 3rem;} .Members .introduction li .description .content{ line-height: 2rem; margin-top: 20px;} .Members .introduction li .description span{ font-weight: 600;}

.Teachers{ margin: 100px auto; border: 1px solid #00A0E9; box-shadow: -1px 2px 12px rgba(0, 0, 0, 0.12); border-radius: 30px; padding: 10px; text-align: center;} .Teachers .title{ font-size: 4rem;} .Teachers>div{ margin: 15px 0;} .Teachers img{ width: 100%;} .Teachers p{ font-size: 2rem; margin-top: 5px;}

@media (max-width: 768px) { .Members .introduction li{ padding: 30px 0;} }

@media (min-width: 467px) and (max-width: 567px) { .Members .introduction li .img img{ width: 60%;} }

@media (min-width: 567px) and (max-width: 767px) { .Members .introduction li .img img{ width: 48%;} }

@media only screen and (max-width: 767px) { .Banner{ height: 300px; background-size: 70%;} }

@media (min-width: 768px) { .Members .introduction li .img img{ width: 100%;} }

@media only screen and (max-width: 992px) { .Banner{ margin: 100px 0 0 0;} }

@media (min-width: 1200px) { .Members .introduction li .img img{ width: 80%;} }