/*------------------------------------------------------------------------------*/
/* PC - default part																		*/
/*------------------------------------------------------------------------------*/
#wrapper-main {
  padding: 0 0 8rem;
}
#wrapper-main > div.result {
  width: 88.8rem;
  margin: auto;
  padding: 5rem 0 0;
}

#wrapper-main > div.result > h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #FFF;
  padding: 0 0 1.2rem;
}
#wrapper-main > div.result > h3 > a {
  float: right;
  font-size: 1.5rem;
  font-weight: 400;
  color: #FFF;
  text-decoration: none;
}
#wrapper-main > div.result > h3 > a > img {
  vertical-align: middle;
}
#wrapper-main > div.result > ul > li {
  display: inline-block;
  width: 20.4rem;
  height: 24.2rem;
  margin: 0 1.2rem;
}

#wrapper-main > div.result > ul > li:nth-child(4n - 3) {
  margin-left: 0;
}
#wrapper-main > div.result > ul > li:nth-child(4n) {
  margin-right: 0;
}
#wrapper-main > div.result > ul > li:nth-child(n + 5) {
  margin-top: 2.4rem;
}
#wrapper-main > div.result > ul > li > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
}
#wrapper-main > div.result > ul > li > div.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}
#wrapper-main > div.result > ul > li > div.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 2.4rem 1.8rem;
}

/* div.result > div.content p a 링크 text 컬러 설정 */
#wrapper-main > div.result > ul > li > div.content p a {
  display: block;
  color: #c6c6c6;
}

#wrapper-main > div.result > ul > li > div.content > p.subject {
  font-size: 1.8rem;
  font-weight: 700;
  color: #FFF;
  font-family: 'NanumBarunGothic', sans-serif;
}
#wrapper-main > div.result > ul > li > div.content > p.date {
  position: absolute;
  bottom: 2.4rem;
  left: 1.8rem;
  width: calc(100% - 3.6rem);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 1.4rem;
  padding: 1.2rem 0 0;
  color: #FFF;
}
#wrapper-main > div.board {
  width: 88.8rem;
  margin: auto;
}
#wrapper-main > div.board.list {
  padding: 4.2rem 0 8rem;
}
/*
#wrapper-main > div.board.list > div.search > select,
#wrapper-main > div.board.list > div.search > input {
  height: 4rem;
  outline: none;
  font-size: 1.4rem;
  border-radius: 3px;
  vertical-align: top;
  background-color: #484848;
  background-repeat: no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #FFF;
}
#wrapper-main > div.board.list > div.search > select {
  width: 9rem;
  line-height: 4rem;
  -o-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0 1.6rem;
  background-image: url(../img/arrow_down_01.svg);
  background-position: center right 0.8rem;
}
#wrapper-main > div.board.list > div.search > input {
  width: 32rem;
  padding: 0 1.6rem;
  margin-left: 0.8rem;
  background-image: url(../img/search_01.svg);
  background-position: center right 1.2rem;
}
#wrapper-main > div.board.list > div.search > input::placeholder {
  color: rgba(255, 255, 255, 0.2);
}
*/

#wrapper-main > div.board.list > div.search > form > select,
#wrapper-main > div.board.list > div.search > form > input {
  height: 4rem;
  outline: none;
  font-size: 1.4rem;
  border-radius: 3px;
  vertical-align: top;
  background-color: #484848;
  background-repeat: no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #FFF;
}
#wrapper-main > div.board.list > div.search > form > select {
  width: 9rem;
  line-height: 4rem;
  -o-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0 1.6rem;
  background-image: url(../img/arrow_down_01.svg);
  background-position: center right 0.8rem;
}
/*
#wrapper-main > div.board.list > div.search > form > input {
  width: 32rem;
  padding: 0 1.6rem;
  margin-left: 0.8rem;
  background-image: url(../img/search_01.svg);
  background-position: center right 1.2rem;
}
*/
/* 수정된 부분 108~112 */
#wrapper-main > div.board.list > div.search > form > input {
  width: 32rem;
  padding: 0 1.6rem;
  margin-left: 0.8rem;
}
#wrapper-main > div.board.list > div.search > form > input::placeholder {
  color: rgba(255, 255, 255, 0.2);
}
/* 추가된 부분 117~129 */
#wrapper-main > div.board.list > div.search > form > input + button.btn-search {
  position: absolute;
  top: 1rem;
  left: 39.2rem;
  width: 1.8rem;
  height: 1.8rem;
  background-image: url(../img/search_01.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1.8rem 1.8rem;
  cursor: pointer;
  z-index: 1;
}

#wrapper-main > div.board.list > table {
  width: 100%;
  margin: 1.2rem 0 0;
  border-collapse: collapse;
}
#wrapper-main > div.board.list > table th,
#wrapper-main > div.board.list > table td {
  font-size: 1.4rem;
  padding: 1.3rem;
  text-align: center;
  border-bottom: 1px solid #484848;
}
#wrapper-main > div.board.list > table th {
  color: #FFF;
  background: rgba(255, 255, 255, 0.15);
  border-top: 1px solid #484848;
}
/* div.board.list > table td 안에 text 컬러 설정 */
#wrapper-main > div.board.list > table td {
  color: #C6C6C6;
}
/* div.board.list > table td a 링크 text 컬러 설정 */
#wrapper-main > div.board.list > table td > a {
  display: block;
  color: #c6c6c6;
}

/* td 내의 넓이 조절. */
#wrapper-main > div.board.list > table td:first-child {
  width: 11.5rem;
}
#wrapper-main > div.board.list > table td:nth-child(2) {
  width: 15rem;
  padding-top: 0;
  padding-bottom: 0;
}
#wrapper-main > div.board.list > table td:first-child > img {
  width: 2.5rem;
  vertical-align: bottom;
}
#wrapper-main > div.board.list > h3 {
  font-size: 2.4rem;
  font-weight: 700;
  color: #FFF;
  padding: 1.2rem 0;
  /*border-bottom: 1px solid #484848;
  /*margin-bottom: 1.6rem;*/
  margin-bottom: 0.5rem;
}
/*
#wrapper-main > div.board.view > h3 > p > span.type {
  font-size: 1.6rem;
  margin-right: 0.7rem;
}
#wrapper-main > div.board.view > h3 > p > span.type > img {
  width: 2.5rem;
  vertical-align: bottom;
}
#wrapper-main > div.board.view > h3 > p > span.type.run {
  color: #FF8139;
}
#wrapper-main > div.board.view > h3 > p > span.type.ski {
  color: #70C9EF;
}
#wrapper-main > div.board.view > h3 > p > span.type.swim {
  color: #136FE3;
}
#wrapper-main > div.board.view > h3 > p > span.type.canoe {
  color: #DFBF00;
}
#wrapper-main > div.board.view > h3 > p > span.type.car {
  color: #FB6060;
}
#wrapper-main > div.board.view > h3 > p > span.type.cycle {
  color: #66B957;
}
#wrapper-main > div.board.view > h3 > p > span.type.horse-riding {
  color: #C38E56;
}
#wrapper-main > div.board.view > h3 > p > span.type.bike {
  color: #2BC0A4;
}
#wrapper-main > div.board.view > h3 > p > span.type.tri {
  color: #2BC0A4;
}
*/
#wrapper-main > div.board.view > h3 > table > tbody > tr > td > p > span.type {
  font-size: 1.6rem;
  margin-right: 0.7rem;
}
#wrapper-main > div.board.view > h3 > table > tbody > tr > td  > p > span.type > img {
  width: 2.5rem;
  vertical-align: bottom;
}
#wrapper-main > div.board.view > h3 > table > tbody > tr > td  > p > span.type.run {
  color: #FF8139;
}
#wrapper-main > div.board.view > h3 > table > tbody > tr > td  > p > span.type.ski {
  color: #70C9EF;
}
#wrapper-main > div.board.view > h3 > table > tbody > tr > td  > p > span.type.swim {
  color: #136FE3;
}
#wrapper-main > div.board.view > h3 > table > tbody > tr > td  > p > span.type.canoe {
  color: #DFBF00;
}
#wrapper-main > div.board.view > h3 > table > tbody > tr > td  > p > span.type.car {
  color: #FB6060;
}
#wrapper-main > div.board.view > h3 > table > tbody > tr > td  > p > span.type.cycle {
  color: #66B957;
}
#wrapper-main > div.board.view > h3 > table > tbody > tr > td  > p > span.type.horse-riding {
  color: #C38E56;
}
#wrapper-main > div.board.view > h3 > table > tbody > tr > td  > p > span.type.bike {
  color: #2BC0A4;
}

#wrapper-main > div.board.view > h3 > table > tbody > tr > td  > p > span.type.etc {
  color: #C45AC8;
}


#wrapper-main > div.board.list > table td.etc,
#wrapper-main > div.board.view > h3 > table > tbody > tr > td > p > span.type.etc {
  color: #C45AC8;
}
#wrapper-main > div.board.list > div.paging {
  text-align: center;
  padding: 3.5rem 0;
  line-height: 3rem;
}
#wrapper-main > div.board.list > div.paging > button {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}
#wrapper-main > div.board.list > div.paging > button.prev {
  background: url(../img/btn_prev_01.svg) center no-repeat;
  margin-right: 3.5rem;
}
#wrapper-main > div.board.list > div.paging > button.prev.disabled {
  background: url(../img/btn_prev_01_disabled.svg) center no-repeat;
}
#wrapper-main > div.board.list > div.paging > button.next {
  background: url(../img/btn_next_01.svg) center no-repeat;
  margin-left: 3.5rem;
}
#wrapper-main > div.board.list > div.paging > button.next.disabled {
  background: url(../img/btn_next_01_disabled.svg) center no-repeat;
}
#wrapper-main > div.board.list > div.paging > span {
  font-size: 1.6rem;
  font-weight: 700;
  vertical-align: top;
}
#wrapper-main > div.board.list > div.paging > span.current {
  color: #FFF;
}
#wrapper-main > div.board.list > div.paging > span.total {
  color: #5A5A5A;
}

#wrapper-main > div.board.list > div.paging > span.total > a {
  vertical-align: middle;
  color: #5A5A5A;
}

#wrapper-main > div.board.view {
  padding: 6.4rem 0 0;
}
#wrapper-main > div.board.view > button.btn-back {
  position: absolute;
  top: 2rem;
  left: 0;
}
#wrapper-main > div.board.view > h3 {
  font-size: 2.4rem;
  font-weight: 700;
  color: #FFF;
  padding: 1.2rem 0;
  border-bottom: 1px solid #484848;
  /*margin-bottom: 1.6rem;*/
  margin-bottom: 0.5rem;
}
#wrapper-main > div.board.view > h3 > table > tbody > tr > td > button.photo {
  float: right;
}
#wrapper-main > div.board.view > h3 > table > tbody > tr > td > p.date {
  margin-top: 0.6rem;
  font-size: 1.6rem;
}
#wrapper-main > div.board.view > h3 > table > tbody > tr > td > button.photo {
  width: 6.4rem;
  height: 2.8rem;
  font-size: 1.4rem;
  background: #A6A6A6;
  text-align: center;
  line-height: 2.8rem;
  color: #FFF;
  margin-left: 2rem;
  padding: 0;
}
#wrapper-main > div.board.view > h3 > a {
  display: block;
  font-size: 1.6rem;
  font-weight: 400;
  color: #00A0E9;
  padding: 0.7rem 0 0.2rem;
}
#wrapper-main > div.board.view > div.tournament-image {
  text-align: center;
  margin-bottom: 0.5rem;
}
#wrapper-main > div.board.view > div.tournament-image > img {
    width: 100%;
  }
#wrapper-main > div.board.view > div.content > p.name {
  font-size: 2.2rem;
  font-weight: 700;
  color: #FFF;
}
#wrapper-main > div.board.view > div.content > p.name > span {
  font-size: 2rem;
  font-weight: 400;
  color: #00A0E9;
  margin-left: 0.5rem;
}
#wrapper-main > div.board.view > div.content > p.tag {
  padding: 1.5rem 0 2.5rem;
}
#wrapper-main > div.board.view > div.content > p.tag > span {
  color: #FFF;
  font-size: 1.6rem;
}
#wrapper-main > div.board.view > div.content > p.tag > span::before {
  content: '#';
  margin-right: 0.5rem;
}

/* ds add for Error */
#wrapper-main > div.board.view > div.content > p.error {
  font-size: 2.2rem;
  font-weight: 700;
  color: #FF0000;
  text-align: center;
}
#wrapper-main > div.board.view > div.content > div.category {
  margin-bottom: 4.8rem;
}
#wrapper-main > div.board.view > div.content > div.category > div.links {
  display: inline-block;
}
#wrapper-main > div.board.view > div.content > div.category > div.links > a {
  display: inline-block;
  width: 11.2rem;
  height: 3.5rem;
  line-height: 3.5rem;
  text-align: center;
  border: 1px solid #C6C6C6;
  font-size: 1.4rem;
  color: #FFF;
  margin-right: 1.8rem;
}
/*

#wrapper-main > div.board.view > div.content > div.category > a {
  display: inline-block;
  width: 11.2rem;
  height: 4rem;
  line-height: 4rem;
  text-align: center;
  border: 1px solid #C6C6C6;
  font-size: 1.4rem;
  color: #FFF;
  margin-right: 1.8rem;
}*/
#wrapper-main > div.board.view > div.content > div.category > div.sns {
  float: right;
}
#wrapper-main > div.board.view > div.content > div.category > div.sns > a > img {
  width: 4rem;
  margin-left: 1rem;
}
#wrapper-main > div.board.view > div.content > div.record {
  padding: 3.2rem 0;
  margin: 0 0 3.2rem;
  border-top: 1px solid #484848;
  border-bottom: 1px solid #484848;
  text-align: center;
}
#wrapper-main > div.board.view > div.content > div.record > div.time {
  font-size: 4rem;
  font-weight: 700;
  margin-bottom: 1.3rem;
  color: #FFF;
}
#wrapper-main > div.board.view > div.content > div.record > p {
  font-size: 1.4rem;
  line-height: 2.4rem;
  color: #C6C6C6;
}
#wrapper-main > div.board.view > div.content > table {
  border-collapse: collapse;
  border-bottom: 1px solid #484848;
  border-left: 1px solid #484848;
  margin: 0 auto 1.2rem;
}
#wrapper-main > div.board.view > div.content > table th,
#wrapper-main > div.board.view > div.content > table td {
  border-right: 1px solid #484848;
  font-size: 1.4rem;
  padding: 1.2rem 0;
  text-align: center;
}
#wrapper-main > div.board.view > div.content > table th {
  border-top: 1px solid #484848;
  border-bottom: 1px solid #484848;
  color: #00A0E9;
}
#wrapper-main > div.board.view > div.content > table td {
  color: #C6C6C6;
  letter-spacing: -1px;
}
#wrapper-main > div.board.view > div.content > table td:first-child {
  width: 11.9rem;
}
#wrapper-main > div.board.view > div.content > table td:last-child {
  width: 27.8rem;
}
#wrapper-main > div.board.view > div.content > table > tbody > tr:first-child > td {
  padding-top: 2rem;
}
#wrapper-main > div.board.view > div.content > table > tbody > tr:last-child > td {
  padding-bottom: 2rem;
}
#wrapper-main > div.board.view > div.content > ul.rank {
  display: flex;
  justify-content: space-between;
  width: 40rem;
  margin: 0 auto 1.2rem;
  border: 1px solid #484848;
}
#wrapper-main > div.board.view > div.content > ul.rank > li {
  width: 33.33%;
  text-align: center;
  padding: 1.7rem 0 1.6rem;
}
#wrapper-main > div.board.view > div.content > ul.rank > li > p {
  color: #C6C6C6;
  font-size: 1.2rem;
}
#wrapper-main > div.board.view > div.content > ul.rank > li > p:first-child {
  padding: 0 0 1.2rem;
}
#wrapper-main > div.board.view > div.content > ul.rank > li > p > span {
  font-size: 1.6rem;
}
#wrapper-main > div.board.view > div.content > ul.rank > li > p > span:first-child {
  color: #ABCD03;
}
#wrapper-main > div.board.view > div.content > p.guide {
  font-size: 1.4rem;
  color: #FF5A5A;
  line-height: 1.6rem;
  text-align: center;
}
#wrapper-main > div.board.view > div.content > div.photos {
  margin-top: 4rem;
  text-align: center;
}
#wrapper-main > div.board.view > div.content > div.photos > h5 {
  padding: 0 0 1.6rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: #FFF;
}
/*
#wrapper-main > div.board.view > div.content > div.photos > ul > li {
  display: inline-block;
  width: 31.8rem;
  margin: 0 1.2rem;
}
#wrapper-main > div.board.view > div.content > div.photos > ul > li > img {
  margin-bottom: 1.8rem;
}
#wrapper-main > div.board.view > div.content > div.photos > ul > li > button {
  padding: 1.2rem 2rem;
  font-size: 1.4rem;
  color: #FFF;
  border: 1px solid #FFF;
}
*/
  /* 사진 그리드에 대한 CSS */
    #wrapper-main > div.board.view > div.content > div.photos > ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0;
      margin: 0;
      list-style: none;
    }

 /* 각 사진을 포함하는 li 요소 스타일 */
    #wrapper-main > div.board.view > div.content > div.photos > ul > li {
      /* 한 줄에 사진 3개 */
	  /*
	  flex: 1 1 calc(33.33% - 1.6rem); 
      margin: 0.8rem;
      box-sizing: border-box;
	  */
	  flex: 1 1 100%;
	  margin: 0.8rem;
      box-sizing: border-box;
    }

    /* div 요소를 사용하여 일정한 비율 유지 */
    #wrapper-main > div.board.view > div.content > div.photos > ul > li > div {
      display: flex; /* 플렉스 박스 레이아웃 사용 */
      flex-direction: column; /* 플렉스 방향을 열로 설정 */
      align-items: center; /* 수평 중앙 정렬 */
      justify-content: center; /* 수직 중앙 정렬 */
      position: relative; /* 상대적 위치 설정 */
      width: 100%; /* 가로 길이 100% */
      padding-top: 100%; /* 4:3 비율 */
      overflow: hidden; /* 넘치는 부분 숨김 */
      /*background-color: #f0f0f0; /* 자리 표시자 배경색 */
    }

    /* 이미지 스타일링 */
    #wrapper-main > div.board.view > div.content > div.photos > ul > li > div > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    
#wrapper-main > div.board.view > div.content > div.photos > ul > li > div > button {
  padding: 1.2rem 2rem;
  font-size: 1.4rem;
  color: #FFF;
  border: 1px solid #FFF;

	position: relative; /* 상대적 위치 설정 */
      margin-top: 1rem; /* 위쪽 여백 추가 */
      /*padding: 0.5rem 1rem; /* 패딩 설정 */
      background-color: #000000; /* 버튼 배경색 */
      color: white; /* 버튼 텍스트 색 */
      /*border: none; /* 테두리 없음 */
      cursor: pointer; /* 커서 모양을 포인터로 */
      z-index: 1; /* 다른 요소보다 앞에 오도록 */
}
/*----------------------------------------------------------*/
/* m1.php															*/
/*----------------------------------------------------------*/


#wrapper-main > div.board.details > div.search > form > table > tbody > tr > td > input {
  height: 3rem;
  outline: none;
  font-size: 1.4rem;
  border-radius: 3px;
  vertical-align: top;
  background-color: #484848;
  background-repeat: no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #FFF;
  margin-bottom: 0.6rem;

}
#wrapper-main > div.board.details > div.search > form > table > tbody > tr > td > input {
  width: 100%;
  padding: 0 1.6rem;
  margin-left: 0 rem;
/*
  background-image: url(../img/search_01.svg);
  background-position: center right 1.2rem;*/
}
#wrapper-main > div.board.details > div.search  > form > table > tbody > tr > td > input::placeholder {
  color: rgba(255, 255, 255, 0.2);
}
/* 추가된 부분  */
/*
#wrapper-main > div.board.details > div.search > form > input + button.btn-search {
  position: absolute;
  top: 1rem;
  left: 39.2rem;
  width: 1.8rem;
  height: 1.8rem;
  background-image: url(../img/search_01.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1.8rem 1.8rem;
  cursor: pointer;
  z-index: 1;
}
*/
#wrapper-main > div.board.details > div.search > form > table > tbody > tr > td > input.bib-search {
  float: right;
  width: 10rem;
  height: 3rem;
  font-size: 1.4rem;
  
  background: #A6A6A6;
  text-align: center;
  line-height: 2.8rem;
  color: #FFFFFF;
  margin-left: 0.2rem;
  padding: 0;
}




#wrapper-main > div.board.details > div.courseresult > form > select,
#wrapper-main > div.board.details > div.courseresult > form > input {
  height: 3rem;
  outline: none;
  font-size: 1.4rem;
  border-radius: 3px;
  vertical-align: top;
  background-color: #484848;
  background-repeat: no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #FFF;
  margin-bottom:1rem;
}
#wrapper-main > div.board.details > div.courseresult > form > select {
  width: 17rem;
  line-height: 2rem;
  -o-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0 1.6rem;
  background-image: url(../img/arrow_down_01.svg);
  background-position: center right 0.8rem;
}


#wrapper-main > div.board.details > h3 > p > span.type {
  font-size: 1.6rem;
  margin-right: 0.7rem;
}
#wrapper-main > div.board.details > h3 > p > span.type > img {
  width: 2.5rem;
  vertical-align: bottom;
}
#wrapper-main > div.board.details > h3 > p > span.type.run {
  color: #FF8139;
}
#wrapper-main > div.board.details > h3 > p > span.type.ski {
  color: #70C9EF;
}
#wrapper-main > div.board.details > h3 > p > span.type.swim {
  color: #136FE3;
}
#wrapper-main > div.board.details > h3 > p > span.type.canoe {
  color: #DFBF00;
}
#wrapper-main > div.board.details > h3 > p > span.type.car {
  color: #FB6060;
}
#wrapper-main > div.board.details > h3 > p > span.type.cycle {
  color: #66B957;
}
#wrapper-main > div.board.details > h3 > p > span.type.horse-riding {
  color: #C38E56;
}
#wrapper-main > div.board.details > h3 > p > span.type.bike {
  color: #2BC0A4;
}

#wrapper-main > div.board.details > h3 > p > span.type.etc {
  color: #C45AC8;
}


#wrapper-main > div.board.details > h3 > table > tbody > tr > td > p > span.type {
  font-size: 1.6rem;
  margin-right: 0.7rem;
}
#wrapper-main > div.board.details > h3 > table > tbody > tr > td  > p > span.type > img {
  width: 2.5rem;
  vertical-align: bottom;
}
#wrapper-main > div.board.details > h3 > table > tbody > tr > td  > p > span.type.run {
  color: #FF8139;
}
#wrapper-main > div.board.details > h3 > table > tbody > tr > td  > p > span.type.ski {
  color: #70C9EF;
}
#wrapper-main > div.board.details > h3 > table > tbody > tr > td  > p > span.type.swim {
  color: #136FE3;
}
#wrapper-main > div.board.details > h3 > table > tbody > tr > td  > p > span.type.canoe {
  color: #DFBF00;
}
#wrapper-main > div.board.details > h3 > table > tbody > tr > td  > p > span.type.car {
  color: #FB6060;
}
#wrapper-main > div.board.details > h3 > table > tbody > tr > td  > p > span.type.cycle {
  color: #66B957;
}
#wrapper-main > div.board.details > h3 > table > tbody > tr > td  > p > span.type.horse-riding {
  color: #C38E56;
}
#wrapper-main > div.board.details > h3 > table > tbody > tr > td  > p > span.type.bike {
  color: #2BC0A4;
}

#wrapper-main > div.board.details > h3 > table > tbody > tr > td  > p > span.type.etc {
  color: #C45AC8;
}

#wrapper-main > div.board.details {
  padding: 6.4rem 0 0;
}
#wrapper-main > div.board.details > button.btn-back {
  position: absolute;
  top: 2rem;
  left: 0;
}
#wrapper-main > div.board.details > h3 {
  font-size: 2.4rem;
  font-weight: 700;
  color: #FFF;
  /*
  padding: 1.2rem 0;
  
  border-bottom: 1px solid #484848;
  
  margin-bottom: 1.6rem;
  
  /*padding: 0 0;*/
}
#wrapper-main > div.board.details > h3 > button.serialsearch{
 float: left;
}


#wrapper-main > div.board.details > h3 > button.photo {
  float: right;
}

#wrapper-main > div.board.details > h3 > table > tbody > tr > td > p.date {
  margin-top: 0.6rem;
  font-size: 1.6rem;
}
#wrapper-main > div.board.details > h3 > table > tbody > tr > td > button.photo {
  float: right;
  width: 6.4rem;
  height: 2.8rem;
  font-size: 1.4rem;
  background: #A6A6A6;
  text-align: center;
  line-height: 2.8rem;
  color: #FFF;
  margin-left: 2rem;
  padding: 0;
}
#wrapper-main > div.board.details > h3 > button.serialsearch {
  width: 10rem;
  height: 2.8rem;
  font-size: 1.4rem;
  background: #A6A6A6;
  text-align: center;
  line-height: 2.8rem;
  color: #FFF;
  /* margin-left: 2rem;*/
  padding: 0;
}
#wrapper-main > div.board.details > h3 > a {
  display: block;
  font-size: 1.6rem;
  font-weight: 400;
  color: #00A0E9;
  padding: 0.7rem 0 0.2rem;
}
#wrapper-main > div.board.details > div.tournament-image {
  text-align: center;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
#wrapper-main > div.board.details  > div.content > p.name {
  font-size: 2.2rem;
  font-weight: 700;
  color: #FFF;
}
#wrapper-main > div.board.details  > div.content > p.name > span {
/*  font-size: 0.5rem;*/
  font-weight: 400;
  color: #00A0E9;
  margin-left: 0.5rem;
}
#wrapper-main > div.board.details  > div.content > p.tag {
  padding: 1.5rem 0 2.5rem;
}
#wrapper-main > div.board.details  > div.content > p.tag > span {
  color: #FFF;
  font-size: 1.6rem;
}
#wrapper-main > div.board.details  > div.content > p.tag > span::before {
  content: '#';
  margin-right: 0.5rem;
}

/* ds add for Error */
#wrapper-main > div.board.details  > div.content > p.error {
  font-size: 2.2rem;
  font-weight: 700;
  color: #FF0000;
  text-align: center;
}
#wrapper-main > div.board.details  > div.content > div.category {
  margin-bottom: 4.8rem;
}
#wrapper-main > div.board.details  > div.content > div.category > div.links {
  display: inline-block;
}
#wrapper-main > div.board.details  > div.content > div.category > div.links > a {
  display: inline-block;
  width: 11.2rem;
  height: 4rem;
  line-height: 4rem;
  text-align: center;
  border: 1px solid #C6C6C6;
  font-size: 1.4rem;
  color: #FFF;
  margin-right: 1.8rem;
}

#wrapper-main > div.board.details  > div.content > div.category > div.sns {
  float: right;
}
#wrapper-main > div.board.details > div.content > div.category > div.sns > a > img {
  width: 4rem;
  margin-left: 1rem;
}
#wrapper-main > div.board.details > div.content > div.record {
  padding: 3.2rem 0;
  margin: 0 0 3.2rem;
  border-top: 1px solid #484848;
  border-bottom: 1px solid #484848;
  text-align: center;
}
#wrapper-main > div.board.details > div.content > div.record > div.time {
  font-size: 4rem;
  font-weight: 700;
  margin-bottom: 1.3rem;
  color: #FFF;
}
#wrapper-main > div.board.details > div.content > div.record > p {
  font-size: 1.4rem;
  line-height: 2.4rem;
  color: #C6C6C6;
}
#wrapper-main > div.board.details > div.content > table {
  width: 100%;
  border-collapse: collapse;
  border-bottom: 1px solid #484848;
  border-left: 1px solid #484848;
  margin: 0 auto 1.2rem;
}
#wrapper-main > div.board.details > div.content > table th,
#wrapper-main > div.board.details > div.content > table td {
  /*border-right: 1px solid #484848;*/
  font-size: 1.4rem;
  padding: 1.2rem 0;
  text-align: center;
}
#wrapper-main > div.board.details > div.content > table th:last-child,
#wrapper-main > div.board.details > div.content > table td:last-child{
  border-right: 1px solid #484848;
  }
#wrapper-main > div.board.details > div.content > table th {
  border-top: 1px solid #484848;
  border-bottom: 1px solid #484848;
  color: #C6C6C6;
}
#wrapper-main > div.board.details > div.content > table th a {
   display: block;
  color: #c6c6c6;
}

#wrapper-main > div.board.details > div.content > table td {
  color: #C6C6C6;
  letter-spacing: -1px;
}


#wrapper-main > div.board.details > div.content > table td a{
  color: #C6C6C6;
  letter-spacing: -1px;
}

#wrapper-main > div.board.details > div.content > table td:first-child {
  width: 3rem;
}
#wrapper-main > div.board.details > div.content > table td:nth-child(2n) {
  width: 7.0rem;
}
#wrapper-main > div.board.details > div.content > table td:nth-child(3n) {
  width: 10.0rem;
}
#wrapper-main > div.board.details > div.content > table td:last-child {
  width: 10.0rem;
}
#wrapper-main > div.board.details > div.content > table > tbody > tr:first-child > td {
  padding-top: 2rem;
}
#wrapper-main > div.board.details > div.content > table > tbody > tr:last-child > td {
  padding-bottom: 2rem;
}


#wrapper-main > div.board.details > div.content > ul.rank {
  display: flex;
  justify-content: space-between;
  width: 40rem;
  margin: 0 auto 1.2rem;
  border: 1px solid #484848;
}
#wrapper-main > div.board.details > div.content > ul.rank > li {
  width: 33.33%;
  text-align: center;
  padding: 1.7rem 0 1.6rem;
}
#wrapper-main > div.board.details > div.content > ul.rank > li > p {
  color: #C6C6C6;
  font-size: 1.2rem;
}
#wrapper-main > div.board.details > div.content > ul.rank > li > p:first-child {
  padding: 0 0 1.2rem;
}
#wrapper-main > div.board.details > div.content > ul.rank > li > p > span {
  font-size: 1.6rem;
}
#wrapper-main > div.board.details > div.content > ul.rank > li > p > span:first-child {
  color: #ABCD03;
}
#wrapper-main > div.board.details > div.content > p.guide {
  font-size: 1.4rem;
  color: #FF5A5A;
  line-height: 1.6rem;
  text-align: center;
}

/*************************************************************************/
/* photos.php 적용 */


/* 부모 요소에 position 속성 추가 */
#wrapper-main, 
#wrapper-main > div.board.details, 
#wrapper-main > div.board.details > div.content, 
#wrapper-main > div.board.details > div.content > div.photos, 
#wrapper-main > div.board.details > div.content > div.photos > ul, 
#wrapper-main > div.board.details > div.content > div.photos > ul > li, 
#wrapper-main > div.board.details > div.content > div.photos > ul > li > div, 
#wrapper-main > div.board.details > div.content > div.photos > ul > li > div > form {
    position: relative; /* 상대적 위치 설정 */
}

#wrapper-main > div.board.details > div.content > div.photos {
  margin-top: 2rem;
  text-align: center;
}
#wrapper-main > div.board.details > div.content > div.photos > h5 {
  padding: 0 0 1.6rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: #FFF;
}

/* 2024-06-11 사진리스트 */
#wrapper-main > div.board.details > div.content > div.photos > ul {
  display: -webkit-box; /* 사파리 호환성 */
  display: -moz-box;    /* 구형 파이어폭스 호환성 */
  display: -ms-flexbox; /* 구형 IE 호환성 */
  display: -webkit-flex; /* 사파리 호환성 */

  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  list-style: none;
}

#wrapper-main > div.board.details > div.content > div.photos > ul > li {
 /* 3 photos in one line */
 
  flex: 1 1 calc(33.33% - 1.6rem);
  margin: 0.1rem;
  box-sizing: border-box;
  
}
   /* div 요소를 사용하여 일정한 비율 유지 */
 #wrapper-main > div.board.details > div.content > div.photos > ul > li > div {
      display: flex; /* 플렉스 박스 레이아웃 사용 */
      flex-direction: column; /* 플렉스 방향을 열로 설정 */
      align-items: center; /* 수평 중앙 정렬 */
      justify-content: center; /* 수직 중앙 정렬 */
      position: relative; /* 상대적 위치 설정 */
      width: 100%; /* 가로 길이 100% */
	  
      padding-top: 140%; /* 4:3 비율 */
      overflow: hidden; /* 넘치는 부분 숨김 */
     /*background-color: #f0f0f0; /* 자리 표시자 배경색 */
    }

    /* 이미지 스타일링 */
 #wrapper-main > div.board.details > div.content > div.photos > ul > li > div > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }


#wrapper-main > div.board.details > div.content > div.photos > ul > li > div > form > input {
  height: 3rem;
  outline: none;
  font-size: 1.4rem;
  border-radius: 3px;
  vertical-align: top;
  background-color: #484848;
  background-repeat: no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #FFF;
  margin-bottom:0rem;
}

#wrapper-main > div.board.details > div.content > div.photos > ul > li > div > form > button {
	padding: 1.2rem 2rem;
	font-size: 1.4rem;
	color: #FFF;
	border: 1px solid #FFF;

	position: relative; /* 상대적 위치 설정 */
	/*margin-top: 1rem; /* 위쪽 여백 추가 */
	/*padding: 0.5rem 1rem; /* 패딩 설정 */
	background-color: #000000; /* 버튼 배경색 */
	color: white; /* 버튼 텍스트 색 */
	/*border: none; /* 테두리 없음 */
	cursor: pointer; /* 커서 모양을 포인터로 */
	z-index: 1; /* 다른 요소보다 앞에 오도록 */


 /*
  padding: 1.2rem 2rem;
  font-size: 1.4rem;
  color: #FFF;
  border: 1px solid #FFF;
  */
}


/* 오리지널 2024-06-11
#wrapper-main > div.board.details > div.content > div.photos > ul > li {
  display: inline-block;
  width: 31.8rem;
  margin: 0 1.2rem;
 

}
#wrapper-main > div.board.details > div.content > div.photos > ul > li > img {

  margin-bottom: 1.8rem;
}
#wrapper-main > div.board.details > div.content > div.photos > ul > li > button {
  padding: 1.2rem 2rem;
  font-size: 1.4rem;
  color: #FFF;
  border: 1px solid #FFF;
}
*/




#wrapper-main > div.board.details > div.content > div.photos > div.paging {
  text-align: center;
  padding-top: 3.5rem 0;
  line-height: 3rem;
}
#wrapper-main > div.board.details > div.content > div.photos > div.paging > button {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}
#wrapper-main > div.board.details > div.content > div.photos > div.paging > button.prev {
  background: url(../img/btn_prev_01.svg) center no-repeat;
  margin-right: 3.5rem;
}
#wrapper-main > div.board.details > div.content > div.photos > div.paging > button.prev.disabled {
  background: url(../img/btn_prev_01_disabled.svg) center no-repeat;
}
#wrapper-main > div.board.details > div.content > div.photos > div.paging > button.next {
  background: url(../img/btn_next_01.svg) center no-repeat;
  margin-left: 3.5rem;
}
#wrapper-main > div.board.details > div.content > div.photos > div.paging > button.next.disabled {
  background: url(../img/btn_next_01_disabled.svg) center no-repeat;
}
#wrapper-main > div.board.details > div.content> div.photos > div.paging > span {
  font-size: 1.6rem;
  font-weight: 700;
  vertical-align: top;
}
#wrapper-main > div.board.details > div.content > div.photos > div.paging > span.current {
  color: #FFF;
}
#wrapper-main > div.board.details > div.content > div.photos > div.paging > span.total {
  color: #5A5A5A;
}



#wrapper-main > div.board.details > div.content > div.photos > div.goPage > p{
 font-size: 1.4rem;
  line-height: 2.4rem;
  color: #C6C6C6;
}
#wrapper-main > div.board.details > div.content > div.photos > div.goPage > form > input {
  height: 3rem;
  outline: none;
  font-size: 1.4rem;
  border-radius: 3px;
  vertical-align: top;
  background-color: #484848;
  background-repeat: no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #FFF;
  margin-bottom:1rem;
}

#wrapper-main > div.board.details > div.content > div.photos > div.goPage > form > table > tbody > tr > td > input {
  height: 3rem;
  outline: none;
  font-size: 1.4rem;
  border-radius: 3px;
  vertical-align: top;
  background-color: #484848;
  background-repeat: no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #FFF;
  margin-bottom: 0.6rem;

}
#wrapper-main > div.board.details > div.content > div.photos > div.goPage > form > table > tbody > tr > td > input {
  width: 100%;
  padding: 0 1.6rem;
  margin-left: 0 rem;
/*
  background-image: url(../img/search_01.svg);
  background-position: center right 1.2rem;*/
}
#wrapper-main > div.board.details > div.content > div.photos > div.goPage > form > table > tbody > tr > td > input::placeholder {
  color: rgba(255, 255, 255, 0.2);
}
#wrapper-main > div.board.details > div.content > div.photos > div.goPage > form > table > tbody > tr > td > input.bib-search {
  float: right;
  width: 10rem;
  height: 3rem;
  font-size: 1.4rem;
  
  background: #A6A6A6;
  text-align: center;
  line-height: 2.8rem;
  color: #FFFFFF;
  margin-left: 0.2rem;
  padding: 0;
}







/*------------------------------------------------------------------------------*/
/* mobile part                                                                             */
/*------------------------------------------------------------------------------*/

@media screen and (max-width: 430px) {
  html {
    font-size: 74.3%;
  }
  #wrapper-main {
    padding-bottom: 4rem;
  }
  #wrapper-main > div.result {
    width: 100%;
  }
  #wrapper-main > div.result > h3 {
    padding: 0 2rem 1.2rem;
  }
  #wrapper-main > div.result > ul {
    font-size: 0;
    padding: 0 2rem;
  }
  #wrapper-main > div.result > ul > li {
    width: 100%;
    height: auto;
  }
  #wrapper-main > div.result > ul > li.for-pc {
    display: none;
  }
  #wrapper-main > div.result > ul > li,
  #wrapper-main > div.result > ul > li:nth-child(4n - 3), 
  #wrapper-main > div.result > ul > li:nth-child(4n) {
    margin-left: 0;
    margin-right: 0;
  }
  #wrapper-main > div.result > ul > li:nth-child(n + 1) {
    margin-top: 2rem;
  }
  #wrapper-main > div.result > ul > li > div.content {
    padding: 3.8rem 2.8rem 3.3rem;
  }
  #wrapper-main > div.result > ul > li > div.content > p.subject {
    font-size: 2.6rem;
    white-space: wrap;
  }
  #wrapper-main > div.result > ul > li > div.content > p.date {
    width: calc(100% - 5.6rem);
    font-size: 1.8rem;
    left: 2.8rem;
    bottom: 3.3rem;
  }
  #wrapper-main > div.result > ul > li > img {
    position: relative;
  }
  #wrapper-main > div.board {
    width: 100%;
  }
  #wrapper-main > div.board.list {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 0;
  }

  /* form 추가 for mobile */
  #wrapper-main > div.board.list > div.search > form > select {
    display: block;
  }
  #wrapper-main > div.board.list > div.search > form > input {
    width: 100%;
    margin-left: 0;
    margin-top: 1rem;
  }
  /* 추가된 부분 500~506 */
  #wrapper-main > div.board.list > div.search > form > input + button.btn-search {
    left: auto;
    right: 1.2rem;
    top: auto;
    bottom: 1.2rem;
  }
  /* form 추가 끝 */

  #wrapper-main > div.board.list > a {
     color: #ffffff; 
    text-decoration: none;
  }

  #wrapper-main > div.board.list > table {
    margin-top: 2rem;
  }
  #wrapper-main > div.board.list > table th, 
  #wrapper-main > div.board.list > table td {
    padding-left: 0;
    padding-right: 0;

  }
  #wrapper-main > div.board.list > table th:first-child,
  #wrapper-main > div.board.list > table td:first-child {
    width: 4.5rem;
  }
  #wrapper-main > div.board.list > table td:first-child {
    padding-top: 0;
    padding-bottom: 0;
  }
  #wrapper-main > div.board.list > table td:first-child > img {
    width: 2.5rem;
  }
  #wrapper-main > div.board.list > table th:nth-child(2),
  #wrapper-main > div.board.list > table td:nth-child(2) {
    width: 11.0rem;
  }
  #wrapper-main > div.board.list > table th:last-child,
  #wrapper-main > div.board.list > table td:last-child {
    width: auto;
    padding-left: 1rem;
    padding-right: 0.5rem;
  }
  #wrapper-main > div.board.list > table td > p {
    width: 15.2rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }


  
  #wrapper-main > div.board.view {
    padding: 6.4rem 2rem 0;
  }
  #wrapper-main > div.board.view > button.btn-back {
    position: absolute;
    top: 2.2rem;
    left: 2rem;
  }

  #wrapper-main > div.board.view > h3 {
    margin-bottom: 0.5 rem;
    padding-top: 0;
  }
  #wrapper-main > div.board.view > h3 > a {
    display: block;
    margin: 0;
    padding: 0.7rem 0 0.5rem;
  }
  #wrapper-main > div.board.view > h3 > p.date {
    float: none;
    font-weight: 400;
  }
   #wrapper-main > div.board.view > h3 > table > tbody > tr > td > p.date {
    float: none;
    font-weight: 400;
  }

  #wrapper-main > div.board.view > h3 > p > span.type {
    margin-right: 0.2rem;
  }
  #wrapper-main > div.board.view > h3 > p > span.type.for-m {
    display: inline-block;
    margin-left: 0.2rem;
    font-weight: 400;
    vertical-align: bottom;
  }
  #wrapper-main > div.board.view > h3 > button.photo {
    margin-top: 0.6rem;
  }
  #wrapper-main > div.board.view > div.tournament-image > img {
    width: 100%;
  }
  #wrapper-main > div.board.view > div.content > div.category {

  }
    #wrapper-main > div.board.view > div.content > div.category > div.links {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 3rem;
  }
  #wrapper-main > div.board.view > div.content > div.category > div.links > a {
    margin: 0 0 1.5rem;
  }
  /*
  #wrapper-main > div.board.view > div.content > div.category > a {
    margin: 0 0 1.5rem;
  }
  #wrapper-main > div.board.view > div.content > div.category > a:nth-child(odd) {
    margin-left: 3rem;
  }
  #wrapper-main > div.board.view > div.content > div.category > a:nth-child(even) {
    margin-right: 3rem;
  }

  */
  #wrapper-main > div.board.view > div.content > div.category > div.sns > a:first-child > img {
    margin-left: 0;
  }
  #wrapper-main > div.board.view > div.content > ul.rank {
    width: 100%;
  }
  #wrapper-main > div.board.view > div.content > div.photos > ul > li {
    margin: 0 0 2rem;
  }
}


/*------------------------------------------------*/
/* m1.php												*/
/*------------------------------------------------*/
  #wrapper-main > div.board.details {
    padding: 6.4rem 2rem 0;
  }

  #wrapper-main > div.board.details > div.search > form > input {
    width: 100%;
    margin-left: 0;
    margin-top: 1rem;
    margin-bottom: 0.6rem;

  }

 /* 추가된 부분  */
  #wrapper-main > div.board.details > div.search > form > input + button.btn-search {
    left: auto;
    right: 1.2rem;
    top: auto;
    bottom: 1.2rem;
  }
  #wrapper-main > div.board.details > div.search > form > input + input.bib-search {
	position: absolute;
    top: 3.7rem;
    right:0rem;
 
 
  }



  #wrapper-main > div.board.details > button.btn-back {
    position: absolute;
    top: 2.2rem;
    left: 2rem;
  }

  #wrapper-main > div.board.details > h3 {
    /*margin-bottom: 2.2rem;*/
	margin-bottom: 0;
    padding-top: 0;
  }
  #wrapper-main > div.board.details > h3 > a {
    display: block;
    margin: 0;
    padding: 0.7rem 0 0.5rem;
  }
  #wrapper-main > div.board.details > h3 > p.date {
    float: none;
    font-weight: 400;
  }
  #wrapper-main > div.board.details > h3 > table > tbody > tr > td > p.date {
    float: none;
    font-weight: 400;
  }
  #wrapper-main > div.board.details > h3 > p > span.type {
    margin-right: 0.2rem;
  }
  #wrapper-main > div.board.details > h3 > p > span.type.for-m {
    display: inline-block;
    margin-left: 0.2rem;
    font-weight: 400;
    vertical-align: bottom;
  }
  #wrapper-main > div.board.details > h3 > button.photo {
    margin-top: 0.6rem;
  }
  #wrapper-main > div.board.details > div.tournament-image > img {
    width: 100%;
  }
  #wrapper-main > div.board.details > div.content > div.category {

  }
    #wrapper-main > div.board.details > div.content > div.category > div.links {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 3rem;
  }
  #wrapper-main > div.board.details> div.content > div.category > div.links > a {
    margin: 0 0 1.5rem;
  }
  #wrapper-main > div.board.details > div.content > div.category > div.sns > a:first-child > img {
    margin-left: 0;
  }
  #wrapper-main > div.board.details > div.content > ul.rank {
    width: 100%;
  }
  #wrapper-main > div.board.details > div.content > div.photos > ul > li {
    margin: 0 0 2rem;
  }
 







@media screen and (max-width: 414px) {
  html {
    font-size: 71.875%;
  }
  #wrapper-main > div.board.list > table td > p {
    width: 15rem;
  }
}
@media screen and (max-width: 412px) {
  html {
    font-size: 71.53%;
  }
}
@media screen and (max-width: 390px) {
  html {
    font-size: 67.7%;
  }
}
@media screen and (max-width: 375px) {
  html {
    font-size: 65.1%;
  }
}
@media screen and (max-width: 360px) {
  html {
    font-size: 62.5%;
  }
}