* { margin: 0; padding: 0; list-style:none;}
body { min-width: 1300px; font-family: Microsoft YAHEI,Arial,Helvetica, sans-serif; font-size: 12px; color: #333; background: url(../images/bg.jpg) no-repeat center top / cover;}
a { color: #333; text-decoration: none;}
a:hover { text-decoration: none;}
img { border: 0;}
.warp { width: 1300px; margin: 0 auto;} 
.clear { clear: both;}
.fl { float: left;}
.fr { float: right;}
#VCode { cursor: pointer;}
input[type=button],
input[type=submit],
input[type=file],
button { cursor: pointer; -webkit-appearance: none;}
textarea { -webkit-appearance: none;}
::-webkit-input-placeholder { color: #333;} 
:-moz-placeholder { color: #333;} 
::-moz-placeholder { color: #333;}
:-ms-input-placeholder { color: #333;} 

/*祭祀*/
.cemetery { width: 100%; height: calc(100vh - 170px); padding-top: 170px; overflow: hidden; background: url(../images/jsbg.png) no-repeat center top / cover; position: relative; z-index: 3;}
.cemetery .word { width: 145px; height: 260px; margin: 0 auto; position: relative;}
.cemetery .word .img { width: 45px; height: 65px; margin: 0 auto 10px auto; border: 2px solid #333; border-radius: 2px; overflow: hidden;}
.cemetery .word .img img { display: block; width: 45px; height: 65px; -webkit-filter: grayscale(1); filter: gray; filter: grayscale(1);}
.cemetery .word .jng,
.cemetery .word .jng img { width: 99px; height: 60px;}
.cemetery .word h3 { width: 145px; font-size: 18px; color: #c31818; letter-spacing: 2px;}
.cemetery .word h3 b { display: block; min-width: 25px; max-width: 50px; height: 105px; line-height: 25px; text-align:center; writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; writing-mode: tb-lr; overflow: hidden; position: relative; left: 50%; transform: translateX(-50%);}
.cemetery .word h3 .hgt { height: 130px;}
.cemetery .word h3 span { display: block; line-height: 145px; font-weight: 500; font-size: 16px; writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; writing-mode: tb-lr;}
.cemetery .word p { width: 40px; writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; writing-mode: tb-lr; position: absolute; right: 0; bottom: 0;}
.cemetery .word p span { display: block; line-height: 20px; font-size: 12px; color: #000; letter-spacing: 1px; writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; writing-mode: tb-lr;}
.cemetery .botms { width: 1200px; margin: auto; padding: 15px 10px; border-radius: 10px; background: rgba(0,0,0,0.2); position: absolute; left: 0; right: 0; bottom: 15px; z-index: 9999;}
.cemetery .botms li { float: left; width: calc(100% / 7 - 20.5px); cursor: pointer; padding: 5px; margin: 0 5px; border-radius: 6px; overflow: hidden; background: #fff;}
.cemetery .botms li .img { float: left; width: 60px; height: 60px; border: 2px solid #d19c43; border-radius: 6px; overflow: hidden;background-image: linear-gradient(-45deg,#1e2e5f,#4a63ad,#1e2e5f); -webkit-transition: all .5s ease; transition: all .5s ease;}
.cemetery .botms li .img img { display: block; width: 60px; height: 60px;}
.cemetery .botms li .msg { float: right; width: calc(100% - 75px);}
.cemetery .botms li .msg h3 { line-height: 35px; font-size: 16px; color: #333; -webkit-transition: all .5s ease; transition: all .5s ease;}
.cemetery .botms li .msg p { line-height: 30px; font-size: 14px; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.cemetery .botms li:hover .img { background-image: linear-gradient(-45deg,#7f0f13,#d03234,#7f0f13)}
.cemetery .botms li:hover .msg h3 { color: #d03234;}

.cemetery .wreath { width: 930px; height: 245px; margin: auto; position: relative; left: 0; right: 0; top: -60px; z-index: 2;}
.cemetery .wreath .img { display: none; width: 245px; height: 245px; background-repeat: no-repeat; background-position: center; background-size: 100%; position: relative;}
.cemetery .wreath .fl { left: -40px;}
.cemetery .wreath .fr { right: -40px;}
.cemetery .zhuo { width: 350px; height: 100px; margin: auto; position: relative; left: 0; right: 0; top: -100px; z-index: 2;}
.cemetery .zhuo .flower { width: 100%; position: absolute; top: 65px;}
.cemetery .zhuo .flower span,
.cemetery .zhuo .fruits,
.cemetery .zhuo .fragrant,
.cemetery .zhuo .wine { display: block; width: 100px; height: 100px; background-repeat: no-repeat; background-position: center; background-size: 100%; position: absolute; bottom: 0;}
.cemetery .zhuo .flower .zuo { left: -160px;}
.cemetery .zhuo .flower .you { right: -160px;}
.cemetery .zhuo .fruits { left: 0;}
.cemetery .zhuo .fragrant { margin: 0 auto; left: 0; right: 0;}
.cemetery .zhuo .wine { right: 0;}
.cemetery .wreath .img,
.cemetery .zhuo .flower,
.cemetery .zhuo .fruits,
.cemetery .zhuo .fragrant,
.cemetery .zhuo .wine { display: none;}

.cemetery .bows { width: 100%; height: 360px; position: relative; top: -280px; z-index: 3;}
.cemetery .bows p { width: 200px; height: 360px; background: url(../images/js11.png) no-repeat 0 0;}
.cemetery .bows .lft { width: 65%; position: absolute; left: 0;}
.cemetery .bows .lft p { background-position: 0 0;}
.cemetery .bows .cent { width: 20%; position: absolute; left: 45%;}
.cemetery .bows .cent p { background-position: 0 -1295px;}
.cemetery .bows .rgt { width: 55%; position: absolute; left: 45%;}
.cemetery .bows .rgt p { background-position: 0 -868px;}

/*云*/
.dynamic-area1 { width: 100%; height: 100%; background: url(../images/poster-drop-animate2.png) repeat-x 0px 0px; background-size: cover; animation: posterDrop1 3000s linear infinite; position: absolute; top: 0; left: 0; z-index: 1;}
@keyframes posterDrop1 {
    from { background-position: 0 0;}
    to { background-position: -4000% 0;}
}
.dynamic-area2 { width: 100%; height: 100%; background: url(../images/poster-drop-animate1.png) repeat-x 0px 0px; background-size: cover; animation: posterDrop2 5000s linear infinite; position: absolute; top: 0; left: 0; z-index: 2;}
@keyframes posterDrop2 {
  from { background-position: 0 0; }
    to { background-position: -30000% 0; }
}

/*祈福内容*/
.blesmsg { width: 100%; height: 90px; background-image: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0)); position: fixed; left: 0; top: 0; z-index: 999999;}
.blesmsg .swiper-container { width: 100%; height: 100%;}
.blesmsg .swiper-wrapper { transition-timing-function:linear !important;}
.blesmsg .swiper-slide { display: flex; line-height: 60px; font-size: 18px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.blestank { display: none; width: 500px; height: 40px; padding: 10px; border-radius: 4px; margin: auto; overflow: hidden; background: #fff; position: absolute; left: 0; right: 0; top: -70px; z-index: 999;}
.blestank input { display: block; float: left; width: 400px; height: 40px; line-height: 40px; font-size: 14px; color: #333; padding: 0 10px; border: 1px solid #ddd; border-right: none; border-radius: 4px 0 0 4px; background: #fff;}
.blestank .btn { width: 79px; height: 42px; line-height: 42px; font-weight: bold; color: #fff; border-color: #f00; border-radius: 0 4px 4px 0; background: #f00;}

/*左侧、右侧*/
.cemetery .colft,
.cemetery .colrt { line-height: 40px; position: fixed; top: 15%; z-index: 99999;}
.cemetery .colft { width: 80px; left: 10px;}
.cemetery .colft a { display: block; width: 80px; font-size: 14px; color: #fff; text-align: center; margin-bottom: 10px; border-radius: 4px; background: rgba(0,0,0,0.65); -webkit-transition: all .5s ease; transition: all .5s ease;}
.cemetery .colft a:hover,
.cemetery .colft .on { background: #c31818;}
.cemetery .colrt { width: 120px; right: 10px;}
.cemetery .colrt li { height: 40px; margin-bottom: 10px; position: relative;}
.cemetery .colrt li span { display: block; width: calc(100% - 20px); height: 40px; line-height: 40px; font-size: 13px; color: #fff; cursor: default; padding: 0 10px; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: rgba(0,0,0,0.65); position: relative;}
.cemetery .colrt li span i { display: block; float: left; width: 20px; height: 20px; margin: 10px 5px 10px 0; background: url(../images/yiny.png) no-repeat center / 20px; -webkit-transition: all .5s ease; transition: all .5s ease;}
.cemetery .colrt li span::after { display: none; content: ""; width: 20px; height: 1px; -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transform: rotate(135deg); transform: rotate(135deg); background: #f00; position: absolute; left: 10px; top: 20px; z-index: 2;}
.cemetery .colrt li p { display: none; width: 120px; padding-right: 5px; position: absolute; top: 0; right: 120px; z-index: 2;}
.cemetery .colrt li p a { display: block; width: calc(100% - 20px); line-height: 40px; font-size: 12px; color: #fff; cursor: default; padding: 0 10px; margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 4px; background: rgba(0,0,0,0.65); -webkit-transition: all .5s ease; transition: all .5s ease;}
.cemetery .colrt li p a:hover { background: #f00;}
.cemetery .colrt li:hover p { display: block;}
.cemetery .colrt li span.on i { animation: rotate 3s linear infinite;}
.cemetery .colrt li span.off::after { display: block;}
@keyframes rotate {
	from { transform: rotate(0deg);}
    to { transform: rotate(360deg);}
}