*{
	margin:0;
	padding:0;
	-webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

html,body{
	overflow:auto;!important;
	background:url(img-bg-ll02.gif);
	background-color:#f4f1e8;
	
}

#med_civi{
	width:100%;
	max-width:1920px;
	min-width:320px;
	margin:0 auto;
	overflow:hidden;
	background:url(img_bk_egypt.png) repeat-y left top,
	           url(img_bk_egypt.png) repeat-y left top;
	background-size:5.21%, 5.21%;
	background-position:left top, right top;	
	background-color:#f4f1e8;
	position:relative;
}


/* ==================== 主視覺 ==================== */

#med_civi .goto_line{
	width: 10%;
	position: fixed;
	right: 30px;
	bottom: 15vh;
	z-index: 60;
	
	
}

#med_civi .goto_line a{
	display: block;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	background: url("img_goto_line.png") no-repeat left top;
	background-size: 100%;
	-webkit-filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.3));
    filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.3));
}

#med_civi .main-top{
	width:100%;
	height: 0;
	padding-bottom: 57.3%;
	margin-bottom:50px;
	position:relative;
}


#med_civi .main-top .dec001{
	width:11.46%;
	height:0;
	padding-bottom:6.26%;
	background:url(img_dec_left_top.png) no-repeat top center;
	background-size:100%;
	animation-name:dec001;
	animation-fill-mode:forwards;/* 動畫播放前後模式:動畫結束後，保持在最後一個影格狀態。 */
	animation-duration:2s;
	
	position:absolute;
	top:5px;
	left:50px;
	z-index:50;
	opacity:0;
}

	@keyframes dec001{
		
    from{
		opacity:0;
    }
    to{
		opacity:1;
    }
	
	
}

#med_civi .main-top .dec002{
	width:41.7%;
	height:0;
	padding-bottom:13.03125%;
	background:url(img_dec_right_top.png) no-repeat top center;
	background-size:100%;
	
	animation-name:dec002;
	animation-fill-mode:forwards;
	animation-duration:2s;

	position:absolute;
	top: -5%;
	right: -2%;
	z-index: 50;
	opacity:0;
	
}

	@keyframes dec002{
		
    from{
		opacity:0;
    }
    to{
		opacity:1;
    }
	
	
}

#med_civi .main-top .dec003{
	width: 16.7%;
	height:0;
	padding-bottom: 12.525%;
	background:url(img_dec_left_egypt01.png) no-repeat top center;
	background-size:100%;
	
	animation-name:dec003;
	animation-fill-mode:forwards;
	animation-duration:2s;
	
	position:absolute;
	bottom:-100px;
	left:0;
	z-index:50;
	
	opacity:0;
	
}

@keyframes dec003{
		
    from{
		opacity:0;
    }
    to{
		opacity:1;
    }
	
	
}

#med_civi .main-top .dec004{
	width: 27.08333%;
	height:0;
	padding-bottom: 19.283%;
	background:url(img_dec_right_egypt01.png) no-repeat top center;
	background-size:100%;
	
	animation-name:dec004;
	animation-fill-mode:forwards;
	animation-duration:2s;
	
	position:absolute;
	bottom:-120px;
	right: 0;
	z-index:40;
	
	opacity:0;
	
}

@keyframes dec004{
		
    from{
		opacity:0;
    }
    to{
		opacity:1;
    }
	
	
}

#med_civi .main-top .dec_topline{
	width: 100%;
	height:0;
	padding-bottom:10.417%;
	background:url(img_top_line.png) no-repeat top center;
	background-size:100%;
	
	position:absolute;
	top: -10px;
	right:0;
	z-index: 20;
	
}


#med_civi .main-top .dec_bottomline{
	width: 100%;
	height:0;
	padding-bottom:5.208333%;
	background:url("img_bottom_line.png") no-repeat top center;
	background-size:100%;
	
	position:absolute;
	bottom: -1px;
	right:0;
	z-index: 20;
	
}



#med_civi .main-top h1.heading{
	display:block;
	width: 42.97%;
	height:0;
	padding-bottom: 29.168%;
	background:url(img_maintitle.png) no-repeat;
	background-size:100%;
	text-indent:-9999px;
	
	animation-name:head;
	animation-fill-mode:forwards;
	animation-duration:2s;
	
	position:absolute;
	top: 5.2vw;
	bottom: 0;
	right: 0;
	left: 0;
	margin: 0 auto;
	z-index: 58;
	
	opacity:0;
}



@keyframes head{
		
    from{
		opacity:0;
    }
    to{
		opacity:1;
    }
	
	
}


#med_civi .main-top .slider_container {
	width:100%;
	height:0;
	padding-bottom: 57.3%;
	position:relative;
	
	opacity:0;
	
	animation-name:toppic;
	animation-fill-mode:forwards;
	animation-duration:2s;
}

@keyframes toppic{
		
    from{
		opacity:0;
    }
    to{ 
		opacity:1;
    }
	
	
}


#med_civi .main-top .slider_container div { /* -- 圖片輪播部分 -- */
	width:100%;
	height:auto;
	overflow:hidden;
	
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    filter: alpha(opacity=0);
	
	-webkit-animation: round 20s linear infinite;
            animation: round 20s linear infinite;
}



@-webkit-keyframes round { /* 100%/20s=5%/1s */
    5% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 0 - 1秒 淡入*/
    }
    25% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 1- 5秒靜止*/
    }
    30% {
        opacity: 0;
        filter: alpha(opacity=0);
        /* 5-6秒淡出*/
    }
}
@keyframes round {
    5% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 0 - 1秒 淡入*/
    }
    25% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 1- 5秒靜止*/
    }
    30% {
        opacity: 0;
        filter: alpha(opacity=0);
        /* 5-6秒淡出*/
    }
}

#med_civi .main-top .slider_container div:nth-child(1) {
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
}

#med_civi .main-top .slider_container div:nth-child(2) {
    -webkit-animation-delay: 5s;
            animation-delay: 5s;
}

#med_civi .main-top .slider_container div:nth-child(3) {
    -webkit-animation-delay: 10s;
            animation-delay: 10s;
}

#med_civi .main-top .slider_container div:nth-child(4) {
    -webkit-animation-delay: 15s;
            animation-delay: 15s;
}

#med_civi .main-top .slider_container div img{
	width:100%;
	height:auto;
}

#med_civi .main-top .slider_container-mobile{ 
	display:none;
}



/* ==================== 各區塊標題 ==================== */

article h2{
	width:22%;
	height:0;
	padding-bottom:7.4%;
	text-indent:-9999px;
	margin:0 auto;
}

#med_civi .map-btn h2{
	background:url(img_tt_country.png) no-repeat center top;
	background-size:100%;
}

#med_civi .tours-area h2{
	background:url(img_tt_tour02.png) no-repeat center top;
	background-size:100%;
	margin-bottom:5px;
}

#med_civi .sopts-content h2{
	background:url(img_tt_spots.png) no-repeat center top;
	background-size:100%;
	margin-bottom:5px;
}


/* ==================== 高鐵 ==================== */


#med_civi .special_off{
	width: 100%;
	padding-top: 50px;
}


#med_civi .special_off .off_banner {
    width: 46.875%;
    height: 0;
    padding-bottom: 19.8444444%;
    text-indent: -9999px;
    margin: 0 auto;
    background: url(img_discount_banner.png) no-repeat left top;
    background-size: 100%;
}


/* ==================== 行程 ==================== */

#med_civi .tours-area{
	width:100%;
	padding-top:30px;
}


#med_civi .tours-list{
	width:1200px;
	margin:0 auto;
	text-align:center;
}

#med_civi .tours-list a.tourbox{
	display:inline-block;
	vertical-align:top;
	width:30%;
	margin:0 1% 50px;
	color:#000;
	background-color:#FFF;
	border:3px solid #571f12;
	padding:15px 15px 40px;
	position:relative;
	
	opacity:1;
	
	transition:color 1s,opacity 1s, border 1s;
	-webkit-transition:color 1s,opacity 1s, border 1s;
	-moz-transition:color 1s,opacity 1s, border 1s;
}

#med_civi .tours-list a.tourbox:hover{
	color:#cc261c;
	border:3px solid #cc261c;
	opacity:0.5;
}

#med_civi .tours-list a.tourbox img{
	width:100%;
	height:auto;
	border-radius:20px;
}



#med_civi a.tourbox h4{
	display:block;
	width:100%;
	margin-top:10px;
	font-size: 28px;
	font-weight:600;
}

#med_civi a.tourbox p{
	display:block;
	width:100%;
	min-height:180px;
	font-size:16px;
	line-height:28px;
	text-align:left;
}

#med_civi a.tourbox .offer{
	width:100%;
	font-size:1.2em;
	font-weight:600;
	margin:10px auto;
	color:#cc261c;
	
}


#med_civi a.tourbox .moreto{
	width:95%;
	height:40px;
	font-size:1.2em;
	line-height:40px;
	font-weight:600;
	background-color:#d6be76;
	position:absolute;
	left:2.5%;
	bottom:10px;
}


/* =================================== footer =================================== */

#med_civi .page_bottom{
	width:100%;
	height: 0;
	padding-bottom: 25.52083333333%;
	background: url("img_underbk_egypt.jpg") no-repeat left bottom;
	background-size: 100%;
}

#med_civi .page_bottom p{
	display: block;
	width:100%;
	color:#582012;
	text-align:center;
	font-size:18px;
	
}


/* ==================== 景點介紹 ==================== */


#med_civi .sopts-content{
	width:100%;
	position:relative;
	padding-bottom:250px;
	background:url(img_inpage_line.png) no-repeat left top;
	background-size:100%;
	background-position:left bottom;
}


#med_civi .dec005{
	width:19.8%;
	height:0;
	padding-bottom:22.4%;
	background: url("img_dec_left_egypt02.png") no-repeat left top;
	background-size: 100%;
	animation-name:dec-ipage01;
	animation-fill-mode:forwards;
	animation-duration:2s;
	
	position:absolute;
	bottom:-50px;
	left:0;
	z-index:50;
	
	opacity:0;
	
}

@keyframes dec-ipage01{
		
    from{
		opacity:0;
    }
    to{
		opacity:1;
    }
	
	
}


#med_civi .dec006{
	width:24.48%;
	height:0;
	padding-bottom:16.6672%;
	background: url("img_dec_right_egypt02.png") no-repeat left top;
	background-size: 100%;
	animation-name:dec-ipage02;
	animation-fill-mode:forwards;
	animation-duration:2s;
	
	position:absolute;
	bottom:-40px;
	right:0;
	z-index:59;
	
	opacity:0;
	
}

@keyframes dec-ipage02{
		
    from{
		opacity:0;
    }
    to{
		opacity:1;
    }
	
	
}


#med_civi .spots-list{
	width:80%; /* 1536px/1920px */
	margin:0 auto;
	text-align:center;
}

#med_civi a.spots-box{
	display:inline-block;
	vertical-align:top;
	width:30%;
	margin:0 1.2% 60px 1.2%;
	position:relative;
}

#med_civi a.spots-box .moresee{
	width:59%;
	height:0;
	padding-bottom:10.3%;
	background:url(img_moreto.png) no-repeat left top;
	background-size:100%;
	text-indent:-9999px;
	
	position:absolute;
	bottom:-20px;
	right:0;
	z-index:59;
}

#med_civi a.spots-box .spot-tt{
	text-align:left;
	padding-left:10px;
	margin-bottom:10px;
	
	color:#571f12;
}

#med_civi a.spots-box .spot-tt .tt-arrow{
	display:inline-block;
	vertical-align:middle;
	width:40px;
	height:40px;
	margin-right:10px;
	background:url(img_arrow_tt.png) no-repeat left top;
	background-size:100%;
}

#med_civi a.spots-box .spot-tt h5{
	display:inline-block;
	vertical-align:middle;
	width:80%;
}

#med_civi a.spots-box .spot-tt h5 span:first-child{
	font-size:1.667vw;
	font-weight:600;
	border-bottom:rgba(102,0,0,1) 1px dotted;
}

#med_civi a.spots-box .spot-tt h5 span:last-child{
	display:block;
	font-size:0.7vw;
	font-family:Arial, Helvetica, sans-serif;
}

#med_civi a.spots-box .spot-pic{
	width:100%;
	position:relative;
	text-align:center;
}

#med_civi a.spots-box .spot-pic .pic-frame{
	width:100%;
	height:0;
	padding-bottom:66.6666667%;
	background:url(img_spots_frame.png) no-repeat left top;
	background-size:100%;
	
	position:absolute;
	top:0;
	left:0;
	z-index:58;
}

#med_civi a.spots-box .spot-pic img{
	width:92.3076923077%;
	height:auto;
	border-radius:50px;
	margin-top:5px;
}

@media screen and (max-width: 1440px){
	.like-table {
		width: 100%;
		position:static;
		top: 0;
		transform:none;
	}
	
}



@media screen and (max-width: 1366px){
	
	#med_civi .sopts-content{
		padding-bottom:200px;
	}
	
	#med_civi .spots-list {
		width: 90%;
	}
	
	#med_civi .special_off{
		padding-top: 30px;
	}
	
	

}

@media screen and (max-width: 1199px){

	
	#med_civi .tours-list{
		width:96%;
		margin:0 auto;
	}
	
	#med_civi .sopts-content {
		padding-bottom: 150px;
	}
	
	#med_civi a.tourbox h4{
		font-size: 22px;
	}
	
	#med_civi a.tourbox .offer{
		margin: 5px auto;
	}
	
	
	#med_civi a.spots-box .spot-tt .tt-arrow{
		width:20px;
		height:20px;
	}
	
	#med_civi .spots-list{
		width:90%;
	}
	
	#med_civi a.spots-box .spot-tt h5 span:first-child{
		font-size:22px;
	}
	
	#med_civi a.spots-box .spot-tt h5 span:last-child{
		font-size:12px;
	}

}


@media screen and (max-width: 1025px){
	
	#med_civi .main-top .dec003,
	#med_civi .main-top .dec004 {
		bottom: -50px;
	}

	#med_civi a.tourbox p{
		font-size:15px;
		line-height:24px;
		margin-bottom:10px;
	}
	
}

@media screen and (max-width: 769px){

	#med_civi .main-top h1.heading {
    	width: 50%;
    	height: 0;
		padding-bottom: 35%;
	}
	
	article h2{
		width:30%;
		height:0;
		padding-bottom:9%;
	}
	
	#med_civi .hidenav_btn {
   	    width: 8%;
    	padding-bottom: 20%;
		top: 50vw;
	}
	
	
	#med_civi .additional_nav {
		top: 50vw;
	}
	
	#med_civi .dec005 {
		width: 22%;
    	height: 0;
    	padding-bottom: 25%;
	}
	
	#med_civi .dec006 {
		width: 28%;
    	height: 0;
    	padding-bottom: 19%;
		bottom: -20px;
		
	}
	
	
    /*-- 高鐵 --*/
	#med_civi .special_off .off_banner { 
		width: 65%;
		padding-bottom: 28%;
		margin: 10px auto;
	}
	
	#med_civi .tours-area{
	
	}
	
	#med_civi .tours-list a.tourbox{
		width: 40%;
		height: 480px;
		padding: 10px 10px 40px;
	}
	
	#med_civi a.tourbox h4 {
		line-height: 28px;
	}
	
	#med_civi .tours-list a.tourbox img {
   		border-radius: 10px;
	}
	
	#med_civi .header-content{
		width:75%;
		margin:0 auto;
	}
	
	#med_civi .sopts-content {
		padding-bottom: 80px;
	}
	
	#med_civi a.spots-box .moresee {
    	width: 75%;
    	height: 0;
		padding-bottom: 15%;
	}
	
	#med_civi a.spots-box .spot-pic img{
		border-radius:20px;
	}

    #med_civi .tours-list {
		width: 100%;
	}	
	
	#med_civi .goto_line {
	    width: 16%;
	    right: 20px;
	}
			
}


@media screen and (max-width: 640px){

	#med_civi .main-top{
		width:100%;
		height: 0;
		padding-bottom: 137.5%;
		margin-bottom:50px;
		position:relative;
	}
	
	#med_civi .main-top .dec001 {
   		width: 20%;
    	height: 0;
		padding-bottom: 12%;
		top: 5px;
		left: 10px;
	}
	
	#med_civi .main-top .dec002 {
    	width: 70%;
    	height: 0;
    	padding-bottom: 20%;
    	top: -5%;
	}
	
	#med_civi .main-top .dec004 {
    	width: 40%;
    	height: 0;
		padding-bottom: 28%;
		bottom: -30px;
	}
	
	#med_civi .main-top .dec003 {
    	width: 30%;
    	height: 0;
		padding-bottom: 23%;
		bottom: -30px;
	}
	
	#med_civi .main-top .dec_topline {
    	width: 130%;
    	height: 0;
		padding-bottom: 11%;
	}

	#med_civi .main-top .slider_container{
		display: none;
	}
	
	#med_civi .main-top .slider_container-mobile{
		display: block;
		width:100%;
		height:0;
		padding-bottom: 137.5%;
		position:relative;

		opacity:0;

		animation-name:toppic;
		animation-fill-mode:forwards;
		animation-duration:2s;
	}

	@keyframes toppic{

		from{
			opacity:0;
		}
		to{ 
			opacity:1;
		}


	}


	#med_civi .main-top .slider_container-mobile div { /* -- 圖片輪播部分 -- */
		width:100%;
		height:auto;
		overflow:hidden;

		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		filter: alpha(opacity=0);

		-webkit-animation: round 20s linear infinite;
				animation: round 20s linear infinite;
	}



	@-webkit-keyframes round { /* 100%/20s=5%/1s */
		5% {
			opacity: 1;
			filter: alpha(opacity=100);
			/* 0 - 1秒 淡入*/
		}
		25% {
			opacity: 1;
			filter: alpha(opacity=100);
			/* 1- 5秒靜止*/
		}
		30% {
			opacity: 0;
			filter: alpha(opacity=0);
			/* 5-6秒淡出*/
		}
	}
	@keyframes round {
		5% {
			opacity: 1;
			filter: alpha(opacity=100);
			/* 0 - 1秒 淡入*/
		}
		25% {
			opacity: 1;
			filter: alpha(opacity=100);
			/* 1- 5秒靜止*/
		}
		30% {
			opacity: 0;
			filter: alpha(opacity=0);
			/* 5-6秒淡出*/
		}
	}

	#med_civi .main-top .slider_container-mobile div:nth-child(1) {
		-webkit-animation-delay: 0s;
				animation-delay: 0s;
	}

	#med_civi .main-top .slider_container-mobile div:nth-child(2) {
		-webkit-animation-delay: 5s;
				animation-delay: 5s;
	}

	#med_civi .main-top .slider_container-mobile div:nth-child(3) {
		-webkit-animation-delay: 10s;
				animation-delay: 10s;
	}

	#med_civi .main-top .slider_container-mobile div:nth-child(4) {
		-webkit-animation-delay: 15s;
				animation-delay: 15s;
	}

	#med_civi .main-top .slider_container-mobile div img{
		width:100%;
		height:auto;
	}

	

		#med_civi .main-top h1.heading{
			width: 80%;
			height: 0;
			padding-bottom: 54.4%;
			top: 6vw;
		}
		
		article h2 {
			width: 45%;
			height: 0;
			padding-bottom: 15%;
		}
	
	#med_civi a.spots-box {
		width: 40%;
	}
	
	    #med_civi .special_off {
			padding-top: 0px;
		}
	
	    #med_civi .special_off .off_banner {
    	    width: 75%;
			padding-bottom: 35%;
	    }
	
	#med_civi .dec005 {
		width: 26%;
		height: 0;
		padding-bottom: 30%;
	}
		
		
	#med_civi .tours-area{
		background-size: 50%, 55%;
        background-position: -20% 112%, 100% 110%;
			
	}
		
		#med_civi .tours-area h2{
			margin-bottom:10px;
		}
		
		#med_civi .tours-list {
			width: 100%;
			margin: 0 auto;
		}
		
		#med_civi .tours-list a.tourbox{
			width: 60%;
			height: auto;
			margin: 0 0.35% 50px 0.35%;
			padding:15px;
		}
		
}


@media screen and (max-width: 415px){
	
	  #med_civi .pageto{
		  width:80px;
		  height:80px;
	  }
	  
	  article h2 {
		width: 55%;
		height: 0;
		padding-bottom: 17%;
	  }
	  
	  #med_civi .tours-area {
		background-size: 70%, 0%;
		background-position: -20% 112%, 100% 100%;
	  }
	
	  #med_civi a.tourbox .offer{
		font-size: 16px;
	  }
	
	  #med_civi .tours-list a.tourbox {
		  width: 70%;
	  }
	  
	
     #med_civi .dec005 {
		width: 30%;
		height: 0;
		padding-bottom: 35%;
		bottom: -30px;
	}	
	
	#med_civi .dec006 {
		width: 35%;
		height: 0;
		padding-bottom: 24%;
	}
	 
	
	 #med_civi a.spots-box{
		width:80%;
		margin:0 auto 50px auto;
	 }
	
	#med_civi a.tourbox p {
		font-size: 14px;
	}
	
	
	
}


@media screen and (max-width: 320px){



}