﻿

/* --手機版型------------------------------------- */
@media only screen and (max-width: 670px) and (min-width: 200px) {
	.wrapper{
   		max-width: 100%;
	}
}

@media only screen and (max-width: 1023px) {
	.wrapper{
   		max-width: 100%;
	}
}

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

	*{
	    box-sizing: border-box; /* 讓 padding 與 width 解除關係 */
	}

	html,
	body{
	    -webkit-text-size-adjust: none; /* iPhone 旋轉後 文字不要放大 */
	}



	.wrapper{
	    width: 100%;
	    margin: 64px auto 0px auto;
	}

	.head_01{
    display: none;  text-align: center;
    background:none;  
	}


	.head_02{
    display: block;
	background:url(../images/head01_bg.jpg) repeat center center; margin-top: 40px;
	}

	
	

	
	.ternbody h2{ font-size: 1.5em;line-height: 1.5em;
		font-weight: bold !important; 
		color: #b70909 !important; 
		float: right;
		width:70%; margin: 0px 5% 25px 0px;    
	}


	.ternbody h4{
	font-size: 22px !important; font-weight: bold !important; color:#e9a41f !important;
	text-align: center; line-height: 40px; letter-spacing: -1px;
	
	background:url(../images/m_p_titleBG.png) no-repeat;
	background-size: 100%;
	width:100%; height: auto; display: block;
	margin: 30px auto 50px auto;

	}

	.BGgroup{ position: absolute; z-index:-1; }
	.BGgroup i{ display:block; position: relative;}
	.BGgroup i:nth-child(1){
	 background:url(../images/top_fire.png) no-repeat;
	 background-size: 100%;
	 width: 119px; height: 200px;display: none;
	}
	.BGgroup i:nth-child(2){
	 /*background:url(../images/deco_01.png) no-repeat ;
	 width: 155px; height: 155px; margin:-100px 0px 0px 910px;*/
	 display: none;
	}
	.BGgroup i:nth-child(3) {
	/* background:url(../images/deco_02.png) no-repeat ;
	 width: 270px; height: 270px; margin:200px 0px 0px -35px;*/
	 display: none;
	}
	.BGgroup i:nth-child(4) {
	/* background:url(../images/deco_03.png) no-repeat ;
	 width: 360px; height: 360px; margin: 0px 0px 0px 800px;*/
	 display: none; 
	}

	.mov_year{ width: 90%; height: auto; margin:0 5%; float: none;  display: inline-block; }
		.mov_year i{ 
	 	position: absolute; 
	 	background:url(../images/lion.png) no-repeat ;
	 	background-size: 100%;
	 	width: 100%; height: auto; /*margin:240px 0px 0px 820px;*/
	}

	.AllFB{ 
		text-align: center; 
		width:90%; background-color: #fff; margin:25px auto 30px auto; 
	}

	.messagen_BOX h3 , .down_nav h3{ 
    	list-style: none;
		width:100%; height: auto; 
		text-align: center; 
		font-size: 30px;font-weight: bold;
		letter-spacing: 0px; color:#b70909; 
	}
	
	.messagen_BOX h3 span , .down_nav h3 span{ 
		color:#5e4204; font-size: 20px; 
		line-height:45px; letter-spacing: 0px;
		display: block;
	}
	.messagen_BOX h3 i:nth-child(1){
    	position: absolute;
		background:url(../images/TL_fire.png) no-repeat ;
		background-size: 100%;
		width: 80px; height: 94px; margin-top: -35px;float: left; 
	}
	.messagen_BOX h3 i:nth-child(4){
		background:url(../images/TR_fire.png) no-repeat ;
		background-size: 100%;
		width: 80px; height: 94px; margin-top: -120px; float: right;
	}

	.messagen_BOX .boys ,.messagen_BOX .girls {
		color: #000000;
		width:90%; height: auto; display: block;
		background-image: none;
		border-radius: 25px; overflow: hidden;
		margin:10px auto; padding: 2%;
	}
	.messagen_BOX .boys { background-color:#ffdfa3;  }
	.messagen_BOX .girls { background-color:#fff2da; }	
	.messagen_BOX .boys img , .messagen_BOX .girls img{ width: 95px; margin-top: 20px;}
	.messagen_BOX .girls img{  float: right; 
		-webkit-transform: rotate(-30deg); /* Safari 和 Chrome */
	       -moz-transform: rotate(-30deg); 	/* Firefox */
	        -ms-transform: rotate(-30deg); 	/* IE 9 */
	         -o-transform: rotate(-30deg);
	    /*旋轉十度*/
	            transform: rotate(-30deg); 
	}

	.messagen_BOX .MESS_R{ width: 70%; float: right; margin: 0px;}
	.messagen_BOX .MESS_L{ width: 70%; float: left;  margin: 0px;}
	.messagen_BOX p.Stit{ font-size: 1.2em; line-height: 2em; font-weight: bold; text-decoration: underline;}
	.messagen_BOX .girls p.Stit{text-align: right;margin-right: 30px;}
	.messagen_BOX span.Sdate{ font-size: 0.9px; font-weight:normal; text-decoration: none; margin-left: 10px;}
	.messagen_BOX .con_a{ font-size: 1em;line-height: 1.5em; }

	a.mess_more , a.mess_more:hover {
		font-size:1.2em; font-weight: bold; line-height: 5em;  color:#ffd200;
		margin:20px auto;  text-align: center;
		background:url(../images/BT_more.png) no-repeat ;
		background-size: 100%;
		width: 237px; height: 90px; display: block; 
		
		cursor:auto;
	}


	.down_bg{ 
		display: none;
		background:none;
	}

	.down_nav{ padding-bottom: 25px;}

	.down_nav h3 , h3.titbg{ 
		background:url(../images/m_tit_down.png) no-repeat;
		background-size: 100%;
		width:100%; height: auto;
		padding-top: 85px;
	}


   

	/* --內頁------------------------------------- */
	.PL{ float: none; }
	.PR{ float: none; }
	.CL{ clear: both; }
	.ternbody h2.p_tit{
		font-size: 22px !important; font-weight: bold !important; color:#e9a41f !important;
		text-align: center; line-height: 40px; letter-spacing: -1px;
	
		background:url(../images/m_p_titleBG.png) no-repeat;
		background-size: 100%;
		width:100%; height: auto; display: block;
		margin: 20px auto 10px auto;
	}

	.p_con{ margin-bottom:20px; width: 90%; margin:0 auto; }
		.p_con .BOX{ width: 100%; height: auto; border:#cecece 1px solid; position: relative; z-index: 1;
				margin: 15px 0px;
    			float: left;     box-shadow: 1px 3px 2px rgba(0,0,0,0.3);
    	}

		.p_con .BOX img{ 
			width: 100%; height: auto;position: relative;
		}

		.p_con .BOX p.f1{
			font-size: 20px; color:#000; line-height: 30px; padding: 10px;
			width: 100%; height: 75px; background: rgba(255,255,255,0.5);
			position: absolute; z-index:2; bottom: 0;margin-bottom: -1px;font-weight: bold;
		}

		.p_con .btn1 , .p_con2 .btn1{ margin:0px auto;  text-align: center;}
		.p_con .btn1 span , .p_con2 .btn1 span{ color: #ffffff; }
		.p_con .btn1 a , .p_con .btn1 a:hover ,
		.p_con2 .btn1 a , .p_con2 .btn1 a:hover{ 
			padding: 10px ; background-color: #a30c0c; display: inline-block; border-radius: 5px;
			color: #ffd200; text-decoration: none; margin-top: 15px; margin-bottom: 40px;
			font-weight: bold;font-size: 18px; width:100%;
		}


	.p_mov_year{ 
		width: 90%; height: auto; margin:0 5%; float: none;  display: inline-block; 
		padding-bottom: 10px;float: none;	
	}
		
		.p_mov_year i:nth-child(1){ 
		 	position: absolute;  z-index: 1;
		 	background:none ;
		 	background-size: 100%;
		 	width: 225px; height: 355px; margin:100px 0px 0px 0px;
		 	display: none;
		}

		.p_mov_year i:nth-child(3){ 
		 	position: absolute;  z-index: 1;
		 	background:none ;
		 	background-size: 100%;
		 	width: 225px; height: 355px; margin:100px 0px 0px 800px;
		 	display: none;
		}

		.p_mov_year .ifvideo {
			margin: 30px auto 10px auto; 
			z-index: 2;

    		position: relative;
    		padding-bottom: 56.25%;
    		padding-top: 30px;
    		height: 0;
    		overflow: hidden;
		}
		.p_mov_year .ifvideo iframe,
		.p_mov_year .ifvideo object,
		.p_mov_year .ifvideo embed {
    		position: absolute;
    		top: 0; left: 0;
    		width: 100%; height: 100%;
		}	

	.p_con2{width: 100%;}
		.p_con2 .BOX{ width: 90%; color:#000000; margin:0 auto; border-bottom:#ffe400 1px dashed; padding: 25px 0px 35px 0px; }
		.p_con2 .BOX p.Stit{ font-size: 24px; line-height: 35px; font-weight: bold;  display:inline-block; clear: both; margin:15px auto 15px auto;}
		.p_con2 .BOX span.f2{ font-size: 18px; line-height: 28px;  display:inline-block; clear: both;  margin-bottom: 25px;}

		.p_con2 .p_more , .p_con2 .p_to{ width:110px; font-size: 17px;  color: #b70000; float: right}
		.p_con2 .p_more i:first-child {
			background:url(../images/m_more.png) no-repeat ;
			background-size: 100%;width: 25px; height: 25px;
			display: inline-block; vertical-align: middle;
			margin-right: 3px;
		}

		.p_con2 .p_to i:first-child {
			background:url(../images/m_to.png) no-repeat ;
			background-size: 100%;width: 25px; height: 25px;	
			display: inline-block; vertical-align: middle;
			margin-right: 3px;
		}

	.p_con2 .p_more a , .p_con2 .p_more a:hover{  color: #b70000;}
	.p_con2 .p_to a , .p_con2 .p_to a:hover{color: #b70000;}
	

}

