body,html,#app{
    max-width: 640px!important;
    background: #f4f4f4;
    color: #737373;
    height: auto;
}
#main{
    max-width: 640px!important;
    //height:9.4rem;
    margin:0 auto;
    overflow: hidden;
    height:auto;
    background-color: #fff;
    //padding-top:0.78rem;
    // .border-img{
    //     border-radius: 8px;
    // }
    .template-title{
        position: relative;
        .bg-img{
            width: 100%;
            display: block;
        }
        .logo-img{
            width: 1.1rem;
            max-height:1.1rem;
            display: block;
            position: absolute;
            top:0.56rem;
            left:0.5rem;
        }
        h2{
            line-height: 0.76rem;
            width:86%;
            margin:0;
            font-size: 0.8rem;
            color:#fff;
            position: absolute;
            top:2.4rem;
            left:0.5rem;
        }
        .template-detail{
            width:80%;
            position: absolute;
            left:12%;
            top:4rem;
            color:#fff;
            font-size: 0.4rem;
            .overflow{
                margin:0.2rem 0 0.4rem;
            }
            .text-detail{
                font-size: 0.3rem;
                color: #F8AE7A;
                margin:0;
            }
        }
    }
    .title-img{
        display: block;
        margin-bottom: 0.8rem;
    }
    .text-h{
        font-size: 0.4rem;
        color: #5C400A;
        margin:0;
    }
    .text-img{
        width:48%;
        display:block;
        margin:0.1rem auto 0.24rem;
    }
    .text-sub1{
        width:72%;
        margin:0 auto 0.4rem;
        font-size: 0.34rem;
        color: #5C400A;
        line-height: 0.6rem;
    }
    .title-box{
        width:100%;
        position: relative;
        height:3.8rem;
        margin-bottom:0.2rem;
        img{
            position: absolute;
        }
        .data-title{
            width:0.23rem;
            height:2.92rem;
        }
        .data-img,.swiper-img{
            width:5.42rem;
            height:3.48rem;
            position: absolute;
            // border-radius: 8px;
        }
        .swiper-img img{
            width:5.42rem;
            height:3.48rem;
        }
        .data-img1{
            width:2.78rem;
            height:3.17rem;
            left:0;
            bottom:0;
        }
        .data-img2{
            left:1.38rem;
            bottom:0.44rem;
        }
        .data-img3{
            top:0;
            right:0.3rem;
        }
        .data-img4{
            width:2.71rem;
            height:2.96rem;
            right:0.1rem;
            top:0;
        }
        .data-img5{
            right:1.22rem;
            top:0.3rem;
        }
        .data-img6{
            top:0;
            left:0.3rem;
        }
    }
    .data-text1{
        font-size: 0.34rem;
        color: #5C400A;
        width:5.6rem;
        margin:0.18rem 0.3rem 0.7rem;
    }
    .data-text2{
        width:72%;
        font-size: 0.34rem;
        color: #5C400A;
        line-height: 0.6rem;
        text-align: right;
        margin:-0.4rem 5% 1.2rem 23%;
    }
    .data-sec{
        width:90%;
        margin:0 auto;
        .title-img{
            width:60%;
            position: relative;
            margin:0 auto 0.5rem;;
            img{
                width:100%;
                display: block;
            }
            .data-text{
                width:100%;
                font-size: 0.34rem;
                color: #5C400A;
                position: absolute;
                top:50%;
                left:50%;
                margin:0;
                transform:translate(-50%,-50%);
                -webkit-transform:translate(-50%,-50%);
            }
        }
        .data-sub{
            margin:0 0 0.3rem;;
            font-size: 0.28rem;
            color: #5C400A;
        }
        .data-photo{
            width:100%;
            display: block;
        }
        .data-photos{
            overflow: hidden;
            margin:0.15rem 0 0.3rem;
            img{
                display: block;
                float: left;
            }
            .data-photo1{
                width:3.87rem;
                height:3.48rem;
            }
            .data-photo2{
                width:2.68rem;
                height:3.48rem;
                float: right;
            }
        }
        .data-last{
            width:100%;
            font-size: 0.28rem;
            color: #5C400A;
            margin:0 auto 1.2rem;
        }
    }
    .tel-sec{
        background-color: #463E35;
        padding:0.55rem 0.4rem 0.4rem;
        .tel-title{
            color:#fff;
            font-size: 0.24rem;
            color: #FFFFFF;
            line-height:0.36rem;
            margin-top:0;
        }
        .counselor-sec{
            width:100%;
            padding:0.3rem 0;
            text-align: center;
            border-bottom:1px solid rgba(255,255,255,0.32);
            margin-bottom:0.57rem;
            img{
                width:3.73rem;
            }
        }
        .text-tel{
            color:#fff;
            font-size:0.24rem;
            margin:0.2rem 0 0;
        }
        .tel-sec1{
            display: flex;
            align-items: center;
            padding:0;
            margin-bottom: 0.2rem;
            input{
                flex:2;
                height:0.6rem;
                border-radius: 0.08rem;
                outline: none;
                border:none;
                padding-left:0.2rem;
                background-color: rgba(255,255,255,0.2);
                color:rgba(255,255,255,0.5);
            }
            div{
                height:0.6rem;
                line-height:0.6rem;
                font-size: 0.26rem;
                color: #FFFFFF;
                background: #737373;
                box-shadow: 0 5px 28px 0 rgba(0,0,0,0.39);
                background-color: rgba(255,255,255,0.5);
                border-radius: 0.08rem;
                flex: 1;
                margin-left:0.2rem;
                cursor: pointer;
            }
        }
        .tel-bot{
            margin-top:0.7rem;
            .tel-main{
                display: flex;
                width:5rem;
                height:0.8rem;
                margin:0 auto;
                font-size: 0.3rem;
                color: #737373;
                p{
                    position: absolute;
                    right:0.45rem;
                    top:50%;
                    transform: translateY(-50%);
                    -webkit-transform: translateY(-50%);
                    margin:0;
                }
                a{
                    color: #737373;
                }
                i{
                    width:0.38rem;
                    height:0.38rem;
                    display: block;
                    position: absolute;
                    left:0.4rem;
                    top:50%;
                    transform: translateY(-50%);
                    -webkit-transform: translateY(-50%);
                }
                .tel-btn{
                    flex: 1;
                    border-radius: 1rem 0 0 1rem;
                    background-color: #fff;
                    border-right:1px solid #CDC9BE;
                    position: relative;
                    i{
                        background: url('http://skyforest.static.elab-plus.com/previewModel/counselor.png');
                        background-size: 100% 100%;
                    }
                }
                .coun-btn{
                    flex: 1;
                    border-radius: 0 1rem 1rem 0;
                    background-color: #fff;
                    position: relative;
                    i{
                        background: url('http://skyforest.static.elab-plus.com/previewModel/tel.png');
                        background-size: 100% 100%;
                    }
                }
            }
            .code-img{
                width:2.4rem;
                height:2.4rem;
                border:0.06rem solid #fff;
                box-sizing: border-box;
                -webkit-box-sizing: border-box;
                margin:1.6rem auto 0.4rem;
                display: block;
            }
            .text-code{
                font-size: 0.28rem;
                color: #C29D69;
                line-height:0.33rem;
                margin:0;
            }
            .text-adr{
                font-size: 0.28rem;
                color:#fff;
                opacity: 0.5;
                margin: 0 0 4px;
            }
            .tel-img{
                width:2.4rem;
                height:0.7rem;
                display: block;
                margin:0.3rem auto;
                background: url('http://skyforest.static.elab-plus.com/temp/template2/button_phone.png');
                background-size: 100% 100%;
            }
            .text-bot{
                font-size: 0.24rem;
                color:rgba(255,255,255,0.39);
                margin:0;
            }
            .edite-code{
                padding:1.22rem  0.4rem 0.46rem;
                position: relative;
                img{
                    width:1.11rem;
                    height:1.11rem;
                    background-color: #fff;
                    display: block;
                }
                .code-title{
                    width:4.8rem;
                    position: absolute;
                    bottom:0.46rem;
                    right:0;
                    .title{
                        font-size: 0.28rem;
                        color: #737373;
                        border-bottom:1px solid #737373;
                        margin:0;
                        line-height:0.4rem;
                    }
                    .sub-title{
                        font-size: 0.24rem;
                        color: #737373;
                        line-height:0.33rem;
                        margin:0;
                    }
                }
            }
        }
    }
}
