/* Have fun adding your style here :) - PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */


/*
*
*haru-footer
*
*/
 .haru-footer-container {
        /* width: 80%;
      margin-left: auto;
      margin-right: auto; */
        max-width: 1430px;
        /* position: relative; */
        /* width: 100%; */
        margin: 0 auto;
        padding: 0px 50px;
        clear: both;
    }
    
    @media only screen and (min-width: 1290px) {
        .haru-footer-footer .col {
            float: left;
        }
        .haru-footer-footer .col-8 {
            width: 33.333333333333333333%;
        }
        .haru-footer-footer .col-12 {
            width: 50%;
        }
        .haru-footer-footer .col-16 {
            width: 66.666666666666666%;
        }
        .haru-footer-footer .row:before,
        .haru-footer-footer .row:after {
            content: '';
            display: block;
            clear: both;
        }
        .haru-footer-link-area {
            display: flex;
            justify-content: flex-end;
        }
        .haru-footer-link-group {
            /* padding-left: 8em; */
            display: inline;
            /* max-height: 10em; */
        }
    }
    /* -------------------------------- 

Primary style

-------------------------------- */
    
    .haru-footer-footer *,
    .haru-footer-footer *::after,
    .haru-footer-footer *::before {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        /* line-height: 1.5em; */
        -webkit-transition: opacity .3s 0s, visibility 0s .3s;
        -moz-transition: opacity .3s 0s, visibility 0s .3s;
        transition: opacity .3s 0s, visibility 0s .3s;
    }
    
    .haru-footer-footer a {
        color: inherit;
        text-decoration: none;
        display: block;
    }
    
    .haru-footer-footer img {
        max-width: 100%;
    }
    
    .haru-footer-footer ul,
    .haru-footer-footer li {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    /* -------------------------------- 

Footer style

-------------------------------- */
    
    .haru-footer-footer {
        font-family: sans-serif;
        font-size: 12px;
        /* color: rgb(187, 187, 187); */
        color: rgba(225, 225, 225, .5);
        /* position: absolute; */
        width: 100%;
        /* bottom: 0; */
        /* left: 0; */
        background-color: #232323;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    .haru-footer-main {
        /* padding: 4em 0 2em 0; */
        padding-top: 4em;
    }
    
    .haru-footer-company-info {
        position: relative;
    }
    
    .haru-footer-logo,
    .haru-footer-icon {
        opacity: .5;
    }
    
    .haru-footer-logo {
        width: 9em;
    }
    
    .haru-footer-content {
        padding: 2em 0;
    }
    
    .haru-footer-icon {
        width: 1.6em;
        display: inline-block;
        cursor: pointer;
    }
    
    #haru-fl-icon {
        margin-left: 1em;
    }
    
    .haru-footer-hide {
        display: none;
        transition: .5s;
    }
    
    #haru-qrcode-icon-child {
        position: absolute;
        left: 0em;
        bottom: 2em;
        width: 8em;
        opacity: 1;
    }
    
    .haru-footer-link-group {
        min-width: 14em;
    }
    
    .haru-fl-group .haru-footer-link-group-links {
        /* padding-left: 8em; */
        width: 10em;
    }
    
    .haru-fl-group :first-child {
        padding-left: 0;
    }
    
    .haru-footer-link-group-title {
        font-weight: 700;
        padding-bottom: .5em;
    }
    
    .haru-footer-link-group-links a {
        padding-top: 1em;
        display: block;
    }
    
    .haru-footer-footer a:hover {
        color: #fff;
    }
    
    .haru-footer-resource {
        padding: 2em 0;
        border-top: solid 2px rgb(83, 83, 83);
        position: relative;
    }
    
    .haru-footer-resource div {
        display: inline-block;
    }
    
    .haru-footer-resource .privacy-policy {
        /* float: right; */
        text-align: right;
        position: absolute;
        right: 0;
    }
    
    .haru-footer-resource .privacy-policy>* {
        display: inline;
        padding-left: 1em;
    }
    
    .haru-footer-icon-active {
        opacity: 1;
    }
    
    #haru-fl-icon-child .haru-footer-link-group-links {
        width: 100%;
    }
    
    #haru-fl-icon-child .haru-footer-link-group-links a {
        /* width: 4em; */
        float: left;
        padding-right: 1em;
        display: block;
    }
    
    @media only screen and (max-width: 1289px) {
        .haru-footer-company-info {
            margin-top: 4em;
            padding-top: 4em;
            border-top: solid 2px rgb(83, 83, 83);
        }
        .haru-footer-link-group {
            padding-right: 4em;
            display: inline;
        }
        .haru-footer-company-info,
        .haru-footer-link-area {
            display: block;
        }
        .haru-footer-main {
            display: flex;
            flex-direction: column-reverse;
        }
        .haru-footer-link-area {
            display: flex;
            align-content: flex-start;
        }
        #haru-fl-icon-child {
            order: 99;
        }
    }
    
    @media only screen and (max-width: 650px) {
        .haru-footer-company-info {
            padding-top: 4em;
            border-top: solid 2px rgb(83, 83, 83);
        }
        .haru-footer-link-group {
            padding-bottom: 2em;
        }
        .haru-footer-main {
            display: flex;
            flex-direction: column-reverse;
        }
        .haru-footer-link-area,
        #haru-fl-icon-child {
            display: flex;
            flex-direction: column;
        }
        #haru-fl-icon-child {
            order: 99;
        }
        #haru-fl-icon-child ul {
            width: 100%;
        }
        .haru-footer-resource div {
            display: block;
        }
        .haru-footer-resource .privacy-policy {
            float: none;
            text-align: left;
            position: relative;
            left: 0;
            margin-top: 1em;
        }
        .haru-footer-resource .privacy-policy>* {
            display: inline;
            /* padding-left: 1em; */
        }
    }
    
    @media only screen and (min-width: 1290px) {
        /* .haru-footer-link-area:last-child{
        min-width: 4em;
    } */
        .haru-footer-about-col {
            min-width: 4em;
        }
    }