/* Megamenu CSS - from CodePen */

/* 메가메뉴 컨테이너에만 적용되도록 선택자 수정 */
.exo-menu,
.exo-menu *,
.exo-menu :after,
.exo-menu :before {
  box-sizing: border-box;
}

.exo-menu.clearfix:after,
.exo-menu.clearfix:before {
  content: '';
  display: table
}

.exo-menu.clearfix:after {
  clear: both;
  display: block
}

.exo-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* 메가메뉴 링크 색상 조정 */
.exo-menu a,
.exo-menu a:hover,
.exo-menu a.active,
.exo-menu a:active,
.exo-menu a:visited,
.exo-menu a:focus {
	color: #0d6efd;
	text-decoration: none;
}

.content {
	margin: 50px 100px 0px 100px;
}

.exo-menu {
	width: 100%;
	float: left;
	list-style: none;
	position: relative;
	background: #ffffff;
}

.exo-menu > li {
	display: inline-block;
	float: left;
}

.exo-menu > li > a {
	color: #0d6efd;
	text-decoration: none;
	text-transform: uppercase;
	border-right: 1px #dee2e6 dotted;
	font-size: 16px;
	font-weight: 600;
	-webkit-transition: color 0.2s linear, background 0.2s linear;
	-moz-transition: color 0.2s linear, background 0.2s linear;
	-o-transition: color 0.2s linear, background 0.2s linear;
	transition: color 0.2s linear, background 0.2s linear;
}

.exo-menu > li > a.active,
.exo-menu > li > a:hover,
li.drop-down ul > li > a:hover {
	background: #0d6efd;
	color: #fff;
}

.exo-menu i {
  float: left;
  font-size: 18px;
  margin-right: 6px;
  line-height: 20px !important;
}

li.drop-down,
.flyout-right,
.flyout-left {
	position: relative;
}

li.drop-down:before {
  content: "\f103";
  color: #0d6efd;
  font-family: FontAwesome;
  font-style: normal;
  display: inline;
  position: absolute;
  right: 6px;
  top: 20px;
  font-size: 14px;
}

li.drop-down > ul {
	left: 0px;
	min-width: 230px;
}

.drop-down-ul {
	display: none;
}

.flyout-right > ul,
.flyout-left > ul {
  top: 0;
  min-width: 230px;
  display: none;
  border-left: 1px solid #dee2e6;
}

li.drop-down > ul > li > a,
.flyout-right ul > li > a,
.flyout-left ul > li > a {
	color: #0d6efd;
	display: block;
	padding: 20px 22px;
	text-decoration: none;
	background-color: #ffffff;
	border-bottom: 1px dotted #dee2e6;
	-webkit-transition: color 0.2s linear, background 0.2s linear;
	-moz-transition: color 0.2s linear, background 0.2s linear;
	-o-transition: color 0.2s linear, background 0.2s linear;
	transition: color 0.2s linear, background 0.2s linear;
}

.flyout-right ul > li > a,
.flyout-left ul > li > a {
	border-bottom: 1px dotted #dee2e6;
}

/* Flyout Mega */
.flyout-mega-wrap {
	top: 0;
	right: 0;
	left: 100%;
	width: 100%;
	display: none;
	height: 100%;
	padding: 15px;
	min-width: 742px;
}

h4.row.mega-title {
  color: #333;
  margin-top: 0px;
  font-size: 14px;
  padding-left: 15px;
  padding-bottom: 13px;
  text-transform: uppercase;
  border-bottom: 1px solid #dee2e6;
}

.flyout-mega ul > li > a {
  font-size: 90%;
  line-height: 25px;
  color: #0d6efd;
  font-family: inherit;
}

.flyout-mega ul > li > a:hover,
.flyout-mega ul > li > a:active,
.flyout-mega ul > li > a:focus {
  text-decoration: none;
  background-color: transparent !important;
  color: #0a58ca !important;
}

/* Mega menu */
.mega-menu {
  left: 0;
  right: 0;
  padding: 15px;
  display: none;
  padding-top: 0;
  min-height: 100%;
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

h4.row.mega-title {
  color: #333;
  margin-top: 0px;
  font-size: 14px;
  padding-left: 15px;
  padding-bottom: 13px;
  text-transform: uppercase;
  border-bottom: 1px solid #dee2e6;
  padding-top: 15px;
  background-color: #f8f9fa;
}

.mega-menu ul li a {
  line-height: 25px;
  font-size: 90%;
  display: block;
  color: #0d6efd;
}

ul.stander li a {
    padding: 3px 0px;
}

ul.description li {
    padding-bottom: 12px;
    line-height: 8px;
}

ul.description li span {
    color: #666;
    font-size: 85%;
}

a.view-more {
  border-radius: 1px;
  margin-top: 15px;
  background-color: #0d6efd;
  padding: 2px 10px !important;
  line-height: 21px !important;
  display: inline-block !important;
  color: #fff !important;
}

a.view-more:hover {
	color: #fff !important;
	background: #0a58ca;
}

ul.icon-des li a i {
    color: #fff;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    text-align: center;
    background-color: #0d6efd;
    line-height: 35px !important;
}

ul.icon-des li {
    width: 100%;
    display: table;
    margin-bottom: 11px;
}

/* Blog DropDown */
.Blog {
	left: 0;
	display: none;
	color: #333;
	padding-top: 15px;
	background: #ffffff;
	padding-bottom: 15px;
	border: 1px solid #dee2e6;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	flex-wrap: wrap;
}

.Blog .blog-title {
	color: #333;
	font-size: 15px;
	text-transform: uppercase;
}

.Blog .blog-des {
	color: #666;
	font-size: 90%;
	margin-top: 15px;
}

.Blog a.view-more {
	margin-top: 0px;
}

/* Images */
.Images {
	left: 0;
   width: 100%;
	display: none;
	color: #333;
	padding-top: 15px;
	background: #ffffff;
	padding-bottom: 15px;
	border: 1px solid #dee2e6;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	flex-wrap: wrap;
}

.Images h4 {
  font-size: 15px;
  margin-top: 0px;
  text-transform: uppercase;
  color: #333;
}

/* common */
.flyout-right ul > li > a,
.flyout-left ul > li > a,
.flyout-mega-wrap,
.mega-menu {
	background-color: #ffffff;
}

/* hover */
.mega-menu:hover,
.drop-down-ul:hover,
li.flyout-left > ul:hover,
li.flyout-right > ul:hover,
.flyout-mega-wrap:hover,
li.flyout-left a:hover + ul,
li.flyout-right a:hover + ul,
li.drop-down > a:hover + .drop-down-ul,
.mega-drop-down a:hover + .mega-menu,
li.flyout-mega > a:hover + .flyout-mega-wrap {
	display: block;
}

/* Blog와 Images는 flex로 표시 (가로 배치) */
.Blog:hover,
.blog-drop-down > a:hover + .Blog,
.Images:hover,
.images-drop-down > a:hover + .Images {
	display: flex;
}

/* responsive */
@media (min-width: 767px) {
	.exo-menu > li > a {
		display: block;
		padding: 20px 22px;
	}
	.mega-menu, .flyout-mega-wrap, .Images, .Blog, .flyout-right > ul,
	.flyout-left > ul, li.drop-down > ul {
		position: absolute;
	}
	.flyout-right > ul {
		left: 100%;
	}
	.flyout-left > ul {
		right: 100%;
	}
}

@media (max-width: 767px) {
	/* 모바일에서 메가메뉴 완전히 숨김 */
	.exo-menu {
		display: none !important;
	}

	/* 메가메뉴 컨테이너도 숨김 */
	.px-3.py-2.border-bottom.bg-light.shadow-sm {
		display: none !important;
	}
}

a.toggle-menu {
    position: absolute;
    right: 0px;
    padding: 15px 25px;
    font-size: 36px;
    background-color: #0d6efd;
    color: #ffffff !important;
    font-weight: bold;
    line-height: 1;
    top: 0px;
    display: none; /* 데스크톱에서 기본적으로 숨김 */
    text-decoration: none !important;
    border: 2px solid #ffffff;
    border-radius: 5px;
}

/* 모바일에서 토글 버튼 숨김 (파란 햄버거 버튼 제거) */
@media (max-width: 767px) {
    a.toggle-menu {
        display: none !important;
    }
}

.blink-soft {
  animation: blinker 1.5s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.visit-my-blog {
    background: #0d6efd;
}