@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: 1600px;
  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:1600px; margin:0 auto;min-height: 3354px;background:#0f1017 url('https://ssl.nexon.com/s2/game/fc/online/event/2024/240425_fc_dklo8v33kslh/bg.jpg') center top no-repeat;}
#middle .section{width: 1600px;margin:0 auto;position: relative;}
#middle .header{height: 793px;}

#middle .header .btn_advice{position: absolute;;top: 680px;left: 564px;width: 234px;height: 63px;background-color: transparent;}
#middle .header .btn_rewards{position: absolute;;top: 680px;left: 801px;width: 234px;height: 63px;background-color: transparent;}

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

#middle .content .inner .state_box{position: relative;width: 1600px;height: 274px;}

#middle .content .inner .state_box .before{position: absolute;top:0;left:0;width: 1600px;height: 362px;box-sizing: border-box;padding-top: 45px;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: 1600px;height: 362px;box-sizing: border-box;padding-top: 45px;text-align: center;}

#middle .content .inner .state_box .after .winner{position: relative;;float: left;width: 44%;height: 218px;box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
#middle .content .inner .state_box .after .winner .type1.desc {font-size: 22px; font-weight: 700;line-height: 30px; color: #ebe8de;}
#middle .content .inner .state_box .after .winner .type2.desc {font-size: 22px; font-weight: 700;line-height: 30px; color: #ebe8de;}
#middle .content .inner .state_box .after .winner .type3 {width: 100%;}
#middle .content .inner .state_box .after .winner .type3 > div {display: flex; justify-content: center; width: 100%; align-items: center;}
#middle .content .inner .state_box .after .winner .type3 .winner_info {width: 390px; text-align: left; display: flex; flex-direction: column; justify-content: center;}
#middle .content .inner .state_box .after .winner .type3 .winner_info .date {font-size: 22px; font-weight: 700;line-height: 30px; color: #ebe8de; margin-bottom: 2px;}
#middle .content .inner .state_box .after .winner .type3 .winner_info .desc {font-size: 22px; font-weight: 500;line-height: 30px; color: #e8cd90;}
#middle .content .inner .state_box .after .winner .type3 .winner_info p {font-size: 22px; font-weight: 600;line-height: 30px; color: #ffe155; margin-top: 10px;}
#middle .content .inner .state_box .after .winner .type3 .btn_link_btn{line-height: 1.3;text-align: center;font-weight: 600;width: 188px;height: 176px;background: url(https://ssl.nexon.com/s2/game/fc/online/event/2024/240425_fc_dklo8v33kslh/btn_all.png) 0 0 no-repeat; margin-top: 20px;}

#middle .content .inner .state_box .after .join{position: relative;float: left;width: 56%;height: 218px;box-sizing: border-box;text-align: left;}
#middle .content .inner .state_box .after .join > div {width: 100%; height: 100%;}
#middle .content .inner .state_box .after .join .join_info {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
#middle .content .inner .state_box .after .join .join_info.end .desc {width: 660px; font-size: 22px; font-weight: 700;line-height: 30px; color: #ebe8de; text-align: center; margin-right: 20px;}
#middle .content .inner .state_box .after .join .join_info.end .desc p {font-size: 22px; line-height: 30px; color: #ebe8de; font-weight: 700;}
#middle .content .inner .state_box .after .join .join_info > div {width: 460px;}
#middle .content .inner .state_box .after .join .join_info > div .date {font-size: 22px; font-weight: 700;line-height: 30px; color: #ebe8de; margin-left: 20px;}
#middle .content .inner .state_box .after .join .join_info > div .desc {font-size: 22px; font-weight: 500;line-height: 30px; color: #e8cd90; margin-left: 20px; margin-bottom: 10px;}
#middle .content .inner .state_box .after .join .join_info > div .desc p {font-size: 18px; font-weight: 500;line-height: 30px; color: #ffe155;}
#middle .content .inner .state_box .after .join .join_info > div .txt {font-size: 22px; font-weight: 500; line-height: 30px; color: #ebe8de; margin-left: 20px; display: flex;}
#middle .content .inner .state_box .after .join .join_info > div .txt .txt_state {color: #02f86c; padding-left: 5px;}

#middle .content .inner .state_box .after .btn_join_btn{background: url(https://ssl.nexon.com/s2/game/fc/online/event/2024/240425_fc_dklo8v33kslh/btn_join.png) 0 0 no-repeat; width: 210px;height: 175px; margin-top: 20px;}
#middle .content .inner .state_box .after .btn_join_btn div{font-size: 20px; font-weight: 500; line-height: 35px; color: #e8e6df; padding-top: 70px;}
#middle .content .inner .state_box .after .btn_join_btn div strong{font-size: 20px; font-weight: 500; line-height: 35px; color: #ffe257;}

#middle .content .inner .state_box .after .btn_list_btn{width: 156px;height: 177px;background: url(https://ssl.nexon.com/s2/game/fc/online/event/2024/240425_fc_dklo8v33kslh/btn_list.png) right 0 no-repeat; margin-top: 20px;}

#middle .content .inner .state_box .after .winner .txt{width: 100%;height: 120px;position: relative;overflow: hidden;}
#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 .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: 90px;position: relative;margin-bottom: 90px;;}

    
#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: 1600px;height: 1560px;margin:auto;z-index: 10;position: relative;padding-top: 240px;}

#middle .content .inner .list_box .state{position: relative;height: 120px;box-sizing: border-box;margin: auto; display: flex; align-items: center; justify-content: center;}
#middle .content .inner .list_box .state > div > p{font-size: 26px;line-height: 47px;text-align: center;color: #ffe7a5;}
#middle .content .inner .list_box .state .after {width: 100%; height: 100%;}
#middle .content .inner .list_box .state .after > div {display: flex; width: 100%; height: 100%; align-items: center;}
#middle .content .inner .list_box .state .after .info {width: 345px; text-align: center; position: relative;}
#middle .content .inner .list_box .state .after .info::after {position: absolute; content: ''; width: 1px; height: 52px; background: #524f4c; right: 0; top: 50%; transform: translateY(-50%);} 
#middle .content .inner .list_box .state .after .info .coach {font-size: 26px; color: #fffced; line-height: 47px; font-weight: 500;}
#middle .content .inner .list_box .state .after .info .coach span {font-size: 26px; color: #ffe7a5; line-height: 47px; font-weight: 400;}
#middle .content .inner .list_box .state .after .fc {flex:1; display: flex; padding-left: 45px;}
#middle .content .inner .list_box .state .after .fc p:nth-of-type(1) {font-size: 26px; color: #fffced; line-height: 47px; font-weight: 500;}
#middle .content .inner .list_box .state .after .fc p:nth-of-type(1) span {font-size: 26px; color: #02f86c; line-height: 47px; font-weight: 700; padding-right: 5px;}
#middle .content .inner .list_box .state .after .fc p:nth-of-type(2) {font-size: 26px; color: #ffffff; line-height: 47px; font-weight: 300;}

#middle .content .inner .list_box .state .after .btn_check {width: 321px; height: 120px;background: url("https://ssl.nexon.com/s2/game/fc/online/event/2024/240425_fc_dklo8v33kslh/btn_state.png") 0 0 no-repeat;}



#middle .content .inner .items{position: relative;height: 1242px; padding-top: 51px; box-sizing: border-box;width: 100%; display: flex; justify-content: space-between;}
#middle .content .inner .thumb_wrap{width: 390px; height: 100%;}
#middle .content .inner .thumb_wrap .btn_area {width: 100%; height: 352px; position: relative; margin-bottom: 88px;}
#middle .content .inner .thumb_wrap .btn_area button.btn_get {background: url("https://ssl.nexon.com/s2/game/fc/online/event/2024/240425_fc_dklo8v33kslh/btn_active.png") 0 0 no-repeat; width: 250px; height: 70px; position: absolute; left: 50%; transform: translateX(-50%); top: 255px;}
#middle .content .inner .thumb_wrap .btn_area button.disable {background: url("https://ssl.nexon.com/s2/game/fc/online/event/2024/240425_fc_dklo8v33kslh/btn_inactive.png") 0 0 no-repeat; width: 240px; height: 60px; cursor: default;}
#middle .content .inner .thumb_wrap .btn_area button.end {background: url("https://ssl.nexon.com/s2/game/fc/online/event/2024/240425_fc_dklo8v33kslh/btn_end.png") 0 0 no-repeat; width: 240px; height: 60px; cursor: default;}
#middle .content .inner .thumb_wrap .btn_area button.complete {background: url("https://ssl.nexon.com/s2/game/fc/online/event/2024/240425_fc_dklo8v33kslh/btn_done.png") 0 0 no-repeat; width: 240px; height: 60px; cursor: default;}
#middle .content .inner .thumb_wrap .thumb {text-align: center; height: 255px;}
#middle .content .inner .thumb_wrap .thumb img {width: 170px; height: 170px; background: #30281f;}
#middle .content .inner .thumb_wrap .thumb .desc {font-size: 16px; font-weight: 300; color: #ffffff; line-height: 24px; text-align: center; width: 230px; margin: auto; margin-top: 10px;}


.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/240425_fc_dklo8v33kslh/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;;}


.loading.event_layer_popup { z-index:14320 !important; }
.loading.event_layer_popup .content { z-index:256 !important; width:272px; box-shadow:none; border-radius:0; border:none; background:transparent; }
.loading.event_layer_popup .content ul { width:128px; margin:0 auto 32px auto; }
.loading.event_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.event_layer_popup .content p { text-align:center; color:#ffffff; text-shadow:0 0 32px rgba(0,0,0,1); }
.loading.event_layer_popup .content p:nth-child(2) { margin-bottom:16px; font-size:48px; line-height:48px; font-weight:bold; }
.loading.event_layer_popup .content p:nth-child(3) { font-size:32px; line-height:32px; }

#layerButton .layer_item {padding: 0; width: auto; }
#layerButton .content .item .table .item_wrap {width: 230px; box-sizing: border-box;float: left; height: 255px; position: relative;padding-top: 50px;;}
#layerButton.select._1 .content .item .table .item_wrap {height: 280px;}
#layerButton .content {width: fit-content;}
#layerButton.layer_popup .content .item .text {width: 100%;}
#layerButton .content .item .table{display: flex;}
#layerButton.select._1 .content .item .table{height: 280px;}
.layer_popup .layer_item {display: flex; justify-content: center;}
.layer_popup .item_wrap {padding: 0 10px; width: 180px; box-sizing: border-box; padding-top: 50px;}
.layer_popup .item_wrap .item_img {width: 105px; height: 105px;background-color: #d3d6e7; margin: 0 auto;}
.layer_popup .item_wrap .item_img img {width: 105px; height: 105px;}
.layer_popup .item_wrap .item_name {padding: 14px 0 25px; font-size: 16px; color: #000; height: 70px; line-height: 22px; text-align: center;}
#layerConfirm .content .item .message {box-shadow: 0 0 10px rgba(0,0,0,0.2);}
#layerButton.layer_popup .content .item .message {color: #000;font-size: 16px;line-height: 1.5;}
#layerButton.layer_popup .content .item .message strong {font-size: 16px;line-height: 1.5;}