@charset "utf-8";

/********************************
동영상 게시판사용중
**********************************/
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.popup_youtube, .popup_imgview{ cursor: pointer; }	


/* board btn 영역 */
#mj-board-btn-wrap{ margin-bottom: 2.5rem;}
#mj-board-btn-wrap .btn{ margin-right: 0.3rem; margin-bottom: 0.3rem;}


/********************************
메인공통  페이지 공통
**********************************/
#main-slide{ margin-top: 96px; margin-bottom: 1.5rem;  }
#main-notice{ margin: 3rem 0 1.5rem 0; }
#main-mid1-slide{ margin: 1.5rem 0 1.5rem 0; }
#main-mid-slide{ margin: 3rem 0 1.5rem 0; }
#mj-icon-bar{ margin-top: 5rem; margin-bottom: 2rem; }


#main-notice .container{
	position: relative;
    max-width: 1500px;
    width: 100%;
    line-height: 1.5;
}

#main-mid1-slide .container{
	position: relative;
    max-width: 1500px;
    width: 100%;
    line-height: 1.5;
}

#main-mid-slide .container{
	position: relative;
    max-width: 1500px;
    width: 100%;
    line-height: 1.5;
}

.index-title-bar img{ padding-right:20px; border-radius:50%; }
.border-dashed { border: 1px dashed rgba(0,0,0,.125); }	
	
.main-small-title{ position:relative;padding-left:30px;margin-right:35px;color: #111;font-size:2rem;font-weight:500;margin-bottom: 1rem; } /* 타이틀 */
.main-small-title:after{position:absolute;content:'';width:6px;height:6px;left:0;top:50%;transform:translateY(-50%);background:var(--mj-b5-root-color);border-radius:50px}

.main-small-slogan { position:relative;padding-left:30px;margin-right:35px;font-size:29px; font-weight: 200; margin-bottom: 1.2rem; word-break: keep-all;  } /* 슬로건 */
.main-small-slogan span{ display: inline-block; }
.main-small-slogan p{ line-height: 1.4; margin: 0; padding: 0; font-size:29px;  }
.main-small-slogan strong{ color:#333 }


.sub-title-area{ margin-bottom:50px; text-align:center;  }
.sub-title-area h2{ font-size:45px; font-size:3rem; }
.sub-title-area .sub-lead{ font-size:30px; font-size:2rem; font-weight:400;}

#main-notice .nav .nav-link { padding: 0.3rem 0.5rem; }
	
#mj-main-home-info-bar{position:relative}
#mj-main-home-info-bar .bot_box ul{display:flex;align-items:center;gap:90px;justify-content:center}
#mj-main-home-info-bar .bot_box ul li{text-align:center;transition:all 0.3s}
#mj-main-home-info-bar .bot_box ul li .img_box{width:107px;line-height:107px;background:#f5f5f5;border-radius:50%}
#mj-main-home-info-bar .bot_box ul li .img_box a{display:block;width:100%;color: #ccc; font-size: 2.5rem;}
#mj-main-home-info-bar .bot_box ul li .img_box a:hover{color: var(--mj-b5-root-color); font-size: 2.5rem; }	
#mj-main-home-info-bar .bot_box ul li p{padding-top:30px;color:#111;font-size:18px;font-weight:800}

/* flex 정렬 */
.mj-justify{ justify-content: flex-end !important; margin-top: 15px; }


/********************************
메인 페이지 - PC 모바일 슬라이드 
**********************************/
	
.carousel-control-prev, 
.carousel-control-next {
    width: 60px;  /* 버튼 크기 조절 */
    height: 60px; 
    background-color: #134372;  /* 배경색 설정 */
    border-radius: 50%;  /* 버튼을 원형으로 만들기 */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

/* 호버 시 배경색 변경 */
.carousel-control-prev:hover, 
.carousel-control-next:hover {
    background-color: #0f2c5c; /* 약간 어두운 색으로 변경 */
}

/* 아이콘 크기 조절 */
.carousel-control-prev-icon, 
.carousel-control-next-icon {
    width: 24px;
    height: 24px;
}

/* 버튼 위치 조정 */
.carousel-control-prev {
	top : 50%;
    left: 10%;
}

.carousel-control-next {
	top : 50%;
    right: 10%;
}	

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: var(--bs-nav-pills-link-active-color);
    background-color: #134372;
}	

.nav-link {
    color: #134372;
}	




/********************************
메인 페이지 - 모바일 슬라이드 
**********************************/

/* 슬라이드 컨테이너 */
        #owl-mobile-main-slide {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
        }

        /* 슬라이드 내부 요소 크기 강제 설정 */
        #owl-mobile-main-slide .owl-stage-outer,
        #owl-mobile-main-slide .owl-stage,
        #owl-mobile-main-slide .owl-item {
            height: 300px !important;
			width: 100%;
        }

        /* 카드 스타일 */
        #owl-mobile-main-slide .card {
			position: relative;
    		width: 100%;
    		height: 300px;
    		border-radius: 0;
    		background-repeat: no-repeat;
    		background-position: center center;
    		background-size: cover;
    		display: flex;
    		align-items: center;
    		justify-content: center;
    		transition: all 0.3s;
    		margin-left: 1px;
    		padding: 0;
			border:none;
		}


        #owl-mobile-main-slide .owl-nav button {
    width: 40px;
    height: 40px;
    background-color: #134372 !important; /* 기존 스타일과 통일 */
    border-radius: 50%;  /* 버튼을 원형으로 만들기 */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, opacity 0.3s ease-in-out;
    position: absolute;
    top: 40%;
    font-size: 20px;
    color: white !important;
    opacity: 0.5; /* 기본 상태에서 약간 투명하게 설정 */
        }

        #owl-mobile-main-slide .owl-nav button:hover {
            background-color: #134372;
			opacity: 1; /* 기본 상태에서 약간 투명하게 설정 */
        }




        /* 네비게이션 버튼 위치 */
        #owl-mobile-main-slide .owl-nav button.owl-prev { left: 9px; }
        #owl-mobile-main-slide .owl-nav button.owl-next { right: 10px; }


/********************************
서브페이지
**********************************/

 /* 배너 전체 스타일 */

    #mj-sub-top-S001 {
    background-color: #333; /* 배경색 (필요시 수정 가능) */
    padding: 30px 0;
    color: #fff;
    width: 100vw; /* 전체 너비 설정 */
    height: 350px;
    position: relative;
    overflow: hidden; /* 넘치는 부분 숨김 */
	margin-top: 96px;
	margin-bottom: 3rem;	
    }
		#mj-sub-top-S001 .text_number {
    		color: #fff; /* 흰색 */
    		font-weight: bold; /* 글씨 강조 */
    		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* 가독성을 위한 그림자 */
		}
        #mj-sub-top-S001 .banner_content {
            text-align: center; /* 내부 요소 중앙 정렬 */
            display: flex;
            flex-direction: column;
            align-items: center; /* 가로축 중앙 정렬 */
            justify-content: center; /* 세로축 중앙 정렬 */
            min-height: 200px; /* 최소 높이 설정 */
        }

        #mj-sub-top-S001 .mj-breadcrumb {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            color: #fff;
        }

        #mj-sub-top-S001 .mj-breadcrumb .breadcrumb {
            display: flex;
            justify-content: center;
            color: #fff;
        }

        #mj-sub-top-S001 .mj-breadcrumb .breadcrumb .breadcrumb-item a {
            color: #fff;
            font-size: 1.2rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* 글자 그림자 */
            position: relative;
        }

        #mj-sub-top-S001 .mj-breadcrumb .breadcrumb .breadcrumb-item a::after {
            content: "";
            display: block;
            width: 100%;
            height: 2px;
            background-color: rgba(255, 255, 255, 0.8); /* 기본 밑줄 */
            position: absolute;
            left: 0;
            bottom: -3px;
            transition: width 0.3s ease-in-out;
        }

        #mj-sub-top-S001 .mj-breadcrumb .breadcrumb .breadcrumb-item a:hover::after {
            background-color: #ffcc00; /* 호버 시 밑줄 색 변경 */
        }

        #mj-sub-top-S001 .mj-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
            color: #fff;
            font-size: 1.2rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
        }

        /* 컨테이너 중앙 정렬 */
        #mj-sub-top-S001 .container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
	




#mj-sub-top-S001 .bg_images1 { 
    background-image: url('../img/slide/sub01.jpg');
    background-size: cover; /* 가로와 세로를 요소에 맞게 확장 */
    background-position: center center; /* 이미지를 중앙 정렬 */
    background-repeat: no-repeat; /* 반복 방지 */
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#mj-sub-top-S001 .bg_images2 { 
    background-image: url('../img/slide/sub02.jpg');
    background-size: cover; /* 가로와 세로를 요소에 맞게 확장 */
    background-position: center center; /* 이미지를 중앙 정렬 */
    background-repeat: no-repeat; /* 반복 방지 */
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#mj-sub-top-S001 .bg_images3 { 
    background-image: url('../img/slide/sub03.jpg');
    background-size: cover; /* 가로와 세로를 요소에 맞게 확장 */
    background-position: center center; /* 이미지를 중앙 정렬 */
    background-repeat: no-repeat; /* 반복 방지 */
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#mj-sub-top-S001 .bg_images4 { 
    background-image: url('../img/slide/sub04.jpg');
    background-size: cover; /* 가로와 세로를 요소에 맞게 확장 */
    background-position: center center; /* 이미지를 중앙 정렬 */
    background-repeat: no-repeat; /* 반복 방지 */
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#mj-sub-top-S001 .bg_images5 { 
    background-image: url('../img/slide/sub05.jpg');
    background-size: cover; /* 가로와 세로를 요소에 맞게 확장 */
    background-position: center center; /* 이미지를 중앙 정렬 */
    background-repeat: no-repeat; /* 반복 방지 */
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}


/* 숫자 스타일 */
        #mj-sub-top-S001 .text_number {
            font-size: 44px;
            color: #fff;
            font-weight: lighter;
            margin-bottom: 10px;
        }

/* 배너 제목 스타일 */
        #mj-sub-top-S001 .banner_content h2 {
            color: #ffffff;
            display: inline-block;
            font-size: 30px;
            font-weight: 700;
            line-height: 32px;
            margin: 0 auto;
            max-width: 900px;
            padding: 5px 10px;
            text-align: center;
        }

 /* 배너 설명 스타일 */
        #mj-sub-top-S001 .banner_content h3 {
            color: #DDDDDD;
            display: inline-block;
            font-size: 20px;
            font-weight: lighter;
            margin-bottom: 20px;
            max-width: 900px;
            padding: 0 10px;
            text-align: center;
        }

 /* 버튼 스타일 */
        #mj-sub-top-S001 .btn-discover {
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.7);
            border-radius: 3px;
            color: #ffffff;
            font-size: 16px;
            font-weight: 700;
            letter-spacing: 1px;
            padding: 14px 60px;
            text-decoration: none;
            transition: all .3s ease;
        }

        /* 버튼 호버 효과 */
        #mj-sub-top-S001 .btn-discover:hover {
            color: #fff;
            border-color: rgba(255, 255, 255, 1);
            background: rgba(255, 255, 255, 0.2);
        }

/* 배너 내용 정렬 */
        #mj-sub-top-S001 .banner_content {
            text-align: center;
            padding: 80px 0 80px 0;
            position: relative;
            z-index: 2;
        }


/* 작은 타이틀  */
.mj-small-title {
    padding: 24px 0 16px 0;
    font-size: 22px;
    color: #333;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.mj-small-title:before {
    display: inline-block;
    content: "";
    width: 6px;
    height: 6px;
    background-color: #007BFF; /* Replace $link with actual color */
    border-radius: 50%;
    margin-right: 8px;
}


/* 앞에 점있는 리스트  */
.mj-dot-list {
    padding: 4px 0 16px 0;
}

.mj-dot-list li {
    position: relative;
    word-break: keep-all;
	font-size: 16px;
}

.mj-dot-list > li {
    padding: 6px 0 6px 32px;
    color: #333;
}

.mj-dot-list > li:before {
    display: block;
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #555;
    position: absolute;
    left: 20px;
    top: 12px;
}

.mj-dot-list > li.note_wrn:before {
    background-color: #DF0043;
}

.mj-dot-list ul li {
    padding: 3px 0 3px 14px;
}

.mj-dot-list ul li:before {
    display: block;
    content: "";
    width: 6px;
    height: 1px;
    border-radius: 50%;
    background: #999;
    position: absolute;
    left: 2px;
    top: 12px;
}

/* 인사말 */
	#mj-company { font-size: 16px; }
	#mj-company .row .card { border: none; }
	#mj-company .row .card img { border-radius: 1rem; }
	.mj-txt-1 { font-size: 1.2rem; margin-bottom: 1.2rem; line-height: 2rem;  }
	.mj-txt-2 { font-size: 0.8rem; }
	.mj-txt-color{ color: var(--mj-b5-root-color); }

/* 설립목적 */
	#mj-purposeOfestablishment { }

/* 연혁 */
	#mj-history {font-size: 16px; }
	#mj-history dl{ font-size: 1rem; }
	#mj-history dt{ padding: 0.5rem }
	#mj-history dd{ padding: 0.5rem }
	#mj-history .col-sm-0 { flex: 0 0 auto; width: 0 !important; padding: 0; margin: 0; }

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: var(--bs-nav-pills-link-active-color);
    background-color: var(--mj-b5-root-color);
}


.nav-link {
    color: var(--mj-b5-root-color);
}


/* 조직도 */
#mj-organizationChart { }
#mj-organizationChart .boardDrector{margin: 80px 0 30px;}
#mj-organizationChart .boardDrector table {width:100%;border: 1px solid #d9d9d9; border-collapse: collapse; word-spacing:-1px;}
#mj-organizationChart .boardDrector table thead tr th {padding: 8px 20px; border: 1px solid #d9d9d9; background: #f6f6f6; font-weight: 500; font-size: 16px; font-size:1.067rem; color: #333; text-align:center;}
#mj-organizationChart .boardDrector table tbody tr td {padding: 8px 20px; border: 1px solid #d9d9d9;text-align: center; font-size: 16px; font-size:1.067rem; color: #333; line-height:1.8;}
#mj-organizationChart .boardDrector table tbody tr td:last-child{text-align:left;}
#mj-organizationChart .boardDrector table tbody tr td span{ display: inline-table;  width: 80%; word-break: keep-all;}
#mj-organizationChart .org-img{ max-width: 200px; }

/* 오시는 길 */
	.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* 후원안내 */

#mj-sponsorshipInformation { }
#mj-sponsorshipInformation .boardDrector{}
#mj-sponsorshipInformation .boardDrector table {width:100%;border: 1px solid #d9d9d9; border-collapse: collapse; word-spacing:-1px;}
#mj-sponsorshipInformation .boardDrector table th {padding: 8px 20px; border: 1px solid #d9d9d9; background: #f6f6f6; font-weight: 500; text-align:center;}
#mj-sponsorshipInformation .boardDrector table td {padding: 8px 20px; border: 1px solid #d9d9d9;text-align: center;  line-height:1.8;}
#mj-sponsorshipInformation .boardDrector table td:last-child{text-align:left;}
#mj-sponsorshipInformation .boardDrector table tr td span{ display: inline-table;  width: 80%; word-break: keep-all;}	



/* 하단 */
#mjFooterA { margin-top: 3rem; background-color: #222; color: #dadada; font-size: 0.933rem; }
#mjFooterA h2{ margin-bottom: 1.2rem; font-size: 1.133rem; position: relative; padding-left: 30px; margin-right: 35px;  }
#mjFooterA h2:after{position:absolute;content:'';width:10px;height:2px;left:0;top:50%;transform:translateY(-50%);background:#dadada;}
#mjFooterA a{ color: #dadada; }	
#mjFooterA .footer-top{ background-color: var(--mj-b5-root-color); }
#mjFooterA .container .pageLink li { padding: 1.2rem 0.5rem 1.2rem 0.5rem; font-size: 1rem;}
#mjFooterA .container .pageLink li a { font-size: 1rem; color: #fff; }
#mjFooterA .footer-tail	.mj-address{}
#mjFooterA .footer-tail	p{ line-height: 1.8rem;}
#mjFooterA .footer-tail	p span{ display: block; }
#mjFooterA .tail_logo { max-width: 120px; filter: grayscale(100%); }
#mjFooterA .tail_logo:hover { max-width: 120px; filter: grayscale(0%); }
#mjFooterA .border-bottom { border-bottom: var(--bs-border-width) var(--bs-border-style) #222 !important; }



/* 반응형 [s] */
@media (hover:hover){
#mj-main-home-info-bar .bot_box ul li:hover{transform:translateY(-20px)}
}
@media (max-width:1380px){
}
@media (max-width:1280px){
}
@media (max-width:1024px){
	#mj-sub-top-S001 {margin-top: 0px;  }
	#mj-main-home-info-bar .bot_box ul{justify-content:space-evenly;gap:0px;}
	#mj-main-home-info-bar .bot_box ul li .img_box{width:90px;height:90px}
	#mj-main-home-info-bar .bot_box ul li .img_box a{display:flex;justify-content:center;align-items:center;height:100%}
	#mj-main-home-info-bar .bot_box ul li p{padding-top:24px;font-size:16px}


	
}
@media (max-width:768px){
	#mj-sub-top-S001 {margin-top: 0px;  }		
	#mj-main-home-info-bar .bot_box ul{padding:0 0  60px}
	#mj-main-home-info-bar .bot_box ul li .img_box{width:75px;height:75px}
	#mj-main-home-info-bar .bot_box ul li .img_box a img{width:33px}
	#mj-main-home-info-bar .bot_box ul li p{padding-top:17px;font-size:14px}
	#mj-main-home-info-bar .bot_box ul li:hover{transform:translateY(-15px)}
}
@media (max-width:480px){
	#mj-sub-top-S001 {margin-top: 0px;  }		
	#main-notice{ margin: 0 !important; }
	#main-mid1-slide{ margin: 0 !important; }
	#main-mid-slide{ margin: 0 !important; }	
	
	.main-small-title{ position:relative;padding-left:30px;margin-right:35px;color: #111;font-size:1.6rem;font-weight:500;margin-bottom: 1rem; margin-top: 2rem; } /* 타이틀 */

	
    #mj-sub-top-S001 .text_number {
            font-size: 32px;
            color: #fff;
            font-weight: lighter;
            margin-bottom: 10px;
    }	
	
    #mj-sub-top-S001 .mj-breadcrumb .breadcrumb .breadcrumb-item a {
            font-size: 1rem;
     }	
	
	#mj-main-home-info-bar .bot_box ul{padding:0 0 50px}
	#mj-main-home-info-bar .bot_box ul li .img_box{width:62px;height:62px}
	#mj-main-home-info-bar .bot_box ul li .img_box a img{width:27px}
	#mj-main-home-info-bar .bot_box ul li p{padding-top:13px;font-size:13px}
	#mj-main-home-info-bar .bot_box ul li:hover{transform:translateY(-10px)}
	.main-small-slogan span{ display:block;padding-bottom:0.5rem; font-size: 1.3rem;} /* 슬로건 */
	/* flex 정렬 */
	.mj-justify{ justify-content: center !important; margin-bottom: 1rem; }
	#mjFooterA .container { flex-direction: column; }
	#mjFooterA .pageLink { justify-content: center !important; text-align: center; width: 100%; }
	#mjFooterA .pageLink li { display: inline-block; padding: 0.5rem; }	
	
	
	/* 조직도 */
	#mj-organizationChart .org-img{ max-width: 80px; }
	#mj-organizationChart .boardDrector table thead tr th {font-size: 14px;}
	#mj-organizationChart .boardDrector table tbody tr td {font-size: 14px;}
	
	/* 인사말 */
	#mj-company { font-size: 14px; }
	
	/* 연혁 */
	#mj-history {font-size: 14px; }
	
	/* 글자공통 */
	.mj-txt-1 { font-size: 14px; margin-bottom: 1rem; line-height: 1.4;  }
	.mj-txt-2 { font-size: 14px; }

	/* 앞에 점있는 리스트  */
	.mj-dot-list li { font-size: 14px !important; }
	
	
	#mj-sponsorshipInformation .boardDrector table th {font-size: 14px;}
	#mj-sponsorshipInformation .boardDrector table td {font-size: 14px;}
	
	
	/* 하단 */
	#mjFooterA { font-size: 14px !important; }
	#mjFooterA .container .pageLink li { font-size: 14px;}
	#mjFooterA .container .pageLink li a { font-size: 14px; }
	
	
}
@media (max-width:380px){
	#mj-sub-top-S001 {margin-top: 0px;  }	
	#mj-main-home-info-bar .bot_box ul{padding:0 0 40px}
	#mj-main-home-info-bar .bot_box ul li .img_box{width:56px;height:56px}
	#mj-main-home-info-bar .bot_box ul li .img_box a img{width:25px}
	#mj-main-home-info-bar .bot_box ul li p{padding-top:11px}
	.main-small-slogan span{ display:block;padding-bottom:0.5rem;} /* 슬로건 */
	/* flex 정렬 */
	.mj-justify{ justify-content: center !important; margin-bottom: 1rem; }	
}