@charset "utf-8";

html {
  height: 100%; 
  max-width: 100%;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  font-family: "Noto Sans TC", sans-serif;
}

body{
  background-color: #ffd6cf!important;
  color: #111!important;
}

ul{
  list-style-type:none;

}

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  background-color: #111; 
  border-top: 1px solid rgba(0, 0, 0, 0.5);
}
@media (max-width:540px){
  hr {
    background-color: #db3129; 
  }
}

a:hover{
  text-decoration: none !important;

}

.modal-header, .modal-footer{
  border:none!important;
}

.btn_yellow{
color:#fff!important;
cursor:pointer;
margin:0 auto ;
margin-top:40px;
margin-bottom:40px;
width:75vw;
max-width:540px;
vertical-align:middle;
border-radius:50px;
padding:10px 20px 10px 20px;
font-size:xx-large;
font-weight:bold;
background-color: #ffc000;
-webkit-box-shadow: 2px 2px 8px 3px rgba(0,0,0,0.2); 
box-shadow: 2px 2px 8px 3px rgba(0,0,0,0.2);
border-radius:50px;
border:none!important;


}


.btn_yellow:hover{

    background-color: #ff445d;
    -webkit-box-shadow: 2px 2px 8px 3px rgba(0,0,0,0.2); 
    box-shadow: 2px 2px 8px 3px rgba(0,0,0,0.2);
    transition: 0.3s !important;


}
#big_wrapper{


}

#big_wrapper_1{



}
 #main{
  background: #d6e6ff;
  background-image:url("../img/bg-0-0.png");
  background-size: cover;
  background-repeat:no-repeat;
  background-position: bottom left;

 }

  .title_main{
   padding-top:8vh;
   margin: 0 auto; 
   width:90vw;
   max-width:960px;
  
   }

  .title_main h3{
   color:#db3129; 
   margin-top:20px;
   margin-bottom:20px;
  }

  .date_block{
   width:60%;
   max-width:360px;
   margin:0 auto;
   background-color:#db3129;
  }


  .topitems{
    position:relative;
    margin:0 auto;
  }

  .mainitem{
    width:75vw;
    max-width:840px;    

  }


@media (max-width:540px){

  .title_main{
   padding-top:4vh;
   width:80vw;

   }

  .title_main h3{
   font-size:18px;
   margin-top:10px;
   margin-bottom:10px;
   color:#db3129;
  }
  .title_main h4{
   font-size:16px;
  }  
  .mainitem{
   width:95vw;
   bottom:-50px;

  }
  

}

#flow{
  padding-top:120px;
background-color: #ffd6cf;
}

.flow_main{

  background-color: #db3129;
}
.changecolor{
  color:#333;

  }

@media (max-width:540px){

  #flow{
  padding-top:40px;

  }

  .flow_hr{
    display:none;
  }

  .flow_main{
     max-width:80%;
     padding-left:10px;
     padding-right:10px;
  }

   }



 .numbers{
   display:inline-block;
   color:#FFF;
   width:36px;
   height:36px;
   font-weight: bold;
   background-color:#db3129;
   border-radius:50px;
   border:none!important;
   margin:2px;
   padding:2px;

 }  

.app_card{
  color:#333;
   background-color:#FFF;
   -webkit-box-shadow: 2px 2px 8px 3px rgba(0,0,0,0.4); 
   box-shadow: 2px 2px 8px 3px rgba(0,0,0,0.4);
   border-radius:24px;
   border:none!important;

  }

.app_wrapper{
  position:relative;
}

.app_wrapper hr {
  margin-top: 1rem;
  margin-bottom: 0.2rem;
}
.app_icon{
  height:100px
}

.app_name{
  position:absolute;
  left:120px;
  top:4px;
   font-size:large;
   font-weight: bold;
}

.app_content{

   min-height:60px;
}

@media (max-width:540px){

.app_icon{
  height:48px;
}

.app_name{
  position:absolute;
  left:66px;
  top:0px;
   font-size:large;
   font-weight: bold;
}

.app_wrapper p{
   
   font-size:small;
}


.app_wrapper hr {
  margin-top: 0.5rem;
  margin-bottom: 0.2rem;
}

}


.app_download{
  width:90%;
}

.app_slogan{
   background-color: #ffc21e;
   position:absolute;
   right:1.5rem;
   top:1.5rem;
   font-size:large;
   font-weight:bolder;
   padding:2px 8px 2px 8px;
}

 #present h2{

   font-weight:bold;
 } 
.arrow{
  width:100%;
  max-width:132px;
}

 .presents{
    width:100%;
    max-width:540px;
 }
 #trans_bt{

  background-image: linear-gradient(180deg, rgba(255,255,255,0) 50%, #008061 50%) ;
  
 } 
 #caution{
  background-color:#008061;
  color:#fff; 

 } 

 #caution a{
  color:#FFCC00;
 } 

.video-container {
z-index:0;
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;

}
.video-container iframe, .video-container object, .video-container embed {

position: absolute;

top: 0;left: 0;

width: 100%;

height: 100%;}