html, body { padding: 0; margin: 0; position: relative; height: 100%; }
ul, li { list-style: none; margin: 0; padding: 0;}
a, a:hover, a:focus, a:active { 
  color: #333;
  text-decoration: none;
  background-color: transparent;
}

.hidden {height:100%; min-height:100%; overflow:hidden !important; touch-action:none;}

.scrollhide { opacity: 0; transition : opacity 0.5s; }
.scrollview { opacity: 1; transition : opacity 0.5s; }

header { height: 60px; position: fixed; width: 100%; top: 0; z-index:1010; background: #000;}
header #title { display: inline-block; line-height: 30px;}
header #title a { color: #fff; display: inline-block; position: absolute; left: 50%; transform: translateX(-50%); font-size: 20px; padding-right: 30px; z-index: 1100; }
header #title a:before { content: ""; position: absolute; width: 16px; height: 16px; top: 8px; right: 0px; z-index: -1; background: url('/assets/images/select_arrow.png') 50% 50% no-repeat; background-size: 16px; transform: rotate(0deg); transition-duration: 500ms; }
header #title a.click:before { transform: rotate(180deg); transition-duration: 500ms; }

header #catalog_list { position: absolute; background: #dedede; top: 50px; left: 50%; transform: translateX(-50%); font-size: 20px; padding: 0; height: 0; overflow: hidden; transition-duration: 500ms;  z-index: 1100;  width: 65vw; }
header #catalog_list.listview { max-height: 300px; height: initial; overflow: scroll; transition-duration: 500ms; }
header #catalog_list ul { padding: 15px; }
header #catalog_list li { padding: 10px 5px; border-bottom: 1px solid #000; font-size: 16px; }
header #catalog_list li:last-child { border: 0px; }
.list_bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  display: none;
  z-index: 1000;
}



footer { height: 60px; position: fixed; width: 100%; bottom: 0; z-index:1000; background: #000; }
footer #title { display: inline-block; color: #fff; margin-top: 30px; margin-left: 10px; }
footer #title img { height: 5px; margin: 10px; }
footer #logo { display: inline-block; float: right; }
footer #logo img { height: 30px; margin: 15px; }
footer #goTop { position: absolute; bottom: 90px; right: -50px; opacity: 0; transition-duration: 1000ms; }
footer #goTop.viewup { right: 20px; opacity: 1; transition-duration: 1000ms; }
footer #goTop a { background: #ffffff86; border-radius: 50%; width: 20px; height: 20px; display: inline-block; text-align: center; padding: 10px; box-shadow: 3px 3px 3px #bdbdbd77;}
footer #goTop a img { height: 20px; }
footer #kakaogift { position: absolute; bottom: 150px; right: -50px; opacity: 0; transition-duration: 1000ms; }
footer #kakaogift.viewup { right: 20px; opacity: 1; transition-duration: 1000ms; }
footer #kakaogift a { background: #ffffff86; border-radius: 50%; width: 20px; height: 20px; display: inline-block; text-align: center; padding: 10px; box-shadow: 3px 3px 3px #bdbdbd77;}
footer #kakaogift a img { height: 20px; }

.menu_btn{
  right: 0;
  position: absolute;
  padding: 18px;
  display: inline-block;
}
.menu_bg{
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  display: none;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 1050;
}
.sidebar_menu{
  display: none;
  width: 225px;
  height: 100%;
  background: rgba(244, 244, 244, 1);
  position: fixed;
  top:0;
  right: -225px;
  z-index: 1200;
  overflow-y: auto;
}
.close_btn{
  width: 90%;
  height: 20px;
  margin:10px 10px 5px 10px;  
  text-align: right;
}
.close_btn > a{
  display: inline-block;
  height: 100%;
}

.close_btn img { width: 18px; }

.top_margin { margin-top: 60px; }

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper {
  width: 100%;
  height: calc(100% - 120px);
  margin-top: 60px;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}