@charset "utf-8";

html,
body {
	font-size: 1rem;
}
body, input, textarea, select, button, table {
  font-family: 'Pretendard Variable', 'Pretendard', 'Noto Sans KR', 'Open Sans', '나눔바른고딕', NanumBarunGothic, '애플 SD 산돌고딕 Neo', 'Apple SD Gothic Neo', AppleGothic, sans-serif;
 	font-weight: normal;   
 	font-size: 1rem;
  -webkit-font-smoothing: antialiased;
}

a,
a:hover {
	color: #111;
	text-decoration: none;
}
input:focus {
  outline: none !important;
  box-shadow: none !important;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 30%, 0);
    transform: translate3d(0, 30%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 30%, 0);
    transform: translate3d(0, 30%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.kun-search .search-icon {
	position: absolute;
	right: 10px;
	top: 11px;
	z-index: 6;
}
.kun-search .search-input {
	font-size: 18px;
}


/*------------- main -------------*/
.main-visual {
	height: 100%;
}
.main-visual:after {
	display: none;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 20%;
	height: 100vh;
	background-color: #fff;
	z-index: 3;
}
.video-caption {
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 4;
}

.vertical-box .item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2rem;
	min-height: 100%;
	border-left: 1px solid rgba(255, 255, 255, .2);
	background-color: rgba(0, 0, 0, .5);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	transition: all .3s ease;
}
.vertical-box .item:hover {
	background-color: rgba(0, 0, 0, .1);
}


.line-horizontal {
	position: relative;
	padding-left: 100px;
}
.line-horizontal:before {
	content: '';
	position: absolute;
	left: 0;
	top: 10px;
	width: 80px;
	height: 1px;
	background-color: #333;
}

.rounded-box {
	border-radius: 70px 0 70px 0;
	overflow: hidden;
}
.text-back {
	position: absolute;
	left: -25%;
	bottom: -5%;
	font-size: 10rem;
	font-weight: bold;
	line-height: 1;
	letter-spacing: -.5rem;
	color: rgba(0, 0, 0, 0.03);
	white-space: nowrap;
}



.section-sambox figure {
	position: relative;
	min-height: 400px;
} 
.section-sambox figcaption {
	position: absolute;
	left: 0;top: 0;
	padding: 2rem 1.5rem;
	width: 100%;
	min-height: 400px;
	color: rgba(0, 0, 0, .7);
	background-color: #fff;
	transition: all .3s ease;		
}
.section-sambox figure figcaption h4 {
	color: #333;
}
.section-sambox figure figcaption p,
.section-sambox figure figcaption h5 {
	color: #888;
}
.section-sambox figure:hover figcaption {
	background-color: transparent;
}
.section-sambox figure:hover figcaption h4,
.section-sambox figure:hover figcaption h5,
.section-sambox figure:hover figcaption p {
	color: #fff;
}



.bg-img-cover {
	position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.bg-img-cover:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .7);
}

.Up-box {flex-wrap: wrap;}
.Up-box  .Up-item {flex: 1 1 30%;}



/*------------- sub -------------*/
.container-full:after {
    content: '';
    display: block;
    clear: both;
}
.page-section-img:after {
    content: '';
    display: block;
    clear: both;
}
.sub-header {
	position: relative;
	display: flex;
	height:400px;
	background-color:#eee;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 0;
    justify-content: center;
    align-items: center;
}
.sub-header:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .3);
}	
.sub-header h1 {
	position: relative;
}
.section-player{}
.kun-player {background-color: #181818;}
.kun-player.bg-img-cover.dark:after {
	background-color: rgba(0, 0, 0, .01);
}
/*- .inline-YTPlayer{overflow: hidden;height:50vh} --*/

.about-anseong {position: relative;
    display: flex;
    margin: 0;
    padding: 20px 0;
    flex-wrap: wrap;
    gap: 20px;}
.about-txt {line-height: 200%;word-break: keep-all;}
.about-anseong h5 {margin: 0;}
.about-anseong li {display: flex;
    flex: 1 1;
    flex-direction: column;
    gap: 20px;}

.logo-rotate {
	position: absolute;
	left: -4rem;
	bottom: -4rem;
	width: 200px;
	height: 200px;
	border-radius: 100vmax;
	display: flex;
	align-items: center;
	justify-content: center;
}
.logo-rotate .logo {
	position: absolute;
	width: 140px;
	height: 140px;
	background: url("./layouts/kun_theme/inc/html/images/logo-rotate.jpg");
	background-size: cover;
	border-radius: 100vmax;
	background-position: center;
}
.logo-rotate .txt {
	position: absolute;
	width: 100%;
	height: 100%;
	color: #000;
	font-size: 12px;
	animation: logoRotate 20s linear infinite;
}
@keyframes logoRotate {
	to {
		transform: rotate(360deg);
	}
}
.logo-rotate .txt span {
	position: absolute;
	left: 50%;
	font-size: 1.2em;
	transform-origin: 0 100px;
}

#page-tab.nav-underline .nav-item {
	position: relative;
}
#page-tab.nav-underline .nav-item:first-child:before {
	display: none;
}
#page-tab.nav-underline .nav-item:before {
	content: '';
	position: absolute;
	left: -8px;
	top: 20px;
	width: 1px;
	height: 20px;
	background-color: rgba(0, 0, 0, .2);
}
#page-tab.nav-underline .nav-link {
	font-size: 1.25rem;
	color: #444;
}

.pricing-types {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    flex-wrap: wrap;
}


.pricing-type h2 {
    font-size: 24px;
    color: #444;
    margin-bottom: 20px;
    text-align: center;
    border-bottom: 0px solid #ddd;
    padding-bottom: 10px;
}

.sub_title {
    font-size: 24px;
    color: #444;
    margin-bottom: 0px;
    text-align: left;
    border-bottom: 0px solid #ddd;
    padding-bottom: 10px;
}

/* 옵션 리스트 */
.pricing-items {
    display: flex;
    flex-direction: column;
    gap:25px;
}
.pricing-item h3, .pricing-item p {margin:0;}

/* 헤더 스타일 */
.pricing-header {
    display: flex;
    justify-content: space-around;
    padding: 10px 15px;
    font-weight: bold;
    background-color: #f9f9f9;
	border: 1px solid #ddd;
    border-radius: 8px;
    color: #666;
	font-size: 16px;
}

/* 옵션 스타일 */
.pricing-item {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 12px 15px;
    background: #fff;
    border: 0px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.pricing-item h3 {
    font-size: 16px;
    color: #444;
}

.pricing-item .price {
    font-size: 16px;
    font-weight: bold;
    color: #666;
}

.owl-funeral .ejang-step {position:relative;display:flex;width:12rem;height:12rem;text-align:center;margin: 0 auto;background:#ddd;border-radius:100%;flex-direction:column;justify-content:center;gap:16px;}
.owl-funeral .ejang-step span {font-size: 0.8em;}
.owl-funeral .ejang-step i {display:inline-block;color: #7e8082;font-size:2.5em;font-weight: 600;}
.owl-funeral .ejang-step strong {font-size:18px;color:#444;}
.owl-funeral .ejang-step:before,
.owl-funeral .ejang-step:after {content:'';position:absolute;top:50%;right:-30px;transform:translateY(-1px);}
.owl-funeral .ejang-step:before {width:50px;height:2px;background-color:#999;}
.owl-funeral .ejang-step:after {right:-35px;width:7px;height: 7px;border-right: 2px solid #777;border-bottom: 2px solid #777;transform: rotate(-45deg) translateY(-5px);}
.owl-funeral .end::before,
.owl-funeral .end::after {display: none !important;}
.owl-funeral.owl-theme .owl-nav.disabled+.owl-dots {margin-top:5%;}
.owl-funeral.owl-theme .owl-dots .owl-dot span {margin: 5px 5px;width: 6px;	height: 6px;transition: all .3s ease;}
.owl-funeral.owl-theme .owl-dots .owl-dot.active span {width: 20px;background-color:#4ab996;}
.ejang-wrap {gap:25px;}
.ejang-stage {display:flex;flex-direction:column;align-items:center;flex: 1 1 40%;gap:20px;}
.ejang-stage::after {content:'';display:block;clear:both;}
.ejang-stage h5 {
    display:block;
    background-color:#444;
    padding:8px 10%;
    min-width: 50%;
	font-size:1rem;
    color: rgb(255, 255, 255);
	text-align: center;
    letter-spacing: -1px;font-weight: 500;
    border-radius: 25px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    -khtml-border-radius: 25px;}
.page-process .step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	width: 192px;
	height: 192px;
	background-color: #F0F0F0;
}
.page-process .step:before,
.page-process .step:after {
	content: '';
	position: absolute;
	top: 50%;
	right: -15px;
	transform: translateY(-1px);
}
.page-process .step:before {
	width: 50px;
	height: 2px;
	background-color: #999;
}
.page-process .step:after {
	right: -17px;
	width: 7px;
	height: 7px;
	border-right: 2px solid #777;
	border-bottom: 2px solid #777;
	transform: rotate(-45deg) translateY(-5px);
}
.page-process .step.end:before,
.page-process .step.end:after {
	display: none;
}
.page-process .step>span {
	margin-bottom: 5px;
	font-size: 12px;
	font-weight: bold;
	color: #aaa;
}


.list-process {
	margin: 0;
	list-style: none;
}
.list-process li {
	position: relative;
	padding-left: 40px;
	margin-bottom: 40px;
}
.list-process li:before,
.list-process li:after {
	content: '';
	position: absolute;
}
.list-process li:before {
	left: 0;
	top: 8px;
	width: 11px;
	height: 11px;
	background-color: #111;
	border-radius: 50%;
}
.list-process li:after {
	left: 5px;
	top: 10px;
	width: 1px;
	height: calc(100% + 40px);
	background-color: #ddd;
	z-index: -1;
}
.list-process li:last-child:after {
	display: none;
}	
.list-process li p {
	color: #777;
}

.table-process {
	border-top: 1px solid #333;
}
.table-process th, 
.table-process td {
	padding: 1.5rem 1rem;
}
.table-process th {
	text-align: center;
	background-color: #f8f8f8;
}
.table-process td {
	text-align: left;
	color: #777;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .pricing-type {
        flex: 1 1 calc(50% - 20px);
    }
}

@media (max-width: 480px) {
    .pricing-type {
        flex: 1 1 100%;
    }
}

.company_about {margin:0 auto; }
.company_about .group_area{position:relative;z-index:1;margin:0 auto;} 
.company_about .group_area .group_tit {position:relative;float:left;width:30%;font-size:2em;text-align:center;line-height:1.4em;letter-spacing:-0.05em;padding-bottom:230px;}
.company_about .group_area .group_tit:after {content:''; position:absolute; width:1px; height:150px; background-color:#aaa; bottom:40px; left:50%; }
.company_about .group_area .group_txt { position:relative; float:right; width:65%; height:auto;}
.company_about .group_area .group_txt h4 {font-size:1.5em;  line-height:1.55em;  color: #000; }
.company_about .group_area .group_txt p {margin-top:20px; line-height:1.5em; color: #333; word-break: keep-all;}
/*------------- footer -------------*/
footer {
	background: rgb(44,44,44);
	background: radial-gradient(circle, rgba(44,44,44,1) 0%, rgba(0,0,0,1) 100%);
}
footer .footer-menu .nav a {
	position: relative;
	font-size: .9rem;
	color: #111;
}
footer .footer-menu .nav a:before {
	content: '';
	position: absolute;
	left: 0;
	top: 12px;
	width: 1px;
	height: 12px;
	border-left: 1px solid rgba(255, 255, 255, .3);
}
footer .footer-menu .nav li:first-child a:before {
	display: none;
}
footer .footer-menu .nav li:first-child a {
	padding-left: 0;
}
footer .footer-content {
	font-size: .9rem;
    color: #999;
    line-height: 1.6;
}

footer .copyright {
	font-size: .8rem;
	color: rgba(0, 0, 0, .4);
}


#scollTop {
    display: none;
    position: fixed;
    right: 2rem;
    bottom: 4rem;
	width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    box-shadow: 0 3px 5px rgba(0,0,0,.2);
    z-index: 99;
}
#scollTop .scroll-icon {
    width: 20px;
    height: 20px;
    text-align: center;
    color: #fff;
}


/*------------- media query -------------*/




@media(min-width: 992px) {

	.header .logo .logo-dark,
	.sticked .header .logo .logo-light {
		display: none;
	}
	.header .logo .logo-light,
	.sticked .header .logo .logo-dark {
		display: block;
	}
	.vertical-box .item {
		min-height: 900px;
	}

	.kun-player {padding-bottom: 56% !important;}

}
@media (max-width:991.98px) {
	.bg-img-height {
		height: 500px;
	}
	.funeral_center .box-desc {
	flex-direction: row;
    align-items: center;
	 justify-content: space-between;
	 }
	 .about-anseong li {flex: 1 1 40%;}
}


@media(max-width: 991px) {
	.logo-light {
		display: none;
	}
	.vertical-box .item {
		border: 0;
		border-top: 1px solid rgba(255, 255, 255, .2);
	}

	.company_about .group_area .group_tit { width:100%; font-size:1.6em; padding-bottom:50px; }
	.company_about .group_area .group_tit:after {height:40px; }
	.company_about .group_area .group_txt { width:100%; }
	.company_about .group_area .group_txt h4 {margin-top:10px; font-size:1.3em;}
}
@media(max-width: 767px) {
	.main-visual {height:400px;}
	.container {
		padding-left: 20px;
		padding-right: 20px;
	}
	footer .footer-content {
		font-size: .8rem;
	}
	.inline-YTPlayer {
        height: unset;
	}
}
@media(max-width: 576px) {
		.section-charge .d-flex {flex-direction: column;font-size: 1em;}
		#page-tab.nav-underline .nav-link {font-size: 0.9rem;}
		#page-tab.nav-underline .nav-item:before {top: 10px;}
		.table-process th {min-width: 62px;white-space: nowrap;}
		footer .footer-menu .nav a {font-size: 14px;}
}