ShowEasy/EuroTran/WebSite/SG/css/index.css

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

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

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

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

#indexService ul li:nth-child(5) {
    background-image: url(../images/serviceEarth.svg);
}
/*----gallery-----*/
.indexGallery li a {
    display: block;
    position: relative;
}

    .indexGallery li a p {
        width: 100%;
        padding: 5px 10px;
        position: absolute;
        left: 0;
        bottom: 0;
        background: rgba(0,0,0,0.6);
        color: #FFF;
        text-align: center;
    }

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

/*-----------------------for PC-----------------------*/
@media screen and (min-width:801px) {
    /*-------------banner--------------------*/
    #bannerWrapper {
        width: 80%;
        margin: 0 auto;
    }
    /*-----------------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: #FFF;
        padding: 25px;
    }

    .indexbanner {
        position: relative;
    }
}

/*------------------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 {
        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 ul li {
            display: block;
            background-repeat: no-repeat;
            background-position: left center;
            background-size: 50px 50px;
            height: 50px;
            padding-left: 60px;
            margin-bottom: 10px;
            width: 50%;
            float: left;
        }

            #indexService ul li h3 {
                color: #333;
                font-size: 15px;
                font-weight: normal;
                /*垂直誌中*/
                height: 50px;
                display: flex;
                justify-content: center;
                flex-direction: column;
            }

            #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 20px 10px;
    }

    .indexbanner {
        position: relative;
    }
}