.Reward{text-align:center;margin-left:30px;color:var(--minor);font-size:12px}.Reward .footer_flex{width:42px;height:42px;background-color:#f56c6c;border-radius:50%;position:relative;z-index:10;display:flex;justify-content:center;align-items:center;margin-bottom:8px}.Reward .footer_flex:hover{background-color:var(--theme);cursor:pointer}.Reward .footer_flex:hover .flex_rows{display:block}.Reward .footer_flex .flex_rows{box-shadow:0px 1px 4px 2px var(--theme);cursor:auto;height:200px;width:170px;position:absolute;top:-215px;background:var(--background);display:none;border-radius:8px}.Reward .footer_flex .flex_rows::after{content:"";position:absolute;bottom:-16px;left:0;right:0;margin:auto;width:0px;border:18px solid transparent;border-bottom:none;border-top-color:var(--background);filter:drop-shadow(0px 4px 2px var(--theme))}.Reward .footer_flex .flex_rows .flex-footer{overflow:hidden;margin:10px;position:relative;width:150px;height:180px}.Reward .footer_flex .flex_rows .flex-footer .RewardImg{width:900px;position:absolute;left:0}.Reward .footer_flex .flex_rows .flex-footer .RewardImg li{float:left;overflow:hidden}.Reward .footer_flex .flex_rows .flex-footer .RewardImg li img{width:150px;border-radius:2px}.Reward .footer_flex .flex_rows .flex-footer .RewardBtn{display:inline-flex;border-radius:5px;position:absolute;border:1px solid var(--classC);bottom:0px;left:0}.Reward .footer_flex .flex_rows .flex-footer .RewardBtn li:nth-of-type(n + 2){border-left:1px solid var(--classC)}.Reward .footer_flex .flex_rows .flex-footer .RewardBtn li div{height:20px;font-size:12px;color:var(--routine);padding:2px;border-radius:2px}.Reward .footer_flex .flex_rows .flex-footer .RewardBtn li:hover{cursor:pointer}.imgUpload_btn{margin:-10px auto 5px;text-align:right}.imgUpload_btn span{cursor:pointer;margin-right:5px}.top-social{position:relative;padding: 15px 0;width:250px;display:flex;flex-wrap:wrap;background:var(--background);justify-content:space-around;margin-bottom:15px;border-radius:var(--radius-wrap);box-shadow:var(--box-shadow)}.top-social li{width:50px;text-align:center;position:relative;height:32px}.top-social li a{height:100%}.top-social li div{height:100%}.top-social li img{height:100%}.top-social li .WeChatInner{display:none;position:absolute;box-shadow:0px 1px 4px 2px var(--theme);border-radius:var(--radius-wrap);transition:.7s all ease;background:var(--background);-webkit-transition:.7s all ease;top:-180px;left:-50px;transform:translate3d(0, 16px, 0);width:150px;height:150px;z-index:2}.top-social li .WeChatInner::before{content:"";position:absolute;bottom:-16px;left:0;right:0;margin:auto;display:inline-block;width:0px;border:18px solid transparent;border-bottom:none;border-top-color:var(--background);filter:drop-shadow(0px 4px 2px var(--theme))}.top-social li .WeChatInner img{border-radius:2px;width:140px;height:auto;margin:5px;background:none}.top-social li:hover .WeChatInner{display:block}.pe-social{width:100%}.joe_comment__respond-form .foot{justify-content:flex-start}.joe_comment__respond-form .foot .comment_box{cursor:pointer;text-align:center;color:var(--routine);height:26px;line-height:26px;background:var(--background);opacity:.85;border-radius:13px;width:70px;margin-left:5px}.joe_comment__respond-form .foot .comment_box:hover{background:var(--theme);color:#fff}.joe_comment__respond-form .foot .comment_box .dropdown-menu{cursor:default;position:absolute;top:auto;bottom:100%;margin-bottom:6px;z-index:10;display:none;min-width:160px;padding:5px 0;font-size:14px;text-align:left;list-style:none;background-color:var(--background);color:var(--minor);background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-color:transparent;border-radius:4px;box-shadow:0 0 10px 8px rgba(116,116,116,.08)}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image{width:250px;padding:8px 10px}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image p{margin:0 0 10px}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image p textarea{resize:vertical}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image .form-control{display:block;width:100%;padding:6px 12px;font-size:14px;line-height:1.42857143;border:1px solid #ccc;border-radius:4px;border-color:transparent;background:var(--classD);color:#4e5358;max-height:200px;min-height:90px;box-shadow:none;transition:border-color ease-in-out .15s,background ease-in-out .15s,box-shadow ease-in-out .15s,opacity ease-in-out .3s}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image .text-right{text-align:right}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image .text-right .error{float:left;color:var(--theme);-webkit-animation:5s ease-in-out 0s infinite normal none running shaked;animation:5s ease-in-out 0s infinite normal none running shaked}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image .text-right .but{border-radius:4px;display:inline-block;line-height:1.44;background:var(--theme);color:#fff;padding:.3em 1em}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image .text-right .but:hover{-webkit-animation:5s ease-in-out 0s infinite normal none running shaked;animation:5s ease-in-out 0s infinite normal none running shaked}.joe_comment__respond-form .foot .press-down{background:var(--theme) !important;color:#fff !important}
.joe_main {
   margin-top: 0!important; 
}
.joe_aside { 
   margin-top: 0!important; 
}
.top_img {
    position: relative;
    width: 100%;
    display: flex;
    margin-top: -3.78rem;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: calc(50vh);
    padding-bottom: 0px;
}

.top_img.minImg {
    max-width: 83rem;
    height: 25rem;
    margin: auto
}

.top_img.minImg .infomation .desctitle {
    font-size: 1.5rem
}

.top_img .infomation {
    position: absolute;
    line-height: 1.5;
    margin-left: -25px;
}

.top_img .infomation .title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    text-shadow: 0 .1875rem .3125rem #1c1f21;
    padding: 0 10px;
    letter-spacing: .25rem
}

.top_img .infomation .desctitle {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    font-size: 1.2rem;
    padding: 0 1rem;
    text-shadow: 0 .1875rem .3125rem #1c1f21;
    margin-top: 1.2rem;
    letter-spacing: .05rem
}

.top_img .arrow {
    opacity: 1;
    cursor: pointer;
    margin-top: 1.5rem;
    position: absolute;
    left: 50%;
    bottom: 20%;
    width: 40px;
    height: 40px;
    margin-left: -20px
}

.top_img .arrow .arrow__bou {
    transform: translateX(-50%);
    transition-delay: 5s;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    transform-origin: center bottom;
    -webkit-animation-name: go_down_animation;
    animation-name: go_down_animation;
    -webkit-animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1);
    animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1)
}

.top_img .top_img_bottom {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -2px
}

.top_img .top_img_bottom .waves-svg {
    width: 100%;
    height: 3rem
}

.top_img .top_img_bottom .waves-svg .parallax>use {
    -webkit-animation: move-forever 25s cubic-bezier(0.55,0.5,0.45,0.5) infinite;
    animation: move-forever 25s cubic-bezier(0.55,0.5,0.45,0.5) infinite
}

.top_img .top_img_bottom .waves-svg .parallax>use:first-child {
    -webkit-animation-delay: -2s;
    animation-delay: -2s;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    fill: var(--background);
    opacity: .9
}

.top_img .top_img_bottom .waves-svg .parallax>use:nth-child(2) {
    -webkit-animation-delay: -3s;
    animation-delay: -3s;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    fill: var(--background);
    opacity: .8
}

.top_img .top_img_bottom .waves-svg .parallax>use:nth-child(3) {
    -webkit-animation-delay: -4s;
    animation-delay: -4s;
    -webkit-animation-duration: 13s;
    animation-duration: 13s;
    fill: var(--background);
    opacity: .9
}

.top_img .top_img_bottom .waves-svg .parallax>use:nth-child(4) {
    -webkit-animation-delay: -5s;
    animation-delay: -5s;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    fill: var(--background)
}
.top-social2 {
    height: auto;
    margin-top: 10px;
    margin-left: 13%;
    list-style: none;
    display: inline-block;
}
.top-social2 img {
    height: auto;
    width: auto;
    padding: 6px;
    background: rgba(0, 0, 0, .4);
    border-radius: 50%;
}
.top-social2 li {
    float: left;
    margin-right: 10px
}
.joe_comment__respond-form {
    background: var(--classD)!important;
}
@media (max-width: 768px){.joe_comment__respond-form .replyavatar img{width: 20px;margin:10px;height: 20px;border-radius:10px;box-shadow:var(--box-shadow);-o-object-fit:cover;object-fit:cover}.HeaderImg.minImg{width:100%;height:15rem}.top-social2 {height: auto;margin-top: 10px;margin-left: 17%;list-style: none;display: inline-block;}.top-social2 img {height: 35px;width: 35px;padding: 6px;background: rgba(0, 0, 0, .4);border-radius: 50%;}.top-social2 li {float: left;margin-right: 10px}}
.joe_comment__respond-form .foot .joe_owo__contain {
    position: static
}
.joe_comment__respond-form .foot .joe_owo__contain .box {
    position: absolute;
    bottom: 100%;
    margin-bottom: 6px;
    left: 0px;
    padding-top: 5px;
    border: 1px solid rgba(0,0,0,.15);
    border-color: transparent;
    box-shadow: 0 0 10px 8px rgba(116,116,116,.08);
    max-height:initial;
}
        .container {
            align-items: center;
            display: flex;
            justify-content: center;
            height: 100%;
            width: 100%;
        }
.clearfix {
    zoom:1;
    display:grid;
    height:auto; 
}
.readers-list {
    list-style:none;
    display:
    list-item;
}
.readers-list li {
    position:relative;
    padding:10px;
    float:left;
    margin-top:25px!important;
}
.readers-list li > a {
    border: 1px solid var(--classD);
    display: block;
    height: 85px;
    text-align: center;
    transition:
    all .5s;
    background: var(--classD);
}
.readers-list li>a:hover {
    border-color:#e5e5e5;
}
.readers-list a:hover em {
    top:45px;font-size:1em;
}
.readers-list a:hover span {
    opacity:1;left:50%;
}
.readers-list img {
    position:
    absolute;
    top: -20px;
    left:
    calc(50% - 30px);
    width: 55px;
    height: 55px;
    border-radius: 100%;
    box-shadow: 0 0 6px 3px #0081b1;
    transition:
    all 1s;
    background: #fff0;
}
.readers-list a:hover img {
	-webkit-transform:scale(.7);
	-moz-transform:scale(.7);
	-o-transform:scale(.7);
	-ms-transform:scale(.7);
	transform:scale(.7);
	border-radius: 0;
}
.readers-list em {
	position: absolute;
	top: 60px;
	-webkit-transform: translateX(-50%);
	left: 50%;
	font-style: normal;
	font-size: smaller;
	color: var(--routine);
	transition: all .3s;
	font-family: Helvetica,Arial,"PingFang SC","Microsoft YaHei","WenQuanYi Micro Hei","tohoma,sans-serif"
}
.readers-list span {
	position: absolute;
	left: 20%;
	bottom: 14px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: center;
	-webkit-transform: translateX(-50%);
	width: calc(100% - 30px);
	opacity: 0;
	transition:
	all .3s;
	color: var(--routine);
	font-size: smaller;
	font-family: Helvetica,Arial,"PingFang SC","Microsoft YaHei","WenQuanYi Micro Hei","tohoma,sans-serif"
}
@media(min-width:768px){
    .readers-list li{width:25%;}
}
@media(max-width:767px){
    .readers-list li{width: 50%;height:100%;}
}
@-webkit-keyframes move-forever{0%{
    transform:translate3d(-90px, 0, 0);
    
}
to{transform:translate3d(85px, 0, 0);
    
}

}
@keyframes move-forever{0%{
    transform:translate3d(-90px, 0, 0);
    
}
to{transform:translate3d(85px, 0, 0);
    
}
    
}
.xccx_mac{
    content: " ";
    position: absolute;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #fc625d !important;
    width: 11px;
    height: 11px;
    -webkit-box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    float: right;
    right: 55px;
    top: 17px;
}  

#bjxg {
    display: block;
    position: fixed;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -3;
}

#Loadanimation{
    background-color:var(--classD);
    height:100%;
    width:100%;
    position:fixed;
    z-index:1;
    margin-top:0px;top:0px;
    
}
#Loadanimation-center{
    width:100%;
    height:100%;
    position:relative;
    
}
#Loadanimation-center-absolute{
    position:absolute;
    left:50%;
    top:50%;
    height:200px;
    width:200px;
    margin-top:-100px;
    margin-left:-100px;
    
}
.xccx_object{
    -moz-border-radius:50% 50% 50% 50%;
    -webkit-border-radius:50% 50% 50% 50%;
    border-radius:50% 50% 50% 50%;
    position:absolute;
    border-left:5px solid #87CEFA;
    border-right:5px solid #FFC0CB;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    -webkit-animation:animate 2.5s infinite;
    animation:animate 2.5s infinite;
    
}
#xccx_one{
    left:75px;
    top:75px;
    width:50px;
    height:50px;
    
}
#xccx_two{
    left:65px;
    top:65px;
    width:70px;
    height:70px;
    -webkit-animation-delay:0.1s;
    animation-delay:0.1s;
    
}
#xccx_three{
    left:55px;
    top:55px;
    width:90px;
    height:90px;
    -webkit-animation-delay:0.2s;animation-delay:0.2s;
    
}
#xccx_four{
    left:45px;
    top:45px;
    width:110px;
    height:110px;
    -webkit-animation-delay:0.3s;
    animation-delay:0.3s;
    
}
@-webkit-keyframes animate{50%{
    -ms-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
    
}
100%{-ms-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
    
}
    
}
@keyframes animate{50%{
    -ms-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
    
}
100%{
    -ms-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
    
}
}
.loading_bj{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    background-color: rgba(255,255,255,0.5);
    transition: 0.2s ease-in;
    transition-property: background-color;
    display:none;
}
.spinner2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 40px;
    text-align: center;
    font-size: 10px;
}
.spinner2 > div {
  background-color: var(--minor);
  height: 100%;
  width: 6px;
  display: inline-block;
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.spinner2 .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner2 .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner2 .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner2 .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

        .loading{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .loading span{
            display: inline-block;
            width: 8px;
            height: 100%;
            border-radius: 4px;
            background: lightgreen;
            -webkit-animation: load 1s ease infinite;
        }
        @-webkit-keyframes load{
            0%,100%{
                height: 40px;
                background: lightgreen;
            }
            50%{
                height: 70px;
                margin: -15px 0;
                background: lightblue;
            }
        }
        .loading span:nth-child(2){
            -webkit-animation-delay:0.2s;
        }
        .loading span:nth-child(3){
            -webkit-animation-delay:0.4s;
        }
        .loading span:nth-child(4){
            -webkit-animation-delay:0.6s;
        }
        .loading span:nth-child(5){
            -webkit-animation-delay:0.8s;
        }
    
.cube1, .cube2 {
  background-color: var(--main);
  position: absolute;
  width: 15px;
  height: 15px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
  animation: sk-cubemove 1.8s infinite ease-in-out;
}

.cube2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

@-webkit-keyframes sk-cubemove {
  25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
  50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
  75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
  100% { -webkit-transform: rotate(-360deg) }
}

@keyframes sk-cubemove {
  25% { 
    transform: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  } 50% { 
    transform: translateX(42px) translateY(42px) rotate(-179deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
  } 50.1% { 
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  } 75% { 
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  } 100% { 
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}
.load_1{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);
  /*change these sizes to fit into your project*/
  width:100px;
  height:100px;
}
.load_1 hr{border:0;margin:0;width:40%;height:40%;position:absolute;border-radius:50%;animation:spin 2s ease infinite}

.load_1 :first-child{background:#19A68C;animation-delay:-1.5s}
.load_1 :nth-child(2){background:#F63D3A;animation-delay:-1s}
.load_1 :nth-child(3){background:#FDA543;animation-delay:-0.5s}
.load_1 :last-child{background:#193B48}

@keyframes spin{
  0%,100%{transform:translate(0)}
  25%{transform:translate(160%)}
  50%{transform:translate(160%, 160%)}
  75%{transform:translate(0, 160%)}
}
.loader {
  height: 100%;
  position: relative;
  margin: auto;
  width: 400px;
}
.loader_overlay {
  width: 150px;
  height: 150px;
  background: transparent;
  box-shadow: 0px 0px 0px 1000px rgba(255, 255, 255, 0.67), 0px 0px 19px 0px rgba(0, 0, 0, 0.16) inset;
  border-radius: 100%;
  z-index: -1;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.loader_cogs {
  z-index: -2;
  width: 100px;
  height: 100px;
  top: -120px !important;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.loader_cogs__top {
  position: relative;
  width: 100px;
  height: 100px;
  -webkit-transform-origin: 50px 50px;
          transform-origin: 50px 50px;
  -webkit-animation: rotate 10s infinite linear;
          animation: rotate 10s infinite linear;
}
.loader_cogs__top div:nth-of-type(1) {
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}
.loader_cogs__top div:nth-of-type(2) {
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
}
.loader_cogs__top div:nth-of-type(3) {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.loader_cogs__top div.top_part {
  width: 100px;
  border-radius: 10px;
  position: absolute;
  height: 100px;
  background: #f98db9;
}
.loader_cogs__top div.top_hole {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: white;
  position: absolute;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.loader_cogs__left {
  position: relative;
  width: 80px;
  -webkit-transform: rotate(16deg);
          transform: rotate(16deg);
  top: 28px;
  -webkit-transform-origin: 40px 40px;
          transform-origin: 40px 40px;
  -webkit-animation: rotate_left 10s .1s infinite reverse linear;
          animation: rotate_left 10s .1s infinite reverse linear;
  left: -24px;
  height: 80px;
}
.loader_cogs__left div:nth-of-type(1) {
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}
.loader_cogs__left div:nth-of-type(2) {
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
}
.loader_cogs__left div:nth-of-type(3) {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.loader_cogs__left div.left_part {
  width: 80px;
  border-radius: 6px;
  position: absolute;
  height: 80px;
  background: #97ddff;
}
.loader_cogs__left div.left_hole {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: white;
  position: absolute;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.loader_cogs__bottom {
  position: relative;
  width: 60px;
  top: -65px;
  -webkit-transform-origin: 30px 30px;
          transform-origin: 30px 30px;
  -webkit-animation: rotate_left 10.2s .4s infinite linear;
          animation: rotate_left 10.2s .4s infinite linear;
  -webkit-transform: rotate(4deg);
          transform: rotate(4deg);
  left: 79px;
  height: 60px;
}
.loader_cogs__bottom div:nth-of-type(1) {
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}
.loader_cogs__bottom div:nth-of-type(2) {
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
}
.loader_cogs__bottom div:nth-of-type(3) {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.loader_cogs__bottom div.bottom_part {
  width: 60px;
  border-radius: 5px;
  position: absolute;
  height: 60px;
  background: #ffcd66;
}
.loader_cogs__bottom div.bottom_hole {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background: white;
  position: absolute;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
/* Animations */
@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate_left {
  from {
    -webkit-transform: rotate(16deg);
            transform: rotate(16deg);
  }
  to {
    -webkit-transform: rotate(376deg);
            transform: rotate(376deg);
  }
}
@keyframes rotate_left {
  from {
    -webkit-transform: rotate(16deg);
            transform: rotate(16deg);
  }
  to {
    -webkit-transform: rotate(376deg);
            transform: rotate(376deg);
  }
}
@-webkit-keyframes rotate_right {
  from {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  to {
    -webkit-transform: rotate(364deg);
            transform: rotate(364deg);
  }
}
@keyframes rotate_right {
  from {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  to {
    -webkit-transform: rotate(364deg);
            transform: rotate(364deg);
  }
}

#www_tobiec_cn {
    display: block;
    position: fixed;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1
}

/* 氓聫鈥姑┾€溌久β犅访ヂ悸� */
.Xc_Friends {
    display: block;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-bottom: 15px;
    padding-top: 20px;
    
}
.Xc_Friends ul a {
    display: flex;background: var(--classD);
    position: relative;
    border-radius: var(--radius-wrap);
    overflow: hidden;
    letter-spacing: 0;
    flex-direction: column;
    justify-content: center;
    border: 2px solid var(--background);
    
}
.Xc_Friends ul a:active {
    scale: .98;
    
}
.Xc_Friends ul a:hover {
    background: rgb(var(--classD) / 70%);
    color: white;
    box-shadow: 0 1.2rem 1rem -1rem rgb(var(--classD) / .2);

    
}
.Xc_Friends ul a:hover:before {
    left: 1rem;opacity: 1;
    
}
.Xc_Friends ul .Xc_items_all {
    padding: 15px;
    padding-top: 22px;
    padding-bottom: 20px;
    position: relative;
    text-align: center;
    transition: all .5s;
    
}
.Xc_Friends ul a:hover .Xc_items_all {
    filter: blur(20px) opacity(0);
    transform: scale(0.5);
    
}
.Xc_Friends ul .avatar {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border: .125rem solid rgba(195,195,195,.4);
    transition: all .5s;
    padding: 1px;
    box-shadow: 0 0 15px 0px rgb(0 0 0 / 10%);
    object-fit: cover;
    
}
.Xc_Friends ul .Xc_linkbg {
    width: 100%;
    height: 100%;
    transition: all .5s;
    filter: opacity(.15) blur(30px) saturate(1.8);
    top: 0;
    object-fit: cover;
    object-position: top;
    position: absolute;
    transform: scale(1.1);
    
}
.Xc_Friends ul a:hover .Xc_linkbg {
    filter: opacity(0.95) blur(0)
    ;transform: scale(1);
    
}
.Xc_items_name, .Xc_items_desc {
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-transform: capitalize;
    padding-top: 10px;
    font-size: 15px;
    
}
.Xc_items_desc {
    font-size: 13px;
    color: #eee;
    
}

.joe_post .j-floor {
	position: absolute;
	top: 15px;
	bottom: 0;
	left: -20px;
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%)
}

.joe_post .j-floor .contain {
	position: -webkit-sticky;
	position: sticky;
	transition: top 0.5s;
	background: var(--background);
	box-shadow: var(--box-shadow);
	padding: 15px;
	border-radius: var(--radius-wrap);
	width: 200px;
	max-height: 444px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch
}

.joe_post .j-floor .contain .title {
	font-weight: 700;
	color: var(--main);
	margin-bottom: 15px;
	font-size: 15px;
	line-height: 20px
}

.joe_post .j-floor .contain ul li ul {
	padding-left: 2em
}

.joe_post .j-floor .contain ul li ul ul {
	padding-left: 0
}

.joe_post .j-floor .contain ul li a {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: pointer;
	padding-left: 5px;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--routine);
	line-height: 32px
}

.joe_post .j-floor .contain ul li a:hover {
	color: var(--theme)
}

.joe_post .j-floor .contain ul li.visible>a {
	color: var(--theme)
}

.joe_post .j-floor .contain .toc-marker {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none
}

.joe_post .j-floor .contain .toc-marker path {
	transition: all 0.35s
}
.joes_comment__close{text-align: center; width: 100%; height: 100%;}
.joe_comment_Xclogin{margin-top:15px;margin-bottom:25px;color:var(--main);font-size:16px}
.joes_comment__close a{background:var(--theme);color:var(--main);padding:6px 15px;border-radius:4px;font-size:14px}
.joes_comment__close .joe_comment_Xcbottom{width:100%;padding:20px 0;display:flex;align-items:center;justify-content:center;color:var(--routine);font-size:12px;margin-top:10px}
.joe_comment_Xcbottom::after,.joe_comment_Xcbottom::before{content:"";background:var(--classC);max-width:20%;height:1px;margin:0 1em;flex:1}
.joe_comment_Xcbottom::after,.joe_comment_Xcbottom::before{content:"";background:var(--classC);max-width:20%;height:1px;margin:0 1em;flex:1}

.joe_footer .joe_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 65px;
    flex-direction: column;
    padding: 10px;
}
.joe_footer .joe_container .run {
    margin: 0;
}
.joe_footer .item {
    padding: 3px 0px;
}

.joe_detail__agree .agree .icon{
   background: var(--background) !important;
   box-shadow: 0 0 1px rgba(0,0,0,0.1), 0 0px 8px #c0c4cc;
}
.joe_detail__agree .agree .icon.active {
    background: var(--background);
    box-shadow: 0 0 1px rgba(0,0,0,0.1), 0 0px 8px #c0c4cc;
}

.joe_detail__agree .agree .sponsorship {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    box-shadow: 0 0 1px rgba(0,0,0,0.1), 0 0px 8px #c0c4cc;
    background: var(--background);
    cursor: pointer;
    margin-bottom: 8px
}

.typecho-loginzan {
    padding: 30px 10px 10px;
    width: 100%;
    text-align: center;
    background: var(--top);
    border-radius: var(--radius-wrap);
    box-shadow: var(--box-shadow)
}

#goodcoverzan {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1001;
    -moz-opacity: .8;
    opacity: .7
}

#codezan {
    position: absolute !important;
    padding: 10px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    z-index: 1002;
    display: none
}

#ClickMezan svg {
    fill: var(--routine);
    position: relative
}

@media (max-width: 1200px) {
.Xc_Friends {
    grid-template-columns: repeat(4, 1fr);
}
.joe_post .j-floor {
    display: none;
}
.joe-stretch {
    display: none;
}
}
@media (max-width: 992px) {
.Xc_Friends {
    grid-template-columns: repeat(3, 1fr);
}
.joe_post .j-floor {
    display: none;
}
.joe-stretch {
    display: none;
}
}
@media (max-width: 768px) {
.top_img .arrow {
    left: 52%;
    bottom: 10%;
    margin-left: -10px;
}
.top_img .infomation {
    margin-top: -15px;
    margin-left: -5px;
}
.top_img .infomation .title {
    font-size: 1.2rem;
    margin-left: 15px;
}

.top_img .infomation .desctitle {
    font-size: .875rem;
}
.top_img {
    margin-top: 0;
    height: calc(30vh + 30px) !important;
    padding-bottom: 0px !important;
}
.top_img .dz {
    display: none;    
}
.joe_post .j-floor {
    display: none;
}
.joe-stretch {
    display: none;
}
.Xc_Friends {
    grid-template-columns: repeat(2, 1fr);
}
.tab-wrapper > label {
    margin: 0 2rem 0 -2rem;
    
}
.tab-wrapper {
    grid-template-columns: auto auto auto 1fr;
    
}
.Xc_Friends ul .Xc_items_all {
    padding: .5rem;
    filter: none !important;
    transform: none !important;
    
}
.Xc_Friends ul .Xc_linkbg {
    margin: 0 0 -1.7rem;
    position: relative;
    filter: opacity(2) blur(0) saturate(1);
    aspect-ratio: 5 / 3;
    border-radius: 0 0 250px 250px / 0 0 50px 50px;
    
}
.Xc_Friends ul .avatar {
    height: 45px;
    width: 45px;
    
}
.Xc_Friends ul a:hover:before {
    left: .5rem;
    top: .5rem;
    
}
.Xc_Friends ul .Xc_items_all {
    padding-bottom: 15px;
}
}