body,
html {
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: Pretendard, "Noto Sans KR", Dotum, "돋움", Helvetica, "Apple SD Gothic Neo", sans-serif;
  letter-spacing: 0
}

button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 0
}

#loading {
  z-index: 512;
  position: fixed;
  left: 0;
  top: 0;
  opacity: .8;
  width: 100%;
  height: 100%;
  background: url("https://ssl.nexon.com/s2/game/fo3/2017/mobile/loading.gif") 50% 50% no-repeat #fff
}
.content.section .not_found{font-size: 28px; text-align: center; background-color: #F7F7F9; width: 100%; height: 300px; position: relative; z-index: 999; line-height: 300px;}
.content.section{width: 1280px; margin: 0 auto; padding: 30px;}
.content.section .title{font-size: 29px; text-align: center; line-height: 35px; margin-bottom: 19px; }
.content.section .title span{font-size: 29px; font-weight: 600;}
.content.section .title span.today{font-size: 29px; color:#5a5cee; font-weight: 600;}
.content.section .sub_title{font-size: 15px; text-align: center; margin-bottom: 30px;}
.content.section .last_update{text-align: right; font-size: 14px;}
.content.section .search_box{display: flex; padding: 15px; margin-top: 10px; background-color: rgb(234, 234, 234); border-radius: 10px;}
.content.section .search_box .first_text{font-size: 17px; font-weight: 600; margin-right: 20px; line-height: 33px; color:#000;}
.content.section .search_box .player_select{padding: 7px;  border-radius: 5px; width: 150px;}
.content.section .search_box .input_wrap{margin-left: 5px;}
.content.section .search_box .input_wrap input{padding: 9px;  border-radius: 5px;}
.content.section .search_box .input_wrap input:disabled{background-color: #cfcfcf; color:#fff;}
.content.section .search_box .btn_search{background-color: #5a5cee; color:#fff; margin-left: 15px; width: 80px; border-radius: 5px; }
.content.section .search_box .player_count_wrap{margin-left: auto; line-height: 35px; font-size: 17px; color:#E70012;}
.content.section .search_box .player_count_wrap .player_count{color:#000; font-size: 17px; margin-left: 5px; letter-spacing: normal; line-height: 35px;}
.content.section .list_table{width: 100%; max-width: 1280px;  margin-top: 30px; border-radius: 5px; border: 1px solid #f7f7f9; border-collapse: collapse; position: relative; margin-bottom: 70px;}
.content.section .list_table .header{background-color: #222; display: flex; box-sizing: border-box; border-radius: 5px 5px 0 0 ; color:#fff; font-weight: 600;}
.content.section .list_table .header .cls{width: 100px; padding: 10px 10px; text-align: center; box-sizing: border-box;}
.content.section .list_table .header .p_name{width: 162px; padding: 10px 10px; text-align: center; box-sizing: border-box;}
.content.section .list_table .header .grade{width: 163px;  padding: 10px 10px; text-align: center; box-sizing: border-box;}
.content.section .list_table .header div:nth-child(3){border-right: 4px solid #fff;}
.content.section .list_table .header div:nth-child(6){border-right: 4px solid #fff;}
.content.section .list_table .content{display: flex; flex-wrap: wrap; background-color: #f7f7f9; border-radius: 0 0 5px 5px; position: relative;}
.content.section .list_table::after{content:"";position: absolute; bottom: 0; left: 0; width: 1280px; height: 1px; background-color: #f7f7f9;}
.content.section .list_table .content .tr{ display: flex;  box-sizing: border-box;}
.content.section .list_table .content .tr .cls{width: 97px; text-align: center; font-size: 14px; padding: 12px 10px; box-sizing: border-box;  border-collapse: collapse;  border-bottom: 1px solid #c6c6c6; }
.content.section .list_table .content .tr .p_name{width: 164px; text-align: center; font-size: 14px; padding: 12px 10px; box-sizing: border-box;border-collapse: collapse;  border-left: 1px solid #c6c6c6; border-bottom: 1px solid #c6c6c6; }
.content.section .list_table .content .tr .grade{width: 164px;  text-align: center; font-size: 14px; padding: 12px 10px; box-sizing: border-box;  border-collapse: collapse; border-left: 1px solid #c6c6c6; border-bottom: 1px solid #c6c6c6;  position: relative;}
.content.section .list_table .content .tr:first-child div{border-top: none;}
.content.section .list_table .content .tr:nth-child(2) div{border-top: none;}
.content.section .list_table .content .tr:nth-child(3) div{border-top: none;}

.content.section .list_table .content .tr:first-child .grade{border-right: 4px solid #fff;}
.content.section .list_table .content .tr:nth-child(3n+4) .grade{border-right: 4px solid #fff;}
.content.section .list_table .content::after{content: ""; position: absolute; width: 4px; height: 100%; background-color: #fff; top: 0; left: 421px; z-index: 5;}
.content.section .list_table .content::before{content: ""; position: absolute; width: 4px; height: 100%; background-color: #fff; top: 0; left: 846px; z-index: 5;}
.content.section .list_table .content .tr:nth-child(3n+5) .grade{border-right: 4px solid #fff;}
.content.section .list_table .content .tr:nth-child(2) .grade{border-right: 4px solid #fff;}

.page { display:block; padding:32px 0 0 0; font-size:0; line-height:0; text-align:center;  position: absolute; bottom: -60px;  left: 0; width: 100%;}
.page .bt { display:inline-block; height:24px; vertical-align:top; }
.page .bt a { height:24px; margin:0 8px; vertical-align:top; text-indent:-9999px; }
.page .bt .btn_first { width:24px; background:url(https://ssl.nexon.com/s2/game/fo4/event/2020/200402_layer_common_/btn_first.png) left 4px no-repeat; filter: brightness(0);}
.page .bt .btn_last { width:24px; background:url(https://ssl.nexon.com/s2/game/fo4/event/2020/200402_layer_common_/btn_last.png) left 4px no-repeat; filter: brightness(0);}
.page .bt .btn_prev { width:18px; background:url(https://ssl.nexon.com/s2/game/fo4/event/2020/200402_layer_common_/btn_prev.png) center 4px no-repeat; filter: brightness(0);}
.page .bt .btn_next { width:18px; background:url(https://ssl.nexon.com/s2/game/fo4/event/2020/200402_layer_common_/btn_next.png) center 4px no-repeat; filter: brightness(0);}
.page .number { overflow:hidden; display:inline-block; vertical-align:top; }
.page .number strong { float:left; margin:0 8px; font-size:20px; line-height:24px; color:#5a5cee; text-decoration:underline; vertical-align:top;  font-weight: 600;}
.page .number .strong { float:left; margin:0 8px; font-size:20px; line-height:24px; color:#5a5cee; text-decoration:underline; vertical-align:top; font-weight: 600;}
.page .number a { float:left; margin:0 8px; font-size:20px; line-height:24px; color:#000000; vertical-align:top; }
.btn_top{
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 100px;
  height: 50px;
  background: #333;
  color:#fff;
  font-size: 16px;
  letter-spacing: normal;
  border-radius: 6px;
  transition: all 300ms;
  z-index: 99;
}
.btn_top:hover{
  background-color: #555;
  color:#eaeaea;
  transform: translate(0,-5px);
}
.btn_top span{font-size: 16px; color: #fff; margin-right: 5px;}
.btn_top:hover span{color:#eaeaea;}