/* ==========================================================================
    media
============================================================================ */

/* 文字 */
.font60{font-size: 30px;}
.font48{font-size: 26px;}
.font36{font-size: 24px;}
.font30{font-size: 22px;}
.font24{font-size: 20px;}
.font20{font-size: 18px;}
.font18{font-size: 16px;}

@media screen and (min-width: 768px) {
    .font60{font-size: 40px;}
    .font48{font-size: 36px;}
    .font36{font-size: 28px;}
    .font30{font-size: 24px;}
    .font24{font-size: 22px;}
    .font20{font-size: 20px;}
    .font18{font-size: 18px;}
}

@media screen and (min-width: 1280px) {
    .font60{font-size: 50px;}
    .font48{font-size: 40px;}
    .font36{font-size: 32px;}
    .font30{font-size: 28px;}
    .font24{font-size: 24px;}
}

@media screen and (min-width: 1680px) {
    .font60{font-size: 60px;}
    .font48{font-size: 48px;}
    .font36{font-size: 36px;}
    .font30{font-size: 30px;}
}


/* 距离 */
.pad150{padding: 64px 0;}
.pad120{padding: 56px 0;}
.pad100{padding: 48px 0;}
.pad80{padding: 40px 0;}

.pt150{padding-top: 64px;}
.pt120{padding-top: 56px;}
.pt100{padding-top: 48px;}
.pt80{padding-top: 40px;}

.pb150{padding-bottom: 64px;}
.pb120{padding-bottom: 56px;}
.pb100{padding-bottom: 48px;}
.pb80{padding-bottom: 0px;}

.mag150{margin: 64px 0;}
.mag120{margin: 56px 0;}
.mag100{margin: 48px 0;}
.mag80{margin: 40px 0;}

.mt150{margin-top: 64px;}
.mt120{margin-top: 56px;}
.mt100{margin-top: 48px;}
.mt80{margin-top: 40px;}

.mb150{margin-bottom: 64px;}
.mb120{margin-bottom: 56px;}
.mb100{margin-bottom: 48px;}
.mb80{margin-bottom: 40px;}

@media screen and (min-width: 768px) {
    .pad150{padding: 80px 0;}
    .pad120{padding: 70px 0;}
    .pad100{padding: 60px 0;}
    .pad80{padding: 44px 0;}
    .pad60{padding: 32px 0;}
    .pad40{padding: 28px 0;}

    .pt150{padding-top: 80px;}
    .pt120{padding-top: 70px;}
    .pt100{padding-top: 60px;}
    .pt80{padding-top: 44px;}
    .pt60{padding-top: 32px;}
    .pt40{padding-top: 28px;}

    .pb150{padding-bottom: 80px;}
    .pb120{padding-bottom: 70px;}
    .pb100{padding-bottom: 60px;}
    .pb80{padding-bottom: 0px;}
    .pb60{padding-bottom: 32px;}
    .pb40{padding-bottom: 28px;}

    .mag150{margin: 80px 0;}
    .mag120{margin: 70px 0;}
    .mag100{margin: 60px 0;}
    .mag80{margin: 44px 0;}
    .mag60{margin: 32px 0;}
    .mag40{margin: 28px 0;}

    .mt150{margin-top: 80px;}
    .mt120{margin-top: 70px;}
    .mt100{margin-top: 60px;}
    .mt80{margin-top: 44px;}
    .mt60{margin-top: 32px;}
    .mt40{margin-top: 28px;}

    .mb150{margin-bottom: 80px;}
    .mb120{margin-bottom: 70px;}
    .mb100{margin-bottom: 60px;}
    .mb80{margin-bottom: 44px;}
    .mb60{margin-bottom: 32px;}
    .mb40{margin-bottom: 28px;}
}

@media screen and (min-width: 992px) {
    .pad150{padding: 100px 0;}
    .pad120{padding: 80px 0;}
    .pad100{padding: 70px 0;}
    .pad80{padding: 50px 0;}
    .pad60{padding: 36px 0;}
    .pad40{padding: 30px 0;}
    .pad30{padding: 22px 0;}

    .pt150{padding-top: 100px;}
    .pt120{padding-top: 80px;}
    .pt100{padding-top: 70px;}
    .pt80{padding-top: 50px;}
    .pt60{padding-top: 36px;}
    .pt40{padding-top: 30px;}
    .pt30{padding-top: 22px;}

    .pb150{padding-bottom: 100px;}
    .pb120{padding-bottom: 80px;}
    .pb100{padding-bottom: 70px;}
    .pb80{padding-bottom: 0px;}
    .pb60{padding-bottom: 36px;}
    .pb40{padding-bottom: 30px;}
    .pb30{padding-bottom: 22px;}

    .mag150{margin: 100px 0;}
    .mag120{margin: 80px 0;}
    .mag100{margin: 70px 0;}
    .mag80{margin: 50px 0;}
    .mag60{margin: 36px 0;}
    .mag40{margin: 30px 0;}
    .mag30{margin: 22px 0;}

    .mt150{margin-top: 100px;}
    .mt120{margin-top: 80px;}
    .mt100{margin-top: 70px;}
    .mt80{margin-top: 50px;}
    .mt60{margin-top: 36px;}
    .mt40{margin-top: 30px;}
    .mt30{margin-top: 22px;}

    .mb150{margin-bottom: 100px;}
    .mb120{margin-bottom: 80px;}
    .mb100{margin-bottom: 70px;}
    .mb80{margin-bottom: 50px;}
    .mb60{margin-bottom: 36px;}
    .mb40{margin-bottom: 30px;}
    .mb30{margin-bottom: 22px;}
}

@media screen and (min-width: 1280px) {
    .pad150{padding: 120px 0;}
    .pad120{padding: 100px 0;}
    .pad100{padding: 80px 0;}
    .pad80{padding: 60px 0;}
    .pad60{padding: 40px 0;}
    .pad40{padding: 32px 0;}
    .pad30{padding: 24px 0;}
    .pad20{padding: 18px 0;}

    .pt150{padding-top: 120px;}
    .pt120{padding-top: 100px;}
    .pt100{padding-top: 80px;}
    .pt80{padding-top: 60px;}
    .pt60{padding-top: 40px;}
    .pt40{padding-top: 32px;}
    .pt30{padding-top: 24px;}
    .pt20{padding-top: 18px;}

    .pb150{padding-bottom: 120px;}
    .pb120{padding-bottom: 100px;}
    .pb100{padding-bottom: 80px;}
    .pb80{padding-bottom: 0px;}
    .pb60{padding-bottom: 40px;}
    .pb40{padding-bottom: 32px;}
    .pb30{padding-bottom: 24px;}
    .pb20{padding-bottom: 18px;}

    .mag150{margin: 120px 0;}
    .mag120{margin: 100px 0;}
    .mag100{margin: 80px 0;}
    .mag80{margin: 60px 0;}
    .mag60{margin: 40px 0;}
    .mag40{margin: 32px 0;}
    .mag30{margin: 24px 0;}
    .mag20{margin: 18px 0;}

    .mt150{margin-top: 120px;}
    .mt120{margin-top: 100px;}
    .mt100{margin-top: 80px;}
    .mt80{margin-top: 60px;}
    .mt60{margin-top: 40px;}
    .mt40{margin-top: 32px;}
    .mt30{margin-top: 24px;}
    .mt20{margin-top: 18px;}

    .mb150{margin-bottom: 120px;}
    .mb120{margin-bottom: 100px;}
    .mb100{margin-bottom: 80px;}
    .mb80{margin-bottom: 60px;}
    .mb60{margin-bottom: 40px;}
    .mb40{margin-bottom: 32px;}
    .mb30{margin-bottom: 24px;}
    .mb20{margin-bottom: 18px;}
}

@media screen and (min-width: 1680px) {
    .pad150{padding: 150px 0;}
    .pad120{padding: 120px 0;}
    .pad100{padding: 100px 0;}
    .pad80{padding: 80px 0;}
    .pad60{padding: 60px 0;}
    .pad40{padding: 40px 0;}
    .pad30{padding: 30px 0;}
    .pad20{padding: 20px 0;}

    .pt150{padding-top: 150px;}
    .pt120{padding-top: 120px;}
    .pt100{padding-top: 100px;}
    .pt80{padding-top: 80px;}
    .pt60{padding-top: 60px;}
    .pt40{padding-top: 40px;}
    .pt30{padding-top: 30px;}
    .pt20{padding-top: 20px;}

    .pb150{padding-bottom: 150px;}
    .pb120{padding-bottom: 120px;}
    .pb100{padding-bottom: 100px;}
    .pb80{padding-bottom: 0px;}
    .pb60{padding-bottom: 60px;}
    .pb40{padding-bottom: 40px;}
    .pb30{padding-bottom: 30px;}
    .pb20{padding-bottom: 20px;}

    .mag150{margin: 150px 0;}
    .mag120{margin: 120px 0;}
    .mag100{margin: 100px 0;}
    .mag80{margin: 80px 0;}
    .mag60{margin: 60px 0;}
    .mag40{margin: 40px 0;}
    .mag30{margin: 30px 0;}
    .mag20{margin: 20px 0;}

    .mt150{margin-top: 150px;}
    .mt120{margin-top: 120px;}
    .mt100{margin-top: 100px;}
    .mt80{margin-top: 80px;}
    .mt60{margin-top: 60px;}
    .mt40{margin-top: 40px;}
    .mt30{margin-top: 30px;}
    .mt20{margin-top: 20px;}

    .mb150{margin-bottom: 150px;}
    .mb120{margin-bottom: 120px;}
    .mb100{margin-bottom: 100px;}
    .mb80{margin-bottom: 80px;}
    .mb60{margin-bottom: 60px;}
    .mb40{margin-bottom: 40px;}
    .mb30{margin-bottom: 30px;}
    .mb20{margin-bottom: 20px;}
}