body { font: 14px/1.5 microsoft yahei;-webkit-tap-highlight-color: transparent; }
@font-face { font-family: "iconfont"; src: url('../fonts/iconfont.woff') format('woff'), url('../fonts/iconfont.ttf') format('truetype'), url('../fonts/iconfont.svg#iconfont') format('svg') }
.iconfont { font-family: "iconfont"; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
html {
  font-size: 20px;
}
@media only screen and (min-width: 400px) {
html { font-size: 21.33333333px !important; }
}
@media only screen and (min-width: 414px) {
html { font-size: 22.08px !important; }
}
@media only screen and (min-width: 480px) {
html { font-size: 25.6px !important; }
}
html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
.content ::-webkit-scrollbar
{
    width:8px;
    height:8px;
    background-color: #F5F5F5;
}
 
/*定义滚动条轨道 内阴影+圆角*/
.content ::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}
 
/*定义滑块 内阴影+圆角*/
.content ::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #bbb;
}
/*index*/
.page-group { width: 100%; overflow: hidden; margin: auto; background:url(../images/btmbg.png) left bottom no-repeat; background-size:20% }.block{display:block}
.flex-center{display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-pack: justify;-webkit-justify-content: center;justify-content:center;-webkit-box-align: center; -webkit-align-items: center; align-items: center}
.spacebetween{box-sizing: border-box; display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-pack: justify;-webkit-justify-content: space-between;justify-content: space-between;-webkit-box-align: center;-webkit-align-items: center;align-items: center;}
.flex-start { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-box-align: center; -webkit-align-items: flex-start; align-items:flex-start}
a:hover{ opacity:.8}.left{float:left}.right{float:right}

.content{ width:1200px; margin:auto; overflow:hidden;padding-bottom:100px}

.nav-menu ul{ text-align:center; background-color:#151664}
.nav-menu li{ display:inline-block; padding:0; vertical-align:middle; color:#fff}
.nav-menu li a{ display:block; padding:5px 50px; font-size:22px; color:#fff}
.nav-menu li a span:before{ margin-right:5px}
.nav-menu li a.active,.nav-menu li a:hover{ opacity:1; background:url(../images/nav.png); background-size:100% 100%}
.case,.video,.vdlist,.rule{ padding-top:50px}

.titl{position: relative; float:left; width:100%;padding:2% 1%;font-size:24px; line-height:1; color:#151664 }
.titl:after{ content:''; height:2px; background:url(../images/line.png); background-size:100%; position:absolute; left:14%; right:0; top:50%}




.nav-menu .searchwrapper{padding:0; margin-right:10px; text-align:left; width:250px;}
.nav-menu .searchwrapper .tags small{ margin:0 5px 0 2px}
.word{ height:30px; line-height:30px;border-radius: 50px;background-color: #fff;padding: 0 10px; border:solid 1px #ddd}
.word input{width:77%; display:inline-block; vertical-align: super; border-radius:50px; border:none; height:25px; line-height:25px; margin-right:10px; padding:0 10px}
.word .search{width:20px; display:inline-block}
.word .search:hover{ opacity:.6; cursor:pointer;transform:scale(1.2);transition:all 1s ease-out;}
.nav-menu .lr{ margin-left:50px}
.nav-menu .lr a{ font-size:20px; display:inline-block; border:none; padding:0 10px}
.doc{float:right; width:280px; margin:20px 0;}
.doclink{display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-pack: justify;-webkit-justify-content: flex-start;justify-content:flex-start;-webkit-box-align: center; -webkit-align-items: center; align-items: center; color:#555}
.doclist{float:left; width:100%}
.doclink .icon {
  color: #000;
  position: relative;
  margin:10px 10px 10px 0;
  width: 10px;
  height: 15px;
  border-radius: 1px 1px 0 0;
  border-top: solid 1px currentColor;
  border-left: solid 1px currentColor;
  border-right: solid 1px currentColor;
}
.doclink .icon:before {
  content: '';
  position: absolute;
  top: 10px;
  left: 1px;
  width: 7px;
  height: 7px;
  border-top: solid 1px currentColor;
  border-left: solid 1px currentColor;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.cmcon{ width:1100px; margin:auto}
.cmcon .cmlist{float:left; width:40%; margin:1% 18% 3% 1%}
.listbox .cmlist:nth-child(odd){ margin-right:0}
.video .listbox .cmlist:nth-child(odd){ margin-right:18%}
.video .listbox .cmlist:nth-child(even){ margin-right:0}
.video .cmlist h2{ margin-bottom:10px; color:#4d4281}
.cmcon .cmlist .cmblock{ position:relative; overflow:hidden; padding:1%; margin-bottom:20px; border-radius:.25rem; background-color:#151664;}
.cmcon .cmlist .cmblock .playlink:before{ width:80px; height:80px; font-size:80px; line-height:1; position:absolute;
    top: 50%;
    left: 50%;
    bottom: 0;
    right: 0; margin:-40px 0 0 -40px; color:#fff}
.cmcon .cmlist .cmblock h2{ width:80%; display:inline-block; font-size:34px; font-weight:normal; margin:0 5% 0 0; line-height:1.5}
.cmcon .cmlist .cmblock p{margin:0}
.cmcon .cmlist .cmblock p img{ width:100%}
.cmcon .cmlist .cmblock a{color:#fff; font-size:1rem; width:100%;}
.cmcon .cmlist .introduce span{ position:relative; display: block; font-size:20px; max-width:80%; overflow:hidden; white-space:nowrap;text-overflow:ellipsis}

#contentBox .box{text-align:center;display:none;}
#contentBox .box.active{display:block;}
nav{ text-align:center; font-size:20px; margin-bottom:50px; font-weight:bold; color:#151664}
nav span{ color:#fff}
nav .navicon{ display:block; width:70px; height:70px; line-height:70px; font-size:50px; background-color:#151664; border-radius:100%; font-weight:normal}
nav a{ display:inline-block; margin:0 5%; cursor:pointer}
nav .on .navicon{ color:#fff; background-color:#ef59a1}
nav .on i{ color:#ef59a1}
.crumb{ position:relative; margin-bottom:30px}
.crumb:after{ content:''; position:absolute; left:0; right:0; bottom:10px; height:3px; background:url(../images/gline.png); background-size:100%; z-index:-1}
.crumb span{ display:inline-block; margin:0 5%; color:#999}
.crumb i{ display:block}
.crumb .active{ color:#ef59a1}
.vdlist .introduce{ text-align:left; overflow:hidden}
.vdlist .introduce .icon-zan{position: absolute; right:0}
.vdlist .introduce .icon-zan:before{ color:#ef59a1}
.rule .listbox p{ font-size:16px; padding:0 1%; margin-bottom:15px; color:#444}
.nav-menu li .mhome{ display:none}
.tishi{ position:absolute; top:0; right:0; bottom:0; left:0}
.tishi ~ .page-group{ display:none}
.zan{ cursor:pointer}
.znum{ position:absolute; right:0}
.video .cmlist .cmblock a,.video .cmlist .cmblock{ height:5rem; line-height:5rem; cursor:pointer}
.cmcon .cmlist .introduce .zan{ display:flex}
.like {
    width:50px;
    height:40px;
    margin-right:20px;
    background: url(../images/heart.png);
    background-position: left;
    background-size: 2900%
}

.like_click {
    animation-name: heartBlast;
    animation-duration: .8s;
    animation-timing-function: steps(28);
    background-position: right;
}
.mask{position:absolute; top:0; right:0; bottom:0; left:0; background-color:rgba(0,0,0,.7); display:none}
.hspas{width:30%; height:30%; background-color:#ddd; box-shadow:0 0 5px rgba(0,0,0,.5); border-radius:10px}
.hspas input{ width:10rem; border:none; border-radius:.25rem; padding:.3rem; margin:0 0 .2rem}
.hspas select{ width:10.5rem; border:none; border-radius:.25rem; padding:.2rem; margin:0 0 .2rem}
.hspas p{ margin:1rem auto}
.hspas p span{ padding:0 .5rem}
.hspas p span small{ color:#900}
.hspas .mconfirm,.hspas .mcancel{ display:block; width:3rem; margin:1rem auto 0; padding:.25rem 0; text-align:center; color:#fff; background-color:#060; border-radius:.25rem}
.hspas .mcancel{ background-color:#eee; color:#888; cursor:pointer}

.js{ position:relative}
.cmcon .cmlist .jsname span{ position:absolute; top:26px; left:0; right:0}
@keyframes heartBlast {
    0% {
        background-position: left;
    }

    100% {
        background-position: right;
    }
}


.icon-play:before {
  content: "\e63d";
}

.icon-vd:before {
  content: "\e604";
}

.icon-gf:before {
  content: "\e600";
}

.icon-px:before {
  content: "\e70b";
}
.icon-hs:before {
  content: "\e601";
}

.icon-ys:before {
  content: "\e614";
}
.icon-point:after {
  content: "\e864";
}
.icon-zan:before {
  content: "\e609";
}
@keyframes sc{0%{
                transform: scale(1);
                }
                50%{
                    transform: scale(1.2);
                }
                100%{
                    transform: scale(1);
                }}
@media only screen and (max-width:1600px) {

}
@media only screen and (max-width:768px) {
    body { font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 0.7rem; line-height: 1.5; color: #3d4145; background: #fff;min-width:100%; min-height:inherit}
.nav-menu li .mhome{ display:block}
.page-group{ background-size:60%}
.case, .video, .vdlist, .rule{ padding-top:1rem}
    .mpage{ background:url(../images/mbg.jpg); background-size:100% 100%}
    .mpage a{ display:block; width:50%; padding:.75rem 0 .75rem 2rem; background-color:#151664; border-radius:.25rem; margin:2rem auto 0; color:#fff; font-size:1rem}
    .mpage a:hover,.mpage a:active{ background-color:#ee579f}
    .mpage a span:before{ margin-right:.5rem}
    .content{ width:100%; padding-bottom:3.5rem}
    .cmcon{ width:100%}
    .listbox{ padding:0 1rem}
    .titl:after{ left:30%}
    .nav-menu li a{ font-size:.65rem; padding:.25rem 1rem .25rem 1.5rem}
    .rule .listbox p{ font-size:inherit}
    .nav-menu ul{display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-pack: justify;-webkit-justify-content: center;justify-content:center;-webkit-box-align: center; -webkit-align-items: center; align-items: center}
    .titl{ font-size:.8rem; margin:.5rem 0;}
    nav{ font-size:.8rem; margin-bottom:1rem;box-sizing: border-box; display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-pack: justify;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-webkit-align-items: center;align-items: center}
    .video .cmlist h2,.cmcon .cmlist .introduce span{ font-size:.7rem}
    .cmcon .cmlist .introduce span.left{ max-width:68%; vertical-align:top}
    .cmcon .cmlist .cmblock .playlink:before{ width:3rem; height:3rem; font-size:3rem; line-height:3rem;margin: -1.5rem 0 0 -1.5rem;}
    nav .navicon{ width:3rem; height:3rem; line-height:3rem; font-size:2rem; font-weight:normal; margin-right:.5rem}
    .video .listbox .cmlist:nth-child(odd),.cmcon .cmlist{ margin-right:6%; margin-bottom:6%}
    .cmcon .cmlist{ width:46%}
    nav .navicon~ i,nav .navicon{ display:inline-block}
    nav a{display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-pack: justify;-webkit-justify-content: center;justify-content:center;-webkit-box-align: center; -webkit-align-items: center; align-items: center}
    .page-current{ position:absolute; top:0; right:0; bottom:0; left:0}
.page-current .mpage{position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; -webkit-overflow-scrolling: touch;}
.tishi{ display:none}
.tishi ~ .page-group{ display:block}
.like{ margin-right:.25rem}
.hspas input{ width:9rem}
.hspas select{ width:9.5rem}
.hspas{ width:85%; height:35%}
.cmcon .cmlist .cmblock{ margin-bottom:0}
}