/* common */
.sp-block,
.sp-inline {
    display:none;
}
.pc-block{
    display:block;
}
.pc-inline{
    display:inline;
}
.spmenu {
    display:none;
    position:absolute;
    right:10px;
    top:10px;
    width:30px;
    height:40px;
    padding:12px 0 0 5px;
    cursor:pointer;
    z-index:9999;
    transition: .5s;
}
.spmenu .bar1,
.spmenu .bar2,
.spmenu .bar3 {
    display:block;
    width:20px;
    height:2px;
    background:#444;
    cursor:pointer;
    transition: all 0.3s ease-in-out;
}
.bar1,
.bar2 {
    margin:0 0 5px 0;
}
.bar3 {
    margin:0;
}

.spmenu-close {
    display:block;
    position:absolute;
    right:10px;
    top:50%;
    width:40px;
    height:40px;
    color:#ccc;
    font-size:30px;
    text-align:center;
    line-height:40px;
    cursor:pointer;
    -webkit-transform: translateY( -50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.sp-nav {
    display:block;
    position:fixed;
    top:0;
    right:-300px;
    width:300px;
    height:100%;
    overflow-y:auto;
    background:#fff;
    z-index:999;
    transform: translate(0,0);
    transition: .5s;
}
.sp-wrap {
    transition:.5s transform;
}
.menu-on {
    padding:14px 0 0 8px;
    transform:translate(0,0);
}
.menu-on .bar1 {
    transform-origin:0% 50%;
    transform:rotate(45deg);
    background:#ff7700;
}
.menu-on .bar2 {
    background-color:transparent;
}
.menu-on .bar3 {
    transform-origin:0% 50%;
    transform:rotate(-45deg);
    background:#ff7700;
}
.menu-on-default {
    transform: translate(-300px,0);
}
.sp-overlay {
    display:none;
    position:fixed;
    left:0;
    right:0;
    top:0;
    width:100%;
    height:100vh;
    background:rgba(0,0,0,0.6);
    z-index:999;
}
.sp-nav ul.gnb_mobile {
    padding:0;
    margin:0;
}
.sp-nav ul.gnb_mobile > li {
    list-style: none;
    position:relative;
    border-bottom:1px solid #eee;
    cursor:pointer;
    padding:0 10px;
}
.sp-nav ul.gnb_mobile > li > a {
    display:block;
    color:#444;
    font-size:15px;
    line-height:50px;
    font-weight:400;
    text-indent:10px;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.sp-nav ul.gnb_mobile li a:hover {
    color:#117cce;
    background:#f6f6f6;
}
.sp-nav ul.gnb_mobile li ul {
    display:none;
    overflow:hidden;
}
.sp-nav ul.gnb_mobile li.on > ul {
    padding:0;
    margin:0;
    max-height:1000px;
}
.sp-nav ul.gnb_mobile li ul {
    margin:0;
}
.sp-nav ul.gnb_mobile li ul li {
    border-bottom:none;
    list-style: none;
}
.sp-nav ul.gnb_mobile li ul li:last-child {
    margin:0 0 10px 0;
}
.sp-nav ul.gnb_mobile > li > ul > li > a {
    display: block;
    color:#666;
    font-size:14px;
    line-height:unset;
    font-weight:300;
    text-indent:0px;
    padding:7px 0 7px 20px;
}
.sp-nav ul.gnb_mobile li ul li .sub_depth {
    padding:10px;
}
.sp-nav ul.gnb_mobile li ul li .sub_depth a {
    display:block;
    color:#999;
    font-size:13px;
    line-height:25px;
    padding-left:15px;
}
.cross {
    display:block;
    position:absolute;
    right:10px;
    top:0px;
    width:50px;
    height:50px;
    padding:15px 0 0 30px;
    text-align:left;
}
.cross .bar_b1, .cross .bar_b2 {
    display:block;
    width:15px;
    height:1px;
    background:#444;
    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:#ff7700;
    transform-origin:50% 50%;
    transform:rotate(180deg);
}
.sp-header {
    position:relative;
    padding:20px;
}
.sp-nav ul.sp-member {
    padding:0;
    margin:0;
    border-top:solid 1px #ddd;
}
.sp-nav ul.sp-member:after {
    display:block;
    visibility:hidden;
    clear:both;
    content:""
}
.sp-nav ul.sp-member li {
    display:block;
    float:left;
    width:50%;
    border-right:solid 1px #ddd;
    border-bottom:solid 1px #ddd;
}
.sp-nav ul.sp-member li:nth-child(2n) {
    border-right:none;
}
.sp-nav ul.sp-member li a {
    display:block;
    font-size:12px;
    text-align:center;
    line-height:38px;
    background:#f6f6f6;
}
.sp-nav ul.sp-member li a i {
    font-size:18px;
}

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