body{overflow-x: hidden;
    margin: 0 auto;
    padding: 0 auto; }
  /* 헤더 */
  header 
  {
  position: fixed; 
  width:100vw;
  height:38px;
  z-index: 1200;
  margin-top: 0;
  margin: 0 auto;
  padding: 0 auto;  
  opacity: 1;
/*   transition: opacity .3s ease-in-out; */
  }
  
  .header-fadeout
  {
    opacity: 0.4;
/*     transition: opacity 0.3s; */
  }
  .header-fadein
  {
    opacity: 1;
/*     transition: opacity 0.1s; */
  }
  
  /* 헤더 1 - 고정 헤더 header_container_1*/
  .header_container_1{/* background-color: indianred; */ width:100%; height:100%; display:flex; justify-content: center; align-items: center; font-size:0.8rem;}
  .desk_menu_con_1>div{
    padding: 0 1rem;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .desk_menu_con_1{display: flex; 
  justify-content: space-between; 
  align-items: center;
  width:60vw;
  min-width:558px;
  height: 100%;
  /* background-color: aqua;  */
  }
  .desk_menu_con_1{ z-index: 1000;}
  .logo_con_1{position: absolute; left:0; margin-left:5vw;}
  .logo_wrap_1{width:5rem; cursor: pointer;}
  .admin_con_1{position: absolute; right:0; margin-right:12rem; cursor: pointer;}
  .login_con_1{position: absolute; right:0; margin-right:8rem; cursor: pointer;}
  .more_con_1{position: absolute; right:0; margin-right:4rem; cursor: pointer;}
  .big_cate{font-weight: 600; width:100%; letter-spacing: 2px; padding:.5rem; cursor: pointer; transition: all 0.3s;}
  
  /* 헤더 2 - 슬라이드 헤더 header_container_2*/
  /*액티브 클래스 : active_hd_1 */
  .header_container_2{/* background-color: indianred; */ 
    width:100%; display:flex; justify-content: center; align-items: center; font-size:0.8rem;
  }
  .header_container_2{
  height: 16rem; 
  margin-top:-100vh;
  opacity: 0; 
/*   transition: height 0.3s, opacity 0.5s; */
}
  .desk_menu_con_2>div{padding:0 1rem; }
  .desk_menu_con_2{display: flex; justify-content: space-between; align-items: flex-start;  width:60vw; height: 100%; min-width: 558px; padding-top: 0rem; padding-bottom: .5rem; }
  .logo_con_2{position: absolute; left:0; margin-left:5vw;}
  .logo_wrap_2{width:5rem; }
/*   .login_con_2{position: absolute; right:0; margin-right:12vw; } */

.small_cate{width:100%; height:100%; background-color :none; /* transition: background-color 0.3s ease-in-out; */}
.small_cate:hover{
background-color : rgba(31,133,165, .2);
}
.big_cate{
/* transition: background-color 0.3s ease-in-out; */
}

  .small_cate_inner{padding:.5rem;width: 100%; height: 100%;}
  .small_cate_inner>div{cursor: pointer; opacity: 1; /* transition: opacity 0.3s; font-weight: 600; */}
  .small_cate_inner>div{width:100%;  color: #4A627E; 
  padding: 0.3rem 0.3rem;
  margin: 0.3rem 0rem;
  background-color: none;  /* transition: all 0.3s ease; */
  }
  .small_cate_inner>div:hover{
  background-color : rgba(16,34,54, .9) ;
  color: #E9EEF3;
  }
  .ms_cate_1,.ms_cate_2,.ms_cate_3,.ms_cate_4,.ms_cate_5{
  box-shadow: -1px 0 1px -1px rgba(31,133,165, .8);
  color:#4A627E;
  font-size:0.76rem;
  }
  .ms_cate_5{
  box-shadow: -1px 0 1px -1px rgba(31,133,165, .8),
                             1px 0 1px -1px rgba(31,133,165, .8);
  
  }
  

  
  /* 헤더 3 - 우측 데스크톱용 햄버거 header_container_2*/
  /* slightly transparent fallback */
.backdrop-blur {
background-color: rgba(239,243,246, .8);
-webkit-backdrop-filter: blur(.5em);
backdrop-filter: blur(0.5em);
}

  .header_container_3{position:absolute; right:0; top:0; height: 100vh; z-index:1100;  
  font-size:0.7rem;}
  .hc3_inner{height:100%;}
  .header_container_3{right: -100px; width:0vw; opacity:0;/* transition: 0.3s all; */}
  .hc3_upper{width: 100%; height: 76px;}
  .hc3_upper>div{margin:0 1rem;}
  .hc3_upper_inner{width: 100%; height: 38px;}
  .hc3_upper_inner>div{margin:0 1rem;}
  .ham_logo_wrap{width: 5rem;}
  .ham_icon_wrap{height: 1.5rem;}
  
  .hc3_under{padding: 0 2rem;height: 100%;}
  .hc3_under_abs{
      padding: 0 1rem;
      position: absolute;
      bottom: 3vh;
  }

/* 햄슬라이드(헤더3) 버튼 스타일 */

.login_con_2{
  height: 38px;    
    display: flex;
    align-items: center;
}

  .more_con_2{
    height: 38px;    
    display: flex;
    align-items: center;
  }
  .more_con_2_inner{position: absolute; right:0; margin-right: 4rem; }
   
  /* SVG Hamburger 버튼 애니메이션 */ 
  .svg_hamburger_2{
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    margin: -0.6rem;
    overflow: hidden;
    position: relative;
    z-index: 1101;
    }
    .svg_ham_2 {
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: transform 400ms;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    .svg_ham_line_2 {
      fill:none;
      transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
      stroke:#000;
      stroke-width:2.5;
      stroke-linecap:round;
    }
    .svg_ham_2 .top {
      stroke-dasharray: 40 121;
    }
    .svg_ham_2 .bottom {
      stroke-dasharray: 40 121;
    }
    .svg_ham_2.active .top {
      stroke-dashoffset: -102px;
    }
    .svg_ham_2.active .bottom {
      stroke-dashoffset: -102px;
    }
    
  
  /* ★★★★★★★★ COMMON 헤더 액티브 클래스 ON 켜다 ★★★★★★ */
  .active_hd_1{height:17rem; opacity:1; margin-top:initial;} 	/* 데스크톱 메인 상단 슬라이드 ON */
  .active_hd_2{width:30vw; opacity:1; right: 0;}	/* 우측 햄버거 ON */
  .active_hd_3{}	/* 햄버거 토글 고정용 (존재여부확인용) */	

      
  /* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */	
  
  
  /* 아코디언 메뉴 */
  .hc3_center,
  .hc3_center ul,
  .hc3_center ul li,
  .hc3_center ul li a {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    line-height: 1;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .hc3_center {
    width: 100%;
    padding: 0 2rem;
  /*   color: #ffffff; */
  }
  .hc3_center ul ul {
    display: none;
  }
  .align-right {
    float: right;
  }
  .hc3_center > ul > li > a {
    padding: 15px 20px;
    cursor: pointer;
    z-index: 2;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    color: #2D6DA4; 
    /* text-shadow: 0 1px 1px rgba(200, 100, 100, 0.35); */
    box-shadow: inset 0 1px 0 rgba(198,203,209, 0.7);
  }
  .hc3_center > ul > li > a:hover,
  .hc3_center > ul > li.active > a,
  .hc3_center > ul > li.open > a {
  /*   color: #eeeeee; */
  }
  .hc3_center > ul > li.open > a {
  /*     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);
      border-bottom: 1px solid #1682ba;   */
  }
  .hc3_center > ul > li:last-child > a,
  .hc3_center > ul > li.last > a {
  /*   border-bottom: 1px solid #1682ba; */
  }
  .holder {
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    right: 0;
  }
  .holder::after,
  .holder::before {
    display: block;
    position: absolute;
    content: "";
    width: 6px;
    height: 6px;
    right: 20px;
    z-index: 10;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  .holder::after {
    top: 17px;
    border-top: 1px solid #2D6DA4;
    border-left: 1px solid #2D6DA4;
  }
  .hc3_center > ul > li > a:hover > span::after,
  .hc3_center > ul > li.active > a > span::after,
  .hc3_center > ul > li.open > a > span::after {
  /*   border-color: #eeeeee; */
  }
  .holder::before {
    top: 18px;
  /*   border-top: 1px solid;
    border-left: 1px solid; */
    border-top-color: #2D6DA4 !important;
    border-left-color: #2D6DA4 !important;
  }
  .hc3_center ul ul li a {
    cursor: pointer;
    border-bottom: 1px solid #C6CBD1;
    /* 
    border-left: 1px solid #32373e;
    border-right: 1px solid #32373e; 
    */
    padding: 10px 20px;
    z-index: 1;
    text-decoration: none;
    font-size: 0.9rem;
    color: #525F6E;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .procate{color:#1f85a5 !important;}
  
  .hc3_center ul ul li:hover > a,
  .hc3_center ul ul li.open > a,
  .hc3_center ul ul li.active > a {
  /*   background: #424852;
    color: #ffffff; */
  }
  .hc3_center ul ul li:first-child > a {
    box-shadow: none;
  }
  .hc3_center ul ul ul li:first-child > a {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .hc3_center ul ul ul li a {
    padding-left: 30px;
  }
  .hc3_center > ul > li > ul > li:last-child > a,
  .hc3_center > ul > li > ul > li.last > a {
    border-bottom: 0;
  }
  .hc3_center > ul > li > ul > li.open:last-child > a,
  .hc3_center > ul > li > ul > li.last.open > a {
   /* border-bottom: 1px solid red; */
  }
  .hc3_center > ul > li > ul > li.open:last-child > ul > li:last-child > a {
  border-bottom: 0;
  }
  
  .hc3_center ul ul li.has-sub > a::after {
    display: block;
    position: absolute;
    content: "";
    width: 5px;
    height: 5px;
    right: 20px;
    z-index: 10;
    top: 11.5px;
    border-top: 1px solid #2D6DA4;
    border-left: 1px solid #2D6DA4;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  .hc3_center ul ul li.active > a::after,
  .hc3_center ul ul li.open > a::after,
  .hc3_center ul ul li > a:hover::after {
  /*   border-color: #ffffff; */
  }
  
  /* 헤더 햄버거 토글 버튼 관련 */
  .hc3_locker{display: block;}
  .hamslide_toggle_Wrap{
  width:fit-content;      
  display: flex;
  flex-wrap: wrap;
  flex-direction: column; /*수직 정렬*/
  align-items: center;
  justify-content: center;
  }
  .hamslide_toggleSwitch
  {
  width: 2.8rem;
  height: 1.2rem;
  display: block;
  position: relative;
  border-radius: 2rem;
  background-color: #410010;	/* OFF 바탕 */
  box-shadow: 0 0 2rem 3px rgba(0 0 0 / 15%);
  cursor: pointer;
  }
  .hamslide_toggleSwitch .hamslide_toggleButton {
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 50%;
  left: 0.1rem;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #ab002c; /* OFF 단추 */
  }
      
  /* 체크박스가 체크되면 변경 이벤트 */
  .hamslide_toggleSwitch.active {
  background: #FF0042;	/* ON 바탕 */
  }
  
  .hamslide_toggleSwitch.active .hamslide_toggleButton {
  left: calc(100% - 1.1rem);
  background: #d2f6fe;  /* ON 단추 */
  }
  
  .hamslide_toggleSwitch, .hamslide_toggleButton {
  transition: all 0.2s ease-in;
  }
      
  /* SVG Hamburger 버튼 애니메이션 */ 
  .svg_hamburger{
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
  margin: -0.6rem;
  overflow: hidden;
  position: relative;
  z-index: 1101;
  }
  .svg_ham {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 400ms;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .svg_ham_line {
    fill:none;
    transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
    stroke:#000;
    stroke-width:2.5;
    stroke-linecap:round;
  }
  .svg_ham .top {
    stroke-dasharray: 40 121;
  }
  .svg_ham .bottom {
    stroke-dasharray: 40 121;
  }
  .svg_ham.active .top {
    stroke-dashoffset: -102px;
  }
  .svg_ham.active .bottom {
    stroke-dashoffset: -102px;
  }
  
  /* 시계 */
  .datetime_wrap
  {
  width:fit-content;
  border-radius: 0.5rem;
  padding: .4rem;
  }
  .dateclock {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #6D7983;
  font-size: .7rem;
  margin:0 0.5rem;
  }
  
  /*햄버거 회사 정보*/
  .hamCoLogo{height:2rem;}
  
  
  .h3_under_2{padding:0 1rem;
       align-items: center;
      display: flex;}
  .h3_under_3{width:100%;}

/*프로모션, 공지사항 */
.promotion_ham_wrap{width:100%; margin:0.5rem 0; border-bottom: 1px solid #a9bbcf;}

  /* SNS */
  .sns_ham_wrap{width:100%;}
  .sns_inner_wrap{width:100%; margin: 1rem 0;}
  .sns_wrap {height:2rem; margin:0 0.2rem; cursor: pointer; opacity: 1; transition: opacity 0.3s ease-in;}
  .sns_wrap:hover {opacity: 0.5;}


/*햄버거 스크롤다운 애니메이션*/

.ham_mouse_scroll_mainwrap{
  position: absolute;
  top: 60vh;
}

.ham_mouse_scroll {
	display: block;
	margin: 3rem auto;
	width: 1rem;
}

.ham_mouse_scroll_inner>div{margin:0 1rem;}

.ham_m_scroll_arrows
{
  display: block;
  width: 1rem;
  height: 2rem;
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
  transform: rotate(45deg);
  border-right: 1px solid #98a8ba;;
  border-bottom: 1px solid #98a8ba;;
  margin: 0 0 .1rem .45rem;
  width: .8rem;
  height: .8rem;
}


.ham_unu
{
  margin-top: 5px;
}

.ham_unu, .ham_doi, .ham_trei
{
    -webkit-animation: ham_mouse-scroll 1s infinite;
    -moz-animation: ham_mouse-scroll 1s infinite;
    animation: ham_mouse-scroll 1s infinite;
  
}

.ham_unu
{
  -webkit-animation-delay: .1s;
  -moz-animation-delay: .1s;
  -webkit-animation-direction: alternate;
  
  animation-direction: alternate;
  animation-delay: alternate;
}

.ham_doi
{
  -webkit-animation-delay: .2s;
  -moz-animation-delay: .2s;
  -webkit-animation-direction: alternate;
  
  animation-delay: .2s;
  animation-direction: alternate;
  
  margin-top: -6px;
}

.ham_trei
{
  -webkit-animation-delay: .3s;
  -moz-animation-delay: .3s;
  -webkit-animation-direction: alternate;
  
  animation-delay: .3s;
  animation-direction: alternate;
  
  
  margin-top: -6px;
}

.ham_mouse {
  height: 42px;
  width: 24px;
  border-radius: 14px;
  transform: none;
  border: 1px solid #98a8ba
  ;;
  top: 170px;
}

.ham_wheel {
  height: 5px;
  width: 2px;
  display: block;
  margin: 5px auto;
  background: #98a8ba;
  position: relative;
  
  height: 4px;
  width: 4px;
  border: 2px solid #98a8ba;;
  -webkit-border-radius: 8px;
          border-radius: 8px;
}

.ham_wheel {
  -webkit-animation: ham_mouse-wheel 0.6s linear infinite;
  -moz-animation: ham_mouse-wheel 0.6s linear infinite;
  animation: ham_mouse-wheel 0.6s linear infinite;
}

@-webkit-keyframes ham_mouse-wheel{
   0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
  }
}
@-moz-keyframes ham_mouse-wheel {
  0% { top: 1px; }
  25% { top: 2px; }
  50% { top: 3px;}
  75% { top: 2px;}
  100% { top: 1px;}
}
@-o-keyframes ham_mouse-wheel {

   0% { top: 1px; }
  25% { top: 2px; }
  50% { top: 3px;}
  75% { top: 2px;}
  100% { top: 1px;}
}
@keyframes ham_mouse-wheel {

   0% { top: 1px; }
  25% { top: 2px; }
  50% { top: 3px;}
  75% { top: 2px;}
  100% { top: 1px;}
}

@-webkit-keyframes ham_mouse-scroll {

  0%   { opacity: 0;}
  50%  { opacity: .5;}
  100% { opacity: 1;}
}
@-moz-keyframes ham_mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@-o-keyframes ham_mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@keyframes ham_mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}

  /* !!XXXXXXXXX 테스트용 !!!!!!!!!!!!!!!!*/ 
  /* *{color:blueviolet !important} */
  /* @@  타블렛 가로 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@  */
  @media screen and (max-width: 1199px)
  {
      /* !!XXXXXXXXX 테스트용 !!!!!!!!!!!!!!!!*/ 
  /* 	*{color: red!important} */
      .hc3_locker{display: block;}
      .desk_menu_con_1{width:55vw;}
      .desk_menu_con_2{width:55vw;}
      .hc3_upper_inner>div{margin:0 .5rem;}
      .hc3_center {
    padding: 0 1rem;
  /*   color: #ffffff; */
overflow-y: auto;
height: 600vh;
  }
  .hc3_under_abs{
    position: initial;
}
  }
  
  /* @@  모바일 가로, 타블렛 세로 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@  */
  @media screen and (max-width:899px) {
      /* !!XXXXXXXXX 테스트용 !!!!!!!!!!!!!!!!*/ 
  /* 	*{color: greenyellow!important} */
      .hc3_locker{display: none;}
      .desk_menu_con_1{display: none;}
      .active_hd_2{width:100vw; opacity:1;}	/* 우측 햄버거 ON */
      .header_container_3 {background-color: rgba(239,243,246, 1);}
   .login_con_1{margin-right:5rem; }
  .more_con_1{margin-right:1rem;}
  .more_con_2_inner{position: absolute; right:0; margin-right: 1rem; }
  .header_container_2{display: none;}
  .hc3_under_abs{
    position: initial;
}
  }
  
  /* @@ 모바일 세로 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@  */
  @media screen and (max-width: 767px)
  {
      /* !!XXXXXXXXX 테스트용 !!!!!!!!!!!!!!!!*/ 
  /* 	*{color: blue!important} */
      .hc3_locker{display: none;}
      .desk_menu_con_1{display: none;}
      .active_hd_2{width:100vw; opacity:1;}	/* 우측 햄버거 ON */
      .header_container_3 {background-color: rgba(239,243,246, 1);}
      .login_con_1{margin-right:3.8rem; }
  .more_con_1{margin-right:0.6rem;}
  .more_con_2_inner{position: absolute; right:0; margin-right: 0.6rem; }
  .header_container_2{display: none;}
  .hc3_under_abs{
    position: initial;
}
  }
  
  
  /*    Old 기존 CSS */
  .login_container{width:initial; height:1.5rem; margin:0 1rem;}
  .admin_container{width:initial; height:1.5rem; margin:0 1rem;}
  .header_button{cursor:pointer;}
  .header_button:hover
  {
    transition: all .6s;
    opacity:0.5;
  }

  /*  ============================ 로그인 모달창 관련 (팝업) ============================ */
  
  /*  ============================ 로그인 모달창 관련 (팝업) ============================ */
  #login_info:hover
  {
    transition: all .4s;
    opacity:0.5;
  }
  
  .login_modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index:9999;
    font-size:2rem;
    font-weight: 600;
  }
  
  .login_modal .bg {
    width: 100%;
    height: 100%;
  }
  
  .modalBox {
    position: absolute;
    background-color: #f2f2f2;
    width: 40%;
    padding: 0;
  }
  
  .modalBox_Btn_wrap
  {
    display: flex; 
    justify-content:center;
    flex-direction: column;
    align-items: center;
    margin:1rem 0rem;
  }
  
  .modalBox button 
  {
    width: 80%;
    display: block;
    margin: 0 auto;
    background-color: none;
    padding: 0.4rem 1.3rem;
    margin: 1rem;
    border: 3px solid #2a5687;;
    border-radius: 4px;
    color : #0c1928;
    font-size:1.5rem;
    font-weight: 600;
  }
  
  
  
  .login_modal_hidden 
  {
    display: none;
  }
  
  /* =================================== member_role 회원 권한 관련 ================================ */
  
  #member_role_div
  {
    display: flex;
    width:100%;
    height:3rem; 
      background-color:#bfccdb; 
      font-size: 2rem; 
      color:#2a5687;   
    justify-content: start; 
    align-items: center; 
    padding:1rem 0rem;
  }
  
  @media screen and (max-width:1199px) {
    /* 타블렛 가로 */
    
  /*  ============================ 로그인 모달창 관련 (팝업) ============================ */
  .modalBox {
   display: flex; 
   flex-direction: column;
   justify-content:center;
   vertical-align: middle;
   align-items: center;
   background-color: #f2f2f2;
   width: 80%;
   height: initial;
   padding: 1rem;
   justify-content: center;
   align-items: center;
  }
  
  .modalBox_Btn_wrap
  {
   margin-top: 1rem;
  }
  
  
  #member_role_div
  {
     height: 100%;
     font-size: 1.5rem;
  }
  
  #member_role_div > p {margin:0.2rem !important; padding:0 1rem;}
  
  .modalBox button 
  {
   width: 100%;
   display: block;
   margin: 0 auto;
   background-color: none;
   padding: 0.4rem 1.3rem;
   margin: 0.6rem 1rem;
   border: 3px solid #2a5687;;
   border-radius: 4px;
   color : #0c1928;
   font-size:1.3rem;
   font-weight: 600;
  }
  
  
  .login_modal_hidden 
  {
   display: none;
  }
  }
  @media screen and (max-width:899px) {
    /* 모바일 가로, 타블렛 세로 */
    
  /*  ============================ 로그인 모달창 관련 (팝업) ============================ */
  .modalBox {
   display: flex; 
   flex-direction: column;
   justify-content:center;
   vertical-align: middle;
   align-items: center;
   background-color: #f2f2f2;
   width: 80%;
   height: initial;
   padding: 1rem;
   justify-content: center;
   align-items: center;
  }
  
  .modalBox_Btn_wrap
  {
   margin-top: 1rem;
  }
  
  
  #member_role_div
  {
     height: 100%;
     font-size: 1.5rem;
  }
  
  #member_role_div > p {margin:0.2rem !important; padding:0 1rem;}
  
  .modalBox button 
  {
   width: 100%;
   display: block;
   margin: 0 auto;
   background-color: none;
   padding: 0.4rem 1.3rem;
   margin: 0.6rem 1rem;
   border: 3px solid #2a5687;;
   border-radius: 4px;
   color : #0c1928;
   font-size:1.3rem;
   font-weight: 600;
  }
  
  
  .login_modal_hidden 
  {
   display: none;
  }
  }
  @media screen and (max-width: 768px)
  {
      
  /*  ============================ 로그인 모달창 관련 (팝업) ============================ */
  .modalBox {
    display: flex; 
    flex-direction: column;
    justify-content:center;
    vertical-align: middle;
    align-items: center;
    background-color: #f2f2f2;
    width: 80%;
    height: initial;
    padding: 1rem;
    justify-content: center;
    align-items: center;
  }
  
  .modalBox_Btn_wrap
  {
    margin-top: 1rem;
  }
  
  
  #member_role_div
  {
      height: 100%;
      font-size: 1.5rem;
  }
  
  #member_role_div > p {margin:0.2rem !important; padding:0 1rem;}
  
  .modalBox button 
  {
    width: 100%;
    display: block;
    margin: 0 auto;
    background-color: none;
    padding: 0.4rem 1.3rem;
    margin: 0.6rem 1rem;
    border: 3px solid #2a5687;;
    border-radius: 4px;
    color : #0c1928;
    font-size:1.3rem;
    font-weight: 600;
  }
  
  
  .login_modal_hidden 
  {
    display: none;
  }
  }


/* ◈◈◈◈◈◈ ios 애플 apple ios 스타일 ◈◈◈◈◈◈*/