@charset "utf-8";

#wrap > * {
    padding: 0;
    /*    margin: 0;*/
    box-sizing: border-box;
    font: 13px "맑은 고딕", sans-serif;
}

#wrap > *::selection {
    background: black;
    color: white;
}

#wrap {
    width: 100% !important;
    margin: 0 auto;
}

#wrap > h1 {
    text-align: center;
    font-size: 2rem;
    font-weight: bolder;
    padding: 2%;
    background: black;
    color: white;
    margin-top: 2.5%;
}

#wrap > h2 {
    text-align: center;
    font-size: 1.5rem;
    padding: 2%;
    font-weight: bold;
    margin:0 1% 1%;
}

#wrap > h2:before,#wrap > h2:after {
    font-size: 1.5rem;
    font-weight: bold;
    content: '─';
    display: inline-block;
}

#wrap > hr {
    width: 65%;
    margin: 5% auto;
    position: relative !important;
    visibility: visible;
}

#wrap > .container {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    height: 200px;
    align-items: center;
    background: #dbe6fd;
}

#wrap > .container > .box {
    width: 150px;
    padding: 50px 0;
    text-align: center;
    background: #293b5f;
}

#wrap > .container > .box:hover {
    transform: scale(1.1, 1.1);
    border: 3px solid white;
}

#wrap > .container > .box > span {
    font-size: 1.2rem;
    font-weight: bold;
    color: yellow;
}

@media screen and (max-width:480px) {}