@media (max-width:1200px){
    .page{
        width:100%;
    }
    main{
        flex-direction: column;
    }
    aside{
        width:100%;
    }
    .mainSide{
        width:100%;
        padding:0 10PX;
    }
    .mainSide h1,.mainSide .bottomLine{
        margin-left:30px;
        margin-right:30px;
    }
    .mainSide .bottomLine{
        width:auto;
    }
    aside .mainSkill li,
    aside .introduce li,
    .mainSide .skillList li{
        list-style: square inside;
    }
    .mainSide .otherLinks li{
        margin-right:10px;
    }
    .mainSide .portfolio .portfolioShow{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .mainSide .portfolio .portfolioShow img{
        flex-grow: 1;
        width:100%;
    }
    .mainSide .portfolioShow .portfolioLink{
        flex-grow: 0;
        width:100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }
    aside .information li{
        width:40%;
        margin:0;
        margin-bottom:20px;
    }
    .clearfix::after{
        content:'';
        display: block;
        clear: both;
    }
    aside .information li:nth-child(odd){
        float: left;
    }
    aside .information li:nth-child(even){
        width:55%;
        float:right;
    }
    .bottomLine{
        width:100%;
    }
    h1{
        text-align: center;
    }
    .otherLinks ul{
        display:flex;
        justify-content: center;
    }
    .bottomLine.active{
        animation: none;
    }
    .topBar{
        flex-direction: column;
        align-items: center;
    }
    .topBar .headSculptureWrapper{
        margin:30px 0;
    }
}