@charset "utf-8";
html,
body {
  width: 100%;
  max-width: 2560px;
  min-width: 1420px;
  margin: 0 auto;
  font-family: "Pretendard", "Noto Sans KR", Dotum, "돋움", Helvetica,
    "Apple SD Gothic Neo", sans-serif;
  letter-spacing: -1px;
  background-color: #000000;
}
#wrapper {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  max-width: 2560px;
  min-width: 1420px;
  margin: 0 auto;
  font-family: "Pretendard", "Noto Sans KR", Dotum, "돋움", Helvetica,
    "Apple SD Gothic Neo", sans-serif;
  letter-spacing: 0;
  line-height: 0;
}
#wrapper a {
  display: inline-block;
  font-family: "Pretendard", "Noto Sans KR", Dotum, "돋움", Helvetica,
    "Apple SD Gothic Neo", sans-serif;
  letter-spacing: 0;
}
#wrapper button {
  overflow: visible;
  font-family: "Pretendard", "Noto Sans KR", Dotum, "돋움", Helvetica,
    "Apple SD Gothic Neo", sans-serif;
}
#wrapper button:focus {
  outline: 0;
}
#wrapper p,
#wrapper strong,
#wrapper span {
  font-family: "Pretendard", "Noto Sans KR", Dotum, "돋움", Helvetica,
    "Apple SD Gothic Neo", sans-serif;
  letter-spacing: 0;
}

img {
  image-rendering: -webkit-optimize-contrast;
}

#loader {
  z-index: 1024;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  min-width: 320px;
  height: 100%;
  background-color: #000000;
}

#middle { position:relative; overflow:hidden; width:100%; max-width:2560px; min-width:1420px; margin:0 auto;min-height: 2000px;background:#0f1017 url('https://ssl.nexon.com/s2/game/fc/online/event/2024/240101_fc_sbf2alkaw3/bg.jpg') center top no-repeat;}
#middle .section{width: 1420px;margin:0 auto;position: relative;}
/* #middle .header{height: 870px;} */
#middle .header{height: 793px;}

#middle .header .btn_advice{position: absolute;;top: 350px;left: 507px;width: 200px;height: 50px;background-color: transparent;}
#middle .header .btn_rewards{position: absolute;;top: 350px;left: 712px;width: 200px;height: 50px;background-color: transparent;}

#middle .content .inner{width: 1420px;margin:0 auto;position: relative;}

#middle .content .inner .state_box{position: relative;width: 1530px;height: 362px;margin-left: -55px;;}

#middle .content .inner .state_box .before{position: absolute;top:0;left:0;width: 1530px;height: 362px;box-sizing: border-box;padding-top: 45px;background:url(https://ssl.nexon.com/s2/game/fc/online/event/2024/240101_fc_sbf2alkaw3/state_before.png) 0 0 no-repeat; text-align: center;}
#middle .content .inner .state_box .before .txt{font-size: 22px;color: #fff;;margin-top: 43px;line-height: 2;font-weight: 300;}
#middle .content .inner .state_box .before .desc{font-size: 35px;color: #fff;;line-height: 1;height: auto;color: #fff;line-height: 1.3;font-weight: 600;margin-top: 10px;;}

#middle .content .inner .state_box .after{position: absolute;top:0;left:0;width: 1530px;height: 362px;box-sizing: border-box;padding-top: 45px;background:url(https://ssl.nexon.com/s2/game/fc/online/event/2024/240101_fc_sbf2alkaw3/state.png) 0 0 no-repeat; text-align: center;}

#middle .content .inner .state_box .after .winner{position: relative;;float: left;width: 45%;height: 240px;box-sizing: border-box;padding-top: 30px;padding-left: 120px;text-align: left;;}
#middle .content .inner .state_box .after .winner > div{width: 320px;;}
#middle .content .inner .state_box .after .winner .btn_link_btn{line-height: 1.3;text-align: center;font-weight: 600;position: absolute;top:30px;left:475px;width: 170px;height: 170px;background: url(https://ssl.nexon.com/s2/game/fc/online/event/2024/240101_fc_sbf2alkaw3/btn_all.png) 0 0 no-repeat;}

#middle .content .inner .state_box .after .join{position: relative;;float: left;width: 55%;height: 240px;box-sizing: border-box;padding-top: 10px;padding-left: 32px;text-align: left;}

#middle .content .inner .state_box .after .btn_join_btn{background: url(https://ssl.nexon.com/s2/game/fc/online/event/2024/240101_fc_sbf2alkaw3/btn_join.png) 0 0 no-repeat;line-height: 1.3;text-align: center;font-weight: 600;position: absolute;top: 30px;left: 396px;width: 170px;height: 170px;padding-top: 26px;box-sizing: border-box;}
#middle .content .inner .state_box .after .btn_join_btn span{display: block;color: #1c432c;font-size: 20px;font-weight: 600;line-height: 1.3;}
#middle .content .inner .state_box .after .btn_join_btn strong{display: block;color: #1c432c;font-size: 16px;font-weight: 600;line-height: 1.8;}
#middle .content .inner .state_box .after .btn_join_btn.disable{opacity: 0.8;cursor: default;pointer-events: none;filter: grayscale(1);}

#middle .content .inner .state_box .after .btn_list_btn{position: absolute;top:30px;left:565px;width: 169px;height: 177px;background: url(https://ssl.nexon.com/s2/game/fc/online/event/2024/240101_fc_sbf2alkaw3/btn_list.png) right 0 no-repeat;z-index: 10;line-height: 1.3;text-align: center;font-weight: 600;padding-top: 26px;box-sizing: border-box;}

#middle .content .inner .state_box .after .date{font-size: 22px;color:#fff;line-height:1.5;font-weight: 500}
#middle .content .inner .state_box .after .deac{font-size: 17px;;color:#fff;line-height:22px;font-weight: 300;margin-top: 10px;;}
#middle .content .inner .state_box .after .txt{font-size: 40px;color:#fff;line-height:1.5;font-weight: 500;overflow: hidden;position: relative;margin-top: 10px;display: inline-block;}
#middle .content .inner .state_box .after .txt_state{display: inline-block;height: 41px;border-left: 1px solid #7fd368;vertical-align: top;margin-top: 27px;margin-left: 15px;padding-left: 15px;;}
#middle .content .inner .state_box .after .txt_state span{vertical-align: top;padding-top: 20px;font-size: 18px;font-weight: 500;position: relative;}
#middle .content .inner .state_box .after .txt_state.up span{color: #fcff00;;}
#middle .content .inner .state_box .after .txt_state.up span:after{position: absolute;top:3px;left:0;content: "";width: 0;height: 0;border-style: solid;border-width: 0 9.5px 12px 9.5px;border-color: transparent transparent #fcff00 transparent;}
#middle .content .inner .state_box .after .txt_state.normal span{color: #fcff00;;}
#middle .content .inner .state_box .after .txt_state.normal span:after{position: absolute;top:8px;left:0;content: "";width: 12px;border-top:2px solid #fcff00;}
#middle .content .inner .state_box .after .txt_state.down span{color: #daf2d4;;}
#middle .content .inner .state_box .after .txt_state.down span:after{position: absolute;top:3px;left:0;content: "";width: 0;height: 0;border-style: solid;border-width: 12px 9.5px 0 9.5px;border-color: #daf2d4 transparent transparent transparent;}

#middle .content .inner .state_box .after .winner .txt{width: 100%;height: 110px;position: relative;overflow: hidden;}
#middle .content .inner .state_box .after .join .txt{margin-top: 20px;;}
#middle .content .inner .state_box .after .winner .txt .desc{font-size: 17px;color: #fff;line-height: 1.5;font-weight: 100;}
#middle .content .inner .state_box .after .winner .txt p{width: 100%;height: auto;position: absolute;bottom:0;left:0;line-height: 1.2;}
#middle .content .inner .state_box .after .winner .ready .txt{height: auto;}
#middle .content .inner .state_box .after .winner .desc{font-size:17px; line-height:20px; color: #fff;font-weight: 300;}
#middle .content .inner .state_box .after .winner .ready  .desc{font-size:17px; line-height:20px; color: #fff;font-weight: 300;}

#middle .content .inner .state_box .after .txt ul{position: absolute;top:0;left:0;width: 100%;;}
#middle .content .inner .state_box .after .txt ul li{color: #fff;font-size: 40px;font-weight: 500;height: 110px;position: relative;margin-bottom: 110px;;}

    
#middle .content .inner .state_box .after .disable_txt{position: absolute;top:0;left:0;width: 100%;height: 241px;;box-sizing: border-box;padding-top: 30px;padding-left: 70px;height: 180px;;}
#middle .content .inner .state_box .after .disable_txt .date{font-size: 22px;color:#fff;line-height:1.5;font-weight: 500}
#middle .content .inner .state_box .after .disable_txt .deac{font-size: 17px;;color:#fff;line-height:1.5;font-weight: 300;}
#middle .content .inner .state_box .after .disable_txt .txt{font-size: 40px;color:#fff;line-height:1.5;font-weight: 500;position: absolute;bottom: 0;left: 70px;line-height: 1.2;}


#middle .content .inner .list_box{width: 1532px;height: 2419px;background: url("https://ssl.nexon.com/s2/game/fc/online/event/2024/240101_fc_sbf2alkaw3/bg_content.png") 0 0 no-repeat;margin-left: -55px;margin-top: 56px;z-index: 10;position: relative;padding-top: 76px;}

#middle .content .inner .list_box .state{position: relative;height: 120px;box-sizing: border-box;margin: auto 115px;;}
#middle .content .inner .list_box .state .ready{font-size: 28px;line-height: 120px;text-align: center;color: #fcff00;;}
#middle .content .inner .list_box .state .done{font-size: 28px;line-height: 120px;text-align: center;color: #fcff00;;}
#middle .content .inner .list_box .state .before{font-size: 28px;line-height: 120px;text-align: center;color: #fcff00;}
#middle .content .inner .list_box .state .before .btn_login{color: #fff;vertical-align: top;}

#middle .content .inner .list_box .state > .coach{font-size: 19px;line-height: 120px;text-align: center;color: #fcff00;}

#middle .content .inner .list_box .state .after{font-size: 28px;text-align: center;color: #000;padding-left: 270px;height: 120px;;text-align: center;}

#middle .content .inner .list_box .state .after .info{text-align: center;height: 120px;position: relative;display: inline-block;padding:0 30px;}
#middle .content .inner .list_box .state .after .info:after{position: absolute;top:43px;right:0;height: 34px;background: #028e7c;width: 1px;z-index: 1;content: "";;}
#middle .content .inner .list_box .state .after .info .coach{font-size: 24px;text-align: center;color: #CEEFEC;position: relative;line-height:120px;text-align: left;padding-left: 40px; }
#middle .content .inner .list_box .state .after .info .coach span{font-size: 24px;text-align: left;color: #fff;;display: inline-block;line-height:120px;vertical-align: top;margin-right: 10px;font-weight: 700; margin-left: 5px;}
#middle .content .inner .list_box .state .after .info .coach span img{width: 50px;vertical-align: middle; margin-bottom: 4px;}
#middle .content .inner .list_box .state .after .info .coach a{display: inline-block;vertical-align: top;position: absolute;top:26px;left:440px;;}
#middle .content .inner .list_box .state .after .info .coach a img{vertical-align: top;;}

#middle .content .inner .list_box .state .after .fc{display: inline-block;;text-align: center;box-sizing: border-box;padding-left: 40px;;height: 120px;line-height: 120px;font-size: 24px;font-weight: 600;;color: #7d7d7d;position: relative;padding:0 30px;}
#middle .content .inner .list_box .state .after .fc span{font-size: 22px;text-align: left;color: #CEEFEC;;display: inline-block;line-height:120px;vertical-align: top}
#middle .content .inner .list_box .state .after .fc span:last-of-type{color: #fff; font-weight: 300;}
#middle .content .inner .list_box .state .after .fc strong{font-size: 22px;text-align: left;color: #fcff00;;display: inline-block;line-height:120px;vertical-align: top;font-weight: 700;margin-right: 10px;margin-left: 5px;}

#middle .content .inner .list_box .state .after .fc span img{width: 40px;vertical-align: middle; margin-bottom: 6px;}
#middle .content .inner .list_box .state .after .fc a{display: inline-block;vertical-align: top;position: absolute;top:26px;left:440px;;}
#middle .content .inner .list_box .state .after .fc a img{vertical-align: top;;}

#middle .content .inner .list_box .state .btn_check{position: absolute;top: -3px;left: -8px;width: 357px;height: 130px;background: url("https://ssl.nexon.com/s2/game/fc/online/event/2024/240101_fc_sbf2alkaw3/btn_check.png") 0 0 no-repeat;z-index: 1;;}

#middle .content .inner .items{position: relative;height: 1050px;box-sizing: border-box;width: 100%;}


#middle .content .inner .items .thumb_wrap{position: absolute;top:49px;;left: 116px;;width: 301px;height: 940px;border:6px solid transparent;border-radius: 300px;padding-top: 236px;;}
#middle .content .inner .items .thumb_wrap.active{border:6px solid #fcff00;}
#middle .content .inner .items .thumb_wrap.thumb_level1{left: 113px;}
#middle .content .inner .items .thumb_wrap.thumb_level2{left: 442px;}
#middle .content .inner .items .thumb_wrap.thumb_level3{left: 772px;}
#middle .content .inner .items .thumb_wrap.thumb_level4{left: 1100px}

#middle .content .inner .items .thumb_wrap .btn_area{text-align: center;padding-bottom: 103px;;}
#middle .content .inner .items .thumb_wrap .btn_area button{width: 250px;height: 70px;background: url(https://ssl.nexon.com/s2/game/fc/online/event/2024/240101_fc_sbf2alkaw3/btn.png) 0 0 no-repeat;}
#middle .content .inner .items .thumb_wrap .btn_area button.disable{opacity: 0.5;pointer-events: none;cursor: default;;}
#middle .content .inner .items .thumb_wrap .btn_area button.complete{background-position: 0 -90px;pointer-events: none;cursor: default;;}

#middle .content .inner .items .thumb_wrap .thumb{margin-right: 18px;width: 100%;position: relative;padding-bottom: 0px;text-align: center;padding-bottom: 86px;}
#middle .content .inner .items .thumb_wrap .thumb:last-child{margin-right: 0;}
#middle .content .inner .items .thumb_wrap .thumb .img{background-color: #2e844a;display: inline-block;}
#middle .content .inner .items .thumb_wrap .thumb .img img{width: 170px;;}
#middle .content .inner .items .thumb_wrap .thumb > .desc{width:215px;line-height: 1.4;margin-top: 15px;font-size: 16px;color: #fff;text-align: center;transform: translateX(-50%);position: absolute;top:170px;left:50%;opacity: 0.8;}

.loading.layer_popup { z-index:1030 !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); }

#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; }


#middle .thumb > .btn_desc{position: absolute;top:-15px;left:-15px;;width: 26px;height: 26px;;z-index: 100;line-height: 1.5;background: url(https://ssl.nexon.com/s2/game/fc/online/event/2024/240101_fc_sbf2alkaw3/q.png) 0 0 no-repeat;}
#middle .thumb > .btn_desc .desc{display: none;width: 295px;padding:20px;background: #fff;font-size: 11px;color: #000;border-radius: 5px;box-shadow: 0 0 10px rgba(0,0,0,0.1);position: absolute;top:30px;left:50%;margin-left: -147.5px;box-sizing: border-box;border:2px solid #ddd}
#middle .thumb > .btn_desc .desc span{font-weight: 400;font-size: 13px;line-height: 1.5;}
#middle .thumb > .btn_desc .desc strong{font-weight: 500;color: red;font-size: 13px;}
#middle .thumb > .btn_desc:hover .desc{display: block;;}

#middle .special {position: absolute;top: 1570px;left: -5px;width: 100%;height: 314px;}
#middle .special .btn_desc{position: absolute;top:0;left:0;;width: 162px;height: 50px;;z-index: 100;line-height: 1.5;background: transparent;}
#middle .special .btn_desc.sp1{top: 217px;left: 325px; }
#middle .special .btn_desc .desc{display: none;width: 295px;padding:20px;background: #fff;font-size: 11px;color: #000;box-shadow: 0 0 10px rgba(0,0,0,0.1);position: absolute;bottom:60px;left:50%;margin-left: -147.5px;box-sizing: border-box;text-align: center;;box-shadow: 0 0 20px rgba(0,0,0,0.3);}
#middle .special .btn_desc .desc table{table-layout: fixed;width: 100%;margin:10px 0;position: relative;}
#middle .special .btn_desc .desc table th{text-align: center;padding:5px;border:1px solid #ddd;background-color:#efefef;font-size:12px;}
#middle .special .btn_desc .desc table td{text-align: center;padding:5px;border:1px solid #ddd;font-size:12px;;}
#middle .special .btn_desc .desc span{font-weight: 400;font-size: 13px;line-height: 1.5;}
#middle .special .btn_desc .desc strong{font-weight: 500;color: red;font-size: 13px;}
#middle .special .btn_desc:hover .desc{display: block;;}