@charset "utf-8";
/*--！！注意！！------------------------------*/
/*--此css是移动端使用，注意样式适应移动端-----*/
/*--浏览器内核兼容如：------------------------*/
/*---webkit-border-radius---------------------*/
/*---moz-border-radius------------------------*/
/*---border-radius----------------------------*/
/*--参照设备width:360px;font-size:100px 等比缩放font-size--*/

/*--样式重置以及清除浮动--*/
html{font-size:100px;font-weight: 400;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0;font-weight: 400;}
body,input,label,select,option,textarea,button,fieldset,legend,td,th,caption{ background-color:transparent;font-weight: 400;color:#3A3D40;font-size:14px;font-family:"Microsoft YaHei","PingFang SC",Helvetica,Roboto,Arial,sans-serif;}
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight: 400;}
a,button{color:#3A3D40;text-decoration:none; cursor: pointer;border: none;display: inline-block}
a{vertical-align:top}
img { border:none;vertical-align: middle;}
ol,ul,li { list-style:none; }
input, textarea, select, button {outline: none;}
table { border-collapse:collapse; }
html {min-width: 100%;min-height: 100%;}
.clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;}
.clearfix { *zoom:1; }
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
/*通用样式*/
html, body {
    width: 100%;
    height: 100%;
    background: #111116;
    overflow-y:hidden;
    background:#188e8b;
}
a{
    display: inline-block;
}
.commWrap{
    background-position: center;
    background-size: cover;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.commWrap{
    background-image: url("https://static.web.sdo.com/komori/pic/20181206_Exhibition/back1.jpg");
}
.commWrap.back6{
    background-image: url("https://static.web.sdo.com/komori/pic/20181206_Exhibition/back2.jpg");
}

.imgWrap img{
    width: 100%;
}

.backWrap{
    height: 100%;
}
.downBtn{
    position: absolute;
    bottom:0;
    width: 1.18rem;
    left:50%;
    margin-left:-0.24rem;
    animation: arrow 2.5s infinite ease-in-out;
    -webkit-animation: arrow 2.5s infinite ease-in-out;
    -ms-animation: arrow 2.5s infinite ease-in-out;
    -o-animation: arrow 2.5s infinite ease-in-out;
    -moz-animation: arrow 2.5s infinite ease-in-out;
    z-index: 5;
}
.downBtnYuyue{
    width:1.16rem;
    margin-left:-0.24rem;
}
.downBtn img{
    width: 100%;
    display: block;
}
/*公用底部*/
.mFooter{
    position: relative;
    background: #111116;
    text-align: center;
    padding: 0.18rem 0.25rem;

}
.mFooter .FlogoWrap img{
    display: inline-block;
    margin: 0rem 0.02rem;
    margin-bottom: 0.05rem;
}
.mFooter .FlogoWrap .xiLogo{
    width: 0.6rem;
}
.mFooter .FlogoWrap .gLogo{
    width: 0.95rem;
}
.mFooter p{
    color: #454444;
    font-size: 0.12rem;
    line-height: 0.2rem;
}
.mFooter p.p1{
    color: #666666;
}
/*公用底部*/


/*顶部样式*/
.topNav{
    width:100%;
    height:0.587rem;
    position: absolute;
    top:0;
    left:0;
    z-index:9999;
    background-color:rgba(0,0,0,.1);
}
.logoWrap{
    position: absolute;
    width: 0.767rem;
    top: 0.133rem;
    left: 0.127rem;
}
.logo2{
    position: absolute;
    width: 0.593rem;
    top: 0.15rem;
    left: 0.98rem;
}
.btn{
    position: absolute;
    width:0.787rem;
    top:0.18rem;
}
.yuyueBtn{
    left:1.867rem;
}
.showZT{
    left:2.727rem;
}
/*顶部样式*/

/*第一页样式*/
.slogan{
    width: 2.3rem;
    position: absolute;
    top:0.7rem;
    left:0.65rem;
    /*margin-top:-2.05rem;*/
    z-index:9;
}
.pageUl{
    width:2.4rem;
    height:0.88rem;
    position: relative;
    left:50%;
    top:2.1rem;
    /*margin-top:-0.7rem;*/
    transform:translateX(-50%);
    -webkit-transform:translateX(-50%);
    z-index:8;
}
.pageUl ul{
    width:100%;
    height:100%;
}
.pageUl li{
    width:0.72rem;
    position: absolute;
    animation-delay:0.6s;
    -webkit-animation-delay:0.6s;
    -ms-animation-delay:0.6s;
    -moz-animation-delay:0.6s;
    -o-animation-delay:0.6s;
}
.pageUl li.pageTo1{
    top:0.08rem;
    left:0;
}
.pageUl li.pageTo2{
    top:0;
    left:0.84rem;
}
.pageUl li.pageTo3{
    top:0.04rem;
    right:0;
}
/*.pageUl li.pageTo1 img{
    animation-delay:1.4s;
    -webkit-animation-delay:1.4s;
    -ms-animation-delay:1.4s;
    -moz-animation-delay:1.4s;
    -o-animation-delay:1.4s;
}
.pageUl li.pageTo2 img{
    animation-delay:1.6s;
    -webkit-animation-delay:1.6s;
    -ms-animation-delay:1.6s;
    -moz-animation-delay:1.6s;
    -o-animation-delay:1.6s;
}
.pageUl li.pageTo3 img{
    animation-delay:1.8s;
    -webkit-animation-delay:1.8s;
    -ms-animation-delay:1.8s;
    -moz-animation-delay:1.8s;
    -o-animation-delay:1.8s;
}*/
@keyframes rollInright{
    0%{
        opacity:0;
        -webkit-transform:translate3d(100%,0,0) rotate(120deg);
        transform:translate3d(100%,0,0) rotate(120deg);
    }
    to{
        opacity:1;
        -webkit-transform:none;
        transform:none
    }
}
.rollInright{
    -webkit-animation-name:rollInright;
    animation-name:rollInright;
}
.shopping{
    width:3.4rem;
    position: absolute;
    top:43%;
    right:0.1rem;
    /*margin-top:-0.4rem;*/
}
.startDog{
    width:3rem;
    height:1.75rem;
    position: absolute;
    bottom:0.12rem;
    left:0.35rem;
    z-index:7;
    opacity:0;
    animation:opac 0.2s linear .8s both;
    -webkit-animation:opac 0.2s linear .8s both;
    -ms-animation:opac 0.2s linear .8s both;
    -o-animation:opac 0.2s linear .8s both;
    -moz-animation:opac 0.2s linear .8s both;
}
.startDog .dog{
    width:1.67rem;
    position: absolute;
    top:0;
    left:0;
    animation-delay:1s;
    -webkit-animation-delay:1s;
    -ms-animation-delay:1s;
    -moz-animation-delay:1s;
    -o-animation-delay:1s;
}
.startDog .startDogBtn{
    width:0.93rem;
    height:0.9rem;
    right:0;
    top:0.27rem;
    position: absolute;
}
.startDog .startDogBtn .startDogBtnA{
    width:0.86rem;
    top:0;
    left:0;
    position: absolute;
}
.startDog .startDogBtn .startDogBtnIm{
    width:0.52rem;
    position: absolute;
    bottom:0;
    right:0;
}
.startDog .dogText{
    width:1.98rem;
    bottom:0;
    left:0.72rem;
    position: absolute;
    animation-delay:1.5s;
    -webkit-animation-delay:1.5s;
    -ms-animation-delay:1.5s;
    -moz-animation-delay:1.5s;
    -o-animation-delay:1.5s;
}
/*第一页样式*/

/*第二页样式*/
.titleWrap{
    width: 3.15rem;
    margin:0.7rem auto 0;
    position: relative;
    z-index: 5;
}
.titleWrap3{
    width:2.88rem;
}
.titleWrap4{
    width:2.95rem;
}
.titleWrap5{
    width:3.22rem;
}
.titleWrap6{
    width:2.48rem;
}
.titleWrap7{
    width:2.18rem;
}
.swiper-container{
    position: absolute;
    width: 92%;
    top: 50%;
    left:4%;
    transform:translateY(-40%);
    -webkit-transform:translateY(-40%);
}
.swiper-slide{
    background-size: 100% 100%;
}
.swiper-slide img{
    width: 100%;
}
.swiperWrap{
    position: absolute;
    top: 50%;
    margin-top: -3rem;
}
.swiper-button-prev,.swiper-button-next{
    width:0.34rem!important;
    height: 0.34rem!important;
    background-image:url('https://static.web.sdo.com/komori/pic/20181206_Exhibition/prevBtn.png')!important;
}
.swiper-button-next{
    background-image:url('https://static.web.sdo.com/komori/pic/20181206_Exhibition/nextBtn.png')!important;
}
.swiper-pagination-bullets{
    bottom:-20px!important;
}
/*第二页样式*/

/*第三页样式*/
.ball{
    width:2.8rem;
    margin:0.08rem auto;
}
.ball .ballNode{
    font-size:0.04rem;
    color:#ffd157;
}
/*第三页样式*/

/*第四页样式*/
.SurroundCon{
    width:100%;
    height:3.92rem;
    margin:0.1rem auto 0;
}
.SurroundCon .SurroundImg{
    width:2.6rem;
    margin:0 auto;
    position: relative;
}
.SurroundCon .SurroundImg img.SurroundImgBg{
    width:100%;
    display: block;
}
.SurroundCon .SurroundImg img.star{
    position: absolute;
    animation-delay:.2s;
    -webkit-animation-delay:.2s;
    -ms-animation-delay:.2s;
    -moz-animation-delay:.2s;
    -o-animation-delay:.2s;
}
.SurroundCon .SurroundImg img.star1{
    width:0.22rem;
    top:0.21rem;
    left:0.03rem;
    animation-duration:5s;
    -webkit-animation-duration:5s; 
}
.SurroundCon .SurroundImg img.star2{
    width:0.36rem;
    top:0.25rem;
    right:0.01rem;
    animation-duration:4.5s;
    -webkit-animation-duration:4.5s; 
}
.SurroundCon .SurroundDog{
    width:1.08rem;
    position: absolute;
    right:0;
    top:3.38rem;
}
.SurroundCon .SurroundText{
    width:3rem;
    position: absolute;
    top:3.76rem;
    left:0.32rem;
}
/*第四页样式*/

/*第五页样式*/
.petWrap{
    width:100%;
    margin-top:0.1rem;
    position: relative;
}
.petWrap img{
    position: absolute;
}
.petWrap .pet1{
    width:1.58rem;
    top:0;
    left:0.26rem;
    animation-delay:.2s;
    -webkit-animation-delay:.2s;
    -ms-animation-delay:.2s;
    -moz-animation-delay:.2s;
    -o-animation-delay:.2s;
}
.petWrap .pet2{
    width:1.53rem;
    top:0.3rem;
    right:0.26rem;
    animation-delay:.4s;
    -webkit-animation-delay:.4s;
    -ms-animation-delay:.4s;
    -moz-animation-delay:.4s;
    -o-animation-delay:.4s;
}
.petWrap .pet3{
    width:1.67rem;
    top:1.4rem;
    left:0.15rem;
    animation-delay:.6s;
    -webkit-animation-delay:.6s;
    -ms-animation-delay:.6s;
    -moz-animation-delay:.6s;
    -o-animation-delay:.6s;
}
.petWrap .pet4{
    width:1.84rem;
    top:1.52rem;
    right:0;
    animation-delay:.8s;
    -webkit-animation-delay:.8s;
    -ms-animation-delay:.8s;
    -moz-animation-delay:.8s;
    -o-animation-delay:.8s;
}
.petWrap .seePigBtn{
    width:1.64rem;
    top:3.26rem;
    left:0.96rem;
    position: absolute;
}
.petWrap .seePigBtn img{
    position: static;
}
/*第五页样式*/

/*第六页样式*/
.madeDogText{
    width:2.2rem;
    height:2.29rem!important;
    overflow: hidden;
    margin:0.11rem auto;
}

.heig{
    animation: heig 2s linear 0.5s both;
    -moz-animation: heig 2s linear 0.5s both;
    -webkit-animation: heig 2s linear 0.5s both;
    -o-animation: heig 2s linear 0.5s both;
    -ms-animation: heig 2s linear 0.5s both;
}

@keyframes heig{
    0%{
        height:0;
    }
    100%{
        height:2.29rem;
    }
}

@-webkit-keyframes heig{
    0%{
        height:0;
    }
    100%{
        height:2.29rem;
    }
}


@-moz-keyframes heig{
    0%{
        height:0;
    }
    100%{
        height:2.29rem;
    }
}

@-ms-keyframes heig{
    0%{
        height:0;
    }
    100%{
        height:2.29rem;
    }
}
@-o-keyframes heig{
    0%{
        height:0;
    }
    100%{
        height:2.29rem;
    }
}

.madeBtn{
    display: block;
    margin:0 auto;
    width:1.64rem;
    overflow: hidden;
    position: relative;
}
.madeBtnImg{
    z-index:2;
    position: relative;
}
.madeBtn .madeDog{
    width:0.87rem;
    top:0;
    left:0.4rem;
    position: absolute;
    animation-delay:2.1s;
    -webkit-animation-delay:2.1s;
}
.iconUl{
    width:1.77rem;
    position: absolute;
    bottom:2%;
    left:0.985rem;
}
.iconUl ul{
    overflow: hidden;
}
.iconUl ul li{
    float:left;
    width:0.33rem;
    margin-right:0.11rem;
    opacity: 0
}
.iconUl ul li a{
    display: block;
    width:100%;
    height:100%;
}
.bottomMove{
    animation:bottomMove 0.5s linear 2.1s both;
    -webkit-animation:bottomMove 0.5s linear 2.1s both;
    -ms-animation:bottomMove 0.5s linear 2.1s both;
    -o-animation:bottomMove 0.5s linear 2.1s both;
    -moz-animation:bottomMove 0.5s linear 2.1s both;
}
.iconUl ul li.icon1{
    animation-delay:2.1s;
    -webkit-animation-delay:2.1s;
}
.iconUl ul li.icon2{
    animation-delay:2.2s;
    -webkit-animation-delay:2.2s;
    position: relative;
}
.iconUl ul li.icon3{
    animation-delay:2.3s;
    -webkit-animation-delay:2.3s;
}
.iconUl ul li.icon4{
    margin-right:0;
    animation-delay:2.4s;
    -webkit-animation-delay:2.4s;
}
.iconUl ul li img{
    width:100%;
    display: block;
}
.iconUl ul li.icon2 img.ewm_weixin{
    width:0.8rem;
    position: absolute;
    top:-0.2rem;
    left:-0.1rem;
}
/*第六页样式*/
@keyframes arrow
{
    0% {
        transform:translateY(2px);
        -webkit-transform:translateY(2px);
    }
    50% {
        transform:translateY(-2px);
        -webkit-transform:translateY(-2px);
    }
    100% {
        transform:translateY(2px);
        -webkit-transform:translateY(2px);
    }
}
@keyframes arrow
{
    0% {
        transform:translateY(2px);
        -webkit-transform:translateY(2px);
    }
    50% {
        transform:translateY(-2px);
        -webkit-transform:translateY(-2px);
    }
    100% {
        transform:translateY(2px);
        -webkit-transform:translateY(2px);
    }
}

@keyframes opac{
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-moz-keyframes opac /* Firefox */
{
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes opac /* Safari and Chrome */
{
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-o-keyframes opac /* Opera */
{
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes bottomMove
{
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

@-moz-keyframes bottomMove /* Firefox */
{
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

@-webkit-keyframes bottomMove /* Safari and Chrome */
{
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

@-o-keyframes bottomMove /* Opera */
{
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes sS
{
    from {
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
    }
    to {
        -moz-transform: scale(0.8);
        -webkit-transform: scale(0.8);
        -o-transform: scale(0.8);
    }
}


.scaleSmall{
    -moz-transform:scale(0.8);
    -webkit-transform:scale(0.8);
    -o-transform:scale(0.8);
}
.scaleSmallA{
    animation: sS 0.3s linear;
    -moz-animation: sS 0.3s linear;
    -webkit-animation: sS 0.3s linear;
    -o-animation: sS 0.3s linear;
}
/*二维码弹窗样式*/
.ewmPop{
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    left:0;
    background: rgba(0,0,0,0.6);
    z-index:99999;
    display: none;
}
.ewmPop .showEwm{
    width:3.16rem;
    height:3.67rem;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
}
/*二维码弹窗样式*/

/*预约弹出*/
.shadowBox{
    background: rgba(37,112,113,0.8);
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 999;
    top:0;
    left:0;
}
.yuJump{
    width: 3.05rem;
    height: 3.23rem;
    background: url("https://static.web.sdo.com/komori/pic/20180926_web/m/yuWrap.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -1.615rem;
    margin-left: -1.32rem;
    text-align: center;
}
.yuJump .paddingWrap{
    padding: 0.4rem;
    padding-right: 0.7rem;
}
.longWrap{
    display: inline-block;
    width: 1.805rem;
    height: 0.3rem;
    background: url("https://static.web.sdo.com/komori/pic/20180926_web/input1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-bottom: 0.2rem;
    position: relative;
}
.longInput{
    width: 1.415rem;
    height: 0.3rem;
    border: 0px;
    margin-bottom: 0.15rem;
    font-size: 0.12rem;
    color: #ffffff;
    padding-left: 0.39rem;
}
.shortInput{
    display: inline-block;
    width: 0.745rem;
    height: 0.3rem;
    background: url("https://static.web.sdo.com/komori/pic/20180926_web/input2.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-bottom: 30px;
    border: 0px;
    font-size: 0.12rem;
    color: #ffffff;
    padding-left: 0.15rem;
}
.submitWrap{
    width: 0.9rem;
}
.yzm{
    display: inline-block;
    width: 0.81rem;
    float: left;
    margin-left: 0.1rem;
}
.phoneIcon{
    width: 0.11rem;
    height: 0.16rem;
    background: url("https://static.web.sdo.com/komori/pic/20180926_web/phone.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: 0.16rem;
    top: 0.08rem;
}
.qqIcon{
    width: 0.16rem;
    height: 0.16rem;
    background: url("https://static.web.sdo.com/komori/pic/20180926_web/qq.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: 0.13rem;
    top: 0.08rem;
}
.platWrap{
    font-size: 0.16rem;
    color: #ffffff;
    width: 0.75rem;
    height: 0.3rem;
    line-height: 0.3rem;
    position: relative;
    text-align: center;
    z-index: 30;
}
.platWrap.an{
    float: left;
    margin-left: 0.15rem;
}
.platWrap.ios{
    float: right;
}
.switch{
    background: #a4c439;
    border: 0.02rem solid #ffffff;
    width: 0.83rem;
    height: 0.26rem;
    position: absolute;
    border-radius: 100px;
    left: 0px;
    top: 0px;
    transition-duration: 300ms;
}
.anIcon{
    width: 0.15rem;
    height: 0.17rem;
    background: url(https://static.web.sdo.com/komori/pic/20180926_web/an.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: 0px;
    top: 0.07rem;
}
.iosIcon{
    width: 0.15rem;
    height: 0.17rem;
    background: url("https://static.web.sdo.com/komori/pic/20180926_web/ios.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: 0px;
    top: 0.07rem;
}
.maImg{
    position: absolute;
    right: -0.9rem;
    top: 0rem;
    width: 1rem;
}
.closeBtn{
    width: 0.336rem;
    height: 0.364rem;
    background: url("https://static.web.sdo.com/komori/pic/20180926_web/closeBtn.png");
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    right: -0.1rem;
    top: -0.1rem;
}
.closeBtn.yuClose{
    right: 0.2rem;
    top: -0.1rem;
}
.closeBtn.ztClose{
    width:0.243rem;
    height:0.253rem;
    right: 0.25rem;
    top:1rem;
    background: url("https://static.web.sdo.com/komori/pic/20181206_Exhibition/closeBtn.png");
    background-size: 100%;
    background-repeat: no-repeat;
}
.pigClose,.ewmClose{
    width:0.243rem;
    height:0.253rem;
    right:-0.05rem;
    top:-0.05rem;
    position: absolute;
    background: url("https://static.web.sdo.com/komori/pic/20181206_Exhibition/closeBtn.png");
    background-size: 100%;
    background-repeat: no-repeat;
}
/*预约弹出*/

/*展台弹窗样式*/
.showZTPop{
    width:100%;
    height:100%;
    background-image:url('https://static.web.sdo.com/komori/pic/20181206_Exhibition/back1.jpg');
    background-position: center;
    background-size: cover;
    position: absolute;
    top:0;
    left:0;
}
.loadCon{
    width:3rem;
    margin:0rem auto;
}
.loadCon .loadText{
    padding:0.1rem;
    position: absolute;
    top:3.94rem;
    display: none;
}
.loadCon .loadText p{
    color:#fff;
    font-size:0.11rem;
    margin:0.03rem 0;
}
.loadCon .loadText p span{
    width:0.33rem;
    height:0.147rem;
    background:url('https://static.web.sdo.com/komori/pic/20181206_Exhibition/nodeBg.png') 0 0 no-repeat;
    background-size:100% auto;
    display: inline-block;
    color:#1a9591;
    font-weight: bold;
    text-align: center;
    margin-right:0.1rem;
}
.loadCon .loadText p span.node2{
    color:#fff;
    width:100%;
    background:none;
    text-align: left;
}
/*展台弹窗样式*/

/*侧边导航样式*/
.silderNav{
    width:0.08rem;
    position: absolute;
    top:50%;
    right:10px;
    z-index:999;
    margin-top:-0.2rem;
    /*transform:translateY(-50%);
    -webkit-transform:translateY(-50%);*/
    display:none;
}
.silderNav ul li{
    width:0.08rem;
    height:0.08rem;
    border:#fff 1px solid;
    border-radius:50%;
    margin-top:0.12rem;
}
.silderNav ul li.act{
    background-color:#fff;
}
/*侧边导航样式*/

/*查看萌宠样式*/
.showPigPop{
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    left:0;
    background:rgba(0,0,0,0.6);
    z-index:999999;
    display: none;
}
.showPigPop .showPig{
    width:3.16rem;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
}
/*查看萌宠样式*/