@charset "utf-8"; /* 초기화 */
body {margin:0;padding:0;font-family:'Pretendard', sans-serif; padding-right: 0 !important; letter-spacing: -0.025rem;}
a {text-decoration: none;}

:root {
  --bs-link-color-rgb: #666;
  --bs-link-hover-color: #000;
}

.container {word-break: keep-all!important;}

.mt-6 {margin-top: 4.5rem!important;}
.mb-6 {margin-bottom: 4.5rem!important;}
.mt-7 {margin-top: 5rem!important;}
.mb-7 {margin-bottom: 5rem!important;}
.my-7 {margin-top: 5rem!important; margin-bottom: 5rem!important;}
.py-7 {padding-top: 5rem!important; padding-bottom: 5rem!important;}
.p-10 {padding: 5rem!important;}
.py-10 {padding-top: 5rem!important; padding-bottom: 5rem!important;}

.navbar {
  --bs-navbar-padding-y: 0;
  --bs-navbar-brand-padding-y: 1.8rem;
  display:block;
}
.offcanvas {
  --bs-offcanvas-width: 200px;
  text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}

.offcanvas-header {background:#000; height: 60px;}
.offcanvas.text-bg-dark {background-color: rgba(0,0,0,0.8)!important;}
.nav-item {border-bottom: 1px solid #000;}
.nav-link {color:#999; position:relative;}
.nav-link:hover {color:#ccc}
.dropdown-toggle::after {font-family: 'Material Icons'; content: "expand_more"; border: 0; position: absolute; right: 0;}
.dropdown-toggle.show::after {font-family: 'Material Icons'; content: "expand_less"}
.navbar-nav .dropdown-menu {background: none; border: none;}
.dropdown-menu > li {border-bottom: #000 1px dotted;}
.dropdown-menu > li:last-child {border: none;}

.navWrap ul {padding:0}
.visual .container {}
.hdWrap.container {display:block;}
.hdWrap .logoLg {display:none; line-height: 60px; font-size: 0;}
.hdWrap .btnTel {display:none;}

.swiper-txt, .visSub-txt {transform: translate(-50%,calc(-50% + 80px))!important;}
.swiper-txt h4 {margin-top: 2.25rem!important;}
.swiper-txt h5 {line-height: 2!important; margin-top: 2.25rem!important;}

.navbar-toggler {margin-top: 11px; border:1px solid rgba(255, 255, 255, 0.25); padding: 0.15rem 0.3rem;}
.navbar-toggler:focus {box-shadow: none;}
.navbar-toggler-icon {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 15%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}

.lightBg .navbar-toggler {border:1px solid rgba(0, 0, 0, 0.25);}
.lightBg .navbar-toggler-icon {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 15%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}

.tabNav {margin: 45px auto 42px;}
.tabNav nav .nav {border-bottom: none!important;}
.tabNav .nav-link {color: #bbb; border: none; background-color: #f3f3f3; position: relative; transition: all .3s; margin: 0 0.1rem; border-radius: 0;}
.tabNav .nav-link.active {border: none; background-color: #f7f7f7; color:#723d1d;}
.tabNav .nav-link:hover, .tabNav .nav-link:focus {border:none; background-color: #fcfcfc; color:#966e32;}
.tabNav .nav-link::before, .tabNav .nav-link::before {content: ""; width: 0%; height: 3px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); transition: all .3s;}
.tabNav .nav-link:hover::before, .tabNav .nav-link:focus::before {width: 100%; background-color: #966e32;}

.recommend .card-text.fs-5 {font-size: 1.125rem!important;}

@media screen and (min-width:1201px) {
  .swiper-txt h2, .visSub-txt h2 {font-size: 3rem!important;}
  .story .container .row {min-height: 500px;}
  #header.lightBg {z-index: 1004; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);}
}
@media screen and (max-width:1200px) {
  #header {top:0}
  .hdWrap .logoLg {display: inline-block;}
  .hdWrap .btnTel {display: inline-block;}
  .swiper-txt, .visSub-txt {transform: translate(-50%,calc(-50% + 30px))!important;}

  .recommend .card-body {padding:0.75rem!important;}
  #ft .oTxt {display:none!important;}
  #ft .img-fluid {height: 50px;}
}
@media screen and (max-width:992px) {
  #vis-swiper .swiper-wrapper .swiper-slide .swiper-img img {width: auto; height: 500px;}
  .swiper-txt h5, .visSub-txt h5 {font-size: 1rem!important;}
  #ft, #ft .text-end {text-align: center!important;}
  #ft .oTxt {display:none!important;}
}
@media screen and (max-width:768px) {
  .p-10, .py-10 {padding: 2.5rem!important;}
  #vis-swiper .swiper-wrapper .swiper-slide .swiper-img img {width: auto; height: 400px;}
  .visSub-img img {height: 300px!important; object-fit: cover!important;}
  #ctt_con {margin-top: 3.5rem;}
  .recommend .card-body {padding:0.5rem!important;}
  .recommend .card-text.fs-5 {font-size: 1rem!important;}
  .story .col-rt {display: none;}
  .story .col-lt {background: url(../img/model.png) right bottom no-repeat; background-size: 30vw auto;}
  #ft .img-fluid {height: 40px;}
}
@media screen and (max-width:576px) {
  .p-10, .py-10 {padding: 1.5rem!important;}
  #vis-swiper .swiper-wrapper .swiper-slide .swiper-img img {width: auto; height: 320px;}
  .swiper-txt h2, .visSub-txt h2 {font-size: 1.25rem!important;}
  .visSub-img img {height: 240px!important; object-fit: cover!important;}
  .swiper-txt h5 {font-size: 0.875rem!important; margin-top: 1.75rem!important;}
  .visSub-txt h5 {font-size: 0.875rem!important;}
  .story .col-lt {background-size: 35vw auto;}
  #ft .img-fluid {height: 28px;}
  #ft .fs-6 {font-size: 0.9rem!important;}
  #ft .cr {font-size: 0.75rem!important;}  
  .mb-5 {margin-bottom: 2rem!important;}
  .my-5 {margin-top: 2rem!important; margin-bottom: 2rem!important;}
  .my-7 {margin-top: 3rem!important; margin-bottom: 3rem!important;}
  .mb-7 {margin-bottom: 3rem!important;}
}