@charset "UTF-8";
#battery {
    background: url(../images/battery_1920.jpg) center 0px no-repeat;
    height: 836px;
    position: relative;
}

#battery .frame {
    position: absolute;
    left: 111px;
    top: 254px;
    width: 680px;
    height: 247px;
}

#battery ul {
    list-style: none;
}

#battery ul li {
    background: rgba(255, 255, 255, 0.06);
    border: rgba(135, 135, 135, 0.5) solid 1px;
    padding: 10px;
    margin-right: 15px;
    margin-bottom: 15px;
    float: left;
}

#battery ul.big-box {
    left: 175px;
    top: 440px;
    position: absolute;
}

#battery .big-box h3 {
    font-family: 'Segoe UI', Microsoft JhengHei, '微軟正黑體', Arial, Helvetica, sans-serif;
    font-size: 80px;
    line-height: 88px;
    color: #ddd;
    margin-bottom: -15px;
    font-weight: 100;
}

#battery .big-box h4 {
    font-size: 14px;
    line-height: 18px;
    color: #999;
}

#battery .big-box span {
    font-family: 'cwTeXHei', 'Play', 'Segoe UI', Microsoft JhengHei, '微軟正黑體', Arial, Helvetica, sans-serif;
    font-size: 0.4em;
    color: #dddddd;
}

@media screen and (max-width: 1366px) {
    #battery {
        background: url(../images/battery_1366.jpg) center 0 no-repeat;
        height: 615px;
    }
    #battery .frame {
        left: 74px;
        top: 124px;
        width: 528px;
        height: 176px;
    }
    #battery ul li {
        padding: 10px;
        margin-right: 15px;
        float: left;
    }
    #battery ul.big-box {
        left: 145px;
        top: 360px;
        position: absolute;
    }
    #battery .big-box h3 {
        font-size: 48px;
        line-height: 58px;
        font-weight: 100;
    }
    #battery .big-box h4 {
        font-size: 12px;
        line-height: 16px;
    }
    #battery .big-box span {
        font-size: 0.4em;
    }
}

@media screen and (max-width: 960px) {
    #battery {
        background: url(../images/battery_960.jpg) center -20px no-repeat;
        height: 795px;
    }
    #battery .frame {
        left: 10px;
        top: 100px;
        width: 581px;
        height: 246px;
    }
    #battery ul li {
        padding: 10px;
        margin-right: 15px;
        float: left;
    }
    #battery ul.big-box {
        left: -35px;
        top: 330px;
    }
}

@media screen and (max-width: 640px) {
    #battery {
        background: url("../images/battery_640.jpg") center 20px no-repeat;
        height: 654px;
    }
    #battery .frame {
        top: 50px !important;
    }
    #battery .big-box h3 {
        font-size: 30px;
        line-height: 38px;
    }
    #battery ul.big-box {
        left: -30px;
        top: 300px;
        width: 460px;
    }
}