@charset "gbk";

/* reset */
body, dl, dd, ul, ol, h1, h2, h3, h4, h5, h6, p, form, div { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
em, b { font-style: normal; }
a { text-decoration: none; }
a:hover { text-decoration: none; }
img { border: 0; display: block; }
button, input, select, textarea { font-size: 100%; outline: none; }
table { border-collapse: collapse; border-spacing: 0; }
td, th, ul, ol { padding: 0; }
ul, ol { list-style-type: none; }
html, body { height: 100%; }
body { background-color: #000;font-family:Helvetica,STHeiti,'Droid Sans Fallback','Microsoft Yahei';}
input[type=text] { font-family:Helvetica,STHeiti,'Droid Sans Fallback','Microsoft Yahei'; }
.clearfix:after,.clearfix:before{content: "";display: table;}
.clearfix:after{clear: both;}

.button { display: block; background-repeat: no-repeat; overflow: hidden; cursor: pointer; background-size: 100% 100%; }
.button.notext {text-indent: -9999px; }
.button.start { width: 383px; height: 99px; background-image: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/p1btn.png); }
.button.vote-small { width: 115px; height: 38px; background-image: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/btnsvote.png); color: #240400; font-size: 18px; padding-left: 46px; padding-top: 6px; overflow: hidden; box-sizing: border-box; }
.button.vote-small.disabled { background-image: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/btnsvote2.png); }
.button.vote-big { width: 216px; height: 64px; background-image: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/p5btnvote.png); color: #240400; font-size: 32px; padding-left: 84px; padding-top: 8px; overflow: hidden; box-sizing: border-box; }
.button.vote-big.disabled { background-image: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/p5btnvote2.png); }
.button.rule { width: 195px; height: 65px; background-image: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/p2btnrule.png); }
.button.backhome {}
.button.share { width: 254px; height: 85px; background-image: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/p5btnshare.png); }
.button.backhome { width: 254px; height: 85px; background-image: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/p2btnback.png); }
.button.backhome2 { width: 232px; height: 77px; background-image: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/p4btnback.png); }
.button.ok { width: 232px; height: 77px; background-image: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/p4btnok.png); }
.button.selectok { width: 268px; height: 88px; background-image: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/p3btnok.png); }
.button.arrleft { width: 47px; height: 102px; background-image:url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/p3lar.png); }
.button.arrright { width: 47px; height: 102px; background-image:url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/p3rar.png); }
.button.again { width: 252px; height: 83px; background-image: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/p5btncte.png); }
.button.submit { width: 262px; height: 87px; background-image: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/p6btnsubmit.png); }
.button.roundclose { width: 65px; height: 65px; background-image: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/roundclose.png); }

.wrapper { width: 640px; height: 1008px; }

.poplayer { position: relative; display: none; }
.poplayer a.close { position: absolute; }
.poplayer#alert { width: 497px; height: 229px; background: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/popbg.png); }
.poplayer#alert a.close { width: 54px; height: 54px; left: 431px; top: 3px; }
.poplayer#alert .content { margin-left: 54px; margin-top: 51px; width: 381px; height: 140px; color: #CFCEE4; font-size: 30px; }
.poplayer#modelwait .content { width: 640px; text-align: center; font-size: 30px; color: #fff; }
.poplayer#rule { line-height: 24px; border-radius: 8px; border: 2px solid #120e03; width: 602px; height: 860px; font-size: 20px; color: #cfcee4; background:#3f38b3 url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/logitechlogo.png) no-repeat 377px 20px scroll; }
.poplayer#rule strong { font-weight: normal; color: #ffc92c; }
.poplayer#rule h4 { display: inline-block; padding: 4px 10px; background-color: #ffc82e; border:1px solid #120e03; border-radius: 10px; color: #3f38b3; font-weight: 400; margin: 16px 0; }
.poplayer#rule .content { margin-top: 20px; overflow-y:scroll; width: 100%; height: 800px; padding: 20px 20px 40px; box-sizing: border-box; }
.poplayer#rule .button.roundclose { position: absolute; left: 50%; bottom: -28px; margin-left: -32px; }
.poplayer#rule li, .poplayer#rule p { margin-bottom: 10px; }
.poplayer#rule li, .poplayer#rule p img { display: block; margin: 8px 0; }

.section {width: 100%;background-repeat: no-repeat;background-position: center top; }
.section.loading,
.section.body { position: relative; width: 100%; height: 100%; background: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/ldbg.png) 100% 100%; }

.section.login-area { position: absolute; z-index: 9990; left: 20px; top: 20px; font-size: 24px; color: #fff; width: auto; }
.section.login-area a { color:#fff; }

.section.loading { position: absolute; top: 0; left: 0; z-index: 1; z-index: 9999; }
.section.loading span.head,
.section.loading span.text { display: block; background: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/ldhead.png) no-repeat; width: 126px; height: 152px; position: absolute; left: 50%; top: 50%; margin: -170px 0 0 -63px; }
.section.loading span.text { background-image:url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/ldtext.png); width: 248px; height: 58px; margin: 10px 0 0 -124px; }

.page { width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: none; background-repeat: no-repeat; background-size: cover; background-position: center; }

.list-item { float: left; background-repeat: no-repeat; background-position: center; overflow: hidden; }
.list-item .img-container { overflow: hidden; text-align: center; color: #FFCC2C; font-size: 26px; background-repeat: no-repeat; background-position: center; background-size: cover; }
.list-item .author { display: block; text-align: left; }
.list-item .author:before { content: '作者：'; }

.list-item.type1 { width: 275px; height: 394px; background-image: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/p2itembox.png); }
.list-item.type1 .img-container { width: 245px; height: 281px; line-height: 281px; margin: 15px 0 0 14px; }
.list-item.type1 .author { width: 252px; margin-left: 11px; margin-top: 13px; font-size: 21px; color: #DDDAFF; }
.list-item.type1 a.button { float: right; margin-right: 14px; margin-top: 3px; }

.list-item.type2 { width: 245px; height: 294px; background-image: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/p3itembox.png); }
.list-item.type2 .img-container { width: 212px; height: 244px; line-height: 244px; margin: 17px 0 0 16px; }

.list-item.type3 { width: 356px; height: 427px; background-image: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/p4itembox.png); }
.list-item.type3 .img-container { width: 308px; height: 352px; line-height: 352px; margin: 25px 0 0 24px; }

.list-item.type4 { width: 169px; height: 167px; background-image: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/p3itembg.png); }
.list-item.type4 .img-container { background-size: contain; border-radius: 10px; width: 147px; height: 145px; line-height: 145px; margin: 9px 0 0 11px; }

.list-item.type5 { width: 414px; height: 632px; background-image: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/p7itembox.png); }
.list-item.type5 .img-container { width: 359px; height: 411px; line-height: 411px; margin: 68px 0 0 27px; }
.list-item.type5 .title { display: block; width: 377px; margin: 27px 0 18px 17px; font-size: 26px; color: #fff; }
.list-item.type5 .author { float: left; /*width: 251px;*/ margin-left: 18px; font-size: 26px; color: #fff; }
.list-item.type5 .vote-count { margin-right: 25px; font-size: 26px; color: #fff; float: right; text-align: right; text-indent: 45px; background: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/heart.png) no-repeat left center; }
.list-item.type5 .checktip { float: left; margin-left:2px; background-position: left -3px; background-repeat: no-repeat; display: block; width: 123px; height: 48px; }
.list-item.type5 .checktip.checking { background-image: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/p7chking.png); }
.list-item.type5 .checktip.checked { background-image: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/p7chkok.png); }
.list-item.type5 a.button { float: right; width: 86px; height: 40px; margin: 4px 9px 0 0; }

.list-item.detail { float: none; width: 492px; height: 664px; background-image: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/p5itembg.png); }
.list-item.detail .img-container { width: 315px; height: 359px; margin: 66px 0 0 81px; }
.list-item.detail .author { height: 30px; display: block; color: #452A22; font-size: 26px; width: 431px; margin: 69px 0 0 30px; text-align: center; }
.list-item.detail .author:before { content:none; }
.list-item.detail a.button { margin: 25px auto 0; }

.inputbox, .inputbox-short { display: block; border: none; font-size: 34px; color: #ACA5FF; height: 74px; line-height: 74px; width: 538px; background: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/p4input.png) no-repeat; padding-left: 25px; padding-right: 25px; box-sizing: border-box; }
.inputbox-short { width: 428px; background: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/p4input2.png) no-repeat; }

.page.welcome { background-image: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/p1bg.png); }
.page.welcome .slogan { margin: 64px auto 0; }
.page.welcome .slogan2 { margin: 14px auto 0; }
.page.welcome .chr { position: absolute; left: 50%; bottom: 0; margin-left: -188px; }
.page.welcome .button.start { position: absolute; left: 50%; bottom: 65px; margin-left:-191px; }

.page.homelist .title { margin: 60px auto 30px; }
.page.homelist .buttons { width: 550px; margin: 0 auto; }
.page.homelist select { float: left; border: none;-webkit-appearance:none;appearance:none;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0); width: 195px; height: 65px; line-height: 62px; text-indent: 11px; background: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/p2btndrp.png) no-repeat; font-size: 28px; color: #210400; }
.page.homelist select option { font-size: 20px; }
.page.homelist a.button.rule { float: right; }
.page.homelist .list { margin: 10px auto; width: 573px; height: 544px; overflow-y: scroll; }
.page.homelist .list .empty { display: block; width: 100%; margin-top: 200px; font-size: 32px; color: #ACA5FF; text-align: center; }
.page.homelist .list .list-item:nth-child(2n+1) { margin: 0 23px 20px 0; }
.page.homelist footer { width: 100%; height: 157px; background: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/p2btns.png) no-repeat; position: absolute; bottom: 0; }
.page.homelist footer a.button { display: block; float: left; width: 33%; height: 100%; }

.page.detail { background: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/ldbg.png) 100% 100%; }
.page.detail .title { margin: 64px auto 7px; }
.page.detail .list-item.detail { margin: 0 auto 18px; float: none; }
.page.detail .buttons { width: 550px; margin: 0 auto; }
.page.detail .buttons a.button.share { float: left; }
.page.detail .buttons a.button.backhome { float: right; }

.page.mylist { background: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/ldbg.png) 100% 100%; }
.page.mylist > .title { margin: 61px auto 15px; }
.page.mylist .list { width: 414px; margin: 0 auto 14px; height: 681px; overflow-y: scroll; }
.page.mylist .list .list-item { margin-bottom: 22px; }
.page.mylist a.button { margin: 0 auto; }

.page.make { background: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/ldbg.png) 100% 100%; }
.page.make .step1, .page.make .step2, .page.make .step3 { width: 100%; height: 100%; display: none; overflow: hidden; }
.page.make .step1 .title { margin: 57px auto 32px; }
.page.make .step1 .list { overflow:hidden; width: 498px; height: 605px; margin: 0 auto 27px; }
.page.make .step1 .list .inner {
	-webkit-transition-property: transform;
	-webkit-transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1);
	-webkit-transition-duration: .5s;
	-webkit-transform : translateX(0px) translateZ(0px);
	transition-property: transform;
	transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1);
	transition-duration: .5s;
	transform: translateX(0px) translateZ(0px);
}
.page.make .step1 .arrleft, .page.make .step1 .arrright { position: absolute; top: 420px; left: 12px; }
.page.make .step1 .arrright { right: 12px; left: auto; }
.page.make .step1 .list .inner { width: 995px; }
.page.make .step1 .list .list-item { margin:0 7px 15px 0; }
.page.make .step1 .list .list-item.selected { background-image: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/p3itemboxsel.png); }
.page.make .step1 a.button { margin: 0 auto; }

.page.make .step2 .list-item.type3 { float: none; padding-top: 25px; margin: 60px auto 20px; position: relative; overflow: visible; box-sizing: border-box; }
.page.make .step2 .list-item.type3 .img-container { margin: 0 0 0 24px; }
.page.make .step2 .infos { width:530px; margin: 0 auto; font-size: 26px; color: #ACA5FF; }
.page.make .step2 .infos .category { float: left; text-align: left; }
.page.make .step2 .infos .category:before { content: '素材分类：'; }
.page.make .step2 .infos .source { float: right; text-align: right; }
.page.make .step2 .infos .source:before { content: '素材来源：'; }
.page.make .step2 .dragtip { position: absolute; right: -120px; top: 200px; }
.page.make .step2 .drag-text { position: absolute; font-size: 34px; color: #000; left: 24px; top: 25px; max-width: 308px; }
.page.make .step2 .input-area { width: 530px; margin: 22px auto 18px; }
.page.make .step2 .inputbox-short { float:left; margin-right: 15px; color: #000; }
.page.make .step2 .colorpicker { float: left; position: relative; width: 68px; height: 74px; background: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/colorbuttonbg.png) no-repeat; }
.page.make .step2 .colorpicker .button { width: 48px; height: 48px; background: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/colorbutton.png) no-repeat; margin: 14px 0 0 11px; background-color: #000; }
.page.make .step2 .colorpicker .color-panel { width: 229px; height: 229px; background: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/colorpickerbg.png) no-repeat; position: absolute; bottom: -236px; right: 0; z-index: 100; display: none; }
.page.make .step2 .colorpicker .color-panel table { margin: 15px; width: 200px; height: 200px; border: none; }
.page.make .step2 .colorpicker .color-panel table td { border-collapse: collapse; border: 1px solid #201c5c; }
.page.make .step2 .buttons { width: 530px; margin: 0 auto; }
.page.make .step2 a.button.backhome2 { float: left; }
.page.make .step2 a.button.ok { float: right; }
.page.make .step2 .lib-list { position: absolute; width: 100%; height: 234px; bottom: 0; left: 0; overflow-x: scroll; background: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/p4libbg.png) no-repeat left top; background-size: 100% 234px; }
.page.make .step2 .lib-list .inner { width: 5536px; margin: 52px 0 0 0; height: 169px; }
.page.make .step2 .lib-list .list-item.type4 { margin:4px 2px; }
.page.make .step2 .lib-list .list-item.type4.selected { background-image: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/p3itembgsel.png); }

.page.make .step3 .list-item { margin: 132px auto 30px; float: none; }
.page.make .step3 .title { display: block; width: 462px; margin: 0 auto 24px; text-align: center; font-size: 30px; color: #fff; }
.page.make .step3 .infos { width: 462px; margin: 0 auto 86px; }
.page.make .step3 .author { font-size: 28px; color: #A6A1FF; float: left; }
.page.make .step3 .author:before { content: '作者：'; }
.page.make .step3 .voted { float: right; font-size: 28px; color:#A6A1FF; background: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/heart.png) no-repeat 0 center; background-size: 35px 25px; text-align: right; text-indent: 50px; }
.page.make .step3 .buttons { width: 560px; margin: 0 auto; }
.page.make .step3 a.button.again { float: left; }
.page.make .step3 a.button.backhome { float: right; }

.page.upload { background: url(http://ossweb-img.qq.com/images/lol/m/act/a20161010mkemo/ldbg.png) 100% 100%; }
.page.upload .list-item { margin: 127px auto 28px; float: none; }
.page.upload p { width: 150px; margin: 0 auto 20px; text-align: center; font-size: 34px; color: #B5B1F0; }
.page.upload .inputbox { margin: 0 auto; }
.page.upload .buttons { width: 540px; margin: 48px auto 0; }
.page.upload .buttons a.button.backhome { float: left; }
.page.upload .buttons a.button.submit { float: right; }

.page.share { width: 100%; height: 100%; background-color: rgba(0, 0, 0, .75); }
.page.share .content { position: absolute; right: 20px; top: 0; }
/*  |xGv00|55c35b35d7e50f68b1351345a690a59f */