*{font-family: "微軟正黑體", Arial, Helvetica, sans-serif;}
.topBanner{width: 100%; position: relative;}
.topBanner > .bannerBG{width: 100%;display: block;}
#title{position: absolute; width:60%; top:20%; left: 20%;}
.section1{background-color: #184f9c; width: 100%; text-align: center; padding:20px 0px 0px;}
.section1{background-image: url(../img/bgtop.jpg); background-size: 100%; background-position-y: bottom; background-repeat: no-repeat;}
.section2{background-color: #0086ca; width: 100%; text-align: center; padding:20px 0px;}
.section2{background-image: url(../img/bg.jpg); background-size: 100%;}
.max1400{width: 90%; max-width: 1400px; margin:auto;}
.linkMenu{padding: 0px 0px 20px;}
.linkMenu > li{display: inline-block; position: relative;}
.linkMenu > li > a{transition: 1s; display: block; text-decoration: none; font-size: 20px; letter-spacing: 1px; padding:5px 20px; margin:10px; color:#fff; background-color: #e60013; border-radius: 50px;}
.linkMenu > li > a:hover{background-color: #fff; color:#184f9c;}
.prodArea{margin:0 auto 20px auto; width: 100%; max-width: 1200px;}
.prodArea > h4{display: block; width: 150px; color:#000; padding: 5px; margin: 10px auto; position: relative;font-size: 24px;}
.prodArea > h4:before{content: '';display: block;position: absolute;width: 30px;height: 25px;background-image: url(../img/titleIcon1.png);bottom: 5px;left: -10px;}
.prodArea > h4:after{content: '';display: block;position: absolute;width: 30px;height: 45px;background-image: url(../img/titleIcon2.png);bottom: 5px;right: -10px;}
.group-type-ph{font-size: 0px;}
.ph{position: relative; width: 94%; margin:3%; display:inline-block; overflow: hidden; font-size: 16px; background-color: #fff;}
.ph:hover{box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.1)}
.ph > a{text-decoration: none;}
.ph-img,.ph-img > img{width: 100%;}
.ph-title:before{content:'';display: block; position: absolute;top:0px; left: 0px; background-color: #e60013;width: 100%; height: 5px;}
.ph-title,.ph-detail{text-align: justify;position: relative;}
.ph-title{font-size: 20px; vertical-align:middle; color:#333; font-weight: 600;padding: 10px 10px 0px;}
.ph-detail{font-size:16px; color:#184f9c; font-weight: 300; padding:10px 10px 30px;}
.price{position: absolute; color:#e60013; bottom:10px; right:10px; font-size: 20px;}
.price > span{font-size: 24px;}

@media only screen and (max-width:768px){
    .linkMenu{margin-top: -20px; padding-bottom: 30px;}
}
@media only screen and (min-width:769px){
    .ph{width:48%;margin: 1%}
    .linkMenu{padding: 0px 0px 100px;}
    .linkMenu > li:nth-child(odd):before{content: '';background-image: url(../img/plane.png); display: block; width: 75px; height: 36px; position: absolute; bottom: 15px; left: -65px; transform: rotateY(180deg);}
    .linkMenu > li:nth-child(even):before{content: '';background-image: url(../img/plane.png); display: block; width: 75px; height: 36px; position: absolute; bottom: 15px; right: -65px;}
}
@media only screen and (min-width:1000px){
    #title{width:40%; top:30%; left: 30%;}
    .ph{width: 31%;}
    .linkMenu{padding: 0px 0px 150px;}
}
@media only screen and (min-width:1400px){
    .ph{width: 23%;}
    .linkMenu{padding: 0px 0px 200px;}
}
@media only screen and (min-width:1900px){
    #title{ width: 731px; left: calc(50% - 365px); top:calc(50% - 144px); }
}