﻿
section {
    letter-spacing: 1px;
}


/*聯絡客服.回首頁*/
#pattern_Group {
    width: 100px;
    /*position: absolute;*/
    float: right;
    padding-top: 5px;
    padding-right: 10px;
    text-align: center;
    cursor: pointer;
    z-index: 1;
}


    #pattern_Group img {
        width: 25px;
    }


#contact #contact_mobile, .mobile #contact #contact_pc { /*聯絡客服*/
    display: none;
}

.mobile #contact #contact_mobile {
    display: inline-block;
}


section {
    font-family: Arial, Helvetica, "微軟正黑體", "Microsoft JhengHei", sans-serif;
    width: 1000px;
    margin: auto;
    background-color: #fff;
    font-size: 15px;
    border-top: none;
    position: relative;
    /*overflow:hidden;*/ /*不可加，否則toolBer的 sticky 會失效*/
}

#showad {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

.colorbox {
    background-color: #F7F8F8;
    padding: 5px 0 10px;
}


.titletext {
    text-align: center;
    font-size: 20px;
    padding-top: 10px;
}

#websale img {
    width: 100%;
}

#imageStylebox {
    width: 90%;
    margin: 3% 5%;
}

    #imageStylebox #imgLeft {
        width: 49%;
        display: inline-block;
        padding: 0 8%;
        box-sizing: border-box;
        vertical-align: middle;
        text-align: center;
    }

    #imageStylebox #imgRight {
        width: 49%;
        display: inline-block;
        vertical-align: middle;
        text-align: center;
    }

        #imageStylebox #imgLeft img, #imageStylebox #imgRight img {
            width: 100%;
        }

        #imageStylebox #imgLeft p, #imageStylebox #imgRight p {
            display: inline-block;
            border-bottom: #000 solid 1px;
            color: #000;
            font-size: 0.9em;
        }

#adImgBox .adImg p, #wikigoods .adImg p {
    display: inline-block;
    border-bottom: #000 solid 1px;
    color: #000;
    font-size: 0.9em;
}


#wordboardbox {
    float: left;
    width: 92%;
    background-color: #4d4948;
    color: #fff;
    padding: 4%;
}

    #wordboardbox a {
        color: #FFF;
    }

    #wordboardbox .imageBoard img {
        width: 100%;
    }

    #wordboardbox .gIcon {
        display: inline-block;
        width: 45%;
        margin: 5px 10px;
        padding: 2px 10px;
        line-height: 20px;
        font-size: 14px;
    }

        #wordboardbox .gIcon img {
            width: 100%;
        }

#adSlideImg {
    width: 100%;
    margin: 3% 0;
    text-align: center;
}


/***swiper***/
#adImgBox .swiper-slide, #wikigoods .swiper-slide {
    flex-shrink: 0;
    width: 29%;
    position: relative;
    transition-property: transform;
}


/*點點*/
#adSlideImg span.swiper-pagination-bullet-active {
    opacity: 1;
    background: #ccc;
}

#adSlideImg .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: 100%;
    background: #000;
    opacity: 0.5;
    border: 0.5px solid #ccc;
}

/*左右*/
#adImgBox .swiper-button-next, #adImgBox .swiper-button-prev {
    color: #3E3A39;
    top: 160px;
    text-shadow: 2px 2px 10px #efefef;
}

    #adImgBox .swiper-button-next:after, #adImgBox .swiper-button-prev:after {
        font-size: 50px;
    }

/***swiper結束***/



/*bottombanner*/
#adImgBox {
    text-align: center;
    margin: 0 3%;
}

#wikigoods {
    text-align: center;
    margin: 3% 0 2%;
}

    #adImgBox .adImg, #wikigoods .adImg {
        padding: 0 2px 0 0;
    }

        #adImgBox .adImg img, #wikigoods .adImg img {
            width: 100%;
        }

/*wikiWordbox*/
#wikibox {
    border: 5px #000 solid;
    padding: 1% 3% 0;
    margin: 0 3% 3%;
}

    #wikibox div {
        text-align: justify;
        text-justify: inter-ideograph;
    }

    #wikibox .swiper-button-next, #wikibox .swiper-button-prev {
        color: #3E3A39;
        top: 110px;
        text-shadow: 2px 2px 10px #efefef;
    }

/*video*/
.videobox, .videoYoutube {
    width: 70%;
    margin: 0 auto 5%;
}

    .videobox video {
        width: 100%;
    }

    .videobox p {
        margin: 2% 0 5%;
        color: #000;
    }

.clear {
    clear: both;
}

#today {
    display: none;
    position: fixed;
    top: 70px;
    z-index: 3;
    overflow: hidden;
}

    #today #todayAct {
        cursor: pointer;
        width: 240px;
        height: 400px;
        position: relative;
    }

        #today #todayAct #todayTag {
            width: 52px;
            height: 150px;
            position: absolute;
            z-index: 3;
            top: 0;
            left: 175px;
            background-image: url(../images/todaytitle.png);
            background-size: cover;
        }

            #today #todayAct #todayTag img {
                width: 100%;
            }

        #today #todayAct #todayBg {
            position: absolute;
            z-index: 2;
            top: 0px;
        }


            #today #todayAct #todayBg img {
            }

        #today #todayAct .slideIcon {
            position: absolute;
            top: 8%;
            left: 32%;
        }

        #today #todayAct #slideIconpic {
            position: absolute;
            top: 60%;
            left: 8%;
            width: 150px;
        }


@media screen and (max-width: 800px) {

    section.mobile {
        width: 100%;
        position: relative;
    }

    #pattern_Group {
        width: 30px;
    }

    #showad {
        width: 100%;
        padding: 0;
    }

    .colorbox {
        background-color: #F7F8F8;
        padding: 1% 0;
    }

    .titletext {
        padding: 0;
    }

    /*sale*/
    #saleImg {
        margin: 0 3%;
        padding: 0;
        box-sizing: border-box;
        overflow: hidden;
    }

        #saleImg img {
            width: 130%;
        }


    /*mainboard*/
    #adSlideImg {
        width: 94%;
        margin: 3% auto;
    }


        #adSlideImg .adSlideImg img {
            width: 100%;
        }

    /*bottomboard*/
    #adImgBox {
        margin: 0 4%;
    }

        #adImgBox .adImg, #wikigoods .adImg {
            /*text-align: center;*/
            padding: 0;
        }

        #adImgBox .swiper-slide {
            flex-shrink: 0;
            width: 40%;
            height: 100%;
            position: relative;
            transition-property: transform;
        }

        #adImgBox .swiper-button-next, #adImgBox .swiper-button-prev, #wikibox .swiper-button-next, #wikibox .swiper-button-prev {
            display: none;
        }


    #wikigoods .swiper-slide {
        flex-shrink: 0;
        width: 60%;
        height: 100%;
        position: relative;
        transition-property: transform;
    }


    #adImgBox .adImg img, #wikigoods .adImg img {
        width: 100%;
    }


    /*wordboard*/
    .titletext_1 {
        padding: 8% 0 0;
    }

    #wordboardbox {
        float: none;
        width: 100%;
        padding: 2% 2% 8%;
        box-sizing: border-box;
    }

        #wordboardbox .gIcon {
            width: 100%;
            margin: 2% 0;
            box-sizing: border-box;
            color: #FFF;
            opacity: 1;
            filter: alpha(opacity = 100);
        }


    /*video*/
    .videobox, .videoYoutube {
        width: 94%;
        margin: 0 3% 8%;
    }


    /*todayAct*/

    #todayAct #todayTag {
        width: 50%;
        left: 0;
    }

    #imageStylebox {
        width: 100%;
        margin: 0;
    }

        #imageStylebox #imgLeft {
            width: 100%;
            padding: 0 10% 5%;
        }

        #imageStylebox #imgRight {
            width: 100%;
            padding: 0 10% 3%;
            box-sizing: border-box;
        }
}
