@charset "utf-8";
@font-face {
  font-family: 'Pretendard';
  src: url(../../../font/Pretendard-Regular.woff2) format('woff2'),
  url(../../../font/Pretendard-Regular.woff) format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Pretendard';
  src: url(../../../font/Pretendard-Medium.woff2) format('woff2'),
  url(../../../font/Pretendard-Medium.woff) format('woff');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Pretendard';
  src: url(../../../font/Pretendard-SemiBold.woff2) format('woff2'),
  url(../../../font/Pretendard-SemiBold.woff) format('woff');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Pretendard';
  src: url(../../../font/Pretendard-Bold.woff2) format('woff2'),
  url(../../../font/Pretendard-Bold.woff) format('woff');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Pretendard';
  src: url(../../../font/Pretendard-ExtraBold.woff2) format('woff2'),
  url(../../../font/Pretendard-ExtraBold.woff) format('woff');
  font-weight: 800;
  font-style: normal;
}

/* Variables */
:root {
  /* Color */
  --c-primary: #4ee8ff;
  --c-secondary: #6d7d9b;
  --c-tertiary: #49a299;
  --c-quaternary: #85bab3;
  --bg: #181b24;
  --bg-tab: #1d3b8b;
  --bg-footer: #0f1116;

  --c-title: #1af7ff;
  --c-satellite: #3bf0ae;
  --c-mainevent: #4ee8ff;
  --c-date: #6a95dc;
  --c-highlight: #fff99f;
  --c-em: #ffe574;
  --c-divider: #3d4658;
  --c-bar: #2f524f;

  --c-label: #8aa1d0;
  --c-strong: #dee9ff;
  --c-notice: #a2acc0;
  --c-desc: #606c85;
  --c-round: #49a299;
  --c-time: #85bab3;
  --c-location: #54b2d1;
  --c-location-sub: #8cc7e0;
  --c-heading: #98b4ef;
  --c-num: #6d7d9b;
  --c-tip: #4d618a;
  --c-sat-desc: #e9fff9;
  --c-bullet: #90a3c7;
  --c-tbl-th: #8aa1d0;
  --c-tbl-td: #dee9ff;

  /* Font Weight */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Font Size */
  --fs-xs: 20px;
  --fs-sm: 22px;
  --fs-base: 24px;
  --fs-md: 25px;
  --fs-lg: 27px;
  --fs-xl: 29px;
  --fs-2xl: 31px;
  --fs-3xl: 33px;
  --fs-4xl: 36px;
  --fs-5xl: 42px;
  --fs-6xl: 43px;
}

/* Reset */
article, aside, body, button, dd, dialog, div, dl, dt, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, input, legend, li, main, nav, ol, p, section, select, table, td, textarea, th, ul {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

article, aside, dialog, figure, footer, header, main, nav, section, picture {
  display: block
}

body, input, textarea, select, button, table, a {
  font-family: Pretendard, '맑은고딕', 'Apple SD Gothic Neo', Dotum, '돋움', sans-serif;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium)
}

img, fieldset, input {
  border: 0
}

img {
  display: block
}

ul, ol {
  list-style: none
}

em, address {
  font-style: normal
}

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

button {
  border: 0;
  background-color: rgba(0, 0, 0, 0);
  font-size: 0;
  vertical-align: top;
  cursor: pointer
}

a {
  display: block;
  text-decoration: none
}

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

.off {
  cursor: default
}

/* Layout */
body {
  background: var(--bg);
  min-width: 1000px
}

header {
  width: 100%
}

footer {
  width: 100%;
  background: var(--bg-footer)
}

.wrap {
  overflow: hidden;
  position: relative;
  min-width: 1280px;
  max-width: 2560px;
  margin: 0 auto;
  background-color: var(--bg)
}

.container_inner {
  width: 1000px;
  margin: 0 auto;
  padding: 34px 0 150px
}

/* Top Visual */
.top_visual {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 445px
}

.top_visual .visual_scene {
  position: relative;
  width: 1000px;
  margin: 0 auto
}

.top_visual .visual_scene picture {
  position: relative;
  top: 35px;
  left: -77px;
  width: 583px;
  height: 350px
}

.top_visual .visual_scene img {
  position: relative;
  width: 583px;
  height: 350px;
  object-fit: contain
}

.bg_video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: url(https://hangame-images.toastoven.net/hangame/aapokerinapp/event/hptguide/pc/hpt4/bg_top_visual.png) no-repeat
}

.bg_video video {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.bg_video::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://hangame-images.toastoven.net/hangame/aapokerinapp/event/hptguide/pc/hpt4/bg_videodim_v2.png) no-repeat;
  content: ''
}

.grade {
  position: absolute;
  bottom: -47px;
  left: 122px;
  width: 190px;
  height: 35px;
  background: url(https://hangame-images.toastoven.net/hangame/aapokerinapp/event/hptguide/pc/hpt4/txt_premium.png) no-repeat
}

/* Event Info */
.event_info {
  position: absolute;
  top: 128px;
  left: 448px
}

.event_date {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-medium);
  color: var(--c-date);
  transform: skewX(-12deg)
}

.event_prize {
  width: 544px;
  height: 80px;
  margin: 22px 0 30px;
  background: url(https://hangame-images.toastoven.net/hangame/aapokerinapp/event/hptguide/pc/hpt4/txt_15bil.png) no-repeat 0 0
}

.event_title {
  color: var(--c-title);
  font-size: var(--fs-6xl);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  transform: skewX(-12deg)
}

/* Tab Menu */
.tab_menu {
  overflow: hidden;
  height: 90px;
  background: var(--bg-tab)
}

.tab_menu ul {
  display: flex;
  width: 999px;
  height: 90px;
  margin: 0 auto
}

.tab_menu li {
  width: 333px;
  background: url(https://hangame-images.toastoven.net/hangame/aapokerinapp/event/hptguide/pc/hpt4/bg_tabmenu.png) no-repeat
}

.tab_menu li button {
  width: 100%;
  height: 100%
}

.tab_menu li.tab1 {
  background-position: 0 0
}

.tab_menu li.tab2 {
  background-position: -333px 0
}

.tab_menu li.tab3 {
  background-position: -667px 0
}

.tab_menu li.tab1.on {
  background-position: 0 -92px
}

.tab_menu li.tab2.on {
  background-position: -333px -92px
}

.tab_menu li.tab3.on {
  background-position: -667px -92px
}

/* Container */
.tab_content {
  position: relative;
  display: none;
  width: 1000px;
  margin: 0 auto
}

.tab_content.active {
  display: block
}

/* Tab1 - 대회정보 */
.schedule_wrap {
  display: flex;
  gap: 28px
}

.schedule {
  position: relative;
  width: 485px;
  height: 319px;
  padding: 30px 0;
  background: url(https://hangame-images.toastoven.net/hangame/aapokerinapp/event/hptguide/pc/hpt4/bg_frame1.png) no-repeat;
  text-align: center
}

.schedule.mainevent {
  background-image: url(https://hangame-images.toastoven.net/hangame/aapokerinapp/event/hptguide/pc/hpt4/bg_frame2.png)
}

.schedule_title {
  display: block;
  font-size: var(--fs-5xl);
  font-weight: var(--fw-extrabold);
  background: linear-gradient(to top, #c8fff0, #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.mainevent .schedule_title {
  background-image: linear-gradient(to top, var(--c-primary), #fff)
}

.schedule_date {
  margin: 14px 0 25px;
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  color: var(--c-satellite)
}

.mainevent .schedule_date {
  color: var(--c-primary)
}

.game_mode {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 108px;
  height: 42px;
  background: url(https://hangame-images.toastoven.net/hangame/aapokerinapp/event/hptguide/pc/hpt4/icon_online.png) no-repeat
}

.game_mode.offline {
  background-image: url(https://hangame-images.toastoven.net/hangame/aapokerinapp/event/hptguide/pc/hpt4/icon_offline.png)
}

.game_status {
  display: inline-block;
  width: 114px;
  height: 28px;
  background: url(https://hangame-images.toastoven.net/hangame/aapokerinapp/event/hptguide/pc/hpt4/txt_ongoing.png) no-repeat
}

.game_status.upcoming {
  background-image: url(https://hangame-images.toastoven.net/hangame/aapokerinapp/event/hptguide/pc/hpt4/txt_upcoming.png)
}

.game_status.finish {
  background-image: url(https://hangame-images.toastoven.net/hangame/aapokerinapp/event/hptguide/pc/hpt4/txt_finish.png)
}

.mainevent .game_status.ongoing {
  background-image: url(https://hangame-images.toastoven.net/hangame/aapokerinapp/event/hptguide/pc/hpt4/txt_ongoing2.png)
}

.mainevent .game_status.upcoming {
  background-image: url(https://hangame-images.toastoven.net/hangame/aapokerinapp/event/hptguide/pc/hpt4/txt_upcoming2.png)
}

.mainevent .game_status.finish {
  background-image: url(https://hangame-images.toastoven.net/hangame/aapokerinapp/event/hptguide/pc/hpt4/txt_finish2.png)
}

.time_list {
  position: relative;
  display: grid;
  grid-template-columns:180px 180px;
  width: 360px;
  margin: 16px auto 0
}

.time_list::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 9px;
  transform: translateX(-50%);
  width: 2px;
  height: 49px;
  background: var(--c-bar);
  box-shadow: 0 0 0 0.5px rgb(43, 68, 69)
}

.time_list li {
  display: flex;
  align-items: center;
  margin: 0 20px 5px;
  color: var(--c-tertiary);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  text-align: right
}

.time_list .round {
  width: 60px
}

.time_list .time {
  width: 80px;
  color: var(--c-quaternary)
}

.location {
  position: relative;
  margin: 16px auto 0;
  padding-left: 50px;
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--c-location)
}

.location::before {
  content: '';
  position: absolute;
  left: 106px;
  top: 50%;
  transform: translateY(-50%);
  width: 39px;
  height: 58px;
  background: url(https://hangame-images.toastoven.net/hangame/aapokerinapp/event/hptguide/pc/hpt4/icon_map.png) no-repeat center;
  flex-shrink: 0
}

.location strong {
  display: block;
  color: var(--c-location-sub)
}

.howto {
  width: 1000px;
  height: 798px;
  margin: 30px auto 0;
  background: url(https://hangame-images.toastoven.net/hangame/aapokerinapp/event/hptguide/pc/hpt4/bg_tab1_v2.png) no-repeat
}

.step_list {
  padding: 100px 30px 0
}

.step_list li {
  display: flex;
  align-items: center;
  height: 195px;
  margin-bottom: 17px;
  padding: 35px 30px 0;
  color: var(--c-label);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium)
}

.step_info b {
  color: var(--c-strong);
  font-weight: var(--fw-medium)
}

.arw {
  display: inline-block;
  width: 10px;
  height: 19px;
  margin: 0 -2px 3px 0;
  background: url(https://hangame-images.toastoven.net/hangame/aapokerinapp/event/hptguide/pc/hpt4/ico_bullet.png) no-repeat center;
  vertical-align: middle
}

.step_desc {
  font-size: var(--fs-sm);
  color: var(--c-desc);
  line-height: 1.6
}

.howto_notice {
  padding: 6px 30px 0;
  color: var(--c-tip);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  text-align: center
}

/* Tab2 - 새틀라이트 */
.tab_content.tab2 {
  width: 998px;
  background: url(https://hangame-images.toastoven.net/hangame/aapokerinapp/event/hptguide/pc/hpt4/bg_tab2.png) no-repeat
}

.satellite_info {
  overflow: hidden;
  height: 389px;
  padding: 52px 0 0 410px
}

.satellite_info .desc {
  color: var(--c-sat-desc);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-medium)
}

.satellite_info .desc b {
  color: var(--c-highlight)
}

.info_list {
  margin: 30px 0 0;
  color: var(--c-quaternary);
  font-size: var(--fs-md)
}

.info_list li {
  margin-bottom: 3px
}

.info_list .label {
  display: inline-block;
  width: 55px;
  color: var(--c-tertiary)
}

.tbl_wrap {
  overflow: hidden
}

.tab2 .tbl_wrap {
  height: 879px
}

.tbl {
  width: 900px;
  height: 640px;
  margin: 0 auto 10px;
  background: url(https://hangame-images.toastoven.net/hangame/aapokerinapp/event/hptguide/pc/hpt4/bg_tab2_tbl.png) no-repeat;
  color: var(--c-tbl-td);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium)
}

.tbl th {
  padding-left: 30px;
  color: var(--c-tbl-th);
  font-weight: var(--fw-semibold);
  text-align: left
}

.tbl td {
  padding-left: 45px
}

.tbl em {
  color: var(--c-em)
}

.bar {
  display: inline-block;
  width: 1px;
  height: 17px;
  margin: 0 4px 0 3px;
  background: var(--c-bar);
  box-shadow: 0 0 0 0.5px rgb(41, 71, 72);
  vertical-align: 0
}

.tbl .bar {
  height: 23px;
  margin: 0 10px 0 9px;
  background: var(--c-divider);
  box-shadow: 0 0 0 0.5px rgb(47, 55, 70);
  vertical-align: -2px
}

/* Tab3 - 메인이벤트 */
.tab_content.tab3 {
  width: 998px;
  background: url(https://hangame-images.toastoven.net/hangame/aapokerinapp/event/hptguide/pc/hpt4/bg_tab3.png) no-repeat
}

.tbl.offline {
  width: 920px;
  height: initial;
  background-image: url(https://hangame-images.toastoven.net/hangame/aapokerinapp/event/hptguide/pc/hpt4/bg_tab3_tbl.png);
  font-size: 21px
}

.tab3 .tbl_wrap {
  height: 776px
}

.tbl.offline th {
  padding: initial;
  text-align: center;
  color: #dee9ff
}

.tbl.offline td {
  height: 80px;
  padding-left: 0;
  text-align: center
}

.tab3 thead th {
  height: 60px
}

.mainevent_date {
  height: 197px;
  padding: 120px 0 0 0;
  color: var(--c-primary);
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  text-align: center
}

.btn_pcgame, .btn_gameinfo {
  display: block;
  width: 718px;
  height: 114px;
  margin: 43px auto 0;
  background: url(https://hangame-images.toastoven.net/hangame/aapokerinapp/event/hptguide/pc/hpt4/btn_pcgame.png) no-repeat
}

.btn_pcgame.off {
  background-image: url(https://hangame-images.toastoven.net/hangame/aapokerinapp/event/hptguide/pc/hpt4/btn_pcgame_off.png)
}

.btn_gameinfo {
  background-image: url(https://hangame-images.toastoven.net/hangame/aapokerinapp/event/hptguide/pc/hpt4/btn_gameinfo.png)
}

.btn_gameinfo.off {
  background-image: url(https://hangame-images.toastoven.net/hangame/aapokerinapp/event/hptguide/pc/hpt4/btn_gameinfo_off.png)
}

.notice_wrap {
  padding: 45px 0 55px 58px;
  background: url(https://hangame-images.toastoven.net/hangame/aapokerinapp/event/hptguide/pc/hpt4/bg_notice.png) 0 100% repeat-y
}

.notice_wrap h3 {
  margin: 0 0 11px;
  color: var(--c-heading);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold)
}

.notice_list > li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 16px;
  color: var(--c-notice);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: 1.3
}

.notice_list > li::before {
  position: absolute;
  left: 0;
  top: 15px;
  width: 5px;
  height: 5px;
  background: var(--c-bullet);
  border-radius: 50%;
  content: ''
}

.notice_list > li.caution {
  color: #bdc9e3;
  font-weight: var(--fw-bold)
}

.notice_wrap .num {
  counter-reset: num;
  margin-top: 8px
}

.notice_wrap .num li {
  margin-bottom: 2px;
  counter-increment: num;
  color: var(--c-secondary);
  font-size: var(--fs-base)
}

.notice_wrap .num li::before {
  display: inline;
  position: static;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  content: counter(num) ') '
}

.warn {
  color: var(--c-secondary);
  font-size: var(--fs-base)
}

.dash li {
  margin-bottom: 2px;
  color: var(--c-secondary);
  font-size: var(--fs-base)
}

.dash li::before {
  display: inline;
  position: static;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  content: '- '
}

/* Footer */
.footer_info {
  position: relative;
  width: 1000px;
  height: 104px;
  margin: 0 auto;
  background: url(https://hangame-images.toastoven.net/hangame/aapokerinapp/event/hptguide/pc/hpt4/bg_footer.png) no-repeat center top
}

.btn_inquiry {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 160px;
  height: 104px
}

.footer_organizer {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  height: 104px
}

/* Copyright */
.copyright {
  padding: 14px 0;
  text-align: center;
  background: #000
}

.copyright p {
  font-family: 'Pretendard', sans-serif;
  font-size: var(--fs-xs);
  color: rgba(195, 199, 218, 0.3);
  letter-spacing: 0.03em
}

/* Floating Banner */
.btn_download {
  position: fixed;
  left: calc(50% + 500px + 52px);
  top: min(569px, calc(100vh - 430px));
  z-index: 200;
  width: 178px;
  height: 420px;
  background: url(https://hangame-images.toastoven.net/hangame/aapokerinapp/event/hptguide/pc/hpt4/btn_setup_download.png) no-repeat 0 0
}

.btn_download .btn_app {
  position: absolute;
  top: 0;
  left: 0;
  width: 178px;
  height: 210px
}

.btn_download .btn_kakao {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 178px;
  height: 210px
}