ul, li, ol{
  list-style: none;
  padding: 0;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}


button {
  cursor: pointer;
  background-color: transparent;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

h1, h2, h3, h4, h5, h6{margin-bottom: 0;}


/* ======= default ======= */
body{font-family: 'pretendard', sans-serif; font-weight: 400; overflow-x: hidden;}


/* ======= common ======= */
.sr_only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  /* 클리핑 */ clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
  

.sub-light-bg{
  background-color: #f3f4f4;
}

.fs-7{
  font-size:.875rem;
}


/* ===================================================
  font-family
=================================================== */
.playD {
  font-family: 'playD', serif;
}
.playD-7 {
  font-family: 'playD', serif;
  font-weight: 700;
}
.playD-9 {
  font-family: 'playD', serif;
  font-weight: 900;
}


/* ===================================================
  scroll-top
=================================================== */
.scroll-top{width: 60px; height: 60px; border-radius: 50%; background-color: #184d74; display: flex; justify-content: center; align-items: center; color: #fff;  right: 5vw; left: unset; bottom: 5vh;}
.scroll-top:hover{background-color: #184d74; color: #fff;}



/* ======= header ======= */
#header{background-color: #fff;}
#header .navbar .container-xxl{padding: 0;}

/* ===================================================
  Header Top 영역 (로고, 유틸 영역)
=================================================== */
#header .header-top{height: 80px; border-bottom: 1px solid #c8c8c8;}
#header .header-top .container-xxl{height: 100%; position: relative; align-items: center; justify-content: center;}
#header .logo{height: 50px; font-weight: bold;}
#header .logo a{width: 100%; height: 100%; display: block;}
#header .logo img{height: 100%; object-fit: cover; display: block;}

/* 유틸 영역 (로그인/회원가입 등) */
#header .utill{position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); z-index: 1;}
#header .utill .utill-item{padding: 0 12px; position: relative; color: #717171;}
#header .utill .utill-item .btn-outline-primary{padding: 4px 12px; --bs-btn-color: #3c93ce; --bs-btn-border-color: #3c93ce;}
#header .utill .utill-item .btn-outline-primary:hover{color: #fff; background-color: #3c93ce; border-color: #3c93ce;}
#header .utill .utill-item::after{content: ''; height: 45%; border: 1px solid #bcbcbc; position: absolute; top: 50%; transform: translateY(-50%); right: 0;}
#header .utill .utill-item:last-child::after{content: none;}

/* 드롭다운 토글 스타일 (유틸/모바일) */
#header .utill .dropdown-toggle, .mobile-utill .dropdown-toggle{padding: 0; color: #717171;}

/* ===================================================
  Navbar / 메뉴
=================================================== */
#header .navbar{padding: 0; --bs-navbar-nav-link-padding-x:0;}
#header .nav-item{height: 60px;}
#header .nav-link{height: 100%; display: flex; align-items: center; font-weight: 600; --bs-nav-link-color:#333;}
#header .navbar-nav .nav-link.active, #header .navbar-nav .show>.nav-link,
#header .nav-item.dropdown:hover > .nav-link, #header .nav-link:hover{color: #1373b3;}

/* ===================================================
  Dropdown 화살표
=================================================== */
#header .dropdown-toggle.show::after{border-top: 0; border-left: .3em solid transparent; border-right: .3em solid transparent; border-bottom: .3em solid;}
#header .navbar .dropdown-toggle::after{content: '\e313'; font-family: "Material Symbols Outlined"; vertical-align: middle; border:none;}

/* ===================================================
  Dropdown 메뉴
=================================================== */
#header .navbar .dropdown-menu{--bs-dropdown-border-color: #f3f3f3; --bs-dropdown-border-radius: 0; padding: 0; margin-top: 0; border-radius:0 0 1rem 1rem; overflow:hidden;}
#header .navbar .dropdown-menu li{border-top: 1px solid #f3f3f3;}
#header .navbar .dropdown-menu li:last-child{border-bottom: 1px solid #f3f3f3;}
#header .navbar .dropdown-menu li a{height: 50px; display: flex; align-items: center;}
#header .navbar .dropdown-item:focus, #header .navbar .dropdown-item:hover,
#header .navbar .dropdown-item.active, #header .navbar .dropdown-item:active{color: #1373b3; background-color: #fafafa;}


/* ===================================================
  responsive 미디어쿼리
=================================================== */
@media (min-width: 993px) {
  #header .nav-item.dropdown:hover .dropdown-menu { display: block; }
}

@media (max-width: 1399.98px) {
  .container-xxl{padding: 0 2rem !important;}
}

@media (max-width: 1199.98px) {
  #header .container-xxl{padding: 0 1rem;}
  .mobile-navbar-toggler{position: absolute; left: 1rem;}
  #header .navbar-nav .nav-item:last-child .dropdown-menu{right: 0;}
}

@media (max-width: 991.98px) {
  #header .header-top{height: auto; padding: 1rem 0;}
  #header .logo{height: 36px;}
  
  #header .offcanvas-title {height: 32px;}
  #header .offcanvas-title img {height: 100%; object-fit: cover;}
  
  #header .nav-item{height: auto; margin: 5px 0;}
  #header .nav-link{padding: 10px 0;}
  #header .navbar .dropdown-menu{padding: 0; --bs-dropdown-border-color: var(--bs-border-color-translucent); --bs-dropdown-border-radius:0.375rem;}
  #header .navbar .dropdown-menu li:first-child{border-top: none;}
  #header .navbar .dropdown-menu li:last-child{border-bottom: none;}
  
  .mobile-utill .utill-item{width: 100%; height: 40px; text-align: center; color: #717171; background-color: #fafafa;}
  .mobile-utill .utill-item .dropdown{height: 100%;}
  .mobile-utill .utill-item a, .mobile-utill .utill-item button{width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
  .mobile-utill .dropdown-menu{left: unset; right: 0;}
}

@media (max-width: 575.98px) {
  #header .logo{height: 30px;}
}




/* ======= footer ======= */
.footer{
  width: 100%;
  height: 150px;
  background-color: #202832;
}
.footer .container-xxl{
  height: 100%;
}
.footer .ft-logo img{
  height: 100%;
  object-fit: cover;
  display: block;
}
.footer .Copyright{
  color: #62666b;
}



/* ===================================================
responsive 미디어쿼리
=================================================== */
@media (max-width: 991.98px) {
  .footer .container-xxl{
    height: 100%;
  }
  .footer .ft-logo{
    height: 40px;
  }
  .footer .Copyright{
    margin-top: 1rem;
    text-align: center;
    font-size: 0.875rem;
    padding: 0 2rem;
  }
}