@import "share.css";
    #main{
        display: flex;  flex-flow: column nowrap;  justify-content: space-between; align-items: stretch; align-content: stretch;
    }
    header{display: block; align-items: center; align-content: stretch;}
        nav{flex: 2;}
        #showContents{flex: 8;}
        #showContents p{margin: 1em 0; overflow: auto;}
        #searchGroup{width:100%; height:auto; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: stretch; align-content: stretch;}
        td span:hover{cursor: pointer; border-bottom: 1px dotted orchid;}
    
    footer{display: block; align-items: center; align-content: center; background-color: #3498db;}
        address{text-align:center;}
        address > p{color:#fff;}
   .left{float: left; margin: 1em; clear:both;}  .center{text-align: center; margin: 1em;} .right{float: right; margin: 1em; clear:both;}
@media screen and (min-width:1150px){
        /* large display 1200px 이상 */
        #main{ width: 1200px; min-height: 100vh; margin:0 auto; }
            header{width: 100%; height: 150px; flex: 0 0 auto; display: flex;}
            header h1{width: 100%; height: 100%; text-align: center;}
                #titleName{line-height: 150px; font-size: 4em; font-weight: bolder; color: rgb(171, 178, 185); text-shadow:3px 4px 3px rgb(50,50,50);}
            #contents{display: flex; flex: 1 1 auto; flex-flow: row nowrap;}
                nav{flex: 1.5;}
                #showContents{flex: 8.5;}
                
            footer{width: 100%; height: 96px; flex: 0 0 auto;}
}
@media screen and (min-width:768px) and (max-width:1149px){
        /* tablet(portrait), 768px ~ 979px 까지 */
        #main{ width: 100%; height: 100%;}
        #contents{display: flex; flex: 1 1 auto; flex-flow: row nowrap;}
}
@media screen and (min-width:481px) and (max-width:767px){
        /* phone ~ tablet 767px 까지 */
        #main{ width: 100%; height: 100%;}
        #contents{flex-flow: column nowrap;}
        nav{flex: 1;}
        #showContents{flex: 19;}
        nav ul{display: flex; flex-flow: row nowrap; justify-content: space-around; align-items: center; align-content: center;}
        nav ul li{flex: 1 1 0; width: 100px; text-align: center;}
}
@media screen and (max-width:480px){
        /* phone 480px 까지 */
        #main{ width: 100%; height: 100%;}
}