


.box_m {letter-spacing:-0.04em;	margin: 0;
  background-color: #fff; border-top: 1px solid #dddddd;
  display: block;
  position: relative;
 
  /*---webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);--*/
}

.box_m figure {
  margin-bottom: 0;
  overflow: hidden;
  position: relative;
 
}



/* 전국입점업체배너메인 */
.ctam {
  position: relative;
  padding:5px 0 5px 0px ;
  background: #ddd;
}

.ctam3 {
  position: relative;
  padding:0px 0 5px 0px ;
  background: #3838cc;
}

.ctam4 {
  position: relative;
  padding:0px 0 0px 0px ;
  background:none;
  
}


.ctam5 {
  position: relative;
  padding:20px 0 0px 0px ;margin:0px;
background: -webkit-linear-gradient(left,#f9e1e1, #faece6);
  
}




/* 하단고정 */
.ctabtm{
  position: relative;
  padding:0px ;
  background: #ff3c3c;margin-bottom:0px;text-align: center;
/* background: #3838cc url(http://2424.net/mall/img/bg/banner_bg.jpg) no-repeat center center; */
}


@media (max-width: 767px) {
.ctabtm{
  margin-bottom:-30px;margin-top:5px;
}


}


.btn-proposal {
      display: block;
      width: 100%;
      max-width: 320px;
      background-color: #304cdd; /* 포인트 컬러 복귀 */
      color: #ffffff;
      font-size: 16px;
      font-weight: 700;
      padding: 14px 10px;
      border-radius: 10px;
      text-decoration: none;
      border: none;
      cursor: pointer;
      box-shadow: 0 6px 16px rgba(48, 76, 221, 0.3);
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      box-sizing: border-box;
    }

    .btn_1:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    }



 /* 배너들을 감싸는 컨테이너 */
  .banner-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 800px;
    margin: 0 auto;
  }

  /* 공통 배너 뼈대 */
  .banner-box {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 양끝 정렬의 핵심 원리 */
    padding:10px 20px;
    border-radius:0px;
    box-sizing: border-box;margin-bottom:10px;
  }

  /* 우측 버튼 공통 스타일 */
  .action-btn {
    padding: 10px 25px;
    background-color: #ffffff;
    color: #e53935;
    border: 1px solid #e53935;
    border-radius: 4px;
    font-size: 15px;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  .action-btn:hover {
    background-color: #fff9f9;color: #121212;
  }

  /* 1번 & 3번: 붉은색 그라데이션 바탕 배너 */
  .theme-red {
    background: linear-gradient(135deg, #d50302 , #e7dbdb);
    color: #ffffff;
  }
  .theme-red .title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
  }

  /* 2번: 베이지톤 바탕, 좌측 이미지 배너 */
  .theme-beige {
    background-color: #fdf6ec; /* 옅은 베이지 */
    border: 1px solid #f5e2c8;
    justify-content: flex-start; /* 좌측 정렬로 덮어쓰기 */
    gap: 20px;
  }
  .img-placeholder {
    width: 60px;
    height: 60px;
    background-color: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #757575;
    font-size: 12px;
  }
  .text-group h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
    color: #333333;
  }
  .text-group p {
    margin: 0;
    font-size: 14px;
    color: #666666;
  }

  /* 3번: 뱃지 타이틀 컨텐츠 */
  .badge-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .badge {
    background-color: #000000;
    color: #ffffff;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.5px;
  }



.box_style_tban2 { 
	padding: 0px;border:1px solid #ff3c3c;
	position: relative;background:#3dad85;
	/* -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
--------------------------------------------------------
	background:#fa4748 url(../img/bg/main_ban.png) center left no-repeat;---------*/
	margin-bottom:5px;
	color: #333;
	
	
}


.box_style_tban2 img {
  width: 160px;
  overflow: hidden;
 
}






/* 관리*/
a.box_tel {border: 0px solid #cfd2d1;
  text-align: center;
  background:#3684ff;
  padding: 10px;margin-top:10px;
  display: block;
  color: #FFFFF;
  margin-bottom: 0px;
  overflow: hidden;
  -webkit-border-radius:2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  border-radius: 2px; 
}
a.box_tel h3 {
  font-size: 20px;
  font-size: 1.25rem;color: #fff;
}

a.box_tel h4 {
  font-size: 20px;
   font-size: 1.25rem;color: #333;
}

@media (max-width: 767px) {
  a.box_tel {
    padding:8px;
  }

}


/* 메인고정하단*/

.si-stickymain {  border-top: 1px solid #a7a9ac;

background:#ffffff;
-webkit-box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.3);

/* background: rgba(0, 0, 0, 0.8);*/

/* background: rgba(0, 0, 0, 0.8);*/
height:50px;
	position: fixed;
	bottom:0px;
	width: 100%; 
}

.m_categories {
 
   /*-- margin-top: -30px;
  margin-bottom: 25px;---*/
  position: relative;
  z-index: 99;
}
.m_categories ul {
  background-color: #fff;
   /*---webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);---*/
  text-align: center;
  padding: 15px 0;
  width: 90%;
  margin: auto;
}
@media (max-width: 767px) {
  .m_categories ul {
    width: 100%;
  }

}
.m_categories ul li {
  display: inline-block;
  width: 20%;
  float: left;
  border-right: 1px solid #d2d8dd;
}
.m_categories ul li:last-child {
  border-right: none;
}
.m_categories ul li a {
  display: block;
}
.m_categories ul li a h3 {
  font-size: 14px;
  font-size: 0.875rem;
}
.m_categories ul li a img {background-color: #fff; 
border-top: 2px solid #a7a9ac;
   margin-top: -30px;
  margin-bottom: 10px;
 -webkit-border-radius: 40px;
  -moz-border-radius:40px;
  -ms-border-radius: 40px;
  border-radius: 40px;
  text-align: center;
padding:10px;
max-height:65px
}

.m_categories ul li:last-child,.m_categories ul li:nth-child(3),.m_categories ul li:nth-child(2) {
  border-right: none;
}


@media (max-width: 767px) {
  .m_categories ul li a h3 {
     display: block;
  }


}
.m_categories ul li a i {
  font-size: 26px;
  font-size: 1.625rem;
  display: inline-block;
}



.box_grid2 {letter-spacing:-0.04em;	
  background-color: #fff;border: 0px solid #dddddd;
  display: block;
  position: relative;
  margin-bottom: 10px;
  /*---webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);--*/
}
.box_grid2 .wrapper { line-height:26px; font-size: 15px;
  padding: 20px 20px 20px 20px;
}

@media (max-width: 767px) {
.box_grid2 .wrapper {font-size: 14px;
  padding: 10px 5px 15px 5px;/*-------- 상우하좌--------*/
   
}
  
}

.box_grid2 .wrapper li {  
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
 width: 100%;height:32px; padding:4px; line-height: 32px; /*  border-bottom: 1px solid #DDD; */
}



.box_grid3 figure {
  margin-bottom: 0;
  overflow: hidden;
  position: relative;
  height:100px;border-bottom: 1px solid #ededed;
}
.box_grid3 figure small {
  position: absolute;
  background-color: black;
  background-color: rgba(0, 0, 0, 0.6);
  left: 20px;
  top: 22px;
  text-transform: uppercase;
  color: #ccc;
  font-weight: 500;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  padding: 7px 10px 4px 10px;
  line-height: 1;
}

.box_grid3 figure a img {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) scale(1.1);
  -moz-transform: translate(-50%, -50%) scale(1.1);
  -ms-transform: translate(-50%, -50%) scale(1.1);
  -o-transform: translate(-50%, -50%) scale(1.1);
  transform: translate(-50%, -50%) scale(1.1);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  width: 100%;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.box_grid3 figure a:hover img {
  -webkit-transform: translate(-50%, -50%) scale(1);
  -moz-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  -o-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
}


.ctam2 {margin:0px;
  position: relative;
  padding:10px 0 0px 0px ;
  background: #fff;
}

/* 전국입점업체배너메인 */
.cta4 {
  position: relative;
  padding:25px ;
  background: #3838cc url(../mall/img/bg/banner_bg.jpg) no-repeat center center;
}
.cta4 .title {
  margin: 0;
  line-height: 38px;
}

.cta4 h3 {
  font-size:24px;
}

.cta4 h4 {
  font-size:18px;
}
.cta4 .title .color {
  color: #ffffff;
}

.cta4 .button {
	padding: 0px 0;
	padding-right: 0px;margin-top:-10px;
	float: right;
}

@media all and (max-width: 769px) {
.cta4 {margin: 0px ;
  position: relative;
 padding:20px 0px 10px 10px ;
  
}
.btn { position: relative;text-transform: uppercase; 
-moz-border-radius: 10px; -webkit-border-radius: 10px; 
border-radius: 10px;
 }

}

.box {
    position: relative;
    width: 100%;
    height: 20px;
    background-color: #FFF;
    float: left;
    margin-left: 10px;
    margin-bottom: 20px;margin-top:10px;
}
.box h4 {
    font-size: 16px;   
    margin-left:-10px;
}
.box .underbar {
    position: absolute;
    top: 28px;
    left: 5px;
    width: 30px;
    height: 2px;
    background-color: #e74c3c;
}

.box_my .underbar{
    position: absolute;
    top: 35px;
    left: 10px;
    width: 30px;
    height: 2px;
    background-color: #e74c3c;
}

.box_my h4 {
    font-size: 16px;
   
    margin: 0px;margin-bottom:20px;
}
.btn-now-status {
    position: absolute;
    top:0px;
    right:20px;
}

.box .btn {
    position: absolute;
    bottom: 40px;
    left: 0px;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 2px solid #e74c3c;
    font-weight: bold;
    border-radius: 25px;
    font-size: 13px;
    transition: 0.3s;
}
.box .btn:hover {
    background-color: #e74c3c;
    color: #FFF;
}.box .m_img {
    display: block;
    max-width: 340px;
    margin: 0 auto;
	width:100%;
}


.box_my2 h4{ font-size:18px;color: #fafafa;
 
}.box_my2 h5{ font-size:18px;color: #f85a50;
 
}
.box_my2 h5 strong{  font-size:16px; color: #ffffff; 
}
.box_my2 h5 span{  position: absolute;
    bottom: 20px;
    right: 10px;
   
 
}

@media (max-width: 767px) {
  .box_my2 {
    padding:20px 10px 10px 10px;
  }

.box_my2 h5{ 
 
}


}



.box_my2 .underbar{
    position: absolute;
    top: 45px;
    left: 10px;
    width: 180px;
    height: 2px;
    background-color: #e74c3c;
}

.box_my2 h4 {

   
    margin: 0px;margin-bottom:15px;
}



/* 하단고정 */
.ctabtm{
  position: relative;
  padding:0px ;
  background: #ff3c3c;margin-bottom:-80px;text-align: center;
/* background: #3838cc url(http://2424.net/mall/img/bg/banner_bg.jpg) no-repeat center center; */
}


@media (max-width: 767px) {
.ctabtm{
  margin-bottom:-30px;margin-top:5px;
}


}


/* ---퀵메뉴 추가--------------------------------------------*/


.box_style_topnew {
	padding:5px;border: 1px solid #333;
	position: relative;background:#06744f ;
	/* 
--------------------------------------------------------
	background:#fa4748 url(../../common/img_24/bg/main_ban.png) center left no-repeat;---------*/
	margin-bottom: 5px;
	color: #ffffff;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
	text-align: center;
}

.box_style_topnew h3 {
	font-size: 18px;margin:10px 0px 10px 0px;
}
.box_style_topnew img {
  width:140px;margin-bottom:10px;
  
 
}

/* ---퀵메뉴---추가-----------------------------------------*/

.box_style_24,.box_style_24m  {
	padding: 10px;border: 1px solid #fa4748;
	position: relative;background:#fff ;
	/* 
--------------------------------------------------------
	background:#fa4748 url(../img/bg/main_ban.png) center left no-repeat;---------*/
	margin-bottom:8px;
	color: #333;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
	text-align: center;
}

.box_style_24  h3,.box_style_24m h3 {
	font-size: 18px;margin-bottom:0px;
}

.box_style_24m h6 {
	font-size: 14px;margin-bottom:5px;
}
.box_style_24 h3 strong,.box_style_24m h3 strong {
	color:#fa4748;font-weight:500;
}
.box_style_24 h6 span,.box_style_24m h6 span {
	color:#fa4748;font-weight:500;
}

.box_style_24 img {
  width: 40px;
}
.box_style_24m img{
  width:60px;
}
.box_style_24 i,.box_style_24m i {
 font-size: 46px;margin-bottom:0px;
}

/* 플로팅 배너 공통 뼈대 */
  .floating-banner {
    /* 실제 적용 시 아래 주석을 해제하여 화면 우측 하단 등에 고정하세요 */
    /* position: fixed; right: 20px; bottom: 20px; z-index: 1000; */
    border-radius: 0px 0px 6px 6px;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
  }

  /* 공통 호버 효과: 위로 살짝 떠오르며 그림자 강조 */
  .floating-banner:hover {
    transform: translateY(-2px);
  }

  /* 공통 요소 스타일 */
  .fb-title {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 6px 0;
    line-height: 1.3;
  }

    .fb-title img {
     width:20px;
    height:20px;
  }
  .fb-subtitle {
    font-size: 13px;
    font-weight: 400;
    margin: 0 0 16px 0;
    word-break: keep-all;
  }
  .fb-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 16px;
  }
  .fb-btn {
    width: 100%;
    padding: 12px 0;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s, color 0.2s;
  }

  /* =========================================
     스타일 1: 솔리드 라이트 (Solid Light) 
     높은 대비로 깔끔함을 강조한 화이트 배경
  ========================================= */
  .style-light {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  }
  .style-light:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
  }
  .style-light .fb-title { color: #000000; }
  .style-light .fb-subtitle { color: #555555; }
  .style-light .fb-image { 
    background-color: #f0f0f0; 
    border: 1px solid #dddddd;
  }
  .style-light .fb-btn {
    background-color: #000000;
    color: #ffffff;
  }
  .style-light .fb-btn:hover {
    background-color: #333333;
  }

/* --------------------------------------------------------------------------
/* ---박스 쉐도우 컬러추가
/* ----------------------------------------------------------------------------- */


/*-------- box-shadow color --------*/
.blue_bs {box-shadow: 0px  -3px #333;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  border-radius: 2px;
border:1px solid #333;
}


/*-------- box-shadow color --------*/
.red-bs {box-shadow: 0px -3px #e9463f;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  border-radius: 2px;
border: 1px solid #e9463f;

}

/*-------- box-shadow color --------*/
.bk-bs {box-shadow: 0px -3px #333333;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  border-radius: 2px;
border: 1px solid #333333;background:#ffffff;
}


/* --------------------------------------------------------------------------
/* ---콘텐츠 타이틀
/* ----------------------------------------------------------------------------- */
.ctam1 { padding:5px ;}
.c2 { margin:5px ;border: 0px solid #cfd2d1;}
.c3 { margin:5px ;border: 0px solid #cfd2d1;}
.c4 { margin:5px ;border: 0px solid #cfd2d1;}




.trusted-badge {
  margin-top: 10px;
  padding:0px 10px 5px 10px;
  height: 100%;
  -ms-display: flex;
  -webkit-display: flex;
  display: -webkit-box;
  display: flex;
  -ms-align-items: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-justify-content: center;
  -webkit-justify-content: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;position: relative;}

.bg-trust-1 {
  background-color: #FCEDDA;border-top:1px solid #f4d4a9; border-bottom:1px solid #f4d4a9; }
.bg-trust-2 {
  background-color: #fafafa; }

.bg-trust-3 {
  background-color: #fceeed;border:1px solid #fceeed; padding:10px;}
.bg_event {
 background: linear-gradient(to right,red,blue);

}
.bg_event2 {
 background: linear-gradient(to bottom,#1d53ee , #0ce4dc );

}
.bg_red2 {border:1px solid #ee212e;
 background: linear-gradient(to top,#f5534c , #ee212e);

}
.bg_red4 {border:1px solid #ee212e;
 background: linear-gradient(to right,#d50302 , #e7dbdb);

}
.bg_red3 {
 background: linear-gradient(to right,#d40c52 , #ee212e);

}
.bg_redgra {
  background: linear-gradient(to right,#fb303d  , #ee212e);

}


.bg_green {border:1px solid #069631;
 background: linear-gradient(to bottom , #069631,#0c8e5e);

}
.bg_yel {
 background: linear-gradient(to right,#ba5409 , #d7b06b);

}


/* Testimonial */
.client-detail{
	display:flex;
	align-items: center;background-color: #ffffff;
	margin-bottom:0px;border:1px solid #e9463f;padding:20px 15px 20px 15px;;
}

/* 하단고정 */
.ctatel{
  position: relative;
  padding:0px ;
  background: #ff3c3c;margin-top:40px;text-align: center;
/* background: #3838cc url(http://2424.net/mall/img/bg/banner_bg.jpg) no-repeat center center; */
}


/*메인배너*/
.box_my2 {  
 width: 100%;
background: #06744f url(../common/img_24/main_bannerbg2.jpg) no-repeat center center;
  padding:20px;
  margin-bottom: 20px;
  border: 1px solid #006834;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  border-radius: 2px;
  position: relative;
}


@media (max-width: 767px) {
#footer { position: relative; margin-top:10px;}
}	



/* 하단고정 */
.ctatel{
  position: relative;
  padding:0px ;
  background: #ff3c3c;margin-top:40px;text-align: center;
/* background: #3838cc url(http://2424.net/mall/img/bg/banner_bg.jpg) no-repeat center center; */
}



/* 서브 공통 퀵 고정위치
-----------------------------------------------------------------*/
.si-sticky-sub { 
	position: fixed;
	top:170px;
	left: 5px;
	width: 160px;
}

/* 
-----------------------------------------------------------------*/

.si-sticky-sub.si-sticky-right {
	left: auto;
	right: 8px;
}
