section.member{padding:58px 0; font-size:14px; background:{$sys_member.back_color};}
section.member>article>.mains{background:#fff; color:#181818; border-radius:8px; border:1px solid #e8e8e8;}
section.member>article>.mains a{color:#181818;}
section.member>article>.mains a:hover{color:{$common.hrcolor};}
section.member>article>.mains:after{display:block; content:''; clear:both;}
section.member>article>.mains>.sidebar{float:left; width:15%; border-right:1px solid #e8e8e8;}
section.member>article>.mains>.sidebar>.menus{display:none;}
section.member>article>.mains>.sidebar>.snavs{display:block;}
section.member>article>.mains>.sidebar dl{display:block; margin:8px 0;} 
section.member>article>.mains>.sidebar dl>dt{display:block; padding:8px 0 8px 28px;}
section.member>article>.mains>.sidebar dl>dt>i{float:left; line-height:26px; width:18px; margin-right:6px; color:{$common.hrcolor};}
section.member>article>.mains>.sidebar dl>dt>h4{float:left; line-height:28px;}
section.member>article>.mains>.sidebar dl>dt:after{display:block; content:''; clear:both;}
section.member>article>.mains>.sidebar dl>dd{display:block;}
section.member>article>.mains>.sidebar dl>dd>ul{display:block;}
section.member>article>.mains>.sidebar dl>dd>ul>li{padding:8px 0 8px 52px;}
section.member>article>.mains>.sidebar dl>dd>ul>li.on{background:#fafafa;}
section.member>article>.mains>.sidebar dl>dd>ul>li.on a{color:{$common.hrcolor};} 
section.member>article>.mains>.container{float:left; width:85%; padding:8px; border-left:1px solid #e8e8e8;  margin-left:-1px;}
section.member>article .mypages{margin-bottom:28px;}
section.member>article .mypages dir>ol>li>a.on,
section.member>article .mypages dir>ol>li>a:hover{color:#fff;}
section.member>article .tabcheck{display:block; margin-top:8px;}
section.member>article .tabcheck>ul{border-bottom:1px solid #e8e8e8;}
section.member>article .tabcheck>ul:after{display:block; content:''; clear:both;}
section.member>article .tabcheck>ul>li{float:left; margin-left:16px; position:relative;}
section.member>article .tabcheck>ul>li>a{display:block; line-height:28px; padding:8px; font-size:15px;}
section.member>article .tabcheck>ul>li.on>a{color:{$common.hrcolor};}
section.member>article .tabcheck>ul>li.on:after{position:absolute; left:0; bottom:-1px; right:0; height:2px; content:''; border-radius:2px; background:{$common.hrcolor};}
section.member>article .tables th,
section.member>article .tables td{border-width:1px 0; font-weight:normal; padding:8px 0 8px 16px;}
section.member>article .buttons{margin-top:18px;}
section.member>article .buttons a{color:#fff; line-height:24px; padding:0 8px; display:inline-block; border-radius:3px; box-shadow:0 2px 6px rgba(0,0,0,0.08); transition:0.28s; border:1px solid #22bf68; background:#22bf68;}
section.member>article .buttons a.to{background:#fff; color:#22bf68;}
section.member>article .buttons a.to:hover{background:#22bf68;}
section.member>article .buttons a.red{background:#e00; border-color:#e00;}
section.member>article .buttons a+a{margin-left:8px;}
section.member>article .buttons a:hover{opacity:0.68; color:#fff;}
section.member>article button{cursor:pointer; line-height:34px; padding:0 16px; font-size:15px; border-radius:3px; transition:0.28s; box-shadow:0 2px 6px rgba(0,0,0,0.08); background:#fff; color:{$common.hrcolor}; border:1px solid {$common.hrcolor};}
section.member>article button:hover{color:#fff; background:{$common.hrcolor};}
@media(max-width:1199px){
section.member{padding:38px 0;}
}
@media(max-width:992px){
section.member>article>.mains>.sidebar{float:none; width:auto; border-right:none; position:relative; z-index:1;}
section.member>article>.mains>.sidebar>.menus{display:block; line-height:48px; height:48px; border-bottom:1px solid #e8e8e8;}
section.member>article>.mains>.sidebar>.menus>h3{float:left; padding:0 18px; color:#383838; line-height:48px;}
section.member>article>.mains>.sidebar>.menus>a{font-size:20px; width:48px; text-align:center; float:right; line-height:48px;}
section.member>article>.mains>.sidebar>.snavs{position:absolute; top:100%; left:0; right:0; background:#fff; box-shadow:0 4px 8px rgba(0,0,0,.18); border-radius:0 0 5px 5px; display:none;}
section.member>article>.mains>.sidebar.on>.menus{color:{$common.hrcolor};}
section.member>article>.mains>.sidebar.on>.snavs{display:block;}
section.member>article>.mains>.container{float:none; width:auto;}
}
@media(max-width:767px){
section.member{padding:18px 0;}
section.member>article>.mains>.sidebar dl>dd>ul>li{padding:4px 0 4px 52px;}
section.member>article .tabcheck>ul>li{margin-left:8px;}
section.member>article .tabcheck>ul>li>a{line-height:26px; padding:6px;}
section.member>article .mypages{margin-bottom:8px;}
section.member>article .tables table,
section.member>article .tables tbody,
section.member>article .tables tr,
section.member>article .tables td{display:block; width:100%; border:none;}
section.member>article .tables tr{border:1px solid #e8e8e8; border-radius:3px; margin:8px 0;}
section.member>article .tables td{padding:8px; border-bottom:1px solid #e8e8e8; position:relative; overflow:hidden;}
section.member>article .tables td[t]:before{width:46px; position:absolute; top:0; left:0; bottom:0; content:attr(t); padding:8px; background:#fbfbfb;}
section.member>article .tables td[t]{padding-left:56px;}
section.member>article .tables td[t][s3]:before{width:58px;}
section.member>article .tables td[t][s3]{padding-left:68px;}
section.member>article .tables td[t][s4]:before{width:72px;}
section.member>article .tables td[t][s4]{padding-left:82px;}
section.member>article .tables td:last-child{border-bottom:none;}
section.member>article .tables tr:first-child,
section.member>article .tables th{display:none;}
}