@charset "utf-8";

/* reset.css */
html {margin:0;padding:0;border:0;}
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline; list-style: none;}
article, aside, dialog, figure, footer, header, hgroup, nav, section {display:block;}
body {line-height:1.5; font-size: 14px; font-family: Microsoft YaHei; }
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;float:none !important;}
table, th, td {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:'';}
blockquote, q {quotes:"" "";}
a img {border:none;}
select, input, img { vertical-align: middle; outline: none;border:0 }
a { text-decoration: none;  blr: expression(this.onFocus=this.blur());outline: none; }
a:hover {  text-decoration: none; }
a:focus{ outline: none;}
.ovf{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-ms-text-overflow: ellipsis;-o-text-overflow: ellipsis;-moz-binding: url("ellipsis.xml#ellipsis");}
.cl:after { content: ""; display: block; clear: both; }
.cl { zoom: 1; }
.fl { float: left; }
.fr { float: right;}
.mb20{margin-bottom: 20px;}
.pt110{ padding-top: 110px;}
.pt170{ padding-top: 170px;}
.pt100{ padding-top: 100px;}

.content{ background: url(../logo50images/bg.jpg) no-repeat center center; min-height: 990px; position: relative;}
.wrap1000{ width: 1000px; margin: 0 auto;}

.sologan{ width: 788px; height: 236px; margin: 0 auto; background: url(../logo50images/sologan.png) no-repeat center bottom; margin-bottom: 18px;}
.sologan2{ width: 988px; height: 236px; margin: 0 auto; background: url(../logo50images/sologan2.png) no-repeat center bottom; margin-bottom: 18px;}
.time{ height: 143px; background: url(../logo50images/time.png) no-repeat; margin-bottom: 10px;}
.btn1{ width: 200px; height: 60px; margin: 0 auto; display: block; background: url(../logo50images/mode.png) no-repeat;}
.btn11{ width: 200px; height: 60px; margin: 0 auto; display: block; background: url(../logo50images/mode2.png) no-repeat;}
.model ul{ margin: 0 0 0 84px;}
.model li{ width: 101px; float: left; margin-right: 20px;transition:all .5s;-webkit-transition:all .5s;-ms-transition:all .5s;}
.model li:hover{-ms-transform:translateY(-30px);-o-transform:translateY(-30px);transform:translateY(-30px)}
.model .md1{ background: url(../logo50images/model1.png) no-repeat; height: 285px; margin-top:-48px;}
.model .md1:hover{background: url(../logo50images/model1-hover.png) no-repeat;}
.model .md2{ background: url(../logo50images/model2.png) no-repeat; height: 310px;}
.model .md2:hover{background: url(../logo50images/model2-hover.png) no-repeat;}
.model .md3{ background: url(../logo50images/model3.png) no-repeat; height: 285px;}
.model .md3:hover{background: url(../logo50images/model3-hover.png) no-repeat;}
.model .md4{ background: url(../logo50images/model4.png) no-repeat; height: 296px; margin-top: 30px;}
.model .md4:hover{background: url(../logo50images/model4-hover.png) no-repeat;}
.model .md5{ background: url(../logo50images/model5.png) no-repeat; height: 285px;}
.model .md5:hover{background: url(../logo50images/model5-hover.png) no-repeat;}
.model .md6{ background: url(../logo50images/model6.png) no-repeat; height: 299px;}
.model .md6:hover{background: url(../logo50images/model6-hover.png) no-repeat;}
.model .md7{ background: url(../logo50images/model7.png) no-repeat; height: 287px;margin-top:-48px;}
.model .md7:hover{background: url(../logo50images/model7-hover.png) no-repeat;}

.backhome{ display: inline-block; width: 127px; height: 37px; background: url(../logo50images/backhome.png) no-repeat center bottom; margin-left: -66px; padding-top: 44px;}
.tips{ height: 37px; background: url(../logo50images/tips.png) no-repeat center top; width: 498px; margin: -35px 0 0 415px;}
.area{ margin: 80px 0 0 150px;}
.area li{ width: 65px; height: 188px; float: left; background: url(../logo50images/tab.png) no-repeat center top; margin-right: 26px; text-align: center; line-height: 188px; cursor: pointer; transition:all .5s;-webkit-transition:all .5s;-ms-transition:all .5s;}
.area li:hover,.area li.current{ background: url(../logo50images/tab-hover.png) no-repeat center top; -webkit-transform:translateY(-30px);-moz-transform:translateY(-30px);-ms-transform:translateY(-30px);-o-transform:translateY(-30px);transform:translateY(-30px)}

.prompt{ width: 100%; height: 100%; position: absolute; left:0; top:0; z-index: 9999; background: rgba(0,0,0,.8); display: none;}
.wrap1116{ width: 1116px; height: 990px; margin: 0 auto; overflow: hidden; position: relative;}
.areacont{ width: 780px; padding-right: 68px; margin:0 auto; height: 686px; overflow: hidden; overflow-y: auto; margin-top: 80px; position: relative;}
.prompt .btnClose{ width: 68px; height: 68px; display: inline-block; background: url(../logo50images/close.png) no-repeat center top; position: absolute; right:28px; top:60px;}
.prompt .btnClose:hover{ background: url(../logo50images/close-hover.png) no-repeat center top;}
.prompt .btnPrev{ display: inline-block; position: absolute; left:0; top:350px; width: 99px; height: 97px; background: url(../logo50images/btnprev.png) no-repeat;}
.prompt .btnPrev:hover{ background: url(../logo50images/btnprev-hover.png) no-repeat;}
.prompt .btnNext{ display: inline-block; position: absolute; right:0; top:350px; width: 99px; height: 97px; background: url(../logo50images/btnnext.png) no-repeat;}
.prompt .btnNext:hover{ background: url(../logo50images/btnnext-hover.png) no-repeat;}
.areacont::-webkit-scrollbar  {  width: 8px;  height: 8px;   }  
.areacont::-webkit-scrollbar-track  {   background: url(../logo50images/split.png) repeat-y center top;}   
.areacont::-webkit-scrollbar-thumb  {  background-color: #24b0ad;  }
.prompt h3{ color: #24b0ad; font-size: 36px; font-weight: bold; margin-bottom: 26px;}
.prompt li{ margin-bottom:20px; background: url(../logo50images/dashed.png) repeat-x left bottom; padding-bottom: 20px;}
.prompt .areabox{ display: none;}

.other{  background:#ebebeb url(../logo50images/otherbg.jpg) no-repeat center top; padding-bottom: 100px;}
.wrap1002{ position: relative; width: 1002px; margin: 0 auto;}
.other .top{ margin-bottom: 80px;}
.combox{  padding-bottom: 36px; background: url(../logo50images/shadow.png) no-repeat bottom center;}
.cont{ background: #fff;}
.matchtab{ height: 80px; border-bottom: 1px solid #3392a2; line-height: 80px; font-size: 30px;}
.matchtab span{ display: inline-block; width: 501px;height: 80px; line-height: 80px; text-align: center; float: left; cursor: pointer; color: #3194a6;}
.matchtab .current{ background: url(../logo50images/tabbg.png) no-repeat; color: #fff;}
.matchtab .btnleft.current{ background-position: left center;}
.matchtab .btnright.current{ background-position: right center;}
.matchbox{ padding: 30px 50px 140px 50px;}
.matchbox .item{ display: none;}
.matchbox h2{ padding: 70px 0; text-align: center; font-size: 36px; color: #338aa2; font-weight: bold; }
.matchbox .ptb60{ padding: 60px 0;}
.matchbox .ptb40{ padding: 40px 0;}
.matchbox .matchimg{ max-width: 896px; text-align: center; background-color: #f3f3f3; margin-bottom: 20px; text-align: center; overflow: hidden;}
.matchbox .matchimg img{ max-width: 896px;}
.dress table{ width: 100%;}
.dress td{ height: 35px; text-align: center; background-color: #e2e8f1; color: #666; border-right: 2px solid #fff; border-bottom: 2px solid #fff;}
.dress .col1{ width: 119px;}
.dress .col2{ width: 190px;}
.dress .col3{ width: 146px;}
.dress .col4{ width: 91px;}
.dress .col5{ width: 190px;}
.dress .col6{ width: 146px;}

.matchbox p{ line-height: 28px; color: #666; padding: 0 10px; text-indent: 2rem; font-size: 16px;}
.matchbox .msimg{ width: 716px; margin: 30px auto; text-align: center; overflow: hidden;}
.matchbox .msimg img{ max-width: 716px;}
.matchbox .red{ color: #be0e35;}
.matchbox .numb{ position: relative; padding-left: 24px; text-indent: 0;}
.matchbox .numb .order{ display: inline-block; position: absolute; left:0; top:0; line-height: 28px;}

.prizetable .col1{ width: 119px;}
.prizetable .col2{ width: 190px;}
.prizetable .col3{ width: 550px;}
.prizetable .col4{ width: 40px;}

.matchbox .tit{ height: 35px; line-height: 35px; background-color: #a0b4d3; color: #fff; text-align: center; border-bottom: 1px solid #fff;}
.matchbox thead th{ height: 35px; background-color: #c5d2e4; color: #666; border-right: 1px solid #fff; text-align: center; color: #666;}
.matchbox tbody td{ color: #666; text-align: center; background: #e2e8f1; border:1px solid #fff; border-bottom: 1px solid #fff;height: 50px; }
.matchbox tbody span{ display: inline-block; padding: 0 20px;}
.matchbox .first{ position: relative;}
.matchbox .tag1,.matchbox .tag2{ display: inline-block; width: 20px; position: absolute; left:0; top:50%; margin-top: -100px; height: 100px;}
.matchbox .line{ width: 1px; height: 100%; display: block; position: absolute; left:50%; margin-left: -1px; top:0; background: #fff; padding: 0; }
.matchbox .tag2{ left:60px; height: 84px; margin-top: -41px;}
.matchbox .tag1{ height: 64px; margin-top: -32px;}


.pop{ position: fixed; left:0; top:0; width: 100%; height: 100%; background:rgba(0,0,0,.6); z-index: 999; display: none;}
.imgbox{ width: 800px; height: 600px;  position: relative; left:50%; top:50%; margin-left: -400px; margin-top: -300px; text-align: center;}
.imgbox img{ max-width: 800px;}
.pop .close{ width: 68px; height: 68px; display: inline-block; position: absolute; top:600px; left:50%; margin-left: -34px; background: url(../logo50images/close-hover.png) no-repeat;}
.animate .sologan{animation:fadeInDown 0.6s ease-out  0s forwards; -webkit-animation: fadeInDown 0.6s ease-out 0s forwards}

.animate .time{animation:fadeInDown 2s ease-out   0s forwards; -webkit-animation: fadeInDown 2s ease-out  0s forwards}

.animate .btn1{animation:fadeInUp 3s ease-out  0s forwards; -webkit-animation: fadeInUp 3s ease-out 0s forwards}

.animate .model{animation:fadeInUp 3s ease-out  0s forwards; -webkit-animation: fadeInUp 3s ease-out 0s forwards}

.animate1 .tips{animation:fadeInDown 0.6s ease-out  0s forwards; -webkit-animation: fadeInDown 0.6s ease-out 0s forwards}
.animate1 .sologan{animation:fadeInDown 0.6s ease-out  0s forwards; -webkit-animation: fadeInDown 0.6s ease-out 0s forwards}
.animate1 .area{animation:fadeInUp 1.2s ease-out  0s forwards; -webkit-animation: fadeInUp 1.2s ease-out 0s forwards}
@-webkit-keyframes fadeInDown{
    0%{opacity:0;-webkit-transform:translateY(-1000px);transform:translateY(-1000px)}
    100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes fadeInDown{
    0%{opacity:0;-webkit-transform:translateY(-1000px);-ms-transform:translateY(-1000px);transform:translateY(-1000px)}
    100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
}

@-webkit-keyframes fadeInbgDown{
    0%{opacity:0;-webkit-transform:translateY(-100px);transform:translateY(-100px)}
    100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes fadeInbgDown{
    0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}
    100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
}

@-webkit-keyframes fadeInUp{
    0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}
    100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes fadeInUp{
    0%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}
    100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
}