@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);

p { font-family: 'Noto Sans TC', sans-serif; }

#s1dialogue1>img{
  width:50% ;
  margin: 15px 0px;
}
#s1dialogue1>.buttonContent{
  font-size: 1.4rem;
  margin: 10px 0px;
}

#startBtn {
  font-size: 1.4em ;
  background-color: #22ccc1;
  color: white;
  margin: 15px 0px;
  width: 50%;
  border: 0;
  border-radius: 20px;
}

#startBtn:hover {
  font-family: 'Noto Sans TC', sans-serif;
  background-color: #fc6168;
  color: #white;
  transform: scale(1.01);
  border: 0;
}

.image-cover { 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.image-cover-absolute { 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: absolute;
}
canvas{
	display: none;
}

body{
  background-color:lightgrey;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 18px;
}


div{
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 18px;
}

a{
  text-decoration:none;
  color:gray;
  font-family: 'Noto Sans TC', sans-serif;
}

font{
  color: #999;
  font-size: 14px;
}

.imghalf{
  width:100%;height:auto;
  position: absolute;z-index: 10;float: right;bottom: -15px;right: 0px;
}


.button{
  min-height: 35px;
  display:flex;
  align-items:center;
  width: auto;
  border: 5px solid #3FA9F5;
  margin:10px 10px;
  padding: 10px;
  background-color:white;
  border-radius: 10px;
  cursor: pointer;
  -webkit-transition: transform .3s; /* Safari */
    transition: transform .3s;
  }

.transitionall{
    -webkit-transition: all .3s; /* Safari */
    transition: all .3s;
  }

.model_detail{
  background: rgba(255,255,255,1);
  position: absolute;
  border-radius: 5px;
  z-index: 5;
  border: 5px solid #ff931E;
  padding: 10px;
  
  display: flex;
  align-items: center;
  justify-content: center;
}


  .question-dialog{
  min-height: 35px;
  display:flex;
  align-items:center;
  width: auto;
  border: 5px solid #3FA9F5;
  margin:10px 10px;
  padding: 10px;
  background-color:white;
  border-radius: 10px;
  cursor: pointer;
  -webkit-transition: transform .3s; /* Safari */
    transition: transform .3s;
  }

.button:hover {
  background-color: #FEFEFE;
  border: 5px solid #ff931E;
  color: white;
  transform: scale(1.01);
}
.option{
  display: inline-block;
  font-size: 38px;
  color: #6B4F2D;
  width: 40px;
  height: 40px;
  border-radius: 100%;  
  background-color: #3FA9F5;
  border: 2px solid #6B4F2D;
  text-align: center;
  }
.buttonContent{
  width: calc( 100% - 60px);
  display: inline-block;
  font-size: 18px;
  color: #6B4F2D;
/*  text-align: left;
*/  padding: 0;
}

.ellipsis {
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
}


.conversationModal{
  display: inline-block;
  font-size: 18px;
  color: #6B4F2D;
/*  text-align: left;
*/  padding: 0 0 0 10px;
}

.caretloop{
  color:#3FA9F5;
  -webkit-transition: all .3s; /* Safari */
  transition: all .3s;
  position: absolute;
  right: 20px;
  top: auto;
  z-index: 20;
}

.scroll-svg {

  position: fixed;
  bottom: 15px;
  left: 50%;
  margin-left:-70px; 
  width: 140px;
  height: 35px;

  z-index: 100;

}

.noscroll-svg {
  margin:15px auto;
  position: static;
  bottom: 15px;
  width: 200px;
  height: 70px;

  z-index: 100;

}

.dialog_head{
  height: 115%;
}

@media only screen and (max-width: 660px) {
    
  .dialog_head{
    height: 140px;
  }
}


@media screen and (max-width: 1070px) and (min-width: 1026px) {
  .dialog_head{
  height: 90%;
}
}
@media only screen and (max-width: 576px) {
  .imghalf{
    position: relative;
    vertical-align: text-bottom;
    width:50%;height:auto;

  }
}

@media only screen and (max-width: 1024px) {
  body{
    font-size: 14;
    line-height: 1.2;
  }
  div{
    font-size: 14px;
  }
  h2{
    font-size: 1.3rem;
  }
  h4{
    font-size: 1rem;
  }

  #s1dialogue1>img{
    width:50% ;
    margin: 5px 0px;
  }
  #s1dialogue1>.buttonContent{
    font-size: 1rem;
    margin: 5px 0px;
  }

  #startBtn {
    background-color: #22ccc1;
    color: white;
    margin: 5px 0px;
    width: 50%;
    border: 0;
    font-size: 1rem;
  }

  .question-dialog{

  border: 3px solid #3FA9F5;
  padding: 5px 10px;
  margin: 3px;

  } 
  .question-dialog>font{
  line-height: 1;

  }
  .row{
    margin: 0;
  }
   .imghalf{
    position: relative;
    width:30%;
    height:auto;
    bottom: -5px;
  }

  .button{

  border: 3px solid #3FA9F5;
  padding: 3px;
  margin: 3px;
  }

  .button:hover {

  border: 3px solid #ff931E;

  }
    
   .button>.buttonContent{
    width:100%;
    font-size: 14px;
    padding: 0 0 0 0;
    text-align: center;
    }
  .buttonContent{
    line-height: 1.3;
    width:100%;
    font-size: 14px;
  }
  .conversationModal{

    font-size: 14px;

  }

  font{
    color: #999;
    font-size: 10px;
  }

}


@media only screen and (min-width: 1440px) {
  .buttonContent{

    font-size: 22px;

  }
  .conversationModal{

    font-size: 22px;

  }
  body{
  font-size: 22;
  }
  div{
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 22px;
}

font{
  color: #999;
  font-size: 18px;
}

}