/* header */
.header .header-wrapper{ border-bottom: 1px solid rgba(74,74,72,.3);}
.header .logo-wrap img.logo-normal{display: none;}
.header .logo-wrap img.logo-scroll{display: inline-block;}
.header + .header-btn{ top: 0; opacity: 1; pointer-events: inherit;}
.header + .header-btn.active{top: 120px;}
.header {position: fixed; border-bottom: unset; transition: tranform 0.3s;  top: 0;}
.header:after{height: 100%; background-color: rgba(255,255,255,1); transform: scaleY(1); z-index: -1;}
.header .menu-icon__line{ background-color: #4A4A48;}
.header .header-icon > a.reser-btn{ display: inline-block; border: 1px solid rgba(112,112,112,.5); color: #707070; }
.header .header-icon > a i{ color: #707070;}
body.nav-active .header .header-wrapper{ border-bottom: 1px solid rgba(255,255,255,.3);}
body.nav-active .header:after{height: 100%; background-color: rgba(112,112,112,1); transform: scaleY(1); z-index: -1;}
body.nav-active .header .logo-wrap img.logo-normal{display: inline-block;}
body.nav-active .header .logo-wrap img.logo-scroll{display: none;}
body.nav-active .header .header-icon > a.reser-btn{ display: inline-block; border: 1px solid #fff; background-color: transparent; color: #fff; }
body.nav-active .header .header-icon > a i{ color: #fff;}
body.nav-active .header .menu-icon__line{ background-color: #fff; }
.cm-header .op_show{ opacity: 1; transition: .5s; animation: unset;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  .header .header-wrapper{ border-bottom: 0;}
  body.nav-active .header .header-wrapper{ border-bottom: 0;}
  body.nav-active .header.scroll .header-wrapper{ border-bottom: 0;}
  body.nav-active .header{ border-bottom: 1px solid rgba(255,255,255,.3);}
  body.nav-active .header.scroll{ border-bottom: 1px solid rgba(255,255,255,.3);}
}


#section01{ padding: 120px 0;}
#section01 #comm-tab-area{ padding-bottom: 70px;}
#section01 #comm-tab-area .tab{ display: flex; justify-content: center;}
#section01 #comm-tab-area a{ display: inline-block; position: relative; width: 300px; height: 48px; line-height: 48px; border-radius: 24px; border: 1px solid #aeadad; transition: .5s; margin: 0 20px; text-align: center; } 
#section01 #comm-tab-area a:hover, #section01 #comm-tab-area a.active{ background-color: #707070!important; border: 1px solid #707070!important; color: #fff!important;}
#section01.reserv .reserv-calendar{ width: 100%;}
#section01.reserv .reserv-mo > i{ font-size: 16px; width: 42px; height: 42px; border: 1px solid #aeadad; border-radius: 50%; text-align: center; line-height: 38px; margin-bottom: 30px; }
#section01 a.book-btn{ position: relative; }
#section01 a.book-btn .arrow{ position: relative; z-index: 2; padding-left: 10px;}
#section01 a.book-btn .turn{ position: absolute; top: 0; right: 0; top: -6px; right: -12px; opacity: 1; transition: .3s; animation: turn 5s linear normal infinite forwards; z-index: 1;}
@keyframes turn {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section01{ padding: 50px 0; }
    #section01 #comm-tab-area{ padding-bottom: 40px;}
    #section01 #comm-tab-area .tab{ justify-content: space-between;}
    #section01 #comm-tab-area a{ width: calc(50% - 7px); height: 35px; line-height: 35px; border-radius: 25px; margin: 0; } 
    #section01 #comm-tab-area a:hover, #section01 #comm-tab-area a.active{ background-color: #707070!important; border: 1px solid #707070!important; color: #fff!important;}
    #section01.reserv .reserv-calendar{ width: 100%;}
    .reserv-mo{ width: 100%; padding: 20px 0 40px; text-align: center;}
    .reserv-mo p{ line-height: 30px;}

}


/* charge */
#section01.charge .charge-tit{ width: 100%; }
#section01.charge .charge-tit .circle{ display: inline-block; width: 40px; height: 40px; text-align: center; line-height: 40px; border-radius: 50%; background-color: #707070; color: #fff; margin-right: 12px;}
#section01.charge .flex-box{ display: flex; position: relative; text-align: left;}
#section01.charge .flex-box .line{ width: 200%; height: 1px; background-color: #ccc; position: absolute; top: 75px; left: -50%;}
#section01.charge .flex-box .charge-tit{ border: 0;}
#section01.charge .flex-box .content{ width: 100%;}
#section01.charge .table-wrap{ text-align: left; position: relative;}
#section01.charge .table-wrap .charge-tit{ border: 0;}
#section01.charge .table-wrap .line01{ width: 200%; height: 1px; background-color: #ccc; position: absolute; top: 75px; left: -50%;}
#section01.charge .table-wrap .line02{ width: 200%; height: 1px; background-color: #ccc; position: absolute; top: 0; left: -50%;}
#section01.charge .content{ line-height: 20px; font-size: 12px;}

#section01.charge table {width: 100%;margin: 0 auto;text-align: center;border-top: 1px solid #d8d8d8;border-bottom: 1px solid #d8d8d8;}
#section01.charge table tr {line-height: 50px;  border-bottom: 1px solid #efefef;}
#section01.charge table th {font-size: 16px;color: #666666;font-weight: 500; width:calc(100%/11);  background-color: #F6F6F6;}
#section01.charge table td {font-size: 14px;color: #222; width:calc(100%/11); background-color: #fff;}

/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section01.charge .content_wrap{ text-align: left;}
    #section01.charge .charge-tit .circle{ width: 20px; height: 20px; line-height: 20px; margin-right: 3px;}
    #section01.charge .flex-box{ flex-direction: column; padding: 0!important;}
    #section01.charge .flex-box .line{ display: none;}
    #section01.charge .flex-box .content{  font-size: 12px;}
    #section01.charge .table-wrap .line01{ width: 200%; height: 1px; background-color: #ccc; position: absolute; top: 45px; left: -50%;}
    #section01.charge .content{ line-height: 18px; font-size: 12px;}
    #section01.charge strong{font-weight: 700;}
    .ch-block.last{padding-bottom: 50px}
    #section01.charge table{width: 1025px;}
    .refund {overflow-x: scroll;overflow-y: hidden;}
    .refund::-webkit-scrollbar { width: 5px; height: 5px; }
    .refund::-webkit-scrollbar-thumb{ height: 17%; background-color: #111111; border-radius: 2px; }
    .refund::-webkit-scrollbar-track{ background-color: #fff; }

    .comm3_wrap #inner{ height: 700px!important;}
    
}