@charset "utf-8";
/*css document*/
/*이 스타일값은 641px이상일때의 화면을 기준으로 한다. 즉 일반적인 화면에서 사용되는 css이다.*/
/*아래에 미디어 쿼리값을 적용하여 따로 적용한다.*/

::-webkit-scrollbar {
    width: 16px;
}

::-webkit-scrollbar-track {
    background-color: rgba(0, 128, 0, 0.47);
}

::-webkit-scrollbar-thumb {
    background-color: yellow;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/*이 기능이 필요한 이유는 여러가지 이유로 이미지 스크롤바가 짤릴때 제대로 된 스크롤 범위를 알기 위함이다.*/

::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
    width: 16px;
    height: 16px;
    background-image: url(../01.img/favicon.png);
    background-size: 100%;
    background-position: center center;
    background-color: white;
}

#contanier {
    margin-top: 5vh;
    height: 700px !important;
}

.order_menu {
    width: 240px;
    height: 700px;
    background-color: aqua;
    float: left;
    overflow-y: auto;
}

.order_menu .blue {
    color: blue;
}

/*나중에 글을 다 쓴다면 모르겠지만 지금은 임시적으로 하는것이므로 글이 써진 두개만 파란색으로 표시해서 알려준다.*/

.order_menu .orderon {
    display: block;
}

.order_menu img {
    width: 100%;
    padding: 20px 0;
    height: auto;
}

.order_menu li,
.order_menu h1 {
    text-align: center;
}

.goyang{
  font-family: "고양체", "나눔고딕";
    src: url("../03.font/Goyang.ttf"), url("../03.font/NanumGothic.woff");
    font-size: 22px;
  
}







/*-------------------------------미디어쿼리 640px----------------------------------------------*/
@media screen and (max-width:1199px) {

    .wrappage {
        width: 95%;
    }

    .order_menu {
        width: 100%;
        font-size: 16px;
        background-color: aliceblue;
        height: auto;
    }


    .container {
        width: 100%;
    }

    iframe {
        width: 100%;
    }

}