#pnlMenu
{
   margin-top:28px;
   margin-bottom:60px;
}
#pnlUser
{
   margin-top:28px;
   margin-bottom:60px;
}
#pnlList
{
   margin-top:28px;
   margin-bottom:60px;
}

#view0-head
{
    padding: 0px 10px 0px 0px;
    margin-bottom:10px;
}
#view1-head
{
    padding: 0px 10px 0px 0px;
    margin-bottom:10px;
}
.view0-head
{
   height: 35px;
   background-color: #3070f0;
   font-size:12pt;
   color: white;
   width: 100%;
   padding: 5px 5px 5px 5px;
   display: inline-block;
   text-align: center;
   margin-bottom:10px;
}
.view1-head
{
   position: relative;
   height: 35px;
   background-color: #3aabd2;
   font-size:12pt;
   color: white;
   width: 100%;
   padding: 5px 5px 5px 5px;
   display: inline-block;
   text-align: center;
   margin-bottom:10px;
}

.view1-head .back
{
    width:10px;
    position: absolute;
    left:3px;
    top:3px;
}
.view1-head .back .backbtn
{
    width: 30px;
    height: 30px;
    background: url("../image/back_btn.png") no-repeat;
    display: block;
}
.view1-head .back .backbtn:hover
{
    background: url("../image/back_btnb.png") no-repeat;
}
.view1-head .acount
{
    width:110px;
    position: absolute;
    right:24px;
    top:5px;
    font-size:9pt;
    vertical-align:middle;
}
.view1-head span
{
    padding-left:2px;
}
.view1-head image
{
    vertical-align:middle;
}

.view1-head .title
{
    display:inline-block;
    width:80%;
    text-align:center;
}

#mem-login
{
    margin: 0 auto;
    width: 500px;
    height: 340px;
    text-align: center;
    border: 1px solid #c0c0c0;
}
#pnlLogin
{
    border:0px solid gray;
    margin-top:28px;
    margin-bottom:60px;
}

#pnlPassword,#pnlPassword2,#pnlPassword3,#pnlPassword4,#pnlPassword5
{
    border:0px solid gray;
    margin-top:60px;
    margin-bottom:60px;
}
#pnlListUp
{
    border:0px solid gray;
    margin-top:60px;
    margin-bottom:60px;
}




#member-area
{
    width:100%;
    padding: 10px;
    margin: auto;
    border: solid 0px red;
}

#mypage-list
{
    width: 100%;
    border-collapse: collapse;
    border: 0px solid blue;
    display:inline-block;
}
#mypage-list td
{
    border: 0px solid pink;
}

#mypage-list .account
{
    padding: 5px 5px 5px 10px;
    color: black;
    border: 0px solid pink;
    text-align: right;
}
.member-data
{
    display: inline-block;
    padding: 8px 8px 8px 8px;
    width:100%;
    border:0px solid red;
    
}
.member-label
{
    display: inline-block;
    border:1px solid gray;
    padding: 8px 8px 8px 13px;
    text-align:left;
    width:100%;
}
.member-list
{
    display: inline-block;
    border:1px solid gray;
    padding: 8px 8px 8px 13px;
    text-align:left;
    width:100%;
}
.member-count
{
    display: inline-block;
    border:1px solid gray;
    padding: 8px 8px 8px 13px;
    text-align:left;
    width:100%;
}

.member-item
{
    border:0px solid red;
    padding: 8px 8px 8px 13px;
    text-align:center;
    width:100%;
}
.member-table
{
    display: inline-block;
    border:0px solid gray;
    padding: 8px 8px 8px 13px;
    text-align:left;
    width:320px;
}

.member-table th
{
    font-size:10pt;
}

.member-table td
{
    padding: 4px 4px 4px 4px;
}


#SearchList td
{
    padding-bottom:20px;
}

#flexi_title
{
	white-space: nowrap;
	overflow: hidden;
}
#flexi_subtitle
{
	white-space: nowrap;
	overflow: hidden;
}
#flexi_author
{
	white-space: nowrap;
	overflow: hidden;
	width:500px;
}
#flexi_publish
{
	white-space: nowrap;
	overflow: hidden;
	width:500px;
}
#flexi_isbn
{
	white-space: nowrap;
	overflow: hidden;
	width:120px;
}
#flexi_callno
{
	white-space: nowrap;
	overflow: hidden;
	width:100px;
}

#flexi_status
{
	white-space: nowrap;
	overflow: hidden;
	width:150px;
}

#flexi_name
{
	white-space: nowrap;
	overflow: hidden;
	width:270px;
}

#flexi_namek
{
	white-space: nowrap;
	overflow: hidden;
	width:170px;
}

#flexi_telno
{
	white-space: nowrap;
	overflow: hidden;
	width:100px;
}

.flexi_data
{
	white-space: nowrap;
	overflow: hidden;
	width:80px;
}

.flexi_div
{
	white-space: nowrap;
	overflow: hidden;
	display:inline-block;
	padding-right:10px;
}
.flexi_date
{
	white-space: nowrap;
	overflow: hidden;
	display:inline-block;
	padding-right:10px;
}
.flexi_button
{
	white-space: nowrap;
	overflow: hidden;
}
.flexi_cnt
{
	white-space: nowrap;
	overflow: hidden;
	width:40px;
}

.mypage-box
{
    display:inline-block;
    margin: 10px;
    border: 2px solid #fa8072;
    padding:18px 5px 5px 5px;
    width:240px;
    height:80px;
    font-size:16pt;
    color:salmon;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;    
    
    border-radius:5px;
    text-align:center;
    vertical-align:middle;
}
.mypage-box:hover
{
    background-color:salmon;
    cursor:pointer;
}
.mypage-box2
{
    display:inline-block;
    margin: 10px;
    border: 2px solid #fa8072;
    padding:18px 5px 5px 5px;
    width:240px;
    height:80px;
    font-size:16pt;
    color:salmon;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;    
    
    border-radius:5px;
    text-align:center;
    vertical-align:middle;

}
.mypage-box2:hover
{
    background-color:salmon;
    cursor:pointer;
}

.mypage-box3 ul li
{
    display:inline-block;
    margin: 10px;
    border: 1px solid #c0c0c0;
    padding:2px 5px 5px 5px;
    width:180px;
    height:120px;
  	background: #fafafa url(../image/member_icon3.png) no-repeat bottom;

    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;    

}
.mypage-box3 ul li:hover
{
    background-color:#d7ebff;
    cursor:pointer;
}

.mypage-box4
{
    margin: auto;
    border: 2px solid #3aabd2;
    background-color:#3aabd2;
    padding:5px 5px 5px 5px;
    width:340px;
    height:40px;
    font-size:12pt;
    color:salmon;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;    
    
    border-radius:5px;
    text-align:center;
    vertical-align:middle;

}

.mypage-box a:link
{
    width:100%;
	height:100%;
	cursor:pointer;
	display:block;
    color:salmon!important;
}
.mypage-box a:visited
{
    width:100%;
	height:100%;
	cursor:pointer;
	display:block;
    color:salmon!important;
}
.mypage-box a:hover
{
    width:100%;
	height:100%;
	cursor:pointer;
	display:block;
    color:white!important;
}

.mypage-box2 a:link
{
    width:100%;
	height:100%;
	cursor:pointer;
	display:block;
    color:salmon!important;
}
.mypage-box2 a:visited
{
    width:100%;
	height:100%;
	cursor:pointer;
	display:block;
    color:salmon!important;
}
.mypage-box2 a:hover
{
    width:100%;
	height:100%;
	cursor:pointer;
	display:block;
    color:white!important;
}


.mypage-box4 a:link
{
    width:100%;
	height:100%;
	cursor:pointer;
	display:block;
    color:white!important;
}
.mypage-box4 a:visited
{
    width:100%;
	height:100%;
	cursor:pointer;
	display:block;
    color:salmon!important;
}
.mypage-box4 a:hover
{
    width:100%;
	height:100%;
	cursor:pointer;
	display:block;
    color:black!important;
}

.mypage-box2 a
{
    width:100%;
	height:100%;
	cursor:pointer;
	display:block;
    color:salmon;
}
.mypage-box3 a
{
    width:100%;
	height:100%;
	cursor:pointer;
	display:block;
}

.mypage-box5
{
    display:inline-block;
    border: 2px solid #3aabd2;
    background-color:#3aabd2;
    padding:1px 5px 1px 5px;
    width:80px;
    height:30px;
    font-size:12pt;
    color:salmon;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;    
    
    border-radius:5px;
    text-align:center;
    vertical-align:middle;

}
.mypage-box5 a:link
{
    width:100%;
	height:100%;
	cursor:pointer;
	display:block;
    color:white!important;
}
.mypage-box5 a:visited
{
    width:100%;
	height:100%;
	cursor:pointer;
	display:block;
    color:salmon!important;
}
.mypage-box5 a:hover
{
    width:100%;
	height:100%;
	cursor:pointer;
	display:block;
    color:black!important;
}

.mylist-box1
{
    width:200px;
    border:1px solid #c0c0c0;
    font-size:10pt;
}
.mylist-box2
{
    width:220px;
    border:1px solid #c0c0c0;
}
.mylist-box3
{
    width:100px;
    border:1px solid #c0c0c0;
}

.inline
{
    display:inline-block;
}


/* for Tablet */
@media screen and (max-width: 768px)
{
    #pnlMenu
    {
        margin-top:0px;
    }
    .member-table
    {
        display: inline-block;
        border:1px solid gray;
        padding: 8px 8px 8px 13px;
        text-align:left;
        width:320px;
    }
    #pnlLogin
    {
        margin-top:0px;
    }
}

@media screen and (max-width: 479px)
{
    #pnlMenu
    {
        margin-top:0px;
    }
    #mem-login
    {
        margin: 0 auto;
        width: 400px;
        height: 340px;
        text-align: center;
        border: 1px solid #c0c0c0;
    }
    
    .member-list
    {
        display: inline-block;
        border:1px solid gray;
        padding: 8px 8px 8px 13px;
        text-align:left;
        width:100%;
    }
    
    .member-table
    {
        display: inline-block;
        border:1px solid gray;
        padding: 8px 8px 8px 13px;
        text-align:left;
        width:320px;
    }
    .mypage-box
    {
        width:340px;
        height:60px;
        padding:8px 5px 5px 5px;
    }
    .mypage-box2
    {
        width:340px;
        height:60px;
        padding:8px 5px 5px 5px;
    }
    .mypage-box3 ul li
    {
        width:180px;
        height:120px;
        border:1px solid #c0c0c0;
        padding:2px 5px 5px 5px;
        margin:10px;

        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all  0.3s ease;    

    }
    .mylist-box1
    {
        width:200px;
        border:1px solid #c0c0c0;
        font-size:10pt;
    }
    .mylist-box2
    {
        width:200px;
        border:1px solid #c0c0c0;
    }
    .mylist-box3
    {
        width:100px;
        border:1px solid #c0c0c0;
    }
    
    #flexi_title
    {
	    white-space:normal;
	    width:310px;
    }
    #flexi_subtitle
    {
	    white-space: normal;
	    width:310px;
    }
    #flexi_author
    {
	    white-space: normal;
	    width:310px;
    }
    #flexi_publish
    {
	    white-space: normal;
	    width:310px;
    }
    #mypage-list .account
    {
        text-align: center;
    }
    
    .view1-head .acount
    {
        width:110px;
        position: absolute;
        right:8px;
        top:5px;
        font-size:9pt;
        vertical-align:middle;
    }
    #pnlLogin
    {
        margin-top:0px;
    }

}