@charset "utf-8";
* {vertical-align: top; }

.kvBox{
	margin:0 auto -1px;
	padding:0;
	background:#490502 url(../images/bg1.jpg) center top no-repeat;
}
.kvBox .max1400Box>img{
	display: block;
	width:100%;
	margin:0 auto;
}
.max1400Box{
    width: 100%;
    max-width:1400px;
	margin:0 auto;
	padding:0px;
}

.proBox{
	
	margin:0 auto 30px;
	padding:10px;
	background-color:#fff;
	overflow: hidden;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
.bg1{
	background:url(../images/bg1.jpg) top center repeat-y;
}
/* c23模組專用 */

q:before,
q:after {
    content: "";
}

*+html .carrier li {
    min-height: 1%;
}

.carrier li:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.intro-anchors {
    display: none;
}

.carrier {
	max-width:90%;
	margin:0 auto;
	padding:0;
    font: normal 14px/1.4 "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;
    text-align: left;
}

.carrier > h4 {
    width: 96%;
    margin: 0 auto 8px;
    display: block;
    clear: both;
    text-align: left;
    padding:0 0 0 22px;
    color:#2b9fe2;
    font: bold 24px/1.4 "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;
    background:url(../images/li.jpg) left center no-repeat;
}

.carrier > ul {
    padding: 5px 0 0;
    margin: 0 auto 24px;
    width: 96%;
}

.carrier > ul > li{
    list-style-type: none;
    padding: 1em;
    margin:0 auto 24px;
    font: normal 16px/1.4 "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;
    background: url(images/tota1_icon1.gif) no-repeat 10px 10px;
    border:1px dotted #ededed;
    box-shadow: 0 6px 15px #ededed;
    border-radius: 5px;
    background-color:#faf6e6;
    transition: all 0.5s ease-in-out;
}
.carrier ul>li:hover {
    box-shadow: 0 0 0 #ededed;
    background-color:#fff;
    border:1px dotted #ccc;

}
/*.carrier li:last-child{border:none;}*/

.carrier ul>li>a {
    text-decoration: none;
    font: normal 16px/1.4 "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;
    color: #ff7e00;
    letter-spacing: 2px;
    display: block;
}

.carrier ul>li>a>strong {
    font: 700 20px/1.4 "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;
    display: block;
    color: #554b35;
    margin: 0 auto 0 -5px;
}

.carrier ul>li>a:hover strong {
    color: #8a3400;
    text-decoration: none;
}


.carrier .box-head {
    display: none;
    /*border-bottom:2px solid #800033; margin-top:-4px;*/
}


.carrier ul>li>a>em.price {
    display: inline-block;
    font: normal 100%/1.4 "微軟正黑體", "Microsoft JhengHei", Verdana, sans-serif;
    color: #f91d56;
    float: right;
}

.carrier ul>li>a>em.price span,
.carrier ul>li>a>em.price var {
    font: 700 126%/1.4  Verdana,arial, "微軟正黑體",sans-serif;
    letter-spacing: -1px;
}

.scroll2top:link,
.scroll2top:visited {
    background: url(images/gotop1.png) no-repeat 0 0;
    height: 84px;
    width: 79px;
    margin-left: 928px;
    bottom: 90px;
}

.scroll2top:hover {
    background: url(images/gotop.png) no-repeat 0 -90px;
}

.group-type-ph{font-size: 0px;}


.ph{
    font-size: 16px; width: 98%; margin:1%; display: inline-block;
    border:1px dotted #ededed;
    box-shadow: 0 6px 15px #ededed;
    border-radius: 5px;
    background-color:#faf6e6;
    transition: all 0.5s ease-in-out;
    position: relative;
    vertical-align:top;
}
.ph > a {text-decoration: none;}
.ph:hover{
    box-shadow: 0 0 0 #ededed;
    background-color:#fff;
    border:1px dotted #ccc;
}




.ph-title{margin:10px; color:#554b35; font:700 20px/1.4 "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;}
.ph-detail{ margin:0px 10px 40px; color:#ff7e00; font: normal 16px/1.4 "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;}
.price{position: absolute;bottom: 10px; right: 10px; font-size: 18px;}
.price > span{font-size: 20px;}
.price i{vertical-align: bottom;}
.ph-img{width:100%;}
.ph-img > img{width:100%;}




.ancMenu{background-color: rgba(0, 0, 0, 0.8); text-align: center; position: sticky; top:0px; z-index: 100;}
.ancMenu > li{transition: .5s; display: inline-block; cursor: pointer;color: #fff; padding: 10px;font-size: 16px;}
.ancMenu > li:hover{color:#2b9fe2}



/* menu區域 */
#menu { position: sticky;/*position: relative;*/ top:0px; z-index: 100; margin:auto; list-style:none; box-sizing: border-box; padding: 7px 0; width:100%; text-align: center; background:rgba(0,36,80,.8);}
#menu li span{margin:0; padding:5px 15px;  display:block; text-decoration:none; font-size:24px; color:inherit; font-family:"微軟正黑體"; font-weight:600; cursor: pointer;}
#menu li {margin:0; padding:0; display:inline-block; position:relative; color:#03253e; background: #fff; border-radius: 10px; font-size: 20px; font-family: "微軟正黑體"; font-weight: 600;text-decoration: none; cursor: pointer;}
#menu > li { padding-left:0px; margin-right:0px; }
#menu > li:hover { background: none; color: #fff;}
#menu li .ul { padding:5px 0; list-style:none;/* float:left; */white-space:nowrap; display:none; position:absolute; left:-68px; }
#menu li .ul li {float:none; display:inline-block;  background:#03253e;color: #fff; margin:10px 3px 0 0; border-radius: 10px;padding: 5px 10px 5px 10px;}
#menu li .ul li:hover { background: #fff; color:#03253e;box-shadow: none;}



@media screen and (max-width: 767px){
    .ph{margin-bottom: 10px;}
}
@media screen and (min-width: 768px){
    .ph{width: 48%; margin: 1%;}
    #menu li .ul {display: block;}
} 

@media screen and (min-width: 1000px){
    .ph{width: 32%; margin: 10px 5px;}
} 

@media screen and (min-width: 1415px){
    .ph{width: 300px; margin: 10px 5px;}
}