/* Header */
header {
  width:100%;
  height: 100px;
  display: block;
  position: fixed;
  top:0px;
  left:0;
  z-index:18500;
  transition: .4s all;
}
header figure {
  width:30%;
  max-width:300px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top:0px;
  left:2%;
  z-index:18600;
  transition: .4s all;
}
header figure img {
  width:80%;
  height: auto;
  display: block;
  transition: .4s all;
}

/* Header(Active) */
header.glactive {
  width:100%;
  height: 60px;
  display: block;
  position: fixed;
  top:0px;
  left:0;
  z-index:18500;
  background-color: rgba(0,0,0,0.8);
  background-image: url(../img/header/hrbg_act.webp);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
  box-shadow:0px 0px 15px rgba(0,0,0,0.3);
}
header.glactive figure {
  width:200px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top:0px;
  left:20px;
  z-index:18600;
}
header.glactive figure img {
  width:auto;
  height: 40px;
  display: block;
}
header.glactive .hrcc {
  width:fit-content;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  position: fixed;
  top:25px;
  left:auto;
  right:0px;
  z-index:18600;
}


/* Contact Bar */
.contactbar {
  width:fit-content;
  height: 30px;
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top:20px;
  right:1%;
  z-index:19800;
}
.contactbar li {
  width:fit-content;
  height: 30px;
  display: block;
}
.contactbar li a:hover {
  opacity: 0.5;
}
.contactbar li.cb_tel {
  width:fit-content;
  height: 30px;
  display: block;
  margin-right:10px;
}
.contactbar li.cb_tel a {
  width:100%;
  height: 30px;
  display: block;
  text-decoration: none;
  color:var(--color-white);
  font-size: clamp(1rem, 1vw + 0.5rem, 1.7rem);
  font-family: var(--font-min);
  letter-spacing: var(--font-min-ls);
  font-weight: 500;
  line-height: 30px;
  background-image: url(../img/header/ic-tel_b.webp);
  background-repeat: no-repeat;
  background-position: 20px center;
  background-size: auto 24px;
  padding:0 10px 0 55px;
  transition: .4s all;
}
.contactbar li.cb_tel a:hover {
  opacity: 0.5;
}
.contactbar li.cb_mail {
  display: none;
}
.contactbar li.cb_mail a {
  display: none;
}
.contactbar li.cb_mail a:hover {
  display: none;
}
.contactbar li.cb_line {
  width:fit-content;
  height: 30px;
  display: block;
  margin-right:20px;
}
.contactbar li.cb_line a {
  width:100%;
  height: 30px;
  display: block;
  text-decoration: none;
  color:var(--color-white);
  font-size: clamp(1rem, 1vw + 0rem, 1.0rem);
  font-family: var(--font-min);
  letter-spacing: var(--font-min-ls);
  font-weight: 700;
  line-height: 30px;
  background-image: url(../img/header/ic-line_bc.webp);
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: auto 24px;
  padding:0 10px 0 45px;
  transition: .4s all;
    border-radius: 3px;
}

.contactbar li.cb_reserve {
  width:fit-content;
  height: 30px;
  display: block;
  margin-right:10px;
}
.contactbar li.cb_reserve a {
  width:100%;
  height: 30px;
  display: block;
  text-decoration: none;
  color:var(--color-white);
  font-size: clamp(1rem, 1vw + 0rem, 1.0rem);
  font-family: var(--font-min);
  letter-spacing: var(--font-min-ls);
  font-weight: 500;
  line-height: 30px;
  background-image: url(../img/header/ic-reserve_w.webp);
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: auto 24px;
  padding:0 10px 0 45px;
  background-color: var(--color-3rd);
  transition: .4s all;
    border-radius: 3px;
}
.contactbar li.cb_reserve a:hover {
  opacity: 1;
  background-color: var(--color-1st);
}

/* Contact Bar(Active) */
.contactbar.cbactive {
  width:60%;
  max-width:800px;
  height: 50px;
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top:auto;
  bottom:0;
  right:50%;
  transform: translateX(50%);
  z-index:19800;
  padding:0px 0px;
  background-color: var(--color-black);
  border-top-left-radius: 5px;
  box-shadow:0px -2px 10px rgba(0,0,0,0.4);
}
.contactbar.cbactive li {
  height: 50px;
  display: block;
  border-radius: 0px!important;
}
.contactbar.cbactive li a:hover {
  opacity: 0.5;
}
.contactbar.cbactive li.cb_tel {
  flex:1;
  height: 50px;
  display: block;
  background-color: var(--color-black);
margin-right:0;
}
.contactbar.cbactive li.cb_tel a {
  width:100%;
  height: 50px;
  display: block;
  text-decoration: none;
  color:var(--color-white);
  font-size: clamp(1rem, 1vw + 0.4rem, 1.4rem);
  letter-spacing: -0.2px;
  font-weight: 500;
  line-height: 50px;
  background-color: #333;
  background-image: url(../img/header/ic-tel_b.webp);
  background-repeat: no-repeat;
  background-position: 25px center;
  background-size: auto 30px;
  padding:0 30px 0 65px;
  transition: .4s all;
}
.contactbar.cbactive li.cb_tel a:hover {
  opacity: 1!important;
  background-color: var(--color-1st);
}
.contactbar.cbactive li.cb_mail {
  display: none;
}
.contactbar.cbactive li.cb_mail a {
  display: none;
}
.contactbar.cbactive li.cb_mail a:hover {
  display: none;
}
.contactbar.cbactive li.cb_line {
  flex:1;
  height: 50px!important;
  display: block;
  margin-right:0px;
  background-color: var(--color-black);
}
.contactbar.cbactive li.cb_line a {
  width:100%;
  height: 50px!important;
  display: block;
  text-decoration: none;
  color:var(--color-white);
  font-size: clamp(1rem, 1vw + 0rem, 1.3rem);
  letter-spacing: -0.2px;
  font-weight: 500;
  line-height: 50px!important;
  background-color: var(--color-black);
  background-image: url(../img/header/ic-line_bc.webp);
  background-repeat: no-repeat;
  background-position: 30px center!important;
  background-size: auto 30px;
  padding:0 30px 0 75px!important;
  transition: .4s all;
  border-radius: 0px!important;
}
.contactbar.cbactive li.cb_line a:hover {
  opacity: 1!important;
  background-color: var(--color-1st);
}

.contactbar.cbactive li.cb_reserve {
  flex:1;
  height: 50px;
  display: block;
  margin-right:0px;
}
.contactbar.cbactive li.cb_reserve a {
  width:100%;
  height: 50px;
  display: block;
  text-decoration: none;
  color:var(--color-white);
  font-size: clamp(1rem, 1vw + 0rem, 1.3rem);
  letter-spacing: -0.2px;
  font-weight: 700;
  line-height: 50px;
  background-image: url(../img/header/ic-reserve_w.webp);
  background-repeat: no-repeat;
  background-position: 20px center;
  background-size: auto 30px;
  padding:0 20px 0 65px;
  background-color: var(--color-3rd);
  transition: .4s all;
  border-top-left-radius: 5px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}
.contactbar.cbactive li.cb_reserve a:hover {
  opacity: 1!important;
  background-color: var(--color-1st);
}


/* Contact Bar(End) */
.contactbar.cbend {
  width:fit-content;
  height: 50px;
  display: flex;
  justify-content: flex-end;
  position: relative;
  top:auto;
  bottom:0;
  right:auto;
  transform: translateX(0);
  z-index:19800;
  padding:0px 0px;
  margin:0 auto;
  background-color: var(--color-black);
  border-top-left-radius: 5px;
  box-shadow:0px -2px 10px rgba(0,0,0,0.4);
}
.contactbar.cbend li {
  width:fit-content;
  height: 50px;
  display: block;
  border-radius: 0px!important;
}
.contactbar.cbend li a:hover {
  opacity: 0.5;
}
.contactbar.cbend li.cb_tel {
  width:fit-content;
  height: 50px;
  display: block;
  background-color: var(--color-black);
margin-right:0;
}
.contactbar.cbend li.cb_tel a {
  width:100%;
  height: 50px;
  display: block;
  text-decoration: none;
  color:var(--color-white);
  font-size: clamp(1rem, 1vw + 0.5rem, 1.7rem);
  letter-spacing: -0.2px;
  font-weight: 500;
  line-height: 50px;
  background-color: #333;
  background-image: url(../img/header/ic-tel_b.webp);
  background-repeat: no-repeat;
  background-position: 25px center;
  background-size: auto 30px;
  padding:0 30px 0 65px;
  transition: .4s all;
}
.contactbar.cbend li.cb_tel a:hover {
  opacity: 1!important;
  background-color: var(--color-1st);
}
.contactbar.cbend li.cb_mail {
  display: none;
}
.contactbar.cbend li.cb_mail a {
  display: none;
}
.contactbar.cbend li.cb_mail a:hover {
  display: none;
}
.contactbar.cbend li.cb_line {
  width:fit-content;
  height: 50px!important;
  display: block;
  margin-right:0px;
  background-color: var(--color-black);
}
.contactbar.cbend li.cb_line a {
  width:100%;
  height: 50px!important;
  display: block;
  text-decoration: none;
  color:var(--color-white);
  font-size: clamp(1rem, 1vw + 0rem, 1.0rem);
  letter-spacing: -0.2px;
  font-weight: 500;
  line-height: 50px!important;
  background-color: var(--color-black);
  background-image: url(../img/header/ic-line_bc.webp);
  background-repeat: no-repeat;
  background-position: 30px center!important;
  background-size: auto 30px;
  padding:0 30px 0 75px!important;
  transition: .4s all;
  border-radius: 0px!important;
}
.contactbar.cbend li.cb_line a:hover {
  opacity: 1!important;
  background-color: var(--color-1st);
}

.contactbar.cbend li.cb_reserve {
  width:fit-content;
  height: 50px;
  display: block;
  margin-right:0px;
}
.contactbar.cbend li.cb_reserve a {
  width:100%;
  height: 50px;
  display: block;
  text-decoration: none;
  color:var(--color-white);
  font-size: clamp(1rem, 1vw + 0rem, 1.0rem);
  letter-spacing: -0.2px;
  font-weight: 700;
  line-height: 50px;
  background-image: url(../img/header/ic-reserve_w.webp);
  background-repeat: no-repeat;
  background-position: 20px center;
  background-size: auto 30px;
  padding:0 20px 0 65px;
  background-color: var(--color-3rd);
  transition: .4s all;
  border-top-left-radius: 5px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}
.contactbar.cbend li.cb_reserve a:hover {
  opacity: 1!important;
  background-color: var(--color-1st);
}


/* Footer */
footer {
  width:100%;
  height:auto;
  display: block;
  padding:30px 0;
}
footer  p {
  text-align: center;
  font-size:12px;
  line-height: 1em;
  margin:0;
  color:var(--color-white);
}