/* Index */

.index-banner-container {
    height: 420px;
    background: #ccccce url("../images/index-banner.png") center center no-repeat;
    background-size: cover;
}

.index-banner-title {
    font-size: 26px;
    line-height: 40px;
    margin-top: 70px;
    padding: 20px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.25);
}

.index-banner-desc {
    margin-top: 20px;
    line-height: 32px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.25);
    color: #333;
}

.index-banner-more {
    height: 40px;
    line-height: 40px;
    background-color: #006acc;
    float: right;
    width: 120px;
    text-align: center;
    color: #fff;
    font-size: 0.875em;
    border-radius: 2px;
    margin-top: 30px;
    cursor: pointer;
}

.index-banner-more-light {
    background-color: #8fcca8;
}

.index-banner-more:hover {
    text-decoration: none;
    background-color: #003cc8;
    color: #fff;
}

.index-wrc-container {
    height: 420px;
    background: url("../images/index-worldrobotconference.jpg") center center no-repeat;
    background-size: cover;
}

.index-wrc-title {
    float: left;
    font-size: 26px;
    line-height: 50px;
    margin-top: 100px;
    padding: 20px;
    color: #fff;
    text-align: left;
    background-color: rgba(0, 0, 0, 0.25);
}

.index-wrc-more {
    float: left;
    background-color: #fff;
    color: #333;
}

.index-wrc-more:hover {
    text-decoration: none;
    background-color: #ccc;
    color: #333;
}

.index-industry-container {
    padding: 80px 0px;
    background-color: #fff;
}

.index-industry-title {
    font-size: 26px;
    padding: 20px 30px;
    color: #333;
    border-radius: 2px;
    background-color: #e6f0f5;
}

.index-industry-desc {
    font-size: 16px;
    border-radius: 2px;
    line-height: 32px;
    padding: 20px 30px;
    margin-top: 20px;
    color: #444;
    background-color: #f8f8f8;
}

.index-industry-img img {
    width: 84%;
    padding: 20px;
    border: 4px solid #eee;
    border-radius: 4px;
}

/* pad 768x1024 */
@media (min-width: 768px) and (max-width: 1024px) {
    .index-banner-title {
        margin-top: 60px;
        font-size: 1.25em;
        line-height: 20px;
    }

    .index-banner-desc {
        margin-top: 30px;
        font-size: 1em;
        line-height: 30px;
    }
}

/* phone */
@media (max-width: 767px) {
    .index-banner-container {
        height: 300px;
        background: #ccccce url("../images/index-banner.png") -200px center no-repeat;
        background-size: cover;
    }

    .index-banner-title {
        margin-top: 30px;
        font-size: 1em;
        line-height: 20px;
    }

    .index-banner-desc {
        margin-top: 15px;
        font-size: 0.875em;
        line-height: 22px;
    }

    .index-banner-more { margin-top: 20px; width: 100%; }

    .index-wrc-container {
        height: 245px;
        background: url("../images/index-worldrobotconference.jpg") -130px center no-repeat;
        background-size: 800px;
    }

    .index-wrc-title {
        font-size: 1em;
        width: 100%;
        text-align: center;
        line-height: 1.5em;
        padding: 15px;
        margin-top: 15px;
    }

    .index-wrc-more { margin-top: 120px; }

    .index-industry-container { padding: 30px 0px; }
    
    .index-industry-title {
        font-size: 1em;
        padding: 15px;
        margin-top: 20px;
        text-align: center;
    }

    .index-industry-desc { font-size: 0.875em; }
    
    .index-industry-img img { width: 100%; padding: 20px; }
}