@import url("reset.css");
body{
	-webkit-text-size-adjust:none;
	text-decoration:none;
	font-family: "微軟正黑體", "新細明體", "細明體",Arial, Helvetica, sans-serif;
}

/*共用間距*/
#it248 .BLANK{ width:100%; height:20px;}
.MOBILE #it248 .BLANK{ width:100%; height:10px;}		
#it248 .BLANK02{ width:100%; height:10px;}	

/*==============桌機版================桌機版==============桌機版=============================================*/
/*PC表頭尾*/	
.PC .PC_LOGIN, .PC .FOOT_PC{ width:100%; display:block;}
/*PC表頭尾*/

/*消失區*/
.PC #float_icon, .PC #header, .PC .FOOT_MOBILE{ display:none;}
/*消失區尾*/

		

/*框架區*/
.PC #it248{
	width:100%;
	height:auto;
	overflow:hidden;
	background-image:url(https://gimgs.click108.com.tw/unit001/item00248/images/top_bg.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: top center ;
	background-size: 2050px auto;
	background-color: #cf7367;
	padding-bottom: 30px;}
/*框架區尾*/

/*櫻花雨*/
.PC #it248 .SAKURA{
    width: 100%;
    height: 1080px;
    position: absolute;
    top: 40px;
    left: 0;}
    .PC #it216 .SAKURA .snowfall-flakes{animation:sakura 2s linear infinite;}
    @-webkit-keyframes sakura{
    0% {transform:rotate3d(0, 0, 0, 0deg);}
    25%{transform:rotate3d(0, 1, 0, 60deg);}
    50%{transform:rotate3d(1, 1, 0, 0deg);}
    75%{transform:rotate3d(1, 0, 0, -180deg);}
    100% {transform:rotate3d(1, 0, 0, 0deg);}
    }	
/*表頭區*/
/*TOP*/
.PC #it248 .TOP_BG_0{
	width: 750px;
	height: auto;
	margin: 0 auto;
	position:relative;
}
.PC #it248 .TOP_BG_S{
	width: 750px;
	height: auto;
	margin: 15px auto 0 auto;
	position:relative;
}

.PC #it248 h1{
	width: 730px;
	height: 150px;
	margin:0 auto;
	margin-top: 5px;
	background-image:url(https://gimgs.click108.com.tw/unit001/item00248/images/top_title.png);
	background-position: top center;
	background-size: cover;
	background-repeat:no-repeat;
	text-indent:-9999px;
}

.PC #it248 .TOP_BG_0 h2{
	width: 100%;
	height: 63px;
	margin:0 auto;
	background-image:url(https://gimgs.click108.com.tw/unit001/item00248/images/s_title.png);
	background-repeat:no-repeat;
	background-position: 168px 0;
	text-indent: -99999px;
}

.PC #it248 h3 .TOP_WOMAN{
	width:190px;
	height: 385px;
	position: absolute;
	left: 21%;
	bottom: 2%;
	overflow: hidden;
	background: url(https://gimgs.click108.com.tw/unit001/item00248/images/top_woman.png) no-repeat;
}
.PC #it248 h3 .TOP_MAN{
	width:190px;
	height: 385px;
	right: 16%;
	bottom: 2%;
	background: url(https://gimgs.click108.com.tw/unit001/item00248/images/top_man.png) no-repeat;
	position: absolute;}

/*動態浮現*/
.PC #it248 h3 .OS1{
	width: 180px;
	height: 80px;
	background: url(https://gimgs.click108.com.tw/unit001/item00248/images/input_os1.png) no-repeat center top;
	background-size: cover;
	position: absolute;
	left: 38%;
	top: 36%;
	-webkit-animation: osfloatl 6s infinite;
	-moz-animation: osfloatl 6s infinite;
	animation: osfloatl 6s infinite;}
@-webkit-keyframes osfloatl
	{
		0% {opacity:0.5;filter:alpha(opacity=50);}
		15% {opacity:1.0;filter:alpha(opacity=100);}
		30% {opacity:0.5;filter:alpha(opacity=50);}
        40% {opacity:0.5;filter:alpha(opacity=50);}
		60% {opacity:1.0;filter:alpha(opacity=100);}
		80% {opacity:0.5;filter:alpha(opacity=50);}
		100% {opacity:0.5;filter:alpha(opacity=50);}
    }

.PC #it248 h3 .OS2{
	width: 180px;
	height: 80px;
	background: url(https://gimgs.click108.com.tw/unit001/item00248/images/input_os2.png) no-repeat center top;
	background-size: cover;
	position: absolute;
	left: 35%;
	top: 52%;
	-webkit-animation: osfloatr 6s infinite;
	-moz-animation: osfloatr 6s infinite;
	animation: osfloatr 6s infinite;}
@-webkit-keyframes osfloatr
	{
		0% {opacity:0.5;filter:alpha(opacity=50);}
		20% {opacity:0.5;filter:alpha(opacity=50);}
		30% {opacity:1.0;filter:alpha(opacity=100);}
        40% {opacity:0.5;filter:alpha(opacity=50);}
		60% {opacity:0.5;filter:alpha(opacity=50);}
		80% {opacity:1.0;filter:alpha(opacity=100);}
		100% {opacity:0.5;filter:alpha(opacity=50);}
    }

.PC #it248 h3 .OS3{
	width: 180px;
	height: 80px;
	background: url(https://gimgs.click108.com.tw/unit001/item00248/images/input_os3.png) no-repeat center top;
	background-size: cover;
	position: absolute;
	left: 38%;
	top: 69%;
	-webkit-animation: osfloatb 6s infinite;
	-moz-animation: osfloatb 6s infinite;
	animation: osfloatb 6s infinite;}
@-webkit-keyframes osfloatb
	{
		0% {opacity:0.5;filter:alpha(opacity=50);}
		20% {opacity:0.5;filter:alpha(opacity=50);}
		30% {opacity:0.5;filter:alpha(opacity=50);}
        40% {opacity:1.0;filter:alpha(opacity=100);}
		60% {opacity:0.5;filter:alpha(opacity=50);}
		80% {opacity:0.5;filter:alpha(opacity=50);}
		100% {opacity:1.0;filter:alpha(opacity=100);}
    }
/*動態浮現 尾*/

/*主視覺動態按鈕區塊*/
.PC #it248 .bt_txt-primary{
	font-size: 2rem;
	font-weight: bold;
	font-family: "微軟正黑體", "Microsoft JhengHei", sans-serif, Helvetica, Arial;
	line-height: normal;
}
.PC #it248 .button_style1{
    font-family: "微軟正黑體", "Microsoft JhengHei", sans-serif, Helvetica, Arial;
    width: 100%;
	height: 75px;
    background-image: url(https://gimgs.click108.com.tw/unit001/item00248/images/button_bg.png);
    background-size: cover;
    text-align: center;
    background-position: center top;
    background-repeat: no-repeat;
    text-decoration: none;
}

#it248 .button_style1:hover{
    background-position: bottom center;
}
.PC #it248 .TOP_BG_0 .button_case{
	width:334px;
	height: auto;
	background-color: #8c0000;
	margin:0 auto;
	margin-top:320px;
	margin-bottom: 20px;
}

.PC #it248 .TOP_BG_0 .button_case .animation_bt{
	position: relative;
	width:100%;
    height: auto;
    box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.5);
    transition: all .4s ease;
    overflow: hidden;
	margin:0 auto;
}

.PC #it248 .TOP_BG_0 .button_case .animation_bt::after{
	position: absolute;
	right: 5%;
    top: 40%;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-image: url(https://gimgs.click108.com.tw/unit001/item00248/images/button_arrow.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
	animation: move 2.5s infinite;
}
@keyframes move {
	0%{
		transform: translateX(0px);
	}
    25%{
		transform: translateX(5px);
	}
    50%{
		transform: translateX(0px);
	}
}

.PC #it248 .TOP_BG_0 .button_case .animation_bt:hover{
    transition: all .4s ease;
    transform: scale(1.05);
    filter: brightness(1.1);
}

.PC #it248 .TOP_BG_0 .button_case .animation_bt a{
	position: relative;
	display: block;
	color:#ffffff;
	text-shadow: 2px 2px 8px #8c0000,
    -2px -2px 2px #8c0000,
    -2px 2px 2px #8c0000,
    2px -2px 2px #8c0000;
	animation: brightness-bt 3.5s infinite;
}
@keyframes brightness-bt {
	0%,100%{
		filter: brightness(1);
	}
    1%{
		filter: brightness(1.3);
	}
    35%,95%{
		filter: brightness(1);
	}
}

.PC #it248 .button_case .animation_bt ul.single{
	width:100%;
    display:block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.PC #it248 .button_case .animation_bt .sheen::after{
    content:'';
    position: absolute;
    top:0%;
    left: 60%;
	width: 30px;
	height: 75px;
	background: #ffb5b592;
	z-index: 99;
    filter: blur(12px);
    transform: rotate(60deg);
    animation: sheen 3.5s infinite;
}
@keyframes sheen {
	0%,100% { /*0%到100%的關鍵影格都是left:0%,opacity:0%*/
		left: 60%;
		opacity: 0;
	}
	1% {
		opacity: 0.8;
	}
	35%,95% { /*35%到95%的關鍵影格都是left:100%,opacity:0%*/
		left: 100%;
		opacity: 0;
	}
}

/*表頭區尾*/

/*內容區*/
.PC #it248 .CONTENT{
	width:750px;
	height:auto;
	overflow:hidden;
	margin:0 auto;
	background-image:url(https://gimgs.click108.com.tw/unit001/item00248/images/con_bg.jpg);
	background-size:100% auto;
	position: relative;
}
/*內容框架*/
.PC #it248 .CONTENT_TOP img, .PC #it248 .CONTENT_FOOT img{display:block; width:750px; height:41px; margin:0 auto;}	


/*=========================輸入頁面頭區================*/
.PC #it248 .CON_BOX{ 
	width:670px;
	height:auto;
	overflow:hidden;
	margin:0 auto;}
.PC #it248 .pq_INPUT_BOX1{
	margin-top: 0px;}
#it248 .CON_IMG_M{
	width: 100%;
	height: auto;
	margin: 0 auto;}
#it248 .CON_IMG_M img{
	width: 100%;
	height: auto;}
.PC #it248 .pq_INBOX{
	font-size: 1.3rem;
    line-height: 1.7em;
}
.MOBILE #it248 .pq_INBOX{
	line-height: 1.8rem;
    font-size: 1.1rem; 
}

/*分析項目展開區*/
.PC #it248 #SINGLE_BOX{
	width:100%;
	height:auto;
	overflow:hidden;
	clear:both;
	margin:15px auto;}
.PC #it248 #SINGLE_BOX .WHAT_BOX02_BAR{
	width:100%;
	height:66px;
	background-image:url(https://gimgs.click108.com.tw/unit001/item00248/images/input_bar.jpg);
	background-repeat:no-repeat;
	margin:0 auto;
	text-align:center;
	font-size:1.6rem;
	line-height:66px;
	color:#FFF;
	font-weight:bold;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
    position: relative;}
.PC #it248 #SINGLE_BOX .WHAT_BOX_BG{
	padding: 2% 12%;
	color: #333;
	background-color: #fefbff;
	box-shadow: inset 0px 0px 20px 10px rgba(255, 129, 129, 0.3);
	-webkit-box-shadow: inset 0px 0px 20px 10px rgba(255, 129, 129, 0.3);
	-moz-box-shadow: inset 0px 0px 20px 10px rgba(255, 129, 129, 0.3);}
.PC #it248 #SINGLE_BOX .WHAT_BOX_BG .pq_TXT1{line-height: 2.5rem;}
#it248 #SINGLE_BOX .WHAT_BOX_BG .IP_LINE{
	width: 100%;
    height: 8px;
    margin-top: 10px;
    margin-bottom: 5px;
    border-top: 1px dashed #007fee;
}
#it248 #SINGLE_BOX .WHAT_BOX_BG .pq_LIST_ICON{
	margin-top: 10px;
	margin-bottom: 15px;
}
/*輸入框*/
.PC #it248 .ENTER_TOP_BAR{
	width:100%;
	height:70px;
	background-repeat:no-repeat;
	margin:15px auto 0 auto;
	text-align:center;
	font-size:1.6rem;
	line-height:70px;
	color:#FFF;
	font-weight:bold;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;}
.PC #it248 .ENTER_S1{background-image:url(https://gimgs.click108.com.tw/unit001/item00248/images/enter_top.jpg);}
.PC #it248 .ENTER_BGS1{
	width:100%;
	height:auto;
	overflow:hidden;
	background-image:url(https://gimgs.click108.com.tw/unit001/item00248/images/enter_bg.jpg);
	background-repeat:repeat-y;
	margin:0 auto;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	padding: 20px 30px 5px 30px;}
.PC #it248 .ENTER_FOOT{
	width:100%;
	height:36px;
	overflow: hidden;
	clear: both;
	background-image:url(https://gimgs.click108.com.tw/unit001/item00248/images/enter_foot.jpg);
	background-repeat:no-repeat;
	margin:0 auto 15px auto;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;}
.PC #it248 .pq_ADT3{color: #333}
/*輸入框 尾*/

/*==浮水按鈕==*/
.PC #it248-wrapper .NEW_BT_F{/*浮水按鈕*/
	width: 100%;
	height: 60px;
	position:fixed;
	bottom:0;
	z-index:1000;
	background-image: url(https://gimgs.click108.com.tw/unit001/item00248/images/bt_bg.png);
	background-repeat:repeat;
	padding-top:5px;}
	
.PC #it248-wrapper .NEW_BT_F a{/*浮水按鈕*/
	display:block;
	margin:0 auto;
	width: 300px;
	height: 48px;
	font-size:1.5rem;
	line-height: 48px;
	text-decoration:none;
	position: static;}
/*==浮水按鈕==*/
/*=========================輸入頁面尾區================*/

/*=========================結果頁面區================*/
/*表頭區*/	
#it248 .TOP_BG_0 h1.S_TOP{
	margin: 20px auto 5px auto;
}

/*你們的關係現況*/
#it248 .pq_RECOM1 .INFORBOX{
	width: 100%;
	height: 460px;
	overflow: hidden;
	background-image: url(https://gimgs.click108.com.tw/unit001/item00248/images/text_bg/name_bg.jpg);
	background-size: contain;
	background-position: top center;
	background-repeat: no-repeat;
	background-color: #d9bbb2;
	position: relative;
}
.MOBILE #it248 .pq_RECOM1 .INFORBOX{
	height: 90vw;
}

.PC #it248 .pq_RECOM1 .INFORBOX .LEFT_PERSON{
	width: 110px;
	height: auto;
	position: absolute;
	top: 11%;
	left: 22%;
}
.MOBILE #it248 .pq_RECOM1 .INFORBOX .LEFT_PERSON{
	width: 20%;
	height: auto;
	position: absolute;
	top: 11%;
	left: 18%;
}
.PC #it248 .pq_RECOM1 .INFORBOX .RIGHT_PERSON{
	width: 110px;
	height: auto;
	position: absolute;
	top: 11%;
	right: 22%;
}
.MOBILE #it248 .pq_RECOM1 .INFORBOX .RIGHT_PERSON{
	width: 20%;
	height: auto;
	position: absolute;
	top: 11%;
	right: 18%;
}
#it248 .pq_RECOM1 .INFORBOX .LEFT_PERSON img, #it248 .pq_RECOM1 .INFORBOX .RIGHT_PERSON img{
	width: 100%;
	height: auto;
}
/*個人資料*/
#it248 .pq_RECOM1 .INFORBOX .INFOR{
	width:420px;
	height:200px;
	margin:0 auto;
	background-color: rgba(255, 255, 255, 0.8);
	position: absolute;
	z-index: 2;
	bottom: 5%;
	left: 18%;
	border-radius: 20px;
	box-shadow: 0 0px 8px 2px rgba(0, 0, 0, 0.2);
	}
.MOBILE #it248 .pq_RECOM1 .INFORBOX .INFOR{
	width:90%;
	height: auto;
	overflow: hidden;
	left: 5%;
}

#it248 .pq_RECOM1 .INFORBOX .INFOR ul{
	display: flex;
	width: 96%;
	margin: 10px auto;
	justify-content:space-around;
}
#it248 .pq_RECOM1 .INFORBOX .INFOR ul li{
	text-align: center;
	flex-direction: row;
}
#it248 .pq_RECOM1 .INFORBOX .INFOR .GENDER{ 
	display:inline-block;
	width:30px;
	height:30px;
	margin:0 auto;
	margin-bottom:-8px;
	margin-left: 5px;}
#it248 .pq_RECOM1 .INFORBOX .INFOR .GENDER img{ 
	display:block;
	width:100%;
	height:auto;
	margin:0 auto;}

#it248 .pq_RECOM1 .INFORBOX .INFOR .BAR{
	width: 100%;
	height: 40px;
	background-color: #9e4d82;
	color: #FFF;
	text-align: center;
	font-weight: bold;
	font-size: 1.3rem;
	line-height: 40px;
	}

#it248 .pq_RECOM1 .INFORBOX .INFOR .WORD{
	font-weight: bold;
	font-size: 2.3rem;
	line-height: 2em;
	color:#872270;
	text-align: center;
}
.MOBILE #it248 .pq_RECOM1 .INFORBOX .INFOR .WORD{
	font-size: 2rem;
	line-height: 2em;
}
/*個人資料尾*/
/*捲軸文系列*/
#it248 .WORD01{
    width: 100%;
    height: 0;
	padding-bottom: 28.07%;
    margin: 10px auto;
    background-image: url(https://gimgs.click108.com.tw/unit001/item00248/images/t02_word.jpg);
	background-size: cover;
	font-size: 3rem;
	color: #4b0e00;
    text-align: center;
	font-weight: bold;}
.MOBILE #it248 .WORD01{
	font-size: 1.6rem;
	line-height: 1.4em;
}
#it248 .WORD01 p.s_info{
	padding-top: 35px;
	font-size: 1.5rem;
	line-height: 30px;
    vertical-align: bottom;
}
.MOBILE #it248 .WORD01 p.s_info{
	padding-top: 4.5vw;
	font-size: 1.1rem;
	line-height: 1.3rem;
}
#it248 .WORD01 p.s_info span{
	margin: 0 10px;
}
#it248 .WORD01 b.badge_p{
	height: 30px;
    width: 30px;
    line-height: 30px;
    display: inline-block;
	margin-bottom: -6px;
    border-radius: 50%;
    border: solid 3px #FF1493;
    overflow: hidden;
	margin-right: 5px;
}
.MOBILE #it248 .WORD01 b.badge_p{
	height: 20px;
    width: 20px;
    line-height: 20px;
	border: solid 2px #FF1493;
	margin-right: 2px;
}
#it248 .WORD01 b.badge_b{
	height: 30px;
    width: 30px;
    line-height: 30px;
    display: inline-block;
    margin-bottom: -6px;
    border-radius: 50%;
    border: solid 3px #0088ff;
    overflow: hidden;
	margin-right: 5px;
}
.MOBILE #it248 .WORD01 b.badge_b{
	height: 20px;
    width: 20px;
    line-height: 20px;
	border: solid 2px #0088ff;
	margin-right: 2px;
}
#it248 .WORD02{
	width: 80%;
    height: 0;
	padding-bottom: 33%;
    margin: 0px auto 20px auto;
    background-image: url(https://gimgs.click108.com.tw/unit001/item00248/images/t11_word.jpg);
	background-size: cover;
	font-size: 3rem;
	text-indent: 30%;
	line-height: 4.5em;
	color: #4b0e00;
    text-align: center;
	font-weight: bold;
}
.MOBILE #it248 .WORD02{
	text-indent: 32%;
    font-size: 1.8rem;
    line-height: 3.8em;
}
#it248 .WORD04{
	width: 100%;
    height: 0;
	padding-bottom: 27.58%;
    margin: 0px auto 10px auto;
    background-image: url(https://gimgs.click108.com.tw/unit001/item00248/images/s2/t12_word.png);
	background-size: cover;
	font-size: 3rem;
	line-height: 3.2em;
	color: #4b0e00;
    text-align: center;
	font-weight: bold;
}
.MOBILE #it248 .WORD04{
	font-size: 7vw;
	line-height: 3.2em;
}
#it248 .WORD05{
	width: 100%;
    height: 0;
	padding-bottom: 24.13%;
    margin: 0px auto 10px auto;
    background-image: url(https://gimgs.click108.com.tw/unit001/item00248/images/t14_word.jpg);
	background-size: cover;
	font-size: 3rem;
	line-height: 3em;
	color: #4b0e00;
    text-align: center;
	font-weight: bold;
}
.MOBILE #it248 .WORD05{
	font-size: 7.5vw;
	line-height: 2.7em;
}
#it248 .WORD06{
	width: 96%;
    height: 0;
	padding-bottom: 29%;
    margin: 10px auto;
	background-size: cover;
	color: #4b0e00;
    background-image: url(https://gimgs.click108.com.tw/unit001/item00248/images/t16_word.jpg);
    text-align: center;
	font-weight: bold;
	color: #e2005a;}
#it248 .WORD06 p.NAME{
	font-size: 3.4rem;
	line-height: 1.4em;
}
.MOBILE #it248 .WORD06 p.NAME{
	font-size: 2rem;
}

/*五行陣*/
.PC #it248 .FIVE{
	width:100%;
	height:auto;
	overflow:hidden;
    margin-bottom: -55px;}
	
.PC #it248 .FIVE_BG{
	width:100%;
	height:572px;
	position: relative;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 80% auto;
    background-image: url(https://gimgs.click108.com.tw/unit001/item00248/images/five/bg.jpg);
	}
.PC #it248 .FIVE_BG .BALL01{
	width:195px;
	height: 195px;
	position: absolute;
	left: 5%;
	top:32%;
	background-repeat: no-repeat;
	background-position: center center; 
	}
	
.PC #it248 .FIVE_BG .BALL02{
	width:195px;
	height: 195px;
	position: absolute;
	right: 4%;
	top:32%;
	background-repeat: no-repeat;
	background-position: center center;
	}

.PC #it248 .FIVE_BG .BA_TEXT{/*球中字型*/
	font-size: 1.5rem;
	line-height: 1.2rem;
	color: #000;
	text-align: center;
	margin-top: 27%;
	text-shadow:0px 0px 10px #FFF,0px 0px 10px #FFF,0px 0px 10px #FFF; 
	}

.PC #it248 .FIVE_BG .BA_TEXT02{/*球中字型*/
	font-size: 3.2rem;
    line-height: 5.5rem;
	color: #fff;
	text-align: center;
	font-weight: bold;
	text-shadow:0px 0px 5px #000,0px 0px 15px #333;
	}
.PC #it248 .FIVE_BG .CENTER_TEXT{
	width:240px;
	height: 240px;
	position: absolute;
	left: 32%;
	top:27%;
	background-repeat: no-repeat;
	background-position: center center;}
/*五行陣end*/
#it248 .FRAME_WORD{
	width: 100%;
    height: 0;
	padding-bottom: 30.90%;
    margin: 10px auto;
	background-size: cover;
	color: #4b0e00;
    background-image: url(https://gimgs.click108.com.tw/unit001/item00248/images/bg_comment.jpg);
    text-align: center;
	font-weight: bold;
	color: #e2005a;}

#it248 p.s_tit{
	padding-top:32px;
	font-size: 1.8rem;
	color: #9f5645;
	}
.MOBILE #it248 p.s_tit{
	padding-top:4vw;
	font-size: 1.1rem;
}
#it248 .FRAME_WORD p.SCORE{
	font-size: 3.6rem;
	line-height: 1.4em;
}
.MOBILE #it248 .FRAME_WORD p.SCORE{
	font-size: 2rem;
	line-height: 1.4em;
}
.MOBILE #it248 .FRAME_WORD p.SCORE .pq_TIT1{
	line-height: 1.4em;
}

/*月曆*/
.PC #it248 .CALENDAR{
	width:100%;
	height:auto;
    padding: 2% 0;
	overflow: hidden;}
#it248 .TITLE_BARP{
    width: 80%;
    height: 52px;
    margin: 0px auto 15px auto;
    -moz-border-radius:50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
    color: #FFF;
	background-color: #bf588c;
    text-align: center;
	font-weight: bold;
    font-size: 2rem;
	line-height: 52px;}
.MOBILE #it248 .TITLE_BARP{
	 width: 94%;
	 height: 45px;
	 line-height: 45px;
	 font-size: 1.4rem;
}
.PC #it248 .txt_BOX{width: 94%;margin: 0 auto;}
.PC #it248 .pq_CALENDAR2 .YEAR{
	font-size: 1.6rem;
}
/*雙玉動畫區塊*/
#it248 #REANIall{
	width: 664px;
	height: 350px;
	overflow: hidden;
	background-image: url(https://gimgs.click108.com.tw/unit001/item00248/images/s2/ani_bg.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	margin-bottom: -40px;
}
.MOBILE #it248 #REANIall{
	width: 100%;
	height: 0;
	padding-bottom: 52.710843373494%;
	margin-bottom: -20px;
}

#it248 #REANIall .RBOX1{
	position: relative;
	width: 100%;
	height: auto;
	overflow: hidden;
}

#it248 #REANIall .RBOX1 ul{
	display: block;
	width: 520px;
	height: auto;
	margin: 0 auto;
	margin-top: 30px;
	overflow: hidden;
}
.MOBILE #it248 #REANIall .RBOX1 ul{
	width: 85%;
	margin-top: 15px;
}

#it248 #REANIall .RBOX1 li{
	float: left;
	width: 260px;
	height: 280px;
}

.MOBILE #it248 #REANIall .RBOX1 li{
	width: 50%;
	height: auto;}

#it248 #REANIall .RBOX1 li img{
	display: block;
	width: 90%;
	height: auto;
	margin: 0 auto;
}
.MOBILE #it248 #REANIall .RBOX1 li img{width: 80%;}
#it248 #REANIall .RBOX1 li .LIGHT_LEFT{
	position: absolute;
	width: 260px;
	height: 260px;
	top: 8%;
	left: 11%;
	background-image: url(https://gimgs.click108.com.tw/unit001/item00248/images/s2/anilight.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% auto;
	-webkit-animation: lightleft 6s infinite linear;
}
@-webkit-keyframes lightleft{
	0% {opacity:1.0;filter:alpha(opacity=100);transform: rotate(0deg);}
	20% {opacity:0.2;filter:alpha(opacity=70);}
    50% {opacity:1.0;filter:alpha(opacity=100);}
	80% {opacity:0.2;filter:alpha(opacity=70);}
	100% {opacity:1.0;filter:alpha(opacity=100);transform: rotate(360deg);}
  }
.MOBILE #it248 #REANIall .RBOX1 li .LIGHT_LEFT{
	top: 14%;
	width: 35%;
	height: 0;
	padding-bottom: 35%;
}
#it248 #REANIall .RBOX1 li .LIGHT_RIGHT{
	position: absolute;
	width: 260px;
	height: 260px;
	top: 8%;
	right: 11%;
	background-image: url(https://gimgs.click108.com.tw/unit001/item00248/images/s2/anilight2.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% auto;
	-webkit-animation: lightright 6s infinite linear;
}
@-webkit-keyframes lightright{
	0% {opacity:0.2;filter:alpha(opacity=70);transform: rotate(0deg);}
	20% {opacity:1.0;filter:alpha(opacity=100);}
	50% {opacity:0.2;filter:alpha(opacity=70);}
    80% {opacity:1.0;filter:alpha(opacity=100);}
	100% {opacity:0.2;filter:alpha(opacity=70);transform: rotate(360deg);}
  }
.MOBILE #it248 #REANIall .RBOX1 li .LIGHT_RIGHT{
	top: 14%;
	width: 35%;
	height: 0;
	padding-bottom: 35%;
}
#it248 #REANIall .BALL1{
	position: absolute;
	width: 125px;
	height: 125px;
	overflow: hidden;
	top: 33%;
	left: 21%;
}

#it248 #REANIall .BALL2{
	position: absolute;
	width: 125px;
	height: 125px;
	overflow: hidden;
	top: 33%;
	right: 21%;
}
.MOBILE #it248 #REANIall .BALL1{
	width: 19%;
	height: auto;
	overflow: hidden;
	left: 19%;
}

.MOBILE #it248 #REANIall .BALL2{
	width: 19%;
	height: auto;
	overflow: hidden;
	right: 20%;
}

#it248 #REANIall .BALL1 img,#it248 #REANIall .BALL2 img{
	display: block;
	width: 100%;
	height: auto;
	margin:0 auto;
}
/*動畫光束*/
#it248 #REANIall .ANILIGHT{
	position: absolute;
	width: 300px;
	height: 300px;
	background-image: url(https://gimgs.click108.com.tw/unit001/item00248/images/s2/anilight.png);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% auto;
	top: 1%;
	left: 3%;
}

.MOBILE #it248 #REANIall .ANILIGHT{
	width: 100%;
	height: 0;
	padding-bottom: 52.5%;
	background-size: 95% auto;
	top: -4%;
	left: -1%;
}
/*動畫區塊人名*/
.PC #it248 #REANIall .ANAME{
	position: absolute;
	width: 600px;
	height: auto;
	overflow: hidden;
	top: 2%;
	left: 5%;
}
.MOBILE #it248 #REANIall .ANAME{
	position: absolute;
	width: 87%;
	height: auto;
	overflow: hidden;
	top: 35%;
	left: 6.5%;
	z-index: 20;
}
#it248 #REANIall .ANAME ul{
	display: block;
	width: 86%;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
}
.MOBILE #it248 #REANIall .ANAME ul{
	width: 100%;
}

#it248 #REANIall .ANAME li{
	float: left;
	width: 50%;
	height: auto;
}

#it248 #REANIall .ANAME li p{
	color: #333;
	font-size: 1.7rem;
	font-weight: bold;
	text-align: center;
	line-height: 315px;
}

.MOBILE #it248 #REANIall .ANAME li p{
	font-size: 1.1rem;
	line-height: 1.6em;
}

#it248 #REANIall .name_col{text-shadow:0px 0px 8px #FFF,0px 0px 8px #FFF,0px 0px 8px #FFF;}
#it248 #REANIall .main_col{text-shadow:0px 0px 8px #FFF,0px 0px 8px #FFF,0px 0px 8px #FFF;}

/*點擊展開訊息動畫*/
#it248 .WORD03{
    width: 100%;
    height: 0;
	padding-bottom: 67.16%;
    margin: 0 auto;
    margin-top: 10px;
    background-image: url(https://gimgs.click108.com.tw/unit001/item00248/images/s1/word_message.jpg);
	margin-bottom: 8px;
	background-size:cover;
	position: relative;
	}
	#it248 .WORD03 p{
	display: block;
	width: 100%;
	text-shadow: 0px 0px 8px #FFF,
    0px 0px 8px #FFF,
	0px 0px 8px #FFF,
	0px 0px 8px #FFF;
	font-family: "標楷體";
	font-size: 3rem;
	color: #333;
    text-align: center;
	font-weight: bold;
	position: absolute;
	vertical-align:middle;
	top: 40%;
	}
#it248 .WORD03 .BT{
    display: block;
    width: 80%;
    height: 0; 
	padding-bottom: 39.5%;
	background-image: url(https://gimgs.click108.com.tw/unit001/item00248/images/s1/special_bt.png);
	background-size:cover;
	position: absolute;
	left: 10%;
	top: 20%;
	z-index: 1;
}

.PC #it248 .WORD03 a.BT:hover{
	top: 21%;
}

/*pq自製*/
.PC #it248 .pq_TXT3{font-size: 1.1rem;line-height: 2rem;}
.PC #it248 .pq_RECOM_BOX{width: 91%;padding-bottom: 25px;padding-top: 20px; position: relative;}
.PC #it248 .pq_CALENDAR2 .TIME{ color:#e3297c;}
.PC #it248 .pq_CALENDAR2 .TIME2{ color:#186168;}
.PC #it248 .pq_TWO_COM{display: flex;align-items:center;margin-bottom:20px;}
.PC #it248 .pq_TWO_COM .pq_REPIC{flex-direction:row;width: 30%;margin-right: 3%}
.PC #it248 .pq_TWO_COM .pq_RETEXT{flex-direction:row;width: 66%;padding-top: 15px;}
.PC #it248 .pq_TWO_COM .NOPADDING{padding-top: 0;}
.PC #it248 .pq_RECOM1 .pq_RETOP img {width: 100%;}
.PC #it248 .GUIDE .pq_RETEXT{margin-top: -20px;}
#it248 .pq_LIST_ICON li{margin-bottom: 4px;}

/*RESULT 內文單欄區*/
.PC #it248 .pq_RECOM1{/*純框線款*/
	margin-top: 0px;
	margin-bottom: 30px;
	width:670px;
	height:auto;
	overflow:hidden;
	border:3px solid #739b8a;
	border-top: none;
	position: relative;}
.PC #it248 .pq_RETOP{
    width:670px;
	height:auto;
    overflow: hidden;
	box-sizing: border-box;}

#it248 .pq_RECOM_F{/*特殊底款*/
	margin-top: 0px;
	margin-bottom: 30px;
	width:100%;
	height:auto;
	overflow:hidden;
	background-color: #fff3c3;
	padding: 2% 5%;
	border-radius: 0 0 50px 50px;
	box-shadow: rgba(190,163,54,0.8) 0px 3px 20px 0px inset; }
.MOBILE #it248 .pq_RECOM_F{margin-bottom: 0px;padding:2%;}
/*=========================結果頁面區尾================*/

/*=========================免費頁面區-================*/
/*免費頁 動畫*/
.PC #it248 .FIVE_BG .ANI2{
	width:240px;
	height: 240px;
	position: absolute;
	left: 32%;
	top:27%;
	overflow: hidden;
	position: relative;
	background-size: 100% auto;}
.PC #it248 .FIVE_BG .ANI2 .IMG{
	width: 960px;
	height: 240px;
	background: url(https://gimgs.click108.com.tw/unit001/item00248/images/five/gm.png) no-repeat left top;
	background-size: 960px 240px;
	position: absolute;
	-webkit-animation: pcpage 6s infinite;
	-moz-animation: pcpage 6s infinite;
	animation: pcpage 6s infinite;}
	@-webkit-keyframes pcpage {
		0% {left:0px; opacity: 0;}
		12% {left:0px; opacity: 1;}
		24% {left:0px; opacity: 0;}
		25% {left:-240px; opacity: 0;}
		37% {left:-240px; opacity: 1;}
		49% {left:-240px; opacity: 0;}
		50% {left:-480px; opacity: 0;}
		62% {left:-480px; opacity: 1;}
		74% {left:-480px; opacity: 0;}
		75% {left:-720px; opacity: 0;}
		87% {left:-720px; opacity: 1;}
		99% {left:-720px; opacity: 0;}
		100% {left:0px; opacity: 0;}
	}
/*免費頁 動畫end*/
#it248 .free_btbox{
	width:100%;
	height: auto;
	position: relative;
	overflow: hidden;
}

#it248 .free_btbox span{
	width:100%;
	height:auto;
}

.PC #it248 .free_btbox span a{
	width: 60%;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
	text-decoration: none;
}

.MOBILE #it248 .free_btbox span a{
	width: 100%;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
	text-decoration: none;
}

#it248 .free_btbox span a .s_bttxt{
	font-size:1.3rem;
	padding:0px 5px;
}

#it248 .free_btbox span a.s_subtxt{
	width:100%;
	font-size:1rem;
	text-align: center;
	text-shadow: 0 0 0.2em #fff, 0 0 0.2em #fff, 0 0 0.2em #fff, 0 0 0.2em #fff;
	color: #0088ff;
}
#it248 .FREE_PH{ width:100%; height:auto; overflow:hidden; margin:10px auto; clear:both;}

#it248 .FREE_PH img{ clear:both;display:block; margin:0 auto;}

.MOBILE #it248 .FREE_PH .pq_e_BT{
	width: 90%;
	margin-bottom: 20px;
}
/*=========================免費頁面尾區================*/
/*=========================列印頁面區================*/
.PC #it248 .PRINT_TOP{
	width:680px;
	height:200px;
	margin:0 auto 10px auto;}
.PC #it248 .PRINT_TOP img{width: 100%; height: auto;}

.PC #it248 .PRINT_BG{
	width:680px;
	margin:0 auto;
background-color: #FFF;}

/*=========================列印頁面尾區================*/

	
/*==============================手機版=======手機版=====手機版====手機版===============================================*/
/*MOBILE表頭尾*/
.MOBILE #float_icon, .MOBILE #header, .MOBILE .CHANG, .MOBILE .FOOT_MOBILE{ display:block;}
/*MOBILE表頭尾*/

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


/*框架區*/
.MOBILE #it248{
	width:100%;
	height:auto;
	overflow:hidden;
	background-image:url(https://gimgs.click108.com.tw/unit001/item00248/images/top_bg.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 270% auto;
	background-color: #cf7367;
	margin-top: 45px;}
/*框架區尾*/
/*櫻花雨*/
.MOBILE #it248 .SAKURA{display: none;}	
/*表頭區*/
/*TOP*/
.MOBILE #it248 .TOP_BG_0{
	width: 100%;
	height: 90vw;
	margin: 0 auto;
	position:relative;
}

.MOBILE #it248 .TOP_BG_S{
	width: 100%;
	height: 22vw;
	margin: 5px auto;
	position:relative;
}
.MOBILE #it248 .TOP_BG_S h1{
	margin-top: 4%;
}
.MOBILE #it248 h1{
	width: 100%;
	height: 0;
	margin: 5px auto 0 auto;
	padding-bottom: 20.54%;
	background-image:url(https://gimgs.click108.com.tw/unit001/item00248/images/top_title.png);
	background-position: top center;
	background-size: cover;
	background-repeat:no-repeat;
	text-indent:-9999px;
}

.MOBILE #it248 .TOP_BG_0 h2{
	width: 60%;
	height: 0;
	padding-bottom: 9%;
	background-image:url(https://gimgs.click108.com.tw/unit001/item00248/images/s_title.png);
	background-repeat:no-repeat;
	text-indent: -99999px;
	background-size: cover;
	margin: 0 auto;
}
.MOBILE #it248 h3 .TOP_WOMAN{
	width: 27%;
    height: 0;
    padding-bottom: 56%;
    position: absolute;
    left: 20%;
    top: 34%;
	overflow: hidden;
	background: url(https://gimgs.click108.com.tw/unit001/item00248/images/top_woman.png) no-repeat;
	background-size: cover;
}
.MOBILE #it248 h3 .TOP_MAN{
	width: 27%;
    height: 0;
    padding-bottom: 56%;
    position: absolute;
    right: 17%;
    top: 34%;
	background: url(https://gimgs.click108.com.tw/unit001/item00248/images/top_man.png) no-repeat;
	background-size: cover;
	position: absolute;}

/*動態浮現*/
.MOBILE #it248 h3 .OS1{
	width: 26%;
	height: 0;
	padding-bottom: 12%;
	background: url(https://gimgs.click108.com.tw/unit001/item00248/images/input_os1.png) no-repeat center top;
	background-size: cover;
	position: absolute;
	left: 37%;
	top: 36%;
	-webkit-animation: osfloatl 6s infinite;
	-moz-animation: osfloatl 6s infinite;
	animation: osfloatl 6s infinite;}

.MOBILE #it248 h3 .OS2{
	width: 26%;
	height: 0;
	padding-bottom: 12%;
	background: url(https://gimgs.click108.com.tw/unit001/item00248/images/input_os2.png) no-repeat center top;
	background-size: cover;
	position: absolute;
	left: 35%;
	top: 52%;
	-webkit-animation: osfloatr 6s infinite;
	-moz-animation: osfloatr 6s infinite;
	animation: osfloatr 6s infinite;}

.MOBILE #it248 h3 .OS3{
	width: 26%;
	height: 0;
	padding-bottom: 12%;
	background: url(https://gimgs.click108.com.tw/unit001/item00248/images/input_os3.png) no-repeat center top;
	background-size: cover;
	position: absolute;
	left: 36%;
	top: 68%;
	-webkit-animation: osfloatb 6s infinite;
	-moz-animation: osfloatb 6s infinite;
	animation: osfloatb 6s infinite;}

/*主視覺動態按鈕區塊*/
.MOBILE #it248 .bt_txt-primary{
	font-size: 6vw;
	font-weight: bold;
	font-family: "微軟正黑體", "Microsoft JhengHei", sans-serif, Helvetica, Arial;
	line-height: normal;
}

.MOBILE #it248 .button_style1{
    font-family: "微軟正黑體", "Microsoft JhengHei", sans-serif, Helvetica, Arial;
    width: 100%;
	height: 75px;
    background-image: url(https://gimgs.click108.com.tw/unit001/item00248/images/button_bg.png);
    background-size: cover;
    text-align: center;
    background-position: center top;
    background-repeat: no-repeat;
    text-decoration: none;
}

.MOBILE #it248 .button_style1:hover{
    background-position: bottom center;
}

.MOBILE #it248 .TOP_BG_0 .button_case{
	width:55%;
	height: auto;
	background-color: #8c0000;
	margin:0 auto;
	margin-top:45vw;
}

.MOBILE #it248 .TOP_BG_0 .button_case .animation_bt{
	position: relative;
	width:100%;
    height: auto;
    box-shadow: 0 5px 15px 0px rgba(0,0,0,0.5);
    transition: all .4s ease;
    overflow: hidden;
	margin:0 auto;
}

.MOBILE #it248 .TOP_BG_0 .button_case .animation_bt::after{
	position: absolute;
	right: 5%;
    top: 40%;
	content: "";
	display: block;
	width:3vw;
    height: 3vw;
    background-image: url(https://gimgs.click108.com.tw/unit001/item00248/images/button_arrow.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
	animation: move 2.5s infinite;
}

.MOBILE #it248 .TOP_BG_0 .button_case .animation_bt a{
	position: relative;
	display: block;
	width: 100%;
    height: 0;
    padding-bottom: 22.222222%;
	color:#ffffff;
	text-shadow: 2px 2px 8px #8c0000,
    -2px -2px 2px #8c0000,
    -2px 2px 2px #8c0000,
    2px -2px 2px #8c0000;
	animation: brightness-bt 3.5s infinite;
}

.MOBILE #it248 .button_case .animation_bt ul.single{
	width:100%;
    display:block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.MOBILE #it248 .TOP_BG_0 .animation_bt .sheen::after{
    content:'';
    position: absolute;
    top:0%;
    left: 60%;
	width: 20px;
	height: 12vw;
	background: #ffb5b592;
	z-index: 99;
    filter: blur(10px);
    transform: rotate(30deg);
    animation: sheen 3.5s infinite;
}
/*表頭區尾*/


/*內容區*/
.MOBILE #it248 .CONTENT{
	width:100%;
	height:auto;
	overflow:hidden;
	margin:0 auto;
	background-image:url(https://gimgs.click108.com.tw/unit001/item00248/images/con_bg.jpg);
	background-size:100% auto;
	}
/*內容框架*/
.MOBILE #it248 .CONTENT_TOP img, .MOBILE #it248 .CONTENT_FOOT img{display:block; width:100%; height: auto;}	

/*=========================輸入頁面頭區================*/
.MOBILE #it248 .CON_BOX{ 
	/*max-width: 678px;*/
	width:100%;
	height:auto;
	overflow:hidden;
	margin:0 auto;
	padding: 0% 4% 2% 4%;}
.MOBILE #it248 .CON_BOX img{ width: 100%; height: auto;}
.MOBILE #it248 .pq_INPUT_BOX1{
	margin-top: 0px;}

/*分析項目展開區*/
.MOBILE #it248 #SINGLE_BOX{
	width:100%;
	height:auto;
	overflow:hidden;
	clear:both;}
.MOBILE #it248 #SINGLE_BOX .WHAT_BOX02_BAR{
	width:100%;
	height:60px;
	background-image:url(https://gimgs.click108.com.tw/unit001/item00248/images/input_bar.jpg);
	background-size: cover;
	background-position: center;
	text-align:center;
	font-size:1.3rem;
	line-height:60px;
	color:#FFF;
	font-weight:bold;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
    position: relative;}
.MOBILE #it248 #SINGLE_BOX .WHAT_BOX_BG{
	padding:2% 5%;
	color: #333;
	background-color: #fefbff;
	box-shadow: inset 0px 0px 20px 10px rgba(255, 129, 129, 0.3);
	-webkit-box-shadow: inset 0px 0px 20px 10px rgba(255, 129, 129, 0.3);
	-moz-box-shadow: inset 0px 0px 20px 10px rgba(255, 129, 129, 0.3);}
.MOBILE #it248 #SINGLE_BOX .WHAT_BOX_BG .pq_ADT1{line-height: 2rem;font-size: 1.2rem;}
.MOBILE #it248 #SINGLE_BOX .WHAT_BOX_BG .pq_TXT1{line-height: 1.8rem;font-size: 1.1rem;}
.MOBILE #it248 #SINGLE_BOX .WHAT_BOX_BG li+li{margin-top: 8px;}
.MOBILE #it248 #SINGLE_BOX .WHAT_BOX_BG li>ul>li+li{margin-top: 0px;}
/*輸入框*/
.MOBILE #it248 .ENTER_TOP_BAR{
	width:100%;
	height: 60px;
	margin:15px auto 0 auto;
	text-align:center;
	font-size:1.3rem;
	line-height:60px;
	color:#FFF;
	font-weight:bold;
	background-size: cover;
	background-position: center;}
.MOBILE #it248 .ENTER_S1{background-image:url(https://gimgs.click108.com.tw/unit001/item00248/images/input_bar.jpg);}
.MOBILE #it248 .ENTER_BGS1{
	width:100%;
	height:auto;
	overflow:hidden;
	padding: 5% 3%;
	border: 1px solid #3a8dd1;
	border-top: none;}
.MOBILE #it248 .ENTER_FOOT{
	display: none;}
/*輸入框*/
/*輸入框radio顏色設定*/
.MOBILE #it248 .wq-group .radio label {
	padding-left: 0px;
}
.MOBILE #it248 .wq-group .radio label:before {
    content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 10px;
	position: absolute;
	left: 10%;
	top: 14px;
	background-color: #fff;
	box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
	border-radius: 20px;
	border: 1px solid #aaa;
}
.MOBILE #it248 .wq-group .radio label.s1 {
    cursor: pointer;
    position: relative;
    float: left;
    width: 48%;
    height: 40px;
    text-align: center;
    background-color: #fff;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: #743ad1;
    border: 1px solid #743ad1;
	font-size: 1.2rem;
	line-height: 32px;
	font-weight: bold;
}
.MOBILE #it248 .wq-group input[type=radio]:checked + label.s1:before {
    content: "\2022";
    color: #743ad1;
    font-size: 35px;
    text-align: center;
    line-height: 20px;
}
.MOBILE #it248 .wq-group .radio label.s2 {
	float: right;
    color: #f65567;
    border: 1px solid #f65567;
}
.MOBILE #it248 .wq-group input[type=radio]:checked + label.s2:before {
    content: "\2022";
    color: #f65567;
    font-size: 35px;
    text-align: center;
    line-height: 20px;
}
/*輸入框radio顏色設定 尾*/
/*占術介紹*/
.MOBILE #it248 .CON_BOX_BAR02{/*NEW*/
	width:100%;
	height:60px;
	margin:0 auto;
	background-color: #fbe2c9;}
.MOBILE #it248 .CON_BOX_BAR02 p{/*NEW*/
	font-size:1.6rem;
	line-height:60px;
	color: #bf8950;
	font-weight:bold;
	text-align:center;}
.MOBILE #it248 .CON_BOX_BG02{/*NEW*/
	width:100%;
	height:auto;
	overflow:hidden;
	margin:0 auto;
	border: 1px solid #fbe2c9;}
.MOBILE #it248 .CON_BOX_BG02 .BOX_INSET{/*內縮*/
	width: 90%; 
	height: auto;
	clear:both;
	overflow: hidden;
	margin: 0 auto; 
	margin:10px auto;}

/*測算項目list-pq自製*/
.MOBILE #it248 .pq_LIST_ICON li>ul>li{
	width: 100%;
	position: relative;
	left: 0px;
	padding-left: 1.1rem;
	text-indent: 0px;}
.MOBILE #it248 .pq_LIST_ICON li>ul>li::before{
	position: absolute;
	left: -5px;
}

/*=========================試算頁面頭區================*/
.MOBILE #it248-wrapper .NEW_BT_F{/*浮水按鈕*/
	width:100%;
	height:60px;
	position:fixed;
	bottom:0;
	z-index:1000;
	background-image:url(https://gimgs.click108.com.tw/unit001/item00248/images/bt_bg.png);
	background-repeat:repeat;
	padding-top:7px;
	background-size:15px 15px;}

.MOBILE #it248-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 #it248 .RE_TOP{
	width:100%;
	overflow: hidden;
	background:url(https://gimgs.click108.com.tw/unit001/item00248/images/top_bg.jpg) no-repeat top center;
	background-size: 155% auto;
	margin-top: 45px;
	}
.MOBILE #it248 .RE_TOP h1{
	width:100%;
	height:0;
	overflow: hidden;
	padding-bottom: 37%;
	background-image:url(https://gimgs.click108.com.tw/unit001/item00248/images/top_title.png);
	background-repeat: no-repeat;
	background-size: 92% auto;
	background-position: center;
	text-indent:-9999px;
	}


/*姓名五行內容*/
.MOBILE #it248 .NAME_FIVE{
	width:100%;
	height:auto;
	overflow:hidden;}
	
.MOBILE #it248 .NAME_FIVE_BG{
	width:100%;
	height:0;
	padding-bottom:78.644578313253%;
	background-repeat: no-repeat;
	background-size:cover;
	position: relative;
	}

.MOBILE #it248 .NAME_TEXT01 ul{
	width:28%;
	height: 100px;
	margin: 0 auto;
	text-align: center;
	position: absolute;
	top:20vw;
	left: 15%;
}

.MOBILE #it248 .NAME_TEXT01 li{
	float: left;
	width: 50%;
}
.MOBILE #it248 .NAME_TEXT02 ul{
	width: 45%;
	height: 100px;
	margin: 0 auto;
	text-align: center;
	position: absolute;
	top:20vw;
	right:0%;
}

.MOBILE #it248 .NAME_TEXT02 li{
	float:left;
	width: 33.3333333%;
}

.MOBILE #it248 .NAME_TEXT03{
	width:50%;
	height: 10vw;
	margin: 0 auto;
	text-align: center;
	position: absolute;
	top:8vw;
	left: 25%;
}

.MOBILE #it248 .NAME_TEXT04 ul{
	width:60%;
	height: 5vw;
	margin: 0 auto;
	text-align: center;
	position: absolute;
	bottom:25vw;
	left: 20%;
}

.MOBILE #it248 .NAME_TEXT04 li{
	float: left;
	width:33.3333333334%;
	height: 5vw;
	margin: 0 auto;
	text-align: center;
}

.MOBILE #it248 .NAME_TEXT05{
	width:50%;
	height: 8vw;
	margin: 0 auto;
	text-align: center;
	position: absolute;
	bottom:13%;
	left: 25%;
	background-color: #ba1c5b;
	-moz-border-radius:50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	color: #fff;
	font-weight: bold;
	font-size: 5vw;
	line-height: 8vw;
}

.MOBILE #it248 .NAME_TEXT06{
	width:100%;
	height: 3vw;
	margin: 0 auto;
	text-align: center;
	position: absolute;
	bottom:5vw;
	color: #460000;
	font-size: 3vw;
	line-height: 3vw;
}

/*姓名五行字型*/

.MOBILE #it248 .NAME_FIVE .NAM{
	width: 100%;
	height: 13vw;
	font-size: 12vw;
	line-height: 12vw;
	color: #000;
}

.MOBILE #it248 .NAME_FIVE .NAM_S{
	width: 100%;
	height: 6vw;
	font-size: 3vw;
	line-height: 3vw;
	color: #000;
}

.MOBILE #it248 .NAME_FIVE .NAM_S02{
	font-size: 3vw;
	color: #999;
}
.MOBILE #it248 .NAME_FIVE .NAM_S03{
	font-size:5vw;
	line-height:6vw;
	color: #762200;
	font-weight: bold;
}

.MOBILE #it248 .NAME_FIVE .NAM_RED{
	color: #f14c8e;
}

.MOBILE #it248 .NAME_FIVE .NAM_YELLOW{
	color: #ffea00;
}
/*姓名五行內容尾*/

/*五行陣*/
.MOBILE #it248 .FIVE{
	width:100%;
	height:auto;
	overflow:hidden;
	margin-top:10px;}
	
.MOBILE #it248 .FIVE_BG{
	width:100%;
	height:0;
	padding-bottom:100%;
	background:url(https://gimgs.click108.com.tw/unit001/item00248/images/five/bg.jpg) no-repeat top center;
	background-size:cover;
	position: relative;}
.MOBILE #it248 .FIVE_BG .BALL01{
	width:35%;
	height:0;
	padding-bottom:35%;
	background-size:cover;
	position: absolute;
	left: 0%;
	top:33%;
	background-repeat: no-repeat;
	background-position: center center;
	}
.MOBILE #it248 .FIVE_BG .BALL02{
	width:35%;
	height:0;
	padding-bottom:35%;
	background-size:cover;
	position: absolute;
	right: 0%;
	top:33%;
	background-repeat: no-repeat;
	background-position: center center;
}
.MOBILE #it248 .FIVE_BG .BA_TEXT{/*球中字型*/
	font-size: 4vw;
	line-height: 4vw;
	color: #000;
	text-align: center;
	margin-top: 25%;
	text-shadow:0px 0px 10px #FFF,0px 0px 10px #FFF,0px 0px 10px #FFF; 
}
.MOBILE #it248 .FIVE_BG .BA_TEXT02{/*球中字型*/
	font-size: 9vw;
    line-height: 1.6em;
	color: #fff;
	text-align: center;
	font-weight: bold;
	text-shadow:0px 0px 5px #000,0px 0px 15px #333;
	}
.MOBILE #it248 .FIVE_BG .CENTER_TEXT{
	width:40%;
	height:0;
	padding-bottom:40%;
	background-size:cover;
	position: absolute;
	left: 30%;
	top:30%;
	background-repeat: no-repeat;
	background-position: center center;}
/*五行陣end*/

/*月曆*/
.MOBILE #it248 .CALENDAR{
	width:100%;
	height:auto;
    padding: 3% 0;
    margin: 0 auto;
	overflow: hidden;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;}
.MOBILE #it248 .CALENDAR .TITLE{
    width: 180px;
    height: 40px;
    margin: 10px auto;
    -moz-border-radius:50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
    color: #FFF;
    text-align: center;
	font-weight: bold;
    font-size: 1.5rem;
	line-height: 40px;}
.MOBILE #it248 .pq_CALENDAR2 .YEAR{
	font-size: 1.6rem;
}

/*點擊展開訊息動畫*/
.MOBILE #it248 .WORD03 p {
    font-size: 8vw;}

/*開運配圖內容*/
.MOBILE #it248 .MAP_COM{
	width: 100%;
	height: auto;
	overflow: hidden;}

.MOBILE #it248 .MAP_COM .MAP_PH{
	width: 60%;
	height: auto;
	overflow: hidden;
	margin: 10px auto;}
.MOBILE #it248 .MAP_COM .MAP_PH img{width: 100%;height: auto;}
.MOBILE #it248 .MAP_COM .MAP_TEXT{
	width: 100%;
	height: auto;
	overflow: hidden;
	margin: 5px 0;}
/*pq自製*/
.MOBILE #it248 .pq_TXT3{font-size: 1.2rem;line-height: 1.9rem;}
.MOBILE #it248 .pq_RECOM_BOX{width: 93%;position: relative;padding-left: 2%;}
.MOBILE #it248 .pq_CALENDAR2 .TIME{ color:#e3297c;}
.MOBILE #it248 .pq_CALENDAR2 .TIME2{ color:#186168;}
.MOBILE #it248 .pq_TWO_COM .pq_REPIC{width: 60%;margin: 0 auto;display: block; margin-bottom: 10px;}
.MOBILE #it248 .GUIDE {width: 96%; margin: -10px auto 15px auto;}
.MOBILE #it248 .GUIDE .pq_REPIC{display: none}
/*RESULT 內文單欄區*/
.MOBILE #it248 .pq_RECOM1{/*純框線款*/
	border-color: #739b8a;
	margin-top: 0px;
	position: relative;
	border-top: none;}


/*=========================結果頁面區尾================*/

/*=========================免費頁面區-================*/
/*免費頁 動畫*/
.MOBILE #it248 .FIVE_BG .ANI2{
	width:40%;
	height:0;
	padding-bottom:40%;
	background-size:cover;
    position: absolute;
	left: 30%;
	top:26vw;
	overflow: hidden;
	position: relative;}
.MOBILE #it248 .FIVE_BG .ANI2 .IMG{
	width:100%;
	height:0;
	padding-bottom:100%;
	background: url(https://gimgs.click108.com.tw/unit001/item00248/images/five/gm.png) no-repeat left top;
	background-size:cover;
	position: absolute;
	-webkit-animation: mbpage 6s infinite;
	-moz-animation: mbpage 6s infinite;
	animation: mbpage 6s infinite;}
	@-webkit-keyframes mbpage {
    0% {background-position-x: 0; opacity: 0;}
    12% {background-position-x: 0; opacity: 1;}
    24% {background-position-x: 0; opacity: 0;}
    25% {background-position-x: 33%; opacity: 0;}
    37% {background-position-x: 33%; opacity: 1;}
    49% {background-position-x: 33%; opacity: 0;}
    50% {background-position-x: 66%; opacity: 0;}
    62% {background-position-x: 66%; opacity: 1;}
    74% {background-position-x: 66%; opacity: 0;}
    75% {background-position-x: 100%; opacity: 0;}
    87% {background-position-x: 100%; opacity: 1;}
    99% {background-position-x: 100%; opacity: 0;}
    100% {left:0%; opacity: 0;}
}
/*免費頁 動畫end*/
.MOBILE #it248 .FUZZY_BOX1{/*沒有圖*/
	width: 100%;
	position: absolute;
	top: 45%;
	left: 0;
	margin: 0 auto;
	z-index: 500;
}
.MOBILE #it248 .FUZZY_BOX2{
	width: 100%;
	overflow: hidden;
	position: absolute;
	top: 72%;
	left: 0;
	margin: 0 auto;
	z-index: 500;
}
.MOBILE #it248 .FUZZY_BOX3{/*不指定位置*/
	width: 100%;
	margin: 0 auto;
}
.MOBILE #it248 .FUZZY_BOX1 .W50{width: 100%;}
.MOBILE #it248 .FUZZY_BOX2 .W50{width: 100%;}
.MOBILE #it248 .FUZZY_BOX1 p,.MOBILE #it248 .FUZZY_BOX2 p,.MOBILE #it248 .FUZZY_BOX3 p{
	margin-top: 8px;
	text-align: center;
	text-shadow: 0 0 0.2em #fff, 0 0 0.2em #fff, 0 0 0.2em #fff, 0 0 0.2em #fff;
	-webkit-text-shadow: 0 0 0.2em #fff, 0 0 0.2em #fff, 0 0 0.2em #fff, 0 0 0.2em #fff;
	-moz-text-shadow: 0 0 0.2em #fff, 0 0 0.2em #fff, 0 0 0.2em #fff, 0 0 0.2em #fff;
	-o-text-shadow: 0 0 0.2em #fff, 0 0 0.2em #fff, 0 0 0.2em #fff, 0 0 0.2em #fff;;
}
/*運勢總評用定位*/
.MOBILE #it248 .FRAME_WORD img{
	position: absolute;
	width: 96%;
	top: 25%;
	margin-left: -48%;}
/*桃花開展機緣用定位*/
.MOBILE #it248 .FUZZY_BOX_POSITION{top: 48px;}
/*運勢總評用定位*/
.MOBILE #it248 .WORD03 img{
	position: absolute;
	width: 88%;
	top: 8%;
	margin-left: -44%;}
.MOBILE #it248 .FUZZY_BOX_POSITION_S1{top: 228px;}
/*月曆區用定位*/
.MOBILE #it248 .FUZZY_BOX_POSITION{top: 30%;}
/*指數區用定位*/
.MOBILE #it248 .FUZZY_BOX_POSITION2{top: 42%;width: 92%;left: 4%;}
/*交往中-交往機率用定位*/
.MOBILE #it248 .FUZZY_BOX_POSITION_S2_2{top: 60%;}
/*=========================免費頁面尾區================*/