*{box-sizing: border-box}
body{font-size:.9em;font-family: 'Noto Sans KR', sans-serif}
.wrap{width: 29.375%;margin: auto}
button{cursor: pointer;}


.tophead{width: 100%;height: 83px;background: #0095e1;padding: 1% 6%}
.tophead h1{width: 43.971%;height: 49px;background:url(../01_14/img/logo.png)no-repeat 0 0;background-size: contain;float:left;vertical-align: top}
.tophead ul{float:right;font-size: 1.3em}
.tophead li{display:inline-block;width: 90px;line-height: 1;text-indent: 10px;padding: 8% 4%;background: #fff;color:#666;border-radius: 10px;cursor: pointer;}
.tophead li.on{background: #fb3b51;color: #fff}

.menu{width: 100%;background-color: #212830;color: #fff;}
.menu h3{font-weight: bold;}
.inwrap{padding: 1.5%;width: 29.375%;margin: auto;overflow: hidden;}
.slide .inslide{display: none;}
.slide .inslide.on{display: block;}
.menu ul{float: left;;margin-left: 3%;margin-top: 3%;vertical-align: top;width:25%}
.menu li.on{color: rgb(190, 190, 0)}
.menu h3.on{color: rgb(190, 190, 0)}
.menu li.now{color: yellow}
.menu h3.now{color: yellow}
.menu h3{font-size: 1.4em}
.menu li{padding: 1% 0;cursor: pointer;}

.login{width: 100%;background-color: #212830;color: #fff;padding: 24px;display: none;}
.login.on{display: block;}
.login .loginbox{width: 100%;height: 40px;}
.login h3{padding: 12px 0}
.login .loginclick{width: 100%;background: #fb3b51;padding: 12px;font-weight: bold;margin: 12px 0}
.login button{font-size:20px;color: #fff;border: none}

section{padding: 3% 0;background: #eee;}
section h2{text-align: center;padding-top: 1.5%;font-size: 1.8em;color: #767067;}

.topname{width: 100%;text-align: center}
.content{width: 90%;box-shadow: 3px 3px 6px #666;margin: 40px auto}
.conimg{width: 100%;overflow: hidden}
.conimg img{width: 100%;float: left;transition: all .4s ease}
.conimg img.on{transform: scale(1.2)}
.conbar{width: 100%;background: #fff;line-height: 3;overflow: hidden;font-size: 1.3em}
.conbar .itemname{float: left;text-indent: 1.5%}
.conbar .openarea{float:right}
.openarea li{float: left}
.openarea .price{padding-right: 12px}
.openarea .openbtn{width: 75px;background: #fb3b51;color: #fff;text-align: center;cursor:pointer}
.openbtn.on{background: #0095e1}
.conopen{background: #0095e1;color: #fff;display: none;}
.conopen.on{display: block;}
.conopen .text{padding: 1.5%;font-size: 1.2em;line-height: 1.5}
.conside{width: 100%;padding: 1.5%}
.conside h3{padding: 12px 0; font-size:1.4em}
.conside{width: 100%;}
.conside ul{width: 100%;}
.conside li{display: inline-block;width: 24%;text-align: center;padding :12px 0;background: #212830;cursor: pointer;}
.conside li.on{background: #fb3b51}
.addbtn{position: relative;width: 100%;font-size: 20px;background: #fb3b51;color: #fff;border: none;padding: 12px 0}
.addbtn::before{content: '';background: rgba(0,0,0,.8);position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 10;cursor: auto}
.addbtn.on::before{display: none}

.conopen span{font-size: 1.2em;color: #fb3b51;text-shadow:.5px .5px #b11d2e}

footer{width: 100%;border-top: 1px solid #666;text-align: center;}
footer .order{width: 100%;font-size: 1.5em;}
footer h3{padding: 16px}
footer .sns{text-indent: -9999px}
footer .sns ul{display: flex;justify-content: center}
footer .sns li{margin: 16px 8px;cursor: pointer;}
footer .sns li:nth-child(1){background: url(../01_14/img/spr_ico.png)no-repeat;background-position: -280px -390px;width: 34px;height: 33px;}
footer .sns li:nth-child(2){background: url(../01_14/img/spr_ico.png)no-repeat;background-position: -320px -390px;width: 34px;height: 33px;}
footer .sns li:nth-child(3){background: url(../01_14/img/spr_ico.png)no-repeat;background-position: -360px -390px;width: 34px;height: 33px;}
footer .sns li:nth-child(4){background: url(../01_14/img/spr_ico.png)no-repeat;background-position: -420px -390px;width: 34px;height: 33px;}
footer .site ul{margin: 16px 0;display: flex;justify-content: center}
footer .site li{padding: 1% 2%;}
footer ul:first-child li{font-size: 1.3em}
footer ul:last-child li{float: left;}
.copyright{margin-left: 5%}

@media only screen and (max-width: 570px) {
    .wrap{width: 100%;margin: auto}
    .tophead{height: 63px;}
    .inwrap{width: 100%;margin: auto}
    body{font-size: .5em}
    .tophead{padding: 2% 6%}
    .conbar,.topname,.tophead li{font-size: 1.5em}
    .conopen .text{font-size: 1.6em}
    footer{font-size: 1.3em}
}