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

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

.sticky_sp {top:10px;}
.sticky_sp .bar1, .sticky_sp .bar2, .sticky_sp .bar3 {background:#222;}

.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:99999;
transform: translate(0,0);
transition: .5s;
}
.sp-wrap {transition:.5s transform;}
.menu-on {transform:translate(260px,0);}
.menu-on .bar1 {background:#222;transform-origin:0% 50%;transform:rotate(45deg);}
.menu-on .bar2 {background-color:transparent;}
.menu-on .bar3 {background:#222;transform-origin:0% 50%;transform:rotate(-45deg);}

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

.sp-nav ul.gnb_mobile {margin:0 10px;}
.sp-nav ul.gnb_mobile li {position:relative;border-bottom:1px solid #ddd;cursor:pointer}
.sp-nav ul.gnb_mobile li a {display:block;font-size:14px;line-height:40px;font-weight:700;text-indent:10px;background:#fff;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.sp-nav ul.gnb_mobile li a:hover {color:#222;background:#eee;}
.sp-nav ul.gnb_mobile li ul {max-height:0;overflow:hidden;
transition: 0.2s;
}
.sp-nav ul.gnb_mobile li.on > ul {max-height:1000px;
transition: 1s;
}
.sp-nav ul.gnb_mobile li ul {margin:0;}
.sp-nav ul.gnb_mobile li ul li {border-bottom:none}
.sp-nav ul.gnb_mobile li ul li:last-child {margin:0 0 20px 0;}
.sp-nav ul.gnb_mobile li ul li a {color:#666;font-size:13px;line-height:28px;font-weight:400;text-indent:20px;}



.sp_tnb {padding:0 10px;text-align:center;background:#fff;}
.sp_tnb:after {display:block;visibility:hidden;clear:both;content:""}
.sp_tnb a.logo {display:block;}
.sp_tnb a.logo img {width:100px;height:auto;}



.sp-nav a.logo-side {display:block;margin:0;text-align:center;}
.sp-nav a.logo-side img {}

.cross {display:block;position:absolute;right:10px;top:14px;width:20px;height:20px;margin:-4px 0 0 0;text-align:left;}
.cross .bar_b1, .cross .bar_b2 {display:block;width:15px;height:1px;background:#999;cursor:pointer;transition: all 0.3s ease-in-out;}
.cross .bar_b1 {margin:9px 0 0 0;}
.cross .bar_b2 {margin:-1px 0 0 0;transform-origin:50% 50%;transform:rotate(90deg);} 

.sp-nav ul li.on .bar_b1 {background-color:transparent;}
.sp-nav ul li.on .bar_b2 {background-color:#000;transform-origin:50% 50%;transform:rotate(180deg);} 


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