@media screen and (min-width:720px) {

.Underline{
    width: 145px;
    border: 3px solid #eb6417;
    border-radius:5px;
    margin: 5px auto 0;
}

.Charge-name{
    font-size: 36px;
    padding-bottom: 8px;
    text-align: center;
    padding-top: 65px;
}

.backdrop{
    width: 100%;
}

.Subheading{
    font-size: 28px;
    text-align: center;
    margin: 20px 0;
}

.Notes{
    font-size: 18px;
    color: #eb6417;
    text-align: center;
}

.Application-angle{
    width: 60%;
    border-radius:115px;
    margin:60px auto 90px;
    overflow:hidden;
}

.partition{
    margin-top: 15px;
}

.Family{
    background-color:  #fce6da;
    width: 49.5%;
    float: left;
}

.Family-diagram{
    margin: 20px;
    float: left;
    opacity:0.7;
}

.periphery{
    background-color:  #fce6da;
    width: 49.5%;
    float: right;
}

.periphery-diagram{
    margin: 20px;
    float: right;
    opacity:0.7;
}

.script-1{
    float: left;
    margin-left: 5%;
}

.script-2{
    float:right;
    margin-right:5%; 
}

.Upper-spacing{
    margin-top: 130px;
}

.Lowe-spacing{
    margin-top: 40px;
}

.Advantage-point{
    width: 60%;
    margin: 100px auto 260;
}

.merit{
    font-size: 18px;
    width: 25%;
    height: 415px;
    float: left;
    border-radius:15px;
}

.merit-name{
    font-size: 28px;
    display: table;
    margin:85px auto 55px;
}

.merit-content{
    display: table;
    margin: auto;
}

.merit-i{
    font-size: 18px;
    width: 25%;
    height: 415px;
    background:rgba(235, 100, 23, 0.8);
    color: white;
    float: left;
    border-radius:5px;
}

.characteristic{
    width: 60%;
    margin:140px auto 230;
}

.Community-village{
    width: 33%;
    float: left;
}

.Community{
    width: 240px;
    height: 240px;
    margin: auto;
    background:rgba(235, 100, 23, 0.8);
    border-radius:50%;
}

.titl{
    color: white;
    font-size:38;
    line-height: 240px;
    display: table;
    margin: 0 auto;
}

.village{
    margin-top:35px; 
    text-align: center;
    font-size: 28px;
    line-height: 40px;
}

.activity{
    margin-top:35px; 
    text-align: center;
    font-size: 28px;
    line-height: 40px;
    border-left:1px solid #eb6417; 
    border-right:1px solid #eb6417; 
}

.Opportunity{
    width: 60%;
    margin: 80px auto;
}

.handset{
    float: left;
    margin-right: 50px;
}

.chance{
    font-size: 38px;
    padding-top: 150px;
    
    margin-left: 9%;;
}

.chance samp{
    font-family:"Microsoft YaHei";
    color: #eb6417;
}

.Shopping-Mall{
    background-color: #eb6417;
    display: table;
    margin: 70px 0 0 0;
}

.Shopping-Mall p{
    position:relative;
    padding: 0 5px;
    bottom: 30px;
    font-weight:bold;
}

}

@media screen and (max-width:680px) {
    html {
        overflow-y: scroll;
      }
      :root {
        overflow-y: auto;
        overflow-x: hidden;
      }
      :root body {
        position: absolute;
      }
      body {
        width: 100vw;
        overflow: hidden;
      }


    .Underline{
        width: 145px;
        border: 3px solid #eb6417;
        border-radius:5px;
        margin: 5px auto 0;
    }
    
    .Charge-name{
        font-size: 36px;
        padding-bottom: 8px;
        text-align: center;
        padding-top: 65px;
    }

    .Subheading{
        font-size: 28px;
        text-align: center;
        margin: 20px 0;
    }
    
    .Notes{
        font-size: 18px;
        color: #eb6417;
        text-align: center;
    }
    
    .Application-angle{
        width: 80%;
        margin: auto;
    }

    .Family{
        width: 100%;
        background: rgba(236, 102, 24, 0.3);
    }

    .periphery{
        width: 100%;
        background: rgba(236, 102, 24, 0.3);
    }

    .Family-diagram{
        width: 35%;
        float: left;
        margin: 10%;
        opacity:0.7;
    }

    .periphery-diagram{
        width: 35%;
        float: right;
        margin: 10%;
        opacity:0.7;
    }

    .Upper-spacing-1{
        margin-top: 5px;
    }

    .Lowe-spacing-1{
        margin-top: 5px;
    }

    .script-1{
        float: left;
        padding-top: 10%;
    }

    .script-2{
        float: right;
        padding-top: 10%;
    }

    .Advantage{
        width: 100%;
        overflow: hidden;
    }
    
    .Advantage-point{
        width: 100%;
        overflow-x: scroll;
        white-space: nowrap;
    }

    .point{
        width: 1300px;
    }

    .merit{
        width: 280px;
        float: left;
        height: 400px;
        margin-bottom: 100px;
        margin-top: 70px;
    }

    .merit-i{
        width: 280px;
        height: 400px;
        float: left;
        border-radius:15px;
        background-color: #eb6417;
        color: white;
        margin-bottom: 100px;
        margin-top: 70px;
    }

    .merit-name{
        font-size: 28px;
        text-align: center;
        padding-bottom: 60px;
        padding-top: 80px;
    }

    .merit-content{
        font-size: 18px;
        text-align: center;
    }

    .special{
        width: 100%;
        background-color: #eeeeee;
    }

    .Community{
        width: 40%;
        padding-bottom: 40%;
        background-color: #eb6417;
        border-radius:50%;
        margin:90px auto 0;

    }

    .titl{
        font-size: 38px;
        color: white;
        text-align: center;
        margin: 0 auto;
        position: relative;
        top: 115px;
        left: 0;
    }

    .village{
        text-align: center;
        margin-top: 30px;
        line-height: 35px;
        font-size: 28px;
        padding-bottom: 60px;
    }

    .activity{
        text-align: center;
        margin-top: 30px;
        line-height: 35px;
        font-size: 28px;
    }

    .Opportunity{
        width: 80%;
        margin: 40px auto 0;
    }

    .handset{
       width: 100%;
    }

    .chance{
        text-align: center;
        font-size: 27px;
    }
    
    .chance samp{
        font-family:"Microsoft YaHei";
        color: #eb6417;
    }

    .Shopping-Mall{
        background-color: #eb6417;
        display: table;
        margin: 50px auto 70;
    }
    
    .Shopping-Mall p{
        position:relative;
        padding: 0 5px;
        bottom: 20px;
        font-weight:bold;
    }
}

@media screen and (max-width:450px){
    .Family-diagram{
        margin: 5%;
        width: 30%;
    }

    .periphery-diagram{
        margin: 5%;
        width: 30%;
    }

    .script-1{
        float: left;
        padding-top: 0;
    }
    .script-2{
        float: right;
        padding-top: 0;
    }
    
    .titl{
        font-size: 20px;
        position: relative;
        top: 75px;
        left: 0;
    }


    .village{
        text-align: center;
        margin-top: 20px;
        line-height: 30px;
        font-size: 18px;
    }

    .activity{
        text-align: center;
        margin-top: 20px;
        line-height: 30px;
        font-size: 18px;
    }
}