/*背景*/
*{
  /* outline: 1px solid black !important;  */
}

.PC #it223 {
  background-image: url(https://imgs.click108.com.tw/unit001/item00223/images/bg.jpg);
  background-color: #aef2ff;
}
.MOBILE #it223 {
  background-image: url(https://imgs.click108.com.tw/unit001/item00223/images/bg.jpg);
  background-color: #aef2ff;
}

/*input h1 標題 區塊*/
.PC #it223 #frame-input {
  width: 790px;
  height: 690px;
  background-image: url(https://imgs.click108.com.tw/unit001/item00223/images/input_bg.png);
}
.MOBILE #it223 #frame-input {
  width: 90%;
  padding-bottom: 58%;
  margin: 0 auto;
  background-image: url(https://imgs.click108.com.tw/unit001/item00223/images/input_bg.png);
}

.PC #it223 .frame h1 {
  height: 225px;
  background: url(https://imgs.click108.com.tw/unit001/item00223/images/input_top_title.png);
  background-position: center;
  background-repeat: no-repeat;
}
@media screen and (max-width: 769px){
  .PC #it223 .frame h1 {
    height: 225px;
  background: url(https://imgs.click108.com.tw/unit001/item00223/images/input_top_title.png);
  background-position: center;
  background-repeat: no-repeat;
    background-size: 90%;
  }
}
.MOBILE #it223 .frame h1 {
  width: 90%;
  margin: 0 auto;
  background: url(https://imgs.click108.com.tw/unit001/item00223/images/input_top_title.png);
  padding-bottom: 25%;
  text-indent: -9999px;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 18;
}

.PC #it223 .input-tarot-cards {
  width: 100%;
  position: absolute;
  bottom: 20%;
}

.PC #it223 .input-tarot-cards .card-lover,
.PC #it223 .input-tarot-cards .card-devil {
  position: absolute;
  bottom: 0;
  width: 95px;
  height: 140px;
}

.MOBILE #it223 .input-tarot-cards {
  width: 100%;
  height: 200px;
  position: absolute;
  bottom: 20%;
}
.MOBILE #it223 .input-tarot-cards .card-lover,
.MOBILE #it223 .input-tarot-cards .card-devil {
  position: absolute;
  bottom: 0;
  width: 15%;
}
.MOBILE #it223 .input-tarot-cards .card-lover{
  left: 24%;
}
.MOBILE #it223 .input-tarot-cards .card-devil {
  left: 60%;
}

#it223 .input-tarot-cards .card-lover {
  box-shadow: 0px 0px 15px 9px rgba(255, 207, 215, 1);
  animation: floatLover 1.5s infinite linear;
  -o-animation: floatLover 1.5s infinite linear;
  -moz-animation: floatLover 1.5s infinite linear;
  -webkit-animation: floatLover 1.5s infinite linear;
  left: 30%;
}

#it223 .input-tarot-cards .card-devil {
  left: 60%;
  box-shadow: 0px 0px 15px 9px rgba(164, 207, 255, 1);
  opacity: 0.7;
  filter: alpha(opacity=70);
  animation: floarDevil 1.5s infinite linear;
  -o-animation: floarDevil 1.5s infinite linear;
  -moz-animation: floarDevil 1.5s infinite linear;
  -webkit-animation: floarDevil 1.5s infinite linear;
}
#it223 .input-tarot-cards .card-lover,
.card-devil {
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  opacity: 0.7;
}

#it223 .input-tarot-cards .card-lover {
  -webkit-box-shadow: 0px 0px 30px 5px rgba(252, 64, 138, 0.1);
  -moz-box-shadow: 0px 0px 30px 5px rgba(252, 64, 138, 0.1);
  box-shadow: 0px 0px 30px 5px rgba(252, 64, 138, 0.1);
}

#it223 .input-tarot-cards .card-devil {
  -webkit-box-shadow: 0px 0px 30px 5px rgba(52, 83, 237, 0.1);
  -moz-box-shadow: 0px 0px 30px 5px rgba(52, 83, 237, 0.1);
  box-shadow: 0px 0px 30px 5px rgba(52, 83, 237, 0.1);
}

@-webkit-keyframes floarDevil {
  10% {
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    opacity: 0.7;
    filter: alpha(opacity=70);
  }

  50% {
    transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    -webkit-box-shadow: 0px 0px 20px 10px rgba(52, 83, 237, 0.1);
    box-shadow: 0px 0px 20px 10px rgba(52, 83, 237, 0.1);
    opacity: 1;
    filter: alpha(opacity=100);
  }
}

@keyframes floarDevil {
  10% {
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    opacity: 0.7;
    filter: alpha(opacity=70);
  }

  50% {
    transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    -webkit-box-shadow: 0px 0px 20px 10px rgba(52, 83, 237, 0.1);
    box-shadow: 0px 0px 20px 10px rgba(52, 83, 237, 0.1);
    opacity: 1;
    filter: alpha(opacity=100);
  }
}

@-webkit-keyframes floatLover {
  10% {
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    opacity: 0.7;
    filter: alpha(opacity=70);
  }

  50% {
    transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    -webkit-box-shadow: 0px 0px 20px 10px rgba(252, 64, 138, 0.1);
    box-shadow: 0px 0px 20px 10px rgba(252, 64, 138, 0.1);
    opacity: 1;
    filter: alpha(opacity=100);
  }
}

@keyframes floatLover {
  10% {
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    opacity: 0.7;
    filter: alpha(opacity=70);
  }

  50% {
    transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    -webkit-box-shadow: 0px 0px 20px 10px rgba(252, 64, 138, 0.1);
    box-shadow: 0px 0px 20px 10px rgba(252, 64, 138, 0.1);
    opacity: 1;
    filter: alpha(opacity=100);
  }
}
.wq-group{
  height: 90px;
}

.PC #it223 .frame .frame-text {
  position: absolute;
  height: 125px;
  bottom: 0%;
}
.MOBILE #it223 .frame .frame-text {
  position: absolute;
  bottom: 0%;
}

/*內容框架*/
#it223 .content-img-border {
  background-image: url(https://imgs.click108.com.tw/unit001/item00223/images/con_bg.jpg);
}

/* 內容 */
#it223 .xc-btn-img.input-btn-img {
  width: 355px;
  height: 58px
}
#it223 .xc-btn-img.input-btn-img .btn-img-overlay a {
  font-size: 1.5rem;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.9)
}
.MOBILE #it223 .input.input-btn-img{
  width: 300px;
  height: 50px;
  margin: 0 auto;
}

.xc-border-yellow5 {
  border-color: #d7ae72 !important;
}

.xc-bg-yellow6 {
  background-color: #ffd14b !important;
}

.xc-bg-orange {
  background-color: #ff6631 !important;
}

.xc-border-blue4 {
  border-color: #b7e2ff !important;
}

.xc-border-yellow6 {
  border-color: #f7b975 !important;
}

.xc-border-brown6 {
  border-color: #573116 !important;
}

.xc-border-green{
  border-color: #d3dfac !important;
}

/* free result content*/
.PC .watermark-wrapper {
    position: fixed;
    top: 270px;
    right: 10px;
    z-index: 9999;
}
.MOBILE .watermark-wrapper {
  display: none;
}



#it223 .user-info {
  width: 100%;
  padding: 8px;
}

#it223 .user-info-name {
  padding:9px 32px;
  background-color: #fff;
}
@media screen and (max-width: 767px){

#it223 .user-info-name {
  padding: 12px 0px;
  background-color: #fff;
}
}

.MOBILE #it223 .FOOT_MOBILE >div{
  margin-top: unset !important;
}

#it223 .freeBunks{
  margin-bottom: 20px;
}
#it223 .freeBunks p{
  line-height: 1.8rem;
}
#it223 .freeBunks .card-img-border {
  height: 100%;
  background-image: url(https://imgs.click108.com.tw/unit001/item00223/images/con1_bg.jpg);
  -webkit-transform: translateX(-0.5px);
  -ms-transform: translateX(-0.5px);
  transform: translateX(-0.5px);
}

#it223 .freeBunks .card-img-bottom {
  width: 100%;
  -webkit-transform: translateX(-0.5px);
  -ms-transform: translateX(-0.5px);
  transform: translateX(-0.5px);
}

#it223 .resultBunks{
  margin-bottom: 20px;
}
#it223 .resultBunks p{
  line-height: 1.8rem;
}
#it223 .resultBunks .card-img-border {
  height: 100%;
  background-image: url(https://imgs.click108.com.tw/unit001/item00223/images/con1_bg.jpg);
  -webkit-transform: translateX(-0.5px);
  -ms-transform: translateX(-0.5px);
  transform: translateX(-0.5px);
}

#it223 .resultBunks .card-img-bottom {
  width: 100%;
-webkit-transform: translateX(-0.5px)translateY(-8px);
      -ms-transform: translateX(-0.5px)translateY(-8px);
          transform: translateX(-0.5px)translateY(-8px);

}

#it223 .bunk12 .card-img-border {
  background-image: url(https://imgs.click108.com.tw/unit001/item00223/images/PC_result_pink_bg.png)
}

#it223 .tarot-name{
	font-size: 34px;
  line-height: 27px;
}
#it223 .tarot-name span{
	font-size: 20px;
}
/* free result date */
#it223  .date,
#it223 .date-overlay {
  width: 425px;
  height: 100%;
}

.MOBILE #it223  .date,
.MOBILE #it223 .date-overlay {
  width: 100%;
}
@media screen and (min-width: 425px){

.MOBILE #it223  .date,
.MOBIlE #it223 .date-overlay {
  width: 425px;
  height: 100%;
}
}
#it223 .date-overlay .date-time1,#it223 .date-overlay .date-time2{
  width: 100%;
  position: absolute;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  line-height: 1.4;
  top: 30%;
  left: 52%;
}
.MOBILE #it223 .date-overlay .date-time1,#it223 .date-overlay .date-time2{
  left: 52.5%;
}
#it223 .date-overlay .date-time2{
  top: 66%;
  left: 50%;
}


.date>img+div>p {
  left: -30%;
  width: 150%;
}

.date>img+div>p:first-child {
  margin-top: 5%;
}

.MOBILE .resultPrint{
  display: none;
}
/* .MOBILE #it223  .date,
.MOBILE #it223 .date-overlay {
  width: 90%;
  height: 100%;
} */

/* free result tarot-animate */
.PC .tarot-animate{
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(https://imgs.click108.com.tw/unit001/item00223/images/tarot/bg.jpg);
}
.PC .tarot-animate .tarotCards{
  width: 80px;
}
.tarot-animate{
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
  background-size: cover;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(https://imgs.click108.com.tw/unit001/item00223/images/tarot/bg.jpg);
}
.tarot-animate .tarotCards{
  width: 12%;
  height: auto;
  position: absolute;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  -webkit-box-shadow: 0 0 7px 4px rgba(255,153,29,0.5);
  box-shadow: 0 0 7px 4px rgba(255,153,29,0.5);
}
.tarot-animate .tarot1{
  top: 41%;
  left: 37.5%;
}
.tarot-animate .tarot2{
  top: 43%;
  left: 37.5%;
}
.tarot-animate .rotate270{
  -webkit-transform: translate(-50%,-50%) rotate(270deg);
     -ms-transform: translate(-50%,-50%) rotate(270deg);
         transform: translate(-50%,-50%) rotate(270deg);
}
.tarot-animate .tarot3{
  top: 64%;
  left: 37.5%;
}
.tarot-animate .tarot4{
  top: 41%;
  left: 17%;
}
.tarot-animate .tarot5{
  top: 18%;
  left: 37.5%;
}
.tarot-animate .tarot6{
  top: 41%;
  left: 56%;
}
.tarot-animate .tarot7{
  top: 18%;
  left: 80%;
}
.tarot-animate .tarot8{
  top: 40%;
  left: 80%;
}
.tarot-animate .tarot9{
  top: 62%;
  left: 80%;
}
.tarot-animate .tarot10{
  top: 84%;
  left: 80%;
}
/* 牌陣逆位 */
.reversed{
  -webkit-transform: rotate(180deg) !important;
     -ms-transform: rotate(180deg) !important;
         transform: rotate(180deg) !important;
}

@media screen and (max-width: 768px){
.freeBunks.bunk3 .tarot-name{
  width: 200px;
}
.freeBunks.bunk4 .tarot-name{
  width: 200px;
}
.freeBunks.bunk5 .tarot-name{
  width: 200px;
}
.freeBunks.bunk6 .tarot-name{
  width: 200px;
}
.freeBunks.bunk7 .tarot-name{
  width: 200px;
}
.freeBunks.bunk8 .tarot-name{
  width: 200px;
}
.freeBunks.bunk9 .tarot-name{
  width: 200px;
}
.freeBunks.bunk11 .tarot-name{
  width: 200px;
}
}
#it223-wrapper~.FOOT_MOBILE {
  margin-top: -11px;
  background-color: #aef2ff;
}
.MOBILE .printbtn{
  display: none;
}
.MOBILE #it223 .tarot-name > div{
  font-size: 1.8rem;
}
.MOBILE #it223 .tarot-name span{
  font-size: 16px;
}

.MOBILE #it223 .tarot-name img{
  width: 60px;
}
.numberConsolas{
  font-family: Helvetica,monospace, "Courier New","微軟正黑體", "Microsoft JhengHei", "sans-serif", Helvetica, Arial !important;
}

.card-img-top img{
  display: block;
  width: 100%;
}