@import "common.css";

/*text-aline*/
.L {text-align:left}
.C {text-align:center;}
.R {text-align:right;}
/*text-aline //*/

/*margin*/
.MT30 {margin-top:30px;}
.MT20 {margin-top:20px;}
.MB20 {margin-bottom:20px;}
/*margin //*/

body {background-color: #f5f7fc; min-width:360px;}

/* header */
#header{height:60px; line-height:60px; background:#fff;}
#header .wrap{max-width:1141px; margin:0 auto;}
#header .wrap h1{display:inline-block; float:left;}
#header .wrap .txtArea{float:right;}
#header .wrap .txtArea p{float:left; font-size:13px; font-family:NS; color:#555; margin-right:10px; box-sizing:border-box;}
#header .wrap .txtArea p.logout{display:inline-block;}
#header .wrap .txtArea p.logout span{ background:#1aa7df; font-size:13px; font-family:NSB; color:#fff; padding:6px 20px; box-sizing:border-box;}
#header .wrap .txtArea p.last{padding-right:0;}
#header .wrap .txtArea p span{font-size:13px; font-family:NSB; color:#000;}

/* footer */
#footer{display:inline-block; width:100%; background:#444546; margin-top:90px;}
#footer .wrap{max-width:1141px; margin:0 auto;}
#footer ul{padding:20px 0; box-sizing:border-box;}
#footer ul li{line-height:1.6; box-sizing:border-box; color:#fff; font-size:13px; font-family:NSL;}


/* login */
.loginWrap {
    padding:45px 60px; background:white; width:540px; margin:0 auto;
    box-sizing:border-box; margin-top:50px;
}

.loginCont h1 {
    font-weight:bold; font-size:35px; color:#2284c6;
}
.loginCont p {font-weight:300; font-size:23px; color:#1f1f1f;}
.loginCont input {
    width:100%; height:53px;
    box-sizing:border-box; border:1px solid #bababa;
    margin-bottom:6px; padding:0 20px;
}
.loginCont input[type="text"] {margin-top:28px;}
.loginCont label + a {
    background:#f58432; display:inline-block;
    width:100%; height:53px;
}
.loginCont label + a span {
    color:white; text-align:center; width:100%;
    display:inline-block; line-height:53px; font-weight:bold;
    font-size:22px;
}
.loginCont ul {margin-top:20px; text-align:center;}
.loginCont ul li {display:inline-block; margin:0 12px;}
.loginCont ul li::before {content:""}

.tabWrap {margin-top:20px;}
.tabBtnArea {
    font-size:0; border-bottom:1px solid #1aa7df;
    box-sizing: border-box;
}
.tabBtnArea li {
    display: inline-block; cursor: pointer; vertical-align: middle;
    background:green; width:33.3%; text-align:center; height:53px;
    line-height:53px;
}
.tabBtnArea li span { font-size:19px; color:white;}
.tabBtnArea .tabBtn:nth-child(odd) {background:#55c7ad;}
.tabBtnArea .tabBtn:nth-child(even) {background:#d5859e;}
.tabBtnArea .tabBtn.on {background:#1aa7df;}

.tabContArea .tabCont {display: none;}
.tabContArea .tabCont.on {display: block;}
.tabCont li {margin-top:18px;}
.tabCont li a {
    display: inline-block; text-overflow: ellipsis; white-space: nowrap; 
    overflow: hidden; max-width: 80%; vertical-align:middle;
    font-size:14px; font-weight:400;
}
.tabCont li a:hover {font-weight:bold;}
.tabCont li .date {font-size:14px; float:right; font-weight:400;}
/* login// */


@media all and (max-width: 900px) {
    header, footer {padding-left:0; padding-right:0;}
    header div, footer ul {width:540px; margin:0 auto;}
	#header{padding:0 20px; box-sizing:border-box;}
	#conetent{padding:0 20px; box-sizing:border-box;}
	#footer{padding:0 20px; box-sizing:border-box;}
}
@media all and (max-width: 540px) {
    header div, footer ul {
        width:100%; padding:0 20px; box-sizing:border-box;
    }
    header {text-align:center;}
    header ul {margin-top:15px;}
    .loginWrap {width:100%;}
    .tabCont li a {max-width: 65%;}
	#header{height:90px; line-height:90px; background:#fff;}
	#header .wrap .txtArea{float: right; text-align: right; padding-top: 25px;}
	#header .wrap .txtArea p{float:none; height:20px; line-height:20px; font-size:12px; font-family:NS; color:#555; padding-right:0;}
	#header .wrap .txtArea p span{font-size:12px; font-family:NSB; color:#000;}
	#header .wrap .txtArea p.last{padding-right:0;}

}