ShowEasy/EuroTran/WebSite/TG/css/index.css

@charset "utf-8";
/* CSS Document */
/*-----------------------for PC and Mobile both-----------------------*/
#indexService ul li:first-of-type {
    background-image: url(../images/serviceExpo.svg);
}

#indexService ul li:nth-child(2) {
    background-image: url(../images/serviceVan.svg);
}

#indexService ul li:nth-child(3) {
    background-image: url(../images/serviceLog.svg);
}

#indexService ul li:nth-child(4) {
    background-image: url(../images/serviceShip.svg);
}

#indexService ul li:nth-child(5) {
    background-image: url(../images/serviceCust.svg);
}

.indexExpoList li a {
    text-decoration: none;
    color: #333;
}

.rectThumb {
    width: 100%;
    height: 0;
    padding-bottom: 64%;
}

/*-----------------------for PC-----------------------*/
@media screen and (min-width:801px) {
    /*-------------banner--------------------*/
    #bannerWrapper {
        width: 80%;
        margin: 0 auto;
    }

    #banner {
        position: relative;
    }

    .bannerslide li {
        width: 100%;
    }
    /*-----------------indexService--------------------*/
    #indexService h1, #indexExpo h1, #indexVideo h1 {
        font-size: 27px;
        background: #f26529;
        padding: 7px 0;
        color: #fff;
        text-align: center;
        font-weight: normal;
        border-radius: 5px;
    }

    #indexService {
        width: 80%;
        margin: 15px auto;
        min-width: 1024px;
        max-width: 1440px;
        background: #FFF;
        padding: 25px;
    }

        #indexService h3 {
            margin-bottom: 15px;
            color: #333;
            text-align: center;
        }

        #indexService ul li {
            float: left;
            display: block;
            width: 18.4%;
            margin-right: 2%;
            padding-top: 130px;
            background-repeat: no-repeat;
            background-position: top center;
            background-size: auto 110px;
        }

            #indexService ul li:hover {
                cursor: pointer;
            }

            #indexService ul li a h3 {
                width: 100%;
                display: block;
                text-decoration: none;
            }

            #indexService ul li:nth-child(5) {
                margin-right: 0;
            }
    /*-----------------indexVideo--------------------*/
    #indexVideo {
        width: 80%;
        margin: 15px auto;
        min-width: 1024px;
        max-width: 1440px;
        background: #FFF;
        padding: 25px;
    }

    .indexVideoLeft {
        width: 49%;
        float: left;
    }

    .indexVideoRight {
        width: 47%;
        float: right;
    }

    .video {
        height: 300px;
    }
    /*-----------------indexexpo--------------------*/
    #indexExpo {
        width: 80%;
        margin: 0 auto 15px auto;
        min-width: 1024px;
        max-width: 1440px;
        background: url(../images/indexExpoBg.jpg) repeat-y center top #FFF;
        overflow: auto;
    }

    #indexExpoLeft {
        float: left;
        width: 49%;
        padding: 25px;
    }

    #indexExpoRight {
        float: right;
        width: 49%;
        padding: 25px;
    }

    .indexExpoList li {
        margin-bottom: 15px;
        overflow: auto;
    }

        .indexExpoList li:last-child {
            margin-bottom: 0;
        }

        .indexExpoList li div.indexExpoListLeft {
            float: left;
            width: 100px;
            border: 1px solid #e0e0e0;
        }

        .indexExpoList li div.indexExpoListRight {
            width: auto;
            margin-left: 115px;
        }

        .indexExpoList li h4 {
            width: auto;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            color: #093969;
        }

        .indexExpoList li .italic {
            width: auto;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            font-size: 13px;
        }

        .indexExpoList li div.indexNewsLeft {
            float: left;
            width: 200px;
            border: 1px solid #e0e0e0;
        }

        .indexExpoList li div.indexNewsRight {
            width: auto;
            margin-left: 215px;
        }
}

/*------------------for mobile------------------------*/
@media screen and (max-width:800px) {
    /*-----------------banner-----------------*/
    #bannerWrapper {
        width: 100%;
        margin-top: 65px;
    }

    #banner {
        z-index: 0;
        position: relative;
    }
    /*---------------search---------------------*/
    #search {
        background-color: rgba(0,0,0,0.5);
        padding: 20px;
        color: #fff;
    }
    /*-----------------general-----------------*/
    article, .article {
        width: 100%;
    }
    /*-----------------indexService--------------------*/
    #indexService h1, #indexExpo h1, #indexVideo h1 {
        background: #f26529;
        padding: 6px 0;
        color: #fff;
        text-align: center;
        font-weight: normal;
        border-radius: 5px;
    }

    #indexService {
        padding: 20px 10px 0 10px;
    }

        #indexService h3 {
            color: #333;
            line-height: 40px;
        }

        #indexService ul li {
            display: block;
            background-repeat: no-repeat;
            background-position: left center;
            background-size: 40px 40px;
            height: 40px;
            padding-left: 50px;
            margin-bottom: 10px;
        }

            #indexService ul li:last-child {
                margin-bottom: 0;
            }
    /*-----------------indexexpo--------------------*/
    #indexVideo {
        padding: 20px 10px;
    }

    .indexVideoLeft {
        margin-top: 20px;
    }

    .video {
        height: 240px;
    }
    /*-----------------indexexpo--------------------*/
    #indexExpo {
        padding: 0 10px;
    }

    #indexExpoLeft, #indexExpoRight {
        margin-bottom: 20px;
    }

    .indexExpoList li {
        overflow: auto;
        border-bottom: 1px solid #e0e0e0;
        padding: 10px 0;
    }

        .indexExpoList li:first-child {
            padding-top: 0;
        }

        .indexExpoList li div.indexExpoListLeft {
            float: left;
            width: 80px;
            border: 1px solid #e0e0e0;
        }

        .indexExpoList li div.indexExpoListRight {
            width: auto;
            margin-left: 90px;
        }

        .indexExpoList li h4 {
            color: #093969;
        }

        .indexExpoList li .italic {
            width: auto;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            font-size: 13px;
        }

        .indexExpoList li div.indexNewsRight h4 {
            margin-top: 10px;
        }
}