@charset "utf-8";

html,body { width:100%; max-width:2560px; min-width:1340px;min-height: 800px; margin:0 auto; font-family:"Pretendard",sans-serif; color:#1e2028; background-color:#000000; }

#wrapper { position:relative; overflow:hidden; width:100%; height: 100%;box-sizing: border-box;min-width:1340px;}
#wrapper a { display:inline-block; font-family:"Pretendard"; }
#wrapper button { visibility:visible; overflow:visible; display:inline-block; outline:none; cursor:pointer; font-family:"Pretendard"; }

#loader { z-index:1024; position:fixed; left:0; top:0; width:100%; height:100%; background:url("https://ssl.nexon.com/s2/game/fc/online/common/transparent.png") left top repeat #000; }

#middle { position: relative; width:100%;min-width:1340px;background: url("https://ssl.nexon.com/s2/game/fc/online/event/2023/230921_bigmatch_5sp83ix3/bg.jpg") center 0 no-repeat;z-index: 10;box-sizing: border-box; height: 3248px;}
#middle .section { position:relative; width:100%;margin:0 auto;box-sizing: border-box; }
#middle .section.header .inner{width: 1340px;margin: 0 auto;position: relative; height: 800px; padding-top: 10px;}
#middle .section.header .btn_advice{position: absolute;top: 608px;left: 519px;width: 145px;height: 45px;background: #076BF4; color: #fff; line-height: 45px; text-align: center; border-radius: 25px; font-weight: 600; font-size: 16px;}
#middle .section.header .btn_reward{position: absolute;top: 608px;left: 675px;width: 145px;height: 45px;background: #F34D65; color: #fff; line-height: 45px; text-align: center; border-radius: 25px; font-weight: 600; font-size: 16px;}
.btn_reward:active,
.btn_advice:active {
  transition: ease-out 100ms;
  -webkit-transform: scale(.94);
  transform: scale(.94)
}
/* #middle .section.header .btn_info{position: absolute;top: 506px;left: 730px;width: 160px;height: 38px;background: blue;} */
/* #middle .section.header .title{width: 1146px; height: 417px; margin: 0 auto; background: #000; } */
#middle .section.content .inner{width: 1340px;margin: 0 auto;position: relative;}
#middle .header .date{text-align: center; position: absolute; top: 570px; left: 50%; transform: translateX(-50%);}
#middle .header .date p {line-height: 27px;}
#middle .header .date span.tit{font-size: 19px; color: #431A18; font-weight: 900; margin-right: 10px;}
#middle .header .date span.dt{font-size: 19px; color: #441D14; }
#middle .header .date span.divide{margin: 0 10px; font-size: 19px;}
.event_top{padding-bottom: 30px;;}
.event_top .event_inner{position: relative;width: 100%;height: 730px;margin-bottom: 30px;border-radius: 25px;; top: 30px; background: #076BF4;}
.event_top .event_inner .state{width: 1340px;height: 141px;position: relative;top:0;left:0;z-index: 1; padding-top: 20px;
background-color: #076BF4; border-radius: 25px 25px 0 0;  box-shadow: 0px 11px 25px rgba(0, 0, 0, 0.25);}
.event_top .event_inner .state .before_login{background-color: #09469A; width: 1300px; height: 120px; border-radius: 10px; margin: 0 auto; vertical-align: middle;}
.event_top .event_inner .state .before_login .txt{ text-align: center; font-size: 20px; color: #fff;}
.event_top .event_inner .state .before_login .txt span{text-align: center; font-size: 20px; color: #fff; line-height: 120px; padding-left: 220px;} 
.event_top .event_inner .state .btn_login{background: url("https://ssl.nexon.com/s2/game/fc/online/event/2023/230921_bigmatch_5sp83ix3/btn_login.png") 0 0 no-repeat;width: 310px;height: 120px;position: absolute;top:20px;left:20px;z-index: 10;;}
.event_top .event_inner .state .btn_team{background: url("https://ssl.nexon.com/s2/game/fc/online/event/2023/230921_bigmatch_5sp83ix3/btn_team.png") 0 0 no-repeat;width: 310px;height: 120px;position: absolute;top:20px;left:20px;z-index: 10;;}
.event_top .event_inner .state .btn_check{background: url("https://ssl.nexon.com/s2/game/fc/online/event/2023/230921_bigmatch_5sp83ix3/btn_check.png") 0 0 no-repeat;width: 310px;height: 120px;position: absolute;top:20px;left:20px;z-index: 10;;}
.event_top .event_inner .state .ticket_wrap{background-color: #09469A;  position: absolute;top:20px;right:18px;z-index: 10; padding: 20px; border-radius: 0 15px 15px 0;}
.event_top .event_inner .state .btn_ticket_list{
    background: url("https://ssl.nexon.com/s2/game/fc/online/event/2023/230921_bigmatch_5sp83ix3/btn_reward_list.png") 0 0 no-repeat;width: 189px;height: 80px; display: flex; align-items: center; justify-content: center;
}
.event_top .event_inner .state .after_event_done .btn_ticket_list{
  background: url("https://ssl.nexon.com/s2/game/fc/online/event/2023/230921_bigmatch_5sp83ix3/btn_reward_list.png") 0 0 no-repeat;width: 189px;height: 80px; position: absolute; right: 40px; top: 40px;
}
.event_top .event_inner .state .after_event_done .btn_ticket_list::before{content: ""; position: absolute; left: -20px; width: 1px; height: 120px; background-color: #0E54B6; top: -20px;}
.event_top .event_inner .state .before_coach{background-color: #09469A; width: 1300px; height: 120px; border-radius: 10px; margin: 0 auto; vertical-align: middle;}
.event_top .event_inner .state .before_coach .txt{ text-align: center; font-size: 20px; color: #fff; padding-top: 35px; padding-left: 70px;}
.event_top .event_inner .state .before_coach .txt span{text-align: center; font-size: 20px; color: #fff; line-height: 25px; display: block; } 
.event_top .event_inner .state .before_coach .txt span:last-child{font-size: 18px; }
.event_top .event_inner .state .after_event_end{background-color: #09469A; width: 1300px; height: 120px; border-radius: 10px; margin: 0 auto; vertical-align: middle;}
.event_top .event_inner .state .after_event_end .txt{ text-align: center; font-size: 20px; color: #fff; }
.event_top .event_inner .state .after_event_end .txt span{text-align: center; font-size: 20px; color: #fff; line-height: 120px; display: block; } 
.event_top .event_inner .state .after_event_done{background-color: #09469A; width: 1300px; height: 120px; border-radius: 10px; margin: 0 auto; vertical-align: middle;}
.event_top .event_inner .state .after_event_done .period{text-align: center; font-size: 20px; color: #fff; background-color: #451C14; line-height: 40px; padding-left: 150px; border-bottom: 1px solid #75372B;}
.event_top .event_inner .state .after_event_done .period span{font-size: 18px; color:#fff;}
.event_top .event_inner .state .after_event_done .period span:nth-child(1){margin-right: 4px; }
.event_top .event_inner .state .after_event_done .period span:nth-child(2){margin-right: 7px;}
.event_top .event_inner .state .after_event_done .period strong{color:#f9bf1a; font-size: 18px;}
.event_top .event_inner .state .after_event_done .txt{ text-align: center; font-size: 20px; color: #fff; padding-top: 31px; padding-left: 70px;}
.event_top .event_inner .state .after_event_done .txt span{text-align: center; font-size: 28px; color: #fff; line-height: 28px; display: block; } 
.event_top .event_inner .state .after_event_done .txt span:last-child{font-size: 18px; }
.event_top .event_inner .state .before_after{background-color: #115FCB; width: 855px; height: 120px;  margin: 0 auto; vertical-align: middle;}
.event_top .event_inner .state .before_after .period{text-align: center; font-size: 20px; color: #fff; background-color: #0983FF; line-height: 60px; padding-left: 52px;  display: flex; justify-content: space-around; box-shadow: 0px 2px 10px rgb(0 0 0 / 3%);}
.event_top .event_inner .state .before_after .period span{font-size: 18px; color:#fff;}
.event_top .event_inner .state .before_after .period span:nth-child(1){margin-right: 4px;  margin-left: 10px;}
.event_top .event_inner .state .before_after .period span:nth-child(2){margin-right: 7px;}
.event_top .event_inner .state .before_after .period strong{color:#f9bf1a; font-size: 18px;}
.event_top .event_inner .state .before_after > div.title{width: 973px; height: 40px; background-color: #0058AC; top: 30px; position: absolute; left: 130px; border-radius: 10px 10px 0 0 ; text-align: center; line-height: 40px; font-weight: 600; font-size: 17px; color: #fff; border-top: 1px solid #1781CD; box-sizing: border-box; padding-left: 185px;}
.event_top .event_inner .state .before_after > div.title::before{content:"";background: url("https://ssl.nexon.com/s2/game/fo4/event/2023/230629_picknplay_cq3p2g5gcx/ticket.png") left top no-repeat; width: 31px; height: 25px; position: relative; display: inline-block; top: 7px; left: -7px;}
.event_top .event_inner .state .before_after .get_week{position: absolute; left: 378px; background-color: transparent; width: 190px; height: 80px; top: 70px; padding: 20px 0 10px 0; box-sizing: border-box; }
.event_top .event_inner .state .before_after .get_week_total::before{position: absolute; content: ""; left: -51px; top:28px; width: 1px; height: 26px; background-color: #2C81F6;}
.event_top .event_inner .state .before_after .get_week_total::after{position: absolute; content: ""; right: 6px; top:28px; width: 1px; height: 26px; background-color: #2C81F6;}
.event_top .event_inner .state .before_after .get_week_total{position: absolute; left: 602px; background-color: transparent; width: 190px; height: 80px; top: 70px; padding: 20px 0 10px 0; box-sizing: border-box;}
.event_top .event_inner .state .before_after .get_total{position: absolute; left: 828px; background-color: transparent; width: 220px; height: 80px; top: 70px; padding: 20px 0 10px 0; box-sizing: border-box;}
.event_top .event_inner .state .sub_tit span{opacity: 0.6;}
.event_top .event_inner .state .before_after .sub_title{font-size: 18px; color: #fff; text-align: center; font-weight: 300;  margin-right: 20px;}
.event_top .event_inner .state .before_after .cnt{color: #fff ; font-size: 18px; font-weight: 600; text-align: center;  line-height: 40px;}
.event_top .event_inner .state .before_after .cnt span{color: #fff ; font-size: 18px; font-weight: 600; text-align: center; line-height: 40px;}
.event_top .event_inner .state .before_after .cnt span:nth-child(2){color:#fff; margin: 0 2px;}
.event_top .event_inner .state .before_after .cnt span:nth-child(3){color:#fff;}
.event_top .event_inner .state span.all{color : #fff !important; font-weight: 600;}
.event_top .event_inner .state .cnt span {color: #A7C9FC !important;}
.event_top .event_inner .state .cnt.active span{color: #fff !important;}
.event_top .event_inner .state .cnt.active span:first-child{color : #fff600 !important; font-weight: 600;}
.event_top .event_inner .state .period .cnt span {color: #fff !important;}
.event_top .event_inner .state .period .cnt.active span:first-child{color : #fff !important; font-weight: 600;}
.event_top .event_inner .state .period .cnt span:first-child{color : #fff !important; font-weight: 600;}
.event_top .event_inner .state .cnt span.active span{color: #fff !important;}
/* .event_top .event_inner .state .sub_tit{color: #fff;} */
/* .event_top .event_inner .state .before_after.team_before .cnt span{color: #fff !important;}
.event_top .event_inner .state .before_after.team_before .cnt span.current{color: #fff !important;}
.event_top .event_inner .state .before_after.team_before span.current{color : #fff !important; font-weight: 600;} */
/* .event_top .event_inner .state .before_after.team_before .sub_title{opacity: 0.9;}
.event_top .event_inner .state .before_after.team_before .cnt span{opacity: 0.6;}
.event_top .event_inner .state .before_after.team_before .period span{opacity: 0.8;} */



.event_top .event_inner .state .btn_tooltip{width: 24px; height: 24px; background: url("https://ssl.nexon.com/s2/game/fc/online/event/2023/230921_bigmatch_5sp83ix3/btn_tooltip.png") 0 0 no-repeat; margin-top: 2px; display: inline-block; position: relative; top: 5px; background-size: contain;}
.event_top .event_inner .state .btn_plus{width: 24px; height: 24px; background: url("https://ssl.nexon.com/s2/game/fc/online/event/2023/230921_bigmatch_5sp83ix3/btn_plus.png") 0 0 no-repeat; margin-top: -2px;}

/*  */
.event_top .event_inner .mission_area{width: 100%; height: 569px;  box-sizing: border-box;}
.event_top .event_inner .mission_area .title_area{ width: 100%; height: 130px;  position: relative;}
.event_top .event_inner .mission_area .title_area p{text-align: center; line-height: 130px; font-size: 40px; color: #fff;}
.event_top .event_inner .mission_area .title_area p strong{text-align: center; line-height: 130px; font-size: 40px; color: #fff; font-weight: 600;}
.event_top .event_inner .mission_area .title_area .btn_match{width: 189px; height: 50px; box-sizing: border-box; border-radius: 15px; border: 3px solid #5793E5; position: absolute; right: 40px; top: 40px; z-index: 9; color: #B0D2FA; font-size: 18px; line-height: 44px;}
.event_top .event_inner .mission_area .mission_content{width: 1340px; height: 435px; display: flex;}
.event_top .event_inner .mission_area .mission_content > div{width: 335px; height: 439px; box-sizing: border-box; border-right: 1px solid #1259BB;}
.event_top .event_inner .mission_area .mission_content > div:last-child{border-right: none;}
.event_top .event_inner .mission_area .mission_content > div.end{width:670px; height: 439px; box-sizing: border-box; border-right: 1px solid #1259BB; background-color: #3989F6;
display: flex; justify-content: center; align-items: center; text-align: center; flex-direction: column; border-radius: 0 0 0 25px;}
.event_top .event_inner .mission_area .mission_content > div.on{width:335px; height: 439px; box-sizing: border-box; border-right: 1px solid #1259BB; background-color: #3989F6;
  display: flex; justify-content: center; align-items: center; text-align: center; flex-direction: column; }
.event_top .event_inner .mission_area .mission_content > div.end p{font-size: 20px; line-height: 30px; color: #fff;}
.event_top .event_inner .mission_area .mission_content > div.on p{font-size: 17px; line-height: 27px; color: #fff;}
.event_top .event_inner .mission_area .mission_content > div.end p:first-child{font-size: 26px; font-weight: 600; line-height: 45px; margin-bottom: 30px;}
.event_top .event_inner .mission_area .mission_content > div.on p:first-child{font-size: 21px; font-weight: 600; line-height: 35px; margin-bottom: 30px; color: #00fff0;}
.event_top .event_inner .mission_area .mission_content > div.end p strong{font-size: 20px; line-height: 30px; color: #00fff0; font-weight: 600;}
.event_top .event_inner .mission_area .mission_content div._1{border-radius: 0 0 0 25px;}
.event_top .event_inner .mission_area .mission_content div._4{border-radius: 0 0 25px 0;}
.event_top .event_inner .mission_area .mission_content div._1,
.event_top .event_inner .mission_area .mission_content div._2{background-color: #3989F6;}
.event_top .event_inner .mission_area .mission_content div._3,
.event_top .event_inner .mission_area .mission_content div._4{background-color: #076BF4;}
.event_top .event_inner .mission_area .mission_content div._1 .tit,
.event_top .event_inner .mission_area .mission_content div._2 .tit{width: 334px; height: 70px; background-color: #3A9CFF; text-align: center; line-height: 70px; font-size: 22px; color:#ecf3fa; font-weight: 600;}
.event_top .event_inner .mission_area .mission_content div._3 .tit,
.event_top .event_inner .mission_area .mission_content div._4 .tit{width: 334px; height: 70px; background-color: #0983FF; text-align: center; line-height: 70px; font-size: 22px; color:#ecf3fa; font-weight: 600;}

.event_top .event_inner .mission_area .mission_content > div .img_wrap{ width: 140px; height: 140px; background-color: #4D95F7; margin: 0 auto; margin-top: 60px; position: relative; display: flex; justify-content: center; align-items: center;}
.event_top .event_inner .mission_area .mission_content > div .img_wrap img{max-width: 140px;}
.event_top .event_inner .mission_area .mission_content > div .text_area{ width: 335px; height: 150px; margin-top: 20px; display: flex; justify-content: normal; align-items: center; flex-direction: column; padding: 0 35px; box-sizing: border-box; text-align: center;}
.event_top .event_inner .mission_area .mission_content > div .text_area strong{font-weight: 400; font-size: 16px; color: #00fff0; display: block; line-height: 22px; margin-bottom: 10px;}
.event_top .event_inner .mission_area .mission_content > div .text_area span{font-size: 16px; color: #c7defd; display: block; line-height: 22px;}
.event_bottom{height: 1276px; margin-top: 195px; position: relative;}
.event_top .event_inner .mission_area .mission_content > div._3 .text_area,
.event_top .event_inner .mission_area .mission_content > div._4 .text_area{ margin-top: 20px; justify-content: normal;}
.event_top .event_inner .mission_area .mission_content > div._3 .text_area strong,
.event_top .event_inner .mission_area .mission_content > div._4 .text_area strong{color: #fff; margin-bottom: 15px;}
.event_bottom .inner .wrap._1{margin-bottom: 60px;}
.event_bottom .inner .wrap .tit{width: 100%; height: 82px;text-align: center; }
.event_bottom .inner .wrap .tit strong{font-size: 50px; font-weight: 600; color:#fff; line-height: 82px;}
.event_bottom .inner .wrap .tit span{ margin-left: 30px;  font-weight: 600; font-size: 24px; color: #00fff0; padding: 15px 30px; background-color: #0529A0; border-radius: 35px; box-sizing: border-box; display: inline-block; vertical-align: top; margin-top: 14px;}
.event_bottom .inner .wrap .event_content{width: 1340px; height: 500px; background-color: #fff; border: 20px solid #FF4862; border-radius: 25px; box-sizing: border-box; margin-top: 25px; display: flex;}
.event_bottom .inner .wrap .event_content > div{width: 25%; height: 460px; box-sizing: border-box; border-right: 1px solid #D7D7D7; position: relative;}
.event_bottom .inner .wrap .event_content > div:last-child{border-right: none;}
.event_bottom .inner .wrap .title{width: 100%; height: 82px; text-align: center; line-height: 82px; font-size: 22px; font-weight: 600; border-bottom: 1px solid #d7d7d7; box-sizing: border-box;}
.event_bottom .inner .wrap .event_content > div .img_wrap{  width: 100%; height: 200px; margin: 0 auto; margin-top: 50px; position: relative; }
.event_bottom .inner .wrap .event_content > div .img_wrap .image{width: 140px; height: 140px; background-color: #E1EDFE; display: flex; align-items: center; justify-content: center; margin: 0 auto;}
.event_bottom .inner .wrap .event_content > div .img_wrap .image img{max-width: 140px;}
.event_bottom .inner .wrap .event_content > div .img_wrap .item_text{padding: 20px 20px 0 20px; text-align: center; font-size: 16px; color: #000; line-height: 21px;}
.event_bottom .inner .wrap .event_content > div .btn_exchange{position: absolute; bottom: 25px; width: 220px; height: 70px; border-radius: 8px; background-color: #3687F6; left: 50%; transform: translateX(-50%); font-size: 18px; color: #fff; font-weight: 600; letter-spacing: normal;}
.event_bottom .inner .wrap .event_content > div .btn_exchange.not{opacity: 0.4;}

.event_bottom .inner .wrap._2 .event_content > div{width: 50%; height: 460px; box-sizing: border-box; border-right: 1px solid #D7D7D7; position: relative;}
.event_bottom .inner .wrap._2 .event_content > div .img_wrap{  width:230px; height: 200px; margin: 0 auto; margin-top: 50px; position: relative; float: left;}
.event_bottom .inner .wrap._2 .event_content > div .img_wrap:nth-of-type(2){margin-left: 95px;}
.event_bottom .inner .wrap._2 .event_content > div .btn_exchange{width: 430px;}
.btn_tooltip {
  z-index: 8;
  /* position: absolute; */
  cursor: pointer;
  background: url("https://ssl.nexon.com/s2/game/fo4/common/transparent.png") left top repeat;
}

.btn_tooltip .detail {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: left;
}

.btn_tooltip .detail > p {
  z-index: 32;
  position: absolute;
  left: 50%;
  top: 100%;
  box-sizing: border-box;
  display: none;
  width: 520px;
  margin: 8px 0px 0px -240px;
  padding: 16px;
  font-weight: normal;
  font-size: 14px;
  line-height: 18px;
  color: rgb(0, 0, 0);
  letter-spacing: 0px;
  text-align: center;
  border: 2px solid rgb(18, 18, 20);
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.4) 4px 4px 12px;
  background-color: rgb(255, 255, 255);
}

.btn_tooltip .detail > p strong {
  font-weight: bold;
  font-size: 14px;
  line-height: 18px;
  color: rgb(0, 0, 0) !important;
  letter-spacing: 0px;
  margin-bottom: 15px;
}
.btn_tooltip .detail > p span{text-align: left; font-size: 13px !important;color: #000 !important; opacity: 1 !important; line-height: 19px;}
.btn_tooltip .detail > p span span{color: red !important;}
.btn_tooltip .detail > p strong.red {
  color: rgb(226, 36, 44);
}

.btn_tooltip .detail:hover > p {
  display: block;
}
.btn_tooltip {
  /* right: 67px;
  top: 104px;
  display: block;
  width: 30px;
  height: 30px;
  margin-left: -12px; */
  border-radius: 100%;
  background-color: #fff;
}

/* #middle .event_01.section .inner .reward .item .tooltip::before { content:"?"; z-index:4; position:absolute; left:0; top:0; display:inline-block; width:26px; height:26px; font-weight:bold; font-size:18px; line-height:26px; color:#ffffff; text-align:center; vertical-align:top; font-family:"Pretendard","Noto Sans KR",Dotum,"돋움",Helvetica,"Apple SD Gothic Neo",sans-serif; letter-spacing:0; } */
/* .btn_tooltip::before {
  content: "?";
  z-index: 4;
  position: absolute;
  left: 2px;
  top: 1px;
  display: inline-block;
  width: 26px;
  height: 26px;
  font-weight: bold;
  font-size: 20px;
  line-height: 26px;
  color: #000;
  text-align: center;
  vertical-align: top;
  font-family: "Pretendard","Noto Sans KR",Dotum,"돋움",Helvetica,"Apple SD Gothic Neo",sans-serif;
  letter-spacing: 0;
} */

.btn_tooltip .detail {
  z-index: 8;
  position: absolute;
  left: 0;
  top: 0;
}
#footer { position:relative; width:100%; min-width:1040px; text-align:center; background-color:#000000; }
#footer .inner { width:100%; padding:40px 0; }
#footer .inner .logo { margin-bottom:22px; line-height:0; }
#footer .inner .logo img{width: 364px;}
#footer .inner .information { position:relative; overflow:hidden; width:1142px; margin:0 auto;  display: flex; justify-content: center;}
#footer .inner .information .company { position:relative;   display: flex; align-items: center; box-sizing: border-box; padding: 0 20px 0 0;}
#footer .inner .information .company .bt-nexon {position: relative; top: -5px; }
#footer .inner .information .company .bt-ea { position: relative;}
#footer .inner .information .copyright {width:584px; height:46px; }

.loading.layer_popup { z-index:10030 !important; }
.loading.layer_popup .content { z-index:138 !important; box-shadow:none; border-radius:0; border:none; background:transparent; }
.loading.layer_popup .content ul { width:128px; margin:0 auto 48px auto; }
.loading.layer_popup .content ul li { float:left; width:24px; height:24px; margin:0 4px; box-shadow:0 0 32px rgba(0,0,0,1); background-color:#ffffff; }
.loading.layer_popup .content p:nth-child(2) { width:100%; margin-bottom:16px; font-size:48px; line-height:48px; font-weight:bold; color:#ffffff; text-align:center; text-shadow:0 0 32px rgba(0,0,0,1); }
.loading.layer_popup .content p:nth-child(3) { width:100%; font-size:32px; line-height:32px; color:#ffffff; text-align:center; text-shadow:0 0 32px rgba(0,0,0,1); }
.layer_popup .content .message {
  padding: 32px 0;
  font-size: 18px;
  line-height: 26px;
  color: #000000;
  letter-spacing: 0;
  text-align: center;
}
.layer_popup .content .message strong {
  font-size: 18px;
  line-height: 26px;
  color: #08de68;
  letter-spacing: 0;
  vertical-align: top;
}
.layer_popup .content .message span strong{color: #08de68; font-size: 14px; line-height: 26px; padding: 0; vertical-align: baseline; margin: 0 2px; letter-spacing: 0;}
#layerTable .content{width: 780px;}
#layerTable .content .item .table thead > tr th:first-child{background-color: #000; color: #fff;}
#layerTable .content .item .table tbody tr.left_header{background-color: #666666;}
#layerTable .content .item .table tbody tr.left_header td{color: #fff; line-height: 1.3;}
#layerTable .content col.col1{width: 90px;}
#layerTable .content col.col2{width: 130px;}
#layerTable .content .item .message { box-shadow:0 0 10px rgba(0,0,0,0.2);padding-top:22px;padding-bottom:22px; font-size:14px; line-height:16px; color:#818080; text-align:center; position: relative;z-index: 9;}
#layerTable .content .item .message strong{ font-size:14px; line-height:16px; color:#08de68; }

#layerTable .content .item .table { box-sizing: border-box;text-align:center; border-bottom: 1px solid #e0e1e2; background-color:#fff; }

#layerTable .content .item .table .selector{padding:30px;position: relative;background-color: #eee;height: 41px;}
#layerTable .content .item .table .selector strong{display: block;line-height: 1.5;font-size: 17px;font-weight: 800;}
#layerTable .content .item .table .selector span{display: block;line-height: 1.5;}
#layerTable .content .item .table .btn_prev{position: absolute;top:0;left:0;width: 100px;height: 100px;background-color: #fff;;}
#layerTable .content .item .table .btn_prev:before{position: absolute;top:10px;left:50px;width: 1px;height: 50px;background-color: #333;content: "";transform:rotate(45deg)}
#layerTable .content .item .table .btn_prev:after{position: absolute;top:45px;left:50px;width: 1px;height: 50px;background-color: #333;content: "";transform:rotate(-45deg)}
#layerTable .content .item .table .btn_next{position: absolute;top:0;right:0;width: 100px;height: 100px;background-color: #fff;;}
#layerTable .content .item .table .btn_next:before{position: absolute;top:10px;left:50px;width: 1px;height: 50px;background-color: #333;content: "";transform:rotate(-45deg)}
#layerTable .content .item .table .btn_next:after{position: absolute;top:45px;left:50px;width: 1px;height: 50px;background-color: #333;content: "";transform:rotate(45deg)}

#layerTable .content .item table tr:nth-child(1) td{font-size: 15px;color: #000;}
#layerTable .content .item table th{height: 30px;line-height: 30px;font-size: 15px;}
#layerTable .content .item table td{height: 30px;line-height: 30px;font-size: 15px;}

#layerTable .content .item .table .reward_table_wrap{padding:10px;}
#layerTable .content .item .table .reward_table_wrap .tit{background: #ddd;line-height: 2;color: #000;font-size: 17px;;}
#layerTable .content .item .table .reward_table_wrap .tit strong{color: red;font-size: 17px;;}
#layerTable .content .item .table .reward_table_wrap table th{border:1px solid #ddd}
#layerTable .content .item .table .reward_table_wrap table th strong{color: red;font-size: 17px;;}
#layerTable .content .item .table .reward_table_wrap table td{border:1px solid #ddd}
#layerTable .content .item .table .reward_table_wrap table td.active{background-color: #feffb9;}
#layerTable .content .item table tr:nth-child(4) td{color: #000000;}

#layerTable .content .advice { padding:22px 32px; font-size:13px; line-height:24px; color:#939393; text-align:center; background-color:#eaeaea; }
#layerTable .content .advice .align_center{text-align: left;;display: inline-block;padding-left:35px;background: url(https://ssl.nexon.com/s2/game/fo4/event/2020/200402_layer_common_/ico_i.png) 0 center no-repeat;font-size:13px; line-height:24px; color:#939393;;}
#layerTable .content .advice .align_center span{text-align: left;font-size:13px; line-height:24px; color:#939393;;}
#layerTable .content .advice .align_center span + span{margin-top:5px;}
#layerTable .content .advice strong { font-size:14px; line-height:24px; color:#08de68; }
.layer_popup .content .btn_today {z-index: 16;position: absolute;right: 80px;top: 24px;font-size: 16px;line-height: 16px;color: #949494;letter-spacing: 0;}
.layer_popup .content .btn_today p::before {content: "";box-sizing: border-box;overflow: hidden;width: 16px;height: 16px;display: inline-block;margin-right: 4px;vertical-align: top;border: 1px solid #949494;box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);}
.layer_popup.remain_ticket .content .message {padding: 32px 25px;font-size: 20px;line-height: 28px;color: #000000;letter-spacing: 0;text-align: center;}
.layer_popup.remain_ticket .content .message strong {font-size: 20px;line-height: 28px;color: #08de68;letter-spacing: 0;vertical-align: top;
}
.layer_popup.remain_ticket .content .advice {padding: 32px;font-size: 16px;line-height: 24px;color: #949494;text-align: center;background-color: #eaeaea;}
.match_list.layer_popup .content .item{padding: 32px 15px; text-align: center;} 
.match_list.layer_popup .content .item p {font-size: 16px; color: #000; line-height: 22px; margin-bottom: 20px;}
/* .layer_popup .content .item .message { padding-top:32px;padding-bottom:32px; font-size:14px; line-height:16px; color:#818080; text-align:center; position: relative;z-index: 9;} */
.match_list.layer_popup .match_table{width: 100%; display: flex; flex-basis: 650px;}
.match_list.layer_popup .match_table .left{flex-basis: 70px;}
.match_list.layer_popup .match_table .left .tit{background-color: #383838; padding: 10px 5px; border:1px solid #555555; box-sizing: border-box; color: #fff;}
.match_list.layer_popup .match_table .left .con{background-color: #cfcfcf; padding: 10px 5px; border:1px solid #555555; box-sizing: border-box; color: #000;}
.match_list.layer_popup .match_table .right{flex-basis: 580px; display: flex; flex-wrap: wrap;}
.match_list.layer_popup .match_table .right li{flex-basis: 82.85px; }
.match_list.layer_popup .match_table .right .tit{background-color: #5F5F5F; padding: 10px 5px; border:1px solid #555555; box-sizing: border-box; color: #fff;}
.match_list.layer_popup .match_table .right .con{background-color: #fff; padding: 10px 5px;  box-sizing: border-box; border-width: 1px 1px 1px 0; border-color: #555555; border-style: solid;}
.match_list.layer_popup .match_table .right .con.blue{color:#00478B;}
.match_list.layer_popup .match_table .right .con.red{color:rgb(199, 30, 30);}
.match_list.layer_popup .match_table .right .con.not{color:#4a4c4d;}
.ticket_info.layer_popup .content{width: 780px;}
.ticket_info.layer_popup .item{padding: 32px 15px; text-align: center;}
.ticket_info.layer_popup .match_table{width: 100%; display: flex; flex-basis: 750px;}
.ticket_info.layer_popup .match_table .left{flex-basis: 190px;}
.ticket_info.layer_popup .match_table .left li .el1{background-color: #000; color: #fff; text-align: center; padding: 10px 5px;  border:1px solid #999;}
.ticket_info.layer_popup .match_table .left li .el2{display: flex;}
.ticket_info.layer_popup .match_table .left li .el2 .el2_left{width: 60px; padding: 10px 5px; background-color: #5F5F5F; color: #fff; line-height: 16px; display: flex; align-items: center; justify-content: center;  border:1px solid #999;}
.ticket_info.layer_popup .match_table .left li .el2 .el2_right{width: 120px; }
.ticket_info.layer_popup .match_table .left li .el2 .el2_right div{padding: 10px 5px; border-width: 0 0 1px 0; border-color: #999; border-style: solid;}
.ticket_info.layer_popup .match_table .left li .el3{padding: 10px 5px; background-color: #5F5F5F; color: #fff;  border-width: 1px 1px 0 1px; border-style: solid; border-color: #999;}
.ticket_info.layer_popup .content .item p.cnt {font-size: 18px; color: #000; line-height: 22px; margin-bottom: 20px; font-weight: 600;}
.ticket_info.layer_popup .content .item p.cnt span {font-size: 18px; color: #000; line-height: 22px; font-weight: 600;}
.ticket_info.layer_popup .match_table .right{flex-basis: 560px;  display: flex; flex-wrap: wrap; height: 176px;}
.ticket_info.layer_popup .match_table .right li{flex-basis: 79px;}
.ticket_info.layer_popup .match_table .right .tit{background-color: #5F5F5F; padding: 10px 5px; box-sizing: border-box; color: #fff; border-width: 1px 1px 1px 1px; border-color: #555555; border-style: solid;}
.ticket_info.layer_popup .match_table .right .con{background-color: #fff; padding: 10px 5px;  box-sizing: border-box; border-width: 0 1px 1px 1px; border-color: #999; border-style: solid;}
.layer_popup.ticket_info .content{top:56px; transform: translateX(-50%) translateY(0);}
.ticket_info .content .item .message { padding-top:0;padding-bottom:22px; font-size:14px; line-height:16px; color:#818080; text-align:left; position: relative;z-index: 9;}
.ticket_info .content .item .message span{font-size: 15px; font-weight: 600; color: #000; line-height: 22px;}
.ticket_info .content .item .message strong{ font-size:14px; line-height:16px; color:rgb(199, 30, 30);; }
.winning.layer_popup .message span.dt{color: #000; font-size: 18px; display: inline; letter-spacing: 0; line-height: 26px;}