/* 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:18px 0 0 0;text-align:left;top:0;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 .bar1, .sticky_sp .bar2, .sticky_sp .bar3 {background:#444}

.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(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.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:right;background:#222;}
.sp_tnb:after {display:block;visibility:hidden;clear:both;content:""}
.sp_tnb a.logo {display:block;float:left;}
.sp_tnb a {display:inline-block;color:#fff;font-size:12px;line-height:40px;}

ul.tnb_side {margin:0 40px 0 0;float:right}
ul.tnb_side:after {display:block;visibility:hidden;clear:both;content:""}
ul.tnb_side li {display:block;float:left;}
ul.tnb_side li a {display:block;width:32px;height:40px;overflow:hidden;line-height:999px;}
ul.tnb_side li a.tnb_allim {background:url(../../../img/tnb_allim.png) no-repeat 50% 50%;}
ul.tnb_side li a.tnb_paper {background:url(../../../img/tnb_paper.png) no-repeat 50% 50%;}



.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:#444;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;}
}