/*
Template:bootstrap-basic4
Theme Name:bootstrap-basic4
*/
@charset "utf-8";
img{max-width: 100%;}



/*---PC middle---*/
@media only screen and (max-width: 1520px) {


}

@media only screen and (max-width: 1360px) {

}

/*---PC small---*/
@media only screen and (max-width: 1280px) {


}

/*---PAD pro---*/
@media only screen and (max-width: 1024px) {


}

/*---PAD---*/
@media only screen and (max-width: 880px) {


}

/*---Sm---*/
@media only screen and (max-width: 767px) {

    /*nav*/
    .ul-hnav{display: block; border-top: 1px solid #fff;}
    .ul-hnav > li > a.nav-link{color: #fff; padding: 15px; border-bottom: 1px solid #fff; position: relative;}
    .ul-hnav > li > a::before{content: "\f054"; color: #fff; position: absolute; right: 15px; top: 20px;}

    /*offcanvas*/
    .m-toggle{border: none; display: block; position: static; background: none; z-index: 9999; outline: none !important;}
    .offcanvas-toggle .icon-bar{background: #1e67c2;}
    .icon-bar{display:block;width:25px;height:4px;border-radius:1px; margin: auto;}
    .icon-bar + .icon-bar{margin-top:3px}
    .offcanvas-toggle.is-open .icon-bar{background: #fff;}
    .offcanvas-toggle.is-open .icon-bar:nth-child(3){margin-top: 14px;}
    .offcanvas-toggle.is-open .icon-bar:nth-child(4){transform: rotate(-135deg) translate(8px, 8px); margin-top: 2px;}
    .off-base.navbar-offcanvas{top: 0; overflow: auto; z-index: 999; padding: 60px 0 0;}

    /*offcanvas-size*/
    .navbar-offcanvas{max-width: 300px; position: fixed; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85);}
    .navbar-offcanvas.navbar-offcanvas-right {right: -300px;}
    .navbar-offcanvas.navbar-offcanvas-right.offcanvas-transform.in {-webkit-transform: translateX(-300px); transform: translateX(-300px);}   
    
    

}