@charset "UTF-8";

            
/*default*/
*{
    margin:0 auto; 
    padding:0; 
    text-align:center; 
    font-family:sans-serif; 
    font-size:16px; 
    color:#000000;
    line-height:normal; 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-text-size-adjust:100%;
}

body{
    background-color:#ffffff;
    padding:0 30px;
    min-width:800px;
}

/*margin*/
footer{
    margin-bottom:30px;
}

/*Decoration*/
li{list-style-type:none;}
small, small a{font-size:13px;}


/*footer flex*/
body{
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}
main {
    flex: 1;
}



/*animation*/

    /*rotate360*/
    
        @-webkit-keyframes rotate360 {
            0% {transform: rotate(0deg);}
            100% {transform: rotate(360deg);}
            }
        @-moz-keyframes rotate360 {
            0% {transform: rotate(0deg);}
            100% {transform: rotate(360deg);}
        }
        @-ms-keyframes rotate360 {
            0% {transform: rotate(0deg);}
            100% {transform: rotate(360deg);}
        }
        @-o-keyframes rotate360 {
            0% {transform: rotate(0deg);}
            100% {transform: rotate(360deg);}
        }
        @keyframes rotate360 {
            0% {transform: rotate(0deg);}
            100% {transform: rotate(360deg);}
        }

        .cls_rotate360{
            animation-name: rotate360;
            animation-timing-function: linear;
            animation-duration: 300s;
            animation-iteration-count: infinite;
            animation-direction: alternate;   
        }

        @-webkit-keyframes rotate360r {
            0% {transform: rotate(0deg);}
            100% {transform: rotate(-360deg);}
            }
        @-moz-keyframes rotate360r {
            0% {transform: rotate(0deg);}
            100% {transform: rotate(-360deg);}
        }
        @-ms-keyframes rotate360r {
            0% {transform: rotate(0deg);}
            100% {transform: rotate(-360deg);}
        }
        @-o-keyframes rotate360r {
            0% {transform: rotate(0deg);}
            100% {transform: rotate(-360deg);}
        }
        @keyframes rotate360r {
            0% {transform: rotate(0deg);}
            100% {transform: rotate(-360deg);}
        }

        .cls_rotate360r{
            animation-name: rotate360r;
            animation-timing-function: linear;
            animation-duration: 300s;
            animation-iteration-count: infinite;
            animation-direction:alternate;   
        }

    /*invert*/
        @-webkit-keyframes invertanimation {
            0% {filter:invert(0)；}
            100% {filter: invert(100%);}
            }
        @-moz-keyframes invertanimation {
            0% {filter:invert(0)；}
            100% {filter: invert(100%);}
        }
        @-ms-keyframes invertanimation {
            0% {filter:invert(0)；}
            100% {filter: invert(100%);}
        }
        @-o-keyframes invertanimation {
            0% {filter:invert(0)；}
            100% {filter: invert(100%);}
        }
        @keyframes invertanimation {
            0% {filter:invert(0)；}
            100% {filter: invert(100%);}
        }
        .cls_invertanimation{
            animation-name: invertanimation;
            animation-timing-function: linear;
            animation-duration: 180s;
            animation-iteration-count: infinite;
            animation-direction: alternate; 
        }