#swiper1{
    /*position:relative;*/
}
    #swiper1 div#swiper1_Text{
        position:absolute;left:0;right:0;top:0;bottom:0;
        z-index:2;
        text-align:center;
        padding:13% 14% 11%;
    }
        #swiper1 div#swiper1_Text img{
            display:block;
            margin:0 auto;
            height:auto;
            max-height:100%;
        }
#characteristics{
    padding:110px 20px;
    background:#fff;
}
    #characteristics ul{        
        margin:0;
        padding:0;
        list-style:none;
        text-align:center;
        font-size:0;
    }
        #characteristics ul li{
            display:inline-block;
            width:25%;
            vertical-align:top;
            padding:0 40px;
        }
            #characteristics ul li h3.title{
                font-size:21px;
                color:#575777;
                font-weight:600;
                margin:0;
                text-align:center;
                margin-bottom:10px;
            }
                #characteristics ul li h3.title span.icons{}
                    #characteristics ul li h3.title span.icons img{}
                #characteristics ul li h3.title span.text{}
            #characteristics ul li p.text{            
                font-size:18px;
                color:#2d2d2d;
                line-height:25px;
                margin:0;
                text-align:left;
            }
#explain{}
    #explain ul{
        margin:0;
        padding:0;
        font-size:0;
        text-align:center;
    }
        #explain ul li{
            display:inline-block;
            width:33.33%;
            /*border-right:1px solid #fff;*/
            /*border-bottom:1px solid #fff;*/
            vertical-align:top;
            position:relative;
        }
            #explain ul li a{
                display:block;
                position:absolute;left:0;right:0;top:0;bottom:0;
                /*max-height:384px;
                background-size:cover;*/
                /*padding:8% 10%;*/
                color:#fff;
                border-right:1px solid #fff;
            }
            #explain ul li:last-child a{
                border-right:none;
            }
            #explain ul li a img{
                /*position:absolute;left:0;right:0;top:0;bottom:0;*/
                height:auto;
                /*max-height:100%;*/
            }
            /*#explain ul li:nth-child(1) a{background:url('../images/home/explain1.png') 50% 50% no-repeat;}
            #explain ul li:nth-child(2) a{background:url('../images/home/explain2.png') 50% 50% no-repeat;}
            #explain ul li:nth-child(3) a{background:url('../images/home/explain3.png') 50% 50% no-repeat;}*/
                #explain ul li .coverBG{
                    opacity:1;
                    position:absolute;left:0;right:0;top:0;bottom:0;
                    background:rgba(0, 0, 0, 0.7);
                    -webkit-transition:0.25s ease-in-out;
                    -moz-transition:0.25s ease-in-out;
                    -o-transition:0.25s ease-in-out;
                    transition:0.25s ease-in-out;
                }
                #explain ul li:hover .coverBG{
                    opacity:0;            
                    -webkit-transition:0.25s ease-in-out;
                    -moz-transition:0.25s ease-in-out;
                    -o-transition:0.25s ease-in-out;
                    transition:0.25s ease-in-out;
                }
                #explain ul li a .content{
                    padding:14% 16% 0;
                    position:relative;
                    position:absolute;left:0;right:0;top:0;bottom:0;
                    z-index:1;
                    text-align:left;
                }
                #explain ul li:hover a .content{
                    opacity:0;
                }
                #explain ul li a h3.title{
                    font-size:21px;
                    font-family:'Noto Serif TC', serif;
                    margin:0 0 20px;
                    font-weight:normal;
                }
                #explain ul li a p.text{
                    font-size:18px;
                    line-height:25px;
                    margin:0;
                    /*height:125px;*/
                }
                #explain ul li a span.more{
                    display:block;
                    text-align:right;
                    background:url('../images/home/explain_icon_more.png') right 50% no-repeat;
                    padding-right:10px;
                    font-size:18px;
                    margin-top:30px;
                }


@media screen and (max-width:1660px){
    #explain ul li a .content{
        padding:10% 15% 0;
    }
}
@media screen and (max-width:1500px){
    #explain ul li a .content{
        padding:8% 12% 0;
    }
}
@media screen and (max-width:1400px){
    #characteristics ul li{
        width:40%;
        padding:0 7%;
        margin:0 1%;
    }
    #characteristics ul li:nth-child(3),
    #characteristics ul li:nth-child(4){
        margin-top:40px;
    }
    #explain ul li a h3.title{
        margin-bottom:10px;
    }
    #explain ul li a .content{
        padding:7% 10% 0;
    }
        #explain ul li a span.more{
            margin-top:20px;
        }
}
@media screen and (max-width:1235px){
    #explain ul li a .content{
        padding:6% 10% 0;
    }
        #explain ul li a p.text{
            font-size:17px;
        }
}
@media screen and (max-width:1220px){
    #swiper1 div#swiper1_Text{
        padding:12% 11% 10%;
    }
    #characteristics ul li{
        width:40%;
        padding:0 5%;
    }
}
@media screen and (max-width:1190px){
    #explain ul li{
        width:50%;
    }
    #explain ul li:last-child{
        width:100%;

    }
        #explain ul li:nth-child(2) a{
            border-right:none;
        }
        #explain ul li:last-child a{
            border-top:1px solid #fff;
        }
            #explain ul li a .content{
                padding:13% 12% 0;
            }
}
@media screen and (max-width:1090px){
    #explain ul li a .content{
        padding:10% 12% 0;
    }
}
@media screen and (max-width:960px){
    #characteristics ul li{
        width:45%;
        padding:0 4%;
    }
    #explain ul li a .content{
        padding:9% 10% 0;
    }
}
@media screen and (max-width:860px){
    #explain ul li a .content{
        padding:6% 8% 0;
    }
}
@media screen and (max-width:795px){
    #explain ul li a .content{
        padding:5% 6% 0;
    }
        #explain ul li a span.more{
            margin-top:15px;
            font-size:16px;
        }
}
@media screen and (max-width:785px){
    #characteristics{
        padding:60px 8%;
    }
        #characteristics ul li,
        #characteristics ul li:nth-child(3),
        #characteristics ul li:nth-child(4){
            width:100%;
            padding:0;
            margin-top:60px;
        }
        #characteristics ul li:first-child{
            margin-top:0;
        }
}
@media screen and (max-width:768px) {/*iPad*/
    #characteristics ul li h3.title,
    #characteristics ul li p.text,
    #explain ul li a h3.title,
    #explain ul li a p.text,
    footer ul#BottomMenuList li:last-child p.text{
        padding-left: 5px;
    }
}
@media screen and (max-width:750px){
    #explain ul li{
        width:100%;
    }
        #explain ul li a{
            border-right:none;
            border-top:2px solid #5d5d5d;
        }
        #explain ul li:first-child a{
            border-top:none;
        }
        #explain ul li img{
            width:100%;
        }
        #explain ul li a .content{
            padding:14% 9% 0;
        }
            #explain ul li a h3.title{
                margin-bottom:20px;
            }
            #explain ul li a p.text{
                font-size:18px;
            }
            #explain ul li a span.more{
                margin-top:30px;
                font-size:18px;
            }
}
@media screen and (max-width:580px){
    #explain ul li a .content{
        padding-top:8%;
    }
}
@media screen and (max-width:560px){
    #swiper1 div#swiper1_Text{
        padding:8% 8% 7%;
    }
}
@media screen and (max-width:470px){
    #explain ul li a .content{
        padding-top:5%;
    }
        #explain ul li a h3.title{
            margin-bottom:15px;
        }
        #explain ul li a span.more{
            margin-top:15px;
            font-size:17px;
        }
}
@media screen and (max-width:420px){
    #characteristics{
        padding:50px 6%;
    }
    #explain ul li{
        overflow:hidden;
    }
        #explain ul li img{
            width:500px;
            max-width:none;
            margin:0 auto 0 -16%;
        }
        #explain ul li a .content{
            padding:8% 6% 0;

        }
}
@media screen and (max-width:320px){
    #explain ul li a h3.title{
        margin-bottom:10px;
    }
    #explain ul li a span.more{
        margin-top:12px;
        font-size:16px;
    }
}