@font-face{
    font-family: 'Metropol';
    src: url('../font/Metropol.otf');
}
@font-face{
    font-family: 'Montserrat';
    src: url('../font/Montserrat-Regular.ttf');
}


html{ height: 100%; }
body{ height: 100%; margin: 0; display: flex; align-items: center; justify-content: center; }
.content {
    background-color: rgba(255, 255, 255, .8); border-radius: .25em; box-shadow: 0 0 .25em rgba(0, 0, 0, .25);
    box-sizing: border-box; text-align: center;
    background-image: url('../image/bg.png'); background-size: 200px;
    background-repeat: repeat;
    margin-left: auto;
    margin-right: auto;
    width: 90%; max-width: 1200px;
    position: relative;
}
.main-title{ font-family: 'Metropol'; font-weight: 400; font-size: 36px; padding: 45px;  }
.main-info{ font-family: 'Montserrat'; font-weight: 400; font-size: 18px; letter-spacing: 1px; margin: 0 45px 0 45px; }
.logo-wrapper{ display: flex; justify-content: center; }
.logo-item{ width: 100%; height: 70px; padding: 45px 0; transition: .4s; }
.logo-item:hover{ background-color: rgba(181, 177, 142, 0.5); }
.logo-item img{ height: 100%;  max-width: 100%; margin: 0 15px; }
.bottom-wrapper{ height: 150px; display: flex;  }
.bottom-wrapper .item{ width: 100%; height: 100%; margin: auto; position: relative; }
.bottom-wrapper .item .item-bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; mix-blend-mode: overlay; }
.bottom-wrapper .item img{ height: 100%; width: 100%; object-fit: cover; filter: contrast(.3); }
.bottom-wrapper .item-1 .item-bg{ background-color: #ff6979; }
.bottom-wrapper .item-2 .item-bg{ background-color: #ffd358; }
.bottom-wrapper .item-3 .item-bg{ background-color: #33c5b6; }
.copyright{ position: absolute; bottom: -30px; left: 0; width: 100%; opacity: .6; }
.copyright a{ text-decoration: none; font-family: 'Monserrat'; font-weight: 600; color: inherit; }
.copyright a:hover{ text-decoration: underline; }




.bg{
    animation: slide 3s ease-in-out infinite alternate; background-image: linear-gradient(-60deg, #ffd358 50%, #33c5b6 50%);
    bottom: 0; left: -50%; opacity: .5; position: fixed; right: -50%; top: 0; z-index: -1;
}
.bg2{ animation-direction: alternate-reverse; animation-duration: 4s; }
.bg3{ animation-duration: 5s; }
@keyframes slide {
    0% {
        transform: translateX(-25%);
    }
    100% {
        transform: translateX(25%);
    }
}



@media only screen and (max-width: 768px){
    .content{ margin-top: 30px; margin-bottom: 30px; }
    body{ display: block; }
    .logo-wrapper{ flex-direction: column; }
    .copyright{ position: static; padding: 15px 0; }
    .logo-item{ padding: 30px 0; }
    .logo-wrapper{ padding: 15px 0; }
    .main-title{ margin: 0; }
}