/* 폰트 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

.pretendard {
  font-family: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

@font-face {
  font-family: "MaruBuri";
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.eot);
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.eot?#iefix)
      format("embedded-opentype"),
    url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.woff2)
      format("woff2"),
    url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.woff)
      format("woff"),
    url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.ttf)
      format("truetype");
}

@font-face {
  font-family: "MaruBuriSemiBold";
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.eot);
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.eot?#iefix)
      format("embedded-opentype"),
    url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.woff2)
      format("woff2"),
    url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.woff)
      format("woff"),
    url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.ttf)
      format("truetype");
}

@font-face {
  font-family: "MaruBuriBold";
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.eot);
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.eot?#iefix)
      format("embedded-opentype"),
    url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.woff2)
      format("woff2"),
    url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.woff)
      format("woff"),
    url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.ttf)
      format("truetype");
}

@font-face {
  font-family: "MaruBuriLight";
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Light.eot);
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Light.eot?#iefix)
      format("embedded-opentype"),
    url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Light.woff2)
      format("woff2"),
    url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Light.woff)
      format("woff"),
    url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Light.ttf)
      format("truetype");
}

@font-face {
  font-family: "MaruBuriExtraLight";
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-ExtraLight.eot);
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-ExtraLight.eot?#iefix)
      format("embedded-opentype"),
    url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-ExtraLight.woff2)
      format("woff2"),
    url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-ExtraLight.woff)
      format("woff"),
    url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-ExtraLight.ttf)
      format("truetype");
}

.maru {
  font-family: "MaruBuri", sans-serif;
}

button {
  cursor: pointer;
}

/* 내비게이션 */
#gnb_pc .active {
  color: #5f277b;
}

/* 메인 슬라이드 */
.swiper-pagination-bullet {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  margin: 0 !important;
  background-color: white;
  opacity: 1;
  /* transition: width 0.3s ease, left 0.3s ease; */
  width: 0;
  border-radius: 0;
}

.swiper-pagination-bullet-active:nth-child(1) {
  width: 33.3333%;
  left: 0%;
}
.swiper-pagination-bullet-active:nth-child(2) {
  width: 33.3333%;
  left: 33.3333%;
}
.swiper-pagination-bullet-active:nth-child(3) {
  width: 33.3333%;
  left: 66.6666%;
}

.custom-bg-under,
.custom-bg-opacity {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center;
  z-index: -1;
}

.custom-bg-under {
  background-image: url("/img/idx_rvw_ntc_bg_2.png"),
    url("/img/idx_rvw_ntc_bg_1.png");
  background-position: right 90%, left center;
  background-size: auto, auto;
}

.custom-bg-opacity {
  background-image: url("/img/bg.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.4;
}

/* 회사소개 */
@keyframes marquee-loop {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.marquee-wrapper {
  display: flex;
  width: max-content;
  animation: marquee-loop 20s linear infinite;
}

.animate-marquee-left {
  animation: marquee-left 20s linear infinite;
}

/* 라디오 버튼 */
.radio-wrap {
  display: flex;
  gap: 2rem;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.radio-label input[type="radio"] {
  display: none;
}

.custom-radio {
  width: 22px;
  height: 22px;
  border: 1px solid #e5e5ec;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.custom-radio::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #e5e5ec;
  /* 기본 상태에서도 보여야 하므로 설정 */
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.radio-label input[type="radio"]:checked + .custom-radio {
  border-color: #5f277b;
}

.radio-label input[type="radio"]:checked + .custom-radio::after {
  background-color: #5f277b;
}

/* 장례시설안내 */
.region_warp{width: 100%; overflow-x: auto; background-color: #eee; padding: 5px 0px;}
.region {display: flex; justify-content: space-between; min-width: 800px;}
.region .active { font-weight: 600; color: #5f277b; }
.region li{width: 100%; padding: 10px 0px;}

.sec_bg{position: relative;}
.sec_bg:after{content: ''; width: 300%; height: 100%; background: #f9f6fa; position: absolute; left: -150%; top: 0; z-index: -1;}

@media screen and (min-width: 768px) {
  .custom-bg-under {
    background-image: url("/img/idx_rvw_ntc_bg_2_md.png"),
      url("/img/idx_rvw_ntc_bg_1_md.png");
    background-position: right top, left bottom;
    background-size: auto, auto;
  }

  #idx_prcs .active {
    background-color: #fff;
    border: 1px solid #e5e5ec;
  }
  #idx_prcs .active strong {
    color: #111;
  }
  #idx_prcs .active div span {
    color: #505050;
  }
  #idx_prcs .active > span {
    background-color: #5f277b;
    color: #fff;
  }
}

#header{width: 100%;position: fixed;top: 0;z-index: 999; transition: 0.3s all; box-shadow:0px 0px 4px rgba(0,0,0,0.1); background: #fff; padding: 0px 20px;}
#header .head_login_wrap{display: flex; align-items: center;}
#header .head_login{display: flex;justify-content: flex-end;padding: 7px 10px; border: 1px solid #333; border-radius: 30px; margin-right: 25px;}
#header .head_login li{margin:0px 5px;}
#header .head_login a{font-size: 1.2rem; color: #333; white-space: nowrap; font-weight: 400;}
#header .head_login i{font-size: 20px;}
#header .head_menu .logo img{width: 140px;}
/* #header.scroll{top:-36px;} */

#header .head_menu{position: relative;display: flex;justify-content: space-between;align-items: center;width: 100%; height:100px;}
#header .head_menu .main_menu { display: flex; justify-content: flex-end; align-items: center; text-align: center; height: 100%; z-index: 9; position: relative; }
#header .head_menu .main_menu .dept1 {position: relative; padding: 15px 30px;}
#header .head_menu .main_menu .dept1 > a { font-size: 18px; font-weight: 400; color: #111;}
#header .head_menu .main_menu .dept1 > a.active { color: #5f277b;}
#header .head_menu .main_menu .dept1 > a.menuon { color: #5f277b;}

#header .head_menu .sub_menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 180px; padding-top: 0px; display: none; padding-bottom: 0px; z-index: 99; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0,0,0,0.12); overflow: hidden; text-align: center; }
#header .head_menu .main_menu .dept2 { padding: 8px 15px; background: #fff; }
#header .head_menu .main_menu .dept2 a { font-size: 16px; display: block; color: #333; }
#header .head_menu .main_menu .dept2:first-child{padding-top: 16px}
#header .head_menu .main_menu .dept2:last-child{padding-bottom: 16px}
#header .main_menu .dept2>a:hover,
#header .main_menu .dept2>a:active,
#header .main_menu .dept2>a.menuon,
#header .main_menu .dept2>a:focus { color: var(--color); }
#header .head_menu .logo .on{display: none;}
.header_width{width: 92%; margin:  0 auto; max-width: 1700px;}
#header.active{background: #fff;}
#header.active .head_menu .logo .off{display: none;}
#header.active .head_menu .logo .on{display: block;}
#header.active .head_menu .main_menu .dept1 > a{color: #000;}
#header.active .head_menu .main_menu .dept1 > a.menuon{color: var(--color);;}
#header.active .head_menu .main_menu .dept1 > a:hover{color: var(--color);;}
#header .top_mwrap{display: flex; align-items: center; gap: 0px 24px; width: 240px;}
#header .top_login{display: flex; align-items: center; gap: 10px;}
#header .top_login a{font-size: 18px; font-weight: 600;}
#header .top_login span{font-size: 18px; font-weight: 600;}

.menu_open { position: fixed; width: 100%; height: 100vh;
  background: #fff; top: 0; left: 0; z-index: 999; padding: 55px 50px 50px 50px; display: none;  }
.menu_open .site_map_wrap h2 { margin-bottom: 150px; display: flex; justify-content: space-between; align-items: center;}
.menu_open .site_map { display: flex; width: 100%; }
.menu_open .site_map .dept1 { width: 20%; margin-right: 40px; }
.menu_open .site_map .dept1:last-child { border-right: 0px; }
.menu_open .site_map .dept1 > a { font-size: 2.8rem; font-weight: 700; padding-bottom: 30px; border-bottom: 2px solid #eee; display: block; margin-bottom: 30px;}
.menu_open .site_map .dept1 > a.active { color: #364F6B; }
.menu_open .site_map .dept2 a { font-size: 2.0rem; position: relative; line-height: 120%; margin-bottom: 30px; display: inline-block; padding-bottom: 3px; }
.menu_open .site_map .dept2 a::after { content: ''; width: 0; height: 3px; background: rgba(54, 79, 107, 0.5); position: absolute; bottom: 0; left: 0; transition: 0.3s all; }
.menu_open .site_map .dept2 a:hover::after { width: 100%; }
.hd_bg { background: #fff; width: 100%; height: 0; left: 0; z-index: 1; position: absolute; }
.site_foot{padding-top: 20px;margin-top: 150px; border-top: 2px solid #eee; text-align: center;}

#header .menu_bar { z-index: 99; position: relative; }
#header .menu_bar span { width: 22px; height: 2px; background: #555; display: block; margin: 6px}
#header .menu_bar2 { z-index: 9999; position: relative; }
#header .menu_bar2 span:nth-child(1) { display: none; }
#header .menu_bar2 span:nth-child(2) { transform: rotate(130deg); }
#header .menu_bar2 span:nth-child(3) { transform: rotate(45deg); top: 0px; position: absolute; }
#header .menu_bar2 span { width: 22px; height: 2px; background: #555; display: block; margin: 6px}


table.ptable { width: 100%; border-collapse: collapse; border: 2px solid #5e2d91;}        
table.ptable th { background-color: #5F277B; color: white; padding: 15px 20px; text-align: center; font-weight: bold; font-size: 19px; }        
table.ptable td { padding: 15px 20px; vertical-align: middle; border: 1px solid #ccc; text-align: center;}     
table.ptable td img { max-width: 460px; }     
table.ptable .category-cell { background-color: #F5F2F7; text-align: center; font-size: 19px; font-weight: bold; color: #5f277b; border: 1px solid #5f277b;}

/* 모바일 */
.mobile_head {width: 100%; height: 60px; display: flex; justify-content: space-between; align-items: center; padding: 0px 15px; display: none; position: fixed; background:#fff; z-index: 99; box-shadow: 0px 1px 3px rgba(0,0,0,0.3); top: 0;}
.mobile_head .mobile_logo { width: 115px; }
.mobile_head .mobile_logo img { width: 100%; }
#mobile_menu {  display: none; position: fixed; top: 0; right: -100%; width: 100%; background: #fff; z-index: 1000; height: 100%; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; max-width: 400px;}
#mobile_menu::-webkit-scrollbar{display: none;}
#mobile_menu .mob_logo { width: 100%; padding: 0px 20px; height: 70px; background:#fff;display: flex; justify-content: space-between; align-items: center;}
#mobile_menu .mob_logo a { width: 100px; }
#mobile_menu .mob_logo a img { width: 100%; }
#mobile_menu .mobile_close { font-size: 30px; cursor: pointer; color: #333;}
#mobile_menu .mob_menu .top_menu {display: flex;justify-content: space-between; align-items: center; padding: 15px 15px;font-size: 17px; border-bottom: 1px solid #eeee; font-weight: 500;}
#mobile_menu .mob_menu .top_menu2 {display: flex;justify-content: space-between; align-items: center; padding: 20px 20px;font-size: 18px; border-bottom: 1px solid #eeee; font-weight: 500;}
.mobile_open svg{width: 26px; height: 26px;}
#mobile_menu .mob_menu .topmenu.on { color: #fff; }
#mobile_menu .mob_menu .sub_menu { padding: 15px 15px;  background: #f9f9f9; visibility: visible; }
#mobile_menu .mob_menu .sub_menu a {display: block; color: #333 ;font-size: 16px; padding: 10px; font-weight: 400;}
#mobile_menu .mob_menu_btn{display: flex; padding: 10px 0px; margin: 0px 20px; justify-content: space-between;}
#mobile_menu .mob_menu_btn li{width: 49%;}
#mobile_menu .mob_menu_btn a{font-size: 17px;  background: #ddd;display: flex; height: 50px; justify-content: center; align-items: center;}
#mobile_menu .mob_menu_btn a i{font-size: 16px; margin-right: 5px;}
.mob_bg {  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.5); z-index: 99;}
.mobile_btn{display: flex; align-items: center; gap: 0px 10px;}

@media screen and ( max-width: 1400px ){
  #pcmenu .topmenu { font-size: 16px; }
  #pcmenu .submenu a { font-size: 14px; }
}
@media screen and ( max-width: 1024px ){
  #header { display: none; }
  .mobile_head{display: flex;}
}

.pc{display: block !important;}
.mob{display: none !important;}

@media all and (max-width: 768px){
  .pc{display: none !important;}
  .mob{display: block !important;}
}


.tab_mob .psub{background: #EEF2F7; padding: 43px 0px; text-align: center;}
.tab_mob .psub h2{font-size: 24px; color: #111; font-weight: 600;}
.tab_mob .psub p{color: #505050; font-size: 15px; font-weight: 400; margin-top: 16px;}
.tab_mob h6{font-size: 20px; color: #111; font-weight: 600; margin-top: 28px; margin-bottom: 20px; text-align: center;}
.tab_mob h6 b{font-size: 20px; color: #5F277B; font-weight: 600;}

.tabSelect{width: 220px; height: 56px; margin: 20px auto;   display: block; border-bottom: 1px solid #E5E5EC; font-size: 15px; color: #111;
}
.tab_conwrap {
  display: none;
  padding: 20px;
}
.tab_conwrap.active {
  display: block;
}
.tab_conwrap table{width: 100%; margin-bottom: 20px; border-right: 1px solid #5F277B;}
.tab_conwrap th{font-size: 15px; color: #5F277B; font-weight: 600; padding: 17px 0; background: #F5F2F7; border: 1px solid #5F277B;}
.tab_conwrap td{padding: 17px 5px; color: #505050; font-size: 15px; text-align: center; border-bottom: 1px solid #E5E5EC;}
.tab_conwrap .line th{border-top: 1px solid #5F277B;}
.tab_conwrap .line td{border-top: 1px solid #5F277B;}
.tab_conwrap .line2 th{border-bottom: 1px solid #5F277B;}
.tab_conwrap .line2 td{border-bottom: 1px solid #5F277B;}
.tab_conwrap .line3 td{border: 1px solid #5F277B;}
.tab_conwrap table button{font-size: 15px;}
.tab_conwrap th.ta_top{background:#5F277B; color: #fff;  }


.info_wrap{ max-width: 1280px; width: 92%; margin: 0 auto 100px auto;}
.info_wrap .txt{text-align: center;}
.info_wrap .txt h2{font-size: 36px; font-weight: 600; margin-bottom: 8px;}
.info_wrap .txt h2 b{color: #5F277B; font-weight: 600; margin-bottom: 8px;}
.info_wrap .txt p{color: #777; font-weight: 400; }
.info_wrap .text_wrap{border: 1px solid #E5E5EC; padding: 20px 20px 0 20px; height: 325px; overflow-y: scroll; margin-top: 40px; color: #505050; line-height: 150%;}
.info_wrap .text_wrap h2{font-size: 18px; font-weight: 600; margin-bottom:  16px; color: #111;}
.info_wrap a{width: 175px; padding: 16px 0; margin: 60px auto 0 auto; display: flex; align-items: center; justify-content: center; background: #6F3D88; color: #fff; font-weight: 500;}

.for_nav{margin-top: 40px; display: flex; margin-bottom: 40px;}
.for_nav li{width: 50%;}
.for_nav li a{width: 100%; display: flex; align-items: center; justify-content: center; padding: 16px 0; font-weight: 600; color: #999; border-bottom: 1px solid #E5E5EC;}
.for_nav li a.on{border-bottom: 2px solid #5F277B; color: #111;}

.for_txt h2{font-size: 28px; font-weight: 600; color: #111; line-height: 135%; margin-bottom: 8px;}
.for_txt p{color: #505050; font-size: 16px;}
.for_h2{line-height: 130%;}

.cus_btn{width: 200px; height: 60px; display: flex; align-items: center; justify-content: center; margin-top: 30px; background: #5F277B; color: #fff; margin: 0 auto}

.m2{background: #fdfdfd;padding: 160px 2%;}
.m2 .m21_wrap{border: 8px solid #333; padding: 12px;}
.m2 .m2_wrap{border: 3px solid #505050;}
.m2 .m2_box_wrap{max-width: 1330px; margin: 0 auto; display: flex; align-items: flex-end; gap: 60px 2%; width: 100%;}
.m2 .m2_box_wrap .text{width: 50%; height: 686px; background-image: url("/img/m-tbg.png"); background-repeat: no-repeat; display: flex; flex-direction: column; justify-content: center; background-position: -85px bottom; padding-left: 4%; padding-top: 12%;}
.m2 .m2_box_wrap .text h3{color: #333; font-size: 32px; line-height: 130%;}
.m2 .m2_box_wrap .text h2{color: #333; font-size: 50px; line-height: 130%; font-weight: 600; letter-spacing: -1.25px; line-height: 136%;}
.m2 .m2_box_wrap .text h2 b{color: #5F277B;}
.m2 .m2_box_wrap .text p{color: #505050; font-size: 24px;}
.m2 .m2_box_wrap .text h6{display: flex; align-items: center; gap: 0px 16px; margin-top: 102px; color: #333; font-size: 56px; font-weight: 700;}
.m2 .m2_box_wrap .img{width: 50%;}
.m2 .m2_box_wrap .img img{max-width: 584px; width: 100%;}

@media  all and (max-width: 1024px) {
  .subvisual{ padding: 60px 49px 16px 48px; height: 245px; margin-top: 6px;}
  .sub_h2{font-size: 32px; line-height: 130%;}
}

@media all and (max-width: 768px){
  #popup_01 div{width: 100%;}
  #popup_01 img{width: 100%; max-width: 90px}
  #popup_02 div{width: 100%;}
  #popup_02 img{width: 100%; max-width: 90px}
  #popup_03 div{width: 100%;}
  #popup_03 img{width: 100%; max-width: 90px}
  .info_wrap .txt h2{font-size: 28px;}
  .info_wrap a{width: 100%;}
  .info_wrap .text_wrap{height: 560px; font-size: 14px;}
  .info_wrap .text_wrap h2{font-size: 16px;}
  .info_wrap .txt p{font-size: 13px;}
  .for_btn button{width: 100%; padding: 16px 0;}
  .for_txt{display: none;}
  .m2{padding: 80px 2%;}
  .m2 .m2_box_wrap{flex-direction: column;}
  .m2 .m2_box_wrap .text{width: 100%; height: initial; text-align: center; padding-left: 0; background-position: center bottom;  background-size: contain;}
  .m2 .m2_box_wrap .img{width: 100%; margin-bottom: -15px;}
  .m2 .m2_box_wrap .img img{max-width: initial; width: 100%;}
  .m2 .m2_box_wrap .text h3{font-size: 14px;}
  .m2 .m2_box_wrap .text h2{font-size: 24px; margin-bottom: 8px}
  .m2 .m2_box_wrap .text p{font-size: 15px;}
  .m2 .m2_box_wrap .text h6{justify-content: center; margin-top: 20px; font-size: 24px; gap: 0 4px;}
  .m2 .m2_box_wrap .text h6 svg{width: 20px; height: 20px;}

   table.ptable th { font-size: 15px; }        
   table.ptable td { padding: 15px 10px; font-size: 13px; }     
   table.ptable td img { max-width: 260px; }     
   table.ptable .category-cell { font-size: 14px; }
}


.page_nav{margin-top: 60px; display: flex; justify-content: center;}
.page_nav li{width: 40px; height: 40px; }
.page_nav li a{color: #767676; font-weight: 500;  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.page_nav li a.on{background: #5f277b; border-radius: 50%; color: #fff;}

.form-group{ display: flex; flex-direction: column; gap: 8px; width: 100%; }
.password_warp{position: relative;}
.password_warp i.fa{position: absolute; right: 10px; top: 21px; cursor: pointer;}
.control-label { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; line-height: 20px; }
.red{color: #ff6a00;}
.form-control { width: 100%; height: 52px; padding: 14px 16px; border-bottom: 1px solid #E5E5EC; line-height: 24px; font-size: 16px; color: #000; }
.form-control::placeholder { color: #999; }
.form-control[readonly] { background-color: #F7F7FB; }
.form_login .form-control { border: 1px solid #E5E5EC; }
.form_input .form-control { border: 1px solid #E5E5EC; width: 450px;}
textarea.form-control { height: 200px; padding: 16px; border: 1px solid #E5E5EC; font-size: 16px; line-height: 24px; color: #000; resize: vertical; }
.search select.form-control { width: 100%; height: 52px; padding: 14px 16px; border: 1px solid #E5E5EC; line-height: 24px; font-size: 16px; color: #000; background-color: #fff; }

.mT5{margin-top: 5px;}
.mT10{margin-top: 10px;}
.mT20{margin-top: 20px;}
.mT50{margin-top: 50px;}
.w25p{width: 25%;}
.w75p{width: 75%;}
.w50p{width: 50%;}
.mL10{margin-left: 10px;}

.tab-btn { position: relative; line-height: 56px; border-bottom: 1px solid #E5E5EC; background: none; font-size: 16px; padding: 0; cursor: pointer; text-align: center; }
.tab-btn::after { content: '';  position: absolute; left: 0; bottom: -1px; width: 100%;  height: 2px; background-color: #5F277B; display: none; }
.tab-btn.active::after { display: block; }
.btn-search { justify-content: center; align-items: center; height: 52px; width: 122px; padding: 5px 20px; background-color: #5F277B; color: white; font-weight: 500; font-size: 16px; border: none; cursor: pointer; }
.btn-filter{width: 100%; }
.btn_button { height: 52px; padding: 5px 20px; background-color: #5F277B; color: white; font-weight: 500; font-size: 16px; border: none; cursor: pointer; }
.btn_button_cancel { display: flex; justify-content: center; align-items: center; height: 56px; width: 175px; background-color: #505050; color: white; font-weight: 500; font-size: 16px; border: none; cursor: pointer; }
.btn_button_next { display: flex; justify-content: center; align-items: center; height: 56px; width: 175px; background-color: #6F3D88; color: white; font-weight: 500; font-size: 16px; border: none; cursor: pointer; }
.btn-postcode {display: inline-block; width: 93px; height: 52px; padding: 14px 8px; font-size: 13px; font-weight: 500; line-height: 18px; border: 1px solid #111; text-align: center; text-decoration: none; color: inherit; background-color: transparent; box-sizing: border-box; }
.btn_go_login {display: inline-block; width: 100%; text-align: center; padding: 20px 20px; background-color: #5F277B; color: white; font-weight: 500; font-size: 17px; border: none; cursor: pointer; }

.member_benefits{background-color: #fcf7ff; color: #505050; font-weight: 500; font-size: 16px; border: 1px solid #e5e5ec; padding: 15px 20px; margin: 10px 0px;}

.label { display: inline; font-size: 90%; font-weight: 700; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25em; padding: .2em .6em .3em; }
a.label:focus, a.label:hover { color: #fff; text-decoration: none; cursor: pointer; }
.label:empty { display: none; }
.btn .label { position: relative; top: -1px; }
.label-default { background-color: #777; }
.label-default[href]:focus, .label-default[href]:hover { background-color: #5e5e5e; }
.label-primary { background-color: #428bca; }
.label-primary[href]:focus, .label-primary[href]:hover { background-color: #3071a9; }
.label-success { background-color: #5cb85c; }
.label-success[href]:focus, .label-success[href]:hover { background-color: #449d44; }
.label-info { background-color: #5bc0de; }
.label-info[href]:focus, .label-info[href]:hover { background-color: #31b0d5; }
.label-warning { background-color: #f0ad4e; }
.label-warning[href]:focus, .label-warning[href]:hover { background-color: #ec971f; }
.label-danger { background-color: #d9534f; }
.label-danger[href]:focus, .label-danger[href]:hover { background-color: #c9302c; }

.email_input{width: 450px;}

@media all and (max-width: 768px){  
  .form_input .form-control { height: 56px; padding-top: 16px; padding-bottom: 16px; width: 100%; }
  .control-label { width: 240px; font-size: 16px; line-height: 24px;}

  .w25p{width: 100%;}
  .w75p{width: 100%;}
  .tab-btn { line-height: 60px; }
  .btn-search { width: 100%; }
  .email_input{width: 100%;}
}

@media (min-width: 768px) {
  .btn-postcode { width: auto; height: 56px; padding-left: 24px; padding-right: 24px; font-size: 16px; line-height: 24px; background-color: #F5F2F7; }
  .form-group{ flex-direction: row; align-items: flex-start; gap: 0; }
  .control-label { width: 240px; font-size: 16px; line-height: 24px;}
}