.sub_layout .si_inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  padding: 40px 20px;
}

.sub_layout .sub_sidebar {
  grid-column: span 3;
  position: sticky;
  top: 120px;
  align-self: flex-start;
}

.sub_layout .sub_sidebar img {
  width: 100%;
}

.sub_layout .sub_content {
  grid-column: span 9;
}

.sub_layout .sub_container {
  background: #fff;
  padding: 40px;
  border-radius: 20px;
}

/* 상단 배너 */
.sub_layout .sub_banner {
  margin-bottom: 20px;
  display: block;
}

.sub_layout .sub_banner .sub_banner_swip {
  height: inherit;
  border-radius: 20px;
}

.sub_layout .sub_banner .slide01 {
  background: #e9f3fd url('/img/main/mainslide_01_m.png') no-repeat center
    right/cover;
}

.sub_layout .sub_banner .slide02 {
  background: #fff7d6 url('/img/main/mainslide_02_m.png') no-repeat center
    right/cover;
}

.sub_layout .sub_banner .swiper-slide {
  background-size: 85px;
  background-position: 95%;
  display: flex;
  align-items: center;
}

.sub_layout .sub_banner .swiper-slide h2 {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 5px;
}

.sub_layout .sub_banner .swiper-slide p {
  font-size: 1.125rem;
  font-weight: 400;
}

.sub_layout .sub_banner .swiper-pagination-bullet-active {
  width: 20px;
  border-radius: 20px;
}

/* 사이드바 */
.sub_sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sub_sidebar .widget_wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sub_sidebar .login_sub {
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  text-align: left;
}

.sub_sidebar .login_sub span {
  font-size: 0.875rem;
  display: block;
  margin-bottom: 10px;
  color: var(--color-gray-03);
}

.sub_sidebar .login_sub h2 {
  margin-bottom: 16px;
  font-size: 1.125rem;
}

.sub_sidebar .login_sub a {
  background: var(--color-primary);
  color: #fff;
  padding: 12px;
  border-radius: 10px;
}

.sub_sidebar .login_sub strong {
  color: var(--color-gray-03);
}

.sub_sidebar .login_sub i {
  display: block;
  margin-top: 10px;
  color: var(--color-primary);
  font-style: normal;
}

/* 서브페이지 레이아웃 반응형 */
@media screen and (max-width: 1024px) {
  .sub_layout .sub_sidebar,
  .sub_layout .sub_content {
    grid-column: span 12;
  }

  .sub_layout .sub_sidebar {
    position: static;
  }

  .sub_sidebar .widget_wrap {
    flex-direction: row;
  }
}

@media screen and (max-width: 768px) {
  .sub_sidebar .widget_wrap {
    gap: 10px;
  }
}

@media screen and (max-width: 512px) {
  .sub_sidebar .widget_wrap {
    flex-direction: column;
  }



  .sub_layout .sub_banner .swiper-slide h2 {
    font-size: 1rem;
  }

  .sub_layout .sub_banner .swiper-slide p {
    font-size: 0.875rem;
  }

  .sub_layout .sub_container {
    padding: 20px;
  }
}

/* 결제페이지 */

.sub_payment h3 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 1.75rem;
}

.current_point {
  border: 1px solid var(--color-gray-02);
  border-radius: 20px;
  padding: 20px;
  text-align: center;
}

.current_point h4 {
  margin-bottom: 10px;
}

.current_point strong {
  color: var(--color-primary);
}

.recharge_point {
  margin-top: 20px;
}

.recharge_point .box {
  padding: 20px;
  background: var(--color-gray-01);
  border-radius: 20px;
  text-align: center;
}

.recharge_point .box input {
  border: 1px solid var(--color-gray-02);
  outline: 0;
  background: #fff;
  padding: 10px;
  display: inline-block;
  margin: 0 5px;
}


.sub_payment .payment_choice{
  margin-top: 40px;
}

.sub_payment .payment_choice ul {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.sub_payment .payment_choice ul li {
  flex: 1;
}

.sub_payment .payment_choice ul li a {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 10px;
  text-align: center;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  transition: 0.3s all;
}

.sub_payment .payment_choice ul li a span{
  font-size: 0.875rem;
}

.sub_payment .payment_choice ul li a:hover{
  background: var(--color-primary);
  color: #fff;
}


.sub_guide ul{
	border-top: 1px solid #111;
	border-bottom: 1px solid #111;
	padding: 40px 0;
	display: flex;
}

.sub_guide ul li{
	flex: 1;
	text-align: center;
	display: flex;
	align-items: center;
	flex-direction: column;
	position: relative;
}

.sub_guide ul li::after{
	content: url(/img/sub/arrow_right.png);
	display: flex;
	align-items: center;
	position: absolute;
	top: -4px;
	right: -20px;
}


.sub_guide ul li:last-child::after{
 display: none;
}


.sub_guide h3{
 font-size: 1.25rem;
 margin-bottom: 20px;
}

.sub_guide ul strong{
 color: var(--color-primary);
 font-size: 1.125rem;
 display: block;
 margin-bottom: 30px;
 padding: 5px 20px;
 background: var(--color-gray-01);
 border-radius: 30px;
}


.sub_guide .guide_item{
 margin-top: 40px;
 padding: 20px;
 background: var(--color-gray-01);
 border-radius: 20px;
}


.sub_guide .guide_item  p{
 padding: 10px 0;
}