@charset "utf-8";

/*-------------------------------------------------
Author : WB,Seo
Create date : 2021. 07. 22.
-------------------------------------------------*/

/* ================================================ MOBILE */
/* ========== VISUAL */
.visual-wrap article {
    position: relative;
    height: 600px;
    background: url(/img/m_visual_1.jpg) no-repeat center/cover;
}
.visual-wrap article .txt-area {	
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    color: #fff;
}
.visual-wrap article .txt-area h4 {
    font-size: 3.2rem;
    line-height: 36px;
    font-weight: 500;
    white-space: pre-line;
    text-shadow: 4px 4px 4.95px rgba(51, 63, 72, 0.14);
}
.visual-wrap article .txt-area .cont {
    margin-top: 8px;
    font-size: 1.5rem;
    line-height: 21px;
    white-space: pre-line;
    text-shadow: 4px 4px 4.95px rgba(51, 63, 72, 0.14);
}
.visual-wrap article .txt-area .btn-link {
	display: block;
	margin: 16px auto 0;
	width: 160px; height: 42px;
	line-height: 41px;
	font-size: 1.5rem; color: #fff;
	border: 1px solid #fff;
}
.visual-wrap article.sl02 {background-image: url(/img/m_visual_2.jpg);}
/* .visual-wrap article.sl03 {background-image: url(/img/main/m_visual_3.jpg);} */

/* && focus && */
/* .visual-wrap article .txt-area > * {
    opacity: 0;
    transform: translateY(30px);
}
.visual-wrap.focus article .txt-area > * {
    opacity: 1;
    transform: translateY(0);
    transition: .6s;
}
.visual-wrap.focus article .txt-area > .cont {transition-delay: .3s;} */

/* ============ SE02 : 기업장례서비스 영역 */
#company .slide-imgs {
    height: 320px;
    background: url(/img/m_comservice_2.jpg) no-repeat center/cover;
}
#company .slide-imgs .text_wrap{
	padding: 125px 4.533% 38px;
	font-size: 2rem; color: #fff;
}
#company .slide-imgs .text_wrap p{
	margin-top:6px;
	font-size: 1.6rem; line-height:1.3;
}
#company .slide-imgs .text_wrap a{
	display: block;
    width: 220px; height: 39px;
	margin-top:20px;
   /*  margin: 35px auto 0; */
    font-size: 1.6rem; color: #fff;
    line-height: 38px;
    border: 1px solid #fff;
    text-align: center;
   /*  letter-spacing: -0.16rem; */
}

/* ============ SE03 : 기업장례서비스 도입효과 영역*/
#effect{padding:20px 4.533% 25px;}
/* ============= Product 장례상품 === */
.product-wrap h3 {
    position: relative;
    margin-bottom: 33px;
    font-size: 2.3rem;
    text-align: center;
}
.product-wrap h3 .eng {
    display: block;
    margin: 0 -2rem 10px 0;
    font-size: 1.2rem; color:#15291b;
    letter-spacing: 2rem;
}
.product-wrap h3:before,
.product-wrap h3:after {
    position: absolute;
    content: '';
    bottom: 10px; left: 0;
    width: 40px; height: 1px;
    background: #161616;
}
.product-wrap h3:after {left: auto; right: 0;}
.product-wrap .product-item:nth-child(n+2) {margin-top: 32px;}
.product-wrap .product-item .img-box {
    position: relative;
    height: 210px;
    background: url(/img/m_effect_1.jpg) no-repeat center/cover;
}
.product-wrap .product-item .img-box .cont-wrap {
    position: absolute;
    bottom: 0; left: 0;
    width: 85.33%; height: 58px;
    padding-top: 17px;
    background: #fff;
}
.product-wrap .product-item .img-box .cont-wrap .eng {
    display: block;
    margin-bottom: 7px;
    font-size: 1.2rem;
}
.product-wrap .product-item .img-box .cont-wrap .name {font-size: 1.8rem;}
.product-wrap .product-item .dsc-txt {
    margin: 12px 0;
    font-size: 1.5rem; color: #6e6e6e;
    line-height: 21px;
    white-space: pre-line;
}
.product-wrap .product-item.type2 .img-box {background-image: url(/img/m_effect_2.jpg);}
.product-wrap .product-item.type3 .img-box {background-image: url(/img/m_effect_3.jpg);}
.product-wrap .product-item.type4 .img-box {background-image: url(/img/m_effect_4.jpg);}


/* ============ SE04 : 상품소개 */
#product .pro_wrap a{
	display:block;
	text-align:center;
	position:relative;
}
#product .pro_wrap .img_wrap{
    height: 280px;
    overflow: hidden;
	background: url(/img/m_product_1.jpg) no-repeat center/cover;
}
#product .pro_wrap .left .img_wrap img{
	width: 100%; height:100%;
	object-fit:cover;
}
#product .pro_wrap .text_wrap{
	position: absolute;
    content: '';
	text-align:center;
    top: 35%; left: 50%;
    transform: translateX(-50%);
	color:#fff;
}
#product .pro_wrap .text_wrap p.tit{
	font-size:2.2rem;
}
#product .pro_wrap .text_wrap p.cont{
	margin: 10px 0;
    font-size: 1.5rem;
    line-height: 21px;
	/* width:300px; */
}
#product .pro_wrap .text_wrap span{
	display:inline-block;
	font-size:1.4rem;
	width: 116px; height: 33px;
    line-height: 32px;
    border: 1px solid #fff;
    text-align: center;
}
#product .pro_wrap .left.right .img_wrap{background-image: url(/img/m_product_2.jpg);}
/* ============ SE05 : 공지사항/FAQ */
#customer .notice {padding: 65px 4.533% 67px;}
#customer .notice .tit-area {position: relative;}
#customer .notice h4 {
    margin-bottom: 27px;
    font-size: 2.8rem;
    font-weight: 400;
    text-align: center;
}
#customer .notice h4 + a {
    position: absolute;
    top: 0; right: 0;
    width: 30px; height: 30px;
    font-size: 1.6rem; color: #5c5c5c;
    line-height: 27px;
    text-align: center;
    border: 1px solid #5c5c5c;
}
#customer .notice-wrap .board {
    margin-top: 14px;
    padding: 15px 5.728% 14px;
    background: #f8f8f8;
}
#customer .notice-wrap .board:nth-child(2n) {background: #f4f2f0;}
#customer .notice-wrap .board a {display: block;}
#customer .notice-wrap .board h5 {
    margin-bottom: 8px;
    font-size: 1.6rem; color: #515151;
    font-weight: 400;
    white-space: pre;
    text-overflow: ellipsis;
    overflow: hidden;
}
#customer .notice-wrap .board i.date {
    display: block;
    font-size: 1.3rem; color: #7f7e7e;
    font-style: normal;
    text-align: right;
}
#customer .faq h4 {
    font-size: 2.1rem;
    font-weight: 400;
	text-align: right;
}
#customer .faq h4 a {
    display: block;
    color: #fff;
    height: 130px;
    padding: 92px 4.533% 0;
    background: url(/img/m_faq.jpg) no-repeat center/cover;
}

/* ================================================ PC */
@media screen and (min-width:1084px){
    .fp-tableCell {min-height: 860px;}
    /* ========== VISUAL */
	#visual {width: 100vw; height: 100vh;}
	.visual-wrap {
		position: fixed;
		top: 0; left: 0;
		width: 100%; height: 100%;
	}
	.visual-wrap article {
		height: 100vh;
		background: url(/img/visual_1.jpg) no-repeat center/cover;
	}
	.visual-wrap article .txt-area {
		position: absolute;
		top: 50%; left: 50%; transform: translate(-50%,-50%);
		width: 100%;
		text-align: center;
		color: #fff;
	}
	.visual-wrap article .txt-area h4 {
        font-size: 6.4rem;
        line-height: 72px;
    }
	.visual-wrap article .txt-area .cont {
        margin-top: 23px;
        font-size: 1.8rem;
        line-height: 26px;
        font-weight: 300;
    }
	.visual-wrap article .txt-area .btn-link {
		display: block;
		margin: 16px auto 0;
		width: 160px; height: 42px;
		line-height: 41px;
		font-size: 1.5rem; color: #fff;
		border: 1px solid #fff;
	}
	.visual-wrap article.sl02 {background-image: url(/img/visual_2.jpg);}
	/* .visual-wrap article.sl03 {background-image: url(/img/main/m_visual_3.jpg);} */
	  @keyframes scrollAnimation {
        0% {transform: translateY(0);}
        100% {transform: translateY(8px);}
    }
    /* && focus && */
    .visual-wrap article .txt-area > * {transform: translateY(50px);}
    /* ========== VISUAL END */

	/* ============ SE02 : 기업장례서비스 영역 */
	#company .slide-imgs {
		height: 100vh;
		background: url(/img/comservice_2.jpg) no-repeat center/cover;
	}
	#company .slide-imgs .text_wrap{
		padding: 347px 277px 0;
		font-size: 5.5rem; color: #fff;
	}
	#company .slide-imgs .text_wrap p{
		margin-top:30px;
		font-size: 2.7rem; line-height:1.5;
		white-space:pre-line;
	}
	#company .slide-imgs .text_wrap a{
		width: 220px; height: 70px;
		margin-top:50px;
		font-size:2rem; 
		line-height: 69px;
	   /*  letter-spacing: -0.16rem; */
	}
	#company .slide-imgs .text_wrap a:hover{
		background:#ccbda0;
		border:none;
		transition: all 0.3s;
	}

    /* ============ SE03 : 기업장례서비스 도입효과 영역*/
    .product-wrap {padding: 0 0 70px;}
    .product-wrap h3 {
        width: 706px;
        margin: 0 auto 57px;
        font-size: 3.2rem;
    }
    .product-wrap h3 .eng {
        margin-bottom: 17px;
        font-size: 1.4rem;
    }
    .product-wrap h3:before,
    .product-wrap h3:after {
        bottom: 15px;
        width: 140px;
    }
    .product-wrap .product-items {
        max-width: 1390px;
        min-width: 1200px;
        display: flex;
        margin: 0 auto;
        justify-content: space-between;
    }    
    .product-wrap .product-item:nth-child(n+2) {margin: 0;}
    .product-wrap .product-item {width: 22.32%;}
    .product-wrap .product-item .img-box {
        height: 420px;
        background-image: url(/img/effect_1.jpg);
    }
    .product-wrap .product-item .img-box .cont-wrap {
        width: 250px; height: 76px;
        padding-top: 21px;
    }
    .product-wrap .product-item .img-box .cont-wrap .eng {
        margin-bottom: 13px;
        font-size: 1.6rem;
    }
    .product-wrap .product-item .img-box .cont-wrap .name {font-size: 2.4rem;}
    .product-wrap .product-item .dsc-txt {
        margin: 26px 0 42px;
        font-size: 1.6rem;
        line-height: 24px;
    }
    .product-wrap .product-item .dsc-txt + a {
        position: relative;
        font-size: 1.5rem;
        z-index: 2;
    }
    .product-wrap .product-item .dsc-txt + a:before {
        position: relative;
        margin-right: 20px;
        z-index: -1;
    }
    .product-wrap .product-item .dsc-txt + a:after {
        position: absolute;
        content: '';
        width: 46px; height: 1px;
        top: 11px; left: 0;
        background: #fff;
        transform: translateX(-100%);
        z-index: -1;
    }
    .product-wrap .product-item .dsc-txt + a:hover:after {
        transform: translateX(100%);
        transition: .7s;
    }
    .product-wrap .product-item.type2 .img-box {background-image: url(/img/effect_2.jpg);}
	.product-wrap .product-item.type3 .img-box {background-image: url(/img/effect_3.jpg);}
	.product-wrap .product-item.type4 .img-box {background-image: url(/img/effect_4.jpg);}

    /* ============ SE04 : 상품소개 */
	#product .pro_wrap{
		display:flex;
		justify-content:center;
	}
	#product .pro_wrap a{	
		width:50%;
	}
	#product .pro_wrap a:hover{
		/* transform: scale(1); */
		transition: transform 1s;
		filter: brightness(70%);
	}
	#product .pro_wrap .img_wrap{
		height: 100vh;
		background: url(/img/product_1.jpg) no-repeat center/cover;
	}
	#product .pro_wrap .text_wrap{
		top: 46%;
		white-space:inherit;
	}
	#product .pro_wrap .text_wrap p.tit{font-size:3rem;}
	#product .pro_wrap .text_wrap p.cont{
		margin: 20px 0;
		font-size: 1.8rem;
		line-height: 21px;
	}
	#product .pro_wrap .text_wrap span{
		font-size:1.5rem;
		width: 120px; height: 35px;
		line-height: 34px;
	}
	#product .pro_wrap .left.right .img_wrap{background-image: url(/img/product_2.jpg);}

    /* ============ SE05 : 공지사항/FAQ */
	#customer h3 {
		position: relative;
		margin-bottom: 80px;
		font-size: 2.3rem;
		text-align: center;
	}
	#customer h3 .eng {
		display: block;
		margin: 0 -2rem 10px 0;
		font-size: 1.2rem; color:#15291b;
		letter-spacing: 2rem;
	}
	#customer h3:before,
	#customer h3:after {
		position: absolute;
		content: '';
		bottom: 10px; left:38%;
		width: 85px; height: 1px;
		background: #161616;
	}
	#customer h3:after {left: auto; right: 38%;}
	#customer .not_inner{
		display:flex;
		justify-content:center;
	}
    #customer .notice {
		padding: 0 19px; 
		width:600px;
	}
	#customer .notice .tit-area {
		position: relative;
		margin-bottom:50px;
	}
	#customer .notice h4 {
		margin-bottom: 27px;
		font-size: 2.8rem;
		font-weight: 400;
		text-align: center;
	}
	#customer .notice h4 + a {
		position: absolute;
		top: 0; right: 0;
		width: 30px; height: 30px;
		font-size: 1.6rem; color: #5c5c5c;
		line-height: 27px;
		text-align: center;
		border: 1px solid #5c5c5c;
	}
	#customer .notice-wrap .board {
		margin-top: 14px;
		padding: 15px 5.728% 14px;
		background: #f8f8f8;
	}
	#customer .notice-wrap .board:nth-child(2n) {background: #f4f2f0;}
	#customer .notice-wrap .board a {display: block;}
	#customer .notice-wrap .board h5 {
		margin-bottom: 8px;
		font-size: 1.6rem; color: #515151;
		font-weight: 400;
		white-space: pre;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	#customer .notice-wrap .board i.date {
		display: block;
		font-size: 1.3rem; color: #7f7e7e;
		font-style: normal;
		text-align: right;
	}
	#customer .faq{
		width:600px; height:500px; 
		padding: 0 19px;
		border-right:1px solid #dedede;
	}
	#customer .faq i.img{
		display:block;
		height:200px;
		background: url(/img/m_faq.jpg) no-repeat center/cover;
	}
	#customer .faq h4 {
		font-size: 3rem;
		margin: 42px 0 ;
		font-weight: 400;
		text-align: left;
	}
	#customer .faq h4 a {
		padding:0;
		color:#7f7e7e;
		background: none;
	}
	#customer .text-wrap p{
		font-size:1.6rem;
		color: #7f7e7e;
		line-height:24px;
		/* white-space:pre-line; */
		margin-top:-75px;
	}
	#customer .text-wrap > a{
		width: 160px; height: 46px;
		font-size: 1.6rem;
		color: #5c5c5c;
		font-weight: 300;
		line-height: 45px;
		text-align: center;
		border: 1px solid #5c5c5c;
		margin-top:23px;
	}
}