/********************************************************
■ 폰트
********************************************************/
#visual .bxslider li .ptext h2{font-size: 2.8rem;}
#visual .bxslider li .ptext h4{font-size: 1.4rem;}
#visual .bxslider li .ptext p{font-size: .85rem;}
.inn h5{font-size: 1.2rem;}

/********************************************************
■ 공통
********************************************************/
/*-----공통-----*/
.inn{position: relative; width: 1400px; padding: 2rem 0; margin: 0 auto;}
.inn .inn_txt h2{position: relative; line-height: 1; font-weight: 500; color: #fff; text-align: center; padding-bottom: 4rem;}
.inn .inn_txt h2:after{position: absolute; content: ''; display: block; width: 1px; height: 2.5rem; bottom: .75rem; left: 50%; transform: translateX(-50%); background: #fff;}
.inn .inn_txt h5{font-weight: 500; color: #000;}

#header .header_inner{position: absolute; top: 2rem; left:50%; transform: translateX(-50%); background: transparent; }



@media (max-width:1400px){
 .inn{width: 100%; margin: 0; padding: 2rem 1rem;}

}
@media (max-width:1030px){
	
}
@media (max-width:767px){

}



/********************************************************
■ 메인비주얼
********************************************************/

.cts1{position:relative; width: 100%;}
#visual {width:100%; z-index: 0; position:relative; overflow:hidden;}
#visual .bxslider {z-index:1; height: 100%;}
#visual .bxslider li {position:relative;width:100%; height: 43.5rem;  overflow: hidden;}
#visual .bxslider li .ptext {position:relative; line-height:1.3;  box-sizing:border-box; z-index:1; width:1400px; margin: 0 auto; height: 100%; display: flex; padding-top: 8rem;}
#visual .bxslider li .ptext:after{position: absolute; content: ''; display: block; width: 48.7rem; height: 100%; right: -13.4rem; top:0; z-index: -1;}
#visual .bxslider li.v_01 .ptext:after{background:url('/views/site/skin/funeral//images/default/main/visual01.png') no-repeat top center; background-size:contain;}
#visual .bxslider li.v_02 .ptext:after{background:url('/views/site/skin/funeral//images/default/main/visual02.png') no-repeat top center; background-size:contain;}
#visual .bxslider li.v_03 .ptext:after{background:url('/views/site/skin/funeral//images/default/main/visual03.png') no-repeat top center; background-size:contain;}
#visual .bxslider li .ptext h2{color: #000; font-weight: 400; line-height: 1.2;}
#visual .bxslider li .ptext h2 em{color: #3086c9; font-weight: 600;}
#visual .bxslider li .ptext p{color: #333; margin-top: 1.5rem; font-size:0.9rem;}
#visual .bxslider li .ptext .text{-webkit-transition: opacity 0.7s, transform 0.7s; -o-transition:transform 0.7s, opacity 0.7s; transition:opacity 0.7s, transform 0.7s; 
-webkit-transform:translate(0, 1rem);-ms-transform:translate(0, 1rem);transform:translate(0, 1rem); opacity:0}
#visual .bxslider li.active-slide .ptext .text{-webkit-transition-delay:0.4s; -o-transition-delay:0.4s; transition-delay:0.4s;
-webkit-transform:translate(0, 0); -ms-transform:translate(0, 0); transform:translate(0, 0); opacity:1}

#visual .bx-wrapper .bx-pager.bx-default-pager{width: 100%; margin: 0 auto; left: 50%; margin-left: -700px; top: 16rem; display: flex; justify-content: flex-start;}
#visual .bx-wrapper .bx-pager.bx-default-pager a {width: .5rem; height: .5rem; border-radius: 50^;  border: 1px solid #3086c9; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out; background: transparent; opacity: 1; margin: 0 .2rem;}
#visual .bx-wrapper .bx-pager.bx-default-pager a.active {background:#3086c9; opacity: 1;}



/* 빈소현황 */
.mortuary_hall{position: absolute; top: 20rem; left: 0; width:100%;}
.mortuary_hall .inn_pd{ width:980px;}
.tstyle{border-collapse:collapse; clear:both;border-bottom:2px solid #3086C9; }
.tstyle caption{display:none;}
.tstyle thead th{color:#fff; background:#3086C9; font-weight:500;  padding: 17px 5px;}
.tstyle thead th:first-child{border-top-left-radius:1.2rem;}
.tstyle thead th:last-child{border-top-right-radius:1.2rem;}
.tstyle tbody td{border-bottom: 1px solid #E1F1FE;background:#fff; text-align:center; padding: 17px 5px; }
/*.tstyle tbody td .sangju{display: inline-block;text-overflow:ellipsis;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;*/
/*-webkit-line-clamp: 1; -webkit-box-orient: vertical;word-wrap:break-word; line-height: 1.3em;height: 1.3em;}*/
.tstyle tbody td .sangju{display: inline-block;line-height: 1.3em;}

/*검색*/
.search_box{overflow:hidden; margin-bottom:15px;}
.search_box h5{float:left;  line-height: 45px; }
.search{display:inline-block; float:right;}
.search_area{width: 22.5rem; border-radius: 1rem; overflow: hidden; position: relative;}
.search_area label{display:none;}
.search_area input.insearch{ border:1px solid #3086C9; float: left; display: inline-block; font-size:0.7rem;  margin: 0;  padding: 0 0 0 20px;  width:calc(100% - 2.5rem);  height:45px;  line-height: 45px;  color: #4B4F58; background-color:#fff ;font-weight: 400; box-sizing:border-box; border-top-left-radius:1rem; border-bottom-left-radius:1rem;}
.inbtn {  float: left;  display: inline-block;  margin: 0;  padding: 0 0 0 0;  width: 2.5rem;  height:45px; background-color:#fff;line-height:45px;  color:#fff;  background: #3086C9; position:relative;}
.inbtn:before{content: "\f06f";display : block; position : absolute; left :50%; top:50%;  -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-family:'remixicon'; color:#fff; font-size:1rem;}
.inbtn span{font-size:0;}




@media (max-width:1460px){
	#visual .bxslider li .ptext{width:100%; padding:0 1rem; padding-top:8rem;}
	#visual .bx-wrapper .bx-pager.bx-default-pager{left:1rem; margin-left:0;}
}

@media (max-width:1030px){
	#visual .bxslider li .ptext:after{width: 38.7rem; right: -13.4rem;}
	.mortuary_hall .inn_pd{ width:100%;}
}

@media (max-width:767px){
	#visual .bxslider li .ptext:after{width: 25rem; right: -12rem;}
	#visual .bxslider li .ptext h2{font-size: 1.9rem;}
	#visual .bxslider li .ptext h2 em{display:block;}
	#visual .bx-wrapper .bx-pager.bx-default-pager{top: 80px;}
	.search_area{width:100%;}
	.tb_wrap{height:300px;}

	/*빈소현황*/
	table.tstyle{border-top:5px solid #3086C9;}
	table.tstyle, 
	table.tstyle thead, 
	table.tstyle tbody, 
	table.tstyle th, 
	table.tstyle td, 
	table.tstyle tr {display: block; font-size:0.95em;}
	table.tstyle thead tr {position: absolute;top: -9999px;left: -9999px;}
	table.tstyle tr { margin-bottom:10px; padding:10px 0; border-top:1px solid #ddd;}
	table.tstyle tr:first-child{border-top:none;}
	table.tstyle td {border: none;	position: relative;	padding:5px 0px;padding-left:25%; text-align:left;min-height: 1.5rem; }
	table.tstyle td:before {position: absolute;	top:5px;	left: 0;	width: 20%;	text-align:center; font-weight:bold;}

	table.tstyle td:nth-of-type(1):before { content: "빈소"; }
	table.tstyle td:nth-of-type(2):before { content: "고인명"; }
	table.tstyle td:nth-of-type(3):before { content: "상주명"; }
	table.tstyle td:nth-of-type(4):before { content: "발인일"; }
	table.tstyle td:nth-of-type(5):before { content: "장지"; }
}



/********************************************************
■ 장례원 소개
********************************************************/

.cts2{padding:20rem 0 5.5rem; position:relative;}
.cts2:before{ content : ""; display : block; position : absolute; left :0; bottom:0; width : 331px; height : 200px;  background: url("/views/site/skin/funeral/images/default/main/int04_bg.jpg") no-repeat left top;}
.cts2 h3{font-size:1.75rem; font-weight:bold; text-align:center; margin-bottom:10px;}
.cts2 h3 em{color:#3086c9;}
.cts2 .st{text-align:center; margin-bottom:2rem;}
.cts2 .int{overflow:hidden; margin:-1.8%; line-height:1.3;}
.cts2 .int li{width:21.4%; height:19.5rem; float:left; display:block;margin:1.8%; color:#fff; position:relative;}
.cts2 .int li > div{ position:absolute; left:1rem; bottom:1.5rem;}
.cts2 .int li h4{color:#fff; font-size:1.25rem; margin-bottom:10px;}
.cts2 .int li:nth-of-type(1){background:url('/views/site/skin/funeral/images/default/main/int01.jpg') no-repeat center center; background-size:cover; border-top-left-radius:2rem; }
.cts2 .int li:nth-of-type(2){background:url('/views/site/skin/funeral/images/default/main/int02.jpg') no-repeat center center; background-size:cover;}
.cts2 .int li:nth-of-type(3){background:url('/views/site/skin/funeral/images/default/main/int03.jpg') no-repeat center center; background-size:cover;}
.cts2 .int li:nth-of-type(4){background:url('/views/site/skin/funeral/images/default/main/int04.jpg') no-repeat center center; background-size:cover;border-bottom-right-radius:2rem; }

@media (max-width:767px){
.cts2{padding:0 0 0;}
.cts2 .inn{padding-top:3rem;}
.cts2 .int li{width:46.4%; font-size:0.8rem; height:16rem;}
.cts2 .int li > div{bottom:auto; top:55%;}
.cts2 .int li h4{font-size:1.1rem;}
}



/********************************************************
■ 고객센터
********************************************************/
.cts3{background:url('/views/site/skin/funeral/images/default/main/cust_bg.jpg') no-repeat center center; background-size:cover;}
.cts3 .inn{padding:0; display:flex; align-items: center; justify-content: center;}

.cts3 .inn .cust{flex-basis:47.86%; padding-right:6%;}
.cts3 .inn .cust ul{display:flex; justify-content: space-between;}
.cts3 .inn .cust li{width:28%; height:287px;}
.cts3 .inn .cust li a{display:flex; flex-direction: column;  align-items: center; justify-content: center;  flex-shrink:0; width:100%; height:100%; background:#fff; border:1px solid #3086C9; border-radius:20px; box-shadow:0px 1px 6px rgb(0 0 0 / 20%); font-size:1.05rem; -webkit-transition:all 0.2s ease-out; -moz-transition:all 0.2s ease-out; -o-transition:all 0.2s ease-out; transition:all 0.2s ease-out;}
.cts3 .inn .cust li a span{display:block; width:55%; padding-top:55%; border-radius:50%; background:#E1F1FE; position:relative;}
.cts3 .inn .cust li a span img{position:absolute; left:50%; top:50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width:2.8rem; }
.cts3 .inn .cust li h4{margin:1rem 0;}
.cts3 .inn .cust li .more{text-indent:-9999px; display:block; width:30px; height:7px; background:url('/views/site/skin/funeral/images/default/main/more.png') no-repeat center center;}
.cts3 .inn .cust li a:hover{background:#3086C9;  }
.cts3 .inn .cust li a:hover h4{color:#fff;}
.cts3 .inn .cust li a:hover span{background:#fff; }
.cts3 .inn .cust li a:hover .more{background:url('/views/site/skin/funeral/images/default/main/more_ov.png') no-repeat center center;}
.cts3 .inn .map{flex-basis:52.14%;}

@media (max-width:1030px){
	.cts3 .inn .cust{padding:0 3%;}
	.cts3 .inn .cust li a span img{width:1.8rem;}
}

@media (max-width:767px){
	.cts3 .inn{display:block;}
	.cts3 .inn .cust{flex-basis:100%; padding:2rem 3%;}
	.cts3 .inn .cust li{height:auto;}
	.cts3 .inn .cust li a{padding:15px 0;}
	.cts3 .inn .cust li h4{margin:10px 0;}
	.cts3 .inn .map{flex-basis:100%;}
	.cts3 .map .root_daum_roughmap{height:15rem;}
}


/********************************************************
■ 장례식장팝업
********************************************************/
@media (max-width: 1500px) {
    #popup {
        left: 5% !important;
		width: 40% !important;
 
    }
}


@media (max-width: 767px) {
    #popup {
        left: 5% !important;
        transform: translateX(0%);
        width: 40% !important;
        height: auto !important;
        top: 130px;
    }