::-webkit-input-placeholder{color:#000}
:-moz-placeholder{color:#000;opacity:1}
::-moz-placeholder{color:#000;opacity:1}
:-ms-input-placeholder{color:#000}
.loader{position:fixed;left:0;top:45px;right:0;bottom:0;background-color:#ffc0cb;z-index:1}
header{border-bottom:1px solid rgba(0,0,0,0.5);box-shadow:0 5px rgba(0,0,0,0.1);background:#ee82ee;height:45px;left:0;right:0;position:fixed;z-index:2}
header h1{font:40px/40px Alaways,sans-serif;color:#F5F5F5;padding-left:5px;cursor:pointer;text-shadow:1px 1px 3px rgba(0,0,0,0.5);float:left;background:url(../images/logo.png) no-repeat center left;padding-left:50px}
header h1 b{color:#FFF;font:Bold 40px/40px 'Alaways Bold',sans-serif}
header h1 sub{font-size:50px;color:#9D5C83}
nav{position:fixed;z-index:2;right:5px;top:10px}
.search-box{background-color:rgba(255,255,255,0.1);padding:2px;border:1px solid rgba(0,0,0,0.15);box-shadow:0 0 5px rgba(255,255,255,0.1);margin-top:-4px;margin-right:20px;position:relative}
.search-box input{font-family:Arial,sans-serif;border:0;font-size:12px;padding:5px 10px;background:transparent;outline:none;transition:all 300ms linear}
.search-box input[type="submit"]{background-color:rgba(0,0,0,0.3);color:#FFF}
.search-box input[type="text"]{padding-left:20px}
.search-box .sub-search-box{position:absolute;left:0;top:45px;background-color:#ee82ee;width:260px;padding:0;border:1px solid rgba(0,0,0,0.5);box-shadow:1px 1px 5px rgba(0,0,0,0.3);display:none}
.sub-search-box a{display:block;margin:0;font:12px/30px Arial;height:30px;border-bottom:1px solid rgba(0,0,0,0.1);box-shadow:0 1px rgba(255,255,255,0.1);padding:2px 10px}
.sub-search-box a.actived{background-color:rgba(0,0,0,0.3)}
.sub-search-box a:last-child{border:0;box-shadow:none}
.sub-search-box a:hover{background-color:rgba(0,0,0,0.1)}
nav ul{float:left}
nav li{float:left;cursor:pointer;line-height:30px;padding-left:15px;padding-right:15px}
nav li:first-child{border-left:0}
nav li.actived{padding-left:20px;padding-right:20px;border-top:1px solid rgba(0,0,0,0.5);border-left:1px solid rgba(0,0,0,0.5);border-right:1px solid rgba(0,0,0,0.5);background-color:rgba(0,0,0,0.2);height:35px}
nav li.actived a{cursor:default}
nav li.actived a:hover{color:#FFF}
nav li a{color:#FFF;text-decoration:none;text-shadow:1px 1px rgba(0,0,0,0.1);font:13px/18px Arial}
nav li a:not(.actived):hover{color:#ffe0ef}
article{padding-top:0;height:5000px}
article section{display:block;margin:10px;background-color:rgba(255,255,255,0.1);float:left;width:150px;height:110px;box-shadow:0 0 6px rgba(0,0,0,0.3);position:relative;cursor:pointer;padding:5px;background-image:linear-gradient(to bottom,#FCEFF5 0%,#F9BDDA 100%);overflow:hidden}
article section img{width:100%;height:100%}
article section .shadow-box{position:absolute;box-shadow:0 0 10px 1px #000 inset;left:3px;top:3px;right:3px;bottom:3px}
article section:hover .shadow-box{box-shadow:0 0 10px #FFF inset;left:6px;top:6px;right:6px;bottom:6px}
article section.item figcaption{left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,0.3);display:table;font-weight:700;visibility:hidden}
article section.item figcaption b{display:table-cell;vertical-align:middle;color:#FFF;text-transform:none;text-shadow:1px 1px rgba(0,0,0,0.3);text-decoration:none;font:Bold 15px/15px Arial}
article section.item:hover figcaption{visibility:visible}
article section::before,article section::after{box-sizing:border-box;content:'';position:absolute;width:100%;height:100%}
.draw{-webkit-transition:color .3s;transition:color .3s}
.draw::before,.draw::after{border:3px solid transparent;width:0;height:0}
.draw::before{top:0;left:0}
.draw::after{bottom:0;right:0}
.draw:hover::before,.draw:hover::after{width:100%;height:100%}
.draw:hover::before{border-top-color:red;border-right-color:red;-webkit-transition:width .3s ease-in-out,height .3s ease-in-out .3s;transition:width .3s ease-in-out,height .3s ease-in-out .3s}
.draw:hover::after{border-bottom-color:red;border-left-color:red;-webkit-transition:border-color 0 ease-in-out 0.5s,width .3s ease-in-out 0.5s,height .3s ease-in-out .75s;transition:border-color 0 ease-in-out 0.5s,width .3s ease-in-out 0.5s,height .3s ease-in-out .75s}
.meet::after{top:0;left:0}
.meet:hover::before{border-top-color:red;border-right-color:red}
.meet:hover::after{border-bottom-color:red;border-left-color:red;-webkit-transition:height .25s ease-in-out,width .25s ease-in-out .25s;transition:height .25s ease-in-out,width .25s ease-in-out .25s}

