/*
==============================
    Global
==============================
*/
#ads-qua-oc-cho,
#ads-qua-oc-cho>section,
#ads-qua-oc-cho>section>*{
    float: left;
    clear: both;
    width: 100%;
}

#ads-qua-oc-cho>section {
    padding: 6rem 0;
    box-sizing: border-box;
}

#ads-qua-oc-cho>section:nth-child(2n+2) {
    background: #f1f2f0;
    border-radius: .5rem;
    padding: 6rem 3rem;
    box-sizing: border-box;
}

#ads-qua-oc-cho h2 {
    text-align: center;
    text-transform: uppercase;
    font-size: 3rem;
    font-family: lato-e;
    color: #6dcc3d;
    margin-bottom: 4rem;
}

#ads-qua-oc-cho h3 {
    font-size: 1.6rem;
    font-family: lato-e;
    font-weight: normal;
}

#ads-qua-oc-cho ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#ads-qua-oc-cho .note,
#ads-qua-oc-cho .note>* {
    box-sizing: border-box;
    font-size: 2rem;
    color: red;
}

#ads-qua-oc-cho img {border-radius: .5rem}


/*
==============================
    Certificate
==============================
*/
#ads-qua-oc-cho .ads-sec-certificate .ads-content  img{
    width: calc((100%/4) - 4rem);
    width: -webkit-calc((100%/4) - 4rem);
    float: left;
    margin: 2rem;
}



/*
==============================
    Price
==============================
*/
#ads-qua-oc-cho .ads-sec-price .ads-content {
    list-style: none;
    padding: 0;
    margin: 0;
}

#ads-qua-oc-cho .ads-sec-price .ads-content div {
    width: calc((100%/3) - 6rem);
    width: -webkit-calc((100%/3) - 6rem);
    float: left;
    margin: 1.5rem 3rem;
}

#ads-qua-oc-cho .ads-sec-price .ads-content div:nth-child(3n+1) {
    clear: both;
}

#ads-qua-oc-cho .ads-sec-price .ads-content div>* {
    float: left;
    clear: both;
    width: 100%;
    padding: 1.5rem 2rem;
    box-sizing: border-box;
}

#ads-qua-oc-cho .ads-sec-price .ads-content div strong {
    background: #ffb54c;
    border-top-right-radius: .5rem;
    border-top-left-radius: .5rem;
    color: #fff;
    font-weight: normal;
    font-family: lato-b;
}

#ads-qua-oc-cho .ads-sec-price .ads-content div label {
    border: solid .1rem #ffb54c;
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
}

#ads-qua-oc-cho .ads-sec-price .note {margin-top: 3rem}



/*
==============================
    Contact
==============================
*/
#ads-qua-oc-cho .ads-sec-contact .ads-branch>div:first-child,
#ads-qua-oc-cho .ads-sec-contact .ads-hotline>* {
    float: left;
    clear: both;
    width: 100%;
    text-align: center;
    font-size: 1.8rem;
}

#ads-qua-oc-cho .ads-sec-contact .ads-branch>div:first-child,
#ads-qua-oc-cho .ads-sec-contact .ads-hotline>div:first-child {
    font-family: lato-e;
    text-transform: uppercase;
}

#ads-qua-oc-cho .ads-sec-contact .ads-hotline>div:last-child {
    margin-top: 3rem;
}

#ads-qua-oc-cho .ads-sec-contact .ads-hotline>div:last-child label {
    width: 47%;
    font-family: lato-e;
    font-size: 3.5rem;
    color: #fff;
    background: #6dcc3d;
    padding: 2rem 0;
    box-sizing: border-box;
    border-radius: .5rem;
}

#ads-qua-oc-cho .ads-sec-contact .ads-hotline>div:last-child label:first-child {
    float: left;
}

#ads-qua-oc-cho .ads-sec-contact .ads-hotline>div:last-child label:last-child {
    float: right;
}


#ads-qua-oc-cho .ads-sec-contact .ads-branch>div:first-child {
    margin-top: 5rem;
    margin-bottom: 2rem;
}

#ads-qua-oc-cho .ads-sec-contact .ads-branch>div:last-child p {
    width: calc((100%/3) - 6rem);
    width: -webkit-calc((100%/3) - 6rem);
    float: left;
    margin: 0.5rem 3rem;
    padding: 1rem;
    box-sizing: border-box;
}

#ads-qua-oc-cho .ads-sec-contact .ads-branch>div:last-child p.city {
    background: #6dcc3d;
    color: #fff;
}

#ads-qua-oc-cho .ads-sec-contact .ads-branch>div:last-child p.city * {
    color: #fff;
}



/*
==============================
    Buy
==============================
*/
#ads-qua-oc-cho .ads-sec-buy ul {
    list-style: disc;
    list-style-position: inside;
}

#ads-qua-oc-cho .ads-sec-buy li {margin: .5rem 0}



/*
==============================
    Intro
==============================
*/
#ads-qua-oc-cho .ads-sec-intro img {
    width: 40%;
    float: left;
    margin: 0 4rem 4rem 0;
}



/*
==============================
    Pack
==============================
*/
#ads-qua-oc-cho .ads-sec-pack .ads-content {
    -webkit-column-count: 2;
    -webkit-column-gap: 8rem;
    -moz-column-count: 2;
    -moz-column-gap: 8rem;
    column-count: 2;
    column-gap: 8rem;
}

#ads-qua-oc-cho .ads-sec-pack .ads-content>div:nth-of-type(n+2) h3 {margin-top: 4rem}


/*
==============================
    Text and use
==============================
*/
#ads-qua-oc-cho .ads-sec-use ul,
#ads-qua-oc-cho .ads-sec-text ul {
    list-style: disc;
    list-style-position: inside;
    margin-top: 2rem;
}

#ads-qua-oc-cho .ads-sec-use li,
#ads-qua-oc-cho .ads-sec-text li {margin: .5rem 0}

#ads-qua-oc-cho .ads-sec-use h3 {margin-top: 4rem}

#ads-qua-oc-cho .ads-sec-use img {
    width: 40%;
    float: right;
    margin: 0 0 4rem 4rem;
}



/*
==============================
    Keywords
==============================
*/
#ads-qua-oc-cho .ads-sec-keywords strong {
    float: left;
    clear: none !important;
    width: auto !important;
    margin: 1rem;
    padding: 1rem 2rem;
    background: #fff;
    border-radius: 4rem;
}



@media only screen and (max-width: 800px) {
    #ads-qua-oc-cho h2 {
        font-size: 2rem;
    }

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



    /*
    ==============================
        Price
    ==============================
    */
    #ads-qua-oc-cho .ads-sec-price .ads-content div {
        width: calc((100%/2) - 4rem);
        width: -webkit-calc((100%/2) - 4rem);
        margin: 1.5rem 2rem;
    }

    #ads-qua-oc-cho .ads-sec-price .ads-content div:nth-child(2n+1) {
        clear: both;
    }

    #ads-qua-oc-cho .ads-sec-price .ads-content div:nth-child(3n+1) {
        clear: none
    }



    /*
    ==============================
        Contact
    ==============================
    */
    #ads-qua-oc-cho .ads-sec-contact .ads-branch>div:last-child p {
        width: calc((100%/2) - 4rem);
        margin: 0.5rem 2rem;
    }



    /*
    ==============================
        Intro
    ==============================
    */
    #ads-qua-oc-cho .ads-sec-intro img {
        margin: 0 2rem 1rem 0;
    }



    /*
    ==============================
        Pack
    ==============================
    */
    #ads-qua-oc-cho .ads-sec-pack .ads-content {
        -webkit-column-gap: 4rem;
        -moz-column-gap: 4rem;
        column-gap: 4rem;
    }
}



@media only screen and (max-width: 480px) {
    /*
    ==============================
        Price
    ==============================
    */
    #ads-qua-oc-cho .ads-sec-contact .ads-branch>div:last-child p,
    #ads-qua-oc-cho .ads-sec-price .ads-content div {
        width: 100%;
        clear: both;
        margin: 0 0 1.5rem 0;
    }

    #ads-qua-oc-cho .ads-sec-contact .ads-branch>div:last-child p {
        margin: 0;
    }

    #ads-qua-oc-cho .ads-sec-contact .ads-branch>div:last-child p.city {
        margin: .5rem 0;
    }



    /*
    ==============================
        Contact
    ==============================
    */
    #ads-qua-oc-cho .ads-sec-contact .ads-hotline>div:last-child label {
        width: 100%;
        float: left;
        clear: both;
        margin-bottom: 2rem;
        font-size: 2.5rem;
    }


    /*
    ==============================
        Intro
    ==============================
    */
    #ads-qua-oc-cho .ads-sec-use img,
    #ads-qua-oc-cho .ads-sec-intro img {
        float: left;
        width: 100%;
        margin: 1rem 0;
    }



    /*
    ==============================
        Pack
    ==============================
    */
    #ads-qua-oc-cho .ads-sec-pack .ads-content {
        -webkit-column-count:1;
        -webkit-column-gap: 0rem;
        -moz-column-count: 1;
        -moz-column-gap: 0rem;
        column-count: 1;
        column-gap: 0rem;
    }

}