/* common */
.sp-block{display:none;}
.sp-inline{display:none;}
.pc-block{display:block;}
.pc-inline{display:inline;}

.spmenu {display:none;position:fixed;width:34px;text-align:left;top:16px;left:2%;z-index:999999;cursor:pointer;
  transition: .5s;
}
.spmenu .bar1, .spmenu .bar2, .spmenu .bar3 {display:block;width:34px;height:2px;background:#fff;cursor:pointer;transition: all 0.3s ease-in-out;}
.bar1 {margin:0 0 10px 0;}
.bar2 {margin:0 0 10px 0;}
.bar3 {margin:0;}

.sp-nav {display:block;position:fixed;top:0;left:-300px;width:300px;height:100%;overflow-y:auto;padding:0;border-right:solid 1px #ccc;background:#fff;z-index:999999;
transform: translate(0,0);
transition: .5s;
}
.sp-wrap {transition:.5s transform;}
.menu-on {transform:translate(300px,0);}
.menu-on .bar1 {transform-origin:0% 50%;transform:rotate(45deg);}
.menu-on .bar2 {background-color:transparent;}
.menu-on .bar3 {transform-origin:0% 50%;transform:rotate(-45deg);}

.menu-on-default {transform: translate(300px,0);}

.sp-nav ul li {position:relative;line-height:50px;text-indent:20px;border-bottom:1px solid #ddd;cursor:pointer}
.sp-nav ul li a {font-size:14px;font-weight:700}
.sp-nav ul li ul {max-height:0;overflow:hidden;padding:0 20px;
transition: 0.2s;
}
.sp-nav ul li.on > ul {max-height: 1000px;background:#f6f6f6;
transition: 1s;
}
.sp-nav ul li ul li {line-height:40px;border-bottom:none}
.sp-nav ul li ul li a {color:#888;font-size:14px;}
.sp-nav ul li .sub_on {display:block;position:absolute;width:13px;height:9px;right:20px;top:20px;overflow:hidden;line-height:99px;background:url(../img/arrow_down.gif) no-repeat 50% 50%}

.sp-nav a.logo-side {display:block;margin:0;text-align:center;background:url(../img/sub_bg.jpg) no-repeat 0 0 #222;background-size:cover}

.myinfo_side {padding:30px 10px;border-bottom:solid 1px #ddd;}
.myinfo_side .profile_img {display:block;width:80px;height:80px;margin:0 auto 20px auto;overflow:hidden;border-radius:50%;}
.myinfo_side .myinfo_con_side {margin:0;}
.myinfo_side .myinfo_con_side dl {margin:0 0 6px 0;}
.myinfo_side .myinfo_con_side dl dt {display:block;margin:0 0 14px 0;padding:0 0 14px 0;font-size:18px;border-bottom:solid 1px #ccc;}
.myinfo_side .myinfo_con_side dl dt strong {color:#ff7700;font-weight:normal}
.myinfo_side .myinfo_con_side dl dt a {margin:0 0 0 8px;color:#999;font-size:14px;text-decoration:underline;}
.myinfo_side .myinfo_con_side dl dd {display:block;height:30px;line-height:30px;}
.myinfo_side .myinfo_con_side dl dd label {display:inline-block;width:120px;padding:0 0 0 14px;color:#444;background:url(../img/bullet.png) no-repeat 0 50%;}
.myinfo_side a.btn_myinfo_side {display:inline-block;height:40px;padding:0 24px;;color:#666;font-size:14px;line-height:40px;background:#fff;border:solid 1px #ddd;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.myinfo_side a.btn_myinfo_side:hover {color:#fff;background:#444;}




@media screen and (max-width: 1024px){
.sp-block{display:block;}
.sp-inline{display:inline;}
.pc-block{display:none;}
.pc-inline{display:none;}
}