Team:SSTi-SZGD/css/Safety
.Banner{ width: 100%; height: 500px; background: url(
) no-repeat center center; background-size: 60%; margin: 100px 0 80px 0;}
.Content{ font-size: 2rem;}
.Content .title{ text-align: center; font-size: 3rem; font-weight: 600;}
.Content .subtitle{ text-align: center; font-size: 2.5rem;}
.Content section{ margin: 0 auto 100px auto; float: none;}
.Content section .img{ text-align: center;}
.Content section.Safety_Training .img img{ width: 100%; margin: 5px 0;}
.Content section.GLS{ transition: none;}
.Content section.GLS .content{ margin-top: 20px; padding: 0 100px;}
.Content section.GLS .show{ width: 100%; overflow: hidden; height: 605px; position: relative; cursor: pointer;}
.Content section.GLS ul{ padding: 0 15px; position: absolute;}
.Content section.GLS ul li{ float: left;}
.Content section.GLS ul li .img{ margin-bottom: 10px;}
.Content section.GLS ul li .img img{ width: 60%; margin: 0;}
.Content section.GLS .show span{ display: none; width: 60px; height: 60px; position: absolute; top: 0; bottom: 0; margin: auto;background-repeat: no-repeat; background-size: cover; background-position: center;}
.Content section.GLS .show .prev{ left: 0; background-image: url(
); }
.Content section.GLS .show .next{ right: 0; background-image: url(
); }
@media only screen and (max-width: 767px) { .Banner{ height: 300px; background-size: 80%; margin: 100px 0 0 0;} .Content{ width: 100%; padding: 5%; font-size: 1.8rem;} .Content .title{ font-size: 2.4rem;} .Content section.GLS .content{ padding: 0 50px;} .Content section.GLS ul li .img img{ width: 100%;} .Content section.GLS .show span{ width: 40px; height: 40px;} }
@media (min-width: 467px) and (max-width: 567px) { .Content section.Safety_Training .img img{ width: 80%;} .Content section.GLS .content{ padding: 0 50px;} .Content section.GLS ul li .img img{ width: 75%;} .Content section.GLS .show{ height: 400px;} .Content section.GLS .show span{ width: 45px; height: 45px;} }
@media (min-width: 567px) and (max-width: 767px) { .Content section.Safety_Training .img img{ width: 60%;} .Content section.GLS .content{ padding: 0 60px;} .Content section.GLS ul li .img img{ width: 60%;} .Content section.GLS .show{ height: 400px;} .Content section.GLS .show span{ width: 50px; height: 50px;}
}
@media only screen and (min-width: 768px) { .Content section.Safety_Training .img img{ width: 50%;} .Content section.GLS .show{ height: 400px;} .Banner{ height: 400px;} }