html{

}


body{
    font-family:'微軟正黑體',sans-serif;
    font-size:16px;
    background-color:#EEECDA;
    color:#231815;
    font-weight:800;
}

.cover-container {
  max-width: 1480px;
}



.marquee-sty{
    position: absolute;
    top:350px;
    width:100%;
    z-index: 999;
    font-size: 4rem;
    color:#FFF;
    background: #F54748;
}



/* width */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    background:#FFF;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background:#c10230;
    border-radius: 20px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background:#c10230;
}

::-moz-selection { /* Code for Firefox */
  color:#FFF;
  background:#c10230;
}

::selection {
  color:#FFF;
  background:#000;
}


a, a:active, a:focus, a:visited{
    color:blue;
    text-decoration: none!important;
}

a:hover{
    color:blue;
    text-decoration: underline;
}

p{
    font-size: 1.2rem;
    line-height: 2rem;
    font-weight: 400!important;
}

img {
    padding: 0;
    margin: 0;
    display:block;
}


/* form autocomplete */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    border: 1px solid transparent;
    -webkit-text-fill-color: #000;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
}



/* format */
.pull-left{
    float: left;
}

.pull-right{
    float: right;
}

.hidden{
    display: none!important;
}

.display-inline{
    display: inline-block!important;
}


hr {
    margin-top: .5rem;
    margin-bottom: .5rem;
}

.hr-black{
    margin-top: 0rem;
    margin-bottom: .2rem;
    border: 0;
    clear:both;
    display:block;
    width: 100%;               
    background-color:#000;
    height: 1px;
}

ul{
    list-style: none;
}

.fixed-bottom {
    z-index: 1020;
}

.z-index-999{
    z-index: 999!important;
}


.plr-5{
    padding-left: 5px!important;
    padding-right: 5px!important;
}


.ml-0{
    margin-left: 0!important;
}


.mb-0{
    margin-bottom: 0!important;
}




/* BTN */
a.btn{
    cursor: pointer;
    font-weight: 300!important;
}

button:focus{
    outline: none!important;
    box-shadow: none!important;
}

.btn,.btn:focus {
    color:#000;
    outline: none!important;
    margin: .3rem;
    font-weight: 300!important;
    letter-spacing: .1rem;
    font-size: 1rem;
}

.btn-nav-sm{
    font-size: 2rem!important;
    font-weight: 800!important;
    padding: 2rem 1rem!important;
    width:auto;
    height: auto;
    position: relative;
}

.btn-nav-sty{


}



/* blue */
.btn-blue,.btn-blue:link {
    color: #ffffff!important;
    background-color:#1A81D3;
    border-color:#1A81D3;
    box-shadow: none;
    border-radius: 4px;
    padding: .2rem 2rem;
    box-shadow: 0 0 10px rgba(24, 115, 180,.3);
}

.btn-blue.outline,.btn-blue.outline:link {
    color:#1A81D3!important;
    background-color: transparent!important;
    border-color:#1A81D3!important;
    box-shadow: none;
    border-radius: 4px;
    padding: .2rem 2rem;
}

.btn-blue:hover,.btn-blue:active,.btn-blue:focus,
.btn-blue.outline:hover,.btn-blue.outline:active,.btn-blue.outline:focus{
    color:#1A81D3!important;
    background: #fff!important;
    border-color:#ddd!important;
    box-shadow: 0 0 10px rgba(0,0,0,0);
}


/* green */
.btn-green,.btn-green:link{
    color: #ffffff!important;
    background-color:#4AA96C;
    border-color:#4AA96C;
    box-shadow: none;
    border-radius: 4px;
    padding: .2rem 2rem;
    cursor: pointer;
}

.btn-green.outline,.btn-green.outline:link {
    color:#4AA96C!important;
    background-color:transparent!important;
    border-color: #4AA96C!important;
    box-shadow: none;
    border-radius: 4px;
    padding: .2rem 2rem;
}

.btn-green:hover,.btn-green:active,.btn-green:focus,
.btn-green.outline:hover,.btn-green.outline:active,.btn-green.outline:focus{
    color:#FFF!important;
    background:#18933b!important;
    border-color:#18933b!important;
    box-shadow: 0 5px 14px 0 rgba(36, 189, 148, 0.3)!important;
}



/* red */
.btn-red,.btn-red:link {
    color: #ffffff!important;
    background-color:#F54748;
    border-color:#F54748;
    box-shadow: none;
    border-radius: 4px;
    padding: .2rem 2rem;
}

.btn-red.outline,.btn-red.outline:link {
    color: #F54748!important;
    background-color:transparent!important;
    border-color: #F54748!important;
    box-shadow: none;
    border-radius: 4px;
    padding: .2rem 2rem;
}

.btn-red:hover,.btn-red:active,.btn-red:focus,
.btn-red.outline:hover,.btn-red.outline:active,.btn-red.outline:focus{
    color:#FFF!important;
    background: #e60000!important;
    border-color:#e60000!important;
    box-shadow: 0 5px 14px 0 rgba(224, 229, 238, 0.5)!important;
}


/* grey */
.btn-grey,.btn-grey:link {
    color: #999!important;
    background-color:#ccc;
    border-color:#ccc;
    box-shadow: none;
    border-radius: 4px;
    padding: .2rem 2rem;
}

.btn-grey.outline,.btn-grey.outline:link {
    color: #999!important;
    background-color: transparent!important;
    border-color: #ccc!important;
    box-shadow: none;
    border-radius: 4px;
    padding: .2rem 2rem;
}

.btn-grey:hover,.btn-grey:active,.btn-grey:focus,
.btn-grey.outline:hover,.btn-grey.outline:active,.btn-grey.outline:focus{
    color:#FFF!important;
    background: #999!important;
    border-color:#999!important;
    box-shadow: 0 5px 14px 0 rgba(224, 229, 238, 0.5)!important;
}


/* purple */
.btn-purple,.btn-purple:link {
    color: #ffffff!important;
    background-color:#c10230;
    border-color:#c10230;
    box-shadow: none;
    border-radius: 4px;
    padding: .2rem 2rem;
    box-shadow: 0 0 10px rgba(24, 115, 180,.3)
}

.btn-purple.outline,.btn-purple.outline:link {
    color:#c10230!important;
    background-color:transparent!important;
    border-color:#c10230!important;
    box-shadow: none;
    border-radius: 4px;
    padding: .2rem 2rem;
}

.btn-purple:hover,.btn-purple:active,.btn-purple:focus,
.btn-purple.outline:hover,.btn-purple.outline:active,.btn-purple.outline:focus{
    color:#c10230!important;
    background:#fff!important;
    border-color:#dddddd!important;
    box-shadow: 0 0 10px rgba(0,0,0,0);
}


/* orange */
.btn-orange,.btn-orange:link {
    color: #ffffff!important;
    background-color:#FF9933;
    box-shadow: none;
    border-radius: 4px;
    padding: .2rem 2rem;
    box-shadow: 0 0 10px rgba(24, 115, 180,.3);
}

.btn-orange.outline,.btn-orange.outline:link {
    color:#FD8C04!important;
    background-color:transparent!important;
    border-color:#FF9933!important;
    box-shadow: none;
    border-radius: 4px;
    padding: .2rem 2rem;
}

.btn-orange:hover,.btn-orange:active,.btn-orange:focus,
.btn-orange.outline:hover,.btn-orange.outline:active,.btn-orange.outline:focus{
    color:#FF9933!important;
    background:#FFF!important;
    border-color:#ddd!important;
    box-shadow: 0 0 10px rgba(0,0,0,0);
}





/* black  */
.btn-black, .btn-black:link {
    color: #fff!important;
    background-color: #000;
    border-color: #000;
    box-shadow: none;
    border-radius: 4px;
    padding: .2rem 2rem;
}

.btn-black.outline, .btn-black.outline:link {
    color: #000!important;
    background-color: transparent!important;
    border-color: #000!important;
    box-shadow: none;
    border-radius: 4px;
    padding: .2rem 2rem;
}


.btn-black:hover,.btn-black:active,.btn-black:focus,
.btn-black.outline:hover,.btn-black.outline:active,.btn-blackn.outline:focus{
    color:#FFF!important;
    background:#a0937d !important;
    border-color:#a0937d !important;
    box-shadow: 0 5px 14px 0 rgba(148, 133, 107, 0.5)!important;
}



/* text */
.upper{
    text-transform: uppercase!important;
}

.bold{
    font-weight: 700!important;
}

.bold-500{
    font-weight: 500!important;
}

.text-left{
    text-align: left!important;  
}

.text-right{
    text-align: right!important;  
}



/* font-size */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin-bottom: 0.3rem;
    font-family: inherit;
    font-weight: 800;
    line-height: 1.2;
}

.font-12{
    font-size: .6rem!important;
}

.font-14{
    font-size: .8rem!important;
}

.font-16{
    font-size: 1rem!important;
}

.font-18{
    font-size: 1.3rem!important;
}

.font-24{
    font-size: 1.5rem !important;
}

.font-32{
    font-size: 2rem !important;
}

.font-48{

}




/* text color */
.red{
    color:#e60000!important;
}

.red-dark{
    color:#ab0f25 !important;
}

.red2{
    color:#e42716 !important;  
}


.black{
    color:#231815!important;
}

.black2{
    color:#333!important;
}

.black3{
    color:#666!important;
}


.white{
    color:#FFF!important;
}


.grey{
    color:#999!important;
}

.grey2{
    color:#ccc!important;
}



.blue{
    color:#035aa6!important;
}

.blue02{
    color:#006993!important;
}


.yellow{
    color:#feb72b!important;
}

.purple{
    color:#4a47a3!important;
}


.green{
    color:#24BD94!important;
}

.orange{
    color:#F47340!important;
}



/* bg */
.index-bg{
    background-color:#fff;
    /*background:linear-gradient(132deg, rgba(241,250,255,1) 0%, rgba(100,175,255,1) 62%, rgba(0,84,161,1) 100%) no-repeat center center fixed;*/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height:100%;
}




/* form */
label{
    font-size:1.2rem;
    color:#333;
    margin-bottom: .3rem;
    font-weight: 600!important;
    white-space:nowrap!important;
}

.form-control {
    padding: 0rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    color: #333;
    background-color: #FFF;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    height: 35px;
}

textarea.form-control{
    padding: 1rem!important;
}

.form-control:focus{
    border: 1px solid #006993;
}



/* index */
.panel-sty{
    background:white;
    border-radius:20px;
    border: 1px solid #FFF;
    max-width: 1430px;
    box-shadow: 0 0 10px rgba(24, 115, 180,.3);
    padding: 1rem 2rem;
    margin-bottom: 5rem;
}


.panel-sty-content-wrapper{
    padding:0rem;
}

.panel-sty-content-wrapper02{
    overflow: scroll;
    overflow-x: scroll;
    height: 300px;
}


.panel-sty-content-wrapper02 p{
    padding: 0rem!important;
}


.panel-sty-content-wrapper03{
    
}

.panel-sty-content-wrapper03 label{
    font-size: 1.8rem;
}


.panel-sty-content-wrapper03 .form-check-input{
    width: 1.5em;
    height: 1.5em;
    margin-top: .5em;
    margin-right: 1em;
}

.panel-sty-content-wrapper03 .card-header {
    padding: .5rem 1rem;
    margin-bottom: 0;
    background-color: #d2e7f9;
    border-bottom: 1px solid #d2e7f9;
}


.panel-sty-content-wrapper p{
    padding: 1rem;
    text-align: left;
    font-weight: 700!important;
}


.text-opening{
    margin-top: 1rem;
    margin-bottom: 2rem;
    text-align: center;
}

.btn-start{
    padding: .5rem 1rem!important;
    font-size: 1.5rem!important;
}

.btn-gp{
    margin: 1rem;
    position: relative;
}



/* choose btn */
.btn-choose-gp{
    margin-top: 2rem;
}

.btn-choose{
    background: #FFF;
    border:1px solid #ddd;
    border-radius:20px;
    box-shadow: 0 0 10px rgba(24, 115, 180,.3);
    padding: 1rem;
    height:250px;
    width:250px;
}


.btn-choose:focus,.btn-choose:active,.btn-choose:visited,.btn-choose:hover{
    color:#FFF;
    background: #c10230;
    border:1px solid #ddd;
    box-shadow: 0 0 10px rgba(24, 115, 180,0);
}


.btn-choose .icon-sty01{
    font-size:5rem;
    margin-top: 1rem;
}

.btn-choose p{
    font-size: 2rem;
    text-align: center;
}



.btn-choose02{
    background: #FFF;
    border:1px solid #ddd;
    border-radius:20px;
    box-shadow: 0 0 10px rgba(24, 115, 180,.3);
    padding: 1rem;
    height:150px;
    width:150px;
}


.btn-choose02:focus,.btn-choose02:active,.btn-choose02:visited,.btn-choose02:hover{
    color:#FFF;
    background: #c10230;
    border:1px solid #ddd;
    box-shadow: 0 0 10px rgba(24, 115, 180,0);
}


.btn-choose02 p{
    font-size: 2rem;
    text-align: center;
}





.check-box-sty{
    margin: 1rem;
    text-align: left;
}

.text-panel-sty01{
    text-align: left;
    border:1px solid #ddd;
    border-radius: 4px;
    padding: 1rem;
}


.panel-img-wrapper{
    padding: 1rem;
}


.panel-input{
    padding: 2rem 2rem 13rem 2rem;
}


.panel-input input{
    height: 60px;
}

.panel-input label{
    font-size: 2rem;
}



/* modal  */
.loading-box-wrapper{
    margin-top: 2rem;
}


.modal-content {
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0);
}


/* form  */
.input-height{
    height:50px!important;
}

.table-striped>tbody>tr:nth-of-type(odd){
    background:#e8f3fc;
}


.table-bg01{
    background: #1a81d3!important;
    color:#FFF;
    font-size: 1.5rem;
    width: 250px;
}

.table-bg02{
    font-size: 1.5rem;
    color:#333;
}


.panel-sign{
    border:1px solid #ddd;
    border-radius: 4px;
    padding: 1rem;
    margin: 1rem 0;
}


.panel-paid-list-wrapper{
    max-height: 350px;
    overflow: scroll;
    
}

.btn-paid img{
    position: relative;
    left:55px;
    top:20px;
}


.panel-paid-img{
    padding: 1rem;
    margin: 1rem 0;
    max-height:400px;
    text-align: center;
    margin-bottom: 6rem;
}


.panel-paid-img img{
    position: relative;
    left:390px
}


iframe{
    height:900px;
    max-height:900px;
}



.result-frame{
    border:1px solid #999;
    border-radius:4px;
    height:auto;
    margin-bottom: 2rem;
    padding: 1rem;
    font-size: 1.2rem;
    color: #333;
}


.result-frame ul{
    padding-left: 0;
}