/* input 動畫 */
.PC #qimen{
  margin: 0 auto;
  width: 460px;
  height: 460px;
  position: relative;
}
.MOBILE #qimen{
  margin: 0 auto;
  width: 82%;
  height: 82vw;
  position: relative;
  background-size: 100% auto;
  background-position: center;
}
#qimen{
  background-image: url(https://imgs.click108.com.tw/unit001/item00228/images/0110/q4.png);
  background-position: center;
  background-size: 99%;
  background-repeat: no-repeat;
}
.PC .qimen{
  width: 100%;
  height: 460px;
  position: absolute;
  background-size: 100%;
  background-position: center center;
}
.MOBILE .qimen{
  width: 100%;
  height: 82vw;
  position: absolute;
  background-size: 100%;
  background-position: center;
}
.q0{
  background-image: url(https://imgs.click108.com.tw/unit001/item00228/images/0110/q0.png);
  z-index: 2;
  visibility: hidden;
}
.q1{
  background-image: url(https://imgs.click108.com.tw/unit001/item00228/images/0110/q1.png);
  z-index: 1;
  visibility: hidden;
}
.q2{
  background-image: url(https://imgs.click108.com.tw/unit001/item00228/images/0110/q2.png);
  z-index: 1;
  visibility: hidden;
}
.q3{
  background-image: url(https://imgs.click108.com.tw/unit001/item00228/images/0110/q3.png);
  z-index: 1;
  visibility: visible;
}
#qimen_gif{
  background-image: url(https://imgs.click108.com.tw/unit001/item00228/images/5.gif);
}

/* result 奇門時盤 */
#gameon{
  width: 100%;
  background-color: red;
  color: #eee;
  font-size: 24px;
  text-align: center;
  line-height: 700px;
  height: 700px;
}

.container.xc-border.qimen9{
  padding-right: 0;
  padding-left: 0;
  width: 90%;
  height: 480px;
  margin: 15px auto;
}
.container.xc-border.qimen9.bmp{
  border: 4px solid #ab8958 !important;
  background-color: #feffe7;
}
.container.xc-border.qimen9.sp{
  border: 4px solid #e1614f !important;
  background-color: #faefee;
}
.container.qimen9 > .row{
 height: 33.33%;
}
.container.xc-border.qimen9.sp .x2y1.xc-border-bottom,
.container.xc-border.qimen9.sp .x1y1.xc-border-bottom,
.container.xc-border.qimen9.sp .x0y1.xc-border-bottom,
.container.xc-border.qimen9.sp .x2y0.xc-border-bottom,
.container.xc-border.qimen9.sp .x1y0.xc-border-bottom,
.container.xc-border.qimen9.sp .x0y0.xc-border-bottom{
  border-bottom: 2px solid #f2b29c !important;
}
.container.xc-border.qimen9.sp .x1y2.xc-border-right,
.container.xc-border.qimen9.sp .x0y2.xc-border-right,
.container.xc-border.qimen9.sp .x2y1.xc-border-right,
.container.xc-border.qimen9.sp .x1y1.xc-border-right,
.container.xc-border.qimen9.sp .x0y1.xc-border-right,
.container.xc-border.qimen9.sp .x2y0.xc-border-right,
.container.xc-border.qimen9.sp .x1y0.xc-border-right,
.container.xc-border.qimen9.sp .x0y0.xc-border-right{
  border-right: 2px solid #f2b29c !important;
}
.container.xc-border.qimen9.bmp .x2y1.xc-border-bottom,
.container.xc-border.qimen9.bmp .x1y1.xc-border-bottom,
.container.xc-border.qimen9.bmp .x0y1.xc-border-bottom,
.container.xc-border.qimen9.bmp .x2y0.xc-border-bottom,
.container.xc-border.qimen9.bmp .x1y0.xc-border-bottom,
.container.xc-border.qimen9.bmp .x0y0.xc-border-bottom{
  border-bottom: 2px solid #e2b170 !important;
}
.container.xc-border.qimen9.bmp .x1y2.xc-border-right,
.container.xc-border.qimen9.bmp .x0y2.xc-border-right,
.container.xc-border.qimen9.bmp .x2y1.xc-border-right,
.container.xc-border.qimen9.bmp .x1y1.xc-border-right,
.container.xc-border.qimen9.bmp .x0y1.xc-border-right,
.container.xc-border.qimen9.bmp .x2y0.xc-border-right,
.container.xc-border.qimen9.bmp .x1y0.xc-border-right,
.container.xc-border.qimen9.bmp .x0y0.xc-border-right{
  border-right: 2px solid #e2b170 !important;
}
#qimen_png{
  width: 600px;
  height: 600px;
  background-image: url(https://imgs.click108.com.tw/unit001/item00228/images/QQ20200113-0.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center bottom;
  margin: 0 auto;
}
/* 八卦 乾、兌、離、震、巽、坎、艮、坤*/
.gua{
  font-weight: 900;
  font-size: 1.3rem !important;
}
.bmp .gua{
  color: #a18152;
}
.sp .gua{
  color: #e1614f;
}
/* 值符星 (天輔, 天英, 天芮, 天柱, 天心, 天蓬, 天任, 天沖, 天禽) */
/* 樣式一 字體黑且較大，帶黑框*/
.jfx{
  color: #000;
  font-size: 1.2rem !important;
}
/* 樣式二 字體紅且較大，帶紅框*/
.jfx2{
  width: 50% !important;
  border: 2px solid #ff0000;
  font-size: 1.2rem !important;
  color: #ff0000;
}
/* 值使門 (景, 死, 驚, 開, 休, 生, 傷, 杜) */
/* 樣式一 字體黑且小，不帶框*/
.jsm{
  width: 50% !important;
  border: 2px solid #000;
  font-size: 1.4rem !important;
  color: #000;
}
/* 樣式二 字體紅且小，帶紅框*/
.jsm2{
  width: 50% !important;
  border: 2px solid #ff0000;
  font-size: 1.4rem !important;
  color: #ff0000;
}
/* 天干：甲、乙、丙、丁、戊、己、庚、辛、壬、癸 */
.tk{
  font-size: 1.2rem !important;
}
.PC .row > .col-8 > p,
.PC .row > .col-4 > p{
  margin: 4px auto;
}
.row > .col-8 > p,
.row > .col-4 > p{
  width: 100%;
  /* position: absolute; */
  margin: 0 auto;
  font-size: 1.2rem;
  /* left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); */
  text-align: center !important;
}
/* circle */
.xc-round-circle{
  border-radius: 50% !important;
  height: 30px;
  width: 30px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}
.row {
  -ms-flex-wrap: nowrap !important;
  flex-wrap: nowrap !important;
}

/* MOBILE */
.MOBILE .container.xc-border.qimen9 {
  width: 100%;
  height: 90vw;
}
.MOBILE .row > .col-8 > p, .MOBILE .row > .col-4 > p {
  font-size: 3.5vw;
}
.MOBILE .jsm, .MOBILE .jsm2 {
  width: 75% !important;
  font-size: 4vw !important;
}
.MOBILE .jfx, .MOBILE .jfx2 {
  font-size: 3.5vw !important;
}
.MOBILE .jfx2 {
  width: 75% !important;
}
.MOBILE .gua {
  font-size: 3.8vw !important;
}
.MOBILE .tk {
  font-size: 3.5vw !important;
}

/* result 捲珠簾 */

/* result 捲珠簾 */