:root {
  --text-color: rgb(0,0,0);
  --background-color: rgb(255,255,255);
  --menu-color: rgb(0,0,255);
 
}
body {
  font-family: 'Noto Sans KR', sans-serif;
}
a {
  text-decoration: none;
  color: var(--text-color);
  white-space:nowrap;
}

/* NAV BAR */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 5px;
  background-color: var(--background-color);
  width: 100%;
  position: fixed;
  z-index: 99;
  opacity : 0.9;
}

/* NAV BAR LOGO */
.navbar__logo {
  display: flex;
  text-align: center;
}
.navbar__logo i {
}

/* NAV BAR MENU */
.navbar__menu {
  display: flex;
  text-align: center;
  position: relative;
  font-size: 1em;
}
.navbar__menu li {
  padding: 8px 24px;
  transition: all 0.3s;
  color: var(--text-color);
}

/*.navbar__menu li a:hover {
  text-decoration: none;
  color: var(--menu-color);
  white-space:nowrap;
}

.navbar__menu li:active{
  border-radius: 4px;
  color: var(--menu-color);
}*/

/*.navbar__submenu:active
{
    display: block;
}*/

/* NAV BAR MENU */
.navbar__submenu {
  display: none;
  position: fixed;
  top: 65px;
  left:1;
  text-align: left;
  z-index: 99;
  background-color: var(--background-color);
}
.navbar__submenu li {
  padding: 8px 24px;
  transition: all 0.3s;
  color: var(--text-color);
}
.navbar__submenu li:hover {
  border-radius: 4px;
}

.navbar__submenu li a:hover {
  text-decoration: none;
  color: var(--menu-color);
  font-weight: bold;
  white-space:nowrap;
}

/* NAV BAR ICONS */
.navbar__icons {
  display: flex;
  color: var(--text-color);
}
.navbar__icons i {
  padding: 8px 12px;
}

/* NAV BAR TOOGLE BUTTON */
.navbar__toogleBtn {
  display: none;
  position: fixed;
  right: 32px;
  font-size: 40px;
  color: var(rgb(0,0,0));
  z-index: 99;
}

.Banner_plane
{
  text-align: center;
  background-color: rgb(130,144,191);
}

.first-swiper{width:100%; height:90%;}
.second-swiper{width:60%; height:90%;}
.third-swiper{width:100%; height:90%;}
.fourth-swiper{width:70%; height:90%; text-align: center;}
.fifth-swiper{width:60%; height:90%; text-align: center;}

.Back_img 
{
  display: none;
  position: fixed;
  top: 83px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 8;
  background-color: rgb(50,50,50);
  opacity : 0.6;
}

.Image4class
{
  text-align: center;
  padding-top: 50px;
}
.Back_img2
{
  display: none;
  position: fixed;
  top: 83px;
  left: calc(100% - 200px);
  width: 200px;
  height: 100%;
  z-index: 9;
  background-color: rgb(255,255,255);
  opacity : 1.0;
}

.Back_img3
{
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 83px;
  z-index: 60;
  background-color: rgb(255,255,255);
  opacity : 0.9;
}

.Back_img4
{
  display: block;
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 87px;
  z-index: 6;
  background-color: rgb(255,255,255);
  opacity : 1.0;

}
.main_image 
{
  position: relative;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  max-height: 200px;
  overflow: hidden;
}
.main_image_text 
{
  align-items: center;
  z-index: 1;
  justify-content: center;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translate( 0%, -50% );
  color: black;
  font-size:25px; 
  font-weight: bolder;
}

.machine_list
{
  width: 90%;
  margin-left: 5%;
  text-align: center;
}
.machine_list_text
{
  color: rgb(2,113,192);
  font-size:30px; 
  padding-bottom: 10px;
  font-weight: bolder;
}
.machine_list_text1
{
  color: rgb(2,113,192);
  font-size:25px; 
  padding-bottom: 10px;
}
.copyright_end 
{
  font-size:15px; 
}

.doctor_intro
{
  width: 70%;
  padding-left:  15%;
  text-align: center;
}

.machine_img_css
{
  height: 600px;
}

.BKEND_img_css
{
   width: 25%;
  height: auto;
}

.gallery {overflow: hidden;position: relative;max-width:70%; margin: 40px auto 0;}
.gallery .list .inner {position: relative;}
.gallery .list .slide_list > li {display: flex;justify-content: center;align-items: center;height:30%;background: #8ab4f8;font-size: 48px;opacity: 0 !important;}
.gallery .list .slide_list > li.swiper-slide-active {opacity: 1 !important;} 
.gallery .list .btn {position: absolute;top: 50%;width: 50px;height: 50px;background:url('images/arrow.png') center center no-repeat;background-size: contain;text-indent: -999em;z-index: 1;}
.gallery .list .btn.btn_prev {left: 10px; transform:translate(0,-50%) rotateY(180deg);}
.gallery .list .btn.btn_next {right: 10px; transform: translate(0,-50%);}
.gallery .thumbs {margin-top: 20px;}
.gallery .thumbs .slide_list > li {display: flex; justify-content: center; align-items: center; position: relative;height:10%;background: #ddd;background: #8ab4f8;font-size: 24px;cursor: pointer;}
.gallery .thumbs .slide_list > li.swiper-slide-thumb-active:before {content:'';position: absolute;top: 0;right: 0;bottom: 0;left: 0;border: 4px solid rgb(0,0,255);z-index: 1;}

.button_selected 
{
  top: 30px;
  position: relative;
  background-color:rgb(2,113,192);
  color: rgb(255,255,255);
  border:none;
  width: 150px;
  height: 30px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.button_unselected:hover 
{
    color:rgb(2,113,192);
}

.button_selected_st
{
  top: 30px;
  position: relative;
  background-color:rgb(2,113,192);
  color: rgb(255,255,255);
  border:none;
  height: 30px;
  margin-top: 2.5px;
  margin-bottom: 2.5px;
  padding-left: 10px;
  padding-right: 10px;
  font-weight: bolder;
}

.button_selected_st:hover 
{
    color:rgb(0,0,255);
}


.button_selected:hover 
{
    color:rgb(128,128,128);
}

.button_unselected 
{
  top: 30px;
  position: relative;
  background-color:rgb(128,128,128);
  color: rgb(255,255,255);
  border:none;
  width: 150px;
  height: 30px;
  margin-top: 10px;
  margin-bottom: 10px;
  

}
.button_unselected:hover 
{
    color:rgb(0,0,255);
}

.button_unselected_st
{
  top: 30px;
  position: relative;
  background-color:rgb(255,255,255);
  color: rgb(50,50,50);
  border:none;
  height: 30px;
  margin-top: 2.5px;
  margin-bottom: 2.5px;
  padding-left: 10px;
  padding-right: 10px;
  font-weight: bolder;
}

.button_unselected_st:hover 
{
    color:rgb(2,113,192);
    background-color:rgb(255,255,255);
}

.find-btn
{
  text-align: center;
}

.find-btn1
{
  display :inline-block;
}

.find-btn2
{
  text-align: center;
  width: 40%;
  margin-left: 30%;
}

.find-btn3
{
  text-align: center;
  width: 100%;
  background-color:rgb(242,242,242);
}

.find-btn4
{
  text-align: center;
  width: 100%;
  background-color:rgb(255,255,255);
}

.find-btn5
{
   position: relative;
  text-align: center;
  width: 90%;
  left: 5%;

}


.button_Title 
{
  top: 5px;
  position: relative;
  background-color:rgb(255,255,255);
  color: rgb(2,113,192);
  border-style: solid;
  border-width: 1px;
  border-color: rgb(2,113,192);
  font-weight: bold;
  width: 200px;
  height: 80px;
  margin-top: 5px;
  margin-bottom: 10px;
  margin-left: 5px;
  margin-right: 5px;
  font-size: 20px;
}

.button_Title:hover 
{
  background-color:rgb(2,113,192);
  color: rgb(255,255,255);
}

.button_Title2
{
  top: 5px;
  position: relative;
  background-color:rgb(242,242,242);
  color: rgb(50,50,50);
  border-style: solid;
  border-width: 1px;
  border-color: rgb(242,242,242);
  font-weight: bold;

  height: 20px;
  margin-top: 2px;
  margin-bottom: 5px;
  margin-left: 2px;
  margin-right: 2px;
  font-size: 10px;

}
.button_Title2:hover 
{
  color: rgb(2,113,192);
}

.cb_main_image 
{
  position: relative;
}

.cb_main_image_text 
{
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translate( 0%, -50% );
  color: rgb(0,0,0);
  font-size:200%;
  font-weight: bold;
}

.cb_main_image_st
{
  position: relative;
  text-align: center;
  width: 80%;
  left: 10%
}

.cb_main_image_text_st
{
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate( -50%, -50% );
  color: rgb(7,97,175);
  font-size:100%;
  font-weight: bold;
  line-height: 150%;
}

.descript_text
{
  line-height: 180%;
  position: relative;
  text-align: left;
  font-size:80%;
}


.popup_view
{
  position:absolute;
  left: 0;
  top: 100px;
  width: 500px;
  background-color: rgb(255,255,255);
  z-index: 4;
  left:-999em;
}
.popup_topic
{
  position:absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  background-color: rgb(0,255,0);

}

.popup_closebar
{
  position:relative;
  left: 0;
  top: -3px;
  height:30px;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(0,0,0);
  background-color: rgb(230,230,230);

}

.popup_text 
{
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translate( 0%, -50% );
  color: rgb(0,0,0);
  font-size:70%;
  font-weight: bold;
}
.popup_text_X
{
  position: absolute;
  top: 50%;
  left: 90%;
  transform: translate( -50%, -50% );
  color: rgb(0,0,0);
  font-size:100%;
  font-weight: bold;
}


.banner_text_sm_2
{
  position: absolute;
  top: calc(100% - 40px);
  left: 1%;
  transform: translate( 0%, -50% );
  color: rgb(255,255,255);
  font-size:30px;
  font-weight: bold;
}


.banner_text_4
{
  position: absolute;
  top: calc(100% - 50px);
  left: 1%;
  transform: translate( 0%, -50% );
  color: rgb(255,255,255);
  font-size:30px;
  font-weight: bold;
}

.banner_text_3
{
  position: absolute;
  top: calc(100% - 100px);
  left: 1%;
  transform: translate( 0%, -50% );
  color: rgb(255,255,255);
  font-size:40px;
  font-weight: bold;
}



.banner_text_2
{
  position: absolute;
  top: calc(100% - 100px);
  left: 1%;
  transform: translate( 0%, -50% );
  color: rgb(255,255,255);
  font-size:50px;
  font-weight: bold;
}

.banner_text_sm
{
  position: absolute;
  top: calc(100% - 110px);
  left: 1%;
  transform: translate( 0%, -50% );
  color: rgb(255,255,255);
  font-size:20px;
  font-weight: bold;
}


.banner_text
{
  position: absolute;
  top: calc(100% - 70px);
  left: 1%;
  transform: translate( 0%, -50% );
  color: rgb(255,255,255);
  font-size:50px;
  font-weight: bold;
}

.banner_bar
{
  position: absolute;
  top: calc(100% - 30px);
  left: 1%;
  width: 270px;
  height: 5px;
  transform: translate( 0%, -50% );
  background-color: rgb(255,255,255);
}


/* MEDIA SCREEN */
@media screen and (max-width: 768px) 
{
  /* NAV BAR */
  .navbar {
    flex-direction: column;
    align-items: right;
    background-color: var(--background-color);

  }
.second-swiper{width:100%; height:90%; }
.fourth-swiper{width:100%; height:90%; text-align: center;}
.first-swiper{width:100%; height:90%;}
.Temp-swiper{width:100%; height:90%;}
  .navbar__logo {
    display: flex;
    text-align: center;
    z-index: 12;
    position: fixed;

  }


  /* NAV BAR MENU */
  .navbar__menu {
    display: none;
    flex-direction: column;
    align-items: left;
    width: 200px;
    height: 100%;
    left: calc(100% - 200px);
    top: 83px;
    margin: 0px 0;
    padding:  0;
    position: fixed;
    z-index: 10;

    
  }
  .navbar__menu li {
    width: 80%;
    text-align: left;

    background-color: var(--background-color);

    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: rgb(50,50,255);
    font-size:1em; 
  }

  .navbar__submenu {
    display: none;
    width: 100%;
    top: 4px;
    left:0%;
    align-items: left;
    position: relative;
    z-index: 11;
  }
  .navbar__submenu li {
    position: relative;
    text-align: left;
    border-style: solid;
    border-width: 0px;
    border-color: rgb(128,128,255);
    font-size:0.9em; 
  }
  .machine_img_css
  {
    width: 100%;
    height: auto;
  }

  .BKEND_img_css
  {
    width: 80%;
    height: auto;
  }
  
  .doctor_intro
  {
    padding-left:  0%;
    width: 100%;
    height: auto;
    text-align: center;
  }
  /* NAV BAR ICONS */
  .navbar__icons {
    display: none;
    justify-content: center;
    width: 100%;
  }


  /* NAV BAR TOOGLE BUTTON */
  .navbar__toogleBtn {
    display: block;
  }

 .Back_img3
  {
      display: flex;
  }

  /* NAV BAR MENU & ICONS (ACTIVE) */
  .navbar__menu.active,
  .Back_img.active,
  .Back_img2.active,
  .navbar__icons.active 
  {
      display: flex;
  }

  .main_image_text 
  {
    align-items: center;
    z-index: 1;
    justify-content: center;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translate( 0%, -50% );
    color: black;
    font-size:15px; 
    font-weight: bolder;
  }

  .copyright_end 
  {
    font-size:10px; 
  }

  .gallery {overflow: hidden;position: relative;max-width:80%; margin: 40px auto 0;}
  .find-btn2
  {
    text-align: center;
    width: 80%;
    margin-left: 10%;
  }
  .button_Title 
  {
    width: 110px;
    height: 30px;
    font-size: 12px;

  }

  .button_Title2
  {
    top: 5px;
    position: relative;
    background-color:rgb(242,242,242);
    color: rgb(50,50,50);
    border-style: solid;
    border-width: 1px;
    border-color: rgb(242,242,242);
    font-weight: bold;

    height: 20px;
    margin-top: 1px;
    margin-bottom: 5px;
    margin-left: 1px;
    margin-right: 1px;
    font-size: 5px;

  }

.machine_list_text
{

  font-size:20px; 
}
.machine_list_text1
{
  font-size:15px; 
}

.cb_main_image_text 
{
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translate( 0%, -50% );
  color: rgb(0,0,0);
  font-size:100%;
  font-weight: bold;
}

.cb_main_image_text_st
{
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate( -50%, -50% );
  color: rgb(7,97,175);
  font-size:80%;
  font-weight: bold;
  line-height: 150%;
}

.popup_view
{
  position:absolute;
  left: 1%;
  top: 0px;
  width: 98%;
  background-color: rgb(255,255,255);
  z-index: 4;
}


.banner_text_sm_2
{
  position: absolute;
  top: calc(100% - 35px);
  left: 1%;
  transform: translate( 0%, -50% );
  color: rgb(255,255,255);
  font-size:18px;
  font-weight: bold;
}


.banner_text_4
{
  position: absolute;
  top: calc(100% - 30px);
  left: 1%;
  transform: translate( 0%, -50% );
  color: rgb(255,255,255);
  font-size:20px;
  font-weight: bold;
}

.banner_text_3
{
  position: absolute;
  top: calc(100% - 67px);
  left: 1%;
  transform: translate( 0%, -50% );
  color: rgb(255,255,255);
  font-size:30px;
  font-weight: bold;
}


.banner_text_2
{
  position: absolute;
  top: calc(100% - 67px);
  left: 1%;
  transform: translate( 0%, -50% );
  color: rgb(255,255,255);
  font-size:30px;
  font-weight: bold;
}

.banner_text_sm
{
  position: absolute;
  top: calc(100% - 75px);
  left: 1%;
  transform: translate( 0%, -50% );
  color: rgb(255,255,255);
  font-size:13px;
  font-weight: bold;
}


.banner_text
{
  position: absolute;
  top: calc(100% - 50px);
  left: 1%;
  transform: translate( 0%, -50% );
  color: rgb(255,255,255);
  font-size:30px;
  font-weight: bold;
}

.banner_bar
{
  position: absolute;
  top: calc(100% - 25px);
  left: 1%;
  width: 160px;
  height: 2px;
  transform: translate( 0%, -50% );
  background-color: rgb(255,255,255);
}

.popup_text_X
{
  position: absolute;
  top: 50%;
  left: 85%;
  transform: translate( -50%, -50% );
  color: rgb(0,0,0);
  font-size:100%;
  font-weight: bold;
}

.fifth-swiper{width:90%; height:90%; text-align: center;}

}