@charset "utf-8";


/* common */
.incont {max-width: 1380px; margin: 0 auto}
.hoz_visual {position:relative;height: 600px; margin: 0 0 160px}

.num_block {display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; background: var(--main-blue); border-radius: 3px; color: #fff; font-weight: 700; font-size: 24px; flex-shrink: 0}
.title_L {font-size:var(--con-tit); font-weight: 500}
.title_M {font-size: 40px}

.con-inner .rowCont:last-child {border: 0}
.rowCont {display: flex; align-items: flex-start; padding: 80px 0; border-bottom: 1px solid #ddd}
.rowCont .head {width: 372px; flex-shrink: 0}
.rowCont .head .txt {display: flex; align-items: center; line-height: 1}
.rowCont .head .txt .num_block {margin-right: 10px}
.rowCont .cont {font-size: var(--com-txt-bg); color:var(--gry-303); font-weight: 300}
.rowCont .cont .picArea {margin-top: 40px}
.picArea {border-radius: 15px; overflow: hidden;}
.picArea img {width: 100%}

.num_step {display: flex; align-items: center; }
.num_step li {display: flex; align-items: center; margin-right: 20px; padding-right: 40px;}
.num_step li .num {display: flex; width: 24px; height: 24px; align-items: center; justify-content: center; background: var(--main-blue); border-radius:100%; color: #fff; font-weight: 700; font-size: 16px; margin-right: 5px; flex-shrink: 0}
.num_step li {background: url('../img/common/arrow_step_nor.svg') no-repeat right center;}
.num_step li:last-child {background: none; padding: 0; margin: 0}

.dot_list {}
.dot_list li {position: relative; padding-left: 20px; line-height: 1.5; margin-bottom: 10px}
.dot_list li:before {content: ""; width: 3px; height: 3px; position: absolute; left: 0; top:15px; background:var(--gry-303); border-radius: 100%;}
.dot_list li:last-child {margin: 0}
.dot_list .etc_list {margin-top: 10px}
.dot_list .etc_list li {color:#aaa; padding: 0; font-size: 20px; margin: 0}
.dot_list .etc_list li:before {display: none}

.top_copy {margin-bottom: 100px}
.top_copy .title_L {margin-bottom: 40px}
.top_copy .in_copy {font-size: var(--con-tit-txt); line-height: 1.6}

.memorial_wrap {}
.memorial_wrap .picArea {margin-bottom: 60px}
.memorial_step {display: flex; align-items: flex-start; flex-wrap: wrap; color: var(--com-txt-cl)}
.memorial_step li {flex: 1 1 40%; padding: 50px 50px 50px 0; border-bottom: 1px solid #ddd}
.memorial_step li strong {display: flex; align-items: center; font-size: var(--con-tit-txt);}
.memorial_step li strong .num {margin-right: 10px}
.memorial_step li .num_rectangle {margin-right: 10px}
.memorial_step li p {margin-top: 20px; line-height: 1.5; font-size: var(--com-txt-sm); color: var(--gry-303); font-weight: 300}
.memorial_step li:nth-child(11),
.memorial_step li:nth-child(12) {border: 0}
.num_rectangle {display: flex; width: 30px; height: 30px; align-items: center; justify-content: center; background: var(--main-blue); border-radius:3px; color: #fff; font-weight: 700; font-size: 16px; flex-shrink: 0}

.tbl_in_wrap {margin-top: 50px}
.tbl_in_wrap .title {display: flex; align-items: center; font-size: var(--con-tit-txt); margin-bottom: 30px}
.tbl_in_wrap .title .num_rectangle {margin-right: 10px}
.tbl_in_wrap .tbl_style_row th {width: 300px}


.tbl_style_row {width: 100%; border: 1px solid var(--gry-ddd); border-collapse: collapse; font-size: var(--com-txt-sm)}
.tbl_style_row td, .tbl_style_row th { border: 1px solid var(--gry-ddd); padding: 20px 30px}
.tbl_style_row th {background: var(--main-light); color: #000; font-weight: 400}
.tbl_style_row .dot_list li {margin-bottom: 5px}
.tbl_style_row .dot_list li:before {top:13px}


/*상단 이미지*/
.hoz_visual .bg{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;}
#manner-page .hoz_visual .bg{background-image:url('/theme/onyou/img/funeral/visual_manner.jpg') ;background-size: cover;  background-position: top center;background-repeat: no-repeat;}
#memorial-page .hoz_visual .bg{background-image:url('/theme/onyou/img/funeral/visual_memorial.jpg') ;background-size: cover;  background-position: top center;background-repeat: no-repeat;}
#step-page .hoz_visual .bg{background-image:url('/theme/onyou/img/funeral/visual_step.jpg') ;background-size: cover;  background-position: top center;background-repeat: no-repeat;}



/* 미디어쿼리 */
@media screen and (max-width: 1460px) {
	
	.hoz_visual {margin: 0 -40px 80px}
	
	.memorial_step li {flex: 1 1 100%;}		
	.memorial_step li:nth-child(11) {border-bottom: 1px solid #ddd}
	
	.rowCont .head {width: 330px}
}

@media screen and (max-width: 1280px) {
	.rowCont {flex-direction: column}
	.rowCont .head {width: 100%; margin-bottom: 50px}
	.rowCont .cont {width: 100%}
	
	.hoz_visual {height: 40vw}
	
}

@media screen and (max-width: 820px) {
	
	.hoz_visual {height: 65vw}
	.num_block {width: 30px; height: 30px; font-size: 18px}
	.hoz_visual {margin-bottom: 80px}
	.num_step {align-items: flex-start; gap: 10px}
	.num_step li {background: none; margin: 0; padding: 0}
	.memorial_step li:first-child {padding-top: 0}
	.dot_list .etc_list li {font-size: 16px}
	
	#manner-page .hoz_visual .bg{background-image:url('/theme/onyou/img/funeral/visual_manner_m.jpg') ;background-size: cover;  background-position: top center;background-repeat: no-repeat;}
	#memorial-page .hoz_visual .bg{background-image:url('/theme/onyou/img/funeral/visual_memorial_m.jpg') ;background-size: cover;  background-position: top center;background-repeat: no-repeat;}
	#step-page .hoz_visual .bg{background-image:url('/theme/onyou/img/funeral/visual_step_m.jpg') ;background-size: cover;  background-position: top center;background-repeat: no-repeat;}

}

@media screen and (max-width: 500px) {
	.num_block {width: 24px; height: 24px; font-size: 14px}
	.num_step {flex-wrap: wrap}
	.num_step li {flex: 1 1 40%;}
	.rowCont .cont .picArea {margin-top: 20px}
	.hoz_visual {margin: 0 -20px 65px}
	.num_step li .num {width: 20px; height: 20px; font-size: 12px}
	.top_copy .title_L {margin-bottom: 20px}
	.top_copy .in_copy {font-weight: 300; font-size: 16px}
	.top_copy {margin-bottom: 50px}
	.dot_list .etc_list li {font-size: 14px}
	.tbl_style_row td, .tbl_style_row th {padding: 20px}
	.dot_list li {padding-left: 10px}
	.tbl_style_row .dot_list li:before {top:11px}
}