/* 

TemplateMo 586 Scholar

https://templatemo.com/tm-586-scholar

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900");
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

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

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  color: #1e1e1e;
  margin-top: 0px;
  margin-bottom: 0px;
  font-weight: 700;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 16px;
  line-height: 28px;
  color: #4a4a4a;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
Global Styles
--------------------------------------------- 
*/
html,
body {
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #4daba5;
  color: #fff;
}

::-moz-selection {
  background: #4daba5;
  color: #fff;
}

.section {
  padding-top: 30px;
  margin-top: 120px;
}

.section-heading {
  margin-bottom: 60px;
}

.section-heading h2 {
  font-size: 36px;
  font-weight: 600;
  text-transform: capitalize;
  margin: 20px 0;
  line-height: 44px;
}

.section-heading h2 em {
  color: #4daba5;
  font-style: normal;
}

.section-heading h6 {
  color: #4daba5;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 600;
}

.main-button a {
  display: inline-block;
  background-color: #fff;
  color: #4daba5;
  font-size: 16px;
  font-weight: 500;
  height: 40px;
  line-height: 40px;
  padding: 0px 25px;
  border-radius: 20px;
  transition: all .3s;
}

.main-button a:hover {
  background-color: #4daba5;
  color: #fff;
}

/* 
---------------------------------------------
Pre-loader Style
--------------------------------------------- 
*/

.js-preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.99);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  z-index: 9999;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

.js-preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@-webkit-keyframes dot {
  50% {
      -webkit-transform: translateX(96px);
      transform: translateX(96px);
  }
}

@keyframes dot {
  50% {
      -webkit-transform: translateX(96px);
      transform: translateX(96px);
  }
}

@-webkit-keyframes dots {
  50% {
      -webkit-transform: translateX(-31px);
      transform: translateX(-31px);
  }
}

@keyframes dots {
  50% {
      -webkit-transform: translateX(-31px);
      transform: translateX(-31px);
  }
}

.preloader-inner {
  position: relative;
  width: 142px;
  height: 40px;
  background: transparent;
}

.preloader-inner .dot {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 12px;
  left: 15px;
  background: #4daba5;
  border-radius: 50%;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-animation: dot 2.8s infinite;
  animation: dot 2.8s infinite;
}

.preloader-inner .dots {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  margin-top: 12px;
  margin-left: 31px;
  -webkit-animation: dots 2.8s infinite;
  animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  margin-left: 16px;
  background: #4daba5;
  border-radius: 50%;
}



/* 
---------------------------------------------
Header Style
--------------------------------------------- 
*/

/* 헤더 기본 */
.header-area{
  position: fixed;
  top: 0;                 /* ✅ 항상 0 */
  left: 0;
  right: 0;
  height: 80px;           /* ✅ 항상 동일 */
  background: #4daaa5;    /* 기본 컬러 */
  z-index: 100;
  transition: background-color .35s ease, box-shadow .35s ease;
}

/* 스크롤 후 – 색만 변경 */
.header-area.background-header{
  background: #4daaa5;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* nav는 헤더 배경을 그대로 사용 */
.header-area .main-nav {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 로고와 메뉴 사이 공간 확보 */
    height: 80px; /* 헤더 높이에 맞춤 */
}

.header-area .main-nav .nav {
    display: flex !important;
    align-items: center;
    margin-bottom: 0; /* 부트스트랩 기본 마진 제거 */
}

.header-area .main-nav .logo {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  display: inline-block;
}

.header-area .main-nav .logo h1 {
  font-size: 36px;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  margin-right: 20px;
  padding-right: 20px;
  border-right: 1px solid rgba(250, 250, 250, 0.3);
}

.header-area .main-nav ul.nav {
  border-radius: 0px 0px 25px 25px;
  flex-basis: 100%;
  margin-right: 0px;
  justify-content: right;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li {
  padding-left: 5px;
  padding-right: 5px;
  height: 40px;
  line-height: 40px;
}

.header-area .main-nav .nav li a {
  display: block;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 20px;
  font-weight: 300;
  font-size: 16px;
  height: 40px;
  line-height: 40px;
  text-transform: capitalize;
  color: #fff;
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  border: transparent;
  letter-spacing: .25px;
}

.background-header .main-nav .nav {
    margin-top: 0px !important; /* 기존 20px을 0으로 고정 */
}


.background-header .main-nav .nav li {
    height: 40px !important;    /* 기존 80px에서 기본값인 40px로 고정 */
    line-height: 40px !important;
}

.header-area .main-nav .nav li:hover a {
  opacity: 0.8;
}
.header-area .main-nav .nav li a.active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.10);
  opacity: 1;
}

.background-header .main-nav .nav li:hover a {
  opacity: 0.8;
}
.background-header .main-nav .nav li a.active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.10);
  opacity: 1;
}




.header-area .main-nav .menu-trigger {
  cursor: pointer;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 20px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 20px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #fff;
}

.header-area.header-sticky .nav li a.active {
  color: #fff;
}

.visible{
  display:inline !important;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 2px;
    padding-right: 2px;
  }
  .header-area .main-nav .nav li a {
    padding-left: 10px;
    padding-right: 10px;
  }

}


@media (max-width: 1100px) {
  /* 1. 헤더 배경 및 높이 강제 고정 */
  .header-area {
    background-color: #4daaa5 !important;
    height: 80px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10000 !important;
  }

  /* 2. 내비 컨테이너: 모든 요소의 기준 높이 설정 */
  .header-area .main-nav {
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 20px !important;
    position: relative !important; /* 내부 absolute 요소들의 기준점 */
  }

  /* 3. 로고: 80px 높이 내에서 완벽한 수직 중앙 배치 */
  .header-area .main-nav .logo {
    position: absolute !important;
    left: 20px !important;
    top: 0 !important;
    height: 80px !important; /* 부모 높이와 동일하게 설정 */
    display: flex !important;
    align-items: center !important; /* 텍스트 정중앙 */
    z-index: 10002 !important;
    margin: 0 !important;
    border: none !important; /* 불필요한 선 제거 */
  }

  /* 4. 햄버거 버튼: 80px 높이 내에서 완벽한 수직 중앙 배치 */
  .header-area .menu-trigger {
    display: block !important;
    position: absolute !important;
    right: 20px !important;
    top: 20px !important;
    height: 80px !important; /* 부모 높이와 동일하게 설정 */
    display: flex !important;
    align-items: center !important; /* 아이콘 정중앙 */
    z-index: 10002 !important;
    margin: 0 !important;
  }

  /* 5. 메뉴 리스트: 헤더 바 끝나는 지점(80px)에 정확히 밀착 */
  .header-area .main-nav .nav {
    display: none; /* JS 제어를 위해 !important 제거 */
    position: absolute !important;
    top: 80px !important; /* 헤더 하단 80px 지점 고정 */
    left: 0 !important;
    width: 100% !important;
    background-color: #d2ebe9 !important;
    z-index: 10001 !important; /* 로고/버튼(10002)보다 아래 */
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: 0px 5px 15px rgba(0,0,0,0.15);
    border-radius: 0px 0px 20px 20px;
    overflow: hidden;
  }

  /* 6. 내부 리스트 스타일 최적화 */
  .header-area .main-nav .nav li {
    width: 100% !important;
    display: block !important;
    border-top: 1px solid rgba(0,0,0,0.05) !important;
    background: #d2ebe9 !important;
  }

  .header-area .main-nav .nav li a {
    color: #1e1e1e !important;
    height: 50px !important;
    line-height: 50px !important;
    text-align: center !important;
    display: block !important;
  }

  /* 스티키/스크롤 시 마진 간섭 완전 차단 */
  .header-area.header-sticky .nav,
  .background-header.header-sticky .nav,
  .header-area .main-nav .nav {
    margin-top: 0 !important; 
  }
}




@media (max-width: 767px) {
  /* 1. 헤더 전체 영역: 배경색과 높이를 강제로 고정하여 로고 라인을 확보합니다 */
  .header-area {
    background-color: #4daaa5 !important;
    height: 80px !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000 !important;
  }

  /* 2. 로고: 메뉴 레이어보다 위에 배치하여 가려짐을 방지합니다 */
.header-area .main-nav .logo {
    position: absolute !important;
    left: 20px !important;
    top: 0 !important; /* 20px 대신 0으로 설정 */
    height: 80px !important; /* 헤더 전체 높이 차지 */
    display: flex !important;
    align-items: center !important; /* 텍스트를 수직 중앙으로 */
    z-index: 10002 !important; 
    margin: 0 !important;
    border-right: none !important;
  }

  /* 3. 메뉴 리스트: 초기 로딩 시 깜빡임 방지를 위해 숨김 처리하고 위치를 로고 아래로 내립니다 */
  .header-area .main-nav .nav {
    /* 초기 상태를 완전히 숨겨 깜빡임을 방지합니다 */
    display: none; 
    
    /* 위치를 로고 하단인 80px 지점으로 강제 고정합니다 */
    position: absolute !important;
    top: 80px !important; 
    left: 0 !important;
    width: 100% !important;
    
    background-color: #d2ebe9 !important;
    z-index: 10001 !important; /* 로고(10002)보다 한 단계 아래 */
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: 0px 5px 10px rgba(0,0,0,0.1);
    border-radius: 0px 0px 20px 20px;
    overflow: hidden;
  }

  /* 4. 햄버거 버튼: 위치를 고정하고 항상 최상단에 노출합니다 */
  .header-area .menu-trigger {
    display: block !important;
    position: absolute !important;
    right: 20px !important;
    top: 20px !important;
    z-index: 10002 !important;
  }

  /* 5. 메뉴 아이템: 가로 배열을 해제하고 세로로 나열합니다 */
  .header-area .main-nav .nav li {
    width: 100% !important;
    background: #d2ebe9 !important;
    border-top: 1px solid rgba(0,0,0,0.05) !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    height: auto !important;
  }

  .header-area .main-nav .nav li a {
    color: #1e1e1e !important;
    height: 50px !important;
    line-height: 50px !important;
    display: block !important;
    text-align: center !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  /* 6. 스크롤 또는 스티키 상태에서 발생하는 마진 간섭을 차단합니다 */
  .header-area.header-sticky .nav,
  .background-header.header-sticky .nav,
  .header-area .main-nav .nav {
    margin-top: 0 !important; 
  }
}

/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/

.main-banner {
  background-image: url(../images/banner-bg.jpg);
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 170px 0px 120px 0px;
}

.main-banner .item-1 {
  background-image: url(../images/banner-item-01.jpg);
}

.main-banner .item-2 {
  background-image: url(../images/banner-item-02.jpg);
}

.main-banner .item-3 {
  background-image: url(../images/banner-item-03.jpg);
}

.main-banner .item {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 25px;
  padding: 100px 100px;
  margin-left: 130px;
}

.main-banner .item span.category {
  background-color: #4daba5;
  color: #fff;
  font-size: 16px;
  text-transform: uppercase;
  padding: 5px 15px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 50px;
}

.main-banner .item h2 {
  font-size: 48px;
  font-weight: 700;
  color: #fff;
  line-height: 70px;
  width: 60%;
  margin-bottom: 40px;
}

.main-banner .item p {
  color: #fff;
  width: 65%;
}

.main-banner .item .buttons {
  display: flex;
  margin-top: 50px;
}

.main-banner .item .buttons .main-button {
  margin-right: 30px;
}

.main-banner .item .buttons .main-button a {
  font-size: 16px;
  color: #4daba5;
  background-color: #fff;
  display: inline-block;
  height: 50px;
  line-height: 50px;
  padding: 0px 25px;
  border-radius: 25px;
  font-weight: 500;
}

.main-banner .item .buttons .icon-button i {
  color: #4daba5;
  background-color: #fff;
  display: inline-block;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  margin-right: 10px;
  font-size: 16px;
}

.main-banner .item .buttons .icon-button a {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}

.main-banner .owl-nav {
  position: absolute;
  max-width: 1320px;
  bottom: 23px;
  left: 0;
  text-align: right;
}

.main-banner .owl-nav .owl-prev i,
.main-banner .owl-nav .owl-next i {
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 24px;
  display: inline-block;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  opacity: 1;
  transition: all .3s;
}

.main-banner .owl-nav .owl-prev i {
  position: absolute;
  bottom: 65px;
}

.main-banner .owl-nav .owl-prev i:hover,
.main-banner .owl-nav .owl-next i:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.5);
}


/* 
---------------------------------------------
Services Style
--------------------------------------------- 
*/

.services .service-item:hover .icon img {
  margin-top: -20px;
}

.services .service-item {
  position: relative;
  margin-top: 120px;
}

.services .service-item .icon {
  width: 150px;
  height: 150px;
  display: inline-block;
  text-align: center;
  line-height: 150px;
  background-color: #4daba5;
  border-radius: 50%;
  position: absolute;
  right: 0;
  top: -80px;
}

.services .service-item .icon img {
  max-width: 70px;
  transition: all .2s;
}

.services .service-item .main-content {
  border-radius: 25px;
  padding: 80px 30px 50px 30px;
  background-color: #d2ebe9;
  margin-bottom: 50px;
  margin-right: 40px;
  margin-top: -70px;
  transition: all .4s;
}

.services .service-item h4 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 15px;
  line-height: 30px;
  transition: all .4s;
}

.services .service-item p {
  color: #4a4a4a;
  margin-bottom: 25px;
}

/* 
---------------------------------------------
About Style
--------------------------------------------- 
*/

.about-us {
  position: relative;
  padding: 80px 0;
  margin-top: 80px;
}


.about-us .row {
  align-items: center;
}

.about-us img {
  margin: 0 auto;
}


.about-us:before {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: #333;
  content: '';

}

.accordion {
  margin-top: -40px;
  margin-bottom: -40px;


}

.accordion-item {
  background-color: #fff;
  border-radius: 40px !important;
  margin-bottom: 30px;
  border: none;
}

.accordion-item .accordion-button {
  outline: none;
  box-shadow: none;
  border-radius: 40px !important;
}

.accordion-button:not(.collapsed) {
  color: #4daba5;
  background-color: #fff;
}

h2.accordion-header button {
  padding: 15px 25px;
  font-family: 'Poppins';
  font-size: 16px;
  font-weight: 600;
}

.accordion-button::after {
  font-size: 18px;
  font-weight: 500;
  background-image: none;
  content: '+';
  width: 30px;
  height: 30px;
  display: inline-block;
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  background-color: #4daba5;
  color: #fff;
}

.accordion-button:not(.collapsed)::after {
  background-image: none;
  line-height: 32px;
  content: '-';
}

.accordion-body {
  padding: 0px 25px 30px 25px;
  font-size: 16px;
  line-height: 28px;
  color: #4a4a4a;
}

.about-us .section-heading {
  margin-left: 60px;
  margin-bottom: 0px;
}

.about-us .section-heading h2 {
  color: #ffffff;
}

.about-us .section-heading p {
  color: #ffffff;
}
.about-us .section-heading .main-button {
  margin-top: 50px;
}

/* 
---------------------------------------------
Sub-area Style
--------------------------------------------- 
*/

.sub-area {
  position: relative;
  padding: 80px 0;
  margin-top: 80px;
  
  background-image: url('../images/sub-bg1.jpg'); /* 이미지 경로 */
  background-size: cover;       /* 영역 꽉 채우기 */
  background-position: center;  /* 중앙 기준 */
  background-repeat: no-repeat;

}


.sub-area .row {
  align-items: center;
}

.sub-area img {
  margin: 0 auto;
}


.sub-area:before {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: #333;
  content: '';

}


.sub-area .section-heading {
  margin-left: 0px;
  margin-bottom: 0px;
  text-align: center;
}

.sub-area .section-heading h2 {
  color: #ffffff;
  text-align: center;
}

.sub-area .section-heading p {
  color: #ffffff;
  text-align: center;
}
.sub-area .section-heading .main-button {
  margin-top: 50px;
}


/* ===================================================
   REGIST 상단 이미지 영역 - 최종 통합본
   - 로고: 작게(원본비율), 가운데, 사라짐 방지
   - TOP: 위아래 여백 0, 꽉차게
   - 라인: 각 섹션 하단에 100vw
   - bootstrap container/row/col 기본 여백 제거
=================================================== */

/* 0) 공통 리셋 */
.section.regist-logo,
.section.regist-top{
  margin:0 !important;
  padding:0 !important;
  background:#fff;
}

/* bootstrap 기본 좌우 padding(gutter) 제거 */
.section.regist-logo .container,
.section.regist-top .container{
  margin:0 auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* row의 좌우 마진 제거 */
.section.regist-logo .row,
.section.regist-top .row{
  margin-left:0 !important;
  margin-right:0 !important;
}

/* col padding 제거 */
.section.regist-logo .col-lg-12,
.section.regist-top .col-lg-12{
  margin:0 !important;
  padding:0 !important;
  text-align:center;
  position:relative;
}

/* ===================================================
   1) 로고 영역
=================================================== */

/* ✅ 로고는 최소 높이 확보(사라짐 방지) */
.section.regist-logo{
  position:relative;
  padding:12px 0 !important;   /* 필요하면 8~20px 사이 조절 */
}

/* 로고 이미지 */
.section.regist-logo img{
  display:inline-block !important;
  width:auto !important;        /* 원본 비율 유지 */
  max-width:280px;              /* 로고 크기 */
  height:auto !important;
  margin:0 auto !important;
  vertical-align:top;
}

/* 로고 하단 라인 (화면 전체 100%) */
.section.regist-logo::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:100vw;
  height:1px;
  background:#d6d6d6;
}

/* ===================================================
   2) TOP 이미지 영역
=================================================== */
.section.regist-top{
  position:relative;
  padding:0 !important;
  background-color: #fffeea;  
}

/* TOP 이미지: 위아래 여백 없이 */
.section.regist-top img{
  display:block !important;
  width:100%;
  height:auto;
  margin:0 !important;
  padding:0 !important;
  vertical-align:top; /* 이미지 아래 미세 공백 방지 */
}

/* TOP 이미지 하단 라인 (화면 전체 100%) */
.section.regist-top::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:100vw;
  height:1px;
  background:#d6d6d6;
}

/* ===================================================
   3) 모바일에서 로고 조금 더 작게(선택)
=================================================== */
@media (max-width: 767px){
  .section.regist-logo{
    padding:10px 0 !important;
  }
  .section.regist-logo img{
    max-width:220px;
  }
}




/* ===================================================
   REGIST TAB (Top)
   - PC: 8개 1줄 균등
   - Mobile: 4x2 grid + UL overlay line (안깨짐)
   - 스코프: .section.regist-tab 내부만 적용
=================================================== */

/* container/row 기본 여백이 남아있으면 탭이 떠보일 수 있어 같이 정리 */
.section.regist-tab{
  margin-top: 30px !important;   /* 원하는 만큼 조절 (예: 20~40px) */
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.section.regist-tab .container{
  padding-left:0 !important;
  padding-right:0 !important;
}
.section.regist-tab .row{
  margin-left:0 !important;
  margin-right:0 !important;
}
.section.regist-tab .col-lg-12{
  padding:0 !important;
  margin:0 !important;
}

/* -----------------------------
   Tabs (PC 공통)
----------------------------- */
.section.regist-tab .tab-bar{
  list-style:none;
  padding:0;
  margin-bottom: 0 !important;
  display:flex;
  background:transparent;
}

/* ✅ 테두리 겹침 방지: li는 좌측선만 제거하고, 첫번째만 좌측선 부여 */
.section.regist-tab .tab-bar > li{
  background:#fff;
  border:1px solid #d6d6d6;
  border-left:none;
  transition: background .2s ease;
  flex:1;                 /* PC에서 8등분 */
}
.section.regist-tab .tab-bar > li:first-child{
  border-left:1px solid #d6d6d6;
}

.section.regist-tab .tab-bar > li > a{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:14px 10px;
  color:#333;
  text-decoration:none;
  font-weight:600;
  font-size:17px;
  line-height:1.2;
  min-height:54px;
  box-sizing:border-box;
  white-space:nowrap;      /* PC 한 줄 유지 */
}

.section.regist-tab .tab-bar > li.active{
  background:#333 !important;
  border-color:#333;
}
.section.regist-tab .tab-bar > li.active > a{
  color:#fff !important;
}

/* hover (PC) */
@media (hover: hover){
  .section.regist-tab .tab-bar > li:not(.active):hover{
    background:#333;
    border-color:#333;
  }
  .section.regist-tab .tab-bar > li:not(.active):hover > a{
    color:#fff;
  }
}

/* ===================================================
   Mobile (<=767)
   ✅ UL이 격자선 직접 그림 (선 깨짐 방지)
=================================================== */
@media (max-width: 767px){

  .section.regist-tab .tab-bar{
    margin:0 0 0 0 !important;
    padding:0 !important;

    display:grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:0 !important;

    position:relative;
    background:#fff;
    border:1px solid #d6d6d6;   /* 외곽선 1번만 */
    overflow:hidden;
    box-sizing:border-box;
  }

  /* 모바일에서는 li 테두리 전부 제거 (겹침 원인 제거) */
  .section.regist-tab .tab-bar > li{
    border:0 !important;
    background:#fff;
    margin:0 !important;
    padding:0 !important;
    min-width:0;
    position:relative;
    z-index:0;
  }

  .section.regist-tab .tab-bar > li > a{
    height:50px;
    min-height:50px;
    padding:6px 4px;
    font-size:15px;
    white-space:normal;      /* 모바일 줄바꿈 허용 */
    line-height:1.1;
    word-break:keep-all;
  }

  .section.regist-tab .tab-bar > li.active{
    background:#333 !important;
  }
  .section.regist-tab .tab-bar > li.active > a{
    color:#fff !important;
  }

  /* ✅ 8개(2줄) 기준 격자선 오버레이 */
  .section.regist-tab .tab-bar::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:5;
    background:
      /* 세로선(4열) */
      linear-gradient(#d6d6d6,#d6d6d6) 25% 0/1px 100% no-repeat,
      linear-gradient(#d6d6d6,#d6d6d6) 50% 0/1px 100% no-repeat,
      linear-gradient(#d6d6d6,#d6d6d6) 75% 0/1px 100% no-repeat,
      /* 가로선(2행) */
      linear-gradient(#d6d6d6,#d6d6d6) 0 50%/100% 1px no-repeat;
  }
}


/* ===================================================
   TAB CONTENTS (Bottom)
   scope: .section.regist-content
=================================================== */

.section.regist-content{
  padding:0 !important;
  margin:0 !important;
}

.section.regist-content .container{
  padding-left:0 !important;
  padding-right:0 !important;
}

.section.regist-content .row{
  margin-left:0 !important;
  margin-right:0 !important;
}

.section.regist-content .col-lg-12{
  padding:0 !important;
  margin:0 !important;
}

/* =========================
   탭 콘텐츠 박스 (공통)
========================= */
.section.regist-content .tab-box{
  display:block;                  /* ✅ 페이지 이동형이므로 항상 보이기 */
  border-left:1px solid #d6d6d6;       /* 상/좌/우/하 통합 */
  border-right:1px solid #d6d6d6; 
  border-bottom:1px solid #d6d6d6; 
  background:#fff;
  color:#333;
  font-size:16px;
  line-height:1.6;
  padding:0;                      /* 이미지용 */
  min-height:500px;
}

/* 이미지 콘텐츠 */
.section.regist-content .tab-box img{
  display:block;
  width:100%;
  height:auto;
  margin:0;
}


/* =========================
   탭 콘텐츠 박스 (공통)
========================= */
.section.regist-content .tab-box2{
  display:block;                  /* ✅ 페이지 이동형이므로 항상 보이기 */
  border-left:1px solid #d6d6d6;       /* 상/좌/우/하 통합 */
  border-right:1px solid #d6d6d6; 
  border-bottom:1px solid #d6d6d6; 
  background:#fff;
  color:#333;
  font-size:16px;
  line-height:1.6;
  padding:50px;                      /* 이미지용 */
  min-height:500px;
}

/* 이미지 콘텐츠 */
.section.regist-content .tab-box2 img{
  display:block;
  width:100%;
  height:auto;
  margin:0;
}




/* ===================================================
   TAB CONTENTS (Bottom)
   scope: .section.regist-content
=================================================== */

.section.content{
  padding:0 !important;
  margin-top:80px !important;
}

.section.content .container{
  padding-left:0 !important;
  padding-right:0 !important;
}

.section.content .row{
  margin-left:0 !important;
  margin-right:0 !important;
}

.section.content .col-lg-12{
  padding:0 !important;
  margin:0 !important;
}

/* =========================
   탭 콘텐츠 박스 (공통)
========================= */
.section.content .box{
  display:block;                  /* ✅ 페이지 이동형이므로 항상 보이기 */
  border:1px solid #d6d6d6;       /* 상/좌/우/하 통합 */
  background:#fff;
  color:#333;
  font-size:16px;
  line-height:1.6;
  padding:50px;                      /* 이미지용 */
  min-height:500px;
}

/* 이미지 콘텐츠 */
.section.content .box img{
  display:block;
  width:100%;
  height:auto;
  margin:0;
}



/* 
---------------------------------------------
Courses Style
--------------------------------------------- 
*/

.courses {
  margin-top: 80px;
}

.event_filter {
  text-align: center;
}

.event_filter {
  background-color: #d2ebe9;
  border-radius: 50px;
  padding: 15px 40px;
  list-style: none;
  margin: 0 auto 70px;
  max-width: max-content;
}

.event_filter li {
  display: inline-block;
  margin: 0px 20px;
}

.event_filter li a {
  font-size: 16px;
  font-weight: 500;
  color: #1e1e1e;
  transition: all .3s;
}

.event_filter li

.event_filter li a.is_active,
.event_filter li a:hover {
  color: #4daba5;
}

.events_item .thumb {
  position: relative;
  border-radius: 0px;
  overflow: hidden;
}

.events_item .thumb img {
  margin-bottom: -5px;
}

.events_item .thumb span.category {
  position: absolute;
  left: 30px;
  top: 30px;
  font-size: 16px;
  text-transform: uppercase;
  color: #4daba5;
  background-color: rgba(250, 250, 250, 0.95);
  padding: 8px 20px;
  border-radius: 25px;
  font-weight: 500;
  display: inline-block;
}

.events_item .thumb span.price {
  position: absolute;
  right: -30px;
  top: -50px;
  background-color: rgba(122, 106, 216, 0.95);
  width: 130px;
  height: 130px;
  border-radius: 50%;
  display: inline-block;
  transition: all .3s;
}

.events_item .thumb span.price h6 {
  margin-top: 72px;
  margin-left: 22px;
  font-size: 28px;
  text-transform: uppercase;
  color: #fff;
  font-weight: 700;
}

.events_item .thumb span.price em {
  font-size: 18px;
  font-weight: 500;
  font-style: normal;
  vertical-align: top;
}

.events_item {
  background-color: #d2ebe9;
  border-radius: 0px;
  margin-bottom: 30px;
  position: relative;
  justify-content: center;
  align-items: center;
} 

.events_item .down-content {
  padding: 20px 30px 25px 30px;
}

.events_item .down-content span.author {
  color: #4daba5;
  font-size: 16px;
  display: inline-block;
  margin-bottom: 6px;
}

.events_item .down-content h4 {
  font-size: 22px;
  font-weight: 600;
  transition: all .3s;
}

.events_item:hover .down-content h4 {
  color: #4daba5;
}

.events_item:hover .thumb span.price {
  transform: scale(1.2);
}



/* ---------------------------------------------
Schedule Style (Final Optimized v10)
- PC: 버튼 우측 상단 고정, 제목 한 줄 전체 노출
- 정렬: 이미지 오른쪽 텍스트 시작 라인(Blue Line) 일치
--------------------------------------------- */

.events .item {
  background-color: #efefef;
  border-radius: 0;
  position: relative;
  padding: 30px;
  margin: 0 0 50px 0;

  display: flex;
  flex-direction: row;
  align-items: flex-start; /* 상단 기준 정렬 */
  gap: 30px;               /* 이미지와 텍스트 사이 고정 간격 */
  width: 100%;
  box-sizing: border-box;
}

/* 1. 이미지 박스: 정렬 기준선을 맞추기 위해 크기 절대 고정 */
.events .item .image {
  flex: 0 0 220px;         /* 너비 220px 고정 (밀림 방지 핵심) */
  width: 220px;
  height: 150px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0 !important;    /* 마진 강제 초기화로 정렬 어긋남 방지 */
}

.events .item .image img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

/* 2. 텍스트 영역: 버튼 공간 확보 및 정렬 */
.events .item ul {
  flex: 1;
  min-width: 0;            /* flex 레이아웃 내 텍스트 넘침 제어 */
  list-style: none;
  margin: 0;
  padding: 0;
  /* 버튼(200px)과 겹치지 않도록 충분한 우측 여백 확보 */
  padding-right: 220px;    
  text-align: left;        /* ✅ 왼쪽 정렬 */
}

.events .item ul li {
  width: 100%;
  margin-bottom: 5px;
}

/* 3. 제목: 말줄임(...) 없이 한 줄 전체 노출 */
.events .item ul li h4 {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 10px 0;
  color: #1e1e1e;
  
  white-space: nowrap;     /* 한 줄 유지 */
  overflow: visible;       /* 전체 노출 */
  text-overflow: clip;
  display: block;
}

/* 카테고리 배지 */
.events .item ul li span.category {
  font-size: 14px;
  color: #4daba5;
  background: #fff;
  padding: 6px 15px;
  border-radius: 20px;
  font-weight: 500;
  display: inline-block;
  margin-bottom: 12px;
}

.events .item ul li span {
  font-size: 15px;
  color: #4a4a4a;
  display: block;
  white-space: nowrap;
}

.events .item ul li h6 {
  font-size: 16px;
  color: #4daba5;
  font-weight: 600;
  margin-top: 5px;
}

/* 4. 사전등록 버튼 (PC: 우측 상단 고정) */
.events .item .regist-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #4daba5;
  color: #fff !important;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.3s;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 500;
  width: 180px;            /* 버튼 너비 지정 */
  height: 44px;
}

/* PC 배치 설정 */
@media (min-width: 992px) {
  .events .item .regist-btn {
    position: absolute;
    top: 30px;             /* 카드 상단 패딩(30px)과 일치 */
    right: 30px;           /* 카드 우측 패딩(30px)과 일치 */
  }
}

/* 5. Mobile 대응 */
@media (max-width: 991px) {
  .events .item {
    flex-direction: column;
    padding: 20px;
    gap: 20px;
  }

  .events .item .image {
    width: 100%;
    flex: 0 0 auto;
  }

  .events .item ul {
    padding-right: 0;
    width: 100%;
  }

  /* 모바일 카테고리 상단 여백 보정 */
  .events .item ul li span.category {
    margin-top: 60px; 
  }

  .events .item ul li h4 {
    white-space: normal;   /* 모바일 줄바꿈 허용 */
  }


  /* 버튼을 감싸는 부모부터 풀폭으로 */
  .events .item .item-action{
    width: 100%;
    display: flex;
    flex-direction: column;   /* 아래로 쌓기 */
    align-items: stretch;     /* 자식 가로 100% */
  }

  /* 버튼 자체 */
  .events .item .item-action .regist-btn{
    display: flex;            /* 텍스트 중앙정렬 핵심 */
    align-items: center;      /* 세로 가운데 */
    justify-content: center;  /* 가로 가운데 */

    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    height: 52px;             /* 터치 영역 안정 */
    padding: 0;               /* flex 사용 시 padding 제거 */
    margin-top: 16px;

    font-size: 16px;
    font-weight: 500;
    line-height: 1;           /* 폰트 위아래 뜨는 현상 제거 */
    letter-spacing: -0.01em;

    text-align: center;
  }
}



/* 
---------------------------------------------
Contact Style
--------------------------------------------- 
*/

.contact-us {
  margin-top: 80px;
  position: relative;
  padding: 50px 0px;
}

.contact-us:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 65%;
  height: 100%;
  background-color: #d2ebe9;
  content: '';
  border-top-right-radius: 500px;
  border-bottom-right-radius: 500px;
}


.contact-us  .section-heading {
  margin-right: 110px;
  margin-bottom: 0px;
}

.contact-us  .section-heading p {
  margin-top: 50px;
}

.contact-us .special-offer {
  margin-top: 50px;
  background-color: #fff;
  border-radius: 25px;
  padding: 30px 30px;
  display: inline-block;
  position: relative;
}

.contact-us .special-offer span.offer {
  position: absolute;
  left: 0;
  top: 0;
  background-color: #4daba5;
  width: 80px;
  padding: 30px 8px;
  line-height: 25px;
  height: 120px;
  border-radius: 15px 60px 60px 15px; 
  display: inline-block;
  text-align: center;
  color: #fff;
  font-size: 16px;
  text-transform: uppercase;
  text-align: left;
}

.contact-us .special-offer span.offer em {
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
}

.contact-us .special-offer h6 {
  font-size: 16px;
  color: #4a4a4a;
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 15px;
}

.contact-us .special-offer h6 em {
  font-style: normal;
  color: #4daba5;
  font-weight: 600;
}

.contact-us .special-offer h4 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 15px;
}

.contact-us .special-offer h4 em {
  font-style: normal;
  color: #4daba5;
}

.contact-us .special-offer a {
  position: absolute;
  right: 30px;
  top: 35px;
  width: 50px;
  height: 50px;
  display: inline-block;
  text-align: center;
  line-height: 50px;
  background-color: #4daba5;
  color: #fff;
  border-radius: 50%;
}

.contact-us .contact-us-content {
  border-radius: 25px;
  padding: 30px;
  background-color: #4daba5;
  position: relative;
  z-index: 1;
}

.contact-us .contact-us-content::before {

  position: absolute;
  left: 50%;
  transform: translateX(-149px);
  opacity: 0.5;
  top: 0;
  width: 318px;
  height: 119px;
  content: '';
  z-index: 2;
}

.contact-us .contact-us-content::after {

  position: absolute;
  right: 0;
  bottom: 0;
  width: 183px;
  height: 149px;
  content: '';
  z-index: 2;
}

#contact-form input {
  width: 100%;
  height: 50px;
  border-radius: 25px;
  background-color: rgba(249, 235, 255, 0.15);
  border: none;
  outline: none;
  font-weight: 300;
  padding: 0px 20px;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  position: relative;
  z-index: 3;
}

#contact-form input::placeholder {
  color: #fff;
}

#contact-form textarea {
  width: 100%;
  height: 120px;
  border-radius: 25px;
  background-color: rgba(249, 235, 255, 0.15);
  border: none;
  outline: none;
  font-weight: 300;
  padding: 20px;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  position: relative;
  z-index: 3;
}

#contact-form textarea::placeholder {
  color: #fff;
}

#contact-form button {
  border: none;
  height: 50px;
  font-size: 16px;
  font-weight: 600;
  background-color: #fff;
  padding: 0px 25px;
  border-radius: 25px;
  color: #4daba5;
  transition: all .4s;
  position: relative;
  z-index: 3;
}

#contact-form button:hover {
  opacity: 0.8;
}

.contact-us-content .more-info {
  text-align: center;
  background: rgb(85,0,227);
  background: linear-gradient(90deg, rgba(85,0,227,1) 0%, rgba(198,61,255,1) 100%);
  border-radius: 0px 0px 23px 23px;
  padding: 45px 30px 15px 30px;
}

.contact-us-content .more-info .info-item {
  text-align: center;
  margin-bottom: 30px;
}

.contact-us-content .more-info i {
  font-size: 32px;
  color: #fff;
  margin-bottom: 15px;
}

.contact-us-content .more-info h4 a {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
}

/* 
---------------------------------------------
Footer Style
--------------------------------------------- 
*/

footer {
  background-color: #333333;
  margin-top: 100px;
  position: relative;
  vertical-align: middle;

}

footer p {
  padding-top: 40px;
  padding-bottom: 40px;
  text-align: center;
  font-size: 15px;
  line-height: 22px;
  color: #999;
  font-weight: 400;
}

footer p a {
  color: #fff;
  transition: all .3s;
  position: relative;
  z-index: 3;
}

footer p a:hover {
  opacity: 0.75;
}

footer::before {

  position: absolute;
  left: 30px;
  transform: rotate(180deg);
  opacity: 1;
  bottom: 0;
  width: 318px;
  height: 119px;
  content: '';
  z-index: 2;
}

/* 
---------------------------------------------
Responsive Style
--------------------------------------------- 
*/

body {
  overflow-x: hidden;
}

@media (max-width: 767px) {
  .header-area {
    top: 0px;
  }
  .header-area .main-nav .logo h1 {
    border-right: none;
  }
  .main-banner .item {
    padding: 80px 30px 120px 30px !important;
  }
  .main-banner .owl-nav {
    left: 30px !important;
  }
  .event_filter  {
    padding: 15px 20px;
  }
  .event_filter li {
    display: inline-block;
    margin: 0px 10px;
  }
}

@media (max-width: 992px) {
  .header-area .main-nav #search input,
  .header-area .main-nav #search i {
    display: none;
  }
  .header-area .main-nav .logo h1 {
    font-size: 34px;
  }
  .header-area .main-nav .logo {
    border-right: none;
  }
  .main-banner {
    padding-top: 100px;
  }
  .main-banner .item {
    padding: 100px 60px 140px 60px;
    margin-left: 0px;
    text-align: center;
  }
  .main-banner .item h2,
  .main-banner .item p {
    width: 100%;
  }
  .main-banner .item h2 {
    font-size: 36px;
    line-height: 50px;
  }
  .main-banner .item .buttons {
    display: inline-block;
    text-align: center;
  }
  .main-banner .item .buttons .main-button {
    margin-right: 0px;
    margin-bottom: 30px;
  }
  .main-banner .owl-nav {
    left: 50% !important;
    transform: translateX(-60px) !important;
    bottom: 60px;
  }
  .main-banner .owl-nav .owl-prev i {
    bottom: 0px;
  }
  .main-banner .owl-nav .owl-next i {
    bottom: 0px;
    position: absolute;
    left: 65px;
  }
  .services {
    margin-top: 80px;
  }
  .about-us {
    margin-top: -50px;
  }
  .accordion {
    padding: 20px;
  }
  .services .service-item .icon {
    width: 150px;
    height: 150px;
    line-height: 150px;
  }
  .about-us .section-heading {
    margin-left: 0px;
    margin-top: 50px;
	
  }
  .about-us::before,
  .testimonials::before,
  .contact-us::before {
    display: none;
  }
  .about-us .section-heading p,
  .testimonials .section-heading p,
  .contact-us .section-heading p {
    margin-top: 30px;
  }
  .about-us .section-heading .main-button {
    margin-top: 30px;
  }
  .about-us .main-button a {
    background-color: #4daba5;
    color: #fff;
  }
  .about-us .section-heading h2 {
    color: #333;
  }

  .about-us .section-heading p {
    color: #333;
  }  
  
  .courses {
    margin-top: 50px;
  }
  .event_filter ul li {
    display: block;
    margin: 12px 5px;
  }
  .fun-facts {
    margin-top: 70px;
  }
  .fun-facts::before {
    width: 95%;
  }
  .team {
    margin-top: 160px;
  }
  .team-member {
    margin-bottom: 140px;
  }
  .testimonials {
    margin-top: -50px;
    padding: 0px;
  }
  .testimonials .section-heading {
    margin-left: 0px;
    margin-top: 40px;
  }
  .testimonials .item {
    padding: 40px 40px 60px 40px;
  }
  .testimonials .item h4 {
    font-size: 17px;
  }
  .testimonials .item img {
    margin-right: 15px;
  }
  .testimonials .owl-nav {
    display: none;
  }
  .events {
    margin-top: 80px;
  }
  .events .item {
    margin-bottom: 66px;
  }
  
  .events .item .image {
    background: #fff;          /* 흰색 배경 */
    padding: 10px 0;           /* 위아래 여백 */
    text-align: center;        /* 중앙 정렬 */
  }

  .events .item .image img {
    max-width: 160px;          /* ✅ 실제 로고 크기 느낌 */
    width: auto;               /* 비율 유지 */
    height: auto;
    margin: 0 auto;
    display: inline-block;
  }

  .events .item ul {
    margin-top: -40px;
  }
  .events .item ul li:first-child {
    width: 100% !important;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #ddd;
  }
  .events .item ul li:nth-child(2) {
    width: 100% !important;
  }
  .events .item ul li {
    display: inline-block;
    width: 100% !important;
  }
  .events .item ul li:last-child {
    text-align: left;
  }
  .events .item a {
    bottom: 150px;
    top: auto;
  }
  .events .item ul li h6 {
    font-size: 16px;
  }
  .contact-us {
    padding-top: 20px;
  }
  .contact-us .section-heading {
    margin-right: 0px;
  }
  .contact-us .special-offer {
    background-color: #d2ebe9;
    margin-bottom: 60px;
    padding: 35px 35px 35px 35px;
    width: 100%;
  }
  .contact-us .special-offer h4 {
    font-size: 16px;
  }
  .contact-us .special-offer a {
    width: 40px;
    height: 40px;
    line-height: 40px;
    top: 15px;
    right: 15px;
  }
  .contact-us .contact-us-content {
    padding: 30px;
  }
  footer {
    margin-top: 30px;
  }
}

@media (max-width: 1200px) {
  .header-area .main-nav #search input {
    width: 200px;
  }
  .header-area .main-nav .nav li.has-sub:after {
    right: 15px;
  }
  .fun-facts:before {
    width: 95%;
  }
}