@import url('font-awesome.css');
/* @import url("http://fonts.googleapis.com/css?family=Lato:300,400,900"); */

@font-face {
  font-family: 'NanumSquare_acEB';
  src: url('/dlab-amc.github.io/fonts/NanumSquare_acEB.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'NanumSquare_acL';
  src: url('/dlab-amc.github.io/fonts/NanumSquare_acL.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'NanumSquare_acR';
  src: url('/dlab-amc.github.io/fonts/NanumSquare_acR.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'NanumSquare_acB';
  src: url('/dlab-amc.github.io/fonts/NanumSquare_acB.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/*
	Twenty by HTML5 UP
	html5up.net | @n33co
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

/* Basic */

body,
#skel-layers-wrapper {
  background: #f3f6fa;
  background-size: 25em, 25em, auto, cover;
}

body.is-loading * {
  -moz-animation: none !important;
  -webkit-animation: none !important;
  -o-animation: none !important;
  -ms-animation: none !important;
  animation: none !important;
  -moz-transition: none !important;
  -webkit-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

body,
input,
select,
textarea {
  color: #515455;
  font-family: 'NanumSquare_acL';
  font-size: 15pt;
  font-weight: 900;
  /* letter-spacing: 0.025em; */
  line-height: 1.75em;
}

a {
  -moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out,
    background-color 0.2s ease-in-out;
  -webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out,
    background-color 0.2s ease-in-out;
  -o-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out,
    background-color 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out,
    background-color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out,
    background-color 0.2s ease-in-out;
  color: #f57c13;
  text-decoration: none;
  border-bottom: dotted 1px;
  text-decoration: none; /* 하이퍼링크 밑줄 제거 */
  outline: none; /* 하이퍼링크 점선 제거 */
}

a:hover {
  border-bottom-color: transparent;
}

strong,
b {
  font-weight: 900;
}

.session2 {
  background-color: #ccffcc;
  /* 두 번째 세션 배경 색상 */
  color: #333;
  /* 텍스트 색상 */
  padding: 20px;
}

p,
ul,
ol,
dl,
table,
blockquote {
  margin: 0 0 2em 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: inherit;
  font-weight: 300;
  line-height: 1.75em;
  margin-bottom: 1em;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
  text-decoration: none;
  border: 0;
}

h1 {
  margin-top: 0.5em;
  /* letter-spacing: 0.025em; */
  font-size: 4em;
  font-family: 'NanumSquare_acEB';
  margin-bottom: 0px;
}

h2 {
  font-size: 1.5em;
  /* letter-spacing: 0.1em; */
  font-weight: 800;
  text-transform: uppercase;
}

h3 {
  font-family: 'NanumSquare_acEB';
  font-size: 1.15em;
  letter-spacing: -0.025em;
}

h4 {
  font-family: 'NanumSquare_acL';
  font-weight: 800;
  font-size: 1.8em;
  /* letter-spacing: 0.1em; */
  text-transform: uppercase;
}

sub {
  font-size: 0.8em;
  position: relative;
  top: 0.5em;
}

sup {
  font-size: 0.8em;
  position: relative;
  top: -0.5em;
}

hr {
  border-top: solid 1px rgba(124, 128, 129, 0.2);
  border: 0;
  margin-bottom: 1.5em;
}

blockquote {
  border-left: solid 0.5em rgba(124, 128, 129, 0.2);
  font-style: italic;
  padding: 1em 0 1em 2em;
}

em {
  font-style: italic !important;
}

.ack {
  color: #999;
  font-size: 14px;
}

/* Section/Article */

section.special,
article.special {
  text-align: center;
}

header.major {
  padding-top: 5em;
  padding-bottom: 5em;
}

header.major h2 {
  margin-bottom: 0px;
  text-align: center;
}

header.major h4 {
  margin-bottom: 0px;
  text-align: center;
}

header.special {
  margin-bottom: 5em;
  padding-top: 7em;
  position: relative;
  text-align: center;
}

/* header.special:before,
header.special:after {
	border-bottom: solid 1.5px;
	border-top: solid 1.5px;
	content: '';
	height: 7px;
	opacity: 0.1;
	position: absolute;
	top: 1.75em;
	width: 43%;
} */

header.special:before {
  left: 0;
}

header.special:after {
  right: 0;
}

header.special h2 {
  margin-bottom: 0;
}

header.special h2 + p {
  margin-bottom: 0;
  padding-top: 1.5em;
}

header.special .icon {
  cursor: default;
  height: 7em;
  left: 0;
  position: absolute;
  text-align: center;
  top: 1em;
  width: 100%;
}

header.special .icon:before {
  font-size: 3.5em;
  opacity: 0.35;
}

#re_header {
  margin-bottom: 5em;
}

#re_header h2 {
  font-family: 'NanumSquare_acEB';
}

footer > :last-child {
  margin-bottom: 0;
}

footer.major {
  padding-top: 3em;
}

/* Form */

input[type='text'],
input[type='password'],
input[type='email'],
textarea {
  -moz-transition: background-color 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
  -o-transition: background-color 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
  -ms-transition: background-color 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
  -moz-appearance: none;
  -webkit-appearance: none;
  -o-appearance: none;
  -ms-appearance: none;
  appearance: none;
  background: none;
  border: solid 1px rgba(124, 128, 129, 0.2);
  color: inherit;
  display: block;
  padding: 0.75em;
  text-decoration: none;
  width: 100%;
  outline: 0;
}

input[type='text']:focus,
input[type='password']:focus,
input[type='email']:focus,
textarea:focus {
  border-color: #83d3c9ff;
}

input[type='text'],
input[type='password'],
input[type='email'] {
  line-height: 1em;
}

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.5;
  position: relative;
  top: 3px;
}

:-moz-placeholder {
  color: inherit;
  opacity: 0.5;
}

::-moz-placeholder {
  color: inherit;
  opacity: 0.5;
}

:-ms-input-placeholder {
  color: inherit;
  opacity: 0.5;
}

.formerize-placeholder {
  color: rgba(124, 128, 129, 0.5) !important;
}

/* Image */

.image {
  border: 0;
  position: relative;
}

.image:before {
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.image.fit {
  display: block;
}

.image.fit img {
  display: block;
  width: 100%;
}

.image.featured {
  display: block;
  margin: 0 0 1em 0;
}

.image.featured img {
  display: block;
  width: 100%;
}

/* Icon */

.icon {
  position: relative;
}

.icon:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-transform: none !important;
}

.icon.circle {
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  border: 0;
  border-radius: 100%;
  display: inline-block;
  font-size: 1.25em;
  height: 2.25em;
  left: 0;
  line-height: 2.25em;
  text-align: center;
  text-decoration: none;
  top: 0;
  width: 2.25em;
}

.icon.circle:hover {
  top: -0.2em;
}

.icon.circle.fa-twitter {
  background: #70aecd;
  color: white;
}

.icon.circle.fa-twitter:hover {
  background: #7fb7d2;
}

.icon.circle.fa-facebook {
  background: #7490c3;
  color: white;
}

.icon.circle.fa-facebook:hover {
  background: #829bc9;
}

.icon.circle.fa-google-plus {
  background: #db6b67;
  color: white;
}

.icon.circle.fa-google-plus:hover {
  background: #df7b77;
}

.icon.circle.fa-github {
  background: #dcad8b;
  color: white;
}

.icon.circle.fa-github:hover {
  background: #e1b89b;
}

.icon.circle.fa-dribbble {
  background: #da83ae;
  color: white;
}

.icon.circle.fa-dribbble:hover {
  background: #df93b8;
}

.icon.featured {
  cursor: default;
  display: block;
  margin: 0 0 1.5em 0;
  opacity: 0.35;
  text-align: center;
}

.icon.featured:before {
  font-size: 5em;
  line-height: 1em;
}

.icon > .label {
  display: none;
}

/* List */

ol.default {
  list-style: decimal;
  padding-left: 1.25em;
}

ol.default li {
  padding-left: 0.25em;
}

ul.default {
  list-style: disc;
  padding-left: 1em;
}

ul.default li {
  padding-left: 0.5em;
}

ul.icons {
  cursor: default;
}

ul.icons li {
  display: inline-block;
  line-height: 1em;
  padding-left: 0.5em;
}

ul.icons li:first-child {
  padding-left: 0;
}

ul.featured-icons {
  cursor: default;
  margin: -0.75em 0 0 0;
  opacity: 0.35;
  overflow: hidden;
  position: relative;
}

ul.featured-icons li {
  display: block;
  float: left;
  text-align: center;
  width: 50%;
}

ul.featured-icons li .icon {
  display: inline-block;
  font-size: 6.25em;
  height: 1.25em;
  line-height: 1.25em;
  width: 1em;
}

ul.buttons {
  cursor: default;
}

ul.buttons:last-child {
  margin-bottom: 0;
}

ul.buttons li {
  display: inline-block;
  padding: 0 0 0 1.5em;
}

ul.buttons li:first-child {
  padding: 0;
}

ul.buttons.vertical li {
  display: block;
  padding: 1.5em 0 0 0;
}

ul.buttons.vertical li:first-child {
  padding: 0;
}

/* Table */

table {
  width: 100%;
}

table.default {
  width: 100%;
}

table.default tbody tr {
  border-bottom: solid 1px rgba(124, 128, 129, 0.2);
}

table.default td {
  padding: 0.5em 1em 0.5em 1em;
}

table.default th {
  font-weight: 400;
  padding: 0.5em 1em 0.5em 1em;
  text-align: left;
}

table.default thead {
  background: #7c8081;
  color: #fff;
}

/* Button */

input[type='button'],
input[type='submit'],
input[type='reset'],
.button {
  -moz-appearance: none;
  -webkit-appearance: none;
  -o-appearance: none;
  -ms-appearance: none;
  appearance: none;
  -moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out,
    background-color 0.2s ease-in-out;
  -webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out,
    background-color 0.2s ease-in-out;
  -o-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out,
    background-color 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out,
    background-color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out,
    background-color 0.2s ease-in-out;
  background: none;
  border: solid 1px;
  color: inherit;
  cursor: pointer;
  display: inline-block;
  font-size: 0.8em;
  font-weight: 600;
  /* letter-spacing: 2px; */
  min-width: 18em;
  padding: 0 0.75em;
  line-height: 3.75em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

input[type='button']:hover,
input[type='submit']:hover,
input[type='reset']:hover,
.button:hover {
  background: rgba(188, 202, 206, 0.15);
  border-color: inherit;
}

input[type='button'].special,
input[type='submit'].special,
input[type='reset'].special,
.button.special {
  background: #83d3c9ff;
  border-color: #83d3c9ff;
  color: white !important;
}

input[type='button'].special:hover,
input[type='submit'].special:hover,
input[type='reset'].special:hover,
.button.special:hover {
  background: #96dad1 !important;
  border-color: #96dad1 !important;
}

input[type='button'].fit,
input[type='submit'].fit,
input[type='reset'].fit,
.button.fit {
  width: 100%;
}

input[type='button'].small,
input[type='submit'].small,
input[type='reset'].small,
.button.small {
  font-size: 0.7em;
  min-width: 14em;
  padding: 0.5em 0;
}

/* Wrapper */

.wrapper {
  margin-bottom: 5em;
  padding: 5em;
}

.wrapper.style1 {
  padding: 0;
}

.wrapper.style1 a.button.fit {
  height: 70px;
  padding: 1em 1em 1em 1em;
  border: 1.5px solid #d4d4d4;
  border-radius: 10px;
}

.wrapper.style1 h4 {
  text-align: center;
}

a.mail {
  color: #272727;
}

a.mail:hover {
  color: #f57c13;
  /* text-decoration: underline; */
  /* text-decoration-style: dotted; */
  border: none;
}

.wrapper.style2 {
  padding: 0 0 0 0;
  background-color: #ffffff00;
  /*background-image: url("images/light-bl.svg"), url("images/light-br.svg");*/
  background-position: bottom left, bottom right;
  background-repeat: no-repeat, no-repeat;
  background-size: 25em, 25em;
  margin-bottom: 0;
}

.wrapper.style2 p {
  color: rgb(41, 41, 41);
  font-weight: 300;
}

.wrapper.style2 h2 {
  color: rgb(255, 255, 255);
  font-weight: 200;
}

.wrapper.style2 .button:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

.wrapper.style2 .button.special {
  background: white;
  border-color: white;
  color: #83d3c9ff !important;
}

.wrapper.style2 .button.special:hover {
  border-color: inherit !important;
  color: white !important;
}

.wrapper.style3 {
  background: white;
  color: inherit;
}

.wrapper.style4 {
  background: rgb(255, 255, 255);
  color: inherit;
  padding: 4em;
}

.wrapper.style4 h3.RT {
  text-align: center;

  text-shadow: 2px 2px 2px rgb(192, 194, 194);
  margin-bottom: 0px;
}

.wrapper.style4 p.RT {
  padding-left: 30px;
  padding-right: 30px;
  color: #3b5e69;
  font-size: 0.8em;
}

.wrapper.style4 .main-row {
  border-bottom: 1px solid #ccc;
  /* 하단 경계선 추가 */
  padding-bottom: 20px;
  /* 선택사항: 내용과의 간격을 조절하기 위한 패딩 추가 */
}

/* Header */
@-moz-keyframes reveal-header {
  0% {
    top: -5em;
  }

  100% {
    top: 0;
  }
}

@-webkit-keyframes reveal-header {
  0% {
    top: -5em;
  }

  100% {
    top: 0;
  }
}

@-o-keyframes reveal-header {
  0% {
    top: -5em;
  }

  100% {
    top: 0;
  }
}

@-ms-keyframes reveal-header {
  0% {
    top: -5em;
  }

  100% {
    top: 0;
  }
}

@keyframes reveal-header {
  0% {
    top: -5em;
  }

  100% {
    top: 0;
  }
}

#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: white;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.075);
  color: inherit;
  font-size: 1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0px;
  padding: 10px; /* Add padding to create space */
}

#header img {
  max-height: 50px;
  max-width: auto;
  height: 100%;
  width: auto; /* Set width to auto to maintain aspect ratio */
  transition: all 0.3s;
  margin-right: 20px; /* Add right margin to create space */
}

#header nav {
  /* letter-spacing: 0.2em; */
  text-transform: uppercase;
  align-items: center;
  z-index: 10;
}

#header nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap to the next line */
  position: relative;
}

#header nav ul li {
  display: inline-block;
  position: relative;
  font-size: 1em; /* Set initial font size */
  padding: 0.6em 0.75em; /* Set initial padding */
  transition: all 0.3s; /* Add transition for smooth resizing */
  white-space: nowrap; /* Prevent text from wrapping */
}

#header nav ul li > ul {
  display: none;
}

#header nav ul li:hover > ul {
  display: block;
  position: relative;
}

#header nav ul li a {
  border: solid 1px transparent;
  color: inherit;
  display: inline-block;
  line-height: 1em;
  text-decoration: none;
}

#header nav ul li input[type='button'],
#header nav ul li input[type='submit'],
#header nav ul li input[type='reset'],
#header nav ul li .button {
  font-size: 1em;
  min-width: 0;
  width: auto;
}

#header nav ul li.submenu > a:before {
  font-family: FontAwesome;
  content: '\f107';
  margin-right: 0.65em;
  color: #f57c13;
  /* 화살표에 색 추가해봄 */
  position: relative;
  /* 추가: 더 높은 z-index 값 설정 */
}

#header nav ul li.active > a,
#header nav ul li:hover > a {
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  background: rgba(201, 188, 206, 0.15);
}

#header nav .cc-active {
  font-weight: 900;
}

#nav .submenu ul {
  font-weight: 900;
  position: absolute;
  z-index: 11;
  /* Make sure it appears above other elements */
  display: none;
  /* Hide it by default */
}

#submenu-ul {
  font-size: 0.75em;
}

/* Add a media query to adjust font size and padding for smaller screens */
@media (max-width: 1280px) {
  #header nav ul li {
    font-size: 0.8em; /* Adjust font size for smaller screens */
    padding: 0.4em 0.5em; /* Adjust padding for smaller screens */
  }
}

/* Blog */

.post-next {
  float: right;
  margin-right: 3em;
}

.post-prev {
  float: left;
  margin-left: 3em;
}

/* Dropotron */

.dropotron {
  background: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.075);
  line-height: 2.25em;
  min-width: 13em;
  padding: 1em 0;
  text-transform: uppercase;
  margin-top: calc(-1em + 1px);
}

.dropotron.level-0 {
  font-size: 0.7em;
  font-weight: 900;
  margin-top: 1.5em;
}

.dropotron.level-0:before {
  border-bottom: solid 0.5em #fff;
  border-left: solid 0.5em transparent;
  border-right: solid 0.5em transparent;
  content: '';
  left: 0.75em;
  position: absolute;
  top: -0.45em;
}

.dropotron > li {
  border-top: solid 1px rgba(129, 124, 128, 0.2);
}

.dropotron > li > a {
  -moz-transition: none;
  -webkit-transition: none;
  -o-transition: none;
  -ms-transition: none;
  transition: none;
  color: inherit;
  text-decoration: none;
  padding: 0 1em;
  border: 0;
}

.dropotron > li:hover > a {
  background: #036166;
  color: white;
}

.dropotron > li:first-child {
  border-top: 0;
}

#logo {
  border-bottom: none;
  padding-left: 30px;
  padding-top: 5px;
}

/* Banner */
@-moz-keyframes reveal-banner {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes reveal-banner {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-o-keyframes reveal-banner {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-ms-keyframes reveal-banner {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes reveal-banner {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

#banner {
  background-attachment: scroll, scroll, scroll, fixed;
  background-color: #645862;
  background-image: url('images/light-bl.svg'), url('images/light-br.svg'),
    url('images/overlay.png'), url('../images/banner15.webp');
  background-position: bottom left, bottom right, top left, top center;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  background-size: 25em, 25em, auto, cover;
  color: white;
  cursor: default;
  padding: 6em 0;
  /* banner사이즈 비율 조정(yen) */
  text-align: center;
}

#banner .inner {
  -moz-animation: reveal-banner 1s 0.25s ease-in-out;
  -webkit-animation: reveal-banner 1s 0.25s ease-in-out;
  -o-animation: reveal-banner 1s 0.25s ease-in-out;
  -ms-animation: reveal-banner 1s 0.25s ease-in-out;
  animation: reveal-banner 1s 0.25s ease-in-out;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  /* background: rgba(52, 27, 43, 0.5); */
  color: white;
  display: inline-block;
  opacity: 0;
  padding: 9em;
  text-align: center;
}

#banner .inner header {
  display: inline-block;
  /* border-bottom: solid 2px;
	border-top: solid 2px; */
  margin: 0 0 2em 0;
  padding: 3px 0 3px 0;
}

#banner .inner header h2 {
  /* border-bottom: solid 2px;
	border-top: solid 2px; */
  font-size: 4.6em;
  font-weight: 900;
  /* letter-spacing: 0.05em; */
  margin: 0;
  padding-left: 0.05em;
  position: relative;
  text-transform: uppercase;
}

#banner .inner p {
  /* letter-spacing: 0.05em; */
  margin: 0;
  font-size: 1.2em;
  font-weight: 700;
  text-transform: uppercase;
}

#banner .inner strong {
  font-size: 1.3em;
  font-weight: 700;
  text-transform: uppercase;
}

#banner .inner p a {
  color: inherit;
  font-weight: 300;
  text-decoration: none;
}

#banner .inner footer {
  margin: 2em 0 0 0;
}

/* Main */

#main {
  /* background-image: url("images/dark-tl.svg"), url("images/dark-tr.svg"), url("images/dark-bl.svg"), url("images/dark-br.svg"); */
  /* background-position: top left, top right, bottom left, bottom right; */
  background-repeat: no-repeat;
  /* background-size: 25em; */
  padding: 2em 0;
}

#main.no-styles {
  all: initial;
  /* Reset all styles to their initial values */
}

#main header h2 {
  font-size: 2em;
  /* Adjust the font size as needed */
}

#main > :last-child {
  margin-bottom: 0;
}

#main .sidebar section {
  border-top: solid 1px rgba(124, 128, 129, 0.2);
  margin: 3em 0 0 0;
  padding: 3em 0 0 0;
}

#main .sidebar section:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

body.index #main {
  padding-top: 5em;
}

/* CTA */

#cta {
  background-attachment: scroll, scroll, scroll, fixed;
  background-color: #645862;
  background-image: url('images/light-tl.svg'), url('images/light-tr.svg'),
    url('images/overlay.png'), url('../images/banner15.jpeg');
  background-position: top left, top right, top left, bottom center;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  background-size: 25em, 25em, auto, cover;
  color: white;
  padding: 5em;
  text-align: center;
}

#cta header {
  margin-bottom: 2em;
}

/* Footer */

#footer {
  background: #e8eef4;
  color: #7c8081;
  padding: 2.5em 5em 2.5em 5em;
  text-align: center;
}

#footer .copyright {
  font-size: 0.8em;
  line-height: 1em;
}

#footer .copyright a {
  color: inherit;
}

#footer .copyright li {
  display: inline-block;
  margin-left: 1em;
  padding-left: 1em;
  border-left: dotted 1px;
}

#footer .copyright li:first-child {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Layer */

#topButton .toggle {
  height: 100%;
  left: 0;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
  background-color: gray;
}

#topButton .toggle:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-transform: none !important;
}

#topButton .toggle:before {
  color: white;
  content: '\f039';
  font-size: 0.75em;
  height: 30px;
  left: 0;
  line-height: 30px;
  opacity: 0.5;
  position: absolute;
  top: 0;
  width: 100%;
}

#topButton .toggle:after {
  background: rgba(163, 169, 170, 0.75);
  border-radius: 0 0 4px 4px;
  content: '';
  height: 30px;
  left: 50%;
  margin-left: -40px;
  position: absolute;
  top: 0;
  width: 80px;
}

#sideButton .toggle {
  height: 100%;
  left: 0;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
}

#sideButton .toggle:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-transform: none !important;
}

#sideButton .toggle:before {
  color: white;
  content: '\f039';
  font-size: 1em;
  height: 40px;
  left: 10px;
  line-height: 40px;
  opacity: 0.5;
  position: absolute;
  top: 11px;
  width: 60px;
  z-index: 1;
}

#sideButton .toggle:after {
  background: rgba(163, 169, 170, 0.75);
  border-radius: 2px;
  content: '';
  height: 40px;
  left: 10px;
  position: absolute;
  top: 10px;
  width: 60px;
}

#topPanel,
#sidePanel {
  background: #1c2021;
  color: white;
  font-size: 0.8em;
  /* letter-spacing: 0.075em; */
  text-transform: uppercase;
}

#topPanel nav,
#sidePanel nav {
  padding: 0.25em 0.5em 1em 0.5em;
}

#topPanel .link,
#sidePanel .link {
  border: 0;
  border-top: solid 1px rgba(255, 255, 255, 0.05);
  color: inherit;
  display: block;
  height: 3em;
  line-height: 3em;
  opacity: 0.75;
  text-decoration: none;
}

#topPanel .link.depth-0,
#sidePanel .link.depth-0 {
  font-weight: 900;
}

#topPanel .link:first-child,
#sidePanel .link:first-child {
  border-top: 0;
}

#topPanel .indent-1,
#sidePanel .indent-1 {
  display: inline-block;
  width: 1em;
}

#topPanel .indent-2,
#sidePanel .indent-2 {
  display: inline-block;
  width: 2em;
}

#topPanel .indent-3,
#sidePanel .indent-3 {
  display: inline-block;
  width: 3em;
}

#topPanel .indent-4,
#sidePanel .indent-4 {
  display: inline-block;
  width: 4em;
}

#topPanel .indent-5,
#sidePanel .indent-5 {
  display: inline-block;
  width: 5em;
}

/* counter */

.num-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  padding: 2%;
  max-width: 100%;
  height: auto;
}

.num-item {
  text-align: center;
  padding: 5px;
  margin-bottom: 12px;
}

.in-title {
  font-size: 30px;
  color: gray;
  font-weight: 600;
  margin-bottom: 12px;
}

.sub-title {
  font: 14px/1 'arial';
  color: gray;
}

.nums {
  font-family: 'NanumSquare_acEB';
  font-size: 80px;
  color: #343048;
}

#num-unit {
  font: bold 30px/1 'arial';
  color: dimgray;
}

/* publication */

body {
  display: flex;
  align-items: center;
}

.sidebar {
  padding-top: 30px;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  /* 최대 높이 설정 */
  max-width: 140%;
}

.sidebar.small-sidebar {
  width: 200px;
  border-top: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
  padding-bottom: 30px;
}

a.small-button {
  color: #1c2021;
  border: none;
  text-align: left;
  text-indent: 5%;
  font-size: 17px;
  padding: 9px 3px 9px 3px;
  max-width: 100%;
  /* 버튼의 최대 너비 설정 */
  overflow: hidden;
  /* 텍스트 오버플로우 처리 */
  white-space: nowrap;
  /* 텍스트 줄 바꿈 방지 */
}

a.small-button:hover {
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  background: rgba(201, 188, 206, 0.15);
}

/* 클릭 시 텍스트 색상, 밑줄 및 볼드 스타일 변경 */
a.small-button.clicked {
  color: #ffffff;
  background: #036166;
}

.sidebar .small-button.active {
  background: #036166; /* Change to your desired color */
  color: #ffffff; /* Change to your desired color */
}

#my_div {
  margin-left: 5px;
  /* padding: 20px; */
  padding-top: 30px;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 30px;
  border-top: 2px solid #036166;
  border-bottom: 2px solid #036166;
}

#my_div a.paperlist {
  color: #515455;
  font-size: 0.9em;
  text-decoration: none;
  border: none;
  text-align: justify;
}

/* 링크 연결된 paperlist*/
#my_div a.paperclick {
  color: #515455;
  font-size: 0.9em;
  text-decoration: none;
  border: none;
  text-align: justify;
}

a.paperclick,
span.paperclick,
div.paperclick {
  color: #515455;
  font-size: 0.9em;
  text-decoration: none;
  border: none;
  text-align: justify;
  font-family: 'NanumSquare_acL';
}

#my_div a.paperclick:hover {
  color: #f57c13;
  font-size: 0.9em;
  /* text-decoration: underline; */
  /* text-decoration-style: dotted; */
  border: none;
  text-align: justify;
}

a.paperclick:hover {
  color: #f57c13;
}

.paper a.paperclick {
  color: #515455;
  text-decoration: none;
  border: none;
  text-align: justify;
}

.paper a.paperclick:hover {
  color: #f57c13;
  /* text-decoration: underline; */
  /* text-decoration-style: dotted; */
  border: none;
  text-align: justify;
}

/* members 앞에 동그라미 추가 구분자 추가  */

/* "papers-list" ID에만 스타일 적용 */
#member-list li {
  list-style-type: none;
  padding: 0;
  margin: 10px 0;
  text-indent: -0.4em;
}

/* "papers-list" ID 아래의 ::before 선택자에만 스타일 적용 */
#member-list li::before {
  content: '•';
  display: inline-block;
  margin-right: 5px;
  font-size: 1em;
}

/* nav-link css 적용  */

.nav-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 0;
  list-style: none;
  margin-bottom: 1em;
}

.nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #445353;
  background: #fff;
  border: 1px solid rgba(201, 188, 206, 0.15);
  border-radius: 12px;
  box-shadow: 0 0 10px 5px rgba(201, 188, 206, 0.15);
  width: 170px;
  justify-content: center;
  padding: 15px;
  transition: all 0.3s;
}

.nav-link:hover {
  background-color: rgba(201, 188, 206, 0.15);
  border: 1px solid #e4e4e4;
}

.nav-link.active {
  background-color: #036166;
  color: #fff;
  border: 1px solid #036166;
  box-shadow: 0px 0px 10px 5px rgba(201, 188, 206, 0.5);
}

.nav-link.active:hover {
  background-color: #034b5e;
  border: 1px solid #022627;
  box-shadow: 0px 0px 10px 5px rgba(201, 188, 206, 0.5);
}

.nav-link span {
  font-size: 50px;
  /* text-align: center;
	padding: 9px 0; */
}

/* 버튼 정렬 */

.nav-item ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-link img {
  width: 50px;
  height: 50px;
  /* 이미지 아래 여백 추가 */
}

/* CSS for the "Top" button */
#upButton {
  display: none;
  position: fixed;
  right: 40px;
  /* Adjust the right position as needed */
  bottom: 60px;
  /* Adjust the bottom position as needed */
  background-color: #036166;
  /* Button background color */
  color: #fff;
  /* Button text color */
  font-size: 16px;
  font-family: 'NanumSquare_acEB';
  /* Button font size */
  padding: 10px 20px;
  /* Button padding */
  border: none;
  border-radius: 10px;
  /* Rounded corners */
  cursor: pointer;
  z-index: 4;
}

#upButton:hover {
  background-color: #034b5e;
  /* Button background color on hover */
}

#upButton .toggle {
  height: 100%;
  left: 0;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
}

#upButton .toggle:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  text-transform: none !important;
}

#upButton .toggle:before {
  color: white;
  content: '\f039';
  font-size: 0.75em;
  height: 30px;
  left: 0;
  line-height: 30px;
  opacity: 0.5;
  position: absolute;
  top: 0;
  width: 100%;
}

#upButton .toggle:after {
  background: rgba(163, 169, 170, 0.75);
  border-radius: 0 0 4px 4px;
  content: '';
  height: 30px;
  left: 50%;
  margin-left: -40px;
  position: absolute;
  top: 0;
  width: 80px;
}

#upButton span {
  display: block;
  font-family: 'NanumSquare_acR'; /* Ensures the span inherits the font family */
  font-size: inherit; /* Inherit the size from the button */
}

/* index 아래 지도 부분 */
* {
  padding: 0;
  margin: 0;
}

#wrap {
  width: 100%;
  margin: 0 auto;
}

.contents {
  width: 100%;
}

#cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-items: center;
}

#cta header {
  width: 50%;
  order: 2;
  /* 변경된 부분 */
  padding: 20px;
  /* 글자 부분에 패딩 추가 */
  color: #ffffff;
  text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
  height: 500px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#cta iframe {
  width: 50%;
  order: 1;
  /* 변경된 부분 */
  height: 500px;
}

@media (max-width: 768px) {
  #cta {
    flex-direction: column;
    /* 변경된 부분 */
  }

  #cta header {
    width: 100%;
    padding: 20px;
    /* 모바일 글자 부분에 패딩 추가 */
  }

  #cta iframe {
    width: 100%;
    margin-bottom: 50px;
  }
}

/* 버튼 정렬 */
.nav-item ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* research 용 nav-link */

.nav-link_re {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  color: #1c2021;
  padding: 10px;
  /* 배경색을 원하는 색상으로 설정 */
  border: 1px solid rgba(201, 188, 206, 0.15);
  /* 테두리 설정 */
  border-radius: 10px;
  /* 둥근 테두리 설정 */
  height: 110px;
  width: 110px;
  transition: background-color 0.3s, color 0.3s;
  font-size: small;
  box-shadow: 0px 0px 10px 5px #92929222;
}

.nav-link_re:hover {
  background-color: rgba(201, 188, 206, 0.15);
  border: 1px solid #e4e4e4;
}

.nav-link_re.active {
  background-color: #036166;
  color: #fff;
  border: 1px solid #036166;
  box-shadow: 0px 0px 10px 5px #92929299;
}

.nav-link_re.active:hover {
  background-color: #034b5e;
  border: 1px solid #022627;
  box-shadow: 0px 0px 10px 5px #92929299;
}

.nav-link_re.active img {
  filter: brightness(0) invert(1);
  /* 이미지의 색을 하얀색으로 변경 */
  color: #fff;
}

.nav-link_re img {
  width: 50px;
  height: 50px;
  /* 이미지 아래 여백 추가 */
}

.nav-link_re span {
  line-height: 100%;
}

#span-one-line {
  text-align: center;
  padding: 10px 0 5px 0;
  font-size: 1.2em;
}

.nav-link-research {
  color: #000;
}

/* research 레이아웃 */

.image-and-content {
  display: flex;
  /* 이미지와 콘텐츠를 가로로 나란히 배치 */
  justify-content: space-between;
  /* align-items: center; */
  /* 수직 가운데 정렬 (텍스트가 이미지 높이에 맞춰짐) */
}

/* .cutstom-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr); */
/* gap: 20px; */
/* Adjust the gap as needed */
/* } */

.cutstom-row {
  display: flex;
  flex-direction: row; /* 모든 섹션을 같은 방향으로 정렬 */
  justify-content: space-between;
  gap: 20px; /* 섹션 간의 간격을 20px로 설정 */
  margin-bottom: 40px; /* 각 섹션 간의 아래쪽 간격 */
}

.image-container,
.content-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.content-container {
  width: 50%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: none;
  border-radius: 10px;
  align-items: flex-start; /* Ensure content within is aligned to the left */

  margin-left: 80px;
}

/* .image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  background-color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds shadow to the container */
/* transition: box-shadow 0.3s ease-in-out; Smooth transition for hover effect */
/* } */

.image-container {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 30px;
  margin-bottom: 1.5em;
}

.image-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* 이미지가 container에 맞게 조정되도록 설정 */
}

.lefty {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align all content to the left */
  text-align: left;
  margin: 0; /* Remove any auto margins to ensure left alignment */
  padding-left: 0; /* Remove padding to align content properly */
}

.content-container .lefty h3 {
  font-size: 1.3em;
  line-height: 1.5em;
  text-align: left;
  margin-left: 0; /* Ensure there's no left margin */
  padding-left: 0; /* Ensure there's no left padding */
}

.content-container .lefty p {
  font-weight: 100;
  font-size: 0.9em;
  margin-left: 0; /* Remove left margin for proper alignment */
  font-family: 'NanumSquare_acR';
  margin-bottom: 1em;
}

.paper,
.patent {
  padding-right: 2em;
  padding-bottom: 2em;
}

.paper p,
.patent p {
  text-align: left;
}
.research-block {
  font-size: 1.3em;
  text-indent: 1.3em;
  margin-left: 0; /* Align with the h3 in .lefty */
  padding-left: 0; /* Ensure no extra padding */
}

.paper .research-block {
  font-size: 1.1em;
}

.paper .research-block,
.patent .research-block {
  font-size: 1.1em;
  margin-left: 0; /* Align with the h3 in .lefty */
  padding-left: 0; /* Ensure no extra padding */
}

.paper a.paperclick {
  color: #515455;
  text-decoration: none;
  border: none;
}

.paper a.paperclick:hover {
  color: #f57c13;
  /* text-decoration: underline; */
  /* text-decoration-style: dotted; */
  border: none;
}

.content-container .paper,
.content-container .patent {
  display: none;
  width: 100%;
  line-height: 1.4em;
  box-sizing: border-box;
  font-size: 1em;
  text-align: left; /* Ensure text aligns to the left */
}

/* research 상단 이미지에 텍스트 */
.image-with-text {
  position: relative;
  /* 부모 요소를 상대 위치로 설정 */
}

.image-with-text img {
  width: 100%;
  /* 이미지의 가로 너비를 100%로 설정하여 부모 요소에 꽉 채움 */
  height: 560px;
  /* 높이를 자동으로 조정하여 이미지의 비율을 유지 */
}

.image-with-text h3 {
  font-size: 2.8em;
  margin-bottom: 0;
  font-weight: 300;
  text-align: right;
}

.image-with-text p {
  font-size: 1.25em;
  margin-top: 0;
  font-weight: 300;
  text-align: right; /* Ensure text aligns to the left */
}

.text-over-image {
  position: absolute;
  top: 210px;
  left: 0;
  padding: 100px;
  text-align: left; /* Aligns all text to the left */
  color: #ffffff;
}

.text-over-image h3 {
  font-size: 2.8em;
  margin-bottom: 0;
  font-weight: 300;
  text-align: left; /* Ensure the heading is aligned to the left */
}

.text-over-image p {
  font-size: 1.25em;
  margin-top: 0;
  text-align: left; /* Ensure the paragraph is aligned to the left */
}

.hidden-header {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.visible-header {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 프로필 이미지 호버 */
.profil-image-container {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.profil-image-container img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: inline-block;
  transition: filter 0.3s ease;
  /* Add a smooth transition effect */
}

.profil-image-container:hover img {
  filter: brightness(80%);
}

/* index image hover */

.image.hover:hover {
  filter: brightness(80%);
}

/* 동그란 박스 스타일 */
.round-box {
  display: inline-block;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  text-align: center;
  line-height: 96px;
  border: 5px solid white;
  /* 원 태두리 추가 */
  overflow: hidden;
  /* 내용이 넘칠 경우를 대비해 추가 */
}

/* 링크 스타일 */
.round-box a {
  text-decoration: none;
  border: none;
  color: inherit;
  /* 링크 색상 상속 */
  display: inline-block;
  /* a 태그를 inline-block으로 설정하여 효과 적용 */
  transition: transform 0.3s ease;
  /* 변형에 대한 트랜지션 효과 추가 */
}

/* 화살표 스타일 */
.round-box a:hover .icon {
  transform: translateY(5px);
  /* 마우스 호버 시 화살표를 아래로 5px 내리는 효과 */
}

.round-box .icon {
  font-size: 48px;
  vertical-align: middle;
  transition: transform 0.3s ease;
  /* 화살표에 대한 트랜지션 효과 추가 */
}

/* .custom-border에 하단 경계선 추가 */
.row .custom-border {
  border-bottom: 1px solid #ccc;
  /* 하단 경계선 추가 */
  width: 100%;
  /* 너비를 100%로 설정 */
  padding-bottom: 20px;
  /* 선택사항: 내용과의 간격을 조절하기 위한 패딩 추가 */
}

/* Toggle 버튼 간 간격 조절 */
.row .custom-border ul {
  margin: 10px 0;
}

/* 하단 경계선을 가진 Toggle 버튼 스타일 수정 */
.row .custom-border ul li {
  padding: 10px 0;
  /* Toggle 버튼 내용과 경계선 사이의 간격을 조절 */
}

/* Toggle 버튼 내용 스타일 수정 */
.row .custom-border ul li a {
  text-decoration: none;
  color: inherit;
  display: inline-block;
  position: relative;
}

/* Toggle 버튼 아이콘 스타일 수정 */
.row .custom-border ul li a span.icon {
  margin-right: 5px;
  /* 아이콘과 텍스트 사이의 간격을 조절 */
}

/* banner slide */

/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
}

/* effect */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {
    opacity: 0.4;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade {
  from {
    opacity: 0.4;
  }

  to {
    opacity: 1;
  }
}

/* Styling for previous and next buttons */
.prev,
.next {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  font-weight: bold;
  font-size: 18px;
  border-radius: 3px;
  padding: 16px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  transition: 0.6s ease;
}

.prev {
  left: 0;
}

.next {
  right: 0;
  left: auto;
  /* Ensures that the 'next' button is aligned to the right */
}

/* Center the buttons vertically within the mySlideDiv */
.mySlideDiv .prev,
.mySlideDiv .next {
  top: 50%;
  transform: translateY(-50%);
}

/* Ensure buttons cover the entire height of the mySlideDiv */
.mySlideDiv .prev,
.mySlideDiv .next {
  height: 100%;
  display: flex;
  align-items: center;
}

/* Set the position of the buttons */
.mySlideDiv .prev {
  left: 30;
}

.mySlideDiv .next {
  right: 30;
  left: auto;
  /* Ensures that the 'next' button is aligned to the right */
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* news css */

* {
  box-sizing: border-box;
}

.blog-card {
  display: flex;
  flex-direction: column;
  margin: 1rem auto;
  box-shadow: 0 5px 7px -1px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.6%;
  background: #fff;
  line-height: 1.4;
  border-radius: 5px;
  overflow: hidden;
  z-index: 0;
  height: 320px;
}

.blog-card:hover .photo {
  transform: scale(1.3);
}

.blog-card .meta {
  position: relative;
  z-index: 0;
  height: 200px;
}

.blog-card .photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.2s;
}

.blog-card .details,
.blog-card .details ul {
  margin: auto;
  padding: 0;
  list-style: none;
}

.blog-card .details {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100%;
  margin: auto;
  transition: left 0.2s;
  background: rgba(#000, 0.6);
  color: #f57c13;
  padding: 10px;
  width: 100%;
  font-size: 0.9rem;
}

.blog-card .details ul li {
  display: inline-block;
}

.blog-card .details .author:before {
  font-family: FontAwesome;
  margin-right: 10px;
  content: '\f007';
}

.blog-card .details .date:before {
  font-family: FontAwesome;
  margin-right: 10px;
  content: '\f133';
}

.blog-card .details .tags ul:before {
  font-family: FontAwesome;
  content: '\f02b';
  margin-right: 10px;
}

.blog-card .details .tags li {
  margin-right: 2px;
}

.blog-card .description {
  padding: 1rem;
  background: #fff;
  position: relative;
  z-index: 1;
}

.blog-card .read-more a::after {
  content: '\f061';
  font-family: FontAwesome;
  margin-left: -10px;
  opacity: 0;
  vertical-align: middle;
  transition: margin 0.3s, opacity 0.3s;
}

.blog-card .read-more a:hover::after {
  margin-left: 5px;
  opacity: 1;
}

.blog-card p {
  position: relative;
  margin: 1rem 0 0;
}

.blog-card p:first-of-type {
  margin-top: 1.25rem;
}

.blog-card p:first-of-type:before {
  content: '';
  position: absolute;
  height: 5px;
  background: #f57c13;
  width: 35px;
  top: -0.75rem;
  border-radius: 3px;
}

.blog-card:hover .details {
  left: 0%;
}

@media (min-width: 640px) {
  .blog-card {
    flex-direction: row;
    max-width: 1100px;
  }

  .blog-card .meta {
    flex-basis: 40%;
    height: auto;
  }

  .blog-card .description {
    flex-basis: 60%;
  }

  .blog-card .description:before {
    transform: skewX(-3deg);
    content: '';
    background: #fff;
    width: 30px;
    position: absolute;
    left: -10px;
    top: 0;
    bottom: 0;
    z-index: -1;
  }

  .blog-card.alt {
    flex-direction: row-reverse;
  }

  .blog-card.alt .description:before {
    left: inherit;
    right: -10px;
    transform: skew(3deg);
  }

  .blog-card.alt .details {
    padding-left: 25px;
  }
}

/* News  */

.main-card {
  display: flex;
  flex-direction: column;
  margin: 1rem auto;
  box-shadow: 0 5px 7px -1px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.6%;
  background: #fff;
  /* line-height: 1.4px; */
  border-radius: 5px;
  overflow: hidden;
  z-index: 0;
  height: 320px;
  padding: 24px;
}

.main-card:hover .photo {
  transform: scale(1.3);
}

.main-card .meta {
  position: relative;
  z-index: 0;
  height: 200px;
}

.main-card .photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.2s;
}

.main-card .details,
.main-card .details ul {
  margin: auto;
  padding: 0;
  list-style: none;
}

.main-card .details {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100%;
  margin: auto;
  transition: left 0.2s;
  background: rgba(#000, 0.6);
  color: #fff;
  padding: 10px;
  width: 100%;
  font-size: 0.9rem;
}

.main-card .details ul li {
  display: inline-block;
}

.main-card .details .author:before {
  font-family: FontAwesome;
  margin-right: 10px;
  content: '\f007';
}

.main-card .details .date:before {
  font-family: FontAwesome;
  margin-right: 10px;
  content: '\f133';
}

.main-card .details .tags ul:before {
  font-family: FontAwesome;
  content: '\f02b';
  margin-right: 10px;
}

.main-card .details .tags li {
  margin-right: 2px;
}

.main-card .description {
  padding: 1rem;
  background: #fff;
  position: relative;
  z-index: 1;
}

.main-card .read-more a::after {
  content: '\f061';
  font-family: FontAwesome;
  margin-left: -10px;
  opacity: 0;
  vertical-align: middle;
  transition: margin 0.3s, opacity 0.3s;
}

.main-card .read-more a:hover::after {
  margin-left: 5px;
  opacity: 1;
}

.main-card p {
  position: relative;
  margin: 1rem 0 0;
}

.main-card p:first-of-type {
  margin-top: 1.25rem;
}

.main-card p:first-of-type:before {
  content: '';
  position: absolute;
  height: 5px;
  background: #f57c13;
  width: 35px;
  top: -0.75rem;
  border-radius: 3px;
}

.main-card:hover .details {
  left: 0%;
}

@media (max-width: 640px) {
  .main-card {
    display: none;
    /* Hide the slider on small screens */
  }

  .main-card {
    display: block;
    /* Show individual cards on small screens */
  }
}

@media (min-width: 640px) {
  .main-card {
    flex-direction: row;
    max-width: 1100px;
  }

  .main-card .meta {
    flex-basis: 40%;
    height: auto;
  }

  .main-card .description {
    flex-basis: 60%;
  }

  .main-card .description:before {
    transform: skewX(-3deg);
    content: '';
    background: #fff;
    width: 30px;
    position: absolute;
    left: -10px;
    top: 0;
    bottom: 0;
    z-index: -1;
  }

  .main-card.alt {
    flex-direction: row-reverse;
  }

  .main-card.alt .description:before {
    left: inherit;
    right: -10px;
    transform: skew(3deg);
  }

  .main-card.alt .details {
    padding-left: 25px;
  }
}

@media (max-width: 767px) {
  /* Show the first article on smaller screens */
  #main-large {
    display: none;
  }

  #main-small {
    display: block;
  }
}

@media (min-width: 768px) {
  /* Show the second article on larger screens */
  #main-large {
    display: block;
  }

  #main-small {
    display: none;
  }
}

/* slick custom */
.slick-slide {
  margin: 0 30px;
}

.slick-list {
  margin: 0 -30px;
}

.post-meta {
  text-align: right;
}

.post-views {
  text-align: right;
  color: gray;
}

.slick-track {
  margin-bottom: 3em;
}

.slick-next:before,
.slick-prev:before {
  color: rgb(255, 170, 113);
  font-size: 30px;
  opacity: 1;
}

.slick-prev.slick-arrow {
  z-index: 5;
  top: 42%;
  left: -60px;
  margin-right: 100px;
}

.slick-next.slick-arrow {
  z-index: 5;
  top: 42%;
  right: -52px;
}

.slick-prev.slick-arrow:hover:before,
.slick-next.slick-arrow:hover:before {
  color: #f57c13;
}

#InsideTheLab-p {
  margin-bottom: 8px;
  margin-right: 60px;
  text-align: justify;
}

.contact-map {
  border: 0;
  width: 80%;
  height: 350px;
}

#tags {
  text-align: center;
  color: #949090;
  font-size: 18px;
}

#tags:last-child {
  margin-right: 0; /* 마지막 요소의 마진을 0으로 설정하여 오른쪽 여백 제거 */
}

#tags:hover {
  /* background-color: rgba(255, 151, 32, 0.333); */
  cursor: context-menu;
}
/* 잠깐 수정*/

/*프로필 이미지 hover*/
.egg_img {
  margin: 0px auto;
  position: relative;
}

.egg_1 {
  height: 300px;
  width: 300px;
  position: absolute;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s linear;
}

.egg_0 {
  height: 300px;
  width: 300px;
}
.egg_img:hover .egg_1 {
  opacity: 1;
}

/* Member Description */
.member-description {
  white-space: pre-line;
  line-height: 1.5;
}

/*Members 직급 기재 서식*/
.rank {
  font-size: 30px;
  text-align: center;
  margin-bottom: 20px;
  font-family: 'NanumSquare_acEB';
}

hr {
  width: 100%;
  height: 2px;
  background-color: #9b9b9b44;
}

/* 팝업 스타일 */
.popup {
  display: none;
  position: fixed;
  width: 100%;
  overflow: auto;
  position: fixed;
  top: 160px;
  left: 10px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0;
  max-width: 420px;
  overflow-y: hidden;
  z-index: 9999;
}

.popup-content {
  background-color: #fefefe; /* 팝업 내용의 배경색 */
  margin: 4% auto; /* 화면 중앙에서의 위치 조정 */
  padding: 20px; /* 패딩을 위아래 20px, 양 옆 20px로 설정합니다. */
  border: 1px solid #888;
  width: 94%; /* 팝업 창의 너비 */
  height: 50%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  top: 24px;
  right: 28px;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.shared-content {
  display: none;
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  margin-top: 20px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.toggle-btn {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 15px;
  cursor: pointer;
}

.toggle-btn:hover {
  background-color: #0056b3;
}

.accordion-header {
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3s ease;
}

.accordion-header:hover {
  color: #f57c13; /* Change to your desired hover color */
}

.collaborator-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.collaborator-container p {
  width: 48%; /* Adjust the width to fit two columns */
  margin: 0;
}

/* Search Input */
.search-input {
  width: 12rem;
  display: flex;
  align-items: center;
  border: none;
  background-color: #eee;
  padding: 0.6rem 1.2rem;
  line-height: 1.5;
  font-size: 15px;
  height: 2.5rem;
  outline: none;
}

.search-input:focus {
  outline: none;
  border: none;
}

.search-input::placeholder {
  font-size: 15px;
  line-height: normal;
  vertical-align: middle;
}