@import url("art2018.css");
@import url("bt_style.css");
@import url("item.css");

body{
	-webkit-text-size-adjust:none;
	text-decoration:none;
	font-family: "微軟正黑體", "新細明體", "細明體",Arial, Helvetica, sans-serif;
	background-color:#f9e0b0;
	}
	
	/*共用間距*/
	#it221 .BLANK{ width:100%; height:20px; clear: both;}	
	.PC #it221 .BLANK03{ width:100%; height:15px; clear: both;}
	.PC #it221 .BLANK02{ width:100%; height:25px; clear: both;}	
	.MOBILE #it221 .BLANK03{ width:100%; height:15px; clear: both;}
	.MOBILE #it221 .BLANK02{ width:100%; height:25px; clear: both;}	
	
	/*==============桌機版================桌機版==============桌機版=============================================*/
/*PC表頭尾*/	
.PC #float_icon, .PC #header, .PC .CHANG, .PC .FOOT_MOBILE{ display:block;}
/*PC表頭尾*/	

/*輸入頁用分隔線*/
.PC #it221 .CON_BOX .pq_INPUT_BOX1 .IP_LINE{
	width: 100%;
    height: 8px;
    margin-top: 15px;
    margin-bottom: 10px;
    border-top: 1px dashed #427f48;
}

	
/*消失區*/
.PC #it221-wrapper #INPUT_BOX,.PC .PC_LOGIN,.PC .FOOT_PC, .PC .PRINT_BT ,.PC #it221-wrapper #watermark-wrapper ,.PC .pq_REPIC{ display:none;}
/*消失區尾*/
 

/*框架區*/
.PC #it221{
	width:100%;
	height:auto;
	overflow:hidden;
	margin-top:45px;
	-webkit-box-sizing:border-box;
	}
.PC #it221 .FRAME{
	width:100%;
	height:auto;
	overflow:hidden;
	margin:0 auto;
}
.PC #it221{
	width:100%;
	height:auto;
	overflow:hidden;
	background-image:url(../images/bg.png);
	background-size:230% auto;
	background-repeat:no-repeat;
	background-position:top center;
	-webkit-box-sizing:border-box;
	}

/*框架區尾*/

/*輸入頁表頭區*/
.PC #it221 .IP_FRAME{
	width: 100%;
	height: 560px;
	overflow: hidden;
	margin: 0 auto;
}

.PC #it221 .IP_TOP{
	position: relative;
	width: 100%;
	height: auto;
	/*! margin: 0 auto; */
	overflow: hidden;
	/*! margin-bottom: 60px; */
	background-image: url(../images/topflower.png);
	background-repeat: no-repeat;
	background-size: 45% auto;
	background-position: -120px 0px;
}


/*======手機板輸入頁============手機板輸入頁============手機板輸入頁======*/

/*手機版輸入頁動畫區*/
.PC #it221 .IP_TOP .IP_ANI_FATE{
	position: relative;
	width: 100%;
	height: 540px;
	background: url(../images/in_animation_ph1.png) no-repeat top center;
	background-size: 100% auto;
	margin-top: 250px;
}

.PC #it221 .IP_TOP .IN_BALL_BOX{
	width: 120px;
	height: 120px;
	z-index: 2;
}

/*輸入頁動畫區 4顆球*/
/*球1*/
.PC #it221 .IN_BALL01{
	position: absolute;
	display: block;
	width: 100%;
	height: auto;
	background: url(../images/in_ball01.png) no-repeat center;
	background-size: cover;
	animation-name: floatball,fadeInOut;
	animation-duration: 2.8s;
	animation-iteration-count: infinite;
	top: 0;
	left: 21%;
}

/*球2*/
.PC #it221 .IN_BALL02{
	position: absolute;
	display: block;
	width: 100%;
	height: auto;
	background: url(../images/in_ball02.png) no-repeat center;
	background-size: cover;
	animation-name: floatball2,fadeInOut;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	top: 0;
	right: 21%;
}

/*球3*/
.PC #it221 .IN_BALL03{
	position: absolute;
	display: block;
	width: 100%;
	height: auto;
	background: url(../images/in_ball03.png) no-repeat center;
	background-size: 110% auto;
	animation-name: floatball3,fadeInOut;
	animation-duration: 2.7s;
	animation-iteration-count: infinite;
	top: 170px;
	left: 30%;
}

/*球4*/
.PC #it221 .IN_BALL04{
	position: absolute;
	display: block;
	width: 100%;
	height: auto;
	background: url(../images/in_ball04.png) no-repeat center;
	background-size: 110% auto;
	animation-name: floatball4,fadeInOut;
	animation-duration: 3.1s;
	animation-iteration-count: infinite;
	top: 170px;
	right: 31%;
}
/*動畫keyframes*/
@keyframes floatball {
	0% { transform: translateY(-6px); }
	50% { transform: translateY(0); }
	100% { transform: translateY(-6px); }
}

@keyframes floatball2 {
	0% { transform: translateY(-8px); }
	50% { transform: translateY(0); }
	100% { transform: translateY(-8px); }
}

@keyframes floatball3 {
	0% { transform: translateY(-9px); }
	50% { transform: translateY(0); }
	100% { transform: translateY(-9px); }
}

@keyframes floatball4 {
	0% { transform: translateY(-8px); }
	50% { transform: translateY(0); }
	100% { transform: translateY(-8px); }
}

/*動畫keyframes 淡出淡入效果*/
@-webkit-keyframes fadeInOut {
  0% { opacity: 1; }
  25% { opacity: 0.7; }
  50% { opacity: 0.8; }
  75% { opacity: 1; }
}

/*輸入頁 標題*/
.PC #it221 .IP_TOP h1{
	position: absolute;
	width:100%;
	height:0;
	padding-bottom:43.333333%;
	background-image: url(../images/in_top_title.png);
	background-size: 69% auto;
	background-repeat: no-repeat;
	text-indent:-9999px;
	top: 50px;
	left: 1%;
	z-index: 1;
}

/*輸入頁 張盛舒定位*/
.PC #it221 .IP_TOP .TOP_SAM{
	position: absolute;
	width: 54%;
	height: 250px;
	float: right;
	top: 0;
	right: -6%;
}

/*輸入頁 張盛舒圖片*/
.PC #it221 .IP_TOP .TOP_SAM img{
	display: block; 
	width: 100%; 
	height: auto; 
	margin:0 auto;
}

/*輸入頁使用者反饋文區塊*/
.PC #it221 .FEEDBACK_TITLE{
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-top: 10px;
}
.PC #it221 .FEEDBACK_BG{
    width: 100%;
    height: auto;
    margin: 0 auto;
    overflow: hidden;
    padding: 5px 15px 10px 15px;
    border-left: 1px solid #8cc445;
	border-right: 1px solid #8cc445;
	border-bottom: 1px solid #8cc445;
	-webkit-box-sizing:border-box;
	color: #333;
}
.PC #it221 .FEEDBACK_BG p.NAME{
	text-align: right;
	padding-right: 10px;  
}

/*自定義輸入頁項目區塊*/
.PC #it221 .CON_BOX .pq_INPUT_BOX1{
	width: 100%;
	margin: 0 auto;
}

.PC #it221 .CON_BOX .pq_INPUT_BOX1 .pq_INBAR{
	width: 100%;
	height: 50px;
	line-height: 50px;
	font-size: 1.4em;
	text-align: center;
	background: url(../images/in_title_bar.png) repeat-x;
	margin-top: 0;
	box-shadow: inset 0px 0px 18px 3px #2a5219;
	-webkit-box-shadow: inset 0px 0px 18px 3px #2a5219;
	-moz-box-shadow: inset 0px 0px 18px 3px #2a5219;
	-o-box-shadow: inset 0px 0px 18px 3px #2a5219;
}

.PC #it221 .CON_BOX .pq_INPUT_BOX1 .pq_TITLE{
	box-shadow: inset 0px 0px 18px 3px #2a5219;
	-webkit-box-shadow: inset 0px 0px 18px 3px #2a5219;
	-moz-box-shadow: inset 0px 0px 18px 3px #2a5219;
	-o-box-shadow: inset 0px 0px 18px 3px #2a5219;
	height: 50px;
	line-height: 52px;
	font-size: 1em;
}

/*輸入頁用分隔線*/
.PC #it221 .CON_BOX .pq_INPUT_BOX1 .LINE{
	width: 100%;
    height: 8px;
    margin: 8px 0;
    border-top: 1px dashed #427f48;
}

.PC #it221 .CON_BOX .pq_INPUT_BOX1 .pq_INBOX{
	box-shadow: none;
	background-color: #fff;
	border: 1px solid #427f48;
}

/*自定義輸入頁左圖右文公版區塊*/
.PC #it221 .CON_BOX .pq_CON_BOX1{
	border: 1px solid #ddeade;
	margin: 10px 0 0 0;
}

/*輸入頁下方公版左配圖介紹區塊bar*/
.PC #it221 .CON_BOX .pq_CON_BOX1 .pq_CON_BOX_BAR{
	background-color: #ddeade;
	height: 50px;
	line-height: 50px;
}

.PC #it221 .CON_BOX .pq_CON_BOX1 .pq_CON_BOX_BAR p{
	color: #678d69;
	font-size: .9em;
	line-height: 50px;
}

/*輸入頁項目符號*/
.PC #it221 .CON_BOX .pq_CON_BOX1 .pq_LIST_ICON li{
	background: transparent url(../images/icon_2.png) no-repeat;
	background-size: 30px 30px;
    background-position-y: 2px;
    padding-left: 35px;
}

/*輸入頁項目區塊*/
.PC #it221 .CON_BOX .IN_LIST_AREA1{
	width: 100%;
	height: auto;
	overflow: hidden;
	margin: 0 auto;
	border: 1px solid #427f48;
}

.PC #it221 .CON_BOX .IN_LIST_CON{
	width: 95%;
	margin: 20px auto;
}

.PC #it221 .CON_BOX .IN_LIST_BAR{
	width: 100%;
	height: 50px;
	line-height: 50px;
	color: #fff;
	font-size: 1.4em;
	font-weight: bold;
	text-align: center;
	background: url(../images/in_title_bar.png) repeat-x;
	box-shadow: inset 0px 0px 18px 3px #2a5219;
    -webkit-box-shadow: inset 0px 0px 18px 3px #2a5219;
    -moz-box-shadow: inset 0px 0px 18px 3px #2a5219;
    -o-box-shadow: inset 0px 0px 18px 3px #2a5219;
}

/*輸入頁pq公版按鈕*/
.PC #it221-wrapper .BT_AREA2{
	width: 96%;/*500*/
	height: auto;
	margin: 0 auto;
	margin-bottom: 15px;
}

/*輸入頁 馬上算 置底按鈕*/
.PC #it221-wrapper .NEW_BT_F{/*浮水按鈕*/
	width:750px;
	height:60px;
	position:fixed;
	bottom:0;
	z-index:1000;
	background-image:url(../images/bt_bg.png);
	background-repeat:repeat;
	padding-top:7px;
	background-size:15px 15px;
	}

.PC #it221-wrapper .NEW_BT_F a{/*浮水按鈕*/
	margin:0 auto;
    width: 90%;
	height: 47px;
	font-size:1.5rem;
	line-height: 47px;
	text-decoration:none;
	position: static;}

/*========================================手機版輸入頁 尾========================================*/
	
/*內容區*/
.PC #it221 .CONTENT{
	width:100%;
	height:auto;
	overflow:hidden;
	margin:0 auto;
	background-image:url(../images/con_bg.jpg);
	background-repeat:repeat-y;
	background-size:100% auto;
	}
.PC #it221 .CONTENT_S{/*N*/
	width:95%;
	height:auto;
	overflow:hidden;
	margin:0 auto;}

.PC #it221 .CONTENT_TOP{
	display: block;
	width: 100%;
	height: auto;
	margin: auto;
}

/*內容框架*/
.PC #it221 .CONTENT img{display:block; width:100%; height:auto; margin:auto;}
.PC #it221 .CONTENT_TOP img, .PC #it221 .CONTENT_FOOT img{ display:block; width:100%; height:auto; margin:auto;}
/*共用按鈕*/
.PC #it221 .pq_e_BT ul.TWO li a{
	width: 100%;
	font-size: 1.3rem;}
	.PC #it221 .pq_e_BT ul.TWO li:first-child{width: 49%;}
	.PC #it221 .pq_e_BT ul.TWO li:last-child{width: 49%;float: right;}
	
.PC #it221 .pq_e_BT ul.TWO span.PR{font-size: 0.8em; margin-left: 2px; font-weight: normal;}
.PC #it221 .pq_BT_FREE1 span.BR{font-size: 1.1rem; margin-left: 4px; font-weight: normal;}


/*共用內容框架 670*/
.PC #it221 .CON_BOX{ 
	width:90%;
	height:auto;
	overflow:hidden;
	margin:0 auto;}

/*待確認*/
.PC #it221 .CON_BOX form{ 
	width: 96%;
	margin: 0 auto;
}

.PC #it221 .CON_BOX .pq_TIT_EX{
	line-height: 2.1rem;
	margin-bottom: 5px;}

.PC #it221 .CON_BOX .COM{
	width:95%;
	height:auto;
	overflow:hidden;
	margin:0 auto;
	padding:5px;}

/*待確認*/


/*======手機板結果頁============手機板結果頁============手機板結果頁======*/

/*結果頁表頭區*/	
.PC #it221 .e_TOP{
	position: relative;
	width:100%;
	height:300px;
	margin:0 auto;
	background-image: url(../images/topflower.png);
	background-repeat: no-repeat;
	background-size: 50% auto;
	background-position: -14vw 0;
	}

/*結果頁 標題*/
.PC #it221 .e_TOP h1{
	position: absolute;
	width: 100%;
	height: 0;
	padding-bottom: 38.571428571%;
	background: url(../images/e_top_title.png) no-repeat center;
	background-size: cover;
	text-indent: -9999px;
	top: 4%;
	left: 0;
	z-index: 1;
}

/*結果頁 張聖舒 定位*/
.PC #it221 .e_TOP .TOP_SUN{
	position: absolute;
	width: 56%;
	height: 52vw;
	top: 0;
	right: -10%;
}

.PC #it221 .e_TOP .TOP_SUN img{
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
}


/*共用結果頁 免費頁 前言區塊頭*/
.PC #it221 .FOREWORDS{
	width: 100%;
	height: auto;
	margin: 0 auto;
	background-color: #e8ebdb;
	border-radius: 5px;
	padding: 10px;
	box-sizing: border-box;
}

/*結果頁 鵝黃 重點結語區塊*/
.PC #it221 .FOREWORDS_P{
	width: 100%;
	height: auto;
	margin: 0 auto;
	background-color: #fcedb0;
	border-radius: 5px;
	padding: 10px;
	box-sizing: border-box;
}

/*共用結果頁 免費頁 個人資料*/
.PC #it221 .INFORFATE{
	width: 100%;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
	text-align: center;
	margin:10px 0 0 0;
}

.PC #it221 .INFORFATE span.GENDER{
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-bottom: -4px;
}

.PC #it221 .INFORFATE span.GENDER img{
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
}

/*共用結果頁 免費頁 個人資料 尾*/
/*共用結果頁 免費頁 命宮最外框控制寬度*/
.PC #it221 .RE_UNITY_BOX{
	width: 90%;
	margin: 0 auto;
	overflow: hidden;
	margin-top: 10px;
}

/*共用結果頁 免費頁 控制最外框寬度-1 大框*/
.PC #it221 .WBOX{
	width: 100%;
	height: auto;
	overflow: hidden;
	margin: 0 auto;
	margin-top: 8px;
	margin-bottom: 8px;
}

/*共用結果頁 免費頁 控制最外框寬度-2 項目*/
.PC #it221 .UNITY_LIST1{
	position: relative;
	width: 93%;
	height: auto;
	margin: 0 auto;
	margin-top: 10px;
	margin-bottom: 5px;
	overflow: hidden;
}

/*共用結果頁 免費頁 大標樣式*/
.PC #it221 .UNITY_BAR1{
	width: 93%;
	height: 45px;
	line-height: 45px;
	margin: 0 auto;
	border-radius: 5px;
	margin-top: 15px;
}

/*共用結果頁 免費頁 NO1 NO5 大標樣式*/
.PC #it221 .UNITY_BAR2{
	width: 100%;
	height: 45px;
	line-height: 45px;
	margin: 0 0 8px 0;/*margin 8px auto*/
	background-color: #f8eee8;
	border-radius: 5px;
}

/*共用結果頁 免費頁 統一綠底大標樣式*/
.PC #it221 .UNITY_BAR2_2{
	width: 100%;
	height: 45px;
	line-height: 45px;
	margin: 0 auto;
	border-radius: 5px;
	background-color: #e8ebdb;
    color: #486536;
    margin-top: 25px;
}

/*共用結果頁 免費頁 綠底大標 字級樣式*/
.PC #it221 .UNITY_BAR1 p{
	font-size: 1.3em;
	font-weight: bold;
	padding-left: 10px;
}

/*共用結果頁 免費頁 統一綠底大標 字級樣式*/
.PC #it221 .UNITY_BAR2_2 p{
	font-size: 1.3em;
	font-weight: bold;
    color: #486536;
    padding-left: 10px;
}

/*共用結果頁 免費頁 排行榜區塊-棕色橫條bar*/
.PC #it221 .UNITY_BAR2 .U_TITLEBOX ul{
	display: inline-block;
}


/*共用結果頁 免費頁 排行榜區塊-棕色橫條bar*/
.PC #it221 .UNITY_BAR2 .U_TITLEBOX li{
	float: left;
	font-size: 1.3em;
	color: #a24e29;
	font-weight: bold;
	margin-right: 5px;
}

/*共用結果頁 免費頁 排行榜區塊-棕色橫條 排行ICON底圖*/
.PC #it221 .UNITY_BAR2 .U_TITLEBOX li.U_MARK{
	width: 100px;
	height: 45px;
	background-image: url(../images/ph_content/co_ph03.png);
	background-repeat: no-repeat;
	background-size: cover;
	font-size: 1.3em;
	font-weight: bold;
	color: #fff;
	text-align: center;
	border-radius:5px; 
	margin-right: 5px;
}

/*共用結果頁 免費頁 排行榜三大項目區塊*/
.PC #it221 .RANGE_AREA{
	width: 100%;
	height: auto;
	/*overflow: auto;*/
	box-sizing: boredr-box;
}

.PC #it221 .RANGE_AREA ul{
	display: inline-block;
	margin-bottom: 10px;
	width: 100%;
}

/*共用結果頁 免費頁 三大期用標題*/
.PC #it221 .RANGE_AREA li.MARK_T{
	width: 35%;
	font-weight: 500;
	margin-top: 8px;
}

/*共用結果頁 免費頁 三大期用標題模糊圖縮放*/
.PC #it221 .RANGE_AREA li.MARK_T img{
	display: block;
	width: 100%;/*100%*/
	height: auto;
	margin-top: 8px;
	margin-left: 0;
}

/*結果頁 三大期用文字區塊*/
.PC #it221 .RANGE_AREA li.R_TEXT{
	margin-top: 5px;
	padding-left: 12px;
}

/*共用結果頁 免費頁 排行榜置底結語與老師配圖*/
.PC #it221 .RANGE_END{
	width: 100%;
	height: auto;
	overflow: hidden;
	background-color: #f9f9f9;
	border-radius: 5px;
	margin-top: 10px;
}


/*共用結果頁 免費頁 自定義卷軸 三大期 pq顏色取消*/
.PC #it221 .pq_BIGWORD1{
	background-color: none;
}

.PC #it221 .pq_BIGWORD1 ul{
	border:none; 
	background-color: transparent;
	/*height: 16vw;*/
}

.PC #it221 .pq_BIGWORD1 ul li{
	font-size: 2.5rem;
	line-height:3rem;
	color: #bb4530;
}

.PC #it221 .pq_BIGWORD1 ul li:nth-child(1){
	font-size: 1.5rem;
	color: #fff;
}

/*共用結果頁 免費頁 三大期卷軸文字說明間距*/
.PC #it221 .SCROLL_WBOX1{
	/*width: 730px;*/
	height: auto;
	overflow: hidden;
	margin-top: 10px;
}

/*共用結果頁 免費頁 三大期 最外框*/
.PC #it221 .SCROLL_WBOX2{
	/*width: 730px;*/
	height: auto;
	overflow: hidden;
	margin-top: 1px;
}

/*自定義卷軸 命盤*/
.PC #it221 .pq_BIGWORD2{
	display: block;
	padding-top: 1%;
}

.PC #it221 .pq_BIGWORD2 ul{
	margin-top: -1px;
}

.PC #it221 .pq_BIGWORD2 ul li:nth-child(1){
	margin: 2px auto;
}

.PC #it221 .pq_BIGWORD2 ul li:nth-child(2){
	margin: 0;
	margin: 0 auto;
	margin-top: -6px;
}

/*共用結果頁 免費頁 pq詳細能量表左圖右文*/
.PC #it221 .COLUMN_COM{
	width: 94%;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
}

.PC #it221 .TWO_COM{
	width: 98%;
    height: auto;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 10px auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.PC #it221 .TWO_COM .COL_PIC{
	width: 75%;
    height: auto;
    margin: 0 auto;
    position: relative;
}

/*共用結果頁 免費頁 百分比分數區塊*/
.PC #it221 .TWO_COM .SCORE{
	position: absolute;
	width: 100%;
	height: auto;
	top: 54%;/*45*/
	left: 0;
}

.PC #it221 .TWO_COM .SCORE p{
	font-size: 3.5rem;
	font-weight: bold;
	line-height: 5rem;
	text-align: center;
}

/*待確認 免費頁 XX力 樣式*/
/*.PC #it221 .TWO_COM .SCORE .tit_BIG{
	font-size: 2.4em;
	line-height: .6em;
}*/

/*共用結果頁 免費頁分隔線*/
.PC #it221 .RE_LINE{
	width: 100%;
    height: 8px;
    margin-top: 8px;
    border-top: 1px dashed #ededed;
}


.PC #it221 .TWO_COM .COL_PIC img{
	width: 100%;
    height: auto;
    margin: 0 auto;
}

/*共用結果頁 免費頁 右文區塊*/
.PC #it221 .TWO_COM .COL_TEXT{
	width: 100%;
    height: auto;
    overflow: hidden;
    vertical-align: top;
}

/*共用結果頁 免費頁 三優勢二劣勢 大框*/
.PC #it221 .THREEADV{
	width: 100%;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
}

.PC #it221 .THREEADV ul{
	width: 55%;
	height: auto;
	margin: 0 auto;
}

/*共用結果頁 免費頁 二劣勢 區塊*/
.PC #it221 .THREEADV ul.TWO_ITEM{
	width: 55%;
	height: auto;
	margin: 0 auto;
}

/*共用結果頁 免費頁 優勢底圖*/
.PC #it221 .THREEADV li{
	width: 100%;
	height: 0;
	padding-bottom: 45.4054054054054%;
	margin: 0 auto;
	text-align: center;
	background-image: url(../images/ph_ratingscale/re_ph12_1.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	font-size: 3rem;
  line-height: 10rem;
	font-weight: bold;
	color: #000000;
	margin-bottom: 10px;
}

/*共用結果頁 免費頁 劣勢底圖*/
.PC #it221 .THREEADV li.DIS_AD_PH{
	width: 100%;
	height: 0;
	padding-bottom: 45.4054054054054%;
	margin: 0 auto;
	text-align: center;
	background-image: url(../images/ph_ratingscale/re_ph12_2.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	font-size: 3rem;
  line-height: 10rem;
	font-weight: bold;
	color: #000000;
	margin-bottom: 10px;
}

/*共用結果頁 免費頁 三主星*/
.PC #it221 .MAIN_STAR{
	width: 100%;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
	margin-top: 12px;
	margin-bottom: 10px;
	position: relative;
}

.PC #it221 .MAIN_STAR img{
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
}

.PC #it221 .MAIN_STAR .STAR_TITLE{
	position: absolute;
	width: 250px;
	height: 50px;
	border-radius: 40px;
	top: 25px;
	left: 200px;
}

.PC #it221 .MAIN_STAR .STAR_NAME{
	position: absolute;
	width: 100%;
	height: auto;
	margin: 0 auto;
	top: 90px;
	left: 0;
}

.PC #it221 .MAIN_STAR .STAR_TITLE p{
	font-size: 1.9rem;
	line-height: 2.7rem;
	color: #fff;
	text-align: center;
}

.PC #it221 .MAIN_STAR .STAR_NAME p{
	font-size: 3.5rem;
	font-weight: bold;
	text-align: center;
}

/*共用結果頁 免費頁 三主星 尾*/

/*結果頁 表單輸入選擇父母親*/
.PC #it221 .RADIO_AREA {
	width: 100%;
	height: auto;
	overflow: hidden;
	margin: 2px 0 8px 0;
}

/*結果頁 警示語 提醒用戶填入父母親資料*/
.PC #it221 .RE_INPUT_BAR{
	width: 100%;
	height: 40px;
	line-height: 40px;
	background-color: #f9f9f9;
	margin-bottom: 8px;
	border-radius:5px;
	font-size: 1em;
	padding-left: 1%;
	color: red;
}

/*共用結果頁 免費頁 大師給予祝福 區塊*/
.PC #it221 .GUIDE{
	display: block;
	width:100%;
	height:auto;
    overflow: hidden;
    padding: 0;
    clear: both;
    margin-top: 10px;
}
.PC #it221 .GUIDE li {
	width: 100%;
	height: auto;
}
.PC #it221 .GUIDE img{display: block;width: 100%;height: auto;margin: 0 auto;}

.PC #it221 .GUIDE li.PH02 {
	width:73%;
	height:auto;
	margin: 0 auto;
}

.PC #it221 .GUIDE li.TEXT02{
	width: 93%;
    height: auto;
    margin: 0 auto;
    overflow: hidden;
    vertical-align: top;
    margin-top: 10px;
    margin-bottom: 5px;
}

/*共用結果頁 免費頁 大師給予祝福 區塊尾*/

/*共用結果頁 免費頁 家庭配圖 大框*/
.PC #it221 .FAMILY_ALL{
	margin-top: -25px;
}

.PC #it221 .FAMILY_WRAPPER{
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 50%;
    background: url(../images/ph_family/ph_bg.jpg) no-repeat top;
    background-size: cover;
}

/*結果頁 家庭配圖 單一性別左圖*/
.PC #it221 .FAMILY_WRAPPER .MEMBER_L{
    float: left;
    display: inline-block;
    width: 31%;
    margin-left: 3%;
    margin-top: 6%; 
}

/*共用結果頁 免費頁 家庭配圖 性別左圖*/
.PC #it221 .FAMILY_WRAPPER .MEMBER_R{
    float: right;
    display: inline-block;
    width: 30%;
    margin-right: 4%;
    margin-top: 3%; 
}
.PC #it221 .FAMILY_WRAPPER p{
    display: inline-block;
    text-align: center;
    font-size: 2.5rem;
    position: absolute;
    top: 61%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.PC #it221 .FAMILY_WRAPPER .POINT{display: block;font-size: 2.5rem; }
.PC #it221 .FAMILY_WRAPPER .NUM{font-size: 5rem;font-weight: bold;}

/*待確認*/
.PC #it221 .BT_BTM{position: static;margin-top: 12px;}
.PC #it221 .BT_PRINT{display:none;}

/*======手機板免費頁============手機板免費頁============手機板免費頁======*/

/*免費頁 底部置底浮水雙按鈕*/
.PC #it221 .BT_AREA{
	width: 96%;
	margin: 0 auto;
	margin-bottom: 14px;
}

/*免費頁 分隔線*/
.PC #it221 .FRE_LINE{
	width: 100%;
    height: 0px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-top: 1px dashed #ededed;
}

/*免費頁 家庭配圖 雙性別左圖*/
.PC #it221 .FAMILY_WRAPPER .F_MEMBER_L{
    float: left;
    display: inline-block;
    width: 34%;
    margin-left: 3%;
    margin-top: 8%; 
}

/*免費頁 模糊區塊上下間距*/
.PC #it221 .RANGE_AREA li.FRE_MAR{
	display: block;
	width: 100%;
}

/*項目模糊清單內的按鈕 與 UNITY_LIST1定位*/
.PC #it221 .FBT_LIST{
	position: absolute;
	top: 45%;
	left: 35%;
}

/*免費頁 項目模糊清單內按鈕*/
.PC #it221 .FBT_BOX{
	position: relative;
	width: 100%;
	height: auto;
	overflow: hidden;
}

/*項目模糊清單內的按鈕 與 FBT_BOX定位*/
.PC #it221 .FBT_LIST2{
	position: absolute;
	top: 35%;
	left: 34%;
}

/*免費頁 自定義 模糊卷軸區塊 富貴之格*/
.PC #it221 .pq_FREE_SCROLL1{
	width: 90%;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
}

.PC #it221 .pq_FREE_SCROLL1 .FBG{
	position: relative;
}

.PC #it221 .pq_FREE_SCROLL1 .FBG img{
	display: block;
	width: 100%;
	height: auto;
} 

.PC #it221 .pq_FREE_SCROLL1 .FBG .F_TITLE{
	position: absolute;
	top: 15px;
	left: 200px;
	border-radius: 45px;
	background-color: #bb6a3d;
	width: 200px;
	height: 40px;
	line-height: 2.5rem;
	text-align: center;
	color: #fff;
	font-size:1.1rem;
	font-weight: bold;
}

/*免費頁 XX之格 模糊*/
.PC #it221 .pq_FREE_SCROLL1 .FBG .F_FUZZY{
	position: absolute;
	width: 90px;
	height: 60px;
	top: 70px;
	left: 200px;
	background-image: url(../images/a_fuzzy/big4words02.png);
	background-size: 400% auto;
	background-repeat: repeat-x;
	background-position: -55px -7px;
}

/*免費頁 之格二字區分*/
.PC #it221 .pq_FREE_SCROLL1 .FBG .F_FUZZY .FW{
	float: left;
	width: 100%;
	margin-left: 100px;
	font-size: 2.5rem;
	font-weight: bold;
	padding-top: 0px;
}

/*免費頁 優點 模糊四字*/
.PC #it221 span.FOUR{
	display: block;
	width: 75%;
	margin: 0 auto;
}

/*免費頁 三大運表格內四字模糊*/
.PC #it221 span.FOUR2{
	display: inline-block;
	width:100%;
	height: auto;
	box-sizing: border-box;
}

/*免費頁 詳細三大運卷軸顏色模糊四字*/
.PC #it221 .FOUR3{
	width: 60%;
	height: auto;
	margin: 0 auto;
	line-height: 1.7em !important;
	padding-bottom: 50px;
}

/*免費頁 詳細三大運卷軸顏色模糊四字 圖片*/
.PC #it221 .FOUR3 img {
	float: left;
	display: block !important;
	width: 70% !important;
	height: auto !important;
	margin-right: -14px !important;
}

.PC #it221 .FOUR img{
	display: block;
	width: 80%;
	height: auto;
	margin: 0 auto;
	padding: 5px;
}

/*三大運表格內四字模糊 連帶four2*/
.PC #it221 .FUTURE_WRAPPER img{
	float: left;
	width: 80% !important;
	height: auto !important;
	padding-top: 12px;/*12px*/
	padding-left: 5px;/*20px*/
	margin-right: 0vw !important;
}

/*免費頁 能量條模糊*/
.PC #it221 .FORM_WRAPPER .P_BAR{
	position: relative;
	display: block;
	width: 100%;
	height: 45px;
	padding-bottom: 12.909632571996%;
	background-repeat: no-repeat;
	background-size:cover;
}

@media screen and (max-width : 750px ){
	.PC #it221 .FORM_WRAPPER .P_BAR{
    height: 15vw;}
}

@media screen and  (min-width:568px){/*for橫螢幕*/
	.PC #it221 .FORM_WRAPPER .P_BAR{
    height: 62px;}
}
/*免費頁 三優勢二缺點牌*/
.PC #it221 .THREEADV .P_CARD img{
	display: block;
	width: 65%;
	height: auto;
	margin: 0 auto;
	padding-top: 4.5vw;
}

/*免費頁模糊區塊間距控制*/
.PC #it221 .F_MT{margin-top: 3vw;}
.PC #it221 .F_PT3{padding-top: 26px;}

/*免費頁按鈕浮動*/
.PC #it221 .F_ER{float: left;}
.PC #it221 .F_ER a{text-decoration: none;color:#fff;}
/*免費頁 能量條模糊*/
#it221 .P01{background-image: url(../images/a_fuzzy/f01.png);}

/*免費頁 十項優缺點表格上方按鈕*/
.PC #it221 .T_TABLE_BOX .FREE_FBT{
	display: block;
	position: absolute;
	width: 100%;
	overflow: hidden;
	text-align: center;
	top: 52%;
	left: 0;
}

/*免費頁 十項優缺點新增外框*/
.PC #it221 .T_TABLE_BOX{
	position: relative;
}

/*免費頁最下方產品區塊 雙按鈕*/
.PC #it221 .NEW_BT{
	display: block;
	width: 100%;
	height: auto;
	overflow: hidden;
	margin: 8px 0 0 0; 
}

.PC #it221 .NEW_BT li:nth-child(1) a{
	display: block;
	font-size: 1.1em !important;
	font-weight: bold;
}
.PC #it221 .NEW_BT li:nth-child(2) a{
	display: block;
	font-size: 1.1em !important;
	font-weight: bold;
	line-height: 39px;
}

/*免費頁 第二顆按鈕color*/
.PC #it221 .pq_BG_GOLD_YELLOW{
	color:#000;
	border:1px solid #dbaa00;
		background: -moz-linear-gradient(
		top,
		#ffe400 0%,
		#ffc600);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#ffe400),
		to(#ffc600));		
	-moz-box-shadow:inset 0px 0px 2px rgba(255,255,255,1);
	-webkit-box-shadow:inset 0px 0px 2px rgba(255,255,255,1);
	box-shadow:inset 0px 0px 2px rgba(255,255,255,1);
}

/*免費頁 最下方產品推薦區塊*/
.PC #it221 .PRODUCT_AREA{
	width: 100%;
	height: auto;
	overflow: hidden;
}

.PC #it221 .PRODUCT_AREA .PR_BG{
	width: 100%;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
	border-radius: 5px;
	background-color: #f5f5f5;
	padding: 20px;
}

.PC #it221 .PRODUCT_AREA .PRA{
	width: 100%;
	height: auto;
	overflow: hidden;
	display: inline-block;
}

.PC #it221 .PRODUCT_AREA .PRA ul{
	display: inline-block;
	width: 100%;
	height: auto;
	margin-top: 5px;
	margin-bottom: 10px;
}

.PC #it221 .PRODUCT_AREA .PRA li.PRA_L{
	width: 100%;
	height: auto;
}

.PC #it221 .PRODUCT_AREA .PRA li.PRA_R{
	width: 100%;
	height: auto;
}

.PC #it221 .PRODUCT_AREA .PRA li.P_ICON{
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
}

.PC #it221 .PRODUCT_AREA .PRA li.PRA_L img{
	display: block;
	width: 90%;
	height: auto;
	margin: 0 auto;
}

.PC #it221 .PRODUCT_AREA .PRA li.PRA_R img{
	display: block;
	width: 90% ;
	height: auto;
	margin: 0 auto;
}

/*免費頁 模糊區按鈕*/	
.PC #it221 a.BT_FUZZY{
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*免費頁大按鈕*/	
.PC #it221 a.pq_BT_FREE1{
	width: 230px;
	height: 55px;
	font-size:1.5rem;
	line-height: 55px;
	margin: 0 auto;
}

/*免費頁 置底浮水按鈕*/
.PC #it221-wrapper .DOWN_BAR .SP_T01{
	color:red;
	font-size: 0.65em;
	font-weight: normal;
	line-height: 0;
	text-align:center;
}

.PC #it221-wrapper .DOWN_BAR{
	width: 100%;
	height: auto;
	position: fixed;
	bottom: 0;
	background-image: url(../images/bt_bg.png);
	z-index: 9999;
	padding: 10px 0;
}

.PC #it221-wrapper .BT_AREA{
	width: 98%;
	height: auto;
	margin: 0 auto;
	margin-left: 2vw;
	background-color: green;
}

.PC #it221-wrapper .BT_AREA .GOLD span.TOMOBR{
	display: block;
	width: 100%;
	text-align: center;
	padding-top: 17px;
	margin-bottom: -27px;
}

.PC #it221-wrapper .BT_AREA li{
	width: 49%;
    float: left;
    overflow: hidden;
    box-sizing: border-box;
}

.PC #it221-wrapper .BT_AREA a.ONE{
	display: block;
	width:320px;
	margin:0 auto;
	height:48px;
}

.PC #it221-wrapper .BT_AREA a .SP{
	line-height: 0;
}

.PC #it221-wrapper .BT_AREA a{
	display: block;
	font-size: 1em;
	font-weight: bold;
	line-height: 50px;
	text-align: center;
	color: #ffffff;
	margin: 0 auto;
	width: 95%;
	height: 50px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color:#b21424;
	background: -moz-linear-gradient(
		top,
		#fb2121 0%,
		#b21424);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#fb2121),
		to(#b21424));
	border:1px solid #bf3539;
	-moz-box-shadow:inset 0px 0px 2px rgba(255,255,255,1);
	-webkit-box-shadow:inset 0px 0px 2px rgba(255,255,255,1);
	box-shadow:inset 0px 0px 2px rgba(255,255,255,1);}

.PC #it221-wrapper .BT_AREA a.GOLD{
	display: block;
	font-size: 1em;
	font-weight: bold;
	line-height: 44px;
	text-align: center;
	margin: 0 auto;
	width: 95%;
	height: 50px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	color:#000;
	border:1px solid #dbaa00;
		background: -moz-linear-gradient(
		top,
		#ffe400 0%,
		#ffc600);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#ffe400),
		to(#ffc600));		
	-moz-box-shadow:inset 0px 0px 2px rgba(255,255,255,1);
	-webkit-box-shadow:inset 0px 0px 2px rgba(255,255,255,1);
	box-shadow:inset 0px 0px 2px rgba(255,255,255,1);}

/*免費頁 結尾引言*/
.PC #it221 .FREE_PH{ 
	width:100%; 
	height:auto; 
	overflow:hidden; 
	clear:both;}

/*免費頁 pq配圖自定義 區塊*/
.PC #it221 .pq_REPIC2{
	width: 100%;
    height: auto;
    margin-right: 4%;
}

/*免費頁 pq配圖自定義 圖片縮放*/
.PC #it221 .pq_REPIC2 img{
	width: 85%;
    height: auto;
    margin: 0 auto;
}

.PC #it221 .FREE_PH img{
	clear:both;
	display:block;
	width:100%;
	height:auto;
}


/*免費頁 點點符號模糊字 li 浮上*/
.PC #it221 .pq_LIST_DISC li{
	width: 100%;
	float: left;
}

/*免費頁 點點符號模糊字 區塊 浮上*/
.PC #it221 .pq_LIST_DISC li > p{
	width: 100%;
	float: left !important;
}


/*平板小於內容js縮放 尾*/

/*==============================手機版=======手機版=====手機版====手機版===============================================*/

/*MOBILE表頭尾*/	
.MOBILE #float_icon, .MOBILE #header, .MOBILE .CHANG, .MOBILE .FOOT_MOBILE{ display:block;}
/*MOBILE表頭尾*/	
	
/*消失區*/
.MOBILE #it221-wrapper #INPUT_BOX,.MOBILE .PC_LOGIN,.MOBILE .FOOT_PC, .MOBILE .PRINT_BT ,.MOBILE #it221-wrapper #watermark-wrapper ,.MOBILE .pq_REPIC{ display:none;}
/*消失區尾*/
 

/*框架區*/
.MOBILE #it221{
	width:100%;
	height:auto;
	overflow:hidden;
	margin-top:45px;
	-webkit-box-sizing:border-box;
	}
.MOBILE #it221 .FRAME{
	width:100%;
	height:auto;
	overflow:hidden;
	margin:0 auto;
}
.MOBILE #it221{
	width:100%;
	height:auto;
	overflow:hidden;
	background-image:url(../images/bg.png);
	background-size:230% auto;
	background-repeat:no-repeat;
	background-position:top center;
	-webkit-box-sizing:border-box;
	}

/*框架區尾*/

/*輸入頁表頭區*/
.MOBILE #it221 .IP_FRAME{
	width: 100%;
	height: 76vw;
	overflow: hidden;
	margin: 0 auto;
}

.MOBILE #it221 .IP_TOP{
	position: relative;
	width: 100%;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
	margin-bottom: 60px;
	background-image: url(../images/topflower.png);
	background-repeat: no-repeat;
	background-size: 50% auto;
	background-position: -19vw 0px;
}


/*======手機板輸入頁============手機板輸入頁============手機板輸入頁======*/

/*手機版輸入頁動畫區*/
.MOBILE #it221 .IP_TOP .IP_ANI_FATE{
	position: relative;
	width: 100%;
	height: 280px;
	background: url(../images/in_animation_ph1.png) no-repeat top center;
	background-size: 100% auto;
	margin-top: 37vw;
}

.MOBILE #it221 .IP_TOP .IN_BALL_BOX{
	width: 16vw;
	height: 16vw;
	z-index: 2;
}

/*輸入頁動畫區 4顆球*/
/*球1*/
.MOBILE #it221 .IN_BALL01{
	position: absolute;
	display: block;
	width: 100%;
	height: auto;
	background: url(../images/in_ball01.png) no-repeat center;
	background-size: cover;
	animation-name: floatball,fadeInOut;
	animation-duration: 2.8s;
	animation-iteration-count: infinite;
	top: 0;
	left: 21%;
}

/*球2*/
.MOBILE #it221 .IN_BALL02{
	position: absolute;
	display: block;
	width: 100%;
	height: auto;
	background: url(../images/in_ball02.png) no-repeat center;
	background-size: cover;
	animation-name: floatball2,fadeInOut;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	top: 0;
	right: 21%;
}

/*球3*/
.MOBILE #it221 .IN_BALL03{
	position: absolute;
	display: block;
	width: 100%;
	height: auto;
	background: url(../images/in_ball03.png) no-repeat center;
	background-size: 110% auto;
	animation-name: floatball3,fadeInOut;
	animation-duration: 2.7s;
	animation-iteration-count: infinite;
	top: 22vw;
	left: 30%;
}

/*球4*/
.MOBILE #it221 .IN_BALL04{
	position: absolute;
	display: block;
	width: 100%;
	height: auto;
	background: url(../images/in_ball04.png) no-repeat center;
	background-size: 110% auto;
	animation-name: floatball4,fadeInOut;
	animation-duration: 3.1s;
	animation-iteration-count: infinite;
	top: 22vw;
	right: 31%;
}

/*輸入頁 標題*/
.MOBILE #it221 .IP_TOP h1{
	position: absolute;
	width:100%;
	height:0;
	padding-bottom:43.333333%;
	background-image: url(../images/in_top_title.png);
	background-size: 69% auto;
	background-repeat: no-repeat;
	text-indent:-9999px;
	top: 9%;
	left: 1%;
	z-index: 1;
}

/*輸入頁 張盛舒定位*/
.MOBILE #it221 .IP_TOP .TOP_SAM{
	position: absolute;
	width: 54%;
	height: 52vw;
	float: right;
	top: 0;
	right: -6%;
}

/*輸入頁 張盛舒圖片*/
.MOBILE #it221 .IP_TOP .TOP_SAM img{
	display: block; 
	width: 100%; 
	height: auto; 
	margin:0 auto;
}

/*輸入頁使用者反饋文區塊*/
.MOBILE #it221 .FEEDBACK_TITLE{
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-top: 10px;
}
.MOBILE #it221 .FEEDBACK_BG{
    width: 100%;
    height: auto;
    margin: 0 auto;
    overflow: hidden;
    padding: 5px 15px 10px 15px;
    border-left: 1px solid #8cc445;
	border-right: 1px solid #8cc445;
	border-bottom: 1px solid #8cc445;
	-webkit-box-sizing:border-box;
	color: #333;
}
.MOBILE #it221 .FEEDBACK_BG p.NAME{
	text-align: right;
	padding-right: 10px;  
}

/*自定義輸入頁項目區塊*/
.MOBILE #it221 .CON_BOX .pq_INPUT_BOX1{
	width: 100%;
	margin: 0 auto;
}

.MOBILE #it221 .CON_BOX .pq_INPUT_BOX1 .pq_INBAR{
	width: 100%;
	height: 50px;
	line-height: 50px;
	font-size: 1.4em;
	text-align: center;
	background: url(../images/in_title_bar.png) repeat-x;
	margin-top: 0;
	box-shadow: inset 0px 0px 18px 3px #2a5219;
	-webkit-box-shadow: inset 0px 0px 18px 3px #2a5219;
	-moz-box-shadow: inset 0px 0px 18px 3px #2a5219;
	-o-box-shadow: inset 0px 0px 18px 3px #2a5219;
}

.MOBILE #it221 .CON_BOX .pq_INPUT_BOX1 .pq_TITLE{
	box-shadow: inset 0px 0px 18px 3px #2a5219;
	-webkit-box-shadow: inset 0px 0px 18px 3px #2a5219;
	-moz-box-shadow: inset 0px 0px 18px 3px #2a5219;
	-o-box-shadow: inset 0px 0px 18px 3px #2a5219;
	height: 50px;
	line-height: 52px;
	font-size: 1em;
}

/*輸入頁用分隔線*/
.MOBILE #it221 .CON_BOX .pq_INPUT_BOX1 .LINE{
	width: 100%;
    height: 8px;
    margin: 8px 0;
    border-top: 1px dashed #427f48;
}

.MOBILE #it221 .CON_BOX .pq_INPUT_BOX1 .pq_INBOX{
	box-shadow: none;
	background-color: #fff;
	border: 1px solid #427f48;
}

/*自定義輸入頁左圖右文公版區塊*/
.MOBILE #it221 .CON_BOX .pq_CON_BOX1{
	border: 1px solid #ddeade;
	margin: 10px 0 0 0;
}

/*輸入頁下方公版左配圖介紹區塊bar*/
.MOBILE #it221 .CON_BOX .pq_CON_BOX1 .pq_CON_BOX_BAR{
	background-color: #ddeade;
	height: 50px;
	line-height: 50px;
}

.MOBILE #it221 .CON_BOX .pq_CON_BOX1 .pq_CON_BOX_BAR p{
	color: #678d69;
	font-size: .9em;
	line-height: 50px;
}

/*輸入頁項目符號*/
.MOBILE #it221 .CON_BOX .pq_CON_BOX1 .pq_LIST_ICON li{
	background: transparent url(../images/icon_2.png) no-repeat;
	background-size: 30px 30px;
    background-position-y: 2px;
    padding-left: 35px;
}

/*輸入頁項目區塊*/
.MOBILE #it221 .CON_BOX .IN_LIST_AREA1{
	width: 100%;
	height: auto;
	overflow: hidden;
	margin: 0 auto;
	border: 1px solid #427f48;
}

.MOBILE #it221 .CON_BOX .IN_LIST_CON{
	width: 95%;
	margin: 20px auto;
}

.MOBILE #it221 .CON_BOX .IN_LIST_BAR{
	width: 100%;
	height: 50px;
	line-height: 50px;
	color: #fff;
	font-size: 1.4em;
	font-weight: bold;
	text-align: center;
	background: url(../images/in_title_bar.png) repeat-x;
	box-shadow: inset 0px 0px 18px 3px #2a5219;
    -webkit-box-shadow: inset 0px 0px 18px 3px #2a5219;
    -moz-box-shadow: inset 0px 0px 18px 3px #2a5219;
    -o-box-shadow: inset 0px 0px 18px 3px #2a5219;
}

/*輸入頁pq公版按鈕*/
.MOBILE #it221-wrapper .BT_AREA2{
	width: 96%;/*500*/
	height: auto;
	margin: 0 auto;
	margin-bottom: 15px;
}

/*輸入頁 馬上算 置底按鈕*/
.MOBILE #it221-wrapper .NEW_BT_F{/*浮水按鈕*/
	width:100%;
	height:60px;
	position:fixed;
	bottom:0;
	z-index:1000;
	background-image:url(../images/bt_bg.png);
	background-repeat:repeat;
	padding-top:7px;
	background-size:15px 15px;
	}

.MOBILE #it221-wrapper .NEW_BT_F a{/*浮水按鈕*/
	margin:0 auto;
    width: 90%;
	height: 47px;
	font-size:1.5rem;
	line-height: 47px;
	text-decoration:none;
	position: static;}

/*========================================手機版輸入頁 尾========================================*/
	
/*內容區*/
.MOBILE #it221 .CONTENT{
	width:100%;
	height:auto;
	overflow:hidden;
	margin:0 auto;
	background-image:url(../images/con_bg.jpg);
	background-repeat:repeat-y;
	background-size:100% auto;
	}
.MOBILE #it221 .CONTENT_S{/*N*/
	width:95%;
	height:auto;
	overflow:hidden;
	margin:0 auto;}

.MOBILE #it221 .CONTENT_TOP{
	display: block;
	width: 100%;
	height: auto;
	margin: auto;
}

/*內容框架*/
.MOBILE #it221 .CONTENT img{display:block; width:100%; height:auto; margin:auto;}
.MOBILE #it221 .CONTENT_TOP img, .MOBILE #it221 .CONTENT_FOOT img{ display:block; width:100%; height:auto; margin:auto;}
/*共用按鈕*/
.MOBILE #it221 .pq_e_BT ul.TWO li a{
	width: 100%;
	font-size: 1.3rem;}
	.MOBILE #it221 .pq_e_BT ul.TWO li:first-child{width: 49%;}
	.MOBILE #it221 .pq_e_BT ul.TWO li:last-child{width: 49%;float: right;}
	
.MOBILE #it221 .pq_e_BT ul.TWO span.PR{font-size: 0.8em; margin-left: 2px; font-weight: normal;}
.MOBILE #it221 .pq_BT_FREE1 span.BR{font-size: 1.1rem; margin-left: 4px; font-weight: normal;}


/*共用內容框架 670*/
.MOBILE #it221 .CON_BOX{ 
	width:90%;
	height:auto;
	overflow:hidden;
	margin:0 auto;}

/*待確認*/
.MOBILE #it221 .CON_BOX form{ 
	width: 96%;
	margin: 0 auto;
}

.MOBILE #it221 .CON_BOX .pq_TIT_EX{
	line-height: 2.1rem;
	margin-bottom: 5px;}

.MOBILE #it221 .CON_BOX .COM{
	width:95%;
	height:auto;
	overflow:hidden;
	margin:0 auto;
	padding:5px;}

/*待確認*/


/*======手機板結果頁============手機板結果頁============手機板結果頁======*/

/*結果頁表頭區*/	
.MOBILE #it221 .e_TOP{
	position: relative;
	width:100%;
	height:41vw;
	margin:0 auto;
	background-image: url(../images/topflower.png);
	background-repeat: no-repeat;
	background-size: 50% auto;
	background-position: -14vw 0;
	}

/*結果頁 標題*/
.MOBILE #it221 .e_TOP h1{
	position: absolute;
	width: 100%;
	height: 0;
	padding-bottom: 38.571428571%;
	background: url(../images/e_top_title.png) no-repeat center;
	background-size: cover;
	text-indent: -9999px;
	top: 4%;
	left: 0;
	z-index: 1;
}

/*結果頁 張聖舒 定位*/
.MOBILE #it221 .e_TOP .TOP_SUN{
	position: absolute;
	width: 56%;
	height: 52vw;
	top: 0;
	right: -10%;
}

.MOBILE #it221 .e_TOP .TOP_SUN img{
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
}


/*共用結果頁 免費頁 前言區塊頭*/
.MOBILE #it221 .FOREWORDS{
	width: 100%;
	height: auto;
	margin: 0 auto;
	background-color: #e8ebdb;
	border-radius: 5px;
	padding: 10px;
	box-sizing: border-box;
}

/*結果頁 鵝黃 重點結語區塊*/
.MOBILE #it221 .FOREWORDS_P{
	width: 100%;
	height: auto;
	margin: 0 auto;
	background-color: #fcedb0;
	border-radius: 5px;
	padding: 10px;
	box-sizing: border-box;
}

/*共用結果頁 免費頁 個人資料*/
.MOBILE #it221 .INFORFATE{
	width: 100%;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
	text-align: center;
	margin:10px 0 0 0;
}

.MOBILE #it221 .INFORFATE span.GENDER{
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-bottom: -4px;
}

.MOBILE #it221 .INFORFATE span.GENDER img{
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
}

/*共用結果頁 免費頁 個人資料 尾*/
/*共用結果頁 免費頁 命宮最外框控制寬度*/
.MOBILE #it221 .RE_UNITY_BOX{
	width: 90%;
	margin: 0 auto;
	overflow: hidden;
	margin-top: 10px;
}

/*共用結果頁 免費頁 控制最外框寬度-1 大框*/
.MOBILE #it221 .WBOX{
	width: 100%;
	height: auto;
	overflow: hidden;
	margin: 0 auto;
	margin-top: 8px;
	margin-bottom: 8px;
}

/*共用結果頁 免費頁 控制最外框寬度-2 項目*/
.MOBILE #it221 .UNITY_LIST1{
	position: relative;
	width: 93%;
	height: auto;
	margin: 0 auto;
	margin-top: 10px;
	margin-bottom: 5px;
	overflow: hidden;
}

/*共用結果頁 免費頁 大標樣式*/
.MOBILE #it221 .UNITY_BAR1{
	width: 93%;
	height: 45px;
	line-height: 45px;
	margin: 0 auto;
	border-radius: 5px;
	margin-top: 15px;
}

/*共用結果頁 免費頁 NO1 NO5 大標樣式*/
.MOBILE #it221 .UNITY_BAR2{
	width: 100%;
	height: 45px;
	line-height: 45px;
	margin: 0 0 8px 0;/*margin 8px auto*/
	background-color: #f8eee8;
	border-radius: 5px;
}

/*共用結果頁 免費頁 統一綠底大標樣式*/
.MOBILE #it221 .UNITY_BAR2_2{
	width: 100%;
	height: 45px;
	line-height: 45px;
	margin: 0 auto;
	border-radius: 5px;
	background-color: #e8ebdb;
    color: #486536;
    margin-top: 25px;
}

/*共用結果頁 免費頁 綠底大標 字級樣式*/
.MOBILE #it221 .UNITY_BAR1 p{
	font-size: 1.3em;
	font-weight: bold;
	padding-left: 10px;
}

/*共用結果頁 免費頁 統一綠底大標 字級樣式*/
.MOBILE #it221 .UNITY_BAR2_2 p{
	font-size: 1.3em;
	font-weight: bold;
    color: #486536;
    padding-left: 10px;
}

/*共用結果頁 免費頁 排行榜區塊-棕色橫條bar*/
.MOBILE #it221 .UNITY_BAR2 .U_TITLEBOX ul{
	display: inline-block;
}


/*共用結果頁 免費頁 排行榜區塊-棕色橫條bar*/
.MOBILE #it221 .UNITY_BAR2 .U_TITLEBOX li{
	float: left;
	font-size: 1.3em;
	color: #a24e29;
	font-weight: bold;
	margin-right: 5px;
}

/*共用結果頁 免費頁 排行榜區塊-棕色橫條 排行ICON底圖*/
.MOBILE #it221 .UNITY_BAR2 .U_TITLEBOX li.U_MARK{
	width: 100px;
	height: 45px;
	background-image: url(../images/ph_content/co_ph03.png);
	background-repeat: no-repeat;
	background-size: cover;
	font-size: 1.3em;
	font-weight: bold;
	color: #fff;
	text-align: center;
	border-radius:5px; 
	margin-right: 5px;
}

/*共用結果頁 免費頁 排行榜三大項目區塊*/
.MOBILE #it221 .RANGE_AREA{
	width: 100%;
	height: auto;
	overflow: auto;
	box-sizing: boredr-box;
}

.MOBILE #it221 .RANGE_AREA ul{
	display: inline-block;
	margin-bottom: 10px;
	width: 100%;
}

/*共用結果頁 免費頁 三大期用標題*/
.MOBILE #it221 .RANGE_AREA li.MARK_T{
	width: 35%;
	font-weight: 500;
	margin-top: 8px;
}

/*共用結果頁 免費頁 三大期用標題模糊圖縮放*/
.MOBILE #it221 .RANGE_AREA li.MARK_T img{
	display: block;
	width: 100%;/*100%*/
	height: auto;
	margin-top: 8px;
	margin-left: 0;
}

/*結果頁 三大期用文字區塊*/
.MOBILE #it221 .RANGE_AREA li.R_TEXT{
	margin-top: 5px;
	padding-left: 12px;
}

/*共用結果頁 免費頁 排行榜置底結語與老師配圖*/
.MOBILE #it221 .RANGE_END{
	width: 100%;
	height: auto;
	overflow: hidden;
	background-color: #f9f9f9;
	border-radius: 5px;
	margin-top: 10px;
}


/*共用結果頁 免費頁 自定義卷軸 三大期 pq顏色取消*/
.MOBILE #it221 .pq_BIGWORD1{
	background-color: none;
}

.MOBILE #it221 .pq_BIGWORD1 ul{
	border:none; 
	background-color: transparent;
	height: 16vw;
}

.MOBILE #it221 .pq_BIGWORD1 ul li{
	font-size: 6.3vw;
	line-height: 7.3vw;
	color: #bb4530;
}

.MOBILE #it221 .pq_BIGWORD1 ul li:nth-child(1){
	font-size: 4vw;
	color: #fff;
}

/*共用結果頁 免費頁 三大期卷軸文字說明間距*/
.MOBILE #it221 .SCROLL_WBOX1{
	width: 100%;
	height: auto;
	overflow: hidden;
	margin-top: 10px;
}

/*共用結果頁 免費頁 三大期 最外框*/
.MOBILE #it221 .SCROLL_WBOX2{
	width: 100%;
	height: auto;
	overflow: hidden;
	margin-top: 1px;
}

/*自定義卷軸 命盤*/
.MOBILE #it221 .pq_BIGWORD2{
	display: block;
	padding-top: 1%;
}

.MOBILE #it221 .pq_BIGWORD2 ul{
	margin-top: 2px;
}

.MOBILE #it221 .pq_BIGWORD2 ul li:nth-child(1){
	margin: 2px auto;
}

.MOBILE #it221 .pq_BIGWORD2 ul li:nth-child(2){
	margin: 0;
	margin: 0 auto;
	margin-top: -6px;
}

/*共用結果頁 免費頁 pq詳細能量表左圖右文*/
.MOBILE #it221 .COLUMN_COM{
	width: 94%;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
}

.MOBILE #it221 .TWO_COM{
	width: 98%;
    height: auto;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 10px auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.MOBILE #it221 .TWO_COM .COL_PIC{
	width: 75%;
    height: auto;
    margin: 0 auto;
    position: relative;
}

/*共用結果頁 免費頁 百分比分數區塊*/
.MOBILE #it221 .TWO_COM .SCORE{
	position: absolute;
	width: 100%;
	height: auto;
	top: 54%;/*45*/
	left: 0;
}

.MOBILE #it221 .TWO_COM .SCORE p{
	font-size: 11vw;
	font-weight: bold;
	line-height: 12vw;
	text-align: center;
}

/*待確認 免費頁 XX力 樣式*/
/*.MOBILE #it221 .TWO_COM .SCORE .tit_BIG{
	font-size: 2.4em;
	line-height: .6em;
}*/

/*共用結果頁 免費頁分隔線*/
.MOBILE #it221 .RE_LINE{
	width: 100%;
    height: 8px;
    margin-top: 8px;
    border-top: 1px dashed #ededed;
}


.MOBILE #it221 .TWO_COM .COL_PIC img{
	width: 100%;
    height: auto;
    margin: 0 auto;
}

/*共用結果頁 免費頁 右文區塊*/
.MOBILE #it221 .TWO_COM .COL_TEXT{
	width: 100%;
    height: auto;
    overflow: hidden;
    vertical-align: top;
}

/*共用結果頁 免費頁 三優勢二劣勢 大框*/
.MOBILE #it221 .THREEADV{
	width: 100%;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
}

.MOBILE #it221 .THREEADV ul{
	width: 55%;
	height: auto;
	margin: 0 auto;
}

/*共用結果頁 免費頁 二劣勢 區塊*/
.MOBILE #it221 .THREEADV ul.TWO_ITEM{
	width: 55%;
	height: auto;
	margin: 0 auto;
}

/*共用結果頁 免費頁 優勢底圖*/
.MOBILE #it221 .THREEADV li{
	width: 100%;
	height: 0;
	padding-bottom: 45.4054054054054%;
	margin: 0 auto;
	text-align: center;
	background-image: url(../images/ph_ratingscale/re_ph12_1.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	font-size: 8vw;
	line-height: 21vw;
	font-weight: bold;
	color: #000000;
	margin-bottom: 10px;
}

/*共用結果頁 免費頁 劣勢底圖*/
.MOBILE #it221 .THREEADV li.DIS_AD_PH{
	width: 100%;
	height: 0;
	padding-bottom: 45.4054054054054%;
	margin: 0 auto;
	text-align: center;
	background-image: url(../images/ph_ratingscale/re_ph12_2.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	font-size: 8vw;
	line-height: 21vw;
	font-weight: bold;
	color: #000000;
	margin-bottom: 10px;
}

/*共用結果頁 免費頁 三主星*/
.MOBILE #it221 .MAIN_STAR{
	width: 100%;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
	margin-top: 12px;
	margin-bottom: 10px;
	position: relative;
}

.MOBILE #it221 .MAIN_STAR img{
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
}

.MOBILE #it221 .MAIN_STAR .STAR_TITLE{
	position: absolute;
	width: 37vw;
	height: 9vw;
	border-radius: 40px;
	top: 12%;
	left: 27%;
}

.MOBILE #it221 .MAIN_STAR .STAR_NAME{
	position: absolute;
	width: 100%;
	height: auto;
	margin: 0 auto;
	top: 12vw;
	left: 0;
}

.MOBILE #it221 .MAIN_STAR .STAR_TITLE p{
	font-size: 6vw;
	line-height: 9.5vw;
	color: #fff;
	text-align: center;
}

.MOBILE #it221 .MAIN_STAR .STAR_NAME p{
	font-size: 9vw;
	font-weight: bold;
	text-align: center;
}

/*共用結果頁 免費頁 三主星 尾*/

/*結果頁 表單輸入選擇父母親*/
.MOBILE #it221 .RADIO_AREA {
	width: 100%;
	height: auto;
	overflow: hidden;
	margin: 2px 0 8px 0;
}

/*結果頁 警示語 提醒用戶填入父母親資料*/
.MOBILE #it221 .RE_INPUT_BAR{
	width: 100%;
	height: 40px;
	line-height: 40px;
	background-color: #f9f9f9;
	margin-bottom: 8px;
	border-radius:5px;
	font-size: 1em;
	padding-left: 1%;
	color: red;
}

/*共用結果頁 免費頁 大師給予祝福 區塊*/
.MOBILE #it221 .GUIDE{
	display: block;
	width:100%;
	height:auto;
    overflow: hidden;
    padding: 0;
    clear: both;
    margin-top: 10px;
}
.MOBILE #it221 .GUIDE li {
	width: 100%;
	height: auto;
}
.MOBILE #it221 .GUIDE img{display: block;width: 100%;height: auto;margin: 0 auto;}

.MOBILE #it221 .GUIDE li.PH02 {
	width:73%;
	height:auto;
	margin: 0 auto;
}

.MOBILE #it221 .GUIDE li.TEXT02{
	width: 93%;
    height: auto;
    margin: 0 auto;
    overflow: hidden;
    vertical-align: top;
    margin-top: 10px;
    margin-bottom: 5px;
}

/*共用結果頁 免費頁 大師給予祝福 區塊尾*/

/*共用結果頁 免費頁 家庭配圖 大框*/
.MOBILE #it221 .FAMILY_ALL{
	margin-top: -25px;
}

.MOBILE #it221 .FAMILY_WRAPPER{
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 50%;
    background: url(../images/ph_family/ph_bg.jpg) no-repeat top;
    background-size: cover;
}

/*結果頁 家庭配圖 單一性別左圖*/
.MOBILE #it221 .FAMILY_WRAPPER .MEMBER_L{
    float: left;
    display: inline-block;
    width: 31%;
    margin-left: 3%;
    margin-top: 6%; 
}

/*共用結果頁 免費頁 家庭配圖 性別左圖*/
.MOBILE #it221 .FAMILY_WRAPPER .MEMBER_R{
    float: right;
    display: inline-block;
    width: 30%;
    margin-right: 4%;
    margin-top: 3%; 
}
.MOBILE #it221 .FAMILY_WRAPPER p{
    display: inline-block;
    text-align: center;
    font-size: 2.5rem;
    position: absolute;
    top: 61%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.MOBILE #it221 .FAMILY_WRAPPER .POINT{display: block;font-size: 5vw; }
.MOBILE #it221 .FAMILY_WRAPPER .NUM{font-size: 10vw;font-weight: bold;}

/*待確認*/
.MOBILE #it221 .BT_BTM{position: static;margin-top: 12px;}
.MOBILE #it221 .BT_PRINT{display:none;}

/*======手機板免費頁============手機板免費頁============手機板免費頁======*/

/*免費頁 底部置底浮水雙按鈕*/
.MOBILE #it221 .BT_AREA{
	width: 96%;
	margin: 0 auto;
	margin-bottom: 14px;
}

/*免費頁 分隔線*/
.MOBILE #it221 .FRE_LINE{
	width: 100%;
    height: 0px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-top: 1px dashed #ededed;
}

/*免費頁 家庭配圖 雙性別左圖*/
.MOBILE #it221 .FAMILY_WRAPPER .F_MEMBER_L{
    float: left;
    display: inline-block;
    width: 34%;
    margin-left: 3%;
    margin-top: 8%; 
}

/*免費頁 模糊區塊上下間距*/
.MOBILE #it221 .RANGE_AREA li.FRE_MAR{
	display: block;
	width: 100%;
}

/*項目模糊清單內的按鈕 與 UNITY_LIST1定位*/
.MOBILE #it221 .FBT_LIST{
	position: absolute;
	top: 45%;
	left: 14vw;
}

/*免費頁 項目模糊清單內按鈕*/
.MOBILE #it221 .FBT_BOX{
	position: relative;
	width: 100%;
	height: auto;
	overflow: hidden;
}

/*項目模糊清單內的按鈕 與 FBT_BOX定位*/
.MOBILE #it221 .FBT_LIST2{
	position: absolute;
	top: 35%;
	left: 14vw;
}

/*免費頁 自定義 模糊卷軸區塊 富貴之格*/
.MOBILE #it221 .pq_FREE_SCROLL1{
	width: 90%;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
}

.MOBILE #it221 .pq_FREE_SCROLL1 .FBG{
	position: relative;
}

.MOBILE #it221 .pq_FREE_SCROLL1 .FBG img{
	display: block;
	width: 100%;
	height: auto;
} 

.MOBILE #it221 .pq_FREE_SCROLL1 .FBG .F_TITLE{
	position: absolute;
	top: 2vw;
	left: 24vw;
	border-radius: 45px;
	background-color: #bb6a3d;
	width: 34vw;
	height: 5.8vw;
	line-height: 5.8vw;
	text-align: center;
	color: #fff;
	font-size:3.6vw;
	font-weight: bold;
}

/*免費頁 XX之格 模糊*/
.MOBILE #it221 .pq_FREE_SCROLL1 .FBG .F_FUZZY{
	position: absolute;
	width: 14vw;
	height: 9vw;
	top: 9vw;
	left: 28vw;
	background-image: url(../images/a_fuzzy/big4words02.png);
	background-size: 405% auto;
	background-repeat: repeat-x;
	background-position: -55px -7px;
}

/*免費頁 之格二字區分*/
.MOBILE #it221 .pq_FREE_SCROLL1 .FBG .F_FUZZY .FW{
	float: left;
	width: 100%;
	margin-left: 14vw;
	font-size: 6vw;
	font-weight: bold;
	padding-top: 2px;
}

/*免費頁 優點 模糊四字*/
.MOBILE #it221 span.FOUR{
	display: block;
	width: 75%;
	margin: 0 auto;
}

/*免費頁 三大運表格內四字模糊*/
.MOBILE #it221 span.FOUR2{
	display: inline-block;
	width:100%;
	height: auto;
	box-sizing: border-box;
}

/*免費頁 詳細三大運卷軸顏色模糊四字*/
.MOBILE #it221 .FOUR3{
	width: 60%;
	height: auto;
	margin: 0 auto;
	line-height: 1.1em !important;
	padding-bottom: 5vw;
}

/*免費頁 詳細三大運卷軸顏色模糊四字 圖片*/
.MOBILE #it221 .FOUR3 img {
	float: left;
	display: block !important;
	width: 70% !important;
	height: auto !important;
	margin-right: -14px !important;
}

.MOBILE #it221 .FOUR img{
	display: block;
	width: 80%;
	height: auto;
	margin: 0 auto;
	padding: 5px;
}

/*三大運表格內四字模糊 連帶four2*/
.MOBILE #it221 .FUTURE_WRAPPER img{
	float: left;
	width: 80% !important;
	height: auto !important;
	padding-top: 12px;/*12px*/
	padding-left: 5px;/*20px*/
	margin-right: 0vw !important;
}

/*免費頁 能量條模糊*/
.MOBILE #it221 .FORM_WRAPPER .P_BAR{
	position: relative;
	display: block;
	width: 100%;
	height: 45px;
	padding-bottom: 12.909632571996%;
	background-repeat: no-repeat;
	background-size:cover;
}

@media screen and (max-width : 750px ){
	.MOBILE #it221 .FORM_WRAPPER .P_BAR{
    height: 15vw;}
}

@media screen and  (min-width:568px){/*for橫螢幕*/
	.MOBILE #it221 .FORM_WRAPPER .P_BAR{
    height: 62px;}
}
/*免費頁 三優勢二缺點牌*/
.MOBILE #it221 .THREEADV .P_CARD img{
	display: block;
	width: 65%;
	height: auto;
	margin: 0 auto;
	padding-top: 4.5vw;
}

/*免費頁模糊區塊間距控制*/
.MOBILE #it221 .F_MT{margin-top: 3vw;}
.MOBILE #it221 .F_PT3{padding-top: 26px;}

/*免費頁按鈕浮動*/
.MOBILE #it221 .F_ER{float: left;}
.MOBILE #it221 .F_ER a{text-decoration: none;color:#fff;}

/*免費頁 十項優缺點表格上方按鈕*/
.MOBILE #it221 .T_TABLE_BOX .FREE_FBT{
	display: block;
	position: absolute;
	width: 100%;
	overflow: hidden;
	text-align: center;
	top: 52%;
	left: 0;
}

/*免費頁 十項優缺點新增外框*/
.MOBILE #it221 .T_TABLE_BOX{
	position: relative;
}

/*免費頁最下方產品區塊 雙按鈕*/
.MOBILE #it221 .NEW_BT{
	display: block;
	width: 100%;
	height: auto;
	overflow: hidden;
	margin: 8px 0 0 0; 
}

.MOBILE #it221 .NEW_BT li:nth-child(1) a{
	display: block;
	font-size: 1.1em !important;
	font-weight: bold;
}
.MOBILE #it221 .NEW_BT li:nth-child(2) a{
	display: block;
	font-size: 1.1em !important;
	font-weight: bold;
	line-height: 39px;
}

/*免費頁 第二顆按鈕color*/
.MOBILE #it221 .pq_BG_GOLD_YELLOW{
	color:#000;
	border:1px solid #dbaa00;
		background: -moz-linear-gradient(
		top,
		#ffe400 0%,
		#ffc600);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#ffe400),
		to(#ffc600));		
	-moz-box-shadow:inset 0px 0px 2px rgba(255,255,255,1);
	-webkit-box-shadow:inset 0px 0px 2px rgba(255,255,255,1);
	box-shadow:inset 0px 0px 2px rgba(255,255,255,1);
}

/*免費頁 最下方產品推薦區塊*/
.MOBILE #it221 .PRODUCT_AREA{
	width: 100%;
	height: auto;
	overflow: hidden;
}

.MOBILE #it221 .PRODUCT_AREA .PR_BG{
	width: 100%;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
	border-radius: 5px;
	background-color: #f5f5f5;
	padding: 20px;
}

.MOBILE #it221 .PRODUCT_AREA .PRA{
	width: 100%;
	height: auto;
	overflow: hidden;
	display: inline-block;
}

.MOBILE #it221 .PRODUCT_AREA .PRA ul{
	display: inline-block;
	width: 100%;
	height: auto;
	margin-top: 5px;
	margin-bottom: 10px;
}

.MOBILE #it221 .PRODUCT_AREA .PRA li.PRA_L{
	width: 100%;
	height: auto;
}

.MOBILE #it221 .PRODUCT_AREA .PRA li.PRA_R{
	width: 100%;
	height: auto;
}

.MOBILE #it221 .PRODUCT_AREA .PRA li.P_ICON{
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
}

.MOBILE #it221 .PRODUCT_AREA .PRA li.PRA_L img{
	display: block;
	width: 90%;
	height: auto;
	margin: 0 auto;
}

.MOBILE #it221 .PRODUCT_AREA .PRA li.PRA_R img{
	display: block;
	width: 90% ;
	height: auto;
	margin: 0 auto;
}

/*免費頁 模糊區按鈕*/	
.MOBILE #it221 a.BT_FUZZY{
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*免費頁大按鈕*/	
.MOBILE #it221 a.pq_BT_FREE1{
	width: 230px;
	height: 55px;
	font-size:1.5rem;
	line-height: 55px;
	margin: 0 auto;
}

/*免費頁 置底浮水按鈕*/
.MOBILE #it221-wrapper .DOWN_BAR .SP_T01{
	color:red;
	font-size: 0.65em;
	font-weight: normal;
	line-height: 0;
	text-align:center;
}

.MOBILE #it221-wrapper .DOWN_BAR{
	width: 100%;
	height: auto;
	position: fixed;
	bottom: 0;
	background-image: url(../images/bt_bg.png);
	z-index: 9999;
	padding: 10px 0;
}

.MOBILE #it221-wrapper .BT_AREA{
	width: 98%;
	height: auto;
	margin: 0 auto;
	margin-left: 2vw;
	background-color: green;
}

.MOBILE #it221-wrapper .BT_AREA .GOLD span.TOMOBR{
	display: block;
	width: 100%;
	text-align: center;
	padding-top: 17px;
	margin-bottom: -27px;
}

.MOBILE #it221-wrapper .BT_AREA li{
	width: 49%;
    float: left;
    overflow: hidden;
    box-sizing: border-box;
}

.MOBILE #it221-wrapper .BT_AREA a.ONE{
	display: block;
	width:320px;
	margin:0 auto;
	height:48px;
}

.MOBILE #it221-wrapper .BT_AREA a .SP{
	line-height: 0;
}

.MOBILE #it221-wrapper .BT_AREA a{
	display: block;
	font-size: 1em;
	font-weight: bold;
	line-height: 50px;
	text-align: center;
	color: #ffffff;
	margin: 0 auto;
	width: 95%;
	height: 50px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color:#b21424;
	background: -moz-linear-gradient(
		top,
		#fb2121 0%,
		#b21424);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#fb2121),
		to(#b21424));
	border:1px solid #bf3539;
	-moz-box-shadow:inset 0px 0px 2px rgba(255,255,255,1);
	-webkit-box-shadow:inset 0px 0px 2px rgba(255,255,255,1);
	box-shadow:inset 0px 0px 2px rgba(255,255,255,1);}

.MOBILE #it221-wrapper .BT_AREA a.GOLD{
	display: block;
	font-size: 1em;
	font-weight: bold;
	line-height: 44px;
	text-align: center;
	margin: 0 auto;
	width: 95%;
	height: 50px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	color:#000;
	border:1px solid #dbaa00;
		background: -moz-linear-gradient(
		top,
		#ffe400 0%,
		#ffc600);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#ffe400),
		to(#ffc600));		
	-moz-box-shadow:inset 0px 0px 2px rgba(255,255,255,1);
	-webkit-box-shadow:inset 0px 0px 2px rgba(255,255,255,1);
	box-shadow:inset 0px 0px 2px rgba(255,255,255,1);}

/*免費頁 結尾引言*/
.MOBILE #it221 .FREE_PH{ 
	width:100%; 
	height:auto; 
	overflow:hidden; 
	clear:both;}

/*免費頁 pq配圖自定義 區塊*/
.MOBILE #it221 .pq_REPIC2{
	width: 100%;
    height: auto;
    margin-right: 4%;
}

/*免費頁 pq配圖自定義 圖片縮放*/
.MOBILE #it221 .pq_REPIC2 img{
	width: 85%;
    height: auto;
    margin: 0 auto;
}

.MOBILE #it221 .FREE_PH img{
	clear:both;
	display:block;
	width:100%;
	height:auto;
}


/*免費頁 點點符號模糊字 li 浮上*/
.MOBILE #it221 .pq_LIST_DISC li{
	width: 100%;
	float: left;
}

/*免費頁 點點符號模糊字 區塊 浮上*/
.MOBILE #it221 .pq_LIST_DISC li > p{
	width: 100%;
	float: left !important;
}
/*輸入頁用分隔線*/
.MOBILE #it221 .CON_BOX .pq_INPUT_BOX1 .IP_LINE{
	width: 100%;
    height: 8px;
    margin-top: 15px;
    margin-bottom: 10px;
    border-top: 1px dashed #427f48;
}

/*=========================免費頁頁面尾區================*/ 
/*免費頁 表格定位按鈕*/
.PC #it221 .TA_FBT{
	position: absolute;
	top: 0;
	left:28%;
	z-index: 2;
}

/*免費頁 表格定位按鈕*/
.MOBILE #it221 .TA_FBT{
	position: absolute;
	top: 0;
	left: -2.5vw;
	z-index: 2;
}

/*=============== Karla新增區塊 ===============一*/
.PC #it221 .FORM_WRAPPER{
    width:93%; 
    margin:0 auto;
    flex-wrap: nowrap;
    box-sizing: border-box;
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 30px;
}

.MOBILE #it221 .FORM_WRAPPER{
    width:93%; 
    margin:0 auto;
    flex-wrap: nowrap;
    box-sizing: border-box;
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 30px;
}

.PC #it221 .FORM_bt {
    width: 96%;
    margin: 20px auto 0;
    clear: both;
}

.MOBILE #it221 .FORM_bt {
    width: 96%;
    margin: 20px auto 0;
    clear: both;
}

.MOBILE #it221 .MO_WID .FORM_bt{
	width: 100%;/*50*/
    margin: 20px auto 0;
    clear: both;
}

#it221 .FORM_WRAPPER .ENERGY_LIST{
    display:flex; 
    flex-direction:row;
    height: 40px;
    width: 100%;    
    margin: 0 auto; 
    justify-content:space-between;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    align-items: center;
}

#it221 .FORM_WRAPPER .ENERGY_LIST .first{
    width: calc(20%);
    border-top: 1px solid #888888;
    border-left: 1px solid #888888;
    border-bottom: 1px solid #888888;
    height: 42px;
    border-top-left-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#it221 .FORM_WRAPPER .ENERGY_LIST .level{
	display:flex; 
    flex-direction:row;
    width:calc(100% - 20% + 2px);
    border: 1px solid #888888;
    border-top-right-radius: 5px;
    height: 42px;
}
#it221 .FORM_WRAPPER .ENERGY_LIST p{
    text-align: center;
    width: 100%;
}
#it221 .FORM_WRAPPER .ENERGY_LIST  .level p:last-of-type{
    border-top-right-radius: 4px;
}
#it221 .FORM_WRAPPER .ENERGY_TXT{
    display:flex; 
    flex-direction:row;   
    justify-content: flex-start;
    width: 100%;
   /* height: 100%;*/
    align-items: center;
    border-left: 1px solid #888888;
    border-right: 1px solid #888888;
    border-bottom: 1px solid #888888; 
}
#it221 .FORM_WRAPPER .ENERGY_TXT p{
    width: calc(20%);
    font-size: 1.1rem;
    padding: 4px 0;
    text-align: center;
    border-right: 1px solid #888888;
}
#it221 .FORM_WRAPPER .ENERGY_TXT .NUM{
    display: block;
    text-align: center;
    font-weight: bold;
}
#it221 .FORM_WRAPPER .ENERGY_TXT .PERCENT_WRAPPER{width:calc(80%);}
#it221 .FORM_WRAPPER .ENERGY_TXT .PERCENT{
    height: 1.2rem;
}
#it221 .FORM_WRAPPER .ENERGY_TXT .NUM {
	padding-top: 2px;
}

/*大運區間 START*/
#it221 .FUTURE_WRAPPER .FUTURE_LIST{
    display:flex; 
    flex-direction:row;   
    margin: 0 auto; 
    border: 2px solid #eee;
    justify-content:space-between;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: #e8ebdb;    
    color: #323232;
    border-right: 2px solid #eee;/*睿逸增加*/
}
#it221 .FUTURE_WRAPPER .FUTURE_LIST div{
    text-align: center;
    padding: 4px 0;/*padding 8px 0*/
    line-height: 1.8rem;
    font-size: 1.1rem;/*1.2rem*/
}
#it221 .FUTURE_WRAPPER  .col_L{width: calc(50%);border-right: 2px solid #eee;}
#it221 .FUTURE_WRAPPER  .col_R{width: calc(50%);}
/*大運區間內文*/
.PC #it221 .FUTURE_WRAPPER{
    width: 93%;
    margin: 0 auto;
    flex-wrap: nowrap;
}

.MOBILE #it221 .FUTURE_WRAPPER{
    width: 93%;
    margin: 0 auto;
    flex-wrap: nowrap;
}

#it221 .FUTURE_WRAPPER .FUTURE_TXT{
    display:flex; 
    flex-direction:row;   
    margin: 0 auto; 
    justify-content: flex-start;
    border-left: 2px solid #eee;
    border-right: 2px solid #eee;
    border-bottom: 2px solid #eee;    
}

#it221 .FUTURE_WRAPPER .FUTURE_TXT p{
    font-size: 1.1rem;/*1.2rem*/
    padding: 4px 0;/*padding 8px 0*/
    text-align: center;
}

#it221 .FUTURE_WRAPPER .FUTURE_TXT .AGE{
    display: block;
    font-size: 1rem;
    text-align: center;
    font-weight: normal;
}

#it221 .FUTURE_WRAPPER .FUTURE_TXT .pq_TIT3{
    display: block;
    text-align: center;
    font-size: 1.24rem;
    line-height: 3.5rem;
    font-weight: bold;
}

#it221 .FUTURE_WRAPPER .FUTURE_TXT:last-of-type{
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.PC #it221 .triangle{
	display: inline-block;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 10px solid #fff;
    margin: 1px 2%;
}

.MOBILE #it221 .triangle{
	display: inline-block;
    border-top: 1.25vw solid transparent;
    border-bottom: 1.25vw solid transparent;
    border-left: 1.7vw solid #ffffff;
    margin: 1px 2%;
}
/*大運區間 END*/

@media screen and (max-width : 750px ){
#it221 .FORM_WRAPPER .ENERGY_LIST p{font-size: 3.8vw;}
#it221 .FORM_WRAPPER .ENERGY_TXT p{font-size: 4.3vw;}
#it221 .FORM_WRAPPER .ENERGY_TXT .NUM{font-size: 5vw;padding-top: 0;}
#it221 .FUTURE_WRAPPER .FUTURE_TXT .AGE{font-size: .9rem;}
}

@media screen and  (min-width:568px){/*for橫螢幕*/
#it221 .FORM_WRAPPER .ENERGY_LIST p{font-size: 1.1rem;}
#it221 .FORM_WRAPPER .ENERGY_TXT p {font-size: 1.2rem;}
#it221 .FORM_WRAPPER .ENERGY_TXT .NUM {font-size: 1.4rem;}
}

/*=============== Karla新增區塊2 ===============一*/

/*三宮位顏色*/
#it221 .BARCOLOR1{background-color: #899fcb;}
#it221 .BARCOLOR2{background-color: #c08acb;}
#it221 .BARCOLOR3{background-color: #d8a07f;}
#it221 .BARCOLOR4{background-color: #e8ebdb;}
#it221 .PURPLE001{color:#8338b6;}

/*FORM_能量顏色*/
#it221 .bg_LOW{
    background-color: #a4895f;color: #ffffff;line-height: 40px;}
#it221 .bg_MID_L{
    background-color: #8fa45b;color: #ffffff;line-height: 40px;}
#it221 .bg_NOR{
    background-color: #5c80a4;color: #ffffff;line-height: 40px;}
#it221 .bg_MID_H{
    background-color: #785fa2;color: #ffffff;line-height: 40px;}
#it221 .bg_HIGH{
    background-color: #a2547e;color: #ffffff;line-height: 40px;}
#it221 .bg_OVER_H{
    background-color: #bc5353;color: #ffffff;line-height: 40px;}

#it221 .txt_LOW{color: #a4895f;}
#it221 .txt_MID_L{color: #8fa45b;}
#it221 .txt_NOR{color: #5c80a4;}
#it221 .txt_MID_H{color: #785fa2;}
#it221 .txt_HIGH{color: #a2547e;}
#it221 .txt_OVER_H{color: #bc5353;}

/*文字底顏色*/
#it221 .UNITY_BAR_G{
    background-color: #e8ebdb;
    color: #486536;    
}
#it221 .UNITY_BAR_O{
    background-color: #ff7200;
    color: #fff;
}
#it221 .UNITY_BAR_R{background-color: #f9f9f9;}

/*大運顏色*/
#it221 .color_01{
	color: #51828b;
	border-left: 5px solid #51828b;
	padding-left: 7px;
}
#it221 .color_02{
	color: #946f51;
	border-left: 5px solid #946f51;
	padding-left: 7px;
}
#it221 .color_03{
	color: #828747;
	border-left: 5px solid #828747;
	padding-left: 7px;
}
#it221 .color_04{
	color: #333;
	border-left: 5px solid #a24e29;
	padding-left: 7px;
}

/*裝飾*/
.FORM_WRAPPER .radius-bm{
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

/*父親字色*/
#it221 .TXT_fa{color: #1a56a7;}
/*母親字色*/
#it221 .TXT_ma{color:#c4484f;}
/*小標文字*/
#it221 .txt_O{color: #e0abab;}
/*列表設定*/
#it221 .TXT_LIST{margin-top: 4px; font-weight: bold;}

/*祝福底色*/
#it221 .BG_GRAY{
  background-color: #f9f9f9; padding: 10px;/*20*/
}

/*=============== Adrian新增區塊 表格 ===============一*/
/*共用結果頁 免費頁 優勢劣勢區塊*/
.TABLE_1 .ADVANTAGE{
	background-color: #fffaf9;
	box-shadow: inset 0px 0px 15px 6px #efd1d1;
	-webkit-box-shadow: inset 0px 0px 15px 6px #efd1d1;
	-moz-box-shadow: inset 0px 0px 15px 6px #efd1d1;
	-o-box-shadow: inset 0px 0px 15px 6px #efd1d1;
}

.TABLE_1 .DISADVANTAGE{
	background-color: #f2fbff;
	box-shadow: inset 0px 0px 15px 6px #bddbeb;
	-webkit-box-shadow: inset 0px 0px 15px 6px #bddbeb;
	-moz-box-shadow: inset 0px 0px 15px 6px #bddbeb;
	-o-box-shadow: inset 0px 0px 15px 6px #bddbeb;
}

.TABLE_1{
    display:table;
    width: 93%;
    margin: 0 auto;
    border: 1px solid #eee;
    border-top: none;
	box-sizing: border-box;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
  }

.TABLE_1 .T_TOP{
	width: 100%;
	height: 50px;
	display: table-caption;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
}

.TABLE_1 .T_TOP p{
	font-size: 1.3em;
	line-height: 50px;
	text-align: center;
}

.TR_BOX{
    display: table-row;
    line-height: 40px;
}

.TR_BOX .T_TD{
    display: table-cell;
    text-align: center;
    border: 1px solid #eee;
    font-size: 1.1em;
    width: 50%;
		height: auto;
}

/*共用結果頁 免費頁三優勢二劣勢表格小按鈕*/
.TABLE_BT{
	width: 85%;
	height: 35px;
	margin: 0 auto;
	overflow: hidden;
	margin-top: 5px;
}

/*共用結果頁 免費頁 三優勢二劣勢表格小按鈕*/
.TABLE_BT a{
	display: block;
	width: 26%;
	height: 35px;
	line-height: 35px;
	text-align: center;
	font-size: 1.1em;
	margin: 0 auto;
}

/*共用結果頁 免費頁 表格棕色區塊樣式*/
.PC .TABLE_BT{
	width: 100%;
	height: 35px;
	margin: 0 auto;
	overflow: hidden;
	margin-top: 5px;
} 

.MOBILE .TABLE_BT{
	width: 100%;
	height: 35px;
	margin: 0 auto;
	overflow: hidden;
	margin-top: 5px;
}
.PC .TABLE_BT a{
	display: block;
	width: 100%;
	height: 35px;
	line-height: 35px;
	text-align: center;
	font-size: 1.1em;
	margin: 0 auto;
}

.MOBILE .TABLE_BT a{
	display: block;
	width: 100%;
	height: 35px;
	line-height: 35px;
	text-align: center;
	font-size: 1.1em;
	margin: 0 auto;
}

.PC .TABLE_TIPS{
	width: 93%;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
	padding: 5px 5px 0 5px;
	color: #a24e29;
	box-sizing: border-box;
	margin-bottom: -1%;
} 

.MOBILE .TABLE_TIPS{
	width: 93%;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
	padding: 5px 5px 0 5px;
	color: #a24e29;
	box-sizing: border-box;
	margin-bottom: -1%;
} 

/*=========================試算頁面尾區================*/

/*制定各裝置螢幕縮放*/
@media screen and (min-width : 375px ) {

	.MOBILE #it221 .FOUR2 img{
	padding-top: 10px;
	}

	/*項目模糊清單內的按鈕 與 UNITY_LIST1定位*/
	.MOBILE #it221 .FBT_LIST{
		position: absolute;
		top: 45%;
		left: 17vw;/*24*/
	}

	/*項目模糊清單內的按鈕 與 FBT_BOX定位*/
	.MOBILE #it221 .FBT_LIST2{
		position: absolute;
		top: 45%;
		left: 15vw;/*22*/
	}
}

@media screen and (min-width : 414px ) {
	/*直排運勢表格內四模糊字*/
	.MOBILE #it221 .FOUR2 img{
	padding-top: 7px;
	padding-bottom: 0;
	}
}

/*iphone5*/
@media screen and (min-width : 568px ) {
	
	.MOBILE #it221 .FOUR img{
		width: 56%;
	}
	.MOBILE #it221 .FOUR2{
		width: 60% !important;
	}
	.MOBILE #it221 .FOUR2 img{
		width: 80% !important;
		padding-top: 12px;
		padding-bottom: 0;
	}

	.MOBILE #it221 .F_PT{
		padding-top: .9vw !important;
	}

	.MOBILE #it221 .F_PT2{
		padding-top: .7vw;
	}
	/*共用結果頁 免費頁 三大期用標題*/
	.MOBILE #it221 .RANGE_AREA li.MARK_T{
		width: 25%;
		font-weight: 500;
		margin-top: 8px;
	}
	/*免費頁 表格定位按鈕*/
	.MOBILE #it221 .TA_FBT{
		position: absolute;
		top: 6%;
		left: 8.5vw;
		z-index: 2;
	}
}

/*iphone6*/
@media screen and (min-width : 667px ) {

	.MOBILE #it221 .FOUR img{
		width: 45%;
	}

	.MOBILE #it221 .FOUR2 img{
		padding-top: 9px;
		padding-bottom: 0;
	}

	.MOBILE #it221 .F_PT{
		padding-top: 0.7vw !important;
	}

	.MOBILE #it221 .F_PT2{
		padding-top: 1vw;
	}
	/*項目模糊清單內的按鈕 與 FBT_BOX定位*/
	.MOBILE #it221 .FBT_LIST2{
		position: absolute;
		top: 45%;
		left: 27vw;
	}
	/*共用結果頁 免費頁 三大期用標題*/
	.MOBILE #it221 .RANGE_AREA li.MARK_T{
		width: 20%;
		margin-top: 8px;
	}
	/*免費頁 表格定位按鈕*/
	.MOBILE #it221 .TA_FBT{
		position: absolute;
		top: 6%;
		left: 10.5vw;
		z-index: 2;
	}
}

@media screen and (min-width : 736px ){

	.MOBILE #it221 .F_PT{
		padding-top: 1.8vw !important;
	}

	.MOBILE #it221 .F_PT2{
		padding-top: .7vw;
	}
	/*項目模糊清單內的按鈕 與 UNITY_LIST1定位*/
	.MOBILE #it221 .FBT_LIST{
		position: absolute;
		top: 45%;
		left: 27vw;
	}
	/*共用結果頁 免費頁 三大期用標題*/
	.MOBILE #it221 .RANGE_AREA li.MARK_T{
		width: 20%;
		font-weight: 500;
		margin-top: 8px;
	}
	/*免費頁 表格定位按鈕*/
	.MOBILE #it221 .TA_FBT{
		position: absolute;
		top: 6%;
		left: 11.5vw;
		z-index: 2;
	}
	/*共用結果頁 免費頁 三大期用標題*/
	.MOBILE #it221 .RANGE_AREA li.MARK_T{
		width: 19%;
		margin-top: 8px;
	}
}

/*iphoneX*/
@media screen and (min-width : 812px ){
	.MOBILE #it221 .FOUR2{
		width: 60% !important;
	}
	.MOBILE #it221 .FOUR2 img{
		width: 80% !important;
		padding-top: 6px;
		padding-bottom: 5px;
	}
}