@charset "UTF-8";
/* CSS Document */
.bgContent h2.cate1:after{background:#f0efed url(../images/common/ic_flower.png) no-repeat top center; background-size:40px auto;}

#news {padding:20px 0 80px;}
#news table{margin:0 0 50px; width: 100%;}
#news th{font-weight:bold; font-style:italic; width:120px;}
#news th, #news td{border-bottom:1px dotted #000; padding:10px 0; vertical-align:top;}
#news table a {display: block;}
#news table a:hover {color: #ae4983;}

#intro{margin:0 auto 80px; font-size:24px; text-align:center; line-height:1.5; font-style:italic;}
#intro figure{margin:0 0 20px;}

#history{padding:60px 0 40px; margin:0 0 150px;}
#history ul{margin:0 0 80px; text-align:center;}
#history li{display:inline-block; margin:0 100px 0 0; text-align:center;}
#history li:last-of-type{margin:0;}
#history li i{font-size:24px;}
#history li:nth-of-type(1) i{color:#d17600;} 
#history li:nth-of-type(2) i{color:#006198;} 
#history li:nth-of-type(3) i{color:#008369;} 
#history li p{font-size:16px; font-weight:bold; line-height:1.4;}
#history li span{display:block;}
#history .box{position:relative;}
#history .boxCont{width:50%; float:left; min-height:600px; position:absolute; bottom:-100px; left:0;
background:url(../images/phuquoc/lichsu_img1.jpg) no-repeat center center; background-size:cover;}
#history .boxCont table{max-width:400px; width:100%; color:#fff; float:right; margin:80px 0 0 0;}
#history .boxCont th, #history .boxCont td{border-bottom:1px dotted #fff; padding:10px 0;}
#history .boxCont th{width:170px;}
#history .boxMap{width:45%; float:right;}

#stage{padding:0 20px 90px;}
#stage h3{font-style:italic; margin:0 0 50px; font-size:24px; text-align:center; text-transform:uppercase; font-weight:bold;}
#stage .boxCont{position:relative;}
#stage .line{position:absolute; left:50%; width:2px; border-right:2px dotted #000; height:100%; top:0;}
#stage .box{margin:0 0 40px;}
#stage .box:nth-last-of-type(2){margin:0;}
#stage .box:after{display:block; clear:both; height:0; visibility:hidden; content:"."; zoom:1;}
#stage .boxImg{width:48%; position:relative;}
#stage .boxImg:after{position:absolute; top:50%; width:16px; height:16px; background:#af4983; content:''; z-index:10;
border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%;}
#stage .boxImg figure figcaption {text-align: right; font-size: 12px;}
#stage .box:nth-of-type(2n) .boxImg:after{right:-4.5%; margin:-8px -8px 0 0;}
#stage .box:nth-of-type(2n+1) .boxImg:after{left:-3.9%; margin:-8px 0 0 -8px;}
#stage .boxTxt{width:48%;}
#stage .boxTxt:after{display:block; clear:both; height:0; visibility:hidden; content:"."; zoom:1;}
#stage .boxTxt .inner{max-width:400px; width:100%;}
#stage .boxTxt p{margin:0 0 10px; text-align: justify;}
#stage .boxTxt p:last-of-type{margin:0;}
#stage .box:nth-of-type(2n) .boxImg{float:left;}
#stage .box:nth-of-type(2n) .boxTxt{float:right;}
#stage .box:nth-of-type(2n+1) .boxImg{float:right;}
#stage .box:nth-of-type(2n+1) .boxTxt{float:left;}
#stage .box:nth-of-type(2n+1) .boxTxt .inner{float:right;}

@media screen and (max-width: 900px){
	#history .boxCont{min-height:1px; padding:50px 0 50px 10px; bottom:-80px;}
	#history .boxCont table{margin:0;}
}

@media screen and (max-width: 736px){
	#intro p br{display:none;}	
	#intro figure{margin:-100px 0 20px 0;}

	#history{padding:50px 0 150px; margin:0;}
	#history ul{margin:0 0 40px;}
	#history .boxCont{position:static; width:100%; margin:0 0 20px;}
	#history .boxMap{width:100%; text-align:center;}

	#stage{padding:0 10px 50px;}
	#stage .line{display:none;}
	#stage .boxImg{width:100%; max-width:480px; margin:0 auto 10px; float:none !important;}
	#stage .boxImg:after{display:none;}
	#stage .boxTxt{width:100%; float:none !important; padding:0 !important;}
}

@media screen and (max-width: 480px){
	#news{padding:30px 0 100px;}
	#news table, #news tbody, #news tr, #news th, #news td{width:100%; display:block;}
	#news th{border-bottom:none; padding:0;}
	#news td{margin:0 0 20px; padding:0 0 10px;}

	#intro{font-size:16px; margin:0 0 40px;}
	#intro figure{margin:-70px 0 10px 0;}

	#history{padding:30px 0 100px;}
	#history li{margin:0 20px 0 0;}
	#history li p{font-size:14px;}
	#history .boxCont{padding:40px 0 40px 10px;}

	#stage h3{font-size:18px; margin:0 0 20px;}
	#stage .box{margin:0 0 30px;}
}