@charset "utf-8";

html {
    font-size: 312.5% !important;
}

.con-img{
    width: 100%;
}
.wrap {
    width: 100%;
    margin: 0 auto;
    background-color:#013893;
    background-image:url(../images/dot.png);
    background-repeat:no-repeat;
    background-position:center top;
}
.center {
    margin: 0 auto;
    width: 1200px;
}


.con-wrap h1 {
    padding: 21% 0 3%;
    color: #ffffff;
    font-size: 1.45rem;
    text-align: center;
}
.con-wrap a{
    display: block;
    margin: 0 auto 12%;
    width: 20%;
}


.items {
    text-align: center;
}
.items h2 {
    text-align: center;
    margin: 20px 0;
}
.items h2 img {
    display: inline-block;
    width: 1010px;
}

.contact{
    margin-top: 8%;
}
.item {
    display: inline-block;
}

.info {
    color: #ffffff;
    padding: 0 0 10%;
    line-height: 1.1;
}
.info p {
    font-size: 0.7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 35px;
}
.info .btn{
    width: 3.55rem;
    height: 1rem;
    margin: 0 auto;
    color: #ffffff;
    font-size: 0.7rem;
    background-color: #000475;
    border-radius: 10px;
    line-height: 1rem;
}



@media(max-width:768px){
    .wrap{
        width: 100%;
        background-size: 100% auto;
    }
    .center{
        width: 100%;
    }
    .con-wrap h1{
        padding: 13% 0 5%;
        font-size: 0.4rem;
    }
    .con-wrap a {
        margin: 0 auto 6%;
    }
    .con-wrap a img{
        width: 100%;
    }
    .items h2 {
        margin: 0;
    }
    .items h2 img{
        width: 68%;
    }
    .item a{
        width: 45%;
        margin: 0 1% 10px;
        border-width: 2px;
    }
    .info {
        padding: 0 0 5%;
    }
    .info h3{
        font-size: 19px;
    }
    .info p {
        font-size: 0.3rem;
        margin-top: 6%;
    }
    .info .btn {
        width: 1rem;
        height: 0.5rem;
        font-size: 0.2rem;
        line-height: 0.5rem;
    }
    .contact {
        margin-top: 2%;
    }
}