* {
    margin:0 auto; 
    padding:0;
    list-style:none;
    font-family:"맑은 고딕";
    

}
body {
    width: 1200px;
    background-color: #fffbe2; /*연한베이지*/
    
}

a {
    text-decoration: none; 
    color: inherit;
    
}

#clear {
    clear:both;/*float 속성을 끊는다.*/
}

button {
    cursor:pointer;
}

header {
    width:1200px;
    height:100px;
    color: #fff;
}

/*---------------------여기부터 우측 아이콘메뉴*/
#iconmenu {
    position: fixed;
    width: 60px;
    height: 240px;
    margin-left: 1200px;
    margin-top: 30px;
    float: right;
}

.homeicon {
    cursor: pointer;
}

.shopicon {
    cursor: pointer;	
}

#shopboticon {
    display: none;
}

#shopfbicon {
    display: none;
}

#shopinstaicon {
    display: none;
}

#shoptwiticon {
    display: none;
}


.shopbox {
    cursor: pointer;
		width: 430px;
    height: 60px;
}

#searchbox {
    width: 430px;
    height: 60px;
}

.searchicon {
    cursor: pointer;
    float: left;
}

.searchbox {
    float: left;
    width: 300px;
    height: 60px;
    
}


#searchtext {
    border: 2px solid #2c3d24;
    float: left;
    width: 100px;
    margin-top: 15px;
    text-align: center;
    display: none;
    font-weight: bold;
}

#searchbutton {
    width: 50px;
    float: left;
    border: 2px solid #2c3d24;
    background-color: #e9b23d;
    color: #2c3d24;
    margin-top: 15px;
    display: none;
    font-weight: bold;
    margin-left: 2px;
}

.topicon {
    cursor: pointer;
    margin-top: 4px;
}



/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ여기부터 로고*/

#logo {
    float: left;
    width:1200px;
    height:500px;
    /*float: inherit;*/
}

#logo img {
    padding-top: 180px;
    padding-left: 280px;
    width:660px;
    height:140px;
}


nav {
    width:1200px;
    height:30px;
    float:left;
    background-color: #2c3d24;
    color:#222328; /*검정색*/

}

#menu {
    width:1200px;
    float:left;
    margin-top:0px;
    color:#fffbe2; /*검정색*/
    text-align:center;
    
}

#menu>li {
    float:left;
    position:relative;
    transition:all 0.4s;
    
}

#menu>li:hover {
    
    background-color:rgba(233, 178, 61, 1);
    color:#222328; /*검정색*/
        
}

.sub {
    float: left;
    font-size: 100%;
    padding-left: 5px;
    padding-top: 3px;
    height: 26.8px;
    width: 110px;
    background-color: rgba(233, 178, 61, 1);
    color: #222328;
    /*transition:all 0.4s;*/
}

.sub1 {
    float: left;
    font-size: 100%;
    padding-left: 5px;
    padding-top: 3px;
    height: 26.8px;
    width: 110px;
    /*transition:all 0.4s;*/
}

.sub2 {
    float: left;
    font-size: 100%;
    padding-left: 5px;
    padding-top: 3px;
    height: 26.8px;
    width: 110px;
    /*transition:all 0.4s;*/
}

.sub3 {
    float: left;
    font-size: 100%;
    padding-left: 5px;
    padding-top: 3px;
    height: 26.8px;
    width: 110px;
    /*transition:all 0.4s;*/
}

.sub4 {
    float: left;
    font-size: 100%;
    padding-left: 5px;
    padding-top: 3px;
    height: 26.8px;
    width: 110px;
    /*transition:all 0.4s;*/
}


.login {
    margin-left: 380px;
    float: right;
    color: #c1bfbf;
    font-size: 90%;
    padding-left: 5px;
    padding-top: 5px;
    height: 24.8px;
    width: 110px;
    /*transition:all 0.4s;*/
}

.login_bar {
    float: left;
    margin-top: 5px;
    color: #c1bfbf;
    font-size: 90%;
    /*transition:all 0.4s;*/
}

.join {
    
    color: #c1bfbf;
    float: right;
    font-size: 90%;
    padding-left: 5px;
    padding-top: 5px;
    height: 24.8px;
    width: 110.6px;
    /*transition:all 0.4s;*/
}

nav>ul>.join:hover {
    background-color:rgba(233, 178, 61, 1);
    display: block;
}


#foodmenu {
    width: 1200px;
    text-align: center;
    padding-bottom: 10px;
}

#foodmenu a {
    padding: 3px;
}


#menu {
    width: 1200px;
}

footer {
    width:1200px;
    height:150px;
}

#footer_logo {
    width:200px;
    height:100px;
    float:left;
    margin-top: 10px;
}

#copyright {
    width:800px;
    height:50px;
    text-align: center;
    font-size: 70%;
    padding-right: 50px;
    padding-top: 15px; /*패딩은 바깥여백/마진은 안쪽여백*/
}

#sns {
    width:250px;
    height:50px;
    padding-right: 15px;
}

#sns img {
    width: 50px;
    height: 50px;
    margin: 10px;
}

/*-------------------------- 여기서부터 메뉴화면 -------------------------*/

#logo_menu {
    float: left;
    width:1200px;
    height:220px;
    /*float: inherit;*/
}

#logo_menu img {
    margin-top: 80px;
    
    width:330px;
    height:70px;
}

#logo_menu a {
    margin-top: 80px;
    margin-left: 435px;
}

nav {
    width:1200px;
    height:30px;
    float:left;
    background-color: #2c3d24;
    color:#222328; /*검정색*/

}

#menu_menu {
    width:1200px;
    float:left;
    margin-top:0px;
    color:#fffbe2; /*검정색*/
    text-align:center;
    
}

#menu_menu>li {
    float:left;
    position:relative;
    transition:all 0.4s;
    
}

#menu_menu>li:hover {
    
    background-color:rgba(233, 178, 61, 1);
    color:#222328; /*검정색*/
        
}

.sub_menu {
    float: left;
    font-size: 100%;
    padding-left: 5px;
    padding-top: 3px;
    height: 26.8px;
    width: 110px;
    /*transition:all 0.4s;*/
}

.sub1_menu {
    float: left;
    font-size: 100%;
    padding-left: 5px;
    padding-top: 3px;
    height: 26.8px;
    width: 110px;
    /*transition:all 0.4s;*/
}

.sub2_menu {
    float: left;
    font-size: 100%;
    padding-left: 5px;
    padding-top: 3px;
    height: 26.8px;
    width: 110px;
    background-color: rgba(233, 178, 61, 1);
    color: #222328;
    /*transition:all 0.4s;*/
}

.sub3_menu {
    float: left;
    font-size: 100%;
    padding-left: 5px;
    padding-top: 3px;
    height: 26.8px;
    width: 110px;
    /*transition:all 0.4s;*/
}

.sub4_menu {
    float: left;
    font-size: 100%;
    padding-left: 5px;
    padding-top: 3px;
    height: 26.8px;
    width: 110px;
    /*transition:all 0.4s;*/
}


.login_menu {
    margin-left: 380px;
    float: right;
    color: #c1bfbf;
    font-size: 90%;
    padding-left: 5px;
    padding-top: 5px;
    height: 24.8px;
    width: 110px;
    /*transition:all 0.4s;*/
}

.login_bar_menu {
    float: left;
    margin-top: 5px;
    color: #c1bfbf;
    font-size: 90%;
    /*transition:all 0.4s;*/
}

.join_menu {
    
    color: #c1bfbf;
    float: right;
    font-size: 90%;
    padding-left: 5px;
    padding-top: 5px;
    height: 24.8px;
    width: 110.6px;
    /*transition:all 0.4s;*/
}

nav>ul>.join_menu:hover {
    background-color:rgba(233, 178, 61, 1);
    display: block;
}


/*----------------------- 여기부터 메뉴화면 음식메뉴 버튼*/

#foodmenu_menu a {
    width: 1200px;
    text-align: center;
    
}

#orientalimg {
    float: left;
    margin: 10px;
    margin-bottom: 20px;
}

#occidentalimg {
    float: left;
    margin: 10px;
    margin-bottom: 20px;
}

#sideimg {
    float: left;
    margin: 10px;
    margin-bottom: 20px;   
}

#beverageimg {
    float: left;
    margin: 10px;
    margin-bottom: 20px;   
}


.alloriental {
    display: inline;
}

.alloccidental {
    display: inline;
}

.allside {
    display: inline;
}

.allbeverage {
    display: inline;
}

#oriental_menu_name {
    float: right;
    padding-right: 41px;
    margin-top: 80px;
    margin-bottom: 250px;
}

#occidental_menu_name {
    float: right;
    padding-right: 41px;
    margin-top: 80px;
    margin-bottom: 250px;
}

#side_menu_name {
    float: right;
    padding-right: 41px;
    margin-top: 80px;
    margin-bottom: 250px;
}

#beverage_menu_name {
    float: right;
    padding-right: 41px;
    margin-top: 80px;
    margin-bottom: 250px;
}

#ori {
    float: left;
    padding-left: 11px;
    margin-top: 40px;
}

#occi {
    float: left;
    padding-left: 11px;
    margin-top: 40px;
}

#sid {
    float: left;
    padding-left: 11px;
    margin-top: 40px;
}

#bever {
    float: left;
    padding-left: 11px;
    margin-top: 40px;
}

#orientals{
    cursor: pointer;
    
}

#occidentals{
    cursor: pointer;

}

#sides{
    cursor: pointer;

}

#beverages{
    cursor: pointer;

}


#oris1 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}   

#oris2 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
   opacity: 0.3;
}    

#oris3 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
   opacity: 0.3;
}    

#oris4 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
   opacity: 0.3;
}    

#oris5 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
   opacity: 0.3;
}    

#oris6 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
   opacity: 0.3;
}    

#oris7 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
   opacity: 0.3;
}    

#oris8 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
   opacity: 0.3;
}    

#oris9 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
   opacity: 0.3;
}    

#oris10 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
   opacity: 0.3;
}   

#oris11 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
  opacity: 0.3;
}   

#oris12 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
  opacity: 0.3;
}   


#occis1 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}    

#occis2 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}    

#occis3 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}    

#occis4 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}    

#occis5 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}    

#occis6 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}    

#occis7 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}    

#occis8 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}    

#occis9 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}    

#occis10 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}   

#occis11 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}   

#occis12 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}      

#sids1 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}    

#sids2 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}    

#sids3 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}    

#sids4 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}    

#sids5 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}    

#sids6 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}    

#sids7 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}    

#sids8 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}    

#sids9 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}    

#sids10 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}   

#sids11 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}   

#sids12 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}      

#bevers1 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}    

#bevers2 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}    

#bevers3 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}    

#bevers4 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}    

#bevers5 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}    

#bevers6 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}    

#bevers7 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}    

#bevers8 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}    

#bevers9 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}    

#bevers10 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}   

#bevers11 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}   

#bevers12 {
    float: left;
    margin-left: 30px;
    margin-top: 20px;
    opacity: 0.3;
}  



#oris1:hover {
      opacity: 1;
    
}   

#oris2:hover {
    opacity: 1;
}    

#oris3:hover {
    opacity: 1;
}    

#oris4:hover {
    opacity: 1;
}    

#oris5:hover {
    opacity: 1;
}    

#oris6:hover {
    opacity: 1;
}    

#oris7:hover {
    opacity: 1;
}    

#oris8:hover {
    opacity: 1;
}    

#oris9:hover {
    opacity: 1;
}    

#oris10:hover {
    opacity: 1;
}   

#oris11:hover {
    opacity: 1;
}   

#oris12:hover {
    opacity: 1;
}   


#occis1:hover {
    opacity: 1;
}    

#occis2:hover {
    opacity: 1;
}    

#occis3:hover {
    opacity: 1;
}    

#occis4:hover {
    opacity: 1;
}    

#occis5:hover {
    opacity: 1;
}    

#occis6:hover {
    opacity: 1;
}    

#occis7:hover {
    opacity: 1;
}    

#occis8:hover {
    opacity: 1;
}    

#occis9:hover {
    opacity: 1;
}    

#occis10:hover {
    opacity: 1;
}   

#occis11:hover {
    opacity: 1;
}   

#occis12:hover {
    opacity: 1;
}      

#sids1:hover {
    opacity: 1;
}    

#sids2:hover {
    opacity: 1;
}    

#sids3:hover {
    opacity: 1;
}    

#sids4:hover {
    opacity: 1;
}    

#sids5:hover {
    opacity: 1;
}    

#sids6:hover {
    opacity: 1;
}    

#sids7:hover {
    opacity: 1;
}    

#sids8:hover {
    opacity: 1;
}    

#sids9:hover {
    opacity: 1;
}    

#sids10:hover {
    opacity: 1;
}   

#sids11:hover {
    opacity: 1;
}   

#sids12:hover {
    opacity: 1;
}      

#bevers1:hover {
    opacity: 1;
}    

#bevers2:hover {
    opacity: 1;
}    

#bevers3:hover {
    opacity: 1;
}    

#bevers4:hover {
    opacity: 1;
}    

#bevers5:hover {
    opacity: 1;
}    

#bevers6:hover {
    opacity: 1;
}    

#bevers7:hover {
    opacity: 1;
}    

#bevers8:hover {
    opacity: 1;
}    

#bevers9:hover {
    opacity: 1;
}    

#bevers10:hover {
    opacity: 1;
}   

#bevers11:hover {
    opacity: 1;
}   

#bevers12:hover {
    opacity: 1;
}   


/*--------------- 여기는 메뉴 - 푸터*/

footer {
    width:1200px;
    height:150px;
}

#footer_logo {
    width:200px;
    height:100px;
    float:left;
    margin-top: 10px;
}

#copyright {
    width:800px;
    height:50px;
    text-align: center;
    font-size: 70%;
    float: left;
    margin-left: 200px;
    padding-right: 50px;
    padding-top: 15px; /*패딩은 바깥여백/마진은 안쪽여백*/
}

#sns {
    width:250px;
    height:50px;
    padding-right: 15px;
    float: left;
    margin-left: 500px;
}

#sns img {
    width: 50px;
    height: 50px;
    margin: 10px;
}