body *{
    font-family: "Microsoft JhengHei", "Verdana Sans-serif";
}
body{
    margin: 0;
}
#sec01{
   width: 100%;
}
a {
    text-decoration: none;
}
#SPtop{
    display: none;
    width: 100%;height: auto;
}
.top_sp {
    display: none;
}
/*PC btnApply*/
.onebtnApply {
    flex-direction: column;
}

.clearfix {
    /* clear: both; */
}

.btnApply_box {
    width: 950px;
    padding: 0;
    margin: 0 auto;
    display: flex;
}

.mb40{
    margin-bottom: 40px;
}

.btnApply_box ul {
    width: 950px;
    padding: 0;
    margin: 0 auto;
    display: flex;
    list-style: none;
}

.btnApply_box ul li {
    margin: 0 auto;
    flex-direction: column;
    display: flex;
}

.btnApply_box p {
    font-size: 14px;
    font-family: "Microsoft JhengHei";
    font-weight: bold;
    text-align: center;
    height: 20px;
    color: #707070;
    margin: 5px auto;
}

.btnApply {
    padding: 10px 30px;
    display: block;
    float: left;
    position: relative;
    text-align: center;
    color: #fff;
    font-family: "Microsoft JhengHei";
    font-weight: bold;
    margin: 0 auto;
    border: 2px solid #bf0000;
    border-radius: 30px;
    letter-spacing: 0px;
    background: #CC1313;
    box-sizing: border-box;
    width: 400px;
    font-size: 26px;
    text-decoration: none;
    transition: background-color .2s ease-out;
}

.btnApply:hover,
.btnApply:active {
    text-decoration: none;
    background: #fff;
    color: #bf0000;
    border: 2px solid #bf0000;
    box-shadow: none;
    position: relative;
}


.btnApply>span {
    display: block;
    font-size: 18px;
    border-bottom: 1px solid #ffffff59;
    padding: 0 0 5px 2px;
    margin-bottom: 5px;
}

ol,ul {
    list-style: none;
}

.cam_topBox {
    width: 100%;
    margin: 0.4rem auto;
}
.cam_topBox img {
    width: 100%;
    height: auto;
}
.contents-inner {
    width: 950px;
    margin: 15px auto 0;
    position: relative;
}

.new_title{color: #515151;
    font-size: 26px!important;
    text-align: center;margin: 2% auto;font-weight: bolder;}
#sec02{
    margin: 0 auto;
    width: 100%;
    background-image: linear-gradient(180deg, #90d3d0 0%, #7c9ee8 100%);
    padding: 20px 0px;
    overflow: hidden;

}


#sec02 img{width:100%;;margin-bottom: 3%;border-radius:10px}

#sec02 p{line-height:1.3;padding:10px;text-align: center;}
#sec02 .info{padding-left:10px;}


#sec03{
    margin: 0 auto;
    width: 100%;
    background-color: #fff;
    padding: 20px 0px;
    overflow: hidden;

}
.columns1{ 
    background-color:#fff;
      border-radius:20px; overflow:hidden; margin-bottom:3%;
    padding: 2%;
}
.columns1 ul li{
    float: left;
    width: 96%;
    padding: 1% 2% 1% 0;
    border-radius:10px 10px 0 0;
    box-sizing: border-box;
    list-style-type: disc;
     /*margin-left: 2em;
    background-color: #efefef; */
}
.columns1 ol {
    
    padding-bottom: 10px;
    text-align: justify;
}
.columns1 ol li{
    float: left;
    width: 96%;
    padding: 1% 2% 1% 0;
    border-radius:10px 10px 0 0;
    box-sizing: border-box;
    list-style-type: decimal;
     /*margin-left: 2em;
    background-color: #efefef; */
}
.columns1 a:hover{opacity:0.8; text-decoration:none;}

.columns2{ 
    overflow:hidden; margin-bottom:3%;
}
.columns2 ul{
    margin: 0 auto;
    padding: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
}
.columns2 ul li{
    background-color:#fff;
   
    width: 48%;
    min-height: 460px;
    padding: 2% 1%;
    border-radius:20px;
    box-sizing: border-box;
    list-style-type: none;
    
    box-sizing: border-box;
    /* background-color: #efefef; */
}
.columns2 ul li:last-child{
    margin-left: 2em;
}
.columns2 ul li .onebtn{
    width: 100%;
    margin: 0 auto;
    display: flex;
}
.columns2 ul li .morebtn{
    font-size: 1.4rem;font-weight: bold;
    padding: 10px 30px;
    display: inline-block;
    text-align: center;
    color: #fff;
    font-family: "Microsoft JhengHei";
    margin: 0 auto;
    background-image: linear-gradient(to right, #0090b3 0%, #3cba92 100%);
    box-sizing: border-box;
    width: 80%;
    border-radius: 3em;
    
}
.columns2 ul li .morebtn a{
    text-decoration: none;
}
#sec02 .columns2 ul li p{
    text-align: center;
    font-size: 1.2rem;
    color: #515151;margin: 0 auto;
}
#sec02 .columns2 ul li p span{
    text-align: center;font-weight: bold;
    font-size: 1.4rem;
    color: #e64b4b;
}
.columns2 ul li h6{
    text-align: center;
    font-size: 1.5rem;
    color: #7e9fe9;
    margin: 5px auto;
    font-weight: bolder;

}
.columns3{ 
      border-radius:10px; margin-bottom:3%;
    }
    .columns3 ul{
        padding: 0;
    }
.columns3 ul li{
    background-color:#fff;
    float: left;
    width: 31.3%;
    margin: 1% 1%;
    border-radius:10px;
    height:auto;
    /* background-color: #efefef; */
}
.columns3 ul li h6{
    text-align: center;
    font-size: 1.2rem;
    color: #515151;font-weight: bold;margin: 0 auto;
}
.columns3 ul li p{
    text-align: center;
    font-size: 1rem;
    color: #d82c2c;;font-weight: bold;margin: 0 auto;
}
#sec02 .columns3 img{border-radius:10px 10px 0 0;margin-bottom: 0;}
.columns3 a:hover{opacity:0.8; text-decoration:none;}

.title_top{text-align: center;margin: 1%;}

.columns1 .title{text-align: center;font-size: 22px;font-weight: bold;border-bottom: solid 3px #008eed;display: inline-grid;osition: absolute;}
.columns3 .title{text-align: center;font-size: 22px;font-weight: bold;border-bottom: solid 3px #008eed;display: inline-grid;position: absolute;}
.columns4{  background-color:#fff;
    box-shadow: 0 0 8px #FF9800; border-radius:10px; overflow:hidden; margin-bottom:3% }

.columns4 ul li{
    position: relative;
    float: left;
    width: 23%;
    margin: 3% 1%;
    height: 240px;
    background-color: #ffffff;
    vertical-align: top;
}

.columns4 a:hover{opacity:0.8; text-decoration:none;}

.more{float: right;padding: 10px;font-size: 12px;/* display: revert; */}

/*********nav**********/

.nav_bg{
    width: 100%;
    -height: 64px;
    background-color: rgba(255,255,255,0.9);
    color: #fff;
    -position: fixed;
    z-index: 10;
    top: 0;
}

.nav{
    width: 960px;
    margin: auto;
}

.logo {
    display: block;
    width: 173px;
    margin: auto;
    float: left;
    padding: 10px;
}

.nav ol{
    width: 530px;
    margin: auto;
    float: right;
}

.nav li{
    width: 100px;
    float: left;
    text-align: center;
    margin-top: 15px;
    border-right: 1px solid #fff;
}

.nav li a{
    color: #fff;
    text-decoration: none;
    text-align: center;
}

.nav li:nth-child(4){
    border-right: 0px;
    width: 110px;
}
.navFixed {
    z-index: 10;          
    position: fixed;      
    top: 0;
    left: 0;
    margin-top: 0;
    min-width: 100%;
    opacity: 0.94;
    transition: opacity .5s ease-out;   
  }
/*********nav end**********/


/****Table****/



#customers {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%; text-align: center; margin: 2% auto;
}

#customers td, #customers th {
    border: 2px solid #d8d8d8;
    padding: 10px;
    font-weight: 600;
    font-size: 16px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}


#customers th {
    width: 12%;
    padding: 10px;
    text-align: center;
    font-weight: bolder;
}


#customers td span{font-size: 25px; font-weight:bolder;color:#008eed;font-family:sans-serif;}

#customers td.morebtn{
    width: 12%;
    text-align: center;
    background-color: #008eed;
}

.morebtn a{
    color: #fff;font-size: 16px; font-weight: 600; 
}

.morebtn a:hover{opacity:0.5; text-decoration: none;}

/****Table****/




.apply-box .btn-apply{
    width: 240px;
    height: 50px;
    display: block;
    margin: 0 auto;
    font-size: 18px;
    line-height: 50px;
    color: #ffffff;
    background-color: #c31010;
    border-radius: 5px;
    margin-top: 5px;
    margin-bottom: 20px;
}

.btnJP{padding: 10px;}


/*********masterfooter**********/
.masterfooter{
    background-image: none;
    height: 80px;
    display: flex;
    align-items:center;
    justify-content:center;
    background-color:#dedede;
}

.masterfooter .main{
    margin-top: 0px;  color: #666;
}

.masterfooter .note{
    width: 300px;  color: #666;
    font-size:20px;
    font-weight: 600;
    letter-spacing: 5px;
    float: left;
    display: flex;
    align-items:center;
    justify-content:center;
    line-height:3;

}

.masterfooter p{
    width: 640px;
    float: left;
    font-size: 14px;
}
/*********footer end**********/
/*RWD**/
@media screen and (max-width: 960px){
    .contents-inner {
        width: 100%;
    }
    .columns2 ul {
        width: 94%;
        margin: 2% auto;
    }
    .columns1{
        width: 84%;
        margin: 2% auto;
    }
/*SP btnApply*/

.btnApply_box {
    width: 100%;
}

.btnApply {
    width: 90%;
    padding: 10px;
    font-size: 24px;
    display: block;
    position: relative;
    text-align: center;
    color: #fff;
    font-family: "微軟正黑體";
    font-weight: bold;
    margin: 0 5%;
    border-radius: 3em;
    clear: both;
    background: #CC1313;
    box-sizing: border-box;
    text-decoration: none;
    box-shadow: 0 0px 0 #9A0808;
}

.btnApply:nth-child(2){
    margin: 8% 5% 0 5%;
}

.btnApply:active {
    text-decoration: none;
    background: #CC1313;
    box-shadow: none;
    position: relative;
    top: 5px;
}

.btnApply_box span {font-family: "微軟正黑體";
    display: block;
    font-size: 16px;
    padding: 7px 0;
    font-weight: 900;
    margin-bottom: 5px;
    text-align: center;
    color: #707070;
}
/*********footer**********/
.masterfooter{
    background-image: none;
    background-color: #666;
    display: flex;
    align-items:center;
    justify-content:center;
    padding:20px 10px 20px 10px;
    height: auto;
   
}

.masterfooter .note{
    color: #fff;
    font-size:1.8em;
    font-weight: 500;
    letter-spacing: 3px;
    display: flex;
    align-items:center;
    justify-content:center;
    margin-bottom: 10px;
    line-height:1;
    float: none;
    width: auto;
}

.masterfooter p{
    color: #fff;
    font-size: .95em;
    line-height: 1.5;
    text-align: center;
    padding: 0 10px;float: none;width: auto;
}
/*********footer end**********/

}
@media only screen and (min-width: 321px) and (max-width: 768px) {
    .logo {
        display: inline-block;
        width: 100%;
        margin: auto;
        padding: 10px 0;
        text-align: center;
    }
    .nav {
        width: 100%;
        margin: auto;
    }
}
@media screen and (max-width: 630px){
    .columns2 ul{
    flex-direction: column;
}
.columns2 ul li{
    width: 94%;margin: 2% auto;height: auto;min-height:auto;
}
    .columns3 ul li {
        background-color: #fff;
        float: left;
        width: 94%;
        margin: 2% 3%;
        border-radius: 10px;
        height: auto;
        padding-bottom: 2%;}
        .columns2 ul li .onebtn {
            width: 100%;
            margin: 10px auto;
            display: flex;
        }
}
@media screen and (max-width: 600px){
    #sec01{display: none;}
    /*********top_sp**********/

.top_sp {
    display: block;
    width: 100%;
    position: relative;
    
    margin-bottom: 20px;
}

.top_sp img{
    width: 100%;
    height: auto;
}
.logo a{
    display: block;
    width: 35%;
    height: auto;
    padding-top: 5px;
    position: absolute;
    margin-left: calc(100% / 3.1);
}

}