html, body {
    margin: 0;
    padding: 0;
    -webkit-user-drag: none;
    /*cursor: url(/images/yuhou_tree.cur), auto;*/
    /*scrollbar-color: #ccc #fff;*/
    scrollbar-width: thin;
}
html {
    font-size: 16px;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    min-height: 100%;
}
body {
    font-family: Verdana,Arial,Helvetica,"Microsoft YaHei","微软雅黑","宋体",sans-serif;
    font-weight: normal;
    line-height: 1.6;
    font-size: 1rem;
    background-attachment: fixed;
}
a,
a:hover,
a:active {
    background-color: transparent;
    text-decoration: none;
}
audio,
video {
    border-radius: 0.5rem;
    height: auto;
    max-width: 100%;
    min-height: 50px;
    margin: 2px auto;
}
img {
    border: 0;
}
form, td, th, ul, li {
    margin: 0;
    padding: 0;
}
form { width:100%; }
ul, li {
    list-style: none;
}
table {
    border-collapse: collapse;
    border: 0;
    border-spacing: 0;
}
.form-control:focus,
.form-control,
.form-control1:focus,
.form-control1,
textarea {
    font-size: 1.125rem;
    line-height: 1.6;
}
select,
input[type="date"],
input[type="email"],
input[type="password"],
input[type="text"] {
    font-size: 1.125rem;
    outline: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    font-size: 1.125rem;
    -webkit-appearance: button;
    cursor: pointer;
    overflow: visible;
}
input[type="radio"],
input[type="checkbox"] {
    cursor: pointer;
    padding: 0;
}
input[type="file"] {
    background-color: #bff9d5;
    border: 1px solid #8db6bb;
    cursor: pointer;
    border-radius: 8px;
    font-weight: bold;
    height: auto;
}
button[disabled],
html input[disabled] {
    cursor: default;
}
textarea,
select,
button,
input {
    outline: none;
}
input[type="file"]::file-selector-button {
    cursor: pointer;
    border-radius: 0.5rem;
    border: 1px solid #808080;
    font-size: 1.125em;
}
input[type="file"],
select {
    cursor: crosshair;
}

.PosAbs {
    position: absolute;
}
.PosRel {
    position: relative;
}
.flex0,
.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.flex {
    width: 100%;
}
.flex-v {
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
.flex-wrap {
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
}
.flex-align-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.flex-content-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.flex-content-between {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.flex-content-around {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}
.flex-1 {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.flex-2 {
    -webkit-box-flex: 2;
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2;
}

h1, .h1 {
    font-size: 1.125rem !important;
    font-weight: bold !important;
}
.txt-art:focus,
.txt-art {
    font-size: 1.125rem;
    line-height: 1.9;
}
.txt-max:focus,
.txt-max {
    font-size: 1.25rem;
}
.txt-big:focus,
.txt-big {
    font-size: 1.125rem;
}
.txt-default:focus,
.txt-default {
    font-size: 1rem;
}
.txt-lit:focus,
.txt-lit {
    font-size: 0.875rem;
}
.txt-mini:focus,
.txt-mini {
    font-size: 0.75rem;
}
.text-fit {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*Canvas特效*/
#CanvasContainer {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    z-index: 0;
}
#CanvasContainer,
#YuhouCanvas,
.hide {
    display: none;
}
/*全局设置及工具*/
.container {
    position: relative;
    margin: 0 auto;
    padding: 0.25rem;
    z-index: 2 !important;
}
.container-fixed img,
.container-fluid img,
.container img {
    max-width: 100%;
}
.width100 {
    width: 100% !important;
}
.PadLeft {
    padding-left: 5px;
}
.PadRight {
    padding-right: 5px;
}
.PadTop {
    padding-top: 5px;
}
.PadBottom {
    padding-bottom: 5px;
}
.MarLeft {
    margin-left: 5px;
}
.MarRight {
    margin-right: 5px;
}
.MarTop {
    margin-top: 5px;
}
.MarTopX {
    margin-top: 10px;
}
.MarBottom {
    margin-bottom: 5px;
}
.MarBottomX {
    margin-bottom: 10px;
}
.h-control {
    min-height:3rem;
}
.badge {
    opacity: 0.75;
}
.btn,
.form-control,
.form-control1,
.custom-select,
.custom-select1 {
    border-radius: 0.5rem;
}
.TopSpace {
    margin-top: 1rem !important;
}
.TailSpace {
    margin-bottom:1rem !important;
}
.LeftSpace {
    margin-left: 1rem !important;
}
.RightSpace {
    margin-right: 1rem !important;
}
p img,
.AutoImg img,
.img-x {
    border: 0;
    max-width: 100%;
    display: block;
    margin: 0.15rem auto;
    /*opacity: 0.85;*/
    border-radius: 0.5rem;
}
img.edit,
.icon-x {
    max-width: 100%;
    border-radius: 0.5rem;
    /*opacity: 0.85;*/
}
.InlineIcon {
    height: 1.125rem !important;
    opacity: 0.85;
}
.InputFace,
.InputFace > img {
    padding: 0 !important;
    border-radius: 0.5rem !important;
}
.InputFace > img {
    height: 39px;
    opacity: 0.9;
}
.UserFace > img,
.UserFace {
    border-radius: 12px !important;
}
.opacity90 { opacity: 0.90; }
.opacity85 { opacity: 0.85; }
.opacity75 { opacity: 0.75; }
.opacity65 { opacity: 0.65; }
.opacity55 { opacity: 0.55; }
.opacity45 { opacity: 0.45; }
.text-nowrap,
.nowrap {
    white-space: nowrap;
}
.LayCenter {
    margin-left:auto;
    margin-right:auto;
    margin:0 auto;
}
.alert {
    margin-bottom: 0.3rem;
    opacity: 0.75;
    text-align: left;
    border-radius: 0.5rem;
}
.modal-dialog {
    max-width: 720px;
}
#PopupChatWindow .modal-dialog {
    max-width: 65%;
    min-width: 720px;
}

/*动画操作(PC版)*/
.animation-running {
    animation-play-state:running;
}
.text-marquee1:hover,
.animation-paused {
    animation-play-state:paused;
}
/*动画特效*/
.alert-hide-animation {
    animation-name: alert-hide-frame;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 6s;
}
@keyframes alert-hide-frame {
    0% {
        transform: translateY(0%);
    }
    100% {
        transform: translateY(-50%);
        opacity: 0;
        display: none;
        position: absolute;
        top: -100%;
    }
}
.text-marquee-box {
    max-width: 100%;
    overflow: hidden;
}
.text-marquee1 {
    min-width: 100%;
    text-align: center;
    animation: yuhou-marquee-frame1 10s linear infinite;
}
@keyframes yuhou-marquee-frame1 {
    0% {
        transform: translateX(0%);
    }
    25% {
        transform: translateX(-50%);
    }
    50% {
        transform: translateX(0%);
    }
    75% {
        transform: translateX(50%);
    }
    100% {
        transform: translateX(0%);
    }
}
.icon-animation1 {
    animation-name: yuhou-icon-frame1;
    animation-duration: 0.4s;
    animation-iteration-count: 10;
}
.icon-animation1x {
    animation-name: yuhou-icon-frame1;
    animation-duration: 0.4s;
    animation-iteration-count: infinite;
}
@keyframes yuhou-icon-frame1 {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-10deg);
    }
    50% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(10deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
.icon-animation2 {
    animation-name: yuhou-icon-frame2;
    animation-duration: 0.8s;
    animation-iteration-count: 4;
}
.icon-animation2x {
    animation-name: yuhou-icon-frame2;
    animation-duration: 0.8s;
    animation-iteration-count: infinite;
}
@keyframes yuhou-icon-frame2 {
    0% {
        transform: translateX(0);
    }
    10% {
        transform: translateX(-5px);
    }
    20% {
        transform: translateX(5px);
    }
    30% {
        transform: translateX(-5px);
    }
    40% {
        transform: translateX(5px);
    }
    50% {
        transform: translateX(-5px);
    }
    60% {
        transform: translateX(5px);
    }
    70% {
        transform: translateX(-5px);
    }
    80% {
        transform: translateX(5px);
    }
    90% {
        transform: translateX(-5px);
    }
    100% {
        transform: translateX(0);
    }
}
.icon-animation3 {
    animation-name: yuhou-icon-frame3;
    animation-duration: 0.8s;
    animation-iteration-count: 4;
}
.icon-animation3x {
    animation-name: yuhou-icon-frame3;
    animation-duration: 0.8s;
    animation-iteration-count: infinite;
}
@keyframes yuhou-icon-frame3 {
    0% {
        transform: translateX(0) translateY(0) rotate(0);
        filter: saturate(1) hue-rotate(0);
    }
    25% {
        transform: translateX(-5px) translateY(-5px) rotate(-3deg);
        filter: saturate(1) hue-rotate(3deg);
    }
    50% {
        transform: translateX(5px) translateY(5px) rotate(3deg);
        filter: saturate(1) hue-rotate(-3deg);
    }
    75% {
        transform: translateX(-5px) translateY(-5px) rotate(-3deg);
        filter: saturate(1) hue-rotate(3deg);
    }
    100% {
        transform: translateX(0) translateY(0) rotate(0);
        filter: saturate(1) hue-rotate(0);
    }
}
.icon-animation4 {
    display: inline-block;
    animation-name: yuhou-icon-frame4;
    animation-duration: 0.2s;
    animation-iteration-count: 18;
}
.icon-animation4x {
    display: inline-block;
    animation-name: yuhou-icon-frame4;
    animation-duration: 0.2s;
    animation-iteration-count: infinite;
}
@keyframes yuhou-icon-frame4 {
    0%,50%,100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-5px);
    }
    75% {
        transform: translateY(5px);
    }
}
.icon-animation5 {
    animation-name: yuhou-icon-frame5;
    animation-duration: 0.5s;
    animation-iteration-count: 8;
}
.icon-animation5x {
    animation-name: yuhou-icon-frame5;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
}
@keyframes yuhou-icon-frame5 {
    0%,50%,100% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.1);
    }
    75% {
        transform: scale(0.9);
    }
}
.text-animation-color {
    animation-name: text-frame-color;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@keyframes text-frame-color {
    15% { color: #ff0000; }
    35% { color: #17a2b8; }
    50% { color: #ffc107; }
    65% { color: #28a745; }
    85% { color: #ff00ff; }
}
.icon-animation-opacity {
    animation-name: icon-frame-opacity;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
@keyframes icon-frame-opacity {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}