/* ---------------- COMMON 웹전체 공통 폰트 설정 ---------------- */

* 
{
  font-family: 'Mulish', 'Noto Sans KR', 'SourceHanSansSC', sans-serif;
  /* 모바일 Zoom 확대 금지 */
-ms-content-zooming: none !important;
-ms-touch-action: pan-x pan-y !important;
-webkit-text-size-adjust: none !important;
text-size-adjust: none !important;
}

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

header, footer, .mainContainer {  transition: filter 0.3s ease-in-out;}

html, body{
/* 모바일 웹 브라우저 당겨서 새로고침 막기 */
 overscroll-behavior: contain !important;

/* 모바일 Zoom 확대 금지 */
-ms-content-zooming: none !important;
-ms-touch-action: pan-x pan-y !important;
-webkit-text-size-adjust: none !important;
text-size-adjust: none !important;
}

/* 메드로 폰트 공통 */
.company_txt{
  font-weight: 700;
  font-size:2.5rem;
}

.company_wrap
{
  width:100%; margin: 8vh 0; display:flex; justify-content: center;
}
.mmdTitleTxt_company
{
  font-size: 3rem;
  font-weight: 700;
  color: #0e1c2c;
}

.company_txt_sub.company_wrap_sub {
  width: 100%;
  text-align: center;
  font-size: 1.5rem;
  color:#666666;
}

/* css에 삽입하는 방법 */
/* 
* {
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none
}
 */
/* (모바일) 터치시 하이라이트 방지. 번쩍임 방지 */
*{ -webkit-tap-highlight-color:transparent !important;}

/* 그림자 효과 쉐이드 */
.box_shadow_effect {  
  box-shadow:
  rgba(0, 0, 0, 0.25) 0px 54px 55px,
  rgba(0, 0, 0, 0.12) 0px -12px 30px,
  rgba(0, 0, 0, 0.12) 0px 4px 6px,
  rgba(0, 0, 0, 0.17) 0px 12px 13px,
  rgba(0, 0, 0, 0.09) 0px -3px 5px;
    }

    /* 그림자 효과 쉐이드 */
.box_shadow_effect_2 {  
  -webkit-box-shadow: 5px 13px 12px 0px rgba(0,0,0,0.83);
  -moz-box-shadow: 5px 13px 12px 0px rgba(0,0,0,0.83);
  box-shadow: 5px 13px 12px 0px rgba(0,0,0,0.83);
    }
    
    /* 그림자 효과 쉐이드 */
    .box_shadow_effect_3 {  
      -webkit-box-shadow: 5px 13px 12px 0px rgba(0,0,0,0.5);
      -moz-box-shadow: 5px 13px 12px 0px rgba(0,0,0,0.5);
      box-shadow: 5px 13px 12px 0px rgba(0,0,0,0.5);
        }

.gradient_1{
display: inline-block;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(280deg, rgba(0,47,121,1) 0%, rgba(0,65,169,1) 35%, rgba(0,100,217,1) 54%, rgba(15,146,206,1) 70%, rgba(46,203,242,1) 100%);
background-image: -webkit-linear-gradient(280deg, rgba(0,47,121,1) 0%, rgba(0,65,169,1) 35%, rgba(0,100,217,1) 54%, rgba(15,146,206,1) 70%, rgba(46,203,242,1) 100%);
}

/* display OFF css */
.area_hide
{
  display: none !important;
  opacity:0 !important;
}

.area_show
{
  display: flex !important;
  opacity:1 !important;
}

/* 수평/수직 정렬 스타일만 다르고, 모두 수직 중앙 & 가운데 정렬
/* 수평 정렬 */
.como_hori
{ 
    display: flex; 
    flex-direction: row;
    vertical-align: middle;
}

.como_horver
{ 
    display: flex; 
    flex-direction: row;
    vertical-align: middle;
}
.como_horver2
{ 
    display: flex; 
    flex-direction: row;
    vertical-align: middle;
}

/* 수직 정렬 */
.como_verti
{
    display: flex; 
    flex-direction: column;
    vertical-align: middle;
}

.como_cc
{
    justify-content: center;
    align-items: center;
}

.como_sbc
{
    justify-content: space-between;
    align-items: center;
}

.como_fc
{
    justify-content: flex-start;
    align-items: center;
}
.como_cf
{
    justify-content: center;
    align-items: flex-start; 
}

.como_cfcc
{
    justify-content: center;
    align-items: flex-start; 
}

.como_ff
{
    justify-content: flex-start;
    align-items: flex-start;
}

/* 이미지랩 공통 img_wrap 관련 */


/* 이미지 공통 img 관련 */
.como_img
{
    width:100%;
    height:100%;
    object-fit: contain;
}

.como_cover_img
{
  width:100%;
  height:100%;
  object-fit: cover;
}

/* 이미지 공통 img 관련 */
.como_bgimg
{
  width: 100%;
  height: 100%;
  background-size : contain; 
  background-repeat: no-repeat; 
  -webkit-touch-callout:none;   
  background-position: center; 
}

.como_coverBgImg{
  width: 100%;
    height: 100%;
    background-size : contain; 
    background-repeat: no-repeat; 
    -webkit-touch-callout:none;   
    background-position: center; }
/* ========================================================== */

/* 모든 이미지 잔상 방지 */
img
{
  -webkit-user-drag: none;
}

/* 드래그앤드롭 막기 */
.no-drag {
  -ms-user-select: none; 
  -moz-user-select: -moz-none; 
  -webkit-user-select: none; 
  -khtml-user-select: none; 
  user-select:none;
}

/* 드래그앤드롭 풀기 */
.draggable {
  -webkit-user-select:all;
  -moz-user-select:all;
  -ms-user-select:all;
  -khtml-user-select: all; 
  user-select:all
}

/* 드래그앤드롭 풀기 - 텍스트만 */
.draggableTxt {
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  -khtml-user-select: text; 
  user-select:text
}


html
{
  /* 모바일 폰트 이슈 관련 */
/* Prevent font scaling in landscape */
-webkit-text-size-adjust: none; /*Chrome, Safari, newer versions of Opera*/
-moz-text-size-adjust: none; /*Firefox*/
-ms-text-size-adjust: none; /*Ie*/
-o-text-size-adjust: none; /*old versions of Opera*/
}

html,
body 
{
  background-color: #f2f2f2;
  font-size: 1rem;
  margin: 0 auto ;
  padding: 0 auto;
  width:100%;
  height: 100%;
  overflow-y:scroll;
  scroll-behavior: auto !important;
}

body 
{
  position: fixed; 
  overflow-x: hidden;
}


/* container */
div #container 
{
  margin:0 auto;
  border:none;
}



/*=============  lazy load 지연 로딩을 위한 설정 ======================= */

.fadein_up
{  
transform: translateY(50%);
opacity: 0!important;
transition: 1.2s;
}

.fadein_up.active
{  
transform: translateY(0);
opacity: 1!important;
}

.fadein_up_2s
{  
transform: translateY(50%);
opacity: 0!important;
transition: 2s;
}

.fadein_up_2s.active
{  
transform: translateY(0);
opacity: 1!important;
}

.fadein_up_delay05s
{  
transform: translateY(50%);
opacity: 0!important;
transition: 1.2s;
transition-delay: .5s;
}

.fadein_up_delay05s.active
{  
transform: translateY(0);
opacity: 1!important;
}

.fadein_down
{  
transform: translateY(-50%);
opacity: 0!important;
transition: 1.2s;
}

.fadein_down.active
{  
transform: translateY(0);
opacity: 1!important;
}

.fadein_left
{  
transform: translateX(50%);
opacity: 0!important;
transition: 1.2s;
}

.fadein_left.active
{  
transform: translateX(0);
opacity: 1!important;
}

.fadein_right
{  
transform: translateX(-50%);
opacity: 0!important;
transition: 1.2s;
}

.fadein_right.active
{  
transform: translateX(0);
opacity: 1!important;
}

.fadein_right_delay03s
{  
transform: translateX(-50%);
opacity: 0!important;
transition: 1.2s;
transition-delay: .3s;
}

.fadein_right_delay03s.active
{  
transform: translateX(0);
opacity: 1!important;
}

.fadein_right_delay05s
{  
transform: translateX(-50%);
opacity: 0!important;
transition: 1.2s;
transition-delay: .5s;
}

.fadein_right_delay05s.active
{  
transform: translateX(0);
opacity: 1!important;
}

.fadein_right_delay1s
{  
transform: translateX(-50%);
opacity: 0!important;
transition: 1.2s;
transition-delay: 1s;
}

.fadein_right_delay1s.active
{  
transform: translateX(0);
opacity: 1!important;
}

.opacityChange
{
opacity: 0!important;
}

.opacityChange.active
{
opacity: 1!important;
transition: 1.2s; 
}


.fadeEffect{
  opacity: 1 !important;
  transition: 2.5s ease;
  -webkit-transition : 2.5s ease;
  -moz-transition : 2.5s ease;
  -ms-transition : 2.5s ease;
  -o-transition : 2.5s ease;
}

/* --------------------------------------------------------------------------------------- */
/*
웹디자인 이론상 극단적인 단색(하양,검정, 레드, 파랑)은 좋지 않다. 어느정도 톤 다운된 색을 써야함
폰트(text color/color)나 여러가지 배경색(background color)를 번거롭게 일일이 수정해야될 일이 있을땐
보통 CSS 관련 라이브러리나 프레임워크를 사용하는데.... 
순수 CSS에서는 변수로 할당해서 쓸수 있음. 

사용자 눈 편하라고 톤다운시키기 위해 순수CSS로 일괄 변수 연결시켜 사용

■■■■■■■ 변수선언 ■■■■■■■
:root
{
  --text-color: rgb(239, 239, 239);   텍스트 컬러
  --backgound-color: rgb(41, 41, 41); 배경 컬러
  --accent-color: rgb(89, 97, 255);
}

■■■■■■■ 사용 ■■■■■■■

color : var(--text-color);



*/

:root
{
  --text-color: rgb(44, 45, 48);
  --backgound-color: rgb(239, 239, 239);
  --accent-color: rgb(89, 97, 255);
  --mobile-text-color: rgb(239, 239, 239);
  --mobile-backgound-color: rgba(0,0,0,0.9);
}




/* --------------------------------   내 커스텀 추가  ----------------------------------------- */
.mainContainer
{
  padding-top: 6vh;     /* 메인 컨텐츠와 헤더와의 간격을 조정하려면 이걸 바꾸십시요 */
  background-color: #f2f2f2 !important; 
  margin-bottom:10vh;
}

/* 메인 컨텐츠 */
#main_contents
{
  background:none;
  margin:0 Auto;
  align-items: center;
  justify-content: center;
  width:auto;
  height:100%;
  border:none;
  display: flex;
}
 
#another
{
margin-top:50px;
}

/*      ===============   (삭제 예정) 공통   ==================*/


 button:hover
{
  cursor:pointer;
  transition: all .2s;
  opacity:0.7;
} 
 button:active 
{ 
  cursor:pointer;
  transition: all .1s;
  opacity:0.4; 
}

.spanBtn:hover
{
  cursor:pointer;
  transition: all .2s;
  opacity:0.7;
} 

.spanBtn:active 
{ 
  cursor:pointer;
  transition: all .1s;
  opacity:0.4; 
}

.spanBtn
{
  width: 100%;
  height: 100%;
  border: 1px solid rgb(42,86,135);
  border-radius: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:1.7rem;
  margin: 0 1rem;
  text-align: center;
}


/*      ===============   메드로 공통 버튼  ==================*/

.medroBtn:hover
{
	cursor: pointer;
	transition: opacity 0.3s;
	opacity: 0.5;
}

/* 스타일 1 - 라운드 테두리선 버튼 */
.medro_btn_style_1
{
width: fit-content;
height: fit-content;
padding: .2rem 1.5rem;
border: 1px solid #193351;
border-radius: 1rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size:1.7rem;
font-weight: 600;
color: #193351;
margin: 0 1rem;
text-align: center;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none
}

/* 스타일 2 - 각진 테두리선 버튼 */
.medro_btn_style_2
{
width: fit-content;
height: fit-content;
padding: .2rem 1.5rem;
border: 1px solid #193351;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size:1.7rem;
font-weight: 600;
color: #193351;
margin: 0 1rem;
text-align: center;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none
}

/* 스타일 3 - 각진 꽉찬 버튼 */
.medro_btn_style_3
{
width: fit-content;
height: fit-content;
padding: .2rem 1.5rem;
background-color: #193351;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size:1.7rem;
font-weight: 600;
color: white;
margin: 0 1rem;
text-align: center;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none
}

/* 스타일 4 - 스크롤 버튼 */
.medro_btn_style_4{
  width: fit-content;
  height: fit-content;
  padding: 0rem 1.5rem;
  background-color: #193351;
  border: none;
  cursor: pointer;
  font-size:1.5rem;
  color: white;
  text-align: center;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none
  }
  .scrBtn_con1{background-color:white; width:100%; height:3px; margin-bottom:3px;}
  .scrBtn_con2{}
  


/*  
 <!-- ===========   스크롤버튼 관련 Scroll Button =============-->
  <div class="medro_btn_style_4 como_verti como_cc">
  <div class="scrBtn_con1"></div>
  <div class="scrBtn_con2">스크롤버튼</div>
  </div> 
*/


/* 스타일  - 밑줄 애니메이션 */
.medroUnderline
 {display:inline-block; margin:0; }
.medroUnderline:after {
  display:block;
  content: '';
  border-top: solid 3px #FBFBFC; 
  transform:  scaleX(0) skew(17deg);
  transition: transform 200ms ease-in-out;
  margin-top: .2rem;
}
.medroUnderline:hover:after { transform: scaleX(1.1) skew(0deg); } /* 기본형 */
.medroUnderline.fromRight:after{ transform-origin:100% 50%; }
.medroUnderline.fromLeft:after{  transform-origin:  0% 50%; }

/* ======================= 블러 배경 온오프 Blur background On / Off ======================= */

  .blurBack
  { 
     background-color : rgba(239,243,246, .8) ;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
  }




  /* ==================== 이미지텍스트박스 itextBox ==================== */

  .itextBox_wrap{width:100%; height:30vh;}
  .itextBox_txtWrap_rel{position: relative; width:100%; height:100%;}
  .itextBox_txtWrap_abs{position: absolute; z-index: 1;}
  
  .itextBox1_1 >div {
      margin: 1rem 0;
  }
  .itextBox1_con{top:19%; left:8%;}
  .itextBox1_1_1{font-size: 2.3rem;   color: #0c1928;}
  .itextBox1_1_2{font-size: 1.3rem;   color: #102236;}
  .itextBox1_1_3{font-size: 1rem; color: #1d3c5e;}
  
  .itextBox_imgWrap_rel {position: relative;}
  .itextBox_imgWrap_abs {z-index:0; width:100%;}
  
  .itextBox_como_img{object-fit: cover; width:100%; height:100%;}
  .itextBox_iw_1{height:30vh;}
  
/* ============== 이미지 더블 박스 iiBox ==================*/
  
  .iiBox_wrap{width:100%; height:30vh;}
  .iiBox_txtWrap_rel{position: relative; width:100%; height:100%;}
  .iiBox_txtWrap_abs{position: absolute; z-index: 1;}
  
  .iiBox1_1 >div {
      margin: 1rem 0;
  }
  .iiBox1_con{top:0%; left:-5%;}
  .iiBox1_1_1{font-size: 2.3rem;color: #0c1928;}
  .iiBox1_1_2{font-size: 1.3rem; color: #102236;}
  .iiBox1_1_3{font-size: 1rem;color: #1d3c5e;}
  
  .iiBox_imgWrap_rel {position: absolute;}

  .iib_img_1{position: relative; }
  .iib_img_2{position: absolute; top: -50px; left: -50px;}
  .iiBox_como_img{object-fit: contain; width:100%; height:100%;}
  .iib_img_1{height:50vh;}
  .iib_img_2{height:50vh;}

/* 
<div class="iiBox_mainwrap">
<div class="iiBox_wrap">
	<div class="iiBox_txtWrap_rel">
		<div class="iiBox1_1 iiBox_txtWrap_abs iiBox1_con">
			<div class="iiBox1_conts iiBox1_1_1">
				텍스트 1
			</div>
			<div class="iiBox1_conts iiBox1_1_2">
				텍스트 2
			</div>
			<div class="iiBox1_conts iiBox1_1_3">
				텍스트 3
			</div>
		</div>
		<div class="iiBox1_2 iiBox_imgWrap_rel">
		 	<div class="iib_img_1">
				<img class="iiBox_como_img" src="../img/his_border.jpg"></img>
			<div class="iib_img_2">
				<img class="iiBox_como_img" src="../img/his_plant.jpg"></img> 
			</div>
			</div>
		</div>
	</div>
</div>
</div>
 */

 
/* =======================  카테고리베너 (데스크톱) =======================*/

.cateMenuDesktop{
background-color: rgba(212,221,231, .7);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  padding: 0rem;
  position: sticky;
  width: 100%;
  height:2.5rem;
  top: 6vh;
  z-index: 900;
  padding-top: 0.5rem;
  padding-bottom: 0rem;    
  margin-top: 0vh;
  margin-bottom: 0;
}

.cateMenuDesktop>div{margin: 0 3rem; }
.cateMenuDesktop_con{font-size: .9rem; cursor:pointer;}

/* 모든 카테고리 폰트 통일 */
.cateMenuMobile div {font-weight: weight !important}
.cateMenuDesk div{font-weight: 500 !important;}


/* ======================= 메드로 체크박스 공통  =======================*/
.medro_checkImg{cursor: pointer;}
.checkOff{content:url(../img/checkbox_off.png)}
.medro_checkImgWrap {width:1.3rem; height:100%;}

/* 
<div class="medro_checkImgWrap">
<img src="../img/checkbox_on.png"  class="como_img medro_checkImg" alt=""/>
</div>
 */


 /* ================== 픽스 고정 영역 (고정 버튼 영역) ======================= */
 .fixedArea {
  display: flex;
  position: fixed;
  left: 5rem;
  bottom: 4rem;
  z-index: 9000;
  width: fit-content;
}

.showtop_btnWrap
{
  width: 3rem;
  height: 100%;
}

.moveTopBtn:hover
{
  cursor: pointer;
  transition: opacity 0.3s;
  opacity: 0.5;
}
.select_cateMenu_wrap{
  margin: 0 auto; 
  width: 80%; 
  justify-content: space-between !important; 
  padding: 0.5rem 1rem; 
backdrop-filter: blur(7px);
font-size: 0.9rem;
}

.smw_odd
{
    background-color: rgba(191,204,219, .5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.smw_even
{
    background-color: rgba(220,227,235, .5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
    
.arrow_rotated{
    transition: 0.3s all;
     transform:rotate(180deg); 
    -webkit-transform:rotate(180deg); 
    -moz-transform:rotate(180deg); 
    -o-transform:rotate(180deg);
    top:10%;
     color: #54779f;
}


/* =======================  카테고리베너 (모바일) =======================*/

.cateMenuMobile{
  display:none;
  }
  
/* 
  @media screen and (max-width:1199px) {

    
    .cateMenuDesk{display:none !important;}
  
    .cateMenu{
    display:block;
    position: sticky;
    width: 100%;
    height: 4vh;
    top: 9vh;
    z-index: 1000;
    text-align:center;
    cursor: pointer;
    padding: 0;
    }
    
    .cateMenu>.cateSub{
      height:0;
      list-style:none;
      overflow:hidden;
    }
    
    .cateMenu>.cateSub{
    transition: 0.2s height;
    }
    
    .cateMenu>.cateSub div>div{
      text-decoration:none;
      color:black;
    }
    }
     */

     html { height: 100%; overflow:auto; }
     body { height: 100%; }


/* 메드로 이미지 베너 (중단 카테고리 베너) cbBanner */
.cb_bgimg{
width: 100%;
height: 14vh;
margin-bottom: 0;
margin-top: 0;
background-size : cover; 
background-repeat: no-repeat; 
-webkit-touch-callout:none;    
background-position: center center;
   }
   .cb_contWrap{width: 100%; height:100%;padding: 0 10%;}
   .cb_contWrap >div {margin:0.3rem 0;}


.cb_company{background-image: url("../img/categoryBanner/category_company.jpg");}
.cb_core{background-image: url("../img/categoryBanner/category_core.jpg");}
.cb_exhibition{background-image: url("../img/categoryBanner/category_exhibition.jpg");}
.cb_globalmedro{background-image: url("../img/categoryBanner/category_global.jpg");}
.cb_headoffice{background-image: url("../img/categoryBanner/category_headoffice.jpg");}
.cb_history{background-image: url("../img/categoryBanner/category_history.jpg");}
.cb_leadership{background-image: url("../img/categoryBanner/category_leadership.jpg");}
.cb_notice{background-image: url("../img/categoryBanner/category_notice.jpg");}
.cb_product{background-image: url("../img/categoryBanner/category_product.jpg");}
.cb_protech{background-image: url("../img/categoryBanner/category_protech.jpg");}
.cb_qr{background-image: url("../img/categoryBanner/category_qr.jpg");}
.cb_service{background-image: url("../img/categoryBanner/category_service.jpg");}
.cb_technology{background-image: url("../img/categoryBanner/category_tech.jpg");}
.cb_vision{background-image: url("../img/categoryBanner/category_vision.jpg");}

.cb_txt_1{font-size:1.2rem; font-weight:600;}
.cb_txt_2{font-size:.8rem; font-weight:400; }
.cb_txt_3{font-size:0.8rem; font-weight:600;}
/* 다크 배경 / 화이트톤 폰트 */
.cb_txt_1_w{font-size:1.2rem; font-weight:600; color: #fff; }
.cb_txt_2_w{font-size:1rem; font-weight:300; color: #94aac3;}
.cb_txt_3_w{font-size:0.8rem; font-weight:500; color: #6988ab ;}

/* @@  타블렛 가로 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@  */

  @media screen and (max-width: 1199px)
  {
    .como_horver2
    { 
        display: flex; 
        flex-direction: column;
        vertical-align: middle;
    }
  
    .como_horver
    { 
        display: flex; 
        flex-direction: row;
        vertical-align: middle;
    }
    
    .blurBack 
    { 
      background-color : rgba(239,243,246, 0) ;
      -webkit-backdrop-filter:none;
      backdrop-filter: none;
    }
    


  .cateMenuDesk{display:none !important;}

  .cateMenu{
  display:block;
  position: sticky;
  width: 100%;
  height: 4vh;
  top: 9vh;
  z-index: 1000;
  text-align:center;
  cursor: pointer;
  padding: 0;
  }
  
  .cateMenu>.cateSub{
    height:0;
    list-style:none;
    overflow:hidden;
  }
  
  .cateMenu>.cateSub{
  transition: 0.2s height;
  }
  
  .cateMenu>.cateSub div>div{
    text-decoration:none;
    color:black;
  }

     /* ================== 픽스 고정 영역 (고정 버튼 영역) ======================= */
     .fixedArea {
      right: 3rem;
      bottom: 2rem;
    }
    
    .showtop_btnWrap
    {
      width: 3rem;
      height: 100%;
    }
  
    .moveTopBtn:hover
  {
    cursor: pointer;
    transition: none;
    opacity: 1;
  }
  }

/* @@  모바일 가로, 타블렛 세로 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@  */

@media screen and (max-width:899px) {
  /* 모바일 가로, 타블렛 세로 */
  .como_horver
  { 
      display: flex; 
      flex-direction: column;
      vertical-align: middle;
  }
  .como_horver2
  { 
      display: flex; 
      flex-direction: column;
      vertical-align: middle;
  }

  .cateMenuDesk{display:none !important;}

  .cateMenu{
  display:block;
  position: sticky;
  width: 100%;
  height: 4vh;
  top: 7vh;
  z-index: 1000;
  text-align:center;
  cursor: pointer;
  padding: 0;
  }
  
  .cateMenu>.cateSub{
    height:0;
    list-style:none;
    overflow:hidden;
  }
  
  .cateMenu>.cateSub{
  transition: 0.2s height;
  }
  
  .cateMenu>.cateSub div>div{
    text-decoration:none;
    color:black;
  }

/* 메드로 이미지 베너 (중단 카테고리 베너) cbBanner */
.cb_bgimg{
  width: 100%;
  height: 10vh;
  margin-top: 6vh;
  margin-bottom: 1vh;
  }
  .cb_contWrap{width: 100%; height:100%;padding: 0 1rem;}
  .cb_contWrap >div {margin:0.1rem 0;}
  
  .cb_txt_1{font-size:.8rem; font-weight:600;}
  .cb_txt_2{font-size:.6rem; font-weight:400; }
  .cb_txt_3{font-size:.7rem; font-weight:600;}
  /* 다크 배경 / 화이트톤 폰트 */
  .cb_txt_1_w{font-size:.8rem; font-weight:600; color: #fff; }
  .cb_txt_2_w{font-size:.6rem; font-weight:300; color: #94aac3;}
  .cb_txt_3_w{font-size:.7rem; font-weight:500; color: #6988ab ;}
  
  .cb_company{background-image: url("../img/categoryBanner/category_company_mo.jpg");}
  .cb_core{background-image: url("../img/categoryBanner/category_core_mo.jpg");}
  .cb_exhibition{background-image: url("../img/categoryBanner/category_exhibition_mo.jpg");}
  .cb_globalmedro{background-image: url("../img/categoryBanner/category_global_mo.jpg");}
  .cb_headoffice{background-image: url("../img/categoryBanner/category_headoffice_mo.jpg");}
  .cb_history{background-image: url("../img/categoryBanner/category_history_mo.jpg");}
  .cb_leadership{background-image: url("../img/categoryBanner/category_leadership_mo.jpg");}
  .cb_notice{background-image: url("../img/categoryBanner/category_notice_mo.jpg");}
  .cb_product{background-image: url("../img/categoryBanner/category_product_mo.jpg");}
  .cb_protech{background-image: url("../img/categoryBanner/category_protech_mo.jpg");}
  .cb_qr{background-image: url("../img/categoryBanner/category_qr_mo.jpg");}
  .cb_service{background-image: url("../img/categoryBanner/category_service_mo.jpg");}
  .cb_technology{background-image: url("../img/categoryBanner/category_tech_mo.jpg");}
  .cb_vision{background-image: url("../img/categoryBanner/category_vision_mo.jpg");}

  }



/* @@ 모바일 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@  */

@media screen and (max-width: 767px)
{
  html,
  body 
  {
    background-color: #f2f2f2;
    font-size: 1rem;
    margin:0 auto ; 
    width:100%;
    height: 100%;
  }

  .mainContainer
  {
    padding-top: 0%;     /* 메인 컨텐츠와 헤더와의 간격을 조정하려면 이걸 바꾸십시요 */
    background-color: #f2f2f2 !important; 
    margin:0 auto ; 
  }

  .mainContainer2
  {
    padding-top: 40%;     /* 메인 컨텐츠와 헤더와의 간격을 조정하려면 이걸 바꾸십시요 */
  }

  .como_horver
  { 
      display: flex; 
      flex-direction: column;
      vertical-align: middle;
  }
  .como_horver2
  { 
      display: flex; 
      flex-direction: column;
      vertical-align: middle;
  }

  .como_cfcc
{
    justify-content: center;
    align-items: center; 
}


.cateMenuDesk{display:none !important;}

.cateMenu{
display:block;
position: sticky;
width: 100%;
height: 4vh;
top: 7vh;
z-index: 1000;
text-align:center;
cursor: pointer;
padding: 0;
}

.cateMenu>.cateSub{
  height:0;
  list-style:none;
  overflow:hidden;
}

.cateMenu>.cateSub{
transition: 0.2s height;
}

.cateMenu>.cateSub div>div{
  text-decoration:none;
  color:black;
}

/* 메드로 이미지 베너 (중단 카테고리 베너) cbBanner */
.cb_bgimg{
width: 100%;
height: 10vh;
margin-top: 6vh;
margin-bottom: 1vh;
}
.cb_contWrap{width: 100%; height:100%;padding: 0 1rem;}
.cb_contWrap >div {margin:0.1rem 0;}

.cb_txt_1{font-size:.8rem; font-weight:600;}
.cb_txt_2{font-size:.6rem; font-weight:400; }
.cb_txt_3{font-size:.7rem; font-weight:600;}
/* 다크 배경 / 화이트톤 폰트 */
.cb_txt_1_w{font-size:.8rem; font-weight:600; color: #fff; }
.cb_txt_2_w{font-size:.6rem; font-weight:300; color: #94aac3;}
.cb_txt_3_w{font-size:.7rem; font-weight:500; color: #6988ab ;}

.cb_company{background-image: url("../img/categoryBanner/category_company_mo.jpg");}
.cb_core{background-image: url("../img/categoryBanner/category_core_mo.jpg");}
.cb_exhibition{background-image: url("../img/categoryBanner/category_exhibition_mo.jpg");}
.cb_globalmedro{background-image: url("../img/categoryBanner/category_global_mo.jpg");}
.cb_headoffice{background-image: url("../img/categoryBanner/category_headoffice_mo.jpg");}
.cb_history{background-image: url("../img/categoryBanner/category_history_mo.jpg");}
.cb_leadership{background-image: url("../img/categoryBanner/category_leadership_mo.jpg");}
.cb_notice{background-image: url("../img/categoryBanner/category_notice_mo.jpg");}
.cb_product{background-image: url("../img/categoryBanner/category_product_mo.jpg");}
.cb_protech{background-image: url("../img/categoryBanner/category_protech_mo.jpg");}
.cb_qr{background-image: url("../img/categoryBanner/category_qr_mo.jpg");}
.cb_service{background-image: url("../img/categoryBanner/category_service_mo.jpg");}
.cb_technology{background-image: url("../img/categoryBanner/category_tech_mo.jpg");}
.cb_vision{background-image: url("../img/categoryBanner/category_vision_mo.jpg");}
}

/*◈◈◈◈◈◈◈◈◈◈◈  iOS 기기 전용 CSS  ◈◈◈◈◈◈◈◈◈◈◈*/
@supports (-webkit-touch-callout: none) {
  /* iOS 기기 전용 CSS */ 
  .showtop_btnWrap
  {
    width: 3rem;
    height: 3rem;
  }
}