/* main */

  /* sliding_panels */
  .sliding_panels {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    transition: all 0.05s ease-out;
  }
  .sliding_panels.pc_img{display:flex !important}
  .sliding_panels.mo_img{display:none !important}
  @media (max-width: 1024px) {
    .sliding_panels.pc_img {display: none !important}
    .sliding_panels.mo_img{display:flex !important}
}
  .sliding_panel {
    flex: 1;
    position: relative;
    width: 33.333%;
    overflow: hidden;
    z-index: 1;
    height: 14.6615vw;
    margin-right: -0.052vw;
    /* cursor: pointer; */
    transition: all 0.3s ease-out;
    /* -webkit-clip-path: polygon(5.208vw 0%, 100% 0%, 100% 100%, 0 100%);
    clip-path: polygon(5.208vw 0%, 100% 0%, 100% 100%, 0 100%); */
    /* margin-left: -11%; */
  }
  .sliding_panel:first-child {
    -webkit-clip-path: none;
  }
  /* .sliding_panel:last-child {
    margin-right: -11%;
  } */
  .sliding_panel__bg {
    content: "";
    position: absolute;
    background-position: center;
    background-size: cover;
    width: 100%;
    left: 0;
    height: 100%;
    width: 100%;
  }
  @media screen and (min-width: 78.125vw) {
    /* .sliding_panel__bg {
      background-size: cover;
    } */
  }
  .sliding_panel__content {
    padding: 2rem;
    width: 80%;
    width: 33.333vw;
    height: 100%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: auto;
    position: absolute;
    top: 0;
    left: 18%;
    color: black;
    opacity: 0;
    background: rgba(255, 255, 255, 0.75);
  }
  .sliding_panel__content__body {
    padding-left: calc(40% + 2.604vw);
    font-size: 0.938vw;
    line-height: 1.8;
    padding-right: 2.604vw;
  }
  .sliding_panel--one .sliding_panel__bg {
    background-image: url("../img/sliding_panel01.jpg");
  }
  .sliding_panel--two .sliding_panel__bg {
    background-image: url("../img/sliding_panel02.jpg");
  }
  .sliding_panel--three .sliding_panel__bg {
    background-image: url("../img/sliding_panel03.jpg");
  }
  .sliding_panel__bg:hover .sliding_panel__txt label{opacity: 1}
  .sliding_panel__bg:hover  .btn.more{opacity: 1}
  .sliding_panel__txt{position:absolute; top:50%; left:50%; transform:translate3d(-50%, -50%, 0);}
  .sliding_panel__txt label{opacity: 0; display:block; font-weight:bold; font-size:1.250vw; height:3vw; text-shadow: 0.000vw 0.156vw 0.313vw rgba(0, 0, 0, .16); color:#fff; transition:opacity 500ms}
  .sliding_panel__txt img{width:3.542vw; height:3.125vw; max-width:none}
  .sliding_panel__bg .btn.more{opacity: 0; position:absolute; bottom:60px; right:60px; width:80px; height:80px; border-radius:80px; padding:0; transition:opacity 500ms}
  /* .image {
    z-index: -1;
  } */

  /** main section2 **/
  #main .herbal_medicine_type{}
  #main .herbal_medicine_type ul{width:100%; margin:0 auto}
  #main .herbal_medicine_type ul li{width:calc(100% / 8); float:left;}
  #main .herbal_medicine_type ul li a{display:block}
  #main .herbal_medicine_type ul li a span{font-size:32px; color:#84817E; display:inline-block; text-align:center;  transition:500ms all}
  #main .herbal_medicine_type ul li:last-child a span{line-height:1.2; vertical-align: middle;  margin-top:1.2vw}
  #main .herbal_medicine_type ul li a {position:relative;}
  #main .herbal_medicine_type ul li a span{display:block; margin-top:30px}
  #main .herbal_medicine_type ul li a:before{display:block; content:'';width:120px; height:120px; margin:0 auto 0.833vw; background-repeat:no-repeat; background-position:center; background-size:contain;}
  #main .herbal_medicine_type ul li a:before{ transition-property:background-image; transition-duration :500ms; transition-timimg-function: ease}
  #main .herbal_medicine_type ul li:nth-child(1) a:before{background-image:url('../img/hmt01.svg')}
  #main .herbal_medicine_type ul li:nth-child(2) a:before{background-image:url('../img/hmt02.svg')}
  #main .herbal_medicine_type ul li:nth-child(3) a:before{background-image:url('../img/hmt03.svg')}
  #main .herbal_medicine_type ul li:nth-child(4) a:before{background-image:url('../img/hmt04.svg')}
  #main .herbal_medicine_type ul li:nth-child(5) a:before{background-image:url('../img/hmt05.svg')}
  #main .herbal_medicine_type ul li:nth-child(6) a:before{background-image:url('../img/hmt06.svg')}
  #main .herbal_medicine_type ul li:nth-child(7) a:before{background-image:url('../img/hmt07.svg')}
  #main .herbal_medicine_type ul li:nth-child(8) a:before{background-image:url('../img/hmt08.svg')}
  #main .herbal_medicine_type ul li:nth-child(1):hover a:before{background-image:url('../img/hmt01_active.svg')}
  #main .herbal_medicine_type ul li:nth-child(2):hover a:before{background-image:url('../img/hmt02_active.svg')}
  #main .herbal_medicine_type ul li:nth-child(3):hover a:before{background-image:url('../img/hmt03_active.svg')}
  #main .herbal_medicine_type ul li:nth-child(4):hover a:before{background-image:url('../img/hmt04_active.svg')}
  #main .herbal_medicine_type ul li:nth-child(5):hover a:before{background-image:url('../img/hmt05_active.svg')}
  #main .herbal_medicine_type ul li:nth-child(6):hover a:before{background-image:url('../img/hmt06_active.svg')}
  #main .herbal_medicine_type ul li:nth-child(7):hover a:before{background-image:url('../img/hmt07_active.svg')}
  #main .herbal_medicine_type ul li:nth-child(8):hover a:before{background-image:url('../img/hmt08_active.svg')}
  #main .herbal_medicine_type ul li:hover a span{color:#E4B162}

  /* #main .herbal_medicine_type ul li a img{display:block; margin:0 auto 0.833vw; transition:500ms all; /* width:80px; *//* width:4.167vw}
  #main .herbal_medicine_type ul li:hover a img{filter: invert(100%) sepia(22%) saturate(7231%) hue-rotate(310deg) brightness(93%) contrast(91%);}
  #main .herbal_medicine_type ul li:hover a span{filter: invert(100%) sepia(22%) saturate(7231%) hue-rotate(310deg) brightness(93%) contrast(91%);} */

  /** main section3 **/

  #main .herbal_medicine_introduce{background-image:url('../img/medicinal_herbs.jpg'); background-position:left center; background-repeat:no-repeat; background-size:1000px auto}
  #main .cont_inner section.section3.herbal_medicine_introduce{padding:0}
  .herbal_medicine_introduce_txt{padding-top:3vw}
  .herbal_medicine_introduce_txt *{}
  .herbal_medicine_introduce_txt p{letter-spacing: -0.052vw; font-size:48px; margin-bottom:30px; line-height:3.229vw}
  .herbal_medicine_introduce_txt h3{letter-spacing: -0.130vw; font-size:90px; font-weight:bold; color:#E4B162; line-height:1.4;}
  .herbal_medicine_introduce_txt h3 a.btn.more{display:inline-block; margin-top:1.5vw; width:100px; height:100px}


  /** main section4 **/
  #main .cont_inner section.herbal_medicine_geunbon_sosaeng{}
  #main .cont_inner section.herbal_medicine_geunbon_sosaeng li{cursor: auto;}

  /** main section5 **/
  #main .cont_inner .herbal_medicine_info{margin-top:2.083vw}


  /* naver_reservation */
  /* .reservation{position:absolute; width:100%; left:0}
  .reservation{margin-bottom:90px}*/
  .reservation .contact_title{width:100%; background-color:#00C73C  !important; text-align:center; position:static; padding:0 0 80px 0}
  .contact_title img{width:100%; max-width:1500px; margin:90px auto}
  .reservation .branch_list_info{margin-top:-80px}





  @media(max-width:3840px){
    #main .herbal_medicine_type ul li:last-child a span{ margin-top:-0.521vw}
  }

  @media(max-width:2561px){
    .cont_inner section{margin:50px 0}
    .contact_title img{width:900px}
    #main .herbal_medicine_type ul li a:before{width:100px; height:100px; margin:0 auto}
    #main .herbal_medicine_type ul li a span{margin-top:20px; font-size:28px}
    #main .herbal_medicine_introduce{background-size:930px}
    .herbal_medicine_introduce_txt{padding:4vw 0}
    .herbal_medicine_introduce_txt p{font-size:36px}
    .herbal_medicine_introduce_txt h3{font-size:70px}
    .herbal_medicine_introduce_txt h3 a.btn.more{width:80px; height:80px; border-radius:80px}
    .branch_info_btns .btn {height: 77px;  font-size: 33px;  padding: 20px;}
    .branch_info_left h3, .branch_info_left h3 a {font-size: 50px; }
    .branch_info_left h3 a img {width: 38px; margin-right: 13px}
    .branch_info li label { width: 256px; font-size: 33px}
    .branch_info li span {width: calc(100% - 187px);font-size: 33px}
    .branch_info_left p { font-size: 33px;}
    .branch_info_right h5 {font-size: 38px;padding-bottom: 13px}
    .info_view_detail h5 {font-size: 38px}
    #main .herbal_medicine_type ul li:last-child a span{margin-top:10px}
    #main .cont_inner .herbal_medicine_info ul{padding-top:0}
  }

  @media(max-width:1920px){
    .main_visual{height:auto}
    .sliding_panel{height:22vw}
    .sliding_panel .sliding_panel__bg{}
    .sliding_panel__bg .btn.more{width:60px; height:60px;}
    .sliding_panel__txt img{width:90px; height:auto}
    #main .herbal_medicine_type ul li a:before{width:80px; height:80px}
    #main .herbal_medicine_type ul li a span {margin-top: 15px; font-size: 25px}
    #main .herbal_medicine_introduce{background-size:815px}
    .herbal_medicine_geunbon_sosaeng{max-width:100%}
    .cont_inner section{margin:50px 0}
    .contact_title h2{font-size:40px; max-width:1300px}
    .branch_list_info .branch_list{margin-top:0; padding-top:0}
    .branch_list li{height:70px}
    .branch_list li a{font-size:28px}
    .branch_list li.on a{border-bottom:1px solid #E5B367}
    .branch_info_left h3,
    .branch_info_left h3 a{font-size:35px}
    .branch_info_left p{font-size:23px}
    .branch_info_right h5{font-size:28px}
    .branch_info li label,
    .branch_info li span,
    .branch_info li span em,
    .location_detail dl dt strong{font-size:23px}
    .branch_info_btns .btn {height: 60px;font-size: 23px; padding: 15px;}
    .branch_info_btns .btn img{height:47px; margin-top:-10px}
    .thumbnail_slider_wrap{max-height:none}
    .branch_preview_thumbnail_wrap{padding:70px 0}
    .map_area{width:100%}
  }
  @media(max-width:1600px){
    .sliding_panel__bg{background-size:cover}

  }
  @media(max-width:1440px){
    #main .herbal_medicine_type ul li a span{font-size:22px}
    #main .herbal_medicine_introduce{background-size:720px}
    #main .herbal_medicine_introduce_txt h3 {font-size: 50px}
    #main .herbal_medicine_introduce_txt h3 a.btn.more {width: 60px;height: 60px; border-radius: 80px}
    #main .contact_title img { width: 60%; margin: 50px auto}
    #main .branch_list_info > .branch_info{max-width: calc(100% - 12.50000vw);}
    #main .branch_info li label { width: 140px}
    #main .branch_info li span {width: calc(100% - 137px)}
    #main .branch_preview_thumbnail_wrap{display:none}
    #main .branch_preview_css{width:100%; margin:0; float:none}

  }


  @media(max-width:1680px) and (min-width:1281px){

  }
  /* 테블릿 (해상도 40.000vw ~ 62.448vw)*/
  @media all and (min-width:40.000vw) and (max-width:62.448vw) {

  }

  @media(max-width:1024px){
    #main .herbal_medicine_type ul li a span {font-size: 20px}
    #main .herbal_medicine_introduce{background-size:560px}
    #main .herbal_medicine_introduce_txt p {font-size: 30px}
  }

  /* 모바일 (해상도 360px ~ 767px)*/
  @media (max-width:769px) {

    #main .cont_inner .herbal_medicine_info{margin-top:6.250vw}
    #main .herbal_medicine_type ul li{width:25%; margin-bottom:6.25vw}
    #main .herbal_medicine_type ul li:nth-child(5),
    #main .herbal_medicine_type ul li:nth-child(6),
    #main .herbal_medicine_type ul li:nth-child(7),
    #main .herbal_medicine_type ul li:nth-child(8){margin-bottom:0}
    .sliding_panel__txt img{width:8.073vw; height:auto;}
    .sliding_panel__txt label{font-size:3.125vw; white-space: nowrap; height:5vw}
    .sliding_panel{height:31.25vw}
    .sliding_panel__txt{overflow:hidden}
     .herbal_medicine_info ul li .float-right dl dt{font-size:4.8vw}

    #main .herbal_medicine_introduce { background-size: 51vw}
    #main .herbal_medicine_introduce_txt h3 {font-size: 6vw;line-height: 1.3}
    #main .herbal_medicine_introduce_txt p {font-size: 4vw}
    #main .herbal_medicine_type ul li:hover a:before,
    #main .herbal_medicine_type ul li:focus a:before,
    #main .herbal_medicine_type ul li:active a:before{background-size:10.417vw}
    #main .herbal_medicine_type ul li a:before{width:10.417vw; height:10.417vw}
    #main .herbal_medicine_type ul li a span{font-size:3.125vw; margin-top:2.083vw}
    #main .herbal_medicine_type ul li:last-child a span {line-height: 3.458vw;}
    .herbal_medicine_introduce_txt {padding-top: 1.99vw;}
    .herbal_medicine_introduce_txt p{font-size:36px; margin-bottom:2.604vw}
    .herbal_medicine_introduce_txt h3{font-size:60px; line-height:6.479vw}
    .herbal_medicine_introduce_txt h3 a {margin-top: 5vw}
    .reservation{padding:0}
    .reservation .contact_title{padding:0 13.021vw; height:26.042vw; padding-bottom:0; display:flex; justify-content: center; align-items: center}
    #main .contact_title img{width:60vw; margin:0}
    .contact_title img{width:100%}
      #main .herbal_medicine_introduce{background-image:url('../img/m/medicinal_herbs.jpg'); }
      #main .cont_inner section.herbal_medicine_geunbon_sosaeng{padding-left:0; padding-right:0}
      #main .branch_list_info{width:100%; margin-top:4vw}
      .branch_info_btns{margin-top:4vw; position:relative; }
      .branch_info_btns .btn{ width: 9vw; height: 9vw; line-height:9vw; font-size: 0; padding: 0; border-radius:6px}
      .branch_info_btns .btn.btn_more { width: calc(100% - 29vw); max-width: none; font-size:4vw}
      .branch_info_btns .btn img{width:auto; height:100%; margin-top:0}
      .info_view_detail h5,
      .location_detail dl dt strong{font-size:4vw}
      .location_detail dl dd{font-size:4vw; margin-top:-3vw}
      .branch_list li{height:8vw}
      .branch_list li a, .branch_info_right h5, .info_view_detail h5, .location_detail dl dd{font-size:4vw}
      .branch_info_left p, #main .branch_info li label, #main .branch_info li span, #main .branch_info li span em, .location_detail dl dt strong{font-size:4vw}
      .branch_info_left h3, .branch_info_left h3 a{font-size:4.55729vw}
      .branch_info_left h3 a img{width:4vw; margin-right:2vw}
      #main .branch_info li label{width:25vw}
      #main .branch_info li span{width:calc(100% - 25vw)}

      #main .herbal_medicine_introduce_txt h3 a.btn.more,
      .sliding_panel__bg .btn.more{width: 7.292vw;height: 7.292vw;border-radius: 7.292vw;}
      .sliding_panel__bg .btn.more{right:2vw; bottom:2vw}
  }