.container{
	max-width: 1280px !important;
	    margin: 0 auto;     overflow: hidden;
}
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes flipInX {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }

  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  animation-name: flipInX;
}



.headerGroup{
	background: url(../img/headerbg.jpg) center top no-repeat;
	height: 650px;
}

.macauLogo1{
	filter: drop-shadow(0px 0px 5px #fff) drop-shadow(0px 0px 5px #fff);
	float: right;
	padding: 10px;
}

@media screen and (max-width:1380px){
	.headerGroup {
    background-size: 148%;
    height: 47vw;}
}/*media*/

@media screen and (max-width:1380px){
	.headerGroup {
   background-size: 160%;
    height: 49vw;}
}/*media*/



.bgLine{
	height: 30px;
	width: 100%;
	background-image: url('../img/bgLine.jpg');
	background-repeat: repeat-x;
}

.main{
	background-color: #faebcb;
	width: 100%;
	font-family: 微軟正黑體;
}

.mainBox{
	margin: auto;
	padding: 30px 0px;
	background-color: #faebcb;
}

.mainBox h3{
	    padding: 10px 0;
	font-size: 36px;
	line-height: 1.2;
	color: #fff;
	background-color: #1e264b;
	width: 80%;
	max-width: 530px;
	margin: auto;
	text-align: center;
	position: relative;
	margin-bottom: 20px;
}
.mainBox h3 span{color: yellow;}

.mainBox h3:before{
	content: '';
	background-image: url('../img/titleDecoLeft.png');
	position: absolute;
	width: 45px;
	height: 45px;
	left: -27px;
	bottom: -7px;
}

.mainBox h3:after{
	content: '';
	background-image: url('../img/titleDecoRight.png');
	position: absolute;
	width: 45px;
	height: 45px;
	right: -27px;
	bottom: -7px;
}
@media screen and (max-width:768px){
	.mainBox h3{
	font-size: 30px;}
}/*media*/


.mainBoxBg{
	width: 100%;
	background: top center;
	padding: 40px 0;
	background-size: cover;
}

.mainBoxBg1{
	background: url(../img/bg4.jpg) center top no-repeat;
}
.mainBoxBg2{
	background: url(../img/bg4.jpg) center bottom no-repeat;
}
@media screen and (max-width:768px){
	.mainBoxBg1 , .mainBoxBg2{background-image:none; }
}/*media*/

.insideBox{
	background-color: #fff;
	box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.3);
	padding: 10px;
	display: inline-block;
	float: left;
	text-align: justify;
	position: relative;
}
.prodType1{
	width: 100%;
	margin: 0 auto;
}
.videoBox{
	width: 100%;
	padding: 10px;
}
.videoBox img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.videoBox .fb{background:black; color: white; font-size: 18px; padding:10px; font-weight: bold;}
.videoBox .fb p:first-child{margin-bottom: 5px;}
.videoBox .fb p a{color: #8beeff; text-decoration: underline !important; transition: all 0.2s;}
.videoBox .fb p a:hover{color: #ffffcc;}

/*h4選單*/
.archBase { 
	position: relative; 
	margin:0 0 0 0; 
	padding: 0% 8% 0 8%; 
	width:100%; 
	overflow:hidden; 
	z-index: 51; 
	background: #1e264b; 
}

.archBase span { font-size: 22px; color:#fff; margin:10px; cursor: pointer;}
.archBase span:hover{
	color: #F59231;
}

.archArea { 
	position:relative; 
	z-index: 10; 
	padding: 20px 0 10px 0; 
	height: auto; 
	white-space:nowrap; 
	width: auto; 
	overflow-y: hidden; 
	overflow-x:auto;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch; 
}
.archArea::-webkit-scrollbar {background-color: #1e264b; height:10px; padding:5px;}
.archArea::-webkit-scrollbar-thumb {background-color: #3FBBE6; border-radius: 10px;}
.archArea  span{ 
	display: inline-block; 
}


/* c26 */
.group-type-ph{display: flex;     justify-content: space-around; flex-wrap: wrap;}
.ph{display: inline-block; width: 48%; position: relative;     padding: 1% 0;}

@media screen and (max-width:560px){
	.ph{width: 100%;  padding: 0;}
}/*media*/

.ph-img img{
	width: 100%;
}
.ph-title{
	font-size: 18px;
	font-weight: bold;
	color: #1e264b;
	padding: 10px 10px 0px;
}

.ph-detail{
	font-size: 16px;
	color: #ff983d;
	padding: 5px 10px 0px;
}

.ph-feature{
	font-size: 14px;
	color: #666;
	margin-bottom: 40px;
	padding: 0px 10px;
}

em.price{
	color: #ff610b;
	font-size: 16px;
	position: absolute;
    bottom: 0;
    right: 20px;
	
}
em.price span{
	font-size: 28px;
	font-weight: bold;
}

/* c26 end */

/* c23 */
.carrier h4{
	color: #fff;
	font-weight: bold;
	font-size: 30px;
	text-align: center;
	margin: 20px auto 5px;
	text-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.3);
}

.carrier li:not(.box-head) a{
	width: 100%;
	background-color: #fff;
	box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.3);
	display: block;
	margin: 15px auto;
	color: #666;
	font-size: 18px;
	position: relative;
	padding: 0 20px 50px;
}


.carrier li a strong{
	background-color: #ffa21d;
	display: block;
	font-size: 20px;
	color: #fff;
	padding: 10px 0px;
	box-sizing: border-box;
	border-bottom: 10px solid #fff;
	width: 100%;
	box-sizing: border-box;
	position: relative;
}
.carrier li a strong:before{
	content: '';
	width: 20px;
	height: 100%;
	position: absolute;
	left: -20px;
	top: 0px;
	z-index: 10;
	background-color: #ffa21d;
}

.carrier li a strong:after{
	content: '';
	width: 20px;
	height: 100%;
	position: absolute;
	right: -20px;
	top: 0px;
	z-index: 10;
	background-color: #ffa21d;
}


.intro-anchors,.carrier li.box-head p,.carrier img{
	display: none;
}
/* c23 end */

/* 隱藏好康快報 */
#anc_1:link {
	display: none;
}


.fullWidth{
	width: 100%;
	max-width: 1280px;
}
.adBox{width: 100%;}
.adBox a img{width: 100%;}

.sticky{
	display: none;
}

.mobileMenu,.sticky_m{
	display: none;
}

.webInfoBox{
	width: 100%;
	padding: 20px 10px;
	vertical-align: middle;
	text-align: center;
	position: relative;
	align-items:center;
}

.infoPhoto{
	display: inline-block;
	width: 100%;
	max-width: 400px;
	border-radius: 50%;
	border: 4px dotted #1F274A;
	text-align: center;
	vertical-align: middle;
}
.infoPhoto div{
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 3px solid #8FDCFD;
	overflow: hidden;
	vertical-align: middle;
}

.infoPhoto div img{
	width: 100%;
	vertical-align: middle;
}

.infoText{
	display: inline-block;
	width: 100%;
	padding: 20px 5px;
	vertical-align: middle;
	text-align: justify;
}
.infoTitle{
	background-color: #ffa21d;
	color: #fff;
	font-size: 28px;
	padding: 5px;
	font-weight: bold;
	display: block;
	text-align: center;
	border-radius: 50px;
	margin: 10px 10px 20px;
	vertical-align: middle;
}
.infoDetail{
	font-size: 16px;
	color: #666;
	line-height: 24px;
	width: 100%;
	padding: 10px;
}

.forPC{
	display: none;
}


/* mobile only-for fix */
@media only screen and (max-width: 767px) {
	.macauLogo{
		margin: auto;
		text-align: center;
	}
	.macauLogo1 {
        float: none;
    padding: 0;
    display: inline-block;
    width: 40vw;
}
	.macauLogo1 img,.macauLogo2 img{
		height: 100%; width: 100%;
	}
	.bgLine{
		height: 20px;
		width: 100%;
		background-image: url('../img/bgLine.jpg');
		background-repeat: repeat-x;
		background-size: contain;
	}
	.videoBox{
		margin-bottom: 10px;
	}
	.sticky div{
		display: none;
	}
	.mobileMenu{
		display: inline-block; 
		position: fixed; 
		top: 40px; 
		right: 0; 
		width: 40px; 
		height: 40px;
		font-size: 26px; 
		color: #fff; 
		text-align: center;  
		background: rgba(0,0,0,0.5); 
		z-index: 9999;
	}
	.sticky_m{
		display: none;
		background-color: rgba(0, 0, 0, 0.8);
		color: #fff;
		z-index: 99;
		position: fixed;
		top: 0px;
		left: 100%;
		font-size: 20px;
		line-height: 30px;
		height: 100vh;
		width: 60%;
		vertical-align: middle;
		text-align: center;
		padding: 80px 10% 60px 0px;
	}
	.sticky_m div{
		margin: 30px;
		cursor: pointer;
	}
	.infoTitle{
		margin: 10px 0px;
		font-size: 26px;
	}

}

.section1{
		width: 92%;
    margin: 0 auto;
	}

/* PC */
@media only screen and (min-width: 768px) {
	.headerbg{
		background-size: auto;
		height: 630px;
	}
	
	/*.macauLogo{
		margin-right: 10px;
		text-align: right;
	}
	.macauLogo1,.macauLogo2{
		display: inline-block;
		padding: 10px 20px;
	}*/
	.mainBox{
		margin: auto;
		padding: 60px 0px 0;

	}

	.mainBox h3{
		font-size: 40px;
	}

	.section1{
		display: flex;       width: 96%;
	}

	.videoBox{
		width: 33%;
		padding: 10px;
		margin-right: 1%;
		display: table-cell;

	}
	.prodType1{
		width: 66%;
		display: table-cell;
	}
	.bgDeco{
		width: 100%;
		    max-width: 1400px;
		margin: auto;
		background-image: url('../img/bgDeco2.png');
		background-repeat: repeat-y;
		background-size: contain;
		background-position: center;
	}

	.sticky{
		width: 200px;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.8);
		display: block;
		text-align: center;
		font-size: 18px;
		padding: 20px;
		position: fixed;
		right: 10px;
		top: 100px;
		z-index: 80;
		display: none;
	}
	.sticky div{
		margin: 10px auto;
		cursor: pointer;
	}
	.sticky div:hover{
		color: #ff983d;
		transition: 0.5s
	}
	.mobileMenu,.sticky_m{
		display: none;
		position: fixed;
		z-index: -999;
	}
	.infoPhoto{
		width: 48%;
		margin: 1%;
	}
	.infoText{
		width: 48%;
		/* margin: 50px 0px 10px; */
		position: relative;
	}
	.webInfoBox{
    	flex-direction: column-reverse;
	}
	.forPC{
		display: block;
	}
	.forM{
		display: none;
	}
	.infoText:after{
		content: '';
		width: 386px;
		height: 237px;
		background: url('../img/arrow.png');
		position: absolute;
		top: 200px;
		left: -50px;
	}
	.webInfoBox:nth-child(2n+2) .infoText:after{
		content: '';
		width: 386px;
		height: 237px;
		background: url('../img/arrow.png');
		position: absolute;
		top: 200px;
		left: 200px;
		transform: perspective(100px) rotateY(180deg);
	}
	.webInfoBox:last-child .infoText:after{
		content: '';
		display: none;
	}
		
}
@media only screen and (min-width: 1200px){
	
	.macauLogo1,.macauLogo2{
		display: inline-block;
		padding: 10px;
		    float: right;
	}
}

/* PC-L */
@media only screen and (min-width: 1400px){
	
	.macauLogo2{
		position: absolute;
		top: 500px;
		right: 0px;
	}
	
}