header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption{display:block;}
*, header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption{margin:0; padding:0;}
* { margin: 0 auto; padding: 0; vertical-align: top; }
li { list-style: none; }
a { text-decoration: none; }
img { border: 0; max-width: 100%; box-sizing: border-box; }
body { font-family: 'LotteMartHappy',Tahoma, Arial, sans-serif; font-size:16px;}
#head { width: 100%; height: auto; margin: 0 auto; text-align: center;  }
#top { width: 1200px; height: auto; margin:0 auto; }
#top_line { width: 100%; height: 5px; background: #CEF279; }
#top_logo { width: 100%;  height: 200px;  }
#top_nav { width: 1200px; height: 55px; position: relative;  z-index: 999; text-align: center;margin-bottom: 5px;}
#top_nav ul { overflow: hidden;  margin: 0 auto; }
#top_nav ul li { float: left; width: 14.28%; height: auto; text-align: center; }
#top_nav ul li a { display: block; font-size: 1.2em; color:#1D8B15; font-weight: bolder; }
#top_nav ul li a:hover { color: #333; }
#top_nav ul li ul {  width: 500%; margin: 0 auto; text-align:left; overflow: hidden; margin-top: 10px; }
#top_nav ul li ul li { display: none; float:left; width: 80px; background:#FFF; text-align: center;}
#top_nav ul li ul li a { display: block; font-size: 0.9em; color: #333;  }

#main_img { width: 100%; height: auto; background: #CEF279;  text-align: center;  box-sizing: border-box;}
  
.cycle-slideshow, .cycle-slideshow * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.cycle-slideshow { width: 1200px; min-width: 250px; max-width: 1200px; margin: 10px auto; padding: 0; position: relative;}
.cycle-slideshow div.slide { width: 100%; height: 100% }
.cycle-slideshow img { 
    /* 
    some of these styles will be set by the plugin (by default) but setting them here
    helps avoid flash-of-unstyled-content
    */
    position: absolute; top: 0; left: 0;
    width: 100%; padding: 0; display: block;
}
/* in case script does not load */
.cycle-slideshow img:first-child {
    position: static; z-index: 100;
}
.cycle-pager { 
    text-align: center; width: 100%; z-index: 500; position: absolute; top: 15px; overflow: hidden; 
}
.cycle-pager span { 
    font-family: arial; font-size: 50px; width: 16px; height: 16px; 
    display: inline-block; color: #ddd; cursor: pointer; 
}
.cycle-pager span.cycle-pager-active { color: #D69746;}
.cycle-pager > * { cursor: pointer;}

#con_top { width: 1200px; height: auto; overflow: hidden;  margin: 0 auto; text-align: center;}
#con_top ul { float: left; width: 33.3%; height: auto; margin: 100px 0 100px 0 }
#con_top ul li  { width: 100%; height: auto; text-align: center; margin-top: 20px;   }
#con_top ul li img:hover {opacity: 0.5; }
#con_top ul li a { font-size: 1em; font-weight: bold; }
#con_top ul li a span { display: block; font-size: 0.8em; color: #333; font-weight: normal; margin-bottom: 20px;}
#con_middle { width: 100%; height: auto; margin: 0 auto; text-align: center; background: #E4F7BA}
#con_middle_title { width: 100%; height: 100px; }
#con_middle_title a { display: block; height: 100px; line-height: 120px; font-size: 1.5em; color: #333; font-weight: bolder; }
#con_middle_con1 { width: 1200px; height: auto; margin: 0 auto;  overflow: hidden; }
#con_middle_con1 ul { float: left; width:  30%;  height: auto; margin: 1.6666%; }
#con_middle_con1 ul li { width: 100%; height: auto;  margin-bottom: 20px; 
            font-size: 0.8em; color: #333; }
#con_middle_con1 ul li img:hover {opacity: 0.8; }
#con_middle_con1 ul li a { font-size: 1.25em; color: #333; font-weight: bolder; }
#con_bottom { width: 100%; height: auto; margin: 0 auto; background: #333; padding: 20px 0 20px 0; }
#con_bottom #con_cs { width: 1200px; height: auto; overflow: hidden; }
#con_bottom #con_cs  ul { float: left; width:48%; margin: 1%; height: auto; }
#con_bottom #con_cs #con_cs_title a {display: block; margin-bottom: 5px;  padding-bottom: 5px;font-size: 1em; font-weight: bolder; color: #FFF; border-bottom: 1px solid #FF0000; }
#con_bottom #con_cs #con_cs_title_c a {display: block; margin-bottom: 5px;  padding-bottom: 5px;font-size: 1em; font-weight: bolder; color: #000; border-bottom: 1px solid #FF0000; }
#con_bottom #con_cs  ul li a { display: block; font-size: 1em; color: #FFF; padding: 10px; }
#con_bottom #con_cs #con_cs_reservation a { font-size: 1em; font-weight: bolder;  margin-top: 5px; padding: 10px; background: #616161;  ;}
#footer { width: 1200px; height: auto; margin: 0 auto;  }
#btm_nav { width: 100%; height: auto;  padding: 20px;  }
#btm_nav ul { overflow: hidden; width: 45%;   }
#btm_nav ul li { float: left; height: auto;  text-align: center;}
#btm_nav ul li a { font-size: 0.8em; color:#333; font-weight: bold; }
#btm_add { width: 100%; margin: auto; text-align: center; }
#btm_add p { display: block; font-size: 0.8em; color: #333;  font-weight: bold; margin-bottom: 20px;}
#btm_add a { display: block; width:10%; font-size:0.8em; background:#333; padding:3px;color:#FFF;}


#m_logo {display:none; width: 100%; height: auto; margin: 0 auto; overflow: hidden; }
#m_logo #tel{float: left; width: 10%; line-height: 100%; margin-top:5px;  padding-left:2%;}
#m_logo #m_top_logo{float: left;  width: 76%;  }
#m_logo #m_menu{display:block;float: left; width: 10%;  margin-top:5px; padding-right:2%;}

#side_nav { display: block; width: 240px; height: 100%; margin: 0 auto; padding-top: 45px;  position: absolute; z-index: 999; top: 0; left:-300px; background:#FFF}
#snav {display: block; width: 234px; margin: 0 auto;  }
#snav > li > a { display: block; padding: 16px 18px; font-size: 1em; color: #333; text-decoration: none; border-bottom: 1px solid #212121;background:#FFF;}
#snav > li > a:hover, #snav > li > a.open { color: #333;border-bottom-color: #384f76; background-color: #CEF279; }
#snav li ul { display: none; background: #FFB2D9; }
#snav li ul li a { display: block; background: none; padding: 10px 0px; padding-left: 30px; font-size: 0.875em; text-decoration: none; font-weight: bold; color: #FF000; }
#snav li ul li a:hover { background: #FFBB00; }

#full {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 800; background: transparent;  display:none;}


#m_top_nav2 {display: none; width: 100%; height: auto; margin:0 auto; }
#m_top_nav2 ul{ overflow: hidden; }
#m_top_nav2 ul li { float: left; width: 33.333%; height: 30px; line-height:30px;
border: 1px solid #333; webkit-box-sizing: border-box;box-sizing:border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box; 
}
#m_top_nav2 ul li a {font-size:1em; color:#333; }






/*------------------------------------------------------------------*/
@media screen and (max-width: 1200px){
#top { width: 100%; }
#top_nav { width: 100%;} 
.cycle-slideshow { width: 100%;max-width: 100%; }
#con_top { width: 100%;}
#con_middle_con1 { width: 100%;}
#con_bottom #con_cs { width: 100%;}
#footer { width: 100%;  }
}

@media screen and (max-width: 700px){
html, body {font-size:12px;}
#top_logo { display: none;}
#top_nav { display: none;}
#m_logo { display: block}
#m_top_nav2 {display: block;}
.cycle-slideshow {margin:0;}
#con_top{overflow: none;}
#con_top ul {float:none; width: 80%; margin:30px 0 30px 0;margin:0 auto; text-align:center;}
#con_middle_con1 {overflow:none;}
#con_middle_con1 ul { float: none; width:80%;margin:10%;}
#con_bottom #con_cs {overflow:none;}
#con_bottom #con_cs ul {float:none; width: 96%;margin: 2%; }
#btm_nav { display:none;}

}