body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,button,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;font-family:"Microsoft YaHei"}
table{border-collapse:collapse;border-spacing:0;font-family:"Microsoft YaHei"}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ul,ol,li{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{outline:0;border:0}
a{text-decoration:none}
button,textarea{outline:0;border:0;padding:0;margin:0}


body {
    margin: 0;
    padding: 0;
    background: #fef9d1;
    color: #212121;
}
.footer{width:100%;position:relative;z-index:10;    background: radial-gradient(black, transparent);}
.footer .footerin{width:100%;max-width:1200px;margin:0 auto;display:flex;display:-ms-flexbox;justify-content:space-around;-ms-flex-pack:justify;align-items:center;-ms-flex-align:center;padding-bottom:20px}
.footer .footerin .footer-top{display:none}
.footer .footer-btm{width:1200px;margin:auto;height:100%;box-sizing:border-box;padding-top:55px}
.footer .logo1{width:215px;height:77px;float:left;background:url(https://ts.userjoy.com/images/log2.png) no-repeat center center;background-size:100%;margin-left:117px}
.footer .logo2{width:37px;height:37px;float:left;background:url(https://ts.userjoy.com/images/log3.png) no-repeat center center;background-size:100%;margin-left:40px;margin-top:28px}
.footer .con1{float:left;color:#88f0e0;font-size:12px;line-height:20px;width:434px;margin-left:27px;margin-top:19px}
.footer .con2{float:left;color:#88f0e0;font-size:12px;width:252px;line-height:20px;margin-left:18px;margin-top:20px}

img {
    width: 100%;
    height: auto;
}
img {
    vertical-align: bottom;
}
a {
    width: 100%;
    height: 100%;
    display: block;
}
.container{
    width: 100%;
    height: auto;
}
.jrgw:hover img{filter:brightness(1.1);transform:translateY(2px) scale(0.98)}




#particles-js {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    position: absolute;
}

.wrapper {
    width: 100%;
    height: 100%;
    /* overflow: hidden; */
}
.mainbox {
    width: 100%;
    height: auto;
    background: url('../images/bg.jpg') no-repeat top;
    margin: 0 auto;
    position: relative;
    /* background-size: cover; */
}
.content {
    width: 100%;
    max-width: 1500px;
    height: auto;
    margin: 0 auto;
    position: relative;
}
/*LOGO+下方選單*/
.logo {
    width: 40%;
    height: auto;
    max-width: 571px;
    margin: 0 auto;
    top: 1.3rem;
    position: relative;
    z-index: 88;
}
.logo a {
    background: url('../images/logo.png') no-repeat top;
    background-size: cover;
    transition: all 0.5s;
    -webkit-transition: -webkit-transform all 0.5s;
}
.logo a:hover {
    filter: brightness(120%);
    transition: all 0.25s ease-in-out;
}
.content {
    width: 100%;
    max-width: 1500px;
    height: auto;
    margin: 0 auto;
    position: relative;
}
.btn {
    width: auto;
    height: auto;
    margin: 0 auto;
    top: 6%;
    left: 12%;
    position: absolute;
    z-index: 99;
}
.btn ul {
    width: 100%;
    height: auto;
    display: flex;
    display: -ms-flexbox;
    flex-direction: row;
    -ms-flex-direction: row;
    list-style: none;
}
.btn ul il {
    width: 25%;
    height: auto;
}


/*活動選單*/
.icon {
    width: 40%;
    height: auto;
    margin: 0 auto;
    top: -5rem;
    position: relative;
    right: -10%;
    z-index: 100;
}
.icon ul {
    width: 100%;
    height: auto;
    display: flex;
    display: -ms-flexbox;
    flex-direction: row;
    -ms-flex-direction: row;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    justify-content: center;
    -ms-justify-content: center;
}
.icon ul li {
    width: 33%;
    height: auto;
}

.icon_001 {
    width: 100%;
    height: auto;
    max-width: 183px;
}
.icon_001 a {
    background: url('../images/icon_001.png') no-repeat bottom;
    background-size: 100%;
}
.icon_001 a:hover {
    background: url('../images/icon_001_b.png') no-repeat;
    background-size: cover;
}

.icon_002 {
    width: 100%;
    height: auto;
    max-width: 183px;
}
.icon_002 a {
    background: url('../images/icon_003.png') no-repeat bottom;
    background-size: 100%;
}
.icon_002 a:hover {
    background: url('../images/icon_003_b.png') no-repeat;
    background-size: cover;
}

.icon_003 {
    width: 100%;
    height: auto;
    max-width: 183px;
}
.icon_003 a {
    background: url('../images/icon_004.png') no-repeat bottom;
    background-size: 100%;
}
.icon_003 a:hover {
    background: url('../images/icon_004_b.png') no-repeat;
    background-size: cover;
}

/*
.icon_004 {
    width: 100%;
    height: auto;
    max-width: 183px;
}
.icon_004 a {
    background: url('../images/icon_006.png') no-repeat bottom;
    background-size: 100%;
}
.icon_004 a:hover {
    background: url('../images/icon_006_b.png') no-repeat;
    background-size: cover;
}
*/

.icon_005 {
    width: 100%;
    height: auto;
    max-width: 183px;
}
.icon_005 a {
    background: url('../images/icon_005.png') no-repeat bottom;
    background-size: 100%;
}
.icon_005 a:hover {
    background: url('../images/icon_005_b.png') no-repeat;
    background-size: cover;
}

.icon_006 {
    width: 100%;
    height: auto;
    max-width: 183px;
}
.icon_006 a {
    background: url('../images/icon_002.png') no-repeat bottom;
    background-size: 100%;
}
.icon_006 a:hover {
    background: url('../images/icon_002_b.png') no-repeat;
    background-size: cover;
}

/*角色*/
.role {
    width: 100%;
    height: auto;
    position: relative;
    margin: 0 auto; /*top: -5rem;*/
    display: flex;
    display: -ms-flexbox;
    flex-direction: row;
    -ms-flex-direction: row;
    list-style: none;
}
.txt {
    width: 40%;
    height: auto;
    max-width: 865px;
    min-height: 470px;
    margin: 0 auto;
    position: relative;
    z-index: 3;
}
.role_l {
    width: 32%;
    height: auto;
    left: 8%;
    position: absolute;
    bottom: -36%;
}
.rolr_r {
    width: 22%;
    height: auto;
    right: 15%;
    position: absolute;
    top: -50%;
}

.flsah {
    animation-name: slide;
    animation-iteration-count: infinite;
    animation-duration: 3s;
}
.Slide {
    position: relative; /* 要能改 top 必須 relative/absolute */
    animation: slide 2s infinite;
}
/* ✅ 動畫：上下浮動 */
/* 上下浮動動畫 */
@keyframes slide {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(0.5rem);
    }
}

.flsah {
    animation: slide 3s infinite ease-in-out;
}

.Shiny {
    animation-name: Bright;
    animation-iteration-count: infinite;
    animation-duration: 3s;
}
/* ✅ 動畫：閃亮 */
@keyframes Bright {
    0%,
    100% {
        filter: brightness(100%);
    }
    50% {
        filter: brightness(115%);
    }
}


/*top*/
.btn_top_block {
    width: 97%;
    position: fixed;
    bottom: 8rem;
    z-index: 9999;
    max-width: 1150px;
    animation: pageIn 1s;
    animation-delay: 0.5s;
    animation-fill-mode: both;
    -webkit-animation: pageIn 1s;
    -webkit-animation-delay: 0.5s;
    -webkit-animation-fill-mode: both;
}

#btn_top {
    width: 8%;
    position: absolute;
    right: 3rem;
}

#btn_top a {
    width: 90px;
    height: 80px;
    background: url(../images/top.png) no-repeat left top / 100% auto;
    display: block;
    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
}

#btn_top a:hover {
    -webkit-animation: headShake 2s;
    animation: headShake 2s;
    filter: brightness(135%);
}

/*頁面開始*/
.page {
    width: 100%;
    height: auto;
    max-width: 1000px;
    position: relative;
    margin: 0 auto;
    top: -3rem;
    margin-bottom: 3rem;
}
.p_top {
    width: 100%;
    height: auto;
}
.p_content {
    width: 100%;
    height: auto;
    background: url('../images/p_in_co.png') repeat-y top;
    background-size: 100% auto;
}
.p_title {
    width: 45%;
    height: auto;
    margin: 0 auto;
    position: relative;
    top: -2rem;
}
.p_bottom {
    width: 100%;
    height: auto;
}

.p_txt {
    width: 80%;
    height: auto;
    margin: 0 auto;
}
.p_txt_l {
    width: auto;
    height: 50px;
    display: block;
    max-width: 800px;
    margin: 0.5rem auto;
}
/* .p_txt_s {
  width: 100%;
  height: auto;
  display: none;
} */
.p1_img {
    width: 80%;
    height: auto;
    margin: 0 auto;
}
.p6_img {
    width: 80%;
    height: auto;
    margin: 1rem auto;
}
.p6_img ul {
    width: 100%;
    height: auto;
    display: flex;
    display: -ms-flexbox;
    flex-direction: row;
    -ms-flex-direction: row;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    justify-content: center;
    -ms-justify-content: center;
}
.p6_img ul li {
    width: 50%;
    height: auto;
}
.p_b_c {
    font-weight: 600;
    color: #8c4800;
    font-size: 1.2rem;
}
.p_txt_r {
    color: #ff0004;
    font-size: 0.9rem;
}

/*表格設定P4*/
.p03_form {
    width: 80%;
    height: auto;
    margin: 0 auto;
    font-size: 0.8em;
}

.p4_icon img {
    max-width: 32px;
}
.p03_form thead {
    color: #ffffff;
    font-weight: bold;
    background-color: #cbb1eb;
    word-break: keep-all;
}
.p03_form tbody tr {
    color: #424242;
    padding: 2rem;
    background-color: #fff;
}
.p03_form tbody tr td {
    line-height: 2rem;
    border: 1px #00000088 solid;
    padding: 5px;
    text-align: center;
}
.p03_form thead tr td {
    line-height: 2rem;
    border: 1px #00000088 solid;
    padding: 5px;
    text-align: center;
}
.p03_form tr td:nth-of-type(1) {
    width: 15%;
}
.p03_form tr td:nth-of-type(2) {
    width: 5%;
}
.p03_form tr td:nth-of-type(3) {
    width: 5%;
}
.p03_form tr td:nth-of-type(4) {
    width: 30%;
}
.p03_form tr td:nth-of-type(5) {
    width: 45%;
}

.p03_form tr:nth-child(3),
.p03_form tr:nth-child(4) {
    background-color: #c7c7c7;
}
.p03_form tr:nth-child(5),
.p03_form tr:nth-child(6) {
    background-color: #f8d8ef;
}
.p03_form tr:nth-child(7),
.p03_form tr:nth-child(8) {
    background-color: #d9f8d8;
}
.p03_form tr:nth-child(9),
.p03_form tr:nth-child(10) {
    background-color: #faf8cd;
}
.p03_form tr:nth-child(11),
.p03_form tr:nth-child(12) {
    background-color: #f8e3bd;
}
.p03_form tr:nth-child(13),
.p03_form tr:nth-child(14) {
    background-color: #c9fcf1;
}
.p03_form tr:nth-child(15),
.p03_form tr:nth-child(16) {
    background-color: #e1f8ff;
}
.p03_form tr:nth-child(18),
.p03_form tr:nth-child(17) {
    background-color: #f8ebff;
}

/*表格設定P6*/
.p6_form {
    width: 100%;
    height: auto;
    background-color: #e1dffe;
    border: 1px #000 solid;
    border-radius: 15px;
    padding: 1rem;
    margin: 0 auto;
}
.p_txt p {
    text-align: left;
}
.p6_form ul li p {
    line-height: 1.3rem;
}
.p6_form ul {
    width: 100%;
    height: auto;
    display: flex;
    display: -ms-flexbox;
    flex-direction: row;
    -ms-flex-direction: row;
    list-style: none;
}
.p6_form ul li {
    width: 50%;
    height: auto;
    color: #000;
    line-height: 1.3em;
    padding: 2.5%;
}
.p6_form ul li:nth-child(2) {
    border-left: 1px solid #000;
}
.p6_txt_im {
    width: 65%;
    height: auto;
    margin: 0 auto;
}
.p_2_txt {
    font-weight: 400;
    color: #00028a;
    font-size: 1rem;
    line-height: 2rem;
}

@media screen and (max-width: 1600px) {
    .mainbox {
        background-position-x: 51%;
        background-size: 160%;
    }
    .logo {
        width: 37%;
    }
    .txt {
        width: 37%;
    }
    .role_l {
        width: 29%;
        bottom: -26%;
    }
    .rolr_r {
    }

    .co {
        margin-top: -4rem;
    }
}

@media screen and (max-width: 1100px) {
    .mainbox {
        background-position-x: 51%;
        background-size: 258%;
    }

    .logo {
        width: 50%;
    }
    .btn {
        width: 50%;
    }
    .role {
        top: -3rem;
    }
    .txt {
        width: 55%;
        margin-top: 3rem;
        margin-bottom: 8rem;
    }
    .role_l {
        width: 34%;
        left: 2%;
        bottom: 6%;
    }
    .rolr_r {
        width: 28%;
        right: 0%;
        top: 2%;
    }

    .btn ul {
        flex-direction: column;
    }
    .btn {
        top: 6%;
        left: 5%;
    }

    .p_txt_l {
        height: 40px;
    }
}