@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
@import url("https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css");
body {font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}
  /* 작은 화면 */
  @media (max-width: 576px) {
    html {
      font-size: 14px;
    }
	
  }
 
   /* 중간 화면 */
  @media (min-width: 577px) and (max-width: 768px) {
    html {
      font-size: 15px;
    }
  }

  /* 중간 화면 */
  @media (min-width: 768px) and (max-width: 992px) {
    html {
      font-size: 16px;
    }
  }

  /* 큰 화면 */
  @media (min-width: 992px) {
    html {
      font-size: 18px;
    }
  }

.text-ns {font-family: "NanumSquare", "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}

.fw-1 {font-weight:100;}
.fw-2 {font-weight:200;}
.fw-3 {font-weight:300;}
.fw-4 {font-weight:400;}
.fw-5 {font-weight:500;}
.fw-6 {font-weight:600;}
.fw-7 {font-weight:700;}
.fw-8 {font-weight:800;}
.fw-9 {font-weight:900;}

.fl-1 {letter-spacing:-0.01rem;}
.fl-2 {letter-spacing:-0.02rem;}
.fl-3 {letter-spacing:-0.03rem;}
.fl-4 {letter-spacing:-0.04rem;}
.fl-5 {letter-spacing:-0.05rem;}
.fl-6 {letter-spacing:-0.06rem;}
.fl-7 {letter-spacing:-0.07rem;}
.fl-8 {letter-spacing:-0.08rem;}
.fl-9 {letter-spacing:-0.09rem;}
.fl-10 {letter-spacing:-0.1rem;}

.fscu-3 {font-size:3rem;}
.fscu-4 {font-size:4rem;}

header {height:4rem;}
.bd-navbar {background-color:#17409c;box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15),inset 0 -1px 0 rgba(255,255,255,0.15)}
.bc-mblue {background-color:#17409c;}
button.navbar-toggler:focus, button.navbar-toggler:active, button.navbar-toggler-icon:focus {outline:none !important; box-shadow:none !important; border:none !important;}
.sitelogo {height:1.3rem;-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}
.navbar-brand {margin-top:0.1rem;}
.nav-link {padding-left:1rem !important; padding-right:1rem !important; padding-top:0.75rem;}
.navbar-nav > li:last-child > .nav-link {padding-right:0 !important;}
.bd-footer {background-color:#33353a; color:#eee;}



footer .list-group-item {border-bottom-color:#666;}


@keyframes moveLR { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0) } }
@keyframes moveRL { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0) } }
@keyframes moveBU { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0) } }
@keyframes moveUB { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0) } }

.move-LR.active {animation: moveLR 0.75s ease-in-out;}
.move-RL.active {animation: moveRL 0.75s ease-in-out;}
.move-BU.active {animation: moveBU 0.75s ease-in-out;}
.move-UB.active {animation: moveUB 0.75s ease-in-out;}

.animationBlock {
    opacity: 0;
    transition: opacity .5s ease-out, transform .5s ease-out;
}

.animationLR {
    transform: translateX(-50px);
}

.animationRL {
    transform: translateX(50px);
}

.animationBU {
    transform: translateY(50px);
}

.animationUB {
    transform: translateY(-50px);
}

.animationBlock.show {
    opacity: 1;
    transform: translateX(0);
}



.main-visual {background-image:url('/images/bg-home.jpg'); background-position:center center; background-repeat:no-repeat; background-size:cover;}


.bounce-zoom {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bounce-zoom:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.bounce-zoom:hover img {
    transform: scale(1.1);
}
.bounce-zoom img {
    transition: transform 0.3s ease; /* 이미지에만 transition 추가 */
}

.floatingTextareacss {height:10rem !important;}
.text-orange {color:#ff6600 !important;}



.general-board-list-group li:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02); /* 스트라이프 행의 배경색을 설정합니다. */
}

.general-board-list-item:hover {background:#efefef !important;}

.board-content {padding:5rem;}

.ic-move-post {height:2.5rem; width:2.5rem; border:2px solid #ddd; border-radius:50%; stroke-width: 1px;}


.modal.fade .modal-dialog {
    transform: translate(0, -50px);
    transition: transform .3s ease-out;
}

.modal.show .modal-dialog {
    transform: none;
}