/*
全站通用样式表 v1.0
*/
/*<!-- 阿奇源码：精品资源分享网www.hnymwl.com -->*/
*{ 
    margin:0;
    padding:0;
}
/*动态背景 可以删除！*/
body {
	margin: 0;
	width: 100%;
	height: 100vh;
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradientBG 15s ease infinite;
}
@keyframes gradientBG {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}/*动态背景*/

/*滚动条美化*/
::-webkit-scrollbar{height:10px;width:10px;margin-right:2px}
::-webkit-scrollbar-track-piece{border-left:1px solid #d2d2d2;background-color:#f5f5f5}
::-webkit-scrollbar-thumb{height:10px;width:10px;border:1px solid #aaa;background:#cbcbcb}
::-webkit-scrollbar-thumb:hover{background:#909090}

/*选定文字的颜色*/
::selection{background:#EEE}
::-moz-selection{background:#EEE}

body {
	font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
	-webkit-font-smoothing: antialiased;    /*清晰字体*/
	padding-top: 70px;      /*悬停导航栏*/
}

.caption{   /*标题*/
    padding: 4px;
    background-color: #eee;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
    color:#3D4240;
    text-align:center;
}

.single{    /*单块*/
	margin-bottom: 20px;
	padding: 0 10px;
}

.single:hover .caption{     /*移动标题变色*/
	background: #566D6D;
    color: #F7FBFF;
}

.thumbnail{     /*图片框*/
	text-align:center;
	margin-bottom:0;
}

.thumbnail a{
	text-decoration:none;
}

/*底部版权链接*/
.copyright{
    margin-top: 10px;
    color: #666;
}
.copyright a{
    color: #666;
}

.blog-nav{
    display: none;
}
@media screen and (max-width:1200px) and (min-width:770px){
    .blog-nav{
        display: inline;
    }
    .search-nav{
        display: none;
    }
}
@media screen and (max-width:990px) and (min-width:770px){
    .navbar-brand{  /*隐藏网页标题，防止导航栏折成两栏*/
        display: none;
    }
}

/*动画效果*/
@-webkit-keyframes dance {
    2% {
        -webkit-transform: translateY(1.5px) rotate(1.5deg);
        transform: translateY(1.5px) rotate(1.5deg)
    }
    4% {
        -webkit-transform: translateY(-1.5px) rotate(-.5deg);
        transform: translateY(-1.5px) rotate(-.5deg)
    }
    6% {
        -webkit-transform: translateY(1.5px) rotate(-1.5deg);
        transform: translateY(1.5px) rotate(-1.5deg)
    }
    8% {
        -webkit-transform: translateY(-1.5px) rotate(-1.5deg);
        transform: translateY(-1.5px) rotate(-1.5deg)
    }
    10% {
        -webkit-transform: translateY(2.5px) rotate(1.5deg);
        transform: translateY(2.5px) rotate(1.5deg)
    }
    12% {
        -webkit-transform: translateY(-.5px) rotate(1.5deg);
        transform: translateY(-.5px) rotate(1.5deg)
    }
    14% {
        -webkit-transform: translateY(-1.5px) rotate(1.5deg);
        transform: translateY(-1.5px) rotate(1.5deg)
    }
    16% {
        -webkit-transform: translateY(-.5px) rotate(-1.5deg);
        transform: translateY(-.5px) rotate(-1.5deg)
    }
    18% {
        -webkit-transform: translateY(.5px) rotate(-1.5deg);
        transform: translateY(.5px) rotate(-1.5deg)
    }
    20% {
        -webkit-transform: translateY(-1.5px) rotate(2.5deg);
        transform: translateY(-1.5px) rotate(2.5deg)
    }
    22% {
        -webkit-transform: translateY(.5px) rotate(-1.5deg);
        transform: translateY(.5px) rotate(-1.5deg)
    }
    24% {
        -webkit-transform: translateY(1.5px) rotate(1.5deg);
        transform: translateY(1.5px) rotate(1.5deg)
    }
    26% {
        -webkit-transform: translateY(.5px) rotate(.5deg);
        transform: translateY(.5px) rotate(.5deg)
    }
    28% {
        -webkit-transform: translateY(.5px) rotate(1.5deg);
        transform: translateY(.5px) rotate(1.5deg)
    }
    30% {
        -webkit-transform: translateY(-.5px) rotate(2.5deg);
        transform: translateY(-.5px) rotate(2.5deg)
    }
    32% {
        -webkit-transform: translateY(1.5px) rotate(-.5deg);
        transform: translateY(1.5px) rotate(-.5deg)
    }
    34% {
        -webkit-transform: translateY(1.5px) rotate(-.5deg);
        transform: translateY(1.5px) rotate(-.5deg)
    }
    36% {
        -webkit-transform: translateY(-1.5px) rotate(2.5deg);
        transform: translateY(-1.5px) rotate(2.5deg)
    }
    38% {
        -webkit-transform: translateY(1.5px) rotate(-1.5deg);
        transform: translateY(1.5px) rotate(-1.5deg)
    }
    40% {
        -webkit-transform: translateY(-.5px) rotate(2.5deg);
        transform: translateY(-.5px) rotate(2.5deg)
    }
    42% {
        -webkit-transform: translateY(2.5px) rotate(-1.5deg);
        transform: translateY(2.5px) rotate(-1.5deg)
    }
    44% {
        -webkit-transform: translateY(1.5px) rotate(.5deg);
        transform: translateY(1.5px) rotate(.5deg)
    }
    46% {
        -webkit-transform: translateY(-1.5px) rotate(2.5deg);
        transform: translateY(-1.5px) rotate(2.5deg)
    }
    48% {
        -webkit-transform: translateY(-.5px) rotate(.5deg);
        transform: translateY(-.5px) rotate(.5deg)
    }
    50% {
        -webkit-transform: translateY(.5px) rotate(.5deg);
        transform: translateY(.5px) rotate(.5deg)
    }
    52% {
        -webkit-transform: translateY(2.5px) rotate(2.5deg);
        transform: translateY(2.5px) rotate(2.5deg)
    }
    54% {
        -webkit-transform: translateY(-1.5px) rotate(1.5deg);
        transform: translateY(-1.5px) rotate(1.5deg)
    }
    56% {
        -webkit-transform: translateY(2.5px) rotate(2.5deg);
        transform: translateY(2.5px) rotate(2.5deg)
    }
    58% {
        -webkit-transform: translateY(.5px) rotate(2.5deg);
        transform: translateY(.5px) rotate(2.5deg)
    }
    60% {
        -webkit-transform: translateY(2.5px) rotate(2.5deg);
        transform: translateY(2.5px) rotate(2.5deg)
    }
    62% {
        -webkit-transform: translateY(-.5px) rotate(2.5deg);
        transform: translateY(-.5px) rotate(2.5deg)
    }
    64% {
        -webkit-transform: translateY(-.5px) rotate(1.5deg);
        transform: translateY(-.5px) rotate(1.5deg)
    }
    66% {
        -webkit-transform: translateY(1.5px) rotate(-.5deg);
        transform: translateY(1.5px) rotate(-.5deg)
    }
    68% {
        -webkit-transform: translateY(-1.5px) rotate(-.5deg);
        transform: translateY(-1.5px) rotate(-.5deg)
    }
    70% {
        -webkit-transform: translateY(1.5px) rotate(.5deg);
        transform: translateY(1.5px) rotate(.5deg)
    }
    72% {
        -webkit-transform: translateY(2.5px) rotate(1.5deg);
        transform: translateY(2.5px) rotate(1.5deg)
    }
    74% {
        -webkit-transform: translateY(-.5px) rotate(.5deg);
        transform: translateY(-.5px) rotate(.5deg)
    }
    76% {
        -webkit-transform: translateY(-.5px) rotate(2.5deg);
        transform: translateY(-.5px) rotate(2.5deg)
    }
    78% {
        -webkit-transform: translateY(-.5px) rotate(1.5deg);
        transform: translateY(-.5px) rotate(1.5deg)
    }
    80% {
        -webkit-transform: translateY(1.5px) rotate(1.5deg);
        transform: translateY(1.5px) rotate(1.5deg)
    }
    82% {
        -webkit-transform: translateY(-.5px) rotate(.5deg);
        transform: translateY(-.5px) rotate(.5deg)
    }
    84% {
        -webkit-transform: translateY(1.5px) rotate(2.5deg);
        transform: translateY(1.5px) rotate(2.5deg)
    }
    86% {
        -webkit-transform: translateY(-1.5px) rotate(-1.5deg);
        transform: translateY(-1.5px) rotate(-1.5deg)
    }
    88% {
        -webkit-transform: translateY(-.5px) rotate(2.5deg);
        transform: translateY(-.5px) rotate(2.5deg)
    }
    90% {
        -webkit-transform: translateY(2.5px) rotate(-.5deg);
        transform: translateY(2.5px) rotate(-.5deg)
    }
    92% {
        -webkit-transform: translateY(.5px) rotate(-.5deg);
        transform: translateY(.5px) rotate(-.5deg)
    }
    94% {
        -webkit-transform: translateY(2.5px) rotate(.5deg);
        transform: translateY(2.5px) rotate(.5deg)
    }
    96% {
        -webkit-transform: translateY(-.5px) rotate(1.5deg);
        transform: translateY(-.5px) rotate(1.5deg)
    }
    98% {
        -webkit-transform: translateY(-1.5px) rotate(-.5deg);
        transform: translateY(-1.5px) rotate(-.5deg)
    }
    0%, to {
        -webkit-transform: translate(0) rotate(0deg);
        transform: translate(0) rotate(0deg)
    }
}
@keyframes dance {
    2% {
        -webkit-transform: translateY(1.5px) rotate(1.5deg);
        transform: translateY(1.5px) rotate(1.5deg)
    }
    4% {
        -webkit-transform: translateY(-1.5px) rotate(-.5deg);
        transform: translateY(-1.5px) rotate(-.5deg)
    }
    6% {
        -webkit-transform: translateY(1.5px) rotate(-1.5deg);
        transform: translateY(1.5px) rotate(-1.5deg)
    }
    8% {
        -webkit-transform: translateY(-1.5px) rotate(-1.5deg);
        transform: translateY(-1.5px) rotate(-1.5deg)
    }
    10% {
        -webkit-transform: translateY(2.5px) rotate(1.5deg);
        transform: translateY(2.5px) rotate(1.5deg)
    }
    12% {
        -webkit-transform: translateY(-.5px) rotate(1.5deg);
        transform: translateY(-.5px) rotate(1.5deg)
    }
    14% {
        -webkit-transform: translateY(-1.5px) rotate(1.5deg);
        transform: translateY(-1.5px) rotate(1.5deg)
    }
    16% {
        -webkit-transform: translateY(-.5px) rotate(-1.5deg);
        transform: translateY(-.5px) rotate(-1.5deg)
    }
    18% {
        -webkit-transform: translateY(.5px) rotate(-1.5deg);
        transform: translateY(.5px) rotate(-1.5deg)
    }
    20% {
        -webkit-transform: translateY(-1.5px) rotate(2.5deg);
        transform: translateY(-1.5px) rotate(2.5deg)
    }
    22% {
        -webkit-transform: translateY(.5px) rotate(-1.5deg);
        transform: translateY(.5px) rotate(-1.5deg)
    }
    24% {
        -webkit-transform: translateY(1.5px) rotate(1.5deg);
        transform: translateY(1.5px) rotate(1.5deg)
    }
    26% {
        -webkit-transform: translateY(.5px) rotate(.5deg);
        transform: translateY(.5px) rotate(.5deg)
    }
    28% {
        -webkit-transform: translateY(.5px) rotate(1.5deg);
        transform: translateY(.5px) rotate(1.5deg)
    }
    30% {
        -webkit-transform: translateY(-.5px) rotate(2.5deg);
        transform: translateY(-.5px) rotate(2.5deg)
    }
    32% {
        -webkit-transform: translateY(1.5px) rotate(-.5deg);
        transform: translateY(1.5px) rotate(-.5deg)
    }
    34% {
        -webkit-transform: translateY(1.5px) rotate(-.5deg);
        transform: translateY(1.5px) rotate(-.5deg)
    }
    36% {
        -webkit-transform: translateY(-1.5px) rotate(2.5deg);
        transform: translateY(-1.5px) rotate(2.5deg)
    }
    38% {
        -webkit-transform: translateY(1.5px) rotate(-1.5deg);
        transform: translateY(1.5px) rotate(-1.5deg)
    }
    40% {
        -webkit-transform: translateY(-.5px) rotate(2.5deg);
        transform: translateY(-.5px) rotate(2.5deg)
    }
    42% {
        -webkit-transform: translateY(2.5px) rotate(-1.5deg);
        transform: translateY(2.5px) rotate(-1.5deg)
    }
    44% {
        -webkit-transform: translateY(1.5px) rotate(.5deg);
        transform: translateY(1.5px) rotate(.5deg)
    }
    46% {
        -webkit-transform: translateY(-1.5px) rotate(2.5deg);
        transform: translateY(-1.5px) rotate(2.5deg)
    }
    48% {
        -webkit-transform: translateY(-.5px) rotate(.5deg);
        transform: translateY(-.5px) rotate(.5deg)
    }
    50% {
        -webkit-transform: translateY(.5px) rotate(.5deg);
        transform: translateY(.5px) rotate(.5deg)
    }
    52% {
        -webkit-transform: translateY(2.5px) rotate(2.5deg);
        transform: translateY(2.5px) rotate(2.5deg)
    }
    54% {
        -webkit-transform: translateY(-1.5px) rotate(1.5deg);
        transform: translateY(-1.5px) rotate(1.5deg)
    }
    56% {
        -webkit-transform: translateY(2.5px) rotate(2.5deg);
        transform: translateY(2.5px) rotate(2.5deg)
    }
    58% {
        -webkit-transform: translateY(.5px) rotate(2.5deg);
        transform: translateY(.5px) rotate(2.5deg)
    }
    60% {
        -webkit-transform: translateY(2.5px) rotate(2.5deg);
        transform: translateY(2.5px) rotate(2.5deg)
    }
    62% {
        -webkit-transform: translateY(-.5px) rotate(2.5deg);
        transform: translateY(-.5px) rotate(2.5deg)
    }
    64% {
        -webkit-transform: translateY(-.5px) rotate(1.5deg);
        transform: translateY(-.5px) rotate(1.5deg)
    }
    66% {
        -webkit-transform: translateY(1.5px) rotate(-.5deg);
        transform: translateY(1.5px) rotate(-.5deg)
    }
    68% {
        -webkit-transform: translateY(-1.5px) rotate(-.5deg);
        transform: translateY(-1.5px) rotate(-.5deg)
    }
    70% {
        -webkit-transform: translateY(1.5px) rotate(.5deg);
        transform: translateY(1.5px) rotate(.5deg)
    }
    72% {
        -webkit-transform: translateY(2.5px) rotate(1.5deg);
        transform: translateY(2.5px) rotate(1.5deg)
    }
    74% {
        -webkit-transform: translateY(-.5px) rotate(.5deg);
        transform: translateY(-.5px) rotate(.5deg)
    }
    76% {
        -webkit-transform: translateY(-.5px) rotate(2.5deg);
        transform: translateY(-.5px) rotate(2.5deg)
    }
    78% {
        -webkit-transform: translateY(-.5px) rotate(1.5deg);
        transform: translateY(-.5px) rotate(1.5deg)
    }
    80% {
        -webkit-transform: translateY(1.5px) rotate(1.5deg);
        transform: translateY(1.5px) rotate(1.5deg)
    }
    82% {
        -webkit-transform: translateY(-.5px) rotate(.5deg);
        transform: translateY(-.5px) rotate(.5deg)
    }
    84% {
        -webkit-transform: translateY(1.5px) rotate(2.5deg);
        transform: translateY(1.5px) rotate(2.5deg)
    }
    86% {
        -webkit-transform: translateY(-1.5px) rotate(-1.5deg);
        transform: translateY(-1.5px) rotate(-1.5deg)
    }
    88% {
        -webkit-transform: translateY(-.5px) rotate(2.5deg);
        transform: translateY(-.5px) rotate(2.5deg)
    }
    90% {
        -webkit-transform: translateY(2.5px) rotate(-.5deg);
        transform: translateY(2.5px) rotate(-.5deg)
    }
    92% {
        -webkit-transform: translateY(.5px) rotate(-.5deg);
        transform: translateY(.5px) rotate(-.5deg)
    }
    94% {
        -webkit-transform: translateY(2.5px) rotate(.5deg);
        transform: translateY(2.5px) rotate(.5deg)
    }
    96% {
        -webkit-transform: translateY(-.5px) rotate(1.5deg);
        transform: translateY(-.5px) rotate(1.5deg)
    }
    98% {
        -webkit-transform: translateY(-1.5px) rotate(-.5deg);
        transform: translateY(-1.5px) rotate(-.5deg)
    }
    0%, to {
        -webkit-transform: translate(0) rotate(0deg);
        transform: translate(0) rotate(0deg)
    }
}

  .navbar-default .navbar-toggle .icon-bar {
    background-color: #00BCD4;
}.navbar-default .navbar-toggle {
    border-color: #00BCD4;
}.navbar-toggle {
  background-color: rgba(0, 0, 0, 0.68);}
  /* 图像输出区 */
 .navbar-default{background: url(http://img.article.pchome.net/01/77/91/73/pic_lib/wm/nvrengongdi02.jpg)center fixed;
    background-size: 100% 100%;}
.output{
    text-align: center;
}
/* 生成的图片 */
#outputPic{
    width: 100%;
    max-width: 400px;
    margin-bottom: 30px;
    transition: all 0.25s ease;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
}
#outputPic:hover {
    -moz-box-shadow: 0px 0px 20px #000000;
    -webkit-box-shadow: 0px 0px 20px #000000;
    box-shadow: 0px 0px 20px #000000;
}

/* 提示中的小标题 */
.m-title{
    font-weight: 600;
}
  .btn-primary {
    background-image: -webkit-gradient(linear,left top,right top,from(#9C27B0),to(#E91E63));
    background-image: -webkit-linear-gradient(left,#9C27B0,#E91E63);
    background-image: linear-gradient(to right,#e91e63,#F44336,#f90);
    border-color: #fff;
} .btn-primary:hover{transition: 0.5s;padding: 8px 16px;
  box-shadow: 10px 10px 0 #FBC638;}
  #wuisox{display:none;}.panel-default {
    border-color: #162527;
}.panel-default>.panel-heading {
    color: #fff;
    background-color: #031619;
    border-color: #ddd;
}.navbar-default {
    background-color: #1f1f1fc7;
    border-color: #e7e7e7;
}.navbar-default .navbar-nav>li>a {
    color: #fff;
}.navbar-default .navbar-brand {
    color: #fff;
}#outputPic {
    -moz-box-shadow: 0px 0px 20px #000000;
    -webkit-box-shadow: 0px 0px 20px #000000;
    box-shadow: 0px 0px 20px #000000;
}#outputPic:hover {transition: All 1.2s ease;
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    }#file{width: 50%;margin: 10px;float: left;
   }
         #clipArea {
                margin: 10px;
                height: 200px;
            }
            
            #clipBtn {width: 40%;
                margin: 10px; background: #f90;
            }
            #view {
                margin: 0 auto;
                width: 117px;
                height: 150px;
            }
            #content,#view{display:none;}
/* #m_random{
    position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;
} */