@charset "UTF-8";



/* @FONT FACE (enable the use of 'custom fonts' inside your document) */

/* 
  You can use 'fontsquirrel' (https://www.fontsquirrel.com) 
  or 'transfonter' (https://transfonter.org)
  to generate your own font for the web from .ttf or .oft files 
*/



@font-face {
  font-family: 'CushingBook';
  src: url('../fonts/Cushingbook/CushingStd-Book.woff2');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'CushingBook';
  src: url('../fonts/Cushingbook/CushingStd-BookItalic.woff2');
  font-weight: normal;
  font-style: italic;
  font-display: block;
}

@font-face {
  font-family: 'CushingBook';
  src: url('../fonts/Cushingbook/CushingStd-Medium.woff2');
  font-weight: bold;
  font-style: normal;
  font-display: block;
}


/* VARIABLES */

:root {
  /* Color values */
  --color-background: rgb(0, 0, 0);
  --color-text: rgba(0, 0, 0, 1);
  --color-text-link: rgba(0, 0, 0, 0.8);
  --color-text-link-hover: rgba(0, 0, 255, 0.4);
  /* Font values */
  --font-text: 'CushingBook', 'Helvetica', 'Arial', sans-serif;
  /* --font-size: 16px; */
  /* Margin value */
  /* --margin: 1rem; */
}



/* GENERAL STYLES */

html {
  font: var(--font-size) var(--font-family);
  color: var(--color-text);
  background-color: var(--color-background);
  overflow-x: hidden;
  scroll-behavior: auto;
}

a {
  color: var(--color-text-link);
  text-decoration: none;
}

a:hover {
  color: var(--color-text-link-hover);
  text-decoration: underline;
}


h1 {
  /* h1 style */
}

h2 {
  font-size: 1rem;
  font-weight: bold;
}

h3 {
  /* h3 style */
}

h4,
h5,
h6 {
  /* h4-h5-h6 style */
}

p {
  /* paragraph style */
}

ol,
ul {
  color: black; /* 텍스트 색상 없애기 */
  list-style-type: none; /* 마크(점, 번호 등) 없애기 */
}

blockquote {
  /* blockquote element style */
}

hr {
  /* horizontal rule style */
}

sup {
  position: relative;
  top: -0.5em; /* 값을 조절하여 원하는 만큼 아래로 */
  left: -0.1em;
  font-size: 0.75em;
  font-weight: bold;
}


/* PAGE STYLES */

/* page structure */



/* navigation */

nav {}

/* content */

body {
  transform: none !important;
  position: relative;
  background-color: var(--color-background);
  font: var(--font-size) var(--font-family);
  color: var(--color-text);
  width: auto;
  min-height: 100vh; /* 🔹 최소 높이를 뷰포트 크기와 동일하게 설정 */
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

.page-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000; /* top-bar보다 낮은 z-index */
  opacity: 0; /* 처음에는 보이지 않음 */
  overflow-y: auto; /* 세로 스크롤 가능하도록 */
  transition: opacity 3.5s ease-in-out; /* 부드러운 전환 효과 */
}

.top-bar {
  display: flex;
  justify-content: space-between; /* 요소들을 양쪽 정렬 */
  align-items: center; /* 세로 정렬 중앙 */
  position: fixed;
  top: 4vh;
  left: 0;
  width: 100vw;
  z-index: 10001; /* page-wrapper보다 높은 z-index */
  opacity: 0; /* 처음에는 보이지 않음 */
  transition: opacity 3.5s ease-in-out; /* 부드러운 전환 효과 */
}

.top-bar-menu {
  display: flex;
  gap: 0.7vw; /* 요소들 사이 간격 */
}

.top-bar a {
  text-decoration: none;
  color: black;
  font-weight: bold;
}

.sub-top-bar-1 {
  margin-left: 4vw;
}

.sub-top-bar-3 {
  display: flex;
  gap: 0.5vw;
  margin-right: 5.2vw;
}

.sub-top-bar-3 {
  width: auto;
  height: 1.8rem;
}


.yellow-box {
  background-color: yellow;
  border: 1px solid black;
  border-radius: 1.5rem;
}

.yellow-box a p {
  padding: 0.3rem 1.8rem 0.2rem 1.8rem;
  margin: 0;
}

#loading-overlay {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: black;
  color: yellow;
  font-size: 4rem;
  justify-content: center;
  z-index: 10003; /* 다른 페이지 콘텐츠 위에 표시 */
  opacity: 1; /* 처음에 보이도록 설정 */
  transition: opacity 2.5s ease-in-out;
}

#loading-overlay .loading-text {
  display: none;
}

#loading-overlay p {
  position: absolute;
  bottom: -1%;
  width: 70%;
  text-align: center; /* ⬅ 텍스트 가로 중앙 정렬 */
  font-family: "Red Hat Display", sans-serif;
  line-height: 4.8rem;
  font-weight: 500;
  text-shadow: 
  -0.15rem -0.15rem 0 black,  
   0.15rem -0.15rem 0 black,
  -0.15rem  0.15rem 0 black,
   0.15rem  0.15rem 0 black;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4vh;
  text-align: center;
  border: 1px solid black;
  background-color: white;
  z-index: 10004; /* ✅ header가 초기에는 page-wrapper보다 위 */
}



::-webkit-scrollbar {
  display: none;
}


main {
  display: flex;
  justify-content: center;
  gap: 1.6vw;
  /* border: 1px solid red; */
}

section {
  display: flex;
  flex-direction: column;
  width: auto;
  height: auto;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  background-color: white;
  box-sizing: border-box;
  z-index: 0;
  opacity: 1;
}


section.info {
  width: auto;
  height: auto;
  background-color: transparent;
  display: flex; /* 자식 요소들이 플렉스 박스 내에서 정렬되도록 설정 */
  flex-direction: column; /* 자식 요소들이 세로로 쌓이도록 설정 */
  font-size: 0.8rem;
  line-height: 1.09rem;
}

.column {
  padding: 0 1.6vw;
  background-color: white;
  border-left: 1px solid black;
  border-right: 1px solid black;
}

.column nav ul {
  line-height: 1.09rem;
  padding-left: 1.6vw;
}

.column nav ul .italic {
  font-style: italic;
}

.sdh{
  width: 100%;
  margin: 0;
  text-align: justify;
	text-align-last: justify;
}

.footnotes {
  word-wrap: break-word;
}


.block-text {
  display: block;
  width: 100%;
}

.sub-info-1 {
  width: 17vw;
  padding-top: 54vh;
}

.sub-info-2 {
  padding-top: 8.5vh;
  width: 13.5vw;
  margin-left: 1.75vw;
}

.sub-info-2 .sdh-wrapper:nth-child(1){
  padding-bottom: 9.5vh;
}

.sub-info-2 .sdh-wrapper:nth-child(2){
  padding-bottom: 5.5vh;
}

.sub-info-3 {
  width: 15.5vw;
  margin-left: 1.5vw;
}

.sub-info-3 .sdh-wrapper:nth-child(1){
  padding-top: 40vh;
}

.sub-info-3 .sdh-wrapper:nth-child(2){
  padding-top: 9vh;
  padding-bottom: 13.5vh;
}

.sub-info-4 {
  width: 15.25vw;
}

.sub-info-4 .sdh-wrapper:nth-child(1){
  padding-top: 18vh;
}

.sub-info-4 .sdh-wrapper:nth-child(2){
  padding-top: 34.5vh;
}

.sub-info-4 .sdh-wrapper:nth-child(3){
  padding-top: 17vh;
  padding-bottom: 4.5vh;
}

.sub-info-5 {
  width: 15.25vw;
  margin-left: 1.75vw;
}

.sub-info-5 .sdh-wrapper:nth-child(1){
  padding-top: 69vh;
  padding-bottom: 3vh;
}

.sub-info-6 {
  width: 15.25vw;
  margin-left: 1.75vw;
}

.sub-info-6 .footnotes {
  padding-top: 55vh;
}

.sub-info-7 {
  width: 17vw;
}

.sub-info-7 .footnotes:nth-child(1) {
  /* padding-left: 2vw; */
  padding-top: 5vh;
}

.sub-info-7 .footnotes:nth-child(2) {
  /* padding-left: 2vw; */
  padding-top: 4vh;
  padding-bottom: 3.5vh;
}

.sub-info-8 {
  width: 13.5vw;
  margin-left: 1.75vw;
}

.sub-info-8 .footnotes {
  padding-top: 33vh;
  padding-bottom: 1vh;
}

.sub-info-9 {
  width: 17vw;
}

.sub-info-9 .sdh-wrapper:nth-of-type(1) {
  padding-top: 42vh;
  padding-bottom: 6.5vh;
}

.sub-info-10 {
  width: 17vw;
  margin-left: 1.75vw;
}

.sub-info-10 .sdh-wrapper:nth-of-type(1) {
  padding-top: 24vh;
  padding-bottom: 2vh;
}

.sub-info-11 {
  width: 17vw;
}

.sub-info-11 .footnotes:nth-child(1) {
  padding-top: 6vh;
}

.sub-info-12 {
  width: 17vw;
}

.sub-info-12 .footnotes:nth-child(1) {
  padding-top: 15vh;
}

.sub-info-12 .footnotes:nth-child(2) {
  padding-top: 0.5vh;
  padding-bottom: 16vh;
}

.sub-info-12 .sdh-wrapper:nth-of-type(1) {
  padding-top: 12.5vh;
}

.sub-info-12 .footnotes {
  padding-top: 69.5vh;
}

.sub-info-13 {
  width: 17vw;
}

.sub-info-13 .sdh-wrapper:nth-of-type(1) {
  padding-top: 33vh;
}

.sub-info-13 .footnotes:nth-of-type(1) {
  padding-top: 53vh;
}

.sub-info-13 .sdh-wrapper:nth-of-type(2) {
  padding-top: 25vh;
  padding-bottom: 14vh;
}

.sub-info-14 {
  width: 17vw;
}

.sub-info-14 .sdh-wrapper:nth-of-type(1) {
  padding-top: 51vh;
}

.sub-info-14 .sdh-wrapper:nth-of-type(2) {
  padding-top: 27vh;
}

.sub-info-14 .footnotes:nth-of-type(1) {
  padding-top: 15vh;
}

.sub-info-15 {
  width: 17vw;
}

.sub-info-15 .footnotes:nth-of-type(1) {
  padding-top: 15vh;
}

.sub-info-15 .sdh-wrapper:nth-of-type(1) {
  padding-top: 40vh;
}

.sub-info-15 .sdh-wrapper:nth-of-type(2) {
  padding-top: 10vh;
}

.sub-info-15 .sdh-wrapper:nth-of-type(3) {
  padding-top: 48vh;
  padding-bottom: 2.5vh;
}

.sub-info-16 {
  width: 17vw;
}

.sub-info-16 .sdh-wrapper:nth-of-type(1) {
  padding-top: 35vh;
  padding-bottom: 17.8vh;
}

.sub-info-17 {
  width: 17vw;
  height: 102vh;
}


.figure {
  text-align: center;
}

figcaption {
  font-size: 0.8rem;
  line-height: 1.09rem;
  padding-top: 0.3rem;
  text-align: center;
}

section.body-text {
  width: auto;
  height: auto;
  font-size: 1rem;
  line-height: 1.35rem;
  font-weight: normal;
  background-color: transparent;
}

.bodycolumn {
  padding: 0 2vw;
  background-color: white;
  border-left: 1px solid black;
  border-right: 1px solid black;
}

.bodycolumn h1 {
  text-align: center;
  padding: 15.5vh 2vw 28vh 0vw;
  font-size: 1.5rem;
}

.bodycolumn h2 {
  margin: 0;
  /* padding-left: 3vw; */
  padding-bottom: 2rem;
}

section.body-text p {
 margin: 0;
 padding: 2vh 0;
}

.bodycolumn.sub-body-text-1 {
  width: 48vw;
}

.bodycolumn.sub-body-text-1 h1 br {
  display: none;
}

.bodycolumn.sub-body-text-2 {
  width: 46vw;
}

.bodycolumn.sub-body-text-3 {
  width: 44vw;
  margin-left: 2vw;
}

.bodycolumn.sub-body-text-3 p {
  padding-bottom: 2vh;
}

.bodycolumn.sub-body-text-3 .figure {
  padding: 1.25vw;
}

.bodycolumn.sub-body-text-3 img {
  width: 100%;
}

.bodycolumn.sub-body-text-4 {
  width: 46vw;
}

.bodycolumn.sub-body-text-4 h2 {
  padding-left: 2vw;
}

.bodycolumn.sub-body-text-4 h2 {
  padding-top: 8vh;
}

.bodycolumn.sub-body-text-4 p:nth-child(1) {
  padding-bottom: 2vh;
}

.bodycolumn.sub-body-text-4 p:nth-child(3) {
  padding-bottom: 2vh;
}

.bodycolumn.sub-body-text-4 p:nth-child(4) {
  padding-bottom: 4vh;
}

.bodycolumn.sub-body-text-5 {
  width: 46vw;
  margin-left: 2vw;
  padding-top: 3vw;
}


.bodycolumn.sub-body-text-5 h2{
  padding-top: 1vh;
}

.bodycolumn.sub-body-text-6 {
  width: 46vw;
}

.bodycolumn.sub-body-text-6 .figure{
  padding-top: 3vh;
}

.bodycolumn.sub-body-text-6 .figure img{
  width: 90%;
}


.bodycolumn.sub-body-text-7 {
  display: flex;
  flex-direction: column; /* 세로 정렬 */
  margin-left: 2vw;
  width: 39.5vw;
  padding: 3vw 3.25vw 1vw 3.25vw;
  align-items: center; /* 가운데 정렬 */
}

.bodycolumn.sub-body-text-7 .figure-container {
  display: flex; /* 가로 정렬 */
  gap: 1vw; /* 이미지 사이 간격 */
}

.bodycolumn.sub-body-text-7 .figcaption {
  text-align: center; /* 캡션을 가운데 정렬 */
}


.bodycolumn.sub-body-text-7 .figure {

}

.bodycolumn.sub-body-text-7 .figure img{
  width: 100%;
}

.bodycolumn.sub-body-text-8 {
  width: 46vw;
}

.bodycolumn.sub-body-text-8 h2 {
  /* padding-left: 2vw; */
  padding-top: 5vw;
}

.bodycolumn.sub-body-text-9 {
  display: flex;
  flex-direction: column; /* 세로 정렬 */
  margin-left: 2vw;
  width: 39.5vw;
  padding: 3vw 3.25vw 1vw 3.25vw;
  align-items: center; /* 가운데 정렬 */
}

.bodycolumn.sub-body-text-9 .figure {
  width: 32%;
  text-align: center;
  padding-left: 0vw;
}

.bodycolumn.sub-body-text-9 .figure-container {
  display: flex; /* 가로 정렬 */
  justify-content: center;
  gap: 1vw; /* 이미지 사이 간격 */
}

.bodycolumn.sub-body-text-9 .figure img {

}

.bodycolumn.sub-body-text-9 .figcaption {
  text-align: center; /* 캡션을 가운데 정렬 */
}

.bodycolumn.sub-body-text-10 {
  width: 44vw;
  padding-top: 1vh;
}

.bodycolumn.sub-body-text-11 {
  width: 44vw;
  margin-left: 2vw;
}

.bodycolumn.sub-body-text-12 {
  width: 48vw;
}

.bodycolumn.sub-body-text-12 .figure {
  padding-top: 4vh;
  padding-bottom: 1.25vw;
}

.bodycolumn.sub-body-text-12 .figure img {
  width: 50%;
}

.bodycolumn.sub-body-text-12 p:nth-of-type(1) {
  padding-top: 3vh;
}

.bodycolumn.sub-body-text-12 p:nth-of-type(2) {
  padding-top: 4vh;
}

.bodycolumn.sub-body-text-12 p:nth-of-type(3) {
  font-style: italic;
}

.bodycolumn.sub-body-text-13 {
  width: 46vw;
  margin-left: 2vw;
}

.bodycolumn.sub-body-text-13 h2 {
  padding-top: 6vh;
}

.bodycolumn.sub-body-text-14 {
  width: 48vw;
}

.bodycolumn.sub-body-text-14 h2 {
  padding-top: 6vh;
}

.bodycolumn.sub-body-text-14 .figure {
  padding: 1.25vw;
}

.bodycolumn.sub-body-text-15 {
  width: 48vw;
}

.bodycolumn.sub-body-text-15 h2 {
  padding-left: 2vw;
  padding-top: 6vh;
}

.bodycolumn.sub-body-text-16 {
  width: 48vw;
}

.bodycolumn.sub-body-text-16 h2 {
  padding-top: 30vh;
}

.bodycolumn.sub-body-text-16 .bibliography {
  padding-left: 2vw;
  padding-bottom: 7.5vh;
}

.bodycolumn.sub-body-text-16 h2 {
  padding-left: 2vw;
}

.bodycolumn.sub-body-text-16 .bibliography p {
  padding: 0 0 1vw 0;
}

.important-italic {
  font-style: italic;
}

.bodycolumn.sub-body-text-16 {
  width: 48vw;
  padding: 10.2vh 0 3vh 0;
  font-size: 0.8rem;
  line-height: 1.09rem;
}

.bodycolumn.sub-body-text-16 .last-about{
  padding-left: 2vw;
  position: relative;
  margin-top: 20px;
}


.bodycolumn.sub-body-text-16 .last-about::before {
  content: "";
  width: 93%;  /* 선의 길이 */
  height: 1px; /* 선의 두께 */
  background-color: black; /* 선 색상 */
  position: absolute;
  top: -5px; /* span 바로 위에 배치 */
  left: 1.5vw;
}




section.image-roll {
  width: 18vw;
  margin-right: 2vw;
  border-left: 1px solid black;
  border-right: 1px solid black;
}

section.image-roll .figure-roll .figcaption-wrapper .fig {
  padding: 0 0.5vw 0.1vw 0.5vw;
  text-align: justify;
	text-align-last: justify;
}

section.image-roll .figure-roll .figcaption-wrapper .subfig {
  padding: 0 0.5vw 0.1vw 0.5vw;
  text-align: center;
}

section.image-roll .num5 {
  padding-top: 1.3vw;
  font-style: italic;
}

section.image-roll .num5 .figcaption-wrapper:nth-child(2){
  padding-top: 4vw;
  font-style: normal;
}

section.image-roll .num6 {
  padding-top: 20.5vw;
}

section.image-roll .num9 {
  padding-top: 7vw;
}

section.image-roll .num11 .figcaption-wrapper:nth-child(3){
  font-style: italic;
  padding-top: 4vh;
}

section.image-roll .num11 .figcaption-wrapper:nth-child(4){
  padding-top: 4vh;
}

section.image-roll .num12 {
  padding-top: 31vw;
}

section.image-roll .num15 {
  padding-top: 0.2vw;
}

section.image-roll .num16 img {
  width: 100%; /* div의 너비에 맞춰 이미지의 너비를 100%로 설정 */
  height: 88%; /* div의 높이에 맞춰 이미지의 높이를 100%로 설정 */
  object-fit: cover; /* 이미지가 div를 꽉 채우도록 하며, 잘리게 설정 */
  object-position: center; /* 이미지를 div의 중앙에 정렬 */
}



section.image-roll .num17 {
  padding-top: 9vw;
}

section.image-roll .num19 img {
  width: 100%; /* div의 너비에 맞춰 이미지의 너비를 100%로 설정 */
  height: 111%; /* div의 높이에 맞춰 이미지의 높이를 100%로 설정 */
  object-fit: cover; /* 이미지가 div를 꽉 채우도록 하며, 잘리게 설정 */
  object-position: center; /* 이미지를 div의 중앙에 정렬 */
}

section.image-roll .num20 {
  padding-top: 11vw;
}

section.image-roll .num27 {
  padding-top: 21.4vw;
}

section.image-roll .num27 img {
  width: 100%; /* div의 너비에 맞춰 이미지의 너비를 100%로 설정 */
  height: 105%; /* div의 높이에 맞춰 이미지의 높이를 100%로 설정 */
  object-fit: cover; /* 이미지가 div를 꽉 채우도록 하며, 잘리게 설정 */
  object-position: center; /* 이미지를 div의 중앙에 정렬 */
}

section.image-roll .num28 {
  padding-top: 5.6vh;
}

section.image-roll .num28 img {
  width: 100%; /* div의 너비에 맞춰 이미지의 너비를 100%로 설정 */
  height: 94%; /* div의 높이에 맞춰 이미지의 높이를 100%로 설정 */
  object-fit: cover; /* 이미지가 div를 꽉 채우도록 하며, 잘리게 설정 */
  object-position: center; /* 이미지를 div의 중앙에 정렬 */
}

section.image-roll .num29 {
  padding-top: 13vh;
}

img {
  max-width: 100%;
}

.overlay {
  display: none;
  position: fixed;
  bottom: 6%;
  left: 48%;
  transform: translateX(-50%);
  width: 75vw;
  height: 10vh;
  padding: 1.5rem;
  text-align: center;
  color: yellow;
  justify-content: center;
  align-items: center;
  font-size: 4rem;
  z-index: 1000;
  border-radius: 10px;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  opacity: 0;
}

.overlay.active {
  display: flex;
  opacity: 1;
}


.overlay p {
  width: 100%;
  line-height: 4.8rem;
  font-family: "Red Hat Display", sans-serif;
  font-weight: 500;
  text-shadow: 
  -0.15rem -0.15rem 0 black,  
   0.15rem -0.15rem 0 black,
  -0.15rem  0.15rem 0 black,
   0.15rem  0.15rem 0 black;
}


/* UTILITY CLASSES */

/* hide desktop mobile etc */

.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}





/* WEBSITE MEDIA QUERIES */

/* responsive typeface for various breaking points, sets the default 'rem' value */

@media (min-width: 340px) and (max-width: 440px) {
  :root {
    --font-size: 16px;
  }

  body {
    font-family: 'CushingBook', 'Helvetica', 'Arial', sans-serif;
  }

  .page-wrapper, main {
    width: 100vw !important;  /* ✅ 부모 요소가 전체 화면을 차지하도록 */
    max-width: 100vw !important;
    padding: 0 !important;
    margin: 0 auto !important;
    display: flex !important;
  }

  .sub-top-bar-3 {
    margin-right: 3.6vw;
  }

  .body-text {
    width: 90vw !important; /* ✅ 전체 화면의 90% 너비 */
    max-width: 90vw !important;
    padding: 0 !important;
    margin: 0 auto !important; /* ✅ 가운데 정렬 핵심 */
  }

  .bodycolumn {
    width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
  }

  .bodycolumn.sub-body-text-1 h1 {
    line-height: 1.35;
    padding: 16vh 0 6vh 0;
  }

  .bodycolumn.sub-body-text-1 h1 br {
    display: block;
  }

  .overlay {
    bottom: 16%;
    left: 50%;
    transform: translateX(-50%);
    width: 90vw;
    padding: 1.5rem;
    font-size: 2.5rem;
  } 
  
  .overlay p {
    line-height: 2.9rem;
  }

  #loading-overlay p {
    bottom: 18%;
    width: 90vw;
    font-size: 2.5rem;
    line-height: 2.9rem;
  }

  * {
    box-sizing: border-box !important;
  }
}






@media (min-width: 1321px) {
  :root {
    --font-size: 19px;
  }

  html,
  body {
    font: var(--font-size) var(--font-text);
  }
}

/* styles for 'mobile', screen sizes up to 779px, should covers 'mobile' and 'tablet' */
/* style this one first and then use the subsequent ones in a cascading way (from general to specific) */

@media (max-width: 779px) {

  /* your 'mobile' overriding css properties here */



  /* utility classes, mobile */

  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: block;
  }

}


/* use this query to apply style changes to smaller smartphones sizes (like an iPhone 5S or SE 2016), max size of 339px */

@media (max-width: 339px) {

  /* your overriding css properties here */

}



/* use this query to apply style changes for 'mobile' screen sizes that are flipped in 'landscape' mode */

@media (max-width: 779px) and (orientation: landscape) {

  /* your overriding css properties here */

}



/* use this query to apply style for 'small' desktop screens */

@media (min-width: 780px) and (max-width: 992px) {

  /* your overriding css properties here */

}