/*
======================================
    Ads
======================================
*/
.ads-sec-certificate .ads-content  img{
    width: calc((100%/3) - 2rem);
    width: -webkit-calc((100%/3) - 2rem);
    float: left;
    margin: 1rem;
}



.ads-sec-contact .ads-branch>div:last-child p {
    width: calc((100%/2) - 4rem);
    margin: 0.5rem 2rem;
}



/*
===============================
    GLOBAL LAYOUT
===============================
*/

/*
--------------------------------
    Header
--------------------------------
*/
#wrap>header {padding: 0 4rem}


#wrap>header .mb-menu-open,
#wrap>header .mb-menu-close {display: block}

#wrap>header .mb-menu-close {
    width: 5rem;
    height: 5rem;
    margin-top: 2rem;
    border-radius: 3rem;
    background: none;
    border: none;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transition: .5s ease-out;
}

#wrap>header .mb-menu-close:hover {
    background: #90e067;
}

#wrap>header .mb-menu-close:before,
#wrap>header .mb-menu-close:after {
    background: #989997;
    transition: inherit;
}
#wrap>header .mb-menu-close:hover:before,
#wrap>header .mb-menu-close:hover:after {
    background: #fff;
}




#wrap>header .mb-frame {
    width: 28rem;
    height: 100vh;
    background: #4c4d4c;
    padding: 0 3rem;
    box-sizing: border-box;
    box-shadow: 0 -2rem 2rem rgba(0,0,0,.4);
    position: absolute;
    top: 0;
    right: -100%;
    margin-right: 0;
    overflow-y: auto;
    z-index: 11;
    transform: none;
    -webkit-transform: none;
    transition: .3s ease-out;
}

#wrap>header .mb-frame[state=open] {
    right: 0;
}

#wrap>header .mb-frame ul {
    width: 100%;
}

#wrap>header .mb-frame li {
    margin: .5rem 0;
}

#wrap>header .mb-frame li>a {
    height: auto !important;
    line-height: 1.5 !important;
    padding: 1.5rem 3rem !important;
    box-sizing: border-box;
    font-family: lato-r !important;
    border-radius: 2rem !important;
}

#wrap>header .mb-frame li:hover>a {
    background: #989997 !important;
}

#wrap>header .mb-frame li.active>a {
    background: #90e067 !important;
    color: #f1f2f0;
    font-family: lato-b !important;
}

#wrap>header .mb-frame li>* {
    float: left;
    clear: both;
    width: 100%;
}

#wrap>header .mb-frame>ul {
    margin: 1rem 0 3rem 0;
}

#wrap>header .mb-frame>ul>li {
    width: 100%;
    height: auto;
    display: block;
    position: static;
}

#wrap>header .mb-frame>ul>li>a {
    width: 100%;
    box-sizing: border-box;
    position: static;
    transform: none;
    -webkit-transform: none;
}


#wrap>header .mb-frame>ul>li:hover ul {
    transform: none;
    -webkit-transform: none;
}

#wrap>header .mb-frame>ul>li[state=show] ul {height: auto}


#wrap>header .mb-frame ul ul {
    width: 100%;
    height: 0;
    overflow: hidden;
    padding: 0;
    margin-top: .5rem;
    background: none;
    position: static;
    box-shadow: none;
    transform: none;
    -webkit-transform: none;
}

#wrap>header .mb-frame ul ul:before {display: none}

#wrap>header .mb-frame ul ul a {
    color: #989997;
}

#wrap>header .mb-frame ul ul a:hover {
    background: #90e067;
    border-radius: 2rem;
}



/*
--------------------------------
    Main
--------------------------------
*/
main {
    padding: 8rem 4rem;
}


/*
--------------------------------
    Footer
--------------------------------
*/
footer section:nth-child(1),
footer section:nth-child(2) {
    width: 45%;
    float: left;
    clear: none !important;
    margin: 0 0 5rem 0;
}

footer section:nth-child(2) {
    float: right;
}

footer section:nth-child(3) {
    float: left;
    clear: both;
    width: 100%;
    margin: 0;
}



/*
--------------------------------
    Class
--------------------------------
*/
.s-product a {
    width: calc((100% - 6rem) / 3);
    width: -webkit-calc((100% - 6rem) / 3);
    margin-left: 3rem;
}

.s-product a:nth-child(n+4) {margin-top: 6rem}

.s-product a:nth-child(4n+1) {
    clear: none;
    margin-left: 3rem;
}

.s-product a:nth-child(3n+1) {
    clear: both;
    margin-left: 0;
}



/*
===============================
OBJECT
===============================
*/
/*
--------------------------------
    Home
--------------------------------
*/
#home>section {
    padding: 10rem 4rem;
}

#home .banner a[data-id=banner-1] div {
    padding: 2rem 4rem;
}

#home .banner a[data-id=banner-1] div:before {
    width: calc(100% + 1rem);
    height: calc(100% + 1rem);
    top: -.5rem;
    left: -.5rem;
}

#home .banner a[data-id=banner-1] div>* {
    font-size: 1.2rem;
}

#home .banner a[data-id=banner-1] div span:nth-child(2) {
    font-size: 3rem;
}


/* ------------------ */


#home .product .nav label {
    margin: 0 4rem;
    font-size: 2rem;
}


/* ------------------ */


#home .news .s-frame a {
    width: calc((100% - 6rem) / 3);
    width: -webkit-calc((100% - 6rem) / 3);
}

#home .news .s-frame a:nth-child(n+2) {margin-left: 2.999rem}

#home .news .s-frame a>span:last-child {font-size: 1.25rem}



/*
--------------------------------
    Detail
--------------------------------
*/
#detail {padding: 12rem 4rem}



/*
--------------------------------
    Product detail
--------------------------------
*/
#product-detail .images,
#product-detail .info {
    float: left;
    clear: both;
    width: 100%;
    margin-bottom: 6rem;
}


/*
--------------------------------
    Article list
--------------------------------
*/

#article-list .content a {
    width: calc((100% - 6rem) / 3);
    width: -webkit-calc((100% - 6rem) / 3);
    margin-left: 3rem;
}

#article-list .content a:nth-child(n+4) {margin-top: 6rem}

#article-list .content a:nth-child(4n+1) {
    margin-left: 3rem;
    clear: none;
}

#article-list .content a:nth-child(3n+1) {
    margin-left: 0;
    clear: both;
}



/*
--------------------------------
    Article detail
--------------------------------
*/
#article-detail .other ul {
    -webkit-column-count: 2;
    -webkit-column-gap: 3rem;
    -moz-column-count: 2;
    -moz-column-gap: 3rem;
    column-count: 2;
    column-gap: 3rem;
    padding: 0;
    margin: 0;
}