@charset "utf-8";
/* CSS Document */
*, body, html{ margin:0; padding:0;}
html,
body {
    width: 100%;
    height: 100%;
}

body {
    font-family: "微軟正黑體",'Helvetica Neue',Helvetica,Arial,sans-serif;
	background:#200C0E;
}
img{vertical-align: middle;}
.relative{position:relative;}
.conatinera{ position:relative; max-width:1100px; margin:0 auto; padding:10px; border:#8F7628 solid 1px;background:#200C0E;box-shadow: 6px 6px 10px #000;}
.img100 img{width:100%; height:auto}
.conatiner-1{ position:relative;}
.conatiner-2{ position:relative;}
.row {
	margin: 0px;
}
.row:after {
	content: '';
	display: table;
	clear: both;
}
.col-l {
	float: left;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 0px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.col-r {
	float: left;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 0px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}


header {
    position: relative;
    width: 100%;
    min-height: 100%;
    text-align: center;
    color: #fff;
    background-image: url(../images/bg1.jpg);
    background-position: right center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
	overflow:hidden !important;
}


.pd1-1{ position:absolute; top:20%; left:5%; width:50%; z-index:10;}
.pd1-2{position: absolute; top:50%;transform:translateY(-50%); left:25%; z-index:5;}
.pd1-3{ position:absolute; bottom:20px; left:10%;z-index:7;}
.pd1-4{ position:absolute; bottom:15px; right:10%;z-index:7;}
.pd1-2 img{ width:100%; height:auto;max-width:917px;}
.pd1-1 img{ width:100%; height:auto;max-width:420px;}

.pd2-title{ position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width:39.363%}
.pd2-title img{ width:100%; height:auto;}

.sec4-1{ position:absolute; width:53%; left:23%; top:5%;}
.sec4-2{ position:absolute; width:12.545%; right:5%; top:18%;}
.sec4-31{ position:absolute; width:42.454%; right:0%; top:30%;}
.sec4-32{ position:absolute; width:42.636%; right:0%; top:44%;}
.sec4-33{ position:absolute; width:48.09%; right:0%; top:58%;}
.sec4-41{ position:absolute; width:22.273%; left:10%; bottom:5%;}
.sec4-42{ position:absolute; width:22.273%; left:39.45%; bottom:5%;}
.sec4-43{ position:absolute; width:22.273%; left:69.1%; bottom:5%;}
.sec4-1 img, .sec4-2 img, .sec4-31 img, .sec4-32 img, .sec4-33 img, .sec4-41 img, .sec4-42 img, .sec4-43 img{width:100%; height:auto;}

.sec5-1{ position:absolute; width:68.91%; left:15.545%; top:5%;}
.sec5-2{ position:absolute; width:76%; right:12%; bottom:10%;}
.sec5-1 img, .sec5-2 img{width:100%; height:auto;}

.sec6-1{ position:absolute; width:64.818%; left:17.591%; top:5%;}
.sec6-21{ position:absolute; width:26.454%; left:20%; top:13%;}
.sec6-22{ position:absolute; width:20.818%; right:22%; top:13%;}
.sec6-3{ position:absolute; width:69.82%; right:15.1%; top:46%;}
.sec6-51{ position:absolute; width:41.455%; left:5.73%; top:60%;}
.sec6-52{ position:absolute; width:36.91%; right:16.1%; top:69%;}
.sec6-61{ position:absolute; width:25.55%; left:18%; bottom:4%;}
.sec6-62{ position:absolute; width:25.55%; right:18%; bottom:4%;}
.sec6-1 img, .sec6-21 img, .sec6-22 img, .sec6-3 img, .sec6-4 img, .sec6-51 img, .sec6-52 img, .sec6-61 img, .sec6-62 img{width:100%; height:auto;}


@media only screen and (max-width: 1100px) {
	.conatinera{ position:relative; max-width:1100px; margin:0 auto; padding:0px; border:none;}
}
/* Styles for Portrait screen 直 */
@media all and (orientation:portrait) and (max-width: 1024px) {
	.pd1-2{position: absolute; top:60%;transform:translateY(-50%); left:auto; right:-20%; z-index:5;}
}

/* Styles for Landscape screen 橫 */
@media all and (orientation:landscape) {

}


/*直720*/
@media all and (orientation:portrait) and (max-width: 720px) {
	.pd1-2{position: absolute; top:50%;transform:translateY(-50%); left:auto; right:-20%; z-index:5;}
	.pd1-3{ position:absolute; bottom:20px; left:3%; width:47%;}
	.pd1-4{ position:absolute; bottom:15px; right:3%; width:47%;}
	.pd1-3 img{ width:100%; height:auto; max-width:238px;}
	.pd1-4 img{ width:100%; height:auto; max-width:262px;}
}
/*橫720*/
@media all and (orientation:landscape) and (max-width: 720px) {
	.pd1-1{ position:absolute; top:15%; left:5%; width:40%; z-index:10;}
	.pd1-2{position: absolute; top:0%; transform:translateY(0%); width:80%; left:auto; right:-10%; z-index:5;}
	.pd1-3{ position:absolute; bottom:20px; left:3%; width:35%;}
	.pd1-4{ position:absolute; bottom:15px; right:3%; width:35%;}
	.pd1-3 img{ width:100%; height:auto; max-width:180px;}
	.pd1-4 img{ width:100%; height:auto; max-width:180px;}
}
/* Styles for Portrait screen 直 */
@media all and (orientation:portrait) and (max-width: 480px) {
	.pd1-1{ position:absolute; top:5%; left:15%; width:70%; z-index:10;}
	.pd1-2{position: absolute; top:70%; left:auto; right:-10%; z-index:5;}
	.pd1-3{ position:absolute; bottom:20px; left:3%; width:44%}
	.pd1-4{ position:absolute; bottom:15px;  right:3%;width:44%}
	.pd1-3 img{ width:100%; height:auto; max-width:238px;}
	.pd1-4 img{ width:100%; height:auto; max-width:262px;}
}
/* Styles for Portrait screen 直 */
/*@media all and (orientation:portrait) and (max-width: 540px) {
	.pd1-2{position: absolute; top:50%;transform:translateY(-50%); left:auto; right:-20%; z-index:5;}
	.pd1-3{ position:absolute; bottom:20px; left:3%; width:44%}
	.pd1-4{ position:absolute; bottom:15px;  right:3%;width:44%}
	.pd1-3 img{ width:100%; height:auto; max-width:238px;}
	.pd1-4 img{ width:100%; height:auto; max-width:262px;}
}*/