@charset "UTF-8";
/* ----------------------------------------------
 * HanbitSoft Infra Development Team
 * 린든상자 이벤트 Stylesheet
 * Author - hsa815@hanbitsoft.co.kr 250923
------------------------------------------------- */
/* CSS Reset
-------------------------------------------------------------- */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
img,
strong,
small,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
select,
input,
button,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
figure,
figcaption {
  margin: 0;
  padding: 0;
  font-size: 100%;
}

img,
fieldset,
button {
  border: 0;
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body,
input,
button,
textarea,
select,
table,
kbd {
  line-height: 1.2;
  font-family: Malgun Gothic, "맑은고딕", "돋움", dotum, Helvetica, sans-serif;
  font-size: 12px;
  color: #000;
}

img {
  vertical-align: middle;
}

ol,
ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: #000;
}

a:hover,
a:focus,
a:active {
  text-decoration: none ;
  color: #333;
}

button,
label {
  cursor: pointer;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption,
legend {
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  visibility: hidden;
}

/* Reserved Class
-------------------------------------------------------------- */
@font-face {
  font-family: 'NanumBarunGothic';
  font-style: normal;
  font-weight: 700;
  src: url('//fastly.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.eot');
  src: url('//fastly.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.eot?#iefix') format('embedded-opentype'), url('//fastly.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.woff') format('woff'), url('//fastly.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.ttf') format('truetype')
 }

.blind {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: -1px;
  width: 1px;
  height: 1px;
}

.clearFix {
  zoom: 1;
}

.clearFix:after {
  content: "";
  display: block;
  clear: both;
}

body {
  width: 100%;
  height: 100%;
  background: #000;
}

#wrap {
  position: relative;
  /* overflow: hidden; */
  width: 100%;
  min-width: 1200px;
  max-width: 2000px;
  margin: 0 auto;
}

#wrap .inner {
  position: relative;
  width: 1100px;
  height: 100%;
  margin: 0 auto;
  font-family: 'NanumBarunGothic', normal;
}

/* 메인헤더 */
header {
  position: relative;
  width: 100%;
  height: 870px;
  background: url(../images/bg_main.jpg) no-repeat 50% 0;
}
.btn_box{
  position: absolute;
  left: 0px;
  bottom: 180px;
}
.btn_box a{
  display: inline-block;
  width: 287px;
  height: 72px;
  margin-right: 12px;
  font-size: 0;
  text-indent: -999px;
  box-shadow: 8px 8px 13px 1px rgb(0, 0, 0);
  cursor: pointer;
}
.btn_box a.btn_info{
  background-image: url(../images/btn_info.png);
}
.btn_box a.btn_buy{
  background-image: url(../images/btn_buy.png);
}
.btn_box a:hover{
  -webkit-animation: vibe 600ms linear forwards;
  animation: vibe 600ms linear forwards;
}
@-webkit-keyframes vibe {
  0% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  20% {
    -webkit-transform: scale(0.97, 1.03);
    transform: scale(0.97, 1.03);
  }
  40% {
    -webkit-transform: scale(1.03, 0.97);
    transform: scale(1.03, 0.97);
  }
  60% {
    -webkit-transform: scale(0.97, 1.03);
    transform: scale(0.97, 1.03);
  }
  80% {
    -webkit-transform: scale(1.03, 0.97);
    transform: scale(1.03, 0.97);
  }
  100% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}

/* 네비-탭메뉴 */
nav{
  position:sticky;
  top: 0;
  width: 100%;
  height: 118px;
  background: url(../images/bg_tab.jpg) no-repeat 50% 0;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
  z-index: 100;
}
nav ul{
  display: flex;
}
nav ul li{
  width: 157px;
  font-size: 0;
  background: url(../images/tab_menu.jpg) no-repeat;
  cursor: pointer;
}
nav ul li a{
  display: block;
  width: 100%;
  height: 100%;
}
nav ul li.menu1{
  background-position: -157px 0;
}
nav ul li.menu2{
  background-position: -314px 0;
}
nav ul li.menu3{
  background-position: -471px 0;
}
nav ul li.menu4{
  background-position: -628px 0;
}
nav ul li.menu5{
  background-position: -785px 0;
}
nav ul li.menu6{
  background-position: -942px 0;
}

nav ul li.menu0:hover,
nav ul li.menu0.active{
  background-position: 0 -118px;
}
nav ul li.menu1:hover,
nav ul li.menu1.active{
  background-position: -157px -118px;
}
nav ul li.menu2:hover,
nav ul li.menu2.active{
  background-position: -314px -118px;
}
nav ul li.menu3:hover,
nav ul li.menu3.active{
  background-position: -471px -118px;
}
nav ul li.menu4:hover,
nav ul li.menu4.active{
  background-position: -628px -118px;
}
nav ul li.menu5:hover,
nav ul li.menu5.active{
  background-position: -785px -118px;
}
nav ul li.menu6:hover,
nav ul li.menu6.active{
  background-position: -942px -118px;
}

/* 보상별 섹션 */
.section0 {  
  height: 1441px;
  background: url(../images/bg_con0.jpg) no-repeat 50% 0;
}
.section1 {  
  height: 2802px;
  background: url(../images/bg_con1.jpg) no-repeat 50% 0;
}
.section2 {
  height: 882px;
  background: url(../images/bg_con2.jpg) no-repeat 50% 0;
}
.section3 {  
  height: 585px;
  background: url(../images/bg_con3.jpg) no-repeat 50% 0;
}
footer{
  height: 707px;
  background: url(../images/bg_footer.jpg) no-repeat 50% 0;
}

/* 기본 개봉 보상 */
.item_basic{
  position: relative;
  padding: 270px 40px 0;
  animation: all 1s;
}
.item_basic ul{
  display: flex;
  flex-wrap: wrap;
}

.item_basic ul li{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 12.5%;
  height: 125px;
  text-align: center;
  margin-bottom: 20px;
}
  /* 아이템 style */
.item{
  position: relative;
  width: 59px;
  height: 59px;
  border: solid 5px transparent;
  background-color: #000;
  border-image: linear-gradient(180deg, rgba(255,243,217,1) 0%, rgba(209,186,134,1) 14%, rgba(255,255,255,1) 50%, rgba(233,191,95,1) 51%, rgba(255,243,217,1) 100%);
  border-image-slice: 1;
  box-shadow: 0px 1px 1px 0 rgba(0,0,0,0.2);
}
.item>img{
  width: 100%;
}
.item_txt{
  margin-top: 10px;
  font-size: 12px;
  color: #000;
  line-height: 1.2;
  text-align: center;
  letter-spacing: -1px;
  word-spacing: 0.5px;
}
.item_txt b{
  display: block;
  color: #ab0000;
}
.ico_new{
  position: absolute;
  top: -25px;
  left: -2px;
  width: 63px;
  height: 16px;
  font-size: 0;
  background: url(../images/ico_new.png) no-repeat;
}
.ico_event{
  position: absolute;
  top: -5px;
  left: -5px;
  width: 45px;
  height: 44px;
  font-size: 0;
  background: url(../images/ico_event.png) no-repeat;
}
.item .ico_more{
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 17px;
  height: 17px;
  background: url(../images/ico_more.png) no-repeat;
  font-size: 0;
  cursor: pointer;
  /* z-index: 20; */
}
.item .ico_more.show{
  z-index: 100;
}
.item .ico_more .popup{
  display: none;
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}
.item .btn_link{
  display: block;
  width: 200px;
  height: 20px;
  position: absolute;
  bottom: 120px;
}

.item .popup.show{
  display: block;
}
.item .ico_more:hover .popup{
  display:block;
}

  /*================= */

/* N개 개봉 보상 */

  /* 보이지않는탑라인 */
.top_line{
  position: absolute;
  width: 100%;
  top: -80px;
  /* border: solid red; */
}
.item_count{
  position: relative;
  padding: 240px 40px 0;
}
.item_count ul{
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 20px;
}
.item_count ul li{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 12.5%;
  height: 125px;
  text-align: center;
}
.item_count .one{
  width: 100%;
}
.item_count .two{
  width: 50%;
}
.item_count.count_sec{
  padding: 210px 50px 0;
}
/* 구간별 보상 */
.item_section{
  position: relative;
  padding: 245px 80px 0;
}
.item_section .section_title{
  margin-bottom: 20px;
  font-size: 16px;
  text-align: center;
  color: #c50000;
}
.item_section ul{
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
.item_section ul li{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 156px;
  height: 205px;
  text-align: center;
  background-color: #d8d2cb;
  border: solid 1px #232323;
  border-right: none;
}
.item_section ul li:last-child{
  border: solid 1px #232323;
}
.item_title{
  width: 100%;
  padding: 12px 0;
  margin-bottom: 31px;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  background-color: #3c3c3c; 
}
.item_section ul li:nth-child(2n) .item_title{
  background-color: #232323;
}
.item_title .item{
  margin-top: 150px;
}
.btn_check{
  display: block;
  position: absolute;
  width: 428px;
  height: 63px;
  left: 31%;
  bottom: 100px;
  background: url(../images/btn_check.png) no-repeat;
  font-size: 0;
  transition: all 800ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.btn_check:hover{
  transform: translateY(-15%);
}
footer ul{
  padding-top: 130px;
}
footer li{
  padding: 10px;
  color: #a7a7a7;
  font-size: 12px;
  font-family: 'NanumBarunGothic';
  text-align: center;
  line-height: 1.3;
}