@charset "utf-8";
/* CSS Document */

@media screen and (min-width:1200px){
    #main{
        padding:30px 0px 80px 0px;
        width:100%;
        background-color:#ffffff;
        margin:0px auto;
    }
    #main_pic{
        padding:0px;
        width:1200px;
        background-color:#ffffff;
        margin:0px auto;
        text-align:right;
        height:auto;
        position:relative;

    }
    #main_pic .main100{
       width: initial;
       margin-right:10%;
    }
    #main_pic_titlepre{
        position:absolute;
        margin-left:12%;
        top:35%;
        transform:translateY(-50%);
        font-size:50px;
        font-family:serif;
        color:#895252;
        padding: 2px 15px 2px 15px;
        background-color: #8888ff;
        border-radius: 50px 0px 50px 0px;
        color: #ffffff;  
        line-height:1.2em;      

        /*
        margin-top:-50%;   

        */
    }  
    #main_pic_title{
        position:absolute;
        margin-left:12%;
        top:45%;
        transform:translateY(-50%);
        font-size: 33px;
        font-family:serif;
        line-height:1em;
        text-align:left;
        text-shadow: 0.5px 0px 0px #ffffff;
    } 
    #main_pic_title span{
        font-size:1.7em;
    } 
    .copypre{
        width:60%;
        text-align:center;
        margin:0px auto;
        line-height:1em;
        padding-right:40px;
    }
    .copyprein{ 
        display:inline-block;
        border-radius: 5px;
        border: 1px solid #fabb00;
        margin:0px auto;
        width:7%;
        margin-left:5px;
        line-height:1em;
        padding:5px;
    }
    .copyprein img{ 
        width: 100%;
        line-height:1em;
        margin:0px auto;
    }
    .copyin{
        width:50%;
        text-align:left;
        font-size:14px;
        margin:0px auto;
        margin-top:20px;
    } 

    .master_photo{
        margin-left:20%;
        width:60%;
        clip-path: ellipse(50% 40% at 50% 50%);
    }
    .master_photo img{
        width:100%;
    }  
    .active_peace{
        float: left;
        margin-right:10px;
        margin-bottom:5px;
        width:100px;
    } 

}

@media screen and (min-width:768px) and (max-width:1199px){
    #main{
        padding:0px 0px 60px 0px;
        width:100%;
        background-color:#ffffff;
        margin:0px auto;
    }
    #main_pic{
        width:90%;
        background-color:#ffffff;
        margin:0px auto;
        text-align:right;
        height:auto;
        position:relative;
    }
    #main_pic .main100{
       width: initial;
       margin-right:3%;
    }
    #main_pic_titlepre{
        position:absolute;
        margin-left:3%;
        top:35%;
        transform:translateY(-50%);
        font-size:40px;
        font-family:serif;
        color:#895252;
        padding: 2px 15px 2px 15px;
        background-color: #8888ff;
        border-radius: 50px 0px 50px 0px;
        color: #ffffff;  
        line-height:1.2em;      

        /*
        margin-top:-50%;   

        */
    }  
    #main_pic_title{
        position:absolute;
        margin-left:3%;
        top:44%;
        transform:translateY(-50%);
        font-size: 28px;
        font-family:serif;
        line-height:1em;
        text-align:left;
        text-shadow: 0.5px 0px 0px #ffffff;
    } 
    #main_pic_title span{
        font-size:1.7em;
    } 
    .copypre{
        width:70%;
        text-align:center;
        margin:0px auto;
        line-height:1em;
        padding-right:40px;
    }
    .copyprein{ 
        display:inline-block;
        border-radius: 5px;
        border: 1px solid #fabb00;
        margin:0px auto;
        width:7%;
        margin-left:5px;
        line-height:1em;
        padding:5px;
    }
    .copyprein img{ 
        width: 100%;
        line-height:1em;
        margin:0px auto;
    }
    .copyin{
        width:75%;
        text-align:left;
        font-size:14px;
        margin:0px auto;
        margin-top:20px;
    } 

    .master_photo{
        margin-left:20%;
        width:60%;
        clip-path: ellipse(50% 40% at 50% 50%);
    }
    .master_photo img{
        width:100%;
    }  
    .active_peace{
        float: left;
        margin-right:10px;
        margin-bottom:5px;
        width:90px;
    } 

}
@media screen and (max-width:767px){
     #main{
        padding:0px 0px 40px 0px;
        width:100%;
        background-color:#ffffff;
        margin:0px auto;
    }
    #main_pic{
        width:90%;
        background-color:#ffffff;
        margin:0px auto;
        text-align:center;
        height:auto;
        position:relative;
    }
    #main_pic .main100{
       width: 60%;
    }
    #main_pic_titlepre{
        width:80%;
        position:relative;
        margin-left:10%;
        font-size:33px;
        font-family:serif;
        color:#895252;
        line-height:1em;
        margin-bottom:5px;  
        padding: 2px 15px 2px 15px;
        background-color: #8888ff;
        border-radius: 0px 30px 0px 30px;
        color: #ffffff;  
    }  
    #main_pic_title{
        position:relative;
        font-size: 17px;
        font-family:serif;
        line-height:1em;
        text-align:center;
        text-shadow: 0.5px 0px 0px #ffffff;
        margin-top:0px;
        margin-left:0px;
        margin-bottom:20px;
    } 
    #main_pic_title span{
        font-size:1.7em;
    } 
    .copypre{
        max-width:90%;
        text-align:center;
        margin:0px auto;
        line-height:1em;
        padding-right:0px;
    }
    .copyprein{ 
        display:inline-block;
        border-radius: 5px;
        border: 1px solid #fabb00;
        margin:0px auto;
        width:6%;
        margin-left:5px;
        line-height:1em;
        padding:4px;
    }
    .copyprein img{ 
        width: 100%;
        line-height:1em;
        margin:0px auto;
    }
    .copyin{
        width:85%;
        text-align:left;
        font-size:14px;
        margin:0px auto;
        margin-top:20px;
    } 

    .master_photo{
        margin-left:15%;
        width:70%;
        clip-path: ellipse(50% 40% at 50% 50%);
    }
    .master_photo img{
        width:100%;
    }  
    .active_peace{
        float: left;
        margin-right:10px;
        margin-bottom:5px;
        width:80px;
    } 

}