html,
body {
  overflow-x: hidden;
}

/*------------ sec head ------------*/
.sec_head {
  margin-top: clamp(102px, 7.29vw, 140px);
}
.sec_head .container {
  background-image: url(../img/sub_bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  max-width: 100%;
  height: clamp(220px, 14.58vw, 280px);
}
.sec_head .container h2 {
  font-size: clamp(30px, 2.08vw, 40px);
  font-weight: 700;
}
.sec_head .category {
  border-bottom: 1px solid #eee;
}
.sec_head .category .list_item {
  width: 50%;
  position: relative;
}
.sec_head .category .list_item::after {
  content: "";
  width: 100%;
  height: 3px;
  background-color: var(--color-point);
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  display: none;
}
.sec_head .category .list_item a {
  font-size: clamp(16px, 1.04vw, 20px);
  padding: clamp(18px, 1.2vw, 23px) 0;
  color: #888;
}
.sec_head .category .on::after {
  display: block;
}
.sec_head .category .on a {
  color: var(--color-point);
  font-weight: 700;
}

.sec_head.scroll {
  margin-top: clamp(58px, 4.17vw, 80px);
}

/*------------ sec tit ------------*/
.sec_tit span {
  font-size: clamp(16px, 0.94vw, 18px);
  font-weight: 700;
  color: var(--color-point);
}
.sec_tit span::before {
  content: "";
  width: clamp(20px, 1.2vw, 23px);
  height: clamp(13px, 0.78vw, 15px);
  background-image: url(../img/sub_title_ico.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  margin-right: clamp(5px, 0.52vw, 10px);
}
.sec_tit h2 {
  font-size: clamp(32px, 2.4vw, 46px);
  font-weight: 700;
  line-height: 1.4;
}
.sec_tit p {
  font-size: clamp(18px, 1.04vw, 20px);
  color: #888;
  line-height: 1.5;
}

/*------------ cont category ------------*/
.cont_category .list_item:not(:last-child) {
  margin-right: clamp(10px, 0.83vw, 16px);
}
.cont_category .list_item a {
  font-size: clamp(16px, 0.94vw, 18px);
  font-weight: 500;
  color: #888;
  border: 1px solid #ddd;
  border-radius: 500px;
  padding: clamp(10px, 0.78vw, 15px) clamp(25px, 1.67vw, 32px);
  transition: 0.4s;
}
.cont_category .list_item:hover a {
  font-weight: 700;
  color: #fff;
  background-color: var(--color-point);
  border-color: var(--color-point);
}
.cont_category .on a {
  font-weight: 700;
  color: #fff;
  background-color: var(--color-point);
  border-color: var(--color-point);
}

/*------------ button ------------*/
.button_wrapper button,
.button_wrapper a {
  font-size: clamp(18px, 1.04vw, 20px);
  font-weight: 500;
  width: clamp(130px, 8.33vw, 160px);
  padding: clamp(12px, 0.89vw, 17px) 0;
  border-radius: 10px;
  transition: 0.4s;
}
.button_wrapper button:hover,
.button_wrapper a:hover {
  background-color: #888;
}
.button_wrapper .prev_btn {
  border: 1px solid #ddd;
  background-color: #fff;
  margin-right: 14px;
}
.button_wrapper .prev_btn:hover {
  color: #fff;
}
.button_wrapper .next_btn {
  background-color: #333;
  color: #fff;
}

.write_btn,
.submit_btn {
  font-size: clamp(18px, 1.04vw, 20px);
  font-weight: 500;
  width: clamp(130px, 8.33vw, 160px);
  padding: clamp(12px, 0.89vw, 17px) 0;
  border-radius: 10px;
  transition: 0.4s;
  background-color: #333;
  color: #fff;
}
.write_btn:hover,
.submit_btn:hover {
  background-color: #888;
  color: #fff;
}

/*------------ pagination ------------*/
.pagination .first,
.pagination .last {
  width: clamp(14px, 0.73vw, 14px);
  height: clamp(14px, 0.73vw, 14px);
  background-image: url(../img/pagination_first_arrow.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.pagination .prev,
.pagination .next {
  width: clamp(8px, 0.42vw, 8px);
  height: clamp(14px, 0.73vw, 14px);
  background-image: url(../img/pagination_prev_arrow.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.pagination .last,
.pagination .next {
  transform: rotate(180deg);
}
.pagination .first {
  margin-right: clamp(40px, 2.08vw, 40px);
}
.pagination .prev {
  margin-right: clamp(25px, 1.3vw, 25px);
}
.pagination .last {
  margin-left: clamp(40px, 2.08vw, 40px);
}
.pagination .next {
  margin-left: clamp(20px, 1.04vw, 20px);
}
.pagination .num {
  width: clamp(45px, 2.34vw, 45px);
  height: clamp(45px, 2.34vw, 45px);
  border-radius: 50%;
  font-size: clamp(18px, 0.94vw, 18px);
  margin-right: 5px;
}
.pagination .on {
  background-color: var(--color-point);
  color: #fff;
  font-weight: 600;
}

/* --------------------- RWD --------------------- */
@media (max-width: 750px) {
  .sec_head {
    margin-top: clamp(116px, 31.33vw, 235px);
  }
  .sec_head .container {
    height: clamp(210px, 56vw, 420px);
    background-image: url(../img/mo_sub_bg.jpg);
  }
  .sec_head .container h2 {
    font-size: clamp(27px, 7.2vw, 54px);
  }
  .sec_head .category .list_item a {
    font-size: clamp(16px, 4vw, 30px);
    padding: clamp(17px, 4.93vw, 37px) 0;
  }
  .sec_head.scroll {
    margin-top: clamp(66px, 18vw, 135px);
  }
  
  
  .sec_tit span {
    font-size: clamp(16px, 4vw, 30px);
  }
  .sec_tit span::before {
    width: clamp(19px, 5.07vw, 38px);
    height: clamp(12px, 3.2vw, 24px);
    background-image: url(../img/mo_sub_title_ico.png);
    margin-right: clamp(7px, 1.87vw, 14px);
  }
  .sec_tit h2 {
    font-size: clamp(24px, 6.67vw, 50px);
  }
  .sec_tit p {
	font-size: clamp(14px, 4.00vw, 30px);
  }
  
  .cont_category .list_item:not(:last-child) {
	  margin-right: clamp(8px, 2.67vw, 20px);
  }
  .cont_category .list_item a {
	  font-size: clamp(14px, 4.00vw, 30px);
	  padding: clamp(11px, 2.80vw, 21px) clamp(15px, 5.07vw, 38px);
  }
  
  .button_wrapper button,
  .button_wrapper a {
	  width: calc((100% - clamp(15px, 4.00vw, 30px)) / 2);
	  font-size: clamp(16px, 4.00vw, 30px);
	  padding: clamp(15px, 4.80vw, 36px) 0;
  }
  .button_wrapper .prev_btn {
	  margin-right: clamp(15px, 4.00vw, 30px);
  }
  .write_btn {
	  width: clamp(158px, 42.00vw, 315px);
	  font-size: clamp(15px, 4.00vw, 30px);
	  padding: clamp(19px, 4.93vw, 37px) 0;
  }
  
  .pagination .first, .pagination .last {
	  width: clamp(10px, 2.67vw, 20px);
	  height: clamp(10px, 2.67vw, 20px);
	  background-image: url(../img/mo_pagination_first_arrow.png);
  }
  .pagination .prev, .pagination .next {
	  width: clamp(5px, 1.33vw, 10px);
	  height: clamp(10px, 2.67vw, 20px);
	  background-image: url(../img/mo_pagination_prev_arrow.png);
  }
  .pagination .first, .pagination .prev {
	  margin-right: clamp(25px, 6.67vw, 50px);
  }
  .pagination .last {
	  margin-left: clamp(25px, 6.67vw, 50px);
  }
   .pagination .next {
	   margin-left: clamp(15px, 4.00vw, 30px);
   }
  .pagination .num {
	  width: clamp(35px, 9.33vw, 70px);
	  height: clamp(35px, 9.33vw, 70px);
	  font-size:  clamp(16px, 4.00vw, 30px);
	  margin-right: clamp(10px, 2.67vw, 20px);
  }
}