body {
    font-family: "Microsoft Yahei";
    font-size: 16px;
    background-color: #fff;
    color: #230f08;
    margin: auto;
    max-width: 800px;
    width: 100%;
}

article { margin-bottom: 120px;}

img {
    max-width: 100%;
}

ul {
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: #251905;
}

h4 A {
    font-family: "Microsoft Yahei";
}


.header a {
    color: #f1d068;
    -webkit-text-stroke: 1px #6a5309;
    background: linear-gradient(45deg, #fff, #ffcebc);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* color: transparent; */
}



.text-gray { color: #9a9a9a; }

.logo img {
    margin: 10px;
    max-height: 160px;
    height: 30vw;
}


.top_bg .logo img {
    margin-top: 10px;
}

.top_bg A.logo {
    display: block;
    margin: auto;
    text-align: center;
}


@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

.img-rotate {
    -webkit-transform: rotate(360deg);
    animation: rotation 3s linear infinite;
    -moz-animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
    -o-animation: rotation 3s linear infinite;
}

.turn {
   animation:turn 3s linear infinite;
}

/*
  turn : 定义的动画名称
  1s : 动画时间
  linear : 动画以何种运行轨迹完成一个周期
  infinite :规定动画应该无限次播放
 */

@keyframes turn {

  0%{-webkit-transform:rotate(0deg);}
  25%{-webkit-transform:rotate(90deg);}
  50%{-webkit-transform:rotate(180deg);}
  75%{-webkit-transform:rotate(270deg);}
  100%{-webkit-transform:rotate(360deg);}

}


@keyframes rotateY {
  0% {
    transform: rotateY(0deg);
  }

  50% {
    transform: rotateY(0deg);
  }

  80% {
    transform: rotateY(360deg);
  }

  100% {
    transform: rotateY(0deg);
  }

}

.imgRotateY {
  animation: rotateY 3s linear infinite;
}

.separate {
    height: 10px;
}


/* ============ footer ================= */

.footer {
    background-image: url("/static/www/images/nav-bg.png");
    background-size: cover;
    position: fixed;
    bottom: 0;
    max-width: 800px;
    width: 100%;
}

.footer .contact-foot {
    padding: 10px;
    background-color: hsl(36, 67%, 49%);
    background-image:
    radial-gradient(at 0% 0%, hsl(36, 95%, 57%) 0px, transparent 50%), /*左上*/
    radial-gradient(at 50% 50%, hsl(36, 96%, 80%) 0px, transparent 50%), /* 左中 */
    radial-gradient(at 100% 100%, hsl(36, 87%, 39%) 0px, transparent 50%);

    color: #87590d;
    text-shadow: 1px 1px #fff;
    text-align: center;
}


.footer .qrcode { padding: 20px; text-align: center; }
.footer .qrcode img { max-width: 70vw; margin: auto}


/* ======================== staff-detail ===========================================*/

#staff-detail {
    min-height: 70vh;
    max-width: 800px;
    padding: 5px;
    margin: auto;
}

#staff-detail .headpic {
    max-width: 100%;
    margin: auto;
    text-align: center;
}


#staff-detail .search-result { padding: 20px; border:1px solid #eee; margin-bottom: 30px; }
#staff-detail .search-result .monk {margin-top: 30px; border-top:1px solid #eee;}
#staff-detail .search-result .row { padding: 10px; border-bottom:1px solid #eee; }
#staff-detail .search-result .row .t { border-right:1px solid #eee;  text-align: center}
#staff-detail .search-result .row .d { color: #f58d06; padding-left: 20px;}


/* ======================== temple-detail ===========================================*/


#temple-detail .headpic {
    max-width: 100%;
    margin: auto;
    text-align: center;
}

#temple-detail .temple {margin-top: 30px; border-top:1px solid #eee;}
#temple-detail .temple .title { text-align: center; font-size: 2em; color: #ffb649; border-bottom: 1px solid #eee; padding: 10px; margin-bottom: 10px; }
#temple-detail .row { padding: 10px; border-bottom:1px solid #eee; }
#temple-detail .row .t { border-right:1px solid #eee;  text-align: center}
#temple-detail .row .d { color: #f58d06; padding-left: 20px;}



/* ======================== case-list ===========================================*/

#case-list .case_list {
    padding: 20px;
}

#case-list .right ul {
    overflow: hidden
}

#case-list .right ul li {
    float: left;
    padding: 10px;
    max-width: 25%;
    text-align: center;
}

#case-list .right ul li .border {
    border: 1px solid #b0a2a2;
    padding: 10px;
}

#case-list .right ul li img {
    max-width: 90%;
}


#case-list .flex-main {
    display: flex;
    padding: 20px 0;
}

#case-list .flex-main .left {
    width: 200px;
    max-width: 20vw;
    background-color: #60adff;
    padding: 10px;
}

#case-list .flex-main .left a {
    color: #ffffff;
}

#case-list .flex-main .right {
    padding: 6px
}


#case-list .left .t {
    border: 1px solid #fff;
    border-radius: 10px;
    padding: 8px 20px;
    color: #ff7000;
}

#case-list .left ul {
    padding: 10px;
}

.czy2wm {
    text-align: center;
}


/* ======================== case-list-m ===========================================*/
#case-list-m .flex-ul {
    display: flex;
    display: -webkit-flex; /* Safari */
    flex-wrap: wrap
}

#case-list-m .t {
    border: 1px solid #fff;
    border-radius: 10px;
    padding: 8px 20px;
    color: #ff7000;
}

#case-list-m .childs ul {
    overflow: hidden;
}

#case-list-m .childs ul li {
    float: left;
    margin: 10px;
}

#case-list-m .siblings ul {
    overflow: hidden;
}

#case-list-m .siblings ul li {
    float: left;
    margin: 10px;
}


#case-list-m .case_list ul {
}

#case-list-m .case_list ul li {
    width: 50%;
    padding: 10px;
}


/* ======================== web list ===========================================*/

.nav { padding: 10px; background-color: #dab382; margin-bottom: 20px; }
.nav .sep { padding: 0 15px; }


#list {
    min-height: 600px;
}

#list .detail {

}

#list ul {
    overflow: hidden
}

#list ul li {
    padding: 10px;
}

#list .right ul li::before {
    content: "•";
    color: #6b2112
}

#list .flex-main {
    display: flex;
    padding: 10px 0;
}

#list .flex-main .left {
    width: 200px;
    max-width: 20vw;
    background-color: #60adff;
    padding: 10px;
}

#list .flex-main .left a {
    color: #ffffff;
}

#list .flex-main .right {
    padding: 3px 10px;
}


.ext-info { padding: 20px 10px; font-size: .8em; margin-bottom: 30px; color: #ccc;}
.ext-info .left { float: left; }
.ext-info .right { float: right; }



/* ======================== list-case ===========================================*/

.case-cover { width: 100%;  }



/* ======================== web detail ===========================================*/


#detail .detail {
    padding: 5px;
}

#detail .ttl {
    font-size: 1.5em;
    text-align: center;
    padding: 20px;
    border-bottom: 1px solid #ccc;
}

#detail .content {
    padding: 20px;
    line-height: 2em;
}

#detail .info {
    font-size: 0.8em;
    text-align: right;
    padding: 10px 20px;
    color: #857472;
}

.navigate { position: fixed; bottom: 30px; right: 10px; }
.navigate .nav-items { background-color: #bd9e80; padding: 20px; display: none; color:#fff; }
.navigate .nav-items a { color:#fff; }
.navigate .nav-items li {  padding: 5px;  }

.nav-list-icon {  z-index: 10000; opacity:0.8; color: #fff; float: right; font-size: 1.6em;  padding:2px; width: 30px; height: 30px; background-color: #895a5a; }



#-------------------- 教职人员首页 staff-index --------------



#-------------------- 教职人员详情页 staff-detail --------------


#staff-detail .detail {background-color: #fff;}
#staff-detail .detail .monk { background-color: #fff;  }
#staff-detail .detail .row { margin: 10px; display: flex; border-bottom: 1px solid #eee; padding: 6px;}
#staff-detail .detail .row .t {  text-align: center; font-weight: 200; font-size: 0.9em;}
#staff-detail .detail .row .d { color: #f58d06; padding-left: 20px; }