@import url(./bubles.css);
#soda-head-spa {
    .title li:before {
        content: "◆ ";
        color: #10a0cc;
        margin-left: -20px;
    }

    .title {
        padding: 20px 0 0 20px;
    }

    .title li {
        color: #10a0cc;
        font-size: 18px;
        list-style-type: none;
    }

    .title li span {
        color: #000000;
    }

    .growth-right {
        margin-right: 20px;
    }

    .growth-img {
        margin: 20px 0;
    }

    .growth-left {
        float: left;
    }

    .growth-left img {
        padding-left: 50px;
    }

    .growth-left ul {
        list-style: none;
        padding-top: 90px;
    }

    .growth-left ul li {
        padding: 10px 0;
    }

    .gr {
        width: 753px;
        margin: 0 auto;
    }

    .gr ul {
        list-style-type: none;
    }

    .gr ul li {
        font-size: 20px;
        padding: 5px 30px 5px 0;
        float: left;
        color: #0F9ECA;
    }

    .mauto {
        margin: 0 auto;
        width: 850px;
        padding: 30px 0;
        overflow: hidden;
    }

    .water {
        margin: 20px auto;
    }

    .water-box {
        /* border:2px #ccc solid;*/
        border-radius: 10px;
        width: 600px;
        background-color: #37beeb;
        line-height: 80px;
        text-align: center;
        color: #FFFFFF;
        font-size: 23px;
        word-spacing: 1px;
        letter-spacing: 1px;
        font-weight: 600;
        margin-bottom: 40px;
    }


    .water-box2 {
        border: 2px #37beeb solid;
        border-radius: 10px;
        width: 750px;
        /* height:80px;
 background-color:#37beeb;*/
        overflow: hidden;
        text-align: center;
        word-spacing: 3px;
        letter-spacing: 2px;
        padding: 15px 0;
        font-size: 23px;
        color: #063C89;
        font-weight: 600;
        margin: 10px auto 50px auto;
    }

    .water-box2 span {
        color: #000000;
        font-size: 18px;
        font-weight: 100;
    }

    /* 等腰三角形 */
    .triangle4 {

        border-color: #37beeb transparent transparent transparent;
        border-style: solid solid solid solid;

        /* 設定邊框依上、下；左右，各為一群組，相同群組須設定為相同尺寸，調整尺寸可拼湊出任意形狀的三角形 */
        border-width: 45px 50px 45px 50px;

        /* 設定 width、height 可更好理解原理*/
        height: 0px;
        width: 0px;
        margin: 0 auto;

    }

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

        .water-box {
            width: 100%;
        }


        .water-box2 {
            width: 100%;
        }

        .content-bg .titleP {
            width: 100%;
            height: auto;
        }

        #bubbles {
            display: none;
        }
    }

    .harg-bg.titleP h2 {
        position: absolute;
        top: 7vh;
        left: 27%;
        color: #fff;
        font-size: max(1.5rem, 4vw);
        transform: translateX(-50%);
        font-weight: bolder;

    }
}