/* CSS Document */
html.no-js{opacity:0}
main .bx-wrapper { z-index: 1; }
main .bx-wrapper .bx-controls { position: absolute;display: flex; }
main .bx-wrapper .bx-controls-auto, main .bx-wrapper .bx-pager { display: inline-block; }
main .bx-wrapper .bx-pager-item { display: inline-block; }
main .bx-wrapper .bx-pager-item a { width: 18px; height: 18px; text-indent: -9999px; border: 1px solid #fff; border-radius: 50%; display: inline-block; margin-right: 7px; }
main .bx-wrapper .bx-pager-item a.active { background: #fff; }
main .bx-wrapper .bx-controls-auto{ order: 2;}
main .bx-wrapper .bx-controls-auto-item { display: inline-block; }
main .bx-wrapper .bx-controls-auto-item a { display: inline-block; width: 18px; height: 18px; background: url(../img/main_icon2.png) 0 0px no-repeat; margin-right: 5px; }
main .bx-wrapper .bx-controls-auto-item a.bx-start { background-position: -18px 0; }
main .section { position: relative; }
main #section0 { z-index: 1; min-height: 600px; }
main #section0 .main_slide > div { background-size: cover; height: 100vh; overflow: hidden;}
main #section0 .main_slide { }
main #section0 .main_slide > div.bg0 { }
main #section0 .main_slide > div.bg1 { background-image: url(../img/main_slide1.jpg); }
main #section0 .main_slide > div.bg2 { background-image: url(../img/main_slide2.jpg); }
main #section0 .main_slide > div.bg0 div#myVideo {width:100%;min-width: 1200px; position: absolute; left:0; top: 0; z-index: 1; }
main #section0 .main_slide > div.bg0 div#myVideo .wistia_responsive_wrapper{height:auto;left:0; position:absolute;top:0;width:160%;}
main #section0 .main_slide > div.bg0 div#myVideo .wistia_responsive_wrapper iframe{width:100%; height:auto}
/*main #section0 .main_slide > div.bg0::after{ content: ""; width: 100%; height: 100vh; background:rgba(255, 255, 255, 0.1); position: absolute; top: 0; left: 0; z-index: 4;}*/
main #section0 .main_slide > div.bg0::before{ content: ""; width: 100%; height: 100vh; background:rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0; z-index: 5;}
main #section0 .main_slide > div.bg0 div{position: relative; z-index: 10;}
main #section0 .main_slide > div > div { padding-top: 220px; width: 100%; max-width: 1200px; margin: 0 auto; }
main #section0 .main_slide > div > div p { color: #fff; line-height: 1.6; }
main #section0 .main_slide > div > div p.title { font-size: 48px; font-weight: bold; text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25); font-family: 'IBM4'; }
main #section0 .main_slide > div > div p.title span { color: #fff; }
main #section0 .main_slide > div > div p + p { margin-top: 10px; }
main #section0 .main_slide > div > div a { border: 1px solid #ddd; color: #fff; display: inline-block; padding: 5px 15px; margin-top: 30px; }
main #section0 .bx-wrapper { z-index: 1; position: absolute; left: 0; top: 0; }
main #section0 .bx-wrapper .bx-controls { top: 190px; left: 50%; width: 100%; max-width: 1200px; text-align: left; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
main #section0 .bx-wrapper .bx-controls a{vertical-align: top;}
main #section0 .layer { z-index: 2; width: 100%; max-width: 1200px; display: block; margin: 0 auto; position: relative; pointer-events: none; }
main #section0 .layer > div { width: 100%; display: table; max-width: 380px; height: 100vh; float: right; pointer-events: all; }
main #section0 .layer > div > div { display: table-cell; vertical-align: middle; padding-top: 30px; padding-bottom: 20px; }
main #section0 .layer > div > div > div h2 { font-size: 23px; font-weight: bold; font-family: 'IBM3'; }
main #section0 .layer > div > div > div p { font-size: 15px; color: #333; line-height: 1.4; }
main #section0 .layer > div > div > div:nth-child(1) { background: rgba(255, 255, 255, 0.8); padding: 30px; }
main #section0 .layer > div > div > div:nth-child(1) h2 { color: #174277; margin-bottom: 10px; }
main #section0 .layer > div > div > div:nth-child(1) .time { color: #046da3; font-size: 16px; font-weight: bold; margin-bottom: 10px; margin-top: 5px; }
main #section0 .layer > div > div > div:nth-child(1) input[type=text] { border: 0; -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); margin-top: 8px; padding-left: 15px; height: 40px; }
main #section0 .layer > div > div > div:nth-child(1) .type2 input { width: calc(100% - 98px); }
main #section0 .layer > div > div label[for=agree1]{margin-top: 10px; display: block; font-size: 15px;}
main #section0 .layer > div > div label[for=agree1] input{display: inline-block; margin-right: 5px;}
main #section0 .layer > div > div > div:nth-child(1) .type2 button { width: 98px; background: #0a4a9b; color: #fff; height: 40px; -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); }
main #section0 .layer > div > div > div:nth-child(2) { background: rgba(255, 255, 255, 0.8); margin-top: 20px; padding: 30px; }
main #section0 .layer > div > div > div:nth-child(2) .tel { font-size: 33px; color: #0a4a9b; font-weight: bold; font-family: 'IBM4';}
main #section0 .layer > div > div > div:nth-child(2) .tel span { color: #02886f; }
main #section0 .layer > div > div > div:nth-child(2) > div { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 20px; }
main #section0 .layer > div > div > div:nth-child(2) > div p { width: 45%; color: #1e1e1e; font-weight: bold; }
main #section0 .layer > div > div > div:nth-child(2) > div p span { display: block; }
main #section0 .layer > div > div > div:nth-child(2) > div p span::before { width: 14px; height: 14px; content: ""; display: inline-block; margin-right: 5px; position: relative; top: 2px; background: url(../img/main_icon2.png) -36px 0px no-repeat; }
main #section0 .layer > div > div > div:nth-child(2) > div p + p { border-left: 1px solid #acaeaf; padding-left: 30px;width: 55%; }
main #section0 .layer > div > div > div:nth-child(3) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 20px; }
main #section0 .layer > div > div > div:nth-child(3) a { display: block;position: relative; background: rgba(255, 255, 255, 0.8); width: 30%; padding: 10px 0; overflow: hidden; }
main #section0 .layer > div > div > div:nth-child(3) a::before { width: 30px; height: 40px; content: ""; display: block; margin: 0 auto; background: url(../img/main_icon2.png) -60px -20px no-repeat; }
main #section0 .layer > div > div > div:nth-child(3) a.icon1::before { background-position: -30px -20px; }
main #section0 .layer > div > div > div:nth-child(3) a.icon3::before { background-position: 0px -20px; }
main #section0 .layer > div > div > div:nth-child(3) a p { display: table; width: 100%; height: 50px; line-height: 1.2; text-align: center; font-size: 17px; color: #1e1e1e; font-weight: bold; font-family: 'IBM3'; }
main #section0 .layer > div > div > div:nth-child(3) a p span { display: table-cell; vertical-align: middle; }
main #section0 .layer > div > div > div:nth-child(3) a:hover:after{content: '참좋은 집'; display:block; position: absolute; left: 0; top:0; width: 100%; height: 100%;background: #0a4a9b;animation:bg0_list 0.2s ease-out 1; text-align: center; color: #fff; padding: 40px 10px 0px 10px; word-break: keep-all;}
main #section0 .layer > div > div > div:nth-child(3) a:nth-of-type(2):hover:after{content: '강원동부 해바라기센터'; padding-top: 30px;}
main #section0 .layer > div > div > div:nth-child(3) a:nth-of-type(3):hover:after{content: '장례식장'; }
@keyframes bg0_list {
0%{ top: 90px;}
100%{ top: 0px;}
}
main #section0 .main_slide > div.bg0 a{ border-radius: 30px;padding: 12px 22px; font-size: 17px;}
main #section0 .main_slide > div.bg0 a + a{margin-left: 10px;}
main #section0 .main_slide > div.bg0 a::before{content: "\f3c5";font-family: 'Font Awesome 5 Free';font-weight: 900;margin-right: 10px; font-size: 22px; display: inline-block;}
main #section0 .main_slide > div.bg0 a:nth-of-type(2):before{content: "\f80d";}
main #section0 .main_slide > div.bg0 a:hover::before{animation:bg0_btn 0.2s ease-out 1;}
@keyframes bg0_btn {
0%{ transform: scaleX(1);}
50%{ transform: scaleX(0.1);}
100%{ transform: scaleX(1);}
}
main #section0 .layer .res_agree{display: none; position: absolute; left: 0; top:280px; background-color: #fff; border: 1px solid #ccc; padding: 15px 30px; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2); z-index: 100;}
main #section0 .layer .res_agree .ra_title{color: #333!important; font-size: 20px; font-weight: 600; margin-bottom: 10px;}
main #section0 .layer .res_agree .ra_box{ background-color: #eee; padding: 10px;margin-bottom: 10px; color: #666!important;}
main #section0 .layer .res_agree .ra_info{color: #ee5108;margin-bottom: 10px; font-size: 14px;}
main #section0 .layer .res_agree .ra_close{position: absolute; top:10px; right: 5px; cursor:pointer;}
main #section0 .layer .res_agree .ra_close::after{content: "\f00d"; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-right: 10px; color:#444; font-size: 24px;}
main #section0 .layer .res_agree .ra_close span{display: none;}
main #section1 { z-index: 2; background: url(../img/main_bg2.jpg) center center no-repeat; background-size: cover; }
main #section1 .layer > div:nth-child(-n+3) a { display: block; width: 100%; height: 100%; color: #fff; padding: 30px 30px 30px 40px;text-align: left; }
main #section1 .layer > div:nth-child(-n+3) h2 { font-size: 30px; margin-bottom: 7px; font-family: 'IBM3'; }
main #section1 .layer > div:nth-child(-n+3) p { font-size: 15px; line-height: 1.6; }
main #section1 .layer > div:nth-child(-n+3) .more { border: 1px solid rgba(255, 255, 255, 0.5); padding: 5px 0; width: 100px; font-size: 14px; margin-top: 50px; text-align: center; }
main #section1 .layer .box1 { background: url(../img/main_box01.jpg) right bottom no-repeat #0679b5;animation:box_btn 0.1s ease;filter: hue-rotate(0deg); }
main #section1 .layer .box2 { background: url(../img/main_box02.jpg) right bottom no-repeat #1a488a;animation:box_btn 0.1s ease;filter: hue-rotate(0deg); }
main #section1 .layer .box3 { background: url(../img/main_box03.jpg) right bottom no-repeat #06918e;animation:box_btn 0.1s ease;filter: hue-rotate(0deg); }
main #section1 .layer .box1:hover,main #section1 .layer .box2:hover,main #section1 .layer .box3:hover{animation:box_btn 0.1s ease;filter: hue-rotate(-30deg);}
@keyframes box_btn{
0%{filter:hue-rotate(0deg);}
50%{filter: hue-rotate(-30deg);}
}
main #section1 .layer .box4 { position: relative; border-top: 1px solid #d2d2d2; border-right: 1px solid #d2d2d2; }
main #section1 .layer .box4 #map { background: url(../img/map.jpg) center center no-repeat; width: 100%; height: 380px; }
main #section1 .layer .box4 .text { background-color: rgba(0, 0, 0, 0.6); color: #fff; padding: 8px 30px; position: absolute; bottom: 0; left: 0; width: 100%; height: 80px; text-align: left;}
main #section1 .layer .box4 .text::before { content: ""; display: block; width: 18px; height: 18px; background: url(../img/main_icon2.png) -18px 0px no-repeat; position: absolute; top: 28px; right: 20px; }
main #section1 .layer .box5 { background: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; height: 80px; }
main #section1 .layer .box5 a { width: 50%; display: block; border-left: 1px solid #d2d2d2; font-size: 20px; font-weight: bold; text-align: center; padding-top: 8px; font-family: 'IBM3'; }
main #section1 .layer .box5 a::before { content: ""; display: inline-block; width: 45px; height: 40px; background: url(../img/main_icon2.png) 0px -60px no-repeat; margin-right: 15px; position: relative; top: 10px; }
main #section1 .layer .box5 a.time::before { background-position: -45px -60px; }
main #section1 .layer .box5 a:hover::before{animation:bg0_btn 0.2s ease-out 1;}
main #section1 .layer .box6 { border: 1px solid #d2d2d2; border-left: 0; padding: 20px 30px; background: #fff; }
main #section1 .layer .box6 .top { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 15px; }
main #section1 .layer .box6 .top p {width: 50%; color: #414141; vertical-align: middle; font-weight: bold; width: 50%; border-bottom: 3px solid #d2d2d2; padding-bottom: 10px; font-family: 'IBM3'; }
main #section1 .layer .box6 .top p.on { color: #0679b5; font-size: 17px; border-bottom-color: #0679b5; }
main #section1 .layer .box6 .top button{height: 30px; }
main #section1 .layer .box6 .top button + .more{ display: inline-block; margin-left: 5px; width: 25px; height: 25px;color: #414141; font-weight: normal;font-size: 19px;
line-height: 20px; vertical-align: middle; padding-top: 0; }
main #section1 .layer .box6 ul { display: none; }
main #section1 .layer .box6 ul.on { display: block; }
main #section1 .layer .box6 ul li { color: #222; margin-top: 7px; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block; width: 100%; font-size: 15px; }
main #section1 .layer .box6 ul li::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #707070; margin-right: 10px; position: relative; top: -2px; }
main #section1 .layer .box7 { position: relative; border-right: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; }
main #section1 .layer .box7 .bx-wrapper .bx-controls { top: 15px; right: 10px; width: auto; text-align: right; }
main #section1 .layer .box7 .bx-wrapper .bx-pager-item a { text-indent: 9999px; border: 1px solid #333; }
main #section1 .layer .box7 .bx-wrapper .bx-pager-item a.active { background: #333; }
main #section1 .layer .box7 .bx-wrapper .bx-controls-auto-item a { background: url(../img/main_icon2.png) -60px 0px no-repeat; }
main #section1 .layer .box7 .bx-wrapper .bx-controls-auto-item a.bx-start { background-position: -78px 0; }
@media (min-width: 1199px) {
main #section0 .layer > div > div > div{right: -150px;opacity: 0; position: relative;}
main #section0 .layer > div > div > div.in-view:nth-child(1){right: 0px; opacity: 1; transition:0.6s 0.2s ease-out; z-index: 1000; }
main #section0 .layer > div > div > div.in-view:nth-child(2){right: 0px; opacity: 1; transition:0.6s 0.4s ease-out }
main #section0 .layer > div > div > div.in-view:nth-child(3){right: 0px; opacity: 1; transition:0.6s 0.6s ease-out }
main #section1 .fp-tableCell { padding-top: 120px; text-align: center; }
main #section1 .layer { display: block; margin: 0 auto; vertical-align: middle; width: 1200px; height: 680px; position: relative;}
main #section1 .layer > div { overflow: hidden; opacity: 0; }
main #section1 .layer .box1 { width: 321px; height: 300px; position: absolute; top: 100px; left: 0; }
main #section1 .layer .box2 { width: 321px; height: 300px; position: absolute; top: 100px; left: 321px; }
main #section1 .layer .box3 { width: 321px; height: 300px; position: absolute; top: 480px; left: 0; }
main #section1 .layer .box4 { width: 553px; height: 380px; position: absolute; top: 100px; left: 642px; }
main #section1 .layer .box5 { width: 642px; position: absolute; top: 400px; left: 0; }
main #section1 .layer .box6 { width: 321px; height: 300px; position: absolute; top: 480px; left: 321px; }
main #section1 .layer .box7 { width: 553px; height: 300px; position: absolute; top: 480px; left: 642px; }
main #section1 .layer .box1.in-view {top: 0px; opacity: 1; transition:0.6s 0.4s ease-out}
main #section1 .layer .box2.in-view {top: 0px; opacity: 1; transition:0.6s 0.6s ease-out }
main #section1 .layer .box3.in-view {top: 380px; opacity: 1; transition:0.6s 0.8s ease-out }
main #section1 .layer .box4.in-view {top: 0px; opacity: 1; transition:0.6s 0.8s ease-out }
main #section1 .layer .box5.in-view {top: 300px; opacity: 1; transition:0.6s 0.8s ease-out }
main #section1 .layer .box6.in-view {top: 380px; opacity: 1; transition:0.6s 1.0s ease-out }
main #section1 .layer .box7.in-view {top: 380px; opacity: 1; transition:0.6s 1.2s ease-out }
}
main #top_btn { display: none; }
.fp-auto-height { height: 160px !important; }
@media (max-width: 1199px) { main #section0 { height: auto !important; }
main #section1 { height: auto !important; background: none; }
main #section1 .fp-tableCell { height: auto !important; }
main #section0 .main_slide > div { padding: 0 30px; }
main #section0 .bx-wrapper .bx-controls { padding-left: 30px; }
main #section0 .layer > div > div { padding-right: 20px; }
main .section { overflow: hidden; }
main #section1 { padding: 20px; }
main #section1 .layer a .more { display: none; }
main #section1 .layer > div:nth-child(-n+3) { background-position: right center; }
main #section1 .layer .box4 { border: 0; }
main #section1 .layer .box4 #map { height: 300px; }
main #section1 .layer .box4 .text { height: auto; padding: 20px 30px; }
main #section1 .layer .box5 { border-right: 1px solid #d2d2d2; }
main #section1 .layer .box6 { border-left: 1px solid #d2d2d2; }
main #section1 .layer .box7 { border: 1px solid #d2d2d2; border-top: 0; margin-bottom: 50px; }
main #section1 .layer .box7 .bx-wrapper .bx-controls { top: auto; bottom: -50px; right: 0; width: 100%; text-align: center; justify-content: center}
}
@media (max-width: 768px) {
main #section0 .main_slide > div { height: 450px; }
main #section0 .main_slide > div.bg0 div#myVideo {min-width: auto;}
main #section0 .bx-wrapper { position: relative; }
main #section0 .bx-wrapper .bx-controls { top: 85px; }
main #section0 .main_slide > div > div { padding-top: 120px; }
main #section0 .main_slide > div > div p.title { font-size: 32px; line-height: 1.4; }
main #section0 .main_slide > div > div p.text { display: none; }
main #section0 .main_slide > div.bg0 > div p.text{ display: inline-block;width: 90%; word-break: keep-all; }
main #section0 .main_slide > div.bg0{overflow:hidden; height: 450px;}
main #section0 .main_slide > div.bg0 div#myVideo .wistia_responsive_wrapper{width:800px!important;height:450px!important;}
main #section0 .main_slide > div.bg0 div#myVideo .wistia_responsive_wrapper iframe{width:800px!important; height:450px!important}
main #section0 .main_slide > div.bg1 { background-image: url(../img/main_slide1_m.jpg);background-position: center top;}
main #section0 .main_slide > div.bg2 { background-image: url(../img/main_slide2_m.jpg);background-position: center top;}
main #section0 .main_slide > div.bg2 > div p.title { font-size: 28px; }
main #section0 .layer > div { display: block; max-width: 100%; height: auto; }
main #section0 .layer > div > div { display: block; padding-top: 0px; padding-right: 0; }
main #section0 .layer > div > div div:nth-child(1) { background: #174277; color: #fff; -webkit-box-shadow: none; box-shadow: none; z-index: 1000;}
main #section0 .layer > div > div div:nth-child(1) h2 { color: #fff; }
main #section0 .layer > div > div div:nth-child(1) p { color: #fff; }
main #section0 .layer > div > div div:nth-child(1) p.time { color: #fff;font-weight: 400;}
main #section0 .layer > div > div div:nth-child(1) .type2 button { background: #000000; }
main #section0 .layer > div > div div:nth-child(2) { background: #f1f1f1; margin-top: 0; -webkit-box-shadow: none; box-shadow: none; }
main #section0 .layer > div > div div:nth-child(2) > p { font-size: 1rem; }
main #section0 .layer > div > div div:nth-child(2) > div { display: block; border-top: 1px solid #acaeaf; padding-top: 20px; }
main #section0 .layer > div > div div:nth-child(2) > div p { width: 100%; text-align: left; font-size: 1.1rem; font-weight: 400; }
main #section0 .layer > div > div div:nth-child(2) > div p span { display: inline-block; margin-right: 10px; font-weight: bold; color: #000; }
main #section0 .layer > div > div div:nth-child(2) > div p + p { border-left: 0; margin-top: 5px; width: 100%;padding-left: 0; }
main #section0 .layer > div > div div:nth-child(3) { margin-top: 0; border-bottom: 1px solid #dddddd; }
main #section0 .layer > div > div div:nth-child(3) a { width: 33.33%; padding: 30px 0; -webkit-box-shadow: none; box-shadow: none; }
main #section0 .layer > div > div div:nth-child(3) a + a { border-left: 1px solid #dddddd; }
main #section0 .layer > div > div > div:nth-child(2) .tel {font-size: 30px;}
main #section1 .layer > div:nth-child(-n+4) h2 {font-size:24px;}
main #section1 .layer > div:nth-child(-n+4) p {font-weight: 300;}
main #section1 .layer .box5 a {font-size:18px}
#section2{overflow:visible;}
main #section0 .main_slide > div.bg0 a{ padding: 7px 10px; font-size: 16px;}
main #section0 .main_slide > div.bg0 a + a{margin-left: 5px;}
main #section0 .main_slide > div.bg0 a::before{font-size: 16px;}
main #section1 .layer > div:nth-child(-n+3) a {padding: 20px 0px 30px 30px;}
main #section1 .layer .box7 img{width: 100%;}
}
/*main영상 세로폭이 넓을때*/
@media (max-width:1900px) and (min-height:1081px) {
main #section0 .main_slide > div.bg0 div#myVideo .wistia_responsive_wrapper{width:177.7vh!important;height:100vh!important;}
main #section0 .main_slide > div.bg0 div#myVideo .wistia_responsive_wrapper iframe{width:177.7vh!important; height:100vh!important}
}
/* 장례식장 */
#funeral { height: calc(100vh - 64px);min-height: 920px; width: 100%; background: url(../img/funeral_bg.jpg) center top; padding-top: 120px; overflow: hidden;background-size: cover; }
#funeral > div { width: 100%; max-width: 1200px; margin: 0 auto; }
#funeral .text { padding-top: 80px; height: 440px; }
#funeral .text p { color: #fff; }
#funeral .text p:nth-child(1) { font-size: 32px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); letter-spacing: -1;}
#funeral .text p:nth-child(2) { color: #ffe381; font-size: 48px;font-family: 'IBM4';text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); }
#funeral .text p:nth-child(2) span{font-family: 'IBM2';}
#funeral .text p:nth-child(3) { font-weight: 400; margin-top: 10px; }
#funeral .con { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
#funeral .con .box { width: 100%; background: rgba(255, 255, 255, 0.8); border-radius: 6px;margin-bottom: 20px; -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); padding: 25px 30px; }
#funeral .con [class^='icon_'] { padding-left: 100px; position: relative; }
#funeral .con [class^='icon_']::before { content: ""; width: 50px; height: 50px; display: block; background: url(../img/funeral_mian.png) 0 0 no-repeat; position: absolute; left: 30px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
#funeral .con [class^='icon_'].icon_1::before { background-position: 0 0; }
#funeral .con [class^='icon_'].icon_2::before { background-position: -50px 0; }
#funeral .con [class^='icon_'].icon_3::before { background-position: -100px 0; }
#funeral .con h2 { font-weight: bold; font-size: 23px; }
#funeral .con .sm_t { color: #555555; font-size: 14px; margin-top: 5px; }
#funeral .con .left { width: 560px; position: relative; }
#funeral .con .left h2 { color: #734631; }
#funeral .con .left .more { color: #666; position: absolute; right: 30px; top: 30px; font-size: 14px; }
#funeral .con .left table { width: 100%; font-size: 15px; text-align: center; margin-top: 10px; }
#funeral .con .left table th { border-top: 1px solid #555; border-bottom: 1px solid #555; color: #333; font-weight: bold; padding: 3px 0; }
#funeral .con .left table td { color: #666; padding: 3px 0; }
#funeral .con .left table td:nth-child(1) { min-width: 30px; }
#funeral .con .left table td:nth-child(2) { color: #333; font-weight: bold; min-width: 60px; }
#funeral .con .left table td:nth-child(3) { text-align: left; }
#funeral .con .left table td:nth-child(3) p {max-width:250px;width: 100%; position: relative; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display:inline-block; }
#funeral .con .left table tbody tr:nth-child(1) td { padding-top: 15px; }
#funeral .con .right { width: 620px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
#funeral .con .right > div{height: 48%;}
#funeral .con .right .top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
#funeral .con .right .top > div:nth-child(2) { border-left: 1px solid #b2b2b2; font-weight: bold; padding-left: 22px; width: 270px; }
#funeral .con .right .top > div:nth-child(2) .tel { color: #496715; font-size: 32px; }
#funeral .con .right .top > div:nth-child(2) .fax { color: #373737; font-size: 20px; }
#funeral .con .right .bot { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
#funeral .con .right .bot .box { width: 48.5%; cursor: pointer;}
#funeral .board_list.funeral{font-size: 15px; border-bottom: 0; margin-top: 10px;}
#funeral .board_list.funeral .board_list_head { background: transparent;}
#funeral .board_list.funeral div.bl_fun3{max-width: 250px;}
#funeral .board_list.funeral div.bl_fun2{font-weight: 600; color: #000;}
#funeral .board_list.funeral .board_list_tr:hover { background: transparent;}
#funeral .board_list.funeral div.bl_fun3 p{ display: inline-block;text-overflow:ellipsis;overflow: hidden;white-space: nowrap; width: 100%; padding-left: 20px; text-align: left; vertical-align: middle;}
#funeral .board_list.funeral .board_list_tr div{ padding: 3px 0; border-top:0}
#funeral .board_list.funeral .board_list_head { padding: 0 ;}
#funeral .board_list.funeral .board_list_head div {padding:5px 0; border-bottom: 1px solid #555 !important;}
#funeral .board_list.funeral div:nth-child(2) div{ padding-top: 10px}
@media (max-width: 1199px) {
#funeral { height: auto; padding-top: 60px; }
#funeral .text { padding: 50px 20px; }
#funeral .con { display: block; padding: 0 20px 50px; }
#funeral .con .left { width: 100%; }
#funeral .con .right { width: 100%; margin-top: 10px; }
#funeral .con .right .top > div:nth-child(1) br { display: none; }
#funeral .con .right .bot { margin-top: 10px; }
}
@media (max-width: 768px) {
#funeral {background-image: url(../img/funeral_bg_m.jpg); background-position: right 60px; background-size: cover;}
#funeral .text { height: auto; text-align: center;}
#funeral .text p:nth-child(1) { font-size: 20px; }
#funeral .text p:nth-child(2) { font-size: 35px;line-height: 1.3; margin-top: 10px; }
#funeral .con .right .top { display: block; }
#funeral .con .right .top > div:nth-child(2) { border-left: 0; border-top: 1px solid #b2b2b2; padding-left: 0; margin-top: 10px; width: 100%; }
#funeral .con .right .bot { margin-top: 0px; }
#funeral .con .box{margin-bottom: 10px;}
}
@media (max-width: 520px) {
#funeral .con [class^='icon_'].icon_1{padding-left: 30px;}
#funeral .con [class^='icon_'].icon_1 .sm_t{padding-right: 80px;}
#funeral .con .right .top > div:nth-child(1) br {display: block; }
#funeral .con [class^='icon_'].icon_1::before{top: 70px; left: auto ; right: 40px;}
#funeral .con [class^='icon_'].icon_2, #funeral .con [class^='icon_'].icon_3{padding: 30px 10px 25px; text-align: center;}
#funeral .con [class^='icon_'].icon_2::before, #funeral .con [class^='icon_'].icon_3::before { position: relative; left: 0px; top: 0%; margin: 20px auto -10px; }
#funeral .con .left table td:nth-child(3) p {max-width:110px;}
#funeral .board_list.funeral .board_list_tr div{padding: 3px 0;font-size: 1rem;}
#funeral .board_list.funeral div.bl_fun2{margin-left: 20px;}
#funeral .board_list.funeral div.bl_fun3{display: block;}
#funeral .board_list.funeral div.bl_fun3 p{width: auto; padding-left: 0px; vertical-align: top; max-width: calc(100% - 40px );}
#funeral .board_list.funeral div.bl_fun4{display: block;}
#funeral .board_list.funeral .board_list_tr { border-bottom: 1px solid #aaa;}
}
/* 장례식장 header, footer */
#header.funeral{background:#222222}
#header.funeral nav{background:#222222}
#header.funeral .top h1 {width: 340px;padding-left:220px; background-size:58%;top: 45px;}
#header.funeral .top h1 p{display:inline-block; color:#fff; border-left:1px solid #555; font-size:27px; height:27px; line-height:1; padding-left:20px; vertical-align:top; position:relative; top:4px}
#header.funeral nav #gnb > ul {justify-content: right;}
#header.funeral nav #gnb > ul > li {max-width: 150px;}
#header.funeral nav #gnb > ul > li > a:hover,#header.funeral nav #gnb > ul > li > a:focus{color:#ffe381}
#header.funeral nav #gnb > ul > li ul { border-right:1px solid #444 ;left:40px;width: 130px; }
#header.funeral nav #gnb > ul > li:first-child > ul { left:17px; width: 150px;}
#header.funeral nav #gnb > ul > li > ul > li > a:hover,#header.funeral nav #gnb > ul > li > ul > li > a:focus{color:#ffe381;}
footer.funeral { background: #292929;}
footer.funeral .top{background:#222222}
footer.funeral .top .common_layer .link_list li:first-child{ color: #fff;}
@media (max-width: 520px) {
.board_list.funeral div.bl_fun1:before { content: '빈소:'; display: inline-block; padding-right: 5px; color: #888; }
.board_list.funeral div.bl_fun2:before { content: '고인:'; display: inline-block; padding-right: 5px; color: #888; }
.board_list.funeral div.bl_fun3:before { content: '상주:'; display: inline-block; padding-right: 5px; color: #888; }
.board_list.funeral div.bl_fun4:before { content: '발인일시:'; display: inline-block; padding-right: 5px; color: #888; }
}
@media (max-width: 1024px){
#header.funeral .top h1{top:13px}
#header.funeral {height: 60px;background: #222222;}
#header.funeral nav{background:#fff}
#header.funeral nav #gnb > ul > li {max-width: 130px;}
#header.funeral nav #gnb > ul > li.on > a { color: #000;}
#header.funeral nav #gnb > ul > li > a {color: #555;}
#header.funeral nav #gnb > ul > li.on > a::before { background-color: #aaa;}
#header.funeral nav #gnb > ul > li > a:hover,#header.funeral nav #gnb > ul > li > a:focus{color:#555}
#header.funeral nav #gnb > ul > li > ul > li > a:hover,#header.funeral nav #gnb > ul > li > ul > li > a:focus{color:#555;}
#header.funeral nav #gnb > ul > li:first-child > ul { left:130px; }
#header.funeral nav #gnb > ul > li > ul > li > a:hover,#header.funeral nav #gnb > ul > li > ul > li > a:focus{color:#ffe381;}
}
@media (min-width: 1025px) {
#header.funeral nav #gnb > ul > li:hover > a::before { background-color: #ffe381; }
}
/*!
* fullPage 3.0.9
* https://github.com/alvarotrigo/fullPage.js
*
* @license GPLv3 for open source use only
* or Fullpage Commercial License for commercial use
* http://alvarotrigo.com/fullPage/pricing/
*
* Copyright (C) 2018 http://alvarotrigo.com/fullPage - A project by Alvaro Trigo
*/
html.fp-enabled,
.fp-enabled body {
margin: 0;
padding: 0;
overflow:hidden;
/*Avoid flicker on slides transitions for mobile phones #336 */
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.fp-section {
position: relative;
-webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */
-moz-box-sizing: border-box; /* <=28 */
box-sizing: border-box;
height: 100%;
}
.fp-watermark{display:none}
.fp-overflow{
display: table-cell;
vertical-align: middle;
height: 100%;
}
.fp-slide {
float: left;
}
.fp-slide, .fp-slidesContainer {
height: 100%;
display: block;
}
.fp-slides {
z-index:1;
height: 100%;
overflow: hidden;
position: relative;
-webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */
transition: all 0.3s ease-out;
}
.fp-section.fp-table, .fp-slide.fp-table {
display: table;
table-layout:fixed;
width: 100%;
}
.fp-tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.fp-slidesContainer {
float: left;
position: relative;
}
.fp-controlArrow {
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit (konqueror) browsers */
-ms-user-select: none; /* IE10+ */
position: absolute;
z-index: 4;
top: 50%;
cursor: pointer;
width: 0;
height: 0;
border-style: solid;
margin-top: -38px;
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.fp-controlArrow.fp-prev {
left: 15px;
width: 0;
border-width: 38.5px 34px 38.5px 0;
border-color: transparent #fff transparent transparent;
}
.fp-controlArrow.fp-next {
right: 15px;
border-width: 38.5px 0 38.5px 34px;
border-color: transparent transparent transparent #fff;
}
.fp-scrollable {
overflow: hidden;
position: relative;
}
.fp-scroller{
overflow: hidden;
}
.iScrollIndicator{
border: 0 !important;
}
.fp-notransition {
-webkit-transition: none !important;
transition: none !important;
}
#fp-nav {
position: fixed;
z-index: 100;
top: 50%;
opacity: 1;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translate3d(0,-50%,0);
}
#fp-nav.fp-right {
right: 17px;
}
#fp-nav.fp-left {
left: 17px;
}
.fp-slidesNav{
position: absolute;
z-index: 4;
opacity: 1;
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
left: 0 !important;
right: 0;
margin: 0 auto !important;
}
.fp-slidesNav.fp-bottom {
bottom: 17px;
}
.fp-slidesNav.fp-top {
top: 17px;
}
#fp-nav ul,
.fp-slidesNav ul {
margin: 0;
padding: 0;
}
#fp-nav ul li,
.fp-slidesNav ul li {
display: block;
width: 14px;
height: 13px;
margin: 7px;
position:relative;
}
.fp-slidesNav ul li {
display: inline-block;
}
#fp-nav ul li a,
.fp-slidesNav ul li a {
display: block;
position: relative;
z-index: 1;
width: 100%;
height: 100%;
cursor: pointer;
text-decoration: none;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span{
height: 12px;
width: 12px;
margin: -6px 0 0 -6px;
border-radius: 100%;
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
border-radius: 50%;
position: absolute;
z-index: 1;
height: 4px;
width: 4px;
border: 0;
background: #333;
left: 50%;
top: 50%;
margin: -2px 0 0 -2px;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span{
width: 10px;
height: 10px;
margin: -5px 0px 0px -5px;
}
#fp-nav ul li .fp-tooltip {
position: absolute;
top: -2px;
color: #fff;
font-size: 14px;
font-family: arial, helvetica, sans-serif;
white-space: nowrap;
max-width: 220px;
overflow: hidden;
display: block;
opacity: 0;
width: 0;
cursor: pointer;
}
#fp-nav ul li:hover .fp-tooltip,
#fp-nav.fp-show-active a.active + .fp-tooltip {
-webkit-transition: opacity 0.2s ease-in;
transition: opacity 0.2s ease-in;
width: auto;
opacity: 1;
}
#fp-nav ul li .fp-tooltip.fp-right {
right: 20px;
}
#fp-nav ul li .fp-tooltip.fp-left {
left: 20px;
}
.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell{
height: auto !important;
}
.fp-responsive .fp-auto-height-responsive.fp-section,
.fp-responsive .fp-auto-height-responsive .fp-slide,
.fp-responsive .fp-auto-height-responsive .fp-tableCell {
height: auto !important;
}
/*Only display content to screen readers*/
.fp-sr-only{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#fp-nav.white ul li a span{background: #fff !important;}