html,body{
    padding: 0;
    margin: 0;
}
body{
    font-family:Arial,Helvetica,sans-serif,"microsoft yahei";
    color: #423822;
    background: #99d6f3;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th{
    background: transparent;
    border: 0px;
    margin: 0px;
    padding: 0px;
    vertical-align: baseline;
    /* border-radius: 20px; */
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-size:100%;
}
ul,li,ol {
    list-style: none;
}
em,b,i{
    font-style:normal;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a{
    color: #272727;
}
a{text-decoration:none ; text-underline: none}
a:hover{text-decoration:none;text-underline: none}
a img {
    border: none;
}
input, textarea, select, a {
    margin:0px;
    padding:0px;
    outline:0px;}
textarea {resize:none; overflow:auto;}

aside, article, footer, header, nav, section ,main{display:block;
    height: auto;
    overflow: hidden;}


.disFlex{
    display: -moz-box; /*firefox*/
    display: -ms-flexbox; /*IE10*/
    display: -webkit-box; /*Safari*/
    display: -webkit-flex; /*Chrome*/
    display: box;
    display: flexbox;
    display: flex;
    justify-content: space-between;
}

.main{
    width: auto;
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
}

.container{
    width: 95%;
    height: 100%;
    position: absolute;
    top:0;
    left: 2.5%;
}
.mainBg{
    width: 100%;
    height: auto;
}
.mainBg img{
    width:auto;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
    display: block;
}
.container img{
    width: 100%;
    height: auto;
}
.container>div{
    position: absolute;
}
.logo{
    width: 26.3%;
    top: 1%;
    left: 3.1%;
}
.ce02{
    width: 70.2%;
    left: 14%;
    top: 10%;
    animation-name: ceAni ;
    animation-duration: 1s; 
    animation-delay: 3s;

}
@-webkit-keyframes ceAni {
    0%{ transform: scale(0.96)}
    50%{ transform: scale(1)}
    100%{ transform: scale(0.96)}
}
.ce01{
    width: 81%;
    top: 5.8%;
    left: 9.5%;
    /* animation: ceAni  infinite 1s; */
}

/*juanzhou*/
.juanzhou{
    position: absolute;
    width: 100%;
    height: 13.3%;
    top: 15.3%;
    /* left: 2.5%; */
}
/*height:93.33%;
    top: 3.335%;*/
.map{
    height:100%;
    width:20%;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: start;
}

.l-pic-index,.r-pic-index{  
    z-index:2;
    width:10%;
    height:100%; 
    background-size: 100% 100%;
    background-repeat: no-repeat;
    float: left;
    position: absolute;
}
.l-pic-index{
 
    left: 0;
}
.r-pic-index{
right: 0
}
.l-pic-index img,.r-pic-index img{
 width: 100%;
 height: auto;
}
 
/*content*/
.map-content{ 
    width:80%;
    height: 100%; 
    background-image: url('gds.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: absolute;
    left: 7%;
}

.main-body{
    height: 100%;
    position: relative;
    width: 100%;
}
/*?????????*/
.main-content{
    position: relative;
    width: 22.34rem;/*2234px*/
    height: 100%;
}
.mod{   
    position: absolute;
    width: 100%; 
}
.btn{
    display: block;
    width: 12.3%;
    right: 4.5%;
    position: absolute;
}
.btn img{
    width: 100%;
 }
 
.animated{

}
.btn::before{
    content: ' ';
    display: block;
    width: 18.5rem;
    height: 19rem;
    background-image: url("dress.png");
    background-size: 100% 100%;
    position: absolute;
    left:50%;
    bottom: 90%;
    transform: translateX(-50%);
    display: none;
}
.btn::after{
    content: ' ';
    display: block;
    width: 18rem;
    height: 18rem;
    background-image: url("note.gif");
    background-size: 100% 100%;
    position: absolute;
    left:50%;
    bottom: -20%;
}
.btn.default::after{
    display: none;
}
.btn.default::before{
    display: block;
}
.mod01{top:43% ; }
.mod02{top:53% ; }
.mod03{top:66% ; }
.mod04{top:77.4% ; }
 
 
.mod:nth-child(odd) > .btn {
right: auto;
left:4.5%
}

.point{
    width: 94%;
    top: 30%;
    left: 3%;
    align-items: center;
}
.line{
    margin-bottom: 6rem;
}
.line img{
    width: 51%;
    height: auto;
    display: block;
    margin: 0 auto;
}
 
.img-text{
    align-items: center;
    justify-content: center; 
}
.img-text img{
    width: 47%;
    height: auto;
    margin-right: 4rem; 
} 
.img-text a{
    display: flex;
    align-items: center;
}
.img-text strong{
    font-size: 24px;
    display: block;
    margin-bottom:3.5rem ;
}
.img-text p {
    
}

.img-text p span{
    font-size: 18px;
    font-weight: bold;
    line-height: 1.5em;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    font-weight: normal;
}
.mod .modal{
    width: 72%;
    height: auto;
    min-height:15rem;
    border: 15px #524132 solid;
    border-radius: 40px 0 40px 0;
    background: rgba(117,103,72,0.8);
    display: none;
    z-index: 99;
    position: absolute;
    right: 18%;
}
.mod .modal.active{
    display: block;
}
.mod:nth-child(odd) > .modal{
    left: 18%;
    right: auto;
}
ul{
   padding: 2rem 2rem 2rem 8rem;
}
ul li{
    list-style-type: disc;
    font-size: 38px;
    line-height: 1.5em;
    margin: 1em 0;
}
ul li::marker{
    color: #ffffff;
    font-size: 1.5em;
    font-weight: bolder;
}
ul li a{
    color: #ffffff;
}
.footer{
    position: absolute;
    width: 100%;
    bottom: 0;
    margin-bottom: 10rem;
    text-align: center;
}
.footer img{
    display: block;
    margin: 0 auto;
    width: auto;
    max-width: 80%;
}
.footer p{
    line-height: 2em;
    font-size: 18px; 
    padding: 5rem 0 0 0;

}
.main-body{
    width: 80%;
    margin: 0 auto;
    display: flex;
    align-items: center;  
    display: none; 
    animation: fadeInUp all 0.5s;
}
.main-body p{
    font-size: 54px;
    font-weight: bold;
    color: #464646;
    line-height: 1.5em;
    /* padding: 1em 0; */
}
@keyframes fadeInUp{
    0%{
        opacity: 0;
       
    }
    100%{
        opacity: 1;
        
    }
}
@media all and (max-width: 1920px) {
    .main{
        width: 100%;
    }
}
@media all and (max-width: 1480px){
    .img-text,.img-text-text,.img-text-box{
        
        width: auto;
        margin: 0 2rem;
    }
    .img-text-box{
        margin-bottom: 3rem;
    }
    .img-text img{
        display: block;
        /* margin: 0  auto; */
    }
   
    .img-text strong{
        font-size: 20px;
    }
    ul li{font-size: 22px;}
    .img-text p span{
        font-size: 16px;
    }
    .main-body p{
        font-size: 28px;
    }
}
@media all and (max-width: 1080px){
    .main-body p{
        font-size: 22px;
    }
  .btn::before,.btn::after{
    width: 6rem;
    height: 6rem;
  }
}
@media all and (max-width: 768px){
    .img-text strong{
        font-size: 16px;
        margin-bottom: 1rem;
    }
    ul li{
        font-size: 16px;
    }
    .img-text p span{
        font-size: 14px;
    }
  
   .img-text p span{
    -webkit-line-clamp: 2;
    line-clamp: 2;
    }
    .line{
        margin-bottom: 2rem;
    }
    .footer p{ 
        font-size: 14px; 
    }
    .main-body p{
        font-size: 16px;
    }
}
@media all and (max-width: 480px){
    .main-body p{
        font-size: 12px;
    }

}