@import url('./reset.css');
@import url('../font/nanumgothic.css');

* {
   font-family: 'Nanum Gothic', sans-serif;
}

html {scroll-behavior: smooth; overflow-x: hidden;}

/* ---------- 디바이스 : PC ---------- */
#wrap img {width: 100%;}
#wrap a {font-size: 0;}
#wrap .hidden {display: none; opacity: 0; visibility: hidden;}

#wrap .pc {display: block !important;}
#wrap .mo {display: none !important;}

.header {position: relative;}

.logo {display: flex; justify-content: space-between; align-items: center; position: absolute; top: 1.7%; width: 100%; padding: 0 19.8%; box-sizing: border-box; z-index: 100;}
.logo .logo_item {width: 22%;}

/* 탭 리스트 : 버튼 */
.tab {position: sticky; top: 0; z-index: 50;}
.tab .tab_list {display: flex; justify-content: center; align-items: baseline; z-index: 20;}

.tab .tab_item,
.tab .tab_item.active {display: block; width: 18.5vw; height: 4.7vw; background-repeat: no-repeat; background-position: top center; background-size: 100%; transition: 0.1s;}
.tab .tab_item:nth-child(1) {background-image: url('../images/pc/tab1.png'); margin-right: -1px;}
.tab .tab_item:nth-child(2) {background-image: url('../images/pc/tab2.png');}
.tab .tab_item:nth-child(3) {background-image: url('../images/pc/tab3.png'); margin-left: -1px;}
.tab .tab_item.active:nth-child(1),
.tab .tab_item:nth-child(1):hover {background-image: url('../images/pc/tab1_active.png');}
.tab .tab_item.active:nth-child(2),
.tab .tab_item:nth-child(2):hover {background-image: url('../images/pc/tab2_active.png');}
.tab .tab_item.active:nth-child(3),
.tab .tab_item:nth-child(3):hover {background-image: url('../images/pc/tab3_active.png');}

.tab .tab_roof {position: absolute; top: 100%; left: 0; z-index: 10;}

/* 탭 콘텐츠 : 이벤트 */
.event_wrap {display: none; position: relative;}
.event_wrap.active {display: block;}

.event_wrap .content_inner {position: relative;}
.event_wrap .content_inner .cont_btn {position: absolute; display: block; transition: 0.05s;}

.event_wrap .content_inner .cont_obj {position: absolute; display: block;}
.event_wrap .content_inner .obj1 {width: 17.5vw !important; top: -4vw; left: 0; z-index: 60;}
.event_wrap .content_inner .obj2 {width: 16.2vw !important; top: -4.5vw; right: 0; z-index: 60;}

/* 탭 1 : 버튼 : 구매하러가기 */
#event1_wrap .cont1 .cont_btn {top: 47vw; left: 50%; transform: translateX(-50%); width: 25vw; height: 5vw; background: url('../images/pc/event/go_btn.png') no-repeat; background-size: 100%;}
#event1_wrap .cont1 .cont_btn:hover {background: url('../images/pc/event/go_btn_on.png') no-repeat; background-size: 100%;}
/* 탭 2 : 버튼 : 행사매장 찾기 */
#event2_wrap .cont1 .cont_btn {top: 13.2vw; left: 50%; transform: translateX(-50%); width: 25vw; height: 5vw; background: url('../images/pc/event/go_btn.png') no-repeat; background-size: 100%;}
#event2_wrap .cont1 .cont_btn:hover {background: url('../images/pc/event/go_btn_on.png') no-repeat; background-size: 100%;}
/* 탭 3 : 버튼 : 이벤트 참여하기 */
#event3_wrap .cont1 .cont_btn {top: 49vw; left: 50%; transform: translateX(-50%); width: 25vw; height: 5vw;}


/* ---------- Q&A 이벤트 ---------- */
.qna_wrap {background: #b7dd9e;}
.qna_wrap main {position: relative;}
.qna_wrap .section_wrap {position: absolute; top: 17vw; left: 50%; transform: translateX(-50%); width: 43vw; height: 26vw; z-index: 15;}

.qna_wrap .note_bg {position: absolute; top: 4vw; left: 50%; z-index: 10; transform: translateX(-48%);}
.qna_wrap .note_bg.on {position: absolute; top: 1vw; left: 50%; z-index: 10; transform: translateX(-48%);}
.qna_wrap .note_bg img {width: 45vw !important;}

.section_wrap .step {display: none;}
.section_wrap .step.on {display: block;}

.section_wrap .section {width: 100%;}

.section .a_btn_box {width: 100%; display: flex;}
.section .a_btn_box .a_btn {width: 100%; height: 6vw; margin: 0 auto;}
.section .a_btn_box .a_btn input {display: none;}
.section .a_btn_box .a_btn input + label {display: block; width: 100%; height: 100%; font-size: 0; cursor: pointer; transition: 0.1s;}
/* .section .a_btn_box .a_btn input:checked + label {} */
/* .section .a_btn_box .a_btn input:hover + label {} */

#step1 .section {height: 19vw;}
#step1 .a_btn_box {height: 100%; justify-content: center; flex-direction: column;}
#step1 .a_btn:nth-child(1) input + label {background: url('../images/pc/event/a_btn_1_1.png') no-repeat center 0; background-size: auto 90%;}
#step1 .a_btn:nth-child(2) input + label {background: url('../images/pc/event/a_btn_1_2.png') no-repeat center 0; background-size: auto 90%;}
#step1 .a_btn:nth-child(3) input + label {background: url('../images/pc/event/a_btn_1_3.png') no-repeat center 0; background-size: auto 90%;}
#step1 .a_btn:nth-child(1) input:hover + label,
#step1 .a_btn:nth-child(1) input:checked + label {background: url('../images/pc/event/a_btn_1_1_on.png') no-repeat center 0; background-size: auto 90%;}
#step1 .a_btn:nth-child(2) input:hover + label,
#step1 .a_btn:nth-child(2) input:checked + label {background: url('../images/pc/event/a_btn_1_2_on.png') no-repeat center 0; background-size: auto 90%;}
#step1 .a_btn:nth-child(3) input:hover + label,
#step1 .a_btn:nth-child(3) input:checked + label {background: url('../images/pc/event/a_btn_1_3_on.png') no-repeat center 0; background-size: auto 90%;}

#step2 .section {height: 19vw;}
#step2 .a_btn_box {height: 100%; justify-content: center; flex-direction: column;}
#step2 .a_btn.a2_1 input + label {background: url('../images/pc/event/a_btn_2_1.png') no-repeat center 0; background-size: auto 90%;}
#step2 .a_btn.a2_2 input + label {background: url('../images/pc/event/a_btn_2_2.png') no-repeat center 0; background-size: auto 90%;}
#step2 .a_btn.a2_3 input + label {background: url('../images/pc/event/a_btn_2_3.png') no-repeat center 0; background-size: auto 90%;}
#step2 .a_btn.a2_4 input + label {background: url('../images/pc/event/a_btn_2_4.png') no-repeat center 0; background-size: auto 90%;}
#step2 .a_btn.a2_5 input + label {background: url('../images/pc/event/a_btn_2_5.png') no-repeat center 0; background-size: auto 90%;}
#step2 .a_btn.a2_1 input:hover + label,
#step2 .a_btn.a2_1 input:checked + label {background: url('../images/pc/event/a_btn_2_1_on.png') no-repeat center 0; background-size: auto 90%;}
#step2 .a_btn.a2_2 input:hover + label,
#step2 .a_btn.a2_2 input:checked + label {background: url('../images/pc/event/a_btn_2_2_on.png') no-repeat center 0; background-size: auto 90%;}
#step2 .a_btn.a2_3 input:hover + label,
#step2 .a_btn.a2_3 input:checked + label {background: url('../images/pc/event/a_btn_2_3_on.png') no-repeat center 0; background-size: auto 90%;}
#step2 .a_btn.a2_4 input:hover + label,
#step2 .a_btn.a2_4 input:checked + label {background: url('../images/pc/event/a_btn_2_4_on.png') no-repeat center 0; background-size: auto 90%;}
#step2 .a_btn.a2_5 input:hover + label,
#step2 .a_btn.a2_5 input:checked + label {background: url('../images/pc/event/a_btn_2_5_on.png') no-repeat center 0; background-size: auto 90%;}

#step3 .section {height: 19vw;}
#step3 .a_btn_box {height: 100%; justify-content: center; flex-direction: column;}
#step3 .a_btn.a3_1 input + label {background: url('../images/pc/event/a_btn_3_1.png') no-repeat center 0; background-size: auto 90%;}
#step3 .a_btn.a3_2 input + label {background: url('../images/pc/event/a_btn_3_2.png') no-repeat center 0; background-size: auto 90%;}
#step3 .a_btn.a3_3 input + label {background: url('../images/pc/event/a_btn_3_3.png') no-repeat center 0; background-size: auto 90%;}
#step3 .a_btn.a3_1 input:hover + label,
#step3 .a_btn.a3_1 input:checked + label {background: url('../images/pc/event/a_btn_3_1_on.png') no-repeat center 0; background-size: auto 90%;}
#step3 .a_btn.a3_2 input:hover + label,
#step3 .a_btn.a3_2 input:checked + label {background: url('../images/pc/event/a_btn_3_2_on.png') no-repeat center 0; background-size: auto 90%;}
#step3 .a_btn.a3_3 input:hover + label,
#step3 .a_btn.a3_3 input:checked + label {background: url('../images/pc/event/a_btn_3_3_on.png') no-repeat center 0; background-size: auto 90%;}

#step4 .section {height: 19vw;}
#step4 .a_btn_box {height: 100%; justify-content: center; flex-direction: column;}
#step4 .a_btn.a4_1 input + label {background: url('../images/pc/event/a_btn_4_1.png') no-repeat center 0; background-size: auto 90%;}
#step4 .a_btn.a4_2 input + label {background: url('../images/pc/event/a_btn_4_2.png') no-repeat center 0; background-size: auto 90%;}
#step4 .a_btn.a4_1 input:hover + label,
#step4 .a_btn.a4_1 input:checked + label {background: url('../images/pc/event/a_btn_4_1_on.png') no-repeat center 0; background-size: auto 90%;}
#step4 .a_btn.a4_2 input:hover + label,
#step4 .a_btn.a4_2 input:checked + label {background: url('../images/pc/event/a_btn_4_2_on.png') no-repeat center 0; background-size: auto 90%;}

.section_wrap .next_btn {display: block; width: 10vw; height: 3.3vw; background: url('../images/pc/event/qna_next_btn.png') no-repeat 0 0; background-size: 100%; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}


.result_wrap {width: 21%; height: 4.3vw; position: absolute; top: 7.4vw; left: 34vw; z-index: 20;/*  opacity: 0; visibility: hidden; */}

.result {width: 100%; height: 100%;  display: flex; justify-content: center; align-items: center; padding: 0.2vw;}
.result p {word-break: keep-all; text-align: center; font-weight: bold; line-height: 1.3em; font-size: 1.2vw;}

.select_input_box {width: 17.8%; height: 3.8vw; position: absolute; top: 10.6vw; left: calc(50% - 14.8vw); z-index: 20; display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 1.2vw;}

.result_btn_wrap {display: none; margin-top: 18vw;}
.result_btn_wrap .result_btn {display: flex;}
.result_btn_wrap .result_btn a {display: block; flex: 1; margin-top: 2vw; padding: 0 0.5vw; box-sizing: border-box;}



/* ---------- 디바이스 : MO ---------- */
@media (max-width: 720px) {
  #wrap .pc {display: none !important;}
  #wrap .mo {display: block !important;}

  .logo {padding: 0 4%; box-sizing: border-box; z-index: 100; top: 3%;}
  .logo .logo_item {width: 38%;}

  .tab {height: 0; border-bottom: 0.5vw solid #373e23;}

  .tab .tab_item,
  .tab .tab_item.active {display: block; width: 26vw; height: 19.3vw;}
  .tab .tab_item:nth-child(1) {background-image: url('../images/mo/tab1.png');}
  .tab .tab_item:nth-child(2) {background-image: url('../images/mo/tab2.png');}
  .tab .tab_item:nth-child(3) {background-image: url('../images/mo/tab3.png');}
  .tab .tab_item.active:nth-child(1),
  .tab .tab_item:nth-child(1):hover {background-image: url('../images/mo/tab1_active.png');}
  .tab .tab_item.active:nth-child(2),
  .tab .tab_item:nth-child(2):hover {background-image: url('../images/mo/tab2_active.png');}
  .tab .tab_item.active:nth-child(3),
  .tab .tab_item:nth-child(3):hover {background-image: url('../images/mo/tab3_active.png');}  

  /* 탭 1 : 버튼 : 구매하러가기 */
  #event1_wrap .cont1 .cont_btn {top: 213vw; left: 50%; transform: translateX(-50%); width: 66vw; height: 14vw;}
  /* 탭 2 : 버튼 : 행사매장 찾기 */
  #event2_wrap .cont1 .cont_btn {top: 53vw; left: 50%; transform: translateX(-50%); width: 60vw; height: 13.5vw;}
  /* 탭 3 : 버튼 : 이벤트 참여하기 */
  #event3_wrap .cont1 .cont_btn {top: 143vw; left: 50%; transform: translateX(-50%); width: 66vw; height: 14vw;}


  /* ---------- Q&A 이벤트 ---------- */
  .qna_wrap .section_wrap {top: 28vw; width: 80vw; height: 58vw;}

  .qna_wrap .note_bg {top: 4vw;}
  .qna_wrap .note_bg.on {top: 0;}
  .qna_wrap .note_bg img {width: 85vw !important;}

  .section_wrap .step {display: none;}
  .section_wrap .step.on {display: block;}

  .section_wrap .section {width: 100%;}

  .section .a_btn_box {width: 100%; display: flex;}
  .section .a_btn_box .a_btn {width: 100%; height: 13vw; margin: 0 auto;}
  .section .a_btn_box .a_btn input {display: none;}
  .section .a_btn_box .a_btn input + label {display: block; width: 100%; height: 100%; font-size: 0; cursor: pointer; transition: 0.1s;}
  /* .section .a_btn_box .a_btn input:checked + label {} */
  /* .section .a_btn_box .a_btn input:hover + label {} */

  #step1 .section {height: 40vw;}
  #step1 .a_btn_box {height: 100%; justify-content: center; flex-direction: column;}
  #step1 .a_btn:nth-child(1) input + label {background: url('../images/mo/event/a_btn_1_1.png') no-repeat center 0; background-size: auto 90%;}
  #step1 .a_btn:nth-child(2) input + label {background: url('../images/mo/event/a_btn_1_2.png') no-repeat center 0; background-size: auto 90%;}
  #step1 .a_btn:nth-child(3) input + label {background: url('../images/mo/event/a_btn_1_3.png') no-repeat center 0; background-size: auto 90%;}
  #step1 .a_btn:nth-child(1) input:hover + label,
  #step1 .a_btn:nth-child(1) input:checked + label {background: url('../images/mo/event/a_btn_1_1_on.png') no-repeat center 0; background-size: auto 90%;}
  #step1 .a_btn:nth-child(2) input:hover + label,
  #step1 .a_btn:nth-child(2) input:checked + label {background: url('../images/mo/event/a_btn_1_2_on.png') no-repeat center 0; background-size: auto 90%;}
  #step1 .a_btn:nth-child(3) input:hover + label,
  #step1 .a_btn:nth-child(3) input:checked + label {background: url('../images/mo/event/a_btn_1_3_on.png') no-repeat center 0; background-size: auto 90%;}

  #step2 .section {height: 40vw;}
  #step2 .a_btn_box {height: 100%; justify-content: center; flex-direction: column;}
  #step2 .a_btn.a2_1 input + label {background: url('../images/mo/event/a_btn_2_1.png') no-repeat center 0; background-size: auto 90%;}
  #step2 .a_btn.a2_2 input + label {background: url('../images/mo/event/a_btn_2_2.png') no-repeat center 0; background-size: auto 90%;}
  #step2 .a_btn.a2_3 input + label {background: url('../images/mo/event/a_btn_2_3.png') no-repeat center 0; background-size: auto 90%;}
  #step2 .a_btn.a2_4 input + label {background: url('../images/mo/event/a_btn_2_4.png') no-repeat center 0; background-size: auto 90%;}
  #step2 .a_btn.a2_5 input + label {background: url('../images/mo/event/a_btn_2_5.png') no-repeat center 0; background-size: auto 90%;}
  #step2 .a_btn.a2_1 input:hover + label,
  #step2 .a_btn.a2_1 input:checked + label {background: url('../images/mo/event/a_btn_2_1_on.png') no-repeat center 0; background-size: auto 90%;}
  #step2 .a_btn.a2_2 input:hover + label,
  #step2 .a_btn.a2_2 input:checked + label {background: url('../images/mo/event/a_btn_2_2_on.png') no-repeat center 0; background-size: auto 90%;}
  #step2 .a_btn.a2_3 input:hover + label,
  #step2 .a_btn.a2_3 input:checked + label {background: url('../images/mo/event/a_btn_2_3_on.png') no-repeat center 0; background-size: auto 90%;}
  #step2 .a_btn.a2_4 input:hover + label,
  #step2 .a_btn.a2_4 input:checked + label {background: url('../images/mo/event/a_btn_2_4_on.png') no-repeat center 0; background-size: auto 90%;}
  #step2 .a_btn.a2_5 input:hover + label,
  #step2 .a_btn.a2_5 input:checked + label {background: url('../images/mo/event/a_btn_2_5_on.png') no-repeat center 0; background-size: auto 90%;}

  #step3 .section {height: 40vw;}
  #step3 .a_btn_box {height: 100%; justify-content: center; flex-direction: column;}
  #step3 .a_btn.a3_1 input + label {background: url('../images/mo/event/a_btn_3_1.png') no-repeat center 0; background-size: auto 90%;}
  #step3 .a_btn.a3_2 input + label {background: url('../images/mo/event/a_btn_3_2.png') no-repeat center 0; background-size: auto 90%;}
  #step3 .a_btn.a3_3 input + label {background: url('../images/mo/event/a_btn_3_3.png') no-repeat center 0; background-size: auto 90%;}
  #step3 .a_btn.a3_1 input:hover + label,
  #step3 .a_btn.a3_1 input:checked + label {background: url('../images/mo/event/a_btn_3_1_on.png') no-repeat center 0; background-size: auto 90%;}
  #step3 .a_btn.a3_2 input:hover + label,
  #step3 .a_btn.a3_2 input:checked + label {background: url('../images/mo/event/a_btn_3_2_on.png') no-repeat center 0; background-size: auto 90%;}
  #step3 .a_btn.a3_3 input:hover + label,
  #step3 .a_btn.a3_3 input:checked + label {background: url('../images/mo/event/a_btn_3_3_on.png') no-repeat center 0; background-size: auto 90%;}

  #step4 .section {height: 40vw;}
  #step4 .a_btn_box {height: 100%; justify-content: center; flex-direction: column;}
  #step4 .a_btn.a4_1 input + label {background: url('../images/mo/event/a_btn_4_1.png') no-repeat center 0; background-size: auto 90%;}
  #step4 .a_btn.a4_2 input + label {background: url('../images/mo/event/a_btn_4_2.png') no-repeat center 0; background-size: auto 90%;}
  #step4 .a_btn.a4_1 input:hover + label,
  #step4 .a_btn.a4_1 input:checked + label {background: url('../images/mo/event/a_btn_4_1_on.png') no-repeat center 0; background-size: auto 90%;}
  #step4 .a_btn.a4_2 input:hover + label,
  #step4 .a_btn.a4_2 input:checked + label {background: url('../images/mo/event/a_btn_4_2_on.png') no-repeat center 0; background-size: auto 90%;}

  .section_wrap .next_btn {width: 30vw; height: 10vw; background: url('../images/mo/event/qna_next_btn.png') no-repeat 0 0; background-size: 100%; position: absolute;}

  .result_wrap {width: 39.5%; height: 7.7vw; position: absolute; top: 12.4vw; left: 21vw; z-index: 20;/*  opacity: 0; visibility: hidden; */}

  .result {padding: 0.2vw;}
  .result p {font-size: 2.25vw;}

  .select_input_box {width: 34.1%; height: 7.7vw; position: absolute; top: 17.4vw; left: calc(50% - 28vw); z-index: 20; display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 2.5vw;}
  /* .result .res_text {text-align: center; font-size: 18px; margin: 0 8px; padding: 0 4px 8px; border-bottom: 1px solid #bbb;} */

  .result_btn_wrap {margin-top: 39vw;}
  .result_btn_wrap .result_btn {flex-direction: column;}
}