/*html, body { width:100% !important; }*/
body { font-family: 'Microsoft YaHei', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; color: #000; background-color: #e0e0e0; }

* { box-sizing: border-box; }
.fl { float: left; }
.fr { float: right; }
.clear { clear: both; }
.clearfix:after { content: '';display: table; clear: both; }
.bold { font-weight: bold; }
.relative { position: relative; }
.flex { display: flex; }
.hidden { display: none !important; }
.fixed { position: fixed; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background-color: #fff; z-index: 999; }
a { text-decoration: none; color: #000; }
h1 { padding: 10px 0px 40px 20px; font-size: 24px; }
h2 { padding: 5px 0px; font-size: 18px; }
img { width: 100%; height: auto; } .f0 { font-size: 0; }
input, select, textarea { padding: 12px; border: 1px solid #aaa; border-radius: 0px; width: 100%; font-size: 16px; line-height: 20px; height: 50px; }

.bg-model { display: none; position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, .7); z-index: 5; }
.bg-model.active, .bg-model.wimage { display: block; }

.fixed.loading { display: none; width: 100px; height: 100px; }
.fixed.loading.active { display: block; }
.please-wait { font-size: 40px;padding-left: 10%; }

.back-top { display: none; position: fixed; right: 20px; bottom: 50px; z-index: 4; background-color: transparent; }
.back-top.active { display: block; }
/*.back-top .go { font-size: 40px; color: #7d6e6e; cursor: pointer; }*/
.back-top .go { font-size: 16px; font-weight: 700; color: #313131; cursor: pointer; display: block; width: 50px; height: 50px; line-height: 50px; text-align: center; background-color: #eee; border-radius: 50%; text-transform: uppercase; }
.back-top .go:hover { color: #696464 }

.btn { display: inline-block; padding: 20px 50px; background-color: #c8000a; color: #fff; font-size: 20px; cursor: pointer; transition: background-color .25s; }
.btn:hover { background-color: #cc2931; }
.bg-transition{border-radius: 5px;transition: background-color .25s;-moz-transition: background-color .25s;-webkit-transition: background-color .25s;-o-transition: background-color .25s;}
body { min-width: 1000px; }
nav { min-width: 1100px; position: fixed; left: 0; right: 0; top: 0; background-color: #333; opacity: .8; z-index: 3; /*transition: opacity .3s;*/ transition: background-color .25s; }
nav.scroll { background-color: #999; opacity: .4 !important; }
nav.scroll .links a, nav.scroll .links .separate { color: #000; }
nav:hover { background-color: #333 !important; opacity: .9 !important; }
nav:hover .links a, nav:hover .links .separate { color: #fff; }

nav .links { padding: 0 40px; }
nav .links.mobile { display: none; }
nav .links a { padding: 15px 0; display: inline-block; width: 200px; text-align: center; font-size: 20px; font-weight: 700; position: relative; color: #fff; }
nav .links a:after { display: none; content: ''; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background-color: #e43e3e; }
nav .links a:hover:before { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background-color: #fff; }
nav .links .separate { display: inline-block; padding: 0 10px; color: #fff; }
nav .language { position: absolute; right: 40px; top: 8px; z-index: 4; }
nav .language>span { background-color: #333; padding: 8px 15px; display: inline-block; border-radius: 10px; color: #fff; cursor: pointer; min-width: 120px; font-size: 14px; }
nav .language ul { display: none; padding-top: 10px; }
nav .language:hover ul { display: block; }
nav .language li:first-child { border-bottom: 1px solid #ccc; }
nav .language li a { display: block; padding: 10px 15px; background-color: #e7e7e7; }
nav .language li a:hover { background-color: #aaa; }

.join-home nav a.home:after,
.join-homeZh nav a.home:after,
.index-index nav a.index-index:after,
.index-workList nav .index-workList:after,
.index-awards nav .index-awards:after,
.index-indexZh nav a.index-index:after,
.index-workListZh nav .index-workList:after,
.index-awardsZh nav .index-awards:after { display: block; }


.rule { position: relative; }
.rule p.f0 { position: relative; z-index: -1; }
.rule .view { position: absolute; top: 50px; left: 0; right: 0; margin: auto; width: 300px; text-align: center; }
.rule .content { background-color: #efefef; padding-top: 30px; }
.rule .content.active { display: block; }
.rule .container { width: 55%; margin: auto; }
.rule .container>div { border-radius: 5px; box-shadow: 0px 1px 5px 0px #88898e; background-color: #fff; padding: 39px; }
.rule .container li { margin-bottom: 30px; line-height: 20px; font-size: 16px; }
p.agree { padding-top: 20px; font-size: 18px; font-weight: 700; }
p.agree input { display: inline-block; width: 20px; height: 20px; vertical-align: top; }
p.agree label { display: inline-block; width: calc(100% - 50px); }
.rule .container .link { text-align: center; padding: 30px 24px; }
.rule .container form .error { display: none; color: red; font-size: 16px; padding-bottom: 20px; text-align: left; }
.rule .container form.active .error { display: block; }
.rule .container .submit { padding: 10px 40px; font-size: 16px; border: none; }
footer { text-align: center; background-color: #efefef; padding: 200px 0 40px; }
footer img { width: 320px; }
footer .addition { padding-top: 20px; }
footer .info { position: relative; font-size: 16px; }
footer .info:before { content: ''; position: absolute; width: 30px; border-bottom: 1px solid #333; left: -35px; top: 10px;}
footer .info:after { content: ''; position: absolute; width: 30px; border-bottom: 1px solid #333; right: -35px; top: 10px;}
span.required { color: #d81f28; }
.work-form { margin: auto; width: 80%; padding: 20px 50px 100px; min-width: 1000px; max-width: 1200px; }
.work-form .with-errors { padding-top: 5px; color: #d81f28; height: 20px; font-size: 16px; }
.work-form .response-error { padding-bottom: 20px; color: #d81f28; font-size: 18px; font-weight: 700;}
.work-form .btn-add { padding: 16px 100px; }
.works .group { padding-bottom: 40px; }
.works .group .label { font-size: 32px; font-weight: 700; margin-bottom: 10px; }
.item.know-type, .item.type-info { width: 165px; }
.item.area { width: 200px; margin-left: 10px; }
.item.country { width: 250px; margin-left: 10px; }
.item.shop { width: 250px; margin-left: 10px; }
.item.info, .item.media { width: 300px; margin-left: 10px; }

.works.form .content.six .Dealer, .works.form .content.six .KOL, .works.form .content.six .SocialMedia { display: none; }
.works.form .content.six.Dealer .Dealer, .works.form .content.six.KOL .KOL, .works.form .content.six.SocialMedia .SocialMedia { display: block; }

.uplpad-work .notice, .list .like-error { display: none; padding: 40px; width: 450px; height: 210px; }
.index-index .uplpad-work .notice { width: 600px; height: 270px; }
.index-workList .list .like-error { width: 550px; }
.list .like-error .title .max,
.list .like-error .title .end,
.list .like-error .title .login { display: none; }

.uplpad-work .notice.active, .list .like-error.active,
.list .like-error.over, .list .bg-model.over,
.list .like-error.login, .list .bg-model.login,
.list .like-error.active .title .max,
.list .like-error.over .title .end,
.list .like-error.login .title .login { display: block; }

.list .like-error.login .title a { text-decoration: underline; color: #0d46ec; }

.uplpad-work .notice .title { font-size: 22px; margin-bottom: 40px; line-height: 28px; }
.list .like-error .title { font-size: 22px; margin-bottom: 30px; line-height: 32px; }
.uplpad-work .action .btn, .list .like-error .btn { padding: 10px; font-size: 16px; background-color: #269c6f; }
.list .like-error .btn { padding-left: 50px; padding-right: 50px; }
.uplpad-work .action .btn:hover, .list .like-error .btn:hover { background-color: #3ebd8d; }

body.index-workList { background-color: #e0e0e0; }
.list .work-list { width: 80%; max-width: 1400px; min-width: 1000px; margin-left: auto; margin-right: auto; padding: 20px 50px 200px; }
.work-list .item { float: left; width: 33.3334%; padding: 0 10px 20px; }
/*.work-list .container { margin: 10px; border: 1px solid #eee; }*/
.work-list .item .ic { display: block; font-size: 0; overflow: hidden; border: 1px solid #e0e0e0; cursor: pointer; }
.work-list .item .ic img, .award .award-image img { transition:  transform .6s; }
.work-list .item .ic img:hover, .award .award-image img:hover { transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); }
.work-list .info { position: relative; height: 60px; background-color: #eee; }
.work-list .user { position: absolute; left: 10px; top: 10px; right: 36%; }
.work-list .name { float: left; width: 50%; margin-top: 12px; margin-left: 12px; word-break: break-all; }
.work-list .avatar { float: left; width: 40px; }
.work-list .like { position: absolute; top: 23px; right: 10px; text-align: center; }
.work-list .like .scan { display: inline-block; vertical-align: top; margin-right: 10px; color: #0e6be2; font-size: 12px; border: none; border-bottom: 1px solid #0e6be2; padding-bottom: 2px; }
.work-list .total-likes { margin-top: 1px; margin-left: 2px; font-size: 14px; display: inline-block; vertical-align: top; }
.work-list .i-like { cursor: pointer; display: inline-block; }
.work-list .i-like.no-event { pointer-events: none; }
.work-list .more { text-align: center; margin-top: 80px; }
.work-list .more .scan { padding: 12px; width: 300px; }

.works-image { display: none; width: 70%; height: 80%; background-color: transparent; margin-top: 4%;/* border: 1px solid #5a5959;*/ }
.works-image.wimage { display: block; }
.works-image .full { width: 100%; height: 100%; }
.works-image img { vertical-align: top; /*height: 100%; object-fit: contain;*/ }

.show { padding-bottom: 50px; }
.show img { width: 100px; }
.show .tag { width: 10%; min-width: 100px; }
.show .title { width: 90%; padding-top: 10px; font-size: 60px; max-width: calc(100% - 100px); }
.show .title .line { position: relative; background-color: #fff; height: 5px; margin-top: 10px; }
.show .title .line:before { content: ''; position: absolute; top: 0; left: 0; width: 240px; height: 5px; background-color: #c7000a; }
.show .title .line:after { content: ''; position: absolute; left: 235px; border: 5px solid; border-color: #c7000a transparent transparent; }

.award .a-item { background-color: #ccc; margin-bottom: 50px; }
.award .award-name { float: left; width: 40%; }
.award .award-name p { padding-top: 200px; padding-left: 100px; font-size: 60px; text-transform: uppercase; }
.award .award-image { float: left; width: 60%; overflow: hidden; }

.important-note { margin-left: 10%;margin-top: 10px;font-size: 24px;font-weight: 700;color: #c7000a; }
@media screen and (max-width: 770px) {
    body, nav { min-width: auto; }
    body { padding-top: 48px; }
    .rule .container { width: auto; }
    .rule .container>div { border-radius: 0; box-shadow: none; padding: 10px; }
    p.agree { text-align: left; }
    .work-form { width: 100%; min-width: auto; max-width: initial; padding: 10px 10px 100px; }
    .show .tag { min-width: auto; width: 70px; }
    .show img { width: 100%; }
    .show .title { width: 100%; padding-top: 10px; font-size: 24px; max-width: calc(100% - 70px); font-weight: 700; }
    .works .group { padding-bottom: 20px; }
    .works .group .label { font-size: 16px; font-weight: normal; }
    .item.know-type, .item.type-info, .item.area, .item.country, .item.shop, .item.info, .item.media { width: 90%; padding-bottom: 20px; }
    .work-form .btn-add { width: 100%; text-align: center; }
    .show .title .line:before { width: 150px; }
    .show .title .line:after { left: 146px; }
    .list .work-list { width: 100%; min-width: auto; max-width: initial; padding: 10px 10px 100px; }
    .work-list .item { width: 100%; }
    .show { padding-bottom: 30px; }
    .work-list .item { padding: 0 0px 20px; }
    .award .award-name, .award .award-image { float: initial; width: 100%; }
    .award .award-name p { padding: 20px 0; text-align: center; font-size: 28px; font-weight: 700; }

    /*nav { height: 48px; overflow: hidden; }*/
    /*nav.mobile-show { height: 192px; }*/
    nav, nav.scroll, nav:hover { opacity: 1 !important; background-color: #333; }
    nav.scroll .links a, nav.scroll .links .separate { color: #fff; }
    nav .links.desktop { display: none; }
    nav .links.mobile { padding: 0 10px; display: block; }
    nav .links a { font-size: 18px; text-align: left; width: auto; padding-right: 10px; }
    nav .links a:after, nav .links a:hover:before { display: none !important; }
    nav .links .separate, nav.scroll .links .separate { display: none; }

    .mobile i.iconfont { display: inline-block; color: #fff; font-size: 16px; padding: 8px; cursor: pointer; }
    nav .links .link, nav .links .link i, nav .links.show .link .icon-menu { display: none; }

    nav .links.show .link,
    .join-home .link.home,
    .join-homeZh .link.home,
    .index-index .link.index-index,
    .index-workList .link.index-workList,
    .index-awards .link.index-awards,
    .index-indexZh .link.index-index,
    .index-workListZh .link.index-workList,
    .index-awardsZh .link.index-awards { display: block; }
    .join-home .link.home .icon-menu,
    .join-homeZh .link.home .icon-menu,
    .index-index .link.index-index .icon-menu,
    .index-workList .link.index-workList .icon-menu,
    .index-awards .link.index-awards .icon-menu,
    .index-indexZh .link.index-index .icon-menu,
    .index-workListZh .link.index-workList .icon-menu,
    .index-awardsZh .link.index-awards .icon-menu,
    .join-home .show .link.home .icon-close,
    .join-homeZh .show .link.home .icon-close,
    .index-index .show .link.index-index .icon-close,
    .index-workList .show .link.index-workList .icon-close,
    .index-awards .show .link.index-awards .icon-close,
    .index-indexZh .show .link.index-index .icon-close,
    .index-workListZh .show .link.index-workList .icon-close,
    .index-awardsZh .show .link.index-awards .icon-close { display: inline-block; }

    nav .links a:after { display: none !important; }
    nav .language { right: 0; }
    nav .language ul { padding-top: 8px; }
    nav .language>span { padding: 8px 5px; min-width: 90px; }

    .uplpad-work .notice, .list .like-error, .index-workList .list .like-error { width: 100%; height: 270px; }

    footer { padding-top: 100px; }
    footer img { width: 250px; }
    footer .info { font-size: 14px; }

    .works-image { width: 100%; margin-top: 48px; height: 70%; }
    .bbtn.linkk { bottom: -55px; }
    .bbtn { bottom: -90px; }
    .bbtn.linkk #wlinkk { height: 38px; font-size: 14px; line-height: 18px; text-overflow: -o-ellipsis; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }

    .important-note { font-size: 16px; line-height: 20px; }
}