@charset "utf-8"; 

/* 초기화 */
body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	font-size:inherit;
	font-weight:inherit;
	border:0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display:block;
}
html {
	font-size:15px;
}
body {
	color:#555;
	font-size:1rem;
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
	background-color:#fff;
}
a {
	color:inherit;
	text-decoration:none;
	transition:all 0.3s ease-out;
	cursor:pointer;
}
a:visited,
a:active,
a:focus,
a:hover {
	text-decoration:none;
}
ul, ol {
	margin:0;
	padding:0;
}
li {
	list-style:none;
}
h1, h2, h3, h4, h5, h6 {
	line-height:inherit;
}
hr {
	display:none;
}
em { font-style:normal; }

.placeholdersjs { color:#aaa !important; }




/* 팝업레이어 */
#hd_pop { z-index:1222; position:relative; margin:0 auto; width:1200px; height:0; }
#hd_pop h2 { position:absolute; font-size:0; line-height:0; overflow:hidden; }
.hd_pops { position:absolute; border:1px solid #e9e9e9; background:#fff; }
.hd_pops img { max-width:100%; }
.hd_pops_con {; }
.hd_pops_footer { padding:0; background:#222; color:#fff; text-align:left; position:relative; }
.hd_pops_footer:after { display:block; visibility:hidden; clear:both; content:""; }
.hd_pops_footer button { padding:10px; border:0; color:#fff; }
.hd_pops_footer .hd_pops_reject { background:#222; text-align:left; }
.hd_pops_footer .hd_pops_close { background:#393939; position:absolute; top:0; right:0; }







/* #################################################################################################### 
	레이아웃 공통
###################################################################################################### */

::selection {
	color:#fff;
	background-color:#000;
}

.boundary { width:96%; max-width:1200px; margin:0 auto; padding:0; }

#wrapper { }

/* 메인만 100% */
.idx-container { width:100%; margin:0 auto; padding:0; }

/* aside 햄버거 메뉴 */
#aside { display:none; /* float:right; */ width:315px; height:100%; z-index:1000; background:#fff; border-right:1px solid #ebebeb; padding:0; margin:0; } 

/* transition */
.transition {
	-webkit-transition:all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
	-moz-transition:all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
	-o-transition:all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
	transition:all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* 폰트 */
/* .colorYellow { color:#e9b21e; } */
.colorRed { color:#ec1e27; }
.font_eng { letter-spacing:0.05em; }

/* 메인 타이틀 */
.main_title { clear:both; font-size:42px; text-align:center; margin:80px auto 30px; }
.main_title h2 { font-size:1em; letter-spacing:0.05em; font-weight:300; line-height:1.4; font-family:'Josefin Sans', 'Noto Sans KR', 'Nanum Gothic', sans-serif; }
.main_title2 h2 { letter-spacing:-0.03em; }

/* 메인 click 버튼 */
.main_clickButton { text-align:center; margin-top:40px; }
.main_clickButton a { position:relative; display:inline-block; font-size:16px; color:#fff; letter-spacing:0.05em; padding:15px 60px; border:1px solid #fff; }
.main_clickButton span { width:80px; height:1px; background:#ec1e27; position:absolute; right:-40px; top:50%; }
.main_clickButton.clickButton_bk a { color:#222; border:1px solid #222; }
.main_clickButton:hover a { background:#ec1e27; border:1px solid #ec1e27; }
.main_clickButton.clickButton_bk:hover a { background:#222; color:#fff; border:1px solid #222; }

/* 서브 개별 레이아웃 */
#sub_page { clear:both; padding:30px 0 100px; }
#sub_page,
#sub_page a { font-size:18px; font-weight:300; letter-spacing:-0.05em; }

#sub_page .divClear { clear:both; padding:40px 0; }

/* 서브 타이틀 */
h2#container_title { clear:both; font-size:52px; text-align:center; margin:0 auto 30px; }
h2#container_title span { font-size:1em; letter-spacing:-0.03em; font-weight:400; line-height:1.2; font-family:'Josefin Sans', 'Noto Sans KR', 'Nanum Gothic', sans-serif; text-transform:uppercase; }

/* 서브 큰 타이틀 */
.h2-stit { display:inline-block; position:relative; font-size:52px; font-weight:400; letter-spacing:-0.03em; padding-left:70px; line-height:1.2; margin-bottom:30px; }
.h2-stit:before { content:""; position:absolute; left:0; top:22px; width:50px; height:4px; background:#222; }
.h2-stit2 { padding-left:0; margin-bottom:0; }
.h2-stit2:before { background:none; }





/*
 * home
 **********************************************************************************************************************/

/*
 * hero-banner
 */
.hero-banner { 
	position:relative; 
	margin:0 auto;
	margin-top:110px;
	border-radius: 10px;
 }
.hero-banner .owl-item {
	overflow:hidden;
}
.hero-banner .owl-item  .hero-banner__item { 
    -webkit-transition:transform 2s linear;
    -moz-transition:transform 2s linear;
    -ms-transition:transform 2s linear;
    -o-transition:transform 2s linear;
    transition:transform 2s linear;
    -moz-transform:scale(1.1);
    -webkit-transform:scale(1.1);
    -ms-transform:scale(1.1);
    -o-transform:scale(1.1);
    transform:scale(1.1);
	background-repeat:no-repeat;
	background-size:cover;
}
.hero-banner .owl-item.active .hero-banner__item {
    -moz-transform:scale(1);
    -webkit-transform:scale(1);
    -o-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1);
}
 .hero-banner__item {
	position:relative;
	width:100%;
	height: 100%;
	height: 100vh/*380px*/;
	text-align:center;
}
.hero-banner > .container {
	position:absolute;
	top:50%;
	left:0;
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	-o-transform:translateY(-50%);
	transform:translateY(-50%);
	width:100%;
	z-index:999;
}
.hero-banner__title + .hero-banner__text {
	padding-top:1rem;
}
.hero-banner__text {
	max-width:20rem;
	margin-left:auto;
	margin-right:auto;
	word-break:keep-all;
}
.hero-banner__text .custom-block {
	display:inline;
}
.hero-banner__title {
	font-size:2rem;
	font-weight:500;
	letter-spacing:-0.02em;
	line-height:1.2;
}
.hero-banner__text {
	font-size:1.25rem;
	font-weight:300;
	letter-spacing:-0.05em;
}
.hero-banner .owl-dots {
	position:absolute;
	bottom:1rem;
	left:0;
	width:100%;
	height:4px;
	font-size:0;
	text-align:center;
}
.hero-banner .owl-dots .owl-dot {
	opacity:0.3;
	display:inline-block;
	width:3rem;
	height:4px;
	background-color:#fff;
	-webkit-transition:opacity 0.2s ease-in-out;
	-moz-transition:opacity 0.2s ease-in-out;
	-o-transition:opacity 0.2s ease-in-out;
	transition:opacity 0.2s ease-in-out;
}
.hero-banner .owl-dots .owl-dot + .owl-dot {
	margin-left:0.5rem;
}
.hero-banner .owl-dots .owl-dot.active {
	opacity:1;
}
@media (max-width:768px) {
	.hero-banner > .container {
		text-align:center;
	}
}
@media (min-width:768px) {
	.hero-banner__item {
		/*height:432px;*/
	}
	.hero-banner__title .custom-block {
		display:inline;
	}
	.hero-banner__text {
		max-width:100%;
	}
	.hero-banner__text .custom-block {
		display:block;
	}
	.hero-banner__title {
		font-size:2.125rem;
	}
	.hero-banner__text {
		font-size:1.375rem;
	}
	.hero-banner .owl-dots {
		bottom:2rem;
	}
}
@media (min-width:992px) {
	.hero-banner__item {
		/*height:558px;*/
	}
	.hero-banner__title {
		font-size:2.75rem;
	}
	.hero-banner__text {
		font-size:1.75rem;
	}
}
@media (min-width:1200px) {
	.hero-banner__title {
		font-size:3.3333rem;
	}
	.hero-banner__text {
		font-size:2.25rem;
	}
}
@media (min-width:1280px) {
	.hero-banner__item {
		/*height:640px;*/
	}
	.hero-banner > .container {
		left:50%;
		-webkit-transform:translate(-50%, -50%);
		-moz-transform:translate(-50%, -50%);
		-ms-transform:translate(-50%, -50%);
		-o-transform:translate(-50%, -50%);
		transform:translate(-50%, -50%);
		width:1280px;
	}
}

.gabang-section {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

.gabang-section .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    filter: blur(5px) brightness(1.05);
    transform: scale(1.02);
    z-index: 1;
}

.gabang-section .content-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
	margin-top: 80px;
}

.gabang-section .main-title {
    font-size: 3.3em;
    margin-bottom: 10px;
    color: #000;
    letter-spacing: -1px;
	font-weight: 600;
}

.gabang-section .main-title span{
	background-image: linear-gradient(to left, #9A5DFF, #6880FF);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

.gabang-section .sub-text {
    font-size: 1.3em;
    font-weight: 600;
    color: #000;
    margin-top: 0;
    margin-bottom: 30px;
}

.gabang-section .buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 60px;
}

.gabang-section .btn {
    display: inline-block;
    padding: 9px 23px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
	border-radius:30px !important;
	transition:unset;
}

.gabang-section .primary-btn {
    background: linear-gradient(to left, #9A5DFF, #6880FF);
    color: #fff;
}

.gabang-section .primary-btn:hover {
    background: linear-gradient(to left, #b78bff, #768cff);
}

.gabang-section .secondary-btn {
    background-color: #fff;
    color: #6880FF;
    border: 1px solid #6880FF;
}

.gabang-section .secondary-btn:hover {
    background-color: #f0f4fa;
}

.gabang-section .phone-mockup {
    width: 100%;
    max-width: 655px;
    margin-top: 20px;
    position: relative;
}

.gabang-section .gabang-image {
    width: 100%;
    height: auto;
    display: block;
    transform: translateY(20px);
    max-width: 100%;
}

.karaoke-section {
    width: 100%;
    padding: 90px 20px 140px;
}

.karaoke-section .inner-wrapper {
    max-width: 1480px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 12px;
}

.karaoke-box {
    width: 100%;
    max-width: 720px;
    padding: 50px;
	padding-bottom:20px;
    border-radius: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
}

.lg-box {
    background: linear-gradient(135deg, #feeef5 0%, #fdebf2 100%);
}

.samsung-box {
    background: linear-gradient(135deg, #f2f6ff 0%, #e6efff 100%);
}

.karaoke-box h2 {
    font-size: 2em;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 10px;
    color: #222;
}

.karaoke-box .brand-logo {
    display: inline-block;
    margin-right: 3px;
	height: 21px;
    margin-bottom: 5px;
}

.karaoke-box:first-child .brand-logo{
	height:33px;
}

.karaoke-box p {
    font-size: 1.1em;
    margin-bottom: 15px;
}

.karaoke-box .btn {
    display: inline-block;
    background: linear-gradient(to left, #333E7D, #4B2E7D);
    color: #fff;
    padding: 9px 23px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
	font-size:14px;
}

.karaoke-box .btn:hover {
    background-color: #35354d;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.karaoke-box .image-content {
    margin-top: 40px;
}

.karaoke-box img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.platform-section {
    width: 100%;
    padding: 100px 0;
    background-color: #EBF6FF;
    overflow: hidden;
}

.platform-section .inner-wrapper {
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 20px;
}

.platform-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 80px;
}

.platform-section h2 {
    font-size: 3rem;
    font-weight: 700;
    margin: 0;
    color: #111;
}

.platform-section .swiper-navigation {
    display: flex;
    gap: 10px;
}

.platform-section .swiper-navigation button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background-color: #fff;
    font-size: 20px;
    color: #888;
    cursor: pointer;
    transition: all 0.2s ease;
	padding:0;
}

.platform-section .swiper-navigation button img{width:22px; margin-bottom: 3px;}
.platform-section .swiper-navigation button:last-child img{margin-left: 3px;}

.platform-section .swiper-navigation button:hover {
    background-color: #e9e9e9;
    color: #333;
}

.platform-swiper {
    width: 130%; 
	margin-left:-15% !important;
	overflow:visible !important;
}

.platform-swiper .swiper-wrapper {
    align-items: flex-end;
}

.platform-swiper .swiper-slide {
    transition: transform 0.4s ease;
}

.platform-swiper .swiper-slide img{
	opacity: 0.4;
	transition: opacity 0.4s ease;
}

.platform-swiper .swiper-slide-active {

}

.platform-swiper .swiper-slide-active img{
	opacity: 1;
}

.platform-swiper .platform-card {
    background-color: #fff;
    border-radius: 15px;
    padding: 13px 13px 47px;
    box-shadow: 0 0 25px #002F762d;
    text-align: center;
    transition: background 1s ease;
	display:block;
}

.platform-swiper .swiper-slide-active .platform-card {
    background:linear-gradient(to top, #E3EFFF, #8195FF);
}

.platform-swiper .platform-card img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 15px;
	transition: all 0.4s ease;
	border:1px solid #ccc;
}

.platform-swiper .swiper-slide-active .platform-card img{


}

.platform-swiper .platform-card p {
    margin: 0;
    font-size: 1.5em;
    font-weight: 500;
    color: #000;
}

.youtube-section {
    width: 100%;
    padding: 100px 20px;
    background-color: #fff;
}

.youtube-section .inner-wrapper {
    max-width: 1480px;
    margin: 0 auto;
}

.youtube-section .section-header {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

.youtube-section .section-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
    color: #111;
}

.youtube-section .section-header a{
    margin-left: 20px;
	width:24px;
	display:inline-block;
}


.youtube-section .video-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.youtube-section .video-card {
    text-decoration: none;
    color: #333;
    display: block;
    transition: all 0.3s ease;
	min-width: 0;
}

.youtube-section .video-card:hover {

}

.youtube-section .video-thumbnail {
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 15px;
    border: 1px solid #eee;
}

.youtube-section .video-thumbnail img {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.youtube-section .video-title {
    font-size: 1.4em;
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.banner-section {
    width: 100%;
    padding: 100px 20px;
    background-color: #f8f9fa; 
}

.banner-section .inner-wrapper {
    max-width: 1480px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.banner-card {
    position: relative;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    padding: 6.5% 8%;
    color: #fff;
    background-size: cover;
    background-position: center;
}

.banner-content {
    position: relative;
    z-index: 2;
}

#stage-banner {
    background-image: url('../img/banner-1.png'); 
}

#business-banner {
    background-image: url('../img/banner-2.png'); 
}

 #business-banner .banner-content{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.banner-card h2 {
    font-size: 2.2em;
    font-weight: 700;
    margin: 0 0 10px 0;
    color: #333;
}

.banner-card p {
    font-size: 1.2em;
    margin: 0 0 30px 0;
    color: #555;
}

.banner-section .button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.banner-section .btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 500;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.banner-section .primary-btn {
    background: linear-gradient(to left, #9A5DFF, #6880FF);
    color: #fff;   
	transition: background 0.3s ease;
}

.banner-section .primary-btn:hover {
    background: linear-gradient(to left, #8342ee, #556ef0);
}

.banner-section .secondary-btn {
    background-color: #fff;
    color: #797979;
    border-color: #ddd;
}

.banner-section .secondary-btn:hover {
    background-color: #f5f5f5;
    border-color: #ccc;
}

.banner-section .dark-btn {
    background-color: #483d8b;
    color: #fff;
}

.banner-section .dark-btn:hover {
    background-color: #3a306f;
}

.partner-section {
	padding: 60px 0;
}
.partner-section .container {
	margin: 0 auto;
}

.partner-row {
	overflow: hidden;
	width: 100%;
	margin: 60px 0;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 1%, #000 99%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 1%, #000 99%, transparent);
}
.partner-list {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}
.partner-row.top-row .partner-list {
	animation: slide-left 35s linear infinite;
}
.partner-row.bottom-row .partner-list {
	animation: slide-right 35s linear infinite;
}

.partner-row:hover .partner-list {
	animation-play-state: paused;
}

.partner-list .item {
	flex-shrink: 0;
	margin: 0 25px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.partner-list .item img {
	max-height: 90px; 
	height: auto;
	object-fit: contain;
	opacity: 0.8;
	transition: opacity 0.3s ease;
}
.partner-list .item img:hover {
	opacity: 1;
}

@keyframes slide-left {
	from {
		transform: translateX(0%);
	}
	to {
		transform: translateX(-50%);
	}
}

@keyframes slide-right {
	from {
		transform: translateX(-50%);
	}
	to {
		transform: translateX(0%);
	}
}

.site-footer {
	background-color: #fff;
	color: #555;
	font-size: 14px;
}

.footer-container {
	margin: 0 auto;
	background-color:#F5F5F7;
}

.footer-nav {
	padding: 20px;
	background:#FBFBFB;
}
.footer-nav ul {
	display: flex;
	flex-wrap: wrap; /* 화면이 작아지면 줄바꿈 */
	list-style: none;
	padding: 0;
	margin: 0 auto;
	max-width:1480px;
	gap: 25px; /* 메뉴 간격 */
}
.footer-nav a {
	text-decoration: none;
	color: #333;
	font-weight: 500;
}
.footer-nav a:hover {
	text-decoration: underline;
}

/* 2. 중간 정보 영역 (주소, 연락처 등) */
.footer-main {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
	border-bottom: 1px solid #e9e9e9;
	margin: 0 auto;
	max-width:1520px;
	padding: 30px 20px;
}
.footer-column {
	flex: 1; /* 모든 컬럼이 가능한 공간을 균등하게 차지 */
	min-width: 220px; /* 최소 너비 지정 */
}
.footer-column h3 {
	font-size: 15px;
	color: #000;
	margin-top: 0;
	margin-bottom: 15px;
}
.footer-column p {
	margin: 5px 0;
	font-size: 13px;
	line-height: 1.6;
	color: #666;
}
.footer-column p a {
	color: #666;
	text-decoration: none;
}
.footer-column p a:hover {
	text-decoration: underline;
}

/* 3. 하단 정보 영역 (로고, 저작권, SNS 등) */
.footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0 auto; 
	max-width: 1520px;
	padding: 50px 20px;
}

.footer-info {
	font-size: 13px;
	color: #777;
	line-height: 1.7;
}
.footer-logo {
	margin-bottom: 15px;
}
.footer-logo img {
	width: 150px; /* 로고 크기 */
}
.footer-info p {
	margin: 0;
}
.footer-copyright {
	margin-top: 15px;
	font-size: 12px;
	color: #999;
}

.footer-aside {
	display: flex;
	flex-direction: column;
	align-items: flex-end; /* 오른쪽 정렬 */
}
.footer-socials {
	display: flex;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 0 0 15px 0;
}
.footer-socials a {
	display: flex;
	justify-content: center;
	align-items: center;
	opacity:0.22;
	transition:opacity 0.1s ease-in-out;
}
.footer-socials a:hover{
	opacity:0.32;
}
.footer-socials a img{
	width: 32px;
}
.footer-links {
	margin-bottom: 15px;
}
.footer-links a {
	color: #555;
	text-decoration: none;
	margin-left: 15px;
}
.footer-links a:first-child {
	font-weight: 700;
	margin-left: 0;
}
.footer-links a:hover {
	text-decoration: underline;
}

.family-site {
	/* 드롭업 메뉴의 기준점이 되도록 position 설정 */
	position: relative;
}
.family-site button {
	background-color: #fff;
	border: 1px solid #ccc;
	padding: 8px 15px;
	width: 190px;
	text-align: left;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
}
/* + 아이콘 스타일 */
.family-site .plus-icon {
	transition: transform 0.3s ease;
}

/* 드롭업 목록 스타일 */
.family-site-list {
	position: absolute;
	/* 버튼 바로 위에 위치하도록 설정 */
	bottom: calc(100% + 5px);
	left: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: #fff;
	border: 1px solid #ccc;
	box-sizing: border-box; /* border가 너비에 포함되도록 설정 */
	
	/* 기본 상태: 숨김 */
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px); /* 살짝 아래에서 시작 */
	transition: all 0.3s ease;
}
.family-site-list li a {
	display: block;
	padding: 10px 15px;
	font-size: 13px;
	color: #555;
	text-decoration: none;
}
.family-site-list li a:hover {
	background-color: #f5f5f5;
}

/* JavaScript로 is-active 클래스가 추가되었을 때의 스타일 */
.family-site.is-active .family-site-list {
	opacity: 1;
	visibility: visible;
	transform: translateY(0); /* 제자리로 이동 */
}
.family-site.is-active .plus-icon {
	/* + 아이콘을 45도 회전시켜 x 모양처럼 보이게 함 */
	transform: rotate(45deg);
}

@media (max-width: 768px) {
	.karaoke-section .inner-wrapper {
		flex-wrap: wrap;
	}
	.platform-swiper {
		width: 220%;
		margin-left: -60% !important;
	}

	.youtube-section .video-list{grid-template-columns: auto;}
	.youtube-section .video-list a{display:none;}
	.youtube-section .video-list a:first-child{display:block;}
	.banner-section{padding: 50px 20px;}
	.banner-section .inner-wrapper{gap:10px;}
	.banner-card{border-radius:10px;}
	.banner-card h2 {
	    font-size: 1.5em;
	}
	.banner-section .button-group{gap:10px;}
	.banner-section .btn{padding:6px 12px;font-size:14px;}
	.banner-card p{ font-size: 1em;}
	.partner-list .item{margin:0;}
	.partner-list .item img {
    max-height: 75px;
	}
	.partner-row{margin:30px 0;}
	.partner-row.top-row .partner-list {
	animation: slide-left 10s linear infinite;
}
.partner-row.bottom-row .partner-list {
	animation: slide-right 10s linear infinite;
}
.partner-row:hover .partner-list {
	animation-play-state: paused;
}
	.footer-bottom{justify-content: center;}
	.footer-info{text-align:center;}
	.footer-aside{align-items: center;}
}

@media (max-width: 515px) {
.footer-main{display:none;}
}

/*
 * common
 */
.home-sec {
	padding-top:3rem;
	padding-bottom:3rem;
	overflow:hidden;
}
.home-sec--sm {
	padding-top:2rem;
	padding-bottom:2rem;
}
.home-sec__header {
	margin-bottom:1.5rem;
}
.home-sec__title {
	font-size:2rem;
	letter-spacing:0.01em;
	line-height:1.25;
	font-weight:700;
	text-align:left;
}
.home-sec__subtitle {
	font-size:1.3333rem;
	line-height:2.5;
}
.home-sec__description {
	font-size:1.0875rem;
	font-weight:300;
	letter-spacing:-0.04em;
	line-height:2;
}
@media (min-width:768px) {
	.home-sec {
		padding-top:4rem;
		padding-bottom:4rem;
	}
	.home-sec--sm {
		padding-top:3rem;
		padding-bottom:3rem;
	}
	.home-sec__header {
		margin-bottom:2rem;
	}
	.home-sec__description {
		font-size:1.125rem;
	}
}
@media (min-width:992px) { }
@media (min-width:1200px) {
	.home-sec {
		padding-top:4.5rem;
		padding-bottom:4.5rem;
	}
	.home-sec--sm {
		padding-top:4.5rem;
		padding-bottom:4.5rem;
	}
	.home-sec__title {
		font-size:2.5rem;
	}
	.home-sec__description {
		font-size:1.2rem;
	}
}







/*
 * home-features
.home-features { }
.home-features .container { }
.home-features .cta { }
.home-features .cta-left {
	display:block;
	width:100%;
	position:relative;
}
.home-features .cta-right {
	display:block;
	width:100%;
	padding:0 20px;
}
.home-features .cta-right dl { 
	display:block;
	margin:25px 0;
}
.home-features .cta-right dt { 
	font-size:1.3333rem;
	min-height:32px;
	letter-spacing:-0.03em;
}
.home-features .cta-right dd { 
	padding-top:10px; 
	font-size:1rem;
}
.home-features .cta-title {
	position:absolute; 
	right:0;
	bottom:0;
	z-index:1;
}
.home-features .cta-title span {
	display:inline-block;
	vertical-align:middle; 
	padding:20px; 
	font-size:1.3333rem;
}
.home-features .cta-title span:before {
	content:"";
	display:inline-block;
	vertical-align:middle; 
    height:1px;
    width:2.5rem;
    background-color:#fff;
	margin-right:1.5rem;
}
.home-features .cta-logo {
	position:absolute; 
	left:0;
	top:0;
	z-index:1;
}
.home-features .cta-logo span {
	display:inline-block;
	padding:20px; 
	font-size:1.3333rem;
	opacity:0.4;
}
.home-features .cta-title-icon1,
.home-features .cta-title-icon2,
.home-features .cta-title-icon3,
.home-features .cta-title-icon4 { background-repeat:no-repeat; background-position:left center; padding-left:40px; }
.home-features .cta-title-icon1 { background-image:url("../img/svg/cta-title-icon1.svg"); background-size:26px auto; }
.home-features .cta-title-icon2 { background-image:url("../img/svg/cta-title-icon2.svg"); background-size:20px auto; }
.home-features .cta-title-icon3 { background-image:url("../img/svg/cta-title-icon3.svg"); background-size:26px auto; }
@media (min-width:420px) {
}
@media (min-width:768px) {
}
@media (min-width:992px) {	
	.home-features .cta-left {
		display:inline-block;
		vertical-align:middle;
		width:58%; 
		position:relative;
	}
	.home-features .cta-right {
		display:inline-block;
		vertical-align:middle;
		width:40%; 
		padding:0 40px;
	}
	.home-features .cta-right dt { 
		min-height:32px;
	}
	.home-features .cta-title span,
	.home-features .cta-logo span {
		padding:30px;
	}
}
@media (min-width:1200px) {	
	.home-features .cta-right { 
		padding:0 60px;
	}
	.home-features .cta-right dl { 	
		margin:30px 0; 
	}
	.home-features .cta-right dt { 
		font-size:1.5rem;
	}
	.home-features .cta-right dd { 
		font-size:1.2rem;
	}
	.home-features .cta-title span {
		font-size:1.5rem;
	}
	.home-features .cta-logo span {
		font-size:1.5rem;
	}
}
*/



/* 
 home-banner
*/
.home-banner { }
.home-banner .bannerBox { 
	margin-left:-1%;
}
.home-banner .banner_list { 
	position:relative; 
	float:left;
	width:19%; 
	margin-left:1%;
	
}
.home-banner .banner_list a { display:block; font-size:1.3333rem; }
.home-banner .banner_list h3 {
	position:absolute;
	bottom:20px;
	font-size:1.40rem;
	font-weight:600;
	left:0;
	z-index:1;
	display:block;
	width:100%;
	opacity:1;
}
.home-banner .banner_list span {
	position:absolute;
	bottom:-30px;
	left:0;
	z-index:1;
	display:block;
	width:100%;
	margin:0;
	padding:0 5px;
	font-size:1rem; 
	word-break:keep-all;
	-webkit-transition:.3s ease-in-out;
	transition:.3s ease-in-out;
	opacity:0;
}
.home-banner .banner_list:hover h3 { 
	opacity:0;
}
.home-banner .banner_list:hover span {
	bottom:0px;
	opacity:1;
}
.home-banner .banner_list figure {
	width:100%;
	height:auto;
	overflow:hidden;
	background: #fff;
}
.home-banner .banner_list figure img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.home-banner .banner_list:hover figure img {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}
@media (max-width:880px) { 
	.home-banner .banner_list { 
		width:49%;
		margin-bottom:1%;
	}
	.home-banner .banner_list h3 {
		bottom:10px;
		font-size:1rem;
	}
	.home-banner .banner_list span {
		bottom:-20px;
	}
}








/* 메인 카드 박스 */
.main-item-box > div { padding-bottom:40px; }
.main-item-box .card {
	padding:1.5rem 1.25rem;
	-webkit-box-shadow:0 3px 9px -1px rgba(0,0,0,0.05);
	-moz-box-shadow:0 3px 9px -1px rgba(0,0,0,0.05);
	box-shadow:0 3px 9px -1px rgba(0,0,0,0.05);
}
.main-item-box .card-body {
	position:relative;
}
.main-item-box .card-link {
	position:relative;
	display:block;
	overflow:hidden;
}
.main-item-box .card-link::before {
	content:'';
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	border:2px solid transparent;
	-webkit-transition:border 0.2s ease-in-out;
	-moz-transition:border 0.2s ease-in-out;
	-o-transition:border 0.2s ease-in-out;
	transition:border 0.2s ease-in-out;
}
.main-item-box .card-link img { 
    -webkit-transition:0.3s ease-in-out;
    -moz-transition:0.3s ease-in-out;
    -o-transition:0.3s ease-in-out;
    transition:0.3s ease-in-out;
	-moz-transform:scale(1);
    -webkit-transform:scale(1);
    -o-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1);
}
.main-item-box .card-link:hover img { 
	-moz-transform:scale(1.05);
    -webkit-transform:scale(1.05);
    -ms-transform:scale(1.05);
    -o-transform:scale(1.05);
    transform:scale(1.05);
}
.main-item-box .card-title {
	letter-spacing:0.01em;
	line-height:1.3333;
}
.main-item-box .card-text {
	letter-spacing:-0.01em;
	word-break:keep-all;
	font-size:1rem;
}
.main-item-box .card-title + .card-text {
	padding-top:0.75rem;
}
.main-item-box .card-link:hover::before {
	/* border-color:#ed1c24; */
}

/* 화살표, 버튼 */
.main-item-box .owl-carousel .owl-dots {
    position:absolute;
	bottom:-40px;
    left:0;
	right:0;
	width:100%;
	z-index:10;
	text-align:center;
	margin:0 auto; 
}
.main-item-box .owl-carousel .owl-dots .owl-dot {
    width:10px;
    height:10px;
    margin:0 6px;
    background:#888;
	-webkit-transition:0.3s ease-in-out;
    -moz-transition:0.3s ease-in-out;
    -o-transition:0.3s ease-in-out;
    transition:0.3s ease-in-out;
	border-radius:5px;
}
.main-item-box .owl-carousel .owl-dots .owl-dot.active,
.main-item-box .owl-carousel .owl-dots .owl-dot:hover {
    background:#ed1c24;
	width:40px;
}
.main-item-box .owl-carousel .owl-nav .owl-prev,
.main-item-box .owl-carousel .owl-nav .owl-next {
	position:absolute; 
	top:50%; 
	width:42px; 
	height:59px; 
	margin-top:-30px;
	z-index:11; 
	cursor:pointer;
	font-size:0;
	background-size:42px auto; 
	background-position:center; 
	background-repeat:no-repeat; 
	display:none;
}
.main-item-box .owl-carousel .owl-nav .owl-prev {
	background-image:url("../img/owl-nav-left.png"); 
	left:0; 
}
.main-item-box .owl-carousel .owl-nav .owl-next {
	background-image:url("../img/owl-nav-right.png"); 
	right:0; 
}

@media (min-width:420px) {
	.main-item-box .card-title + .card-text {
		padding-top:1rem;
	}
}
@media (max-width:768px) {
	.main-item-box .owl-carousel .owl-dots { 
		display:none;
	}
	.main-item-box .owl-carousel .owl-nav .owl-prev,
	.main-item-box .owl-carousel .owl-nav .owl-next {
		display:block;
	}
}
@media (min-width:768px) {
	.main-item-box .card {
		padding:0;
	}
	.main-item-box .card-body {
		padding:1.5rem;
	}
	.main-item-box .card-link .card-body::after {
		top:-1.5rem;
		right:0.5rem;
		width:3rem;
		height:3rem;
	}
	.main-item-box .card-link:hover .card-body::after {
		right:0;
	}
}
@media (min-width:992px) {
	.main-item-box .card {
		font-size:1.125rem;
	}
	.main-item-box .card-body {
		min-height:0;
	}
}
@media (min-width:1200px) {
	.main-item-box .card {
		font-size:1.2rem;
	}
}


/* 메인 카드 박스 썸네일 마우스 오버시 자세히 보기 */
.over-item {
  position:relative;
  -webkit-transition:all 0.35s ease-in-out;
  -moz-transition:all 0.35s ease-in-out;
  transition:all 0.35s ease-in-out;
  cursor:pointer;
}
.over-item .info {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  text-align:center;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  background:#333;
  background:rgba(0, 0, 0, 0.6);
  opacity:0;
  -webkit-transition:all 0.35s ease-in-out;
  -moz-transition:all 0.35s ease-in-out;
  transition:all 0.35s ease-in-out;
}	
.over-item .info h3 {
  visibility:hidden;
  position:relative;
  width:46px;
  height:46px;
  margin:0 auto; 
  -webkit-transition:all 0.35s ease-in-out;
  -moz-transition:all 0.35s ease-in-out;
  transition:all 0.35s ease-in-out;
}
.over-item a:hover .info {
  opacity:1;
}
.over-item a:hover h3 {
  visibility:visible;
}
.over-item.left_to_right .info h3 {
	left:100%;
	top:50%;
	margin-top:-23px;
}
.over-item.left_to_right a:hover h3 {
	left:0;
}
@media screen and (max-width:1024px) { 
	.over-item .info { background:none; }
	.over-item .info h3 { display:none; }
}




/*
 *  home-member
*/
.home-member { 
	background-color:#f7f7f7;
	background-image:url("../img/bg_member.png"); 
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
	background-attachment:fixed; 
}



/*
 *  home-program
*/





/*
 *  home-call
.home-callBox .home-sec__title {
	position:relative;
	padding-left:3.5rem;
	font-size:1.75rem;
	font-weight:700;
	margin-bottom:1rem;
}
.home-callBox .home-sec__title::before {
	content:'';
	position:absolute;
	left:0;
	top:50%;
	width:2.5rem;
	height:1px;
	margin-top:-0.5px;
	background-color:#222;
}
.home-callBox .home-sec__body {
	font-size:1rem;
	font-weight:300;
}
.home-callBox .home-sec__body .num {
	font-size:1.3333rem;
}
@media (max-width:767px) {
	.home-callBox .home-sec + .home-sec {
		margin-top:-1rem;
		padding-top:0;
	}
}
@media (min-width:768px) {
}
@media (min-width:992px) {
	.home-callBox .home-sec__title,
	.home-callBox .home-sec__body {
		display:inline-block; 
		vertical-align:middle;
	}
	.home-callBox .home-sec__body {
		padding-left:40px; 
	}
}
@media (min-width:1280px) {
}
*/






/*
 * home-promote
 */
.home-promote {
	text-align:center;
}
.home-promote__intro {
	padding-bottom:2.5rem;
}
.home-promote__intro .sec-text {
	font-size:1rem;
	font-weight:300;
	letter-spacing:-0.02em;
	line-height:1.6;
}
.home-promote__intro .home-sec__title {
	letter-spacing:-0.02em;
}
.home-promote__intro .home-sec__subtitle {
	font-size:1.0875rem;
}
.home-promote__intro .sec-media-links {
	margin-top:1rem;
}
.home-promote__intro .sec-media-links .btn {
	min-width:9rem;
	height:auto;
	padding:0.75rem 1rem;
	margin:2px 2px;
	font-size:1rem;
	font-weight:300;
	line-height:1.5;
	text-align:left;
}
.home-promote__media {
}
.home-promote__media-video {
	max-width:30rem;
	margin:-2.5rem auto 1.5rem;
}
@media (max-width:480px) {
	.home-promote__intro .sec-media-links .btn {
		min-width:0;
		padding:0.5rem;
		font-size:0.85rem;
	}
	.home-promote__intro .sec-media-links .btn.btn-arrow::after {
		background:none;
	}
}
@media (min-width:768px)  {
}
@media (min-width:992px)  {
}
@media (min-width:1200px) {
	.home-promote {
		text-align:left;
	}
	.home-promote__intro { 
		display:inline-block; 
		vertical-align:middle;
		padding-top:0;
		width:50%;
	}
	.home-promote__intro .sec-media-links {
		margin-top:2rem;
	}
	.home-promote__intro .sec-media-links .btn {
		min-width:11rem;
	}	
	.home-promote__media { 
		display:inline-block;     
		vertical-align:middle;
		width:48%;
		max-width:600px; 
		overflow:hidden;
	}
	.home-promote__media-video {
		width:100%;
		max-width:40rem;
		margin:0 auto;
		float:right;
	}
	.home-promote__intro .home-sec__subtitle,
	.home-promote__intro .sec-text {
		font-size:1.3333rem;
	}
	.home-promote__intro .sec-text {
		letter-spacing:-0.04em;
	}
	.home-promote__intro .home-sec__subtitle {
		line-height:2.5;
	}
	.home-promote__media-links .btn {
		padding:0.75rem 1rem;
		font-size:1.0666rem;
	}

}






/*
 *  home-media
*/
.home-media { }
.home-media .card-info {
	position:relative;
}
.home-media .card-body {
}
.home-media .card-text {
	padding-right:56px;
}



/*
 * home-sponsors
*/
.sponsor-list { 
	max-width:1000px;
	margin:0 auto; 
}
.sponsor-list.owl-carousel .owl-stage {
	text-align:center;
	margin:0 auto; 
	font-size:0;
}
.sponsor-list.owl-carousel .owl-item {
	float:none;
	display:inline-block; 
	zoom:1; 
	*display:inline;
}
.sponsor-list li { }
.sponsor-list li a {
	overflow:hidden;
	display:block;
}
.sponsor-list li img {
	width:100%;
	max-width:140px;
	height:auto;
	margin:0 auto; 
}
.sponsor-list .owl-nav { 
	display:none; 
}
.sponsor-list .owl-dots {
	position:absolute;
	bottom:-2rem;
	left:0;
	width:100%;
	height:8px;
	font-size:0;
	text-align:center;
}
.sponsor-list .owl-dots .owl-dot {
	opacity:0.3;
	display:inline-block;
	width:8px;
	height:8px;
	background-color:#222;
	border-radius:4px;
	-webkit-transition:opacity 0.2s ease-in-out;
	-moz-transition:opacity 0.2s ease-in-out;
	-o-transition:opacity 0.2s ease-in-out;
	transition:opacity 0.2s ease-in-out;
}
.sponsor-list .owl-dots .owl-dot + .owl-dot {
	margin-left:0.5rem;
}
.sponsor-list .owl-dots .owl-dot.active {
	opacity:1;
}


.home-sec.home-sponsors.spons_test .container .sponsor-list .item{width:50%; float:left;}
.home-sec.home-sponsors.spons_test .container .sponsor-list .item img{display:block;}






@media (min-width:768px) {
	
	.home-sec.home-sponsors.spons_test .container .sponsor-list .item{width:32%; float:left; margin-right:2%; margin-bottom:2%;}
	.home-sec.home-sponsors.spons_test .container .sponsor-list .item:nth-child(3n){margin-right:0px;}

}
@media (min-width:992px) { }
@media (min-width:1024px) {
	.home-sec.home-sponsors.spons_test .container .home-sec__header .text-center{margin-bottom:35px;}
	.home-sec.home-sponsors.spons_test .container .sponsor-list .item{width:15%; float:left; margin-right:2%; margin-bottom:2%;}
	.home-sec.home-sponsors.spons_test .container .sponsor-list .item:nth-child(3n){margin-right:2%;}
	.home-sec.home-sponsors.spons_test .container .sponsor-list .item:nth-child(6n){margin-right:0px;}
	.home-sec.home-sponsors.spons_test .container .sponsor-list{max-width:1280px;}

}

@media (min-width:1200px) { }



/* home-awards */

.home-awards {
	width:100%;
	background-image:url("../img/awards_bg.jpg"); 
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
	padding-top:0;
	padding-bottom:0;
}
.home-awards .container {
	max-width:1280px;
	padding-right:0;
	padding-left:0;
}
.home-awards .container .home_awards_l_wrap{
	width:50%;
	height:700px;
	float:left;
}
.home-awards .container .home_awards_l_wrap .home_awards_tit{
	font-size:6em;
	line-height:1em;
	color:#fff;
	font-weight:500;
	padding-top:30%;
}
.home-awards .container .home_awards_l_wrap .home_awards_tit>span{
	content:"";
	width:5px;
	height:270px;
	background:#e21c19;
	float:left;
	margin-right:10px;
}
.home-awards .container .home_awards_l_wrap p{
	color:#fff;
	font-size:1.2em;
	margin-top:20px;
	font-weight:100;
}
.home-awards .container .home_awards_r_wrap{
	width:50%;
	height:700px;
	float:right
}
.home-awards .container .home_awards_r{
	margin-left:50px;
}
.home-awards .container .home_awards_r_wrap .home_awards_subtit{
	font-size:2.45em;
	color:#fff;
	padding-top:35%;
	word-break:keep-all;
}
.home-awards .container .home_awards_r_wrap .home_awards_subtit .redpoint{
	color:#e21c19;
	letter-spacing:-1.5px;
}
.home-awards .container .home_awards_r_wrap p{
	font-size:1.2em;
	color:#ccc;
	margin-top:20px;
	word-break:keep-all;
}
.home-awards .container .home_awards_r_wrap .home_awards_icon{
	width:100%;
	height:75px;
	margin-top:50px;
}
.home-awards .container .home_awards_r_wrap .home_awards_icon>div{
	float:left;
	width:75px;
	height:75px;
	transition:0.3s;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
}
.home-awards .container .home_awards_r_wrap .home_awards_icon>div>a{
	width:70px;
	height:70px;
	display:block;
}
.home-awards .container .home_awards_r_wrap .home_awards_icon .icon_1{
	background-image:url("../img/awards_i_1.png");
}
.home-awards .container .home_awards_r_wrap .home_awards_icon .icon_1:hover{
	background-image:url("../img/awards_i_1_ov.png");
}
.home-awards .container .home_awards_r_wrap .home_awards_icon .icon_2{
	margin-left:10px;
	background-image:url("../img/awards_i_2.png");
}
.home-awards .container .home_awards_r_wrap .home_awards_icon .icon_2:hover{
	background-image:url("../img/awards_i_2_ov.png");
}
.home-awards .container .home_awards_r_wrap .home_awards_icon .icon_3{
	margin-left:10px;
	background-image:url("../img/awards_i_3.png");
}
.home-awards .container .home_awards_r_wrap .home_awards_icon .icon_3:hover{
	background-image:url("../img/awards_i_3_ov.png");
}
.home-awards .container .home_awards_r_wrap .home_awards_icon .icon_4{
	margin-left:10px;
	background-image:url("../img/awards_i_y.png");
	
}
.home-awards .container .home_awards_r_wrap .home_awards_icon .icon_4:hover{
	background-image:url("../img/awards_i_y_2_ov.png");
}
.home-awards .container .home_awards_r_wrap .home_awards_icon .icon_5{
	margin-left:10px;
	background-image:url("../img/awards_i_5.png");
}
.home-awards .container .home_awards_r_wrap .home_awards_icon .icon_5:hover{
	background-image:url("../img/awards_i_5_ov.png");
}
.home-awards .container .home_awards_r_wrap .home_awards_icon .icon_6{
	margin-left:10px;
	background-image:url("../img/awards_i_6.png");
}
.home-awards .container .home_awards_r_wrap .home_awards_icon .icon_6:hover{
	background-image:url("../img/awards_i_6_ov.png");
}



/*팝업*/

        /* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index:99999; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow:hidden; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.1); /* Black w/ opacity */
			 text-align: center;
			
			
        }

    
	/* 팝업 */
        /* Modal Content/Box */
        .modal-content2 {
           width:100%;
    height:100%;
    position:relative;
	background: rgba(0,0,0,0.8);
        }
	.modal-content2 .pop_content{
	/*width:520px;*/
	width:1500px;
    height:auto;
    position:absolute;
    left:36%;
    /* top:42%; */
    /*margin-left:-260px;*/
	margin-left:-485px;
    /* margin-top:-334px; */}
		
		.modal-content2 p{
	                        }
		.modal-content2 p img{
			
			width:100%;
	text-align:center;
	border-radius:20px;}
	
.modal-content2 p  {position:relative; display:block; width:100%; height:100%;}
.modal-content2 p a{ display:block; width:100%; height:100%; position:absolute; top:0; left:0 }
.pop_form{width:100%;}
 
/*.pop_btn{width:50%; cursor:pointer;text-align: center; padding-top: 20px; float:left; color:#fff; font-weight:bold;}*/
.pop_btn{width:40px; height:40px; line-height:42px; border:1px solid #e8e8e8; border-radius:50%; cursor:pointer;text-align: center; color:#fff; position:absolute; bottom:-75px; left:50%; transform:translateX(-50%);}
.pop_btn span {font-size: 14pt;}
.pop_btn span a{font-size: 14pt; color:#fff; font-weight:bold; text-align: center; }


@media (max-width: 1024px) {
.main__client ul li	{ padding: 10px 10px; }
}

@media (max-width: 957px) { 
	/* 팝업 */
	/*.modal-content2 .pop_content{ width:400px; height:400px; margin-top:-270px; margin-left:-200px;}*/
	.modal-content2 .pop_content{ width:90%; height:auto; margin-top:-50%; margin-left:-30%;}
	.modal-content2 p img{width:100%; }
	.pop_btn{/* position: unset; */ margin: 10px auto 0;}
	
	/* 팝업 */
	

}


 
 /*팝업*/







@media (max-width:480px) {
	.home-awards .container .home_awards_l_wrap .home_awards_tit{
		font-size:3.5em;
		text-align:center;
		line-height:1em;
		color:#fff;
		font-weight:500;
		padding-top:35%;
	}
	.home-awards .container .home_awards_l_wrap p{
		display:none;
	}
	.home-awards .container .home_awards_r_wrap .home_awards_subtit{
		font-size:2rem;
		padding-top:15%;
		padding-left:1rem;
		padding-right:1rem;
	}
	.home-awards .container .home_awards_r_wrap .home_awards_subtit>span:before{
		content:""; clear:both; display:block;
	}
	.home-awards .container .home_awards_r_wrap p {
		display:none;
	}
	.home-awards .container .home_awards_r_wrap .home_awards_icon{
		width:16rem;
		margin:30px auto 0;
	}
	.home-awards .container .home_awards_r_wrap .home_awards_icon .icon_4{
		margin-left:0;
		margin-top:10px;
	}
	.home-awards .container .home_awards_r_wrap .home_awards_icon .icon_5{
		margin-top:10px;
	}
	.home-awards .container .home_awards_r_wrap .home_awards_icon .icon_6{
		margin-top:10px;
	}
}

@media (max-width:768px) {
	.home-awards .container .home_awards_r_wrap .home_awards_icon>div{
		width:70px;
		height:70px;
	}
}
@media (min-width:992px) {
}
@media (max-width:1024px) and (min-width:480px) {
	.home-awards .container .home_awards_l_wrap .home_awards_tit{
		font-size:3.5em;
		text-align:center;
		line-height:1em;
		color:#fff;
		font-weight:500;
		padding-top:100px;
	}
	.home-awards .container .home_awards_r_wrap .home_awards_icon{
		width:35rem;
		height:75px;
		margin-top:0;
		margin:30px auto 0;
	}
	.home-awards .container .home_awards_r_wrap .home_awards_subtit{
		font-size:2rem;
		color:#fff;
		padding-top:10%;
		padding-left:1rem;
		padding-right:1rem;
	}
	.home-awards .container .home_awards_r_wrap p{
		padding-left:1rem;
		padding-right:1rem;
	}
}
@media (max-width:1024px) {
	.home-awards {
		width:100%;
		background:#070e2a;
	}
	.home-awards .container .home_awards_l_wrap{
		width:100%;
		height:400px;
		float:none;
		background-image:url("../img/awards_left.jpg"); 
		background-repeat:no-repeat;
		background-size:cover;
		background-position:center center;
	}
	.home-awards .container .home_awards_r_wrap{
		width:100%;
		height:450px;
		float:none;
		background-image:url("../img/awards_right.jpg"); 
		background-repeat:no-repeat;
		background-size:cover;
		background-position:center center;
	}
	.home-awards .container .home_awards_l_wrap .home_awards_tit>span{
		display:none;
	}
	.home-awards .container .home_awards_l_wrap p{
		text-align:center;
	}
	.home-awards .container .home_awards_r_wrap{
		text-align:center;
	}
	.home-awards .container .home_awards_r{
		margin-left:0;
	}

	

}
@media (max-width:1300px) and (min-width:1024px) {
	.home-awards .container .home_awards_r_wrap .home_awards_subtit{
		font-size:2em;
	}
	.home-awards .container .home_awards_r_wrap .home_awards_icon>div{
		width:60px;
		height:60px;
	}
}










/***************** 버튼 *****************/
.btn-sm {
	padding:4px 10px !important;
}
a.btn01,
a.btn02,
button.btn01,
button.btn02,
a.btn_cancel,
button.btn_cancel,
a.btn_frmline,
button.btn_frmline { display:inline-block; }

a.btn01,
button.btn01 { background:#fff; border-color:#a7a7b1; color:#68686e; }
a.btn01:focus,  
a.btn01:hover { border-color:#333; color:#333; }

a.btn02.
button.btn02 { background:#393939; color:#fff; } 
a.btn02:focus, 
.btn02:hover { color:#fff; }

a.btn_cancel,
button.btn_cancel { background:#fff; border-color:#a7a7b1; color:#68686e; }
.btn_cancel:hover { border-color:#333; color:#333; } 

a.btn_frmline,
button.btn_frmline { background:#fff; border-color:#a7a7b1; color:#68686e; } /* 우편번호검색버튼 등 */

.btn_confirm { text-align:right; border:0; } /* 서식단계 진행 */

.btn_submit { cursor:pointer; background:#393939; color:#fff; border:0; }
.btn_submit:hover { color:#fff; }

a.btn_b01,
.btn_b01,
a.btn_b02,
.btn_b02,
a.btn_b03,
.btn_b03,
a.btn_admin, 
.btn_admin { display:inline-block; }

a.btn_b01,
.btn_b01 { background:#89e7e0; color:#333; font-weight: 400 !important; }
a.btn_b01:hover, 
.btn_b01:hover { background:#cea1fa; color:#fff; }

a.btn_b02,
.btn_b02 { background:#393939; border-color:#393939; color:#fff; } /* 글쓰기 */ 
a.btn_b02:hover, 
.btn_b02:hover { color:#fff; }

a.btn_b03, 
.btn_b03 { background:#bbb; color:#fff; border-radius:15px !important; }
a.btn_b03:hover,
.btn_b03:hover { background:#aaa; color:#fff; }

a.btn_b04, 
.btn_b04 { }
a.btn_b04:hover,
.btn_b04:hover { }

a.btn_admin,
.btn_admin { background:#bbb; color:#fff; }
a.btn_admin:hover,
.btn_admin:hover { color:#fff; }

/* 컬러 */
.color_1 { color:#169dd6; }
.color_2 { color:#14d53d; }
.color_3 { color:#3814ff; }
.color_4 { color:#7520c5; }

/* 기타 */
.table-responsive { border:0; } 












/* #################################################################################################### 
	서브_기존 소스
###################################################################################################### */

/* 게시물 선택복사 선택이동 */
#copymove { }
#copymove  .win_desc { text-align:center; display:block}
#copymove  .tbl_wrap { margin:20px }
#copymove  .win_btn { padding:0 20px 20px}
.copymove_current { float:right; background:#ff3061; padding:5px; color:#fff; border-radius:3px}
.copymove_currentbg { background:#f4f4f4}

/* 화면낭독기 사용자용 */
#hd_login_msg { position:absolute; top:0; left:0; font-size:0; line-height:0; overflow:hidden}
.msg_sound_only, .sound_only { display:inline-block !important; position:absolute; top:0; left:0; margin:0 !important; padding:0 !important; font-size:0; line-height:0; border:0 !important; overflow:hidden !important}

/* 본문 바로가기 */
#skip_to_container a { z-index:122200; position:absolute; top:0; left:0; width:1px; height:1px; font-size:0; line-height:0; overflow:hidden}
#skip_to_container a:focus, #skip_to_container a:active { width:100%; height:75px; background:#21272e; color:#fff; font-size:2em; font-weight:bold; text-align:center; text-decoration:none; line-height:3.3em}

/* ie6 이미지 너비 지정 */
.img_fix { width:100%; height:auto}

/* 캡챠 자동등록(입력)방지 기본 -pc */
#captcha { display:inline-block; position:relative}
#captcha legend { position:absolute; margin:0; padding:0; font-size:0; line-height:0; text-indent:-9999em; overflow:hidden; }
#captcha #captcha_img {; height:40px; border:1px solid #898989; vertical-align:top; padding:0; margin:0}
#captcha #captcha_mp3 {; margin:0; padding:0; width:40px; height:40px; border:0; background:transparent; vertical-align:middle; overflow:hidden; cursor:pointer; background:url('../../../img/captcha2.png') no-repeat; text-indent:-999px; border-radius:3px}
#captcha #captcha_reload { margin:0; padding:0; width:40px; height:40px; border:0; background:transparent; vertical-align:middle; overflow:hidden; cursor:pointer; background:url('../../../img/captcha2.png') no-repeat  0 -40px; text-indent:-999px; border-radius:3px}
#captcha #captcha_key { margin:0 0 0 3px; padding:0 5px; width:90px; height:40px; border:1px solid #ccc; background:#fff; font-size:1.333em; font-weight:bold; text-align:center; border-radius:3px; vertical-align:top}
#captcha #captcha_info { display:block; margin:5px 0 0; font-size:0.95em; letter-spacing:-0.1em}

/* 캡챠 자동등록(입력)방지 기본 - mobile */
#captcha.m_captcha audio { display:block; margin:0 0 5px; width:187px}
#captcha.m_captcha #captcha_img { width:160px; height:60px; border:1px solid #e9e9e9; margin-bottom:3px; margin-top:5px; display:block; }
#captcha.m_captcha #captcha_reload { position:static; margin:0; padding:0; width:40px; height:40px; border:0; background:transparent; vertical-align:middle; overflow:hidden; cursor:pointer; background:url('../../../img/captcha2.png') no-repeat  0 -40px; text-indent:-999px}
#captcha.m_captcha #captcha_reload span { display:none; }
#captcha.m_captcha #captcha_key { margin:0; padding:0 5px; width:115px; height:29px; border:1px solid #b8c9c2; background:#f7f7f7; font-size:1.333em; font-weight:bold; text-align:center; line-height:29px; margin-left:3px}
#captcha.m_captcha #captcha_info { display:block; margin:5px 0 0; font-size:0.95em; letter-spacing:-0.1em}
#captcha.m_captcha #captcha_mp3 { width:31px; height:31px; background:url('../../../img/captcha2.png') no-repeat 0 0;   vertical-align:top; overflow:hidden; cursor:pointer; text-indent:-9999px; border:none}

/* ckeditor 단축키 */
.cke_sc { margin:0 0 5px; text-align:right}
.btn_cke_sc { display:inline-block; padding:0 10px; height:23px; border:1px solid #ccc; background:#fafafa; color:#222; text-decoration:none; line-height:1.9em; vertical-align:middle; cursor:pointer}
.cke_sc_def { margin:0 0 5px; padding:10px; border:1px solid #ccc; background:#f7f7f7; text-align:center}
.cke_sc_def dl { margin:0 0 5px; text-align:left; zoom:1}
.cke_sc_def dl:after { display:block; visibility:hidden; clear:both; content:""}
.cke_sc_def dt, .cke_sc_def dd { float:left; margin:0; padding:5px 0; border-bottom:1px solid #e9e9e9}
.cke_sc_def dt { width:20%; font-weight:bold}
.cke_sc_def dd { width:30%}

/* ckeditor 태그 기본값 */
#bo_v_con ul { display:block; list-style-type:disc; margin-top:1em; margin-bottom:1em; margin-left:0; margin-right:0; padding-left:40px; }
#bo_v_con ol { display:block; list-style-type:decimal; margin-top:1em; margin-bottom:1em; margin-left:0; margin-right:0; padding-left:40px; }
#bo_v_con li { display:list-item; }

/* 기본테이블 */
.tbl_wrap table { width:100%; border-collapse:collapse; border-spacing:0 5px; border:1px solid #ebebeb; border-left:0; border-right:0; } 
.tbl_wrap caption { padding:10px 0; font-weight:bold; text-align:left}
.tbl_head01 { margin:0 0 10px; }
.tbl_head01 caption { padding:0; font-size:0; line-height:0; overflow:hidden}
.tbl_head01 thead th { padding:16px 0; font-weight:normal; text-align:center; /* height:40px; */ }
.tbl_head01 thead th input { vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head01 tfoot th, 
.tbl_head01 tfoot td { padding:14px 0; border-top:1px solid #c1d1d5; border-bottom:1px solid #c1d1d5; background:#d7e0e2; text-align:center}
.tbl_head01 tbody th { padding:8px 0; border-bottom:1px solid #ebebeb; }
.tbl_head01 td { background:#fff; padding:14px 5px; border-top:1px solid #ebebeb; line-height:1.4em; word-break:break-all}
.tbl_head01 tbody tr:hover td { background:#fafafa; }
.tbl_head01 a:hover { }

.tbl_head02 { margin:0 0 10px}
.tbl_head02 caption { padding:0; font-size:0; line-height:0; overflow:hidden}
.tbl_head02 thead th { padding:5px 0; border-top:1px solid #d1dee2; border-bottom:1px solid #d1dee2; background:#e5ecef; color:#383838; font-size:0.95em; text-align:center; letter-spacing:-0.1em}
.tbl_head02 thead a { color:#383838}
.tbl_head02 thead th input { vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head02 tfoot th, .tbl_head02 tfoot td { padding:10px 0; border-top:1px solid #c1d1d5; border-bottom:1px solid #c1d1d5; background:#d7e0e2; text-align:center}
.tbl_head02 tbody th { padding:5px 0; border-top:1px solid #e9e9e9; border-bottom:1px solid #e9e9e9; background:#fff}
.tbl_head02 td { padding:5px 3px; border-top:1px solid #e9e9e9; border-bottom:1px solid #e9e9e9; background:#fff; line-height:1.4em; word-break:break-all}
.tbl_head02 a { }

/* 폼 테이블 */
.tbl_frm01 { margin:0 0 20px; }
.tbl_frm01 table { width:100%; border-collapse:collapse; border-spacing:0; }
.tbl_frm01 th { width:70px; padding:7px 13px; border:1px solid #e9e9e9; border-left:0; background:#f5f8f9; text-align:left; }
.tbl_frm01 td { padding:7px 10px; border-top:1px solid #e9e9e9; border-bottom:1px solid #e9e9e9; background:transparent; }
.wr_content textarea,
.tbl_frm01 textarea,
.form_01 textarea,
.frm_input { 
	border:1px solid #ddd; background:#fff; color:#222; vertical-align:middle; padding:5px; height:36px; line-height:36px;
	-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .03); 
	-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .03); 
	box-shadow:inset 0 1px 1px rgba(0, 0, 0, .03); 
}
.tbl_frm01 textarea { padding:2px 2px 3px; }

.full_input { width:100%}
.half_input { width:49.5%}
.tbl_frm01 textarea { width:100%; height:100px}
.tbl_frm01 a { text-decoration:none}
.tbl_frm01 .frm_file { display:block; margin-bottom:5px}
.tbl_frm01 .frm_info { display:block; padding:0 0 5px; line-height:1.4em}

/*기본 리스트*/
.list_01 li { border:1px solid #dbdbdb; background:#fff; border-radius:3px; margin:3px 0; padding:10px 15px; list-style:none; position:relative; }
.list_01 li:after { display:block; visibility:hidden; clear:both; content:""}
.list_01 li:hover { background:#f9f9f9}
.list_01 li.empty_li { text-align:center; padding:20px 0; color:#666}

/*폼 리스트*/
.form_01 h2 { margin:0 0 10px; font-size:1.167em}
.form_01 li { margin:10px 0}
.form_01 li:after { display:block; visibility:hidden; clear:both; content:""}
.form_01 li .right_input { float:right}
.form_01 textarea { height:100px; width:100%}
.form_01 .frm_label { display:inline-block; width:130px}

/* 자료 없는 목록 */
.empty_table { padding:50px 0 !important; text-align:center}
.empty_list { padding:20px 0 !important; color:#666; text-align:center}

/* 필수입력 */
.required, textarea.required { background-image:url('../img/require.png')  !important; background-repeat:no-repeat   !important; background-position:right top  !important; }

/* 테이블 항목별 정의 */
.td_board { width:80px; text-align:center}
.td_category { width:80px; text-align:center}
.td_chk { width:30px; text-align:center}
.td_date { width:60px; text-align:center}
.td_datetime { width:110px; text-align:center}
.td_group { width:80px; text-align:center}
.td_mb_id { width:100px; text-align:center}
.td_mng { width:80px; text-align:center}
.td_name { width:100px; text-align:left}
.td_nick { width:100px; text-align:center}
.td_num { width:50px; text-align:center}
.td_numbig { width:80px; text-align:center}
.td_stat { width:60px; text-align:center}

.txt_active { color:#5d910b}
.txt_done { color:#e8180c}
.txt_expired { color:#ccc}
.txt_rdy { color:#8abc2a}

/* 새창 기본 스타일 */
.new_win { position:relative; }
.new_win .tbl_wrap { margin:0 20px}
.new_win #win_title { font-size:1.25em; height:50px; line-height:30px; padding:10px 20px; background:#333; color:#fff; }
.new_win #win_title .sv { font-size:0.75em; line-height:1.2em}
.new_win .win_ul { border-right:1px solid #dfe6e7; }
.new_win .win_ul:after { display:block; visibility:hidden; clear:both; content:""}
.new_win .win_ul li { float:left; background:#fff; width:33.333%; text-align:center; border:1px solid #ccc; margin-left:-1px}
.new_win .win_ul li a { display:block; padding:10px 0}
.new_win .win_ul .selected { background:#fff; border-color:#253dbe; position:relative; z-index:5}
.new_win .win_ul .selected a { color:#253dbe; font-weight:bold}
.new_win .win_desc { margin:5px 0; font-size:0.92em; color:#3598db; }
.new_win .frm_info { font-size:0.92em; color:#3598db}
.new_win .win_total { text-align:right; margin:10px 0}
.new_win .win_total span { display:inline-block; line-height:30px; font-size:0.92em; color:#4e546f; background:#ddd; padding:0 10px; border-radius:5px; }
.new_win .new_win_con { margin:20px; }
.new_win .new_win_con:after { display:block; visibility:hidden; clear:both; content:""}
.new_win .btn_confirm:after { display:block; visibility:hidden; clear:both; content:""}
.new_win .win_btn { text-align:right}
.new_win .btn_close { position:absolute; top:0; right:0; height:50px; width:50px; background:url(../img/close_btn.gif) no-repeat 50% 50%; border:0; text-indent:-999px; overflow:hidden; cursor:pointer}
.new_win .btn_submit { padding:0 20px; height:40px; font-weight:bold; font-size:1.083em; float:right}

/* 검색결과 색상 */
.sch_word { color:#00c4ac}

/* 자바스크립트 alert 대안 */
#validation_check { margin:100px auto; width:500px}
#validation_check h1 { margin-bottom:20px; font-size:1.3em}
#validation_check p { margin-bottom:20px; padding:30px 20px; border:1px solid #e9e9e9; background:#fff}

/* 사이드뷰 */
.sv_wrap { position:relative; font-weight:normal}
.sv_wrap .sv { z-index:1222; display:none; margin:5px 0 0; font-size:0.92em; background:#333; 
-webkit-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2); 
-moz-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2); 
box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2); }
.sv_wrap .sv:before { content:""; position:absolute; top:-6px; left:15px; width:0; height:0; border-style:solid; border-width:0 6px 6px 6px; border-color:transparent transparent #333 transparent; }
.sv_wrap .sv a { display:inline-block; margin:0; padding:0  10px; line-height:30px; width:100px; font-weight:normal; color:#bbb }
.sv_wrap .sv a:hover { background:#222; color:#fff}
.sv_member { color:#333}
.sv_on { display:block !important; position:absolute; top:23px; left:0px; width:auto; height:auto}
.sv_nojs .sv { display:block}

/* 페이징 */
.pg_wrap { clear:both; padding:30px 0; text-align:center; }
.pg_wrap:after { display:block; visibility:hidden; clear:both; content:""; } 
.pg { }
.pg_page, 
.pg_current { display:inline-block; vertical-align:middle; font-size:1.2em; color:#666; }
.pg_current { font-weight:normal; color:#222; border-bottom:1px solid #222; }
.pg a:focus, 
.pg a:hover { text-decoration:none; }
.pg_page { padding:0 2px; text-decoration:none; }
.pg_page:hover { }
.pg_start { text-indent:-999px; overflow:hidden; background:url('../img/btn_first.gif') no-repeat 50% 50% #fff; padding:0; width:15px; height:30px; }
.pg_prev { text-indent:-999px; overflow:hidden; background:url('../img/btn_prev.gif') no-repeat 50% 50% #fff; padding:0; width:15px; height:30px; }
.pg_end { text-indent:-999px; overflow:hidden; background:url('../img/btn_end.gif') no-repeat 50% 50% #fff; padding:0; width:15px; height:30px; }
.pg_next { text-indent:-999px; overflow:hidden; background:url('../img/btn_next.gif') no-repeat 50% 50% #fff; padding:0; width:15px; height:30px; }
.pg_start:hover,
.pg_prev:hover,
.pg_end:hover,
.pg_next:hover { }

/* cheditor 이슈 */
.cheditor-popup-window *, .cheditor-popup-window :after, .cheditor-popup-window :before { 
-webkit-box-sizing:content-box; 
-moz-box-sizing:content-box; 
box-sizing:content-box; 
}

/* Mobile화면으로 */
#device_change { display:block; margin:0.3em; padding:0.5em 0; border:1px solid #eee; border-radius:2em; background:#fff; color:#222; font-size:2em; text-decoration:none; text-align:center}

.close_menu {  display:none; }
.mobile_menu {  display:none; }



/* 주변기기 동영상 css */
.video-container{position:relative;padding-bottom:56.25%;margin-top:-30px;height:0;overflow:hidden;}
.video-container iframe,.video-container object,.video-container embed{position:absolute;top:0;left:0;width:100%;height:100%;}


/* 20210413 */

.mid_modal {
	display: none;
	z-index: 5000;
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.6);
}

.mid_modal button {
	position: absolute;
	top: 5rem;
	right: 1rem;
	background: transparent;
	border: 0;
	color: #ffffff;
	font-size: 3rem;
}

.modalBox{position: relative;
	top: 28%;
	left: 50%;
	transform: translate(-50%, -20%);
	/* background-color: #ffffff; */
	width: 90%;
	height: 88%;
	text-align: center;
	overflow-y:scroll;
	
}

.modalBox img {
	width: 100%;
}

.mid_vis_sec{cursor:pointer;}
.reference1{display:none;}

.poster_wrap{text-align:center;}
.poster_wrap h1{font-size:24px; padding-bottom:20px;}
.poster_wrap a{display:block; width:80%; margin:0 auto;}
.poster_wrap a img{width:100%;}


.mid_modal2 {
	display: none;
	z-index: 5000;
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.6);
}

.mid_modal2 button {
	position: absolute;
	top: 5rem;
	right: 1rem;
	background: transparent;
	border: 0;
	color: #ffffff;
	font-size: 3rem;
}




@media screen and (min-width:1025px){

.mid_modal button{
	right:10rem;
	top:0rem;
	font-size:5rem;
}

.mid_modal2 button{
	right:10rem;
	top:0rem;
	font-size:5rem;
}

.modalBox {
	position: relative;
	top: 20%;
	left: 50%;
	transform: translate(-50%, -20%);
	/* background-color: #ffffff; */
	width: 75%;
	height: 100%;
	text-align: center;
	overflow-y:scroll;

}

}