/*
* @description: 2024 retention year-end
* @author: Chih
* @update: Chih (pm 03:11 2024/6/21 v4)
*/

@charset 'UTF-8';
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;500;700&display=swap');

.center-element {
    text-align: center;
}
:root
{
    --ColorYellow:#ffbf31;
    --ColorYellow2:#ffdd88;
}

.pink
{background-color: #ff3e3e;
  padding-top:2%;padding-bottom:2%;}
/*----------------------------------------------------*/

.hide-sm {
    display: block;
}

.hide-lg {
    display: none;
}

.hide-lg a {
    font-size: .88em;

    text-align: right;
    text-decoration: underline;

    color: #fff;
}

.flex-box {
    display: flex;
    display: -webkit-flex;
}

.highlight-red
{
    color:#DC143C;
}


/*----------------------------------------------------
    header
----------------------------------------------------*/
header {
    position: sticky;
    z-index: 1000;
    top: 0;
    left: 0;

    width: 100%;
    height: 60px;

    background: #fff;
    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .3);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .3);
}

header .inner {
    line-height: 1;

    position: relative;

    clear: both;
    overflow: hidden;

    width: 1000px;
    margin: 0 auto 10px;
}

header .inner h1 {
    width: 100%;
}

header .inner h1 img {
    float: left;

    margin: 15px;
}

header .inner h1 span {
    font-size: .9em;

    display: block;
    float: right;

    padding-top: 25px;
    padding-right: 18px;

    text-align: right;

    color: #999;
}

header .inner h1 span a {
    text-decoration: none;

    color: #999;
}

header .inner h1 span a:hover {
    color: #c90b0e;
}

header .inner h1 span img {
    float: right;
    /* margin-top: -8px;
    margin-left: 10px;*/

    margin: -12px 5px auto 10px;

    vertical-align: middle;
}



/*----------------------------------------------------
    main
---------------------------------------------------*/
main {
    position: relative;

    overflow: hidden;

    width: 100%;
    height: auto;
    margin: 0 auto;
}

/*----------------------------------------------------
    article
----------------------------------------------------*/
article {
    display: block;
    clear: both;
    overflow: hidden;

    height: auto;
    padding-top: 10px;
}

article .inner {
    font-family: '微軟正黑體', Verdana, Arial, Helvetica, sans-serif;

    position: relative;

    width: 1000px;
    margin: 0 auto;
}

.whole-bg {
	background-color: #d82121;
    background-image: url(../images/top-bg2.png),url(../images/top-bg.png);
    background-position-x: center, center;
    background-position-y: 80px, top;
    background-repeat: no-repeat, no-repeat;
    background-size: auto, contain;
}


.content_wrapper {
    box-sizing: border-box;
    width: 100%;
    padding: 0 0 1vw;
}

/*==menu==*/

#headerWrap {
    z-index: 99;

    padding: 10px 0 14px;

}

nav {
    width: 350px;
    margin: auto;

    text-align: center;

    place-content:center space-between;
}

nav a {
    font: 500 1.125em/1.5 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif;
    color: var(--ColorYellow);
    letter-spacing:2px;
}

nav a:hover {
    color:var(--ColorYellow2);
}

nav a:after {
    display: block;

    width: 20px;
    height: 3px;
    margin: 8px auto 0;

    content: '';

    border-radius: 2px;
    background-color: var(--ColorYellow);
}

.sticky {
    position: fixed;
    top: 60px;
    width: 100%;
    border-bottom: 1px solid #b60b0b;
    background-color: #d82121;
}

/* Tooltip 容器 */
.tooltip {
    position: relative;

    display: inline-block;
}

.tooltip .tooltiptext {
    /* 定位 */
    position: absolute;
    z-index: 99;
    top: 100%;
    left: 50%;

    visibility: hidden;

    width: 120px;
    margin-left: -60px;
    padding: 5px 0;

    text-align: center;

    color: #fff;
    border-radius: 6px;
    background-color: #022a53;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}


.tooltip .tooltiptext::after {
    position: absolute;
    bottom: 100%;
    /* 提示工具头部 */
    left: 50%;

    margin-left: -5px;

    content: ' ';

    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}



/*==event content==*/

h2 {
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    flex: auto 1 1;
}

.desktop_title {
    position: relative;
    z-index: 5;

    width: 100vw;
    max-width: 504px;
    height: auto;
    margin-top: 2vw;
	margin-bottom: 4vw;
	margin-left: 3%;

    animation: pulse ease-in-out 3200ms infinite alternate;
}

.game-gift{
    display: block;
    width: fit-content;   /* 寬度等於內容 */
    margin: 25px auto ;    /* 左右 auto = 置中 */

    padding: 5% 10%;
    text-align: center;

    font-size: 1.6em;
    font-weight: bold;
    color: #fff;
    background: #d63b2f;
    border-radius: 12px;
	line-height: 160%;
	/*border: 3px #ffbf31 solid */
}


@keyframes pulse {
    from {
      transform: scale3d(1, 1, 1);
    }
  
    50% {
      transform: scale3d(1.05, 1.05, 1.05);
    }
  
    to {
      transform: scale3d(1, 1, 1);
    }
  }

.smaller-kv {
    max-width: 560px;
}

/*----------------------------------------------------
    popup
----------------------------------------------------*/
.popup {
    width: 90%;
    margin: 0 auto;
    padding: 20px 0;

    flex-wrap: wrap;
    justify-content: space-evenly;
    -webkit-flex-wrap: wrap;
    -webkit-justify-content: space-evenly;
}

.popup a {
    width: calc(100% / 4 - 1em);
    margin: .8%;
}

.popup img {
    width: 100%;
}

.page-normal {
    width: 100%;
    margin: 5% auto 8%;

    text-align: center;

    color: #252525;
}

.page-normal a {
    margin-left: 1%;
    padding: 5px 7px;

    text-decoration: none;

    color: #252525;
}

.page-normal a:hover {
    background-color: #ebb465;
}

.page-normal .page-current {
    color: #333;
    border: 1px solid #333;
}

.page-normal .page-prev {
    color: #252525;
}

.page-normal a,
.page-normal a:hover,
.page-normal .page-prev,
.page-normal .page-current {
    padding: 5px 7px;
}

/*----------------------------------------------------
    lightbox
----------------------------------------------------*/
.lightbox {
    width: 90%;
    margin: 0 auto;
    padding: 20px 0;

    color: #221815;
}

.fancybox-custom .fancybox-skin {
    box-shadow: 0 0 50px #222;
}

/*----------------------------------------------------
    event
----------------------------------------------------*/
.event {
    width: 100%;
    margin: auto;
    padding: 3% 0 0;

    color: #ffdd88;
}

.event h3 {
    font: 500 1.3125rem 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif;
    text-align: center;
    margin: 1.8em auto 0;
    background: transparent url(../images/title-bg2.png) center center no-repeat;
    background-size:contain;
    place-content: center;
    padding:2%;
	color: #ffbf31;
}

.event h3.title-b
{
    background-image: url(../images/title-bg1.png) ;
	
}

.link {
    text-decoration: underline;
}

.text-underline {
    position: relative;
    display: inline-block;
}

.text-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0px;   /* 與文字距離 */
    width: 100%;
    height: 2px;    /* 底線粗細 */
    background-color: #ffdd88;
}

.event p {
    font: 500 1.313em/1.8 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif;
    line-height: 160%;

    margin: 6% auto 0;

    text-align: center;
}
.event p.game-intro 
{
    font: 700 1.4em/1.5 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif;
	margin-top: 6%
}
.highlight {
    font-weight: 500;

    color: #e84c6d;
}

.highlight2 {
    font-weight: 500;
    color: #fff;
    background-color: var(--ColorPink);
    margin:0 2px;
}

.small-text {
    font-size: .9rem;
    font-style: normal;

    text-align: center;
}

.event button {
    font: 700 2.4em/2 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif;

    display: block;

    width: 25%;
    margin: 8% auto 3%;

    cursor: pointer;

    color: #d82121;
    border: 0;
    border-radius: 10px;
    background-color: var(--ColorYellow);
}

.event button:hover {
    transition: .3s ease;

    background-color: var(--ColorYellow2);
    box-shadow: 0 3px 9px 0 rgba(98, 98, 98, .3);
}
.event button.back{

    width:35%;
    font-size: 2rem;
}
.event button.back a{
    color:#d82121;
    text-decoration: none;
}
.event p button
{
    display:inline-block;
    font:500 1.2rem/1.5 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif;
    width:auto;
    padding: 0 10px;
    border-radius:5px;
    color:rgb(255, 255, 82);
    margin:0 5px;
}
.event a
{
    text-decoration: underline;
    
    color:#ffbf31;
}
.apply-wrap
{
    justify-content: space-between;
    -webkit-justify-content: space-between;
    align-items: center;
    -webkit-align-items: center;
}
.apply-wrap > a
{
    transition:ease-in-out 250ms;
}
.apply-wrap > a:hover
{
    transform: translateY(-3px);
    transition:ease-in-out 250ms;
}
.apply-wrap img
{
    width:100%;
    max-width:450px;
    height: auto;
}

/* == GAME == */
.game-btn {

    border: solid 2px #ffbf31;
    border-radius: 30px;
    background-color: transparent;
    position: relative;
    width: 255px;
    height: 60px;
    margin: 0 auto;
    outline: none;
    transition: all 0.2s ease;
    justify-content: center;
    align-items: center;
}

.game-btn:hover {
    border-color: transparent;
}

.game-btn span {
    position: relative;
    z-index: 2;
    border-radius: 30px;
    color: #ffbf31;
    transition: all 0.3s ease;
    background-color: #ff3e3e;
    width: 100%;
    text-align: center;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.game-btn span img {
    max-width: 200px;
    width: 100%;
    height: auto;
}

.game-result strong{

    font-size:3rem;
    color:#ffbf31;
}
.btn-shade:before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 7px;
    /*影の形状*/
    width: 100%;
    height: 100%;
    border-radius: 30px;
    background-color: #db3535;
}

.btn-shade:hover span {
    transform: translateY(4px);

}

.game-gift{
	
	
}


/*== form ==*/
.form_wrap {
    width: 100%;
    margin: auto;
}

.form_container {
    margin: 0 auto 0;
}

.form_body {
    width: 80%;
    margin: auto;
    padding-top: 2%;
}


.form_title_img {
    margin: auto;

    text-align: center;
}

.form_body h3,.winnerbox h3 {
    font: 400 1.5em/1.6 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif;
    background-image:none;
}

.form_body h4 {
    font: 2.4em/1.6 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif;

    margin: 20% auto;

    text-align: center;
    ;
}

.form_body p {
    line-height: 180%;

    margin: 10% auto;
}

.form_label {
    justify-content: space-between;
    -webkit-justify-content: space-between;
    align-items: center;
    -webkit-align-items: center;
}

.form_label.login-page {
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
}

.form_title_img img {
    width: 100%;
    max-width: 568px;
}

.bottom_text {
    font-size: 1.25em;
    font-weight: normal;
    line-height: 1.6;

    display: block;

    width: 100%;
    margin: 25px 0 0;

    color: #ffdd88;
}

.bottom_text a {
    text-decoration: underline;

    color: #ffdd88;
}

.form_container .form_body .list {
    font: 400 1.5em/2 '微軟正黑體', Verdana, Arial, Helvetica, sans-serif;

    display: block;
    overflow: hidden;

    margin: 20px auto;

    /*text-align: center;*/
}

.list img {
    vertical-align: middle;
}

/*-------------.form_container .form_body label
{
    font: 700 1.5em/2 '微軟正黑體', Verdana, Arial, Helvetica, sans-serif;

    display: block;
    overflow: hidden;

    margin: 20px auto;

    /*text-align: center;
}*/
input::placeholder {
    font-family: '微軟正黑體', Arial, sans-serif;
    font-size: 18px;

    letter-spacing: 7px;

    color: #999;
    outline: none;
}

/*.form_container .form_body input[type=text],
input[type=password],
textarea,
select
{
    display: inline-block;
    width: 60%;

    padding: 10px 25px;

    color: #999;
    border: #ddd 1px solid;
    border-radius: 9px;
    outline: none;
    box-shadow: inset 0 2px 6px 0 rgba(90, 90, 90, .3);
}*/

input[type=text]:hover,
input[type=password]:hover {
    outline: none;
}

select:hover {
    outline: none;
}

#btn_ok {
    font: 400 .9em/2.5 '微軟正黑體', Verdana, Arial, Helvetica, sans-serif;

    display: inline-block;

    padding: 0 10px;

    cursor: pointer;

    color: white;
    border: 0;
    background-color: #2196f3;
}

#btn_ok:hover {
    background-color: #6cf;
}

.form_container .form_body label.vcode {
    display: -webkit-flex;
    /* Safari */
    display: flex;

    justify-content: space-between;
    -webkit-justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    /* Safari 6.1+ */
}

.form_container .form_body input.ipt_vcode {
    margin-right: 0;
}

.form_container .form_body label input[type=text]:focus,
input[type=password]:focus {
    color: #000;
    outline: none;
}


.form_container .form_body input[type='submit']:hover,
input[type='submit']:hover,
input[type='file']:hover,
input[type='button']:hover {
    transition: .3s ease;

    filter: brightness(110%);
    box-shadow: 0 3px 9px 0 rgba(98, 98, 98, .3);
}

.form_container .form_body .submit .button {
    font: 700 1.125em/2.5 '微軟正黑體', Verdana, Arial, Helvetica, sans-serif;

    display: inline-block;

    min-width: 256px;
    padding: 0 15px;

    cursor: pointer;
    transition: .5s ease;
    letter-spacing: 2px;

    color: #000;
    border: none;
    border-radius: 8px;
    background-color: #d33a34;
}

.form_container .form_body .submit:hover,
.submit:hover {
    transition: .3s ease;

    background-color: #ff6;
    box-shadow: 0 3px 9px 0 rgba(98, 98, 98, .3);
}

.form_container .form_body input.submit-cancel,
input.submit-cancel {
    background-color: var(--ColorLightBlue);
}

.form_container .form_body input.submit-cancel:hover,
input.submit-cancel:hover {
    filter: brightness(90%);
}

.submit:active {
    transform: scale(.95);
}

.addr-notice {
    font: 300 .875em/1 '微軟正黑體', Verdana, Arial, Helvetica, sans-serif;

    white-space: nowrap;
}

.form_footer {
    width: 98%;
    margin: 5% auto 0;

    justify-content: space-around;
    -webkit-justify-content: space-around;
    align-items: center;
    -webkit-align-items: center;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}

.form_container .form_body2 .flex-box .submit-btn {
    font: 800 1.125em/2.5 '微軟正黑體', Verdana, Arial, Helvetica, sans-serif;

    display: inline-block;

    width: 40%;
    padding: 5px 15px;

    cursor: pointer;
    transition: .5s ease;
    letter-spacing: 2px;

    color: #fff;
    border: none;
    border-radius: 8px;
    
    background-color: #ff3e3e;
}

.form_container .form_body2 .flex-box .submit-cancel {
    background-color: #db3535;
}

.form_container .form_body2 .flex-box .submit-cancel:hover {
    
    filter: brightness(95%);
}



.form_body2 input[type='radio'] {
    display: block !important;
    float: left;

    width: auto !important;
    margin-top: 1%;
}

.form_body2 span {
    line-height: 160%;
}

.form_body2 {
    width: 100%;
    margin: auto;
    padding-top: 2%;
}

.form_title {
    font-weight: normal;

    display: inline-block;

    text-align: justify;
}

.form_title_img {
    margin: auto;

    text-align: center;
}



.form_body2 h4 {
    font: 500 1.35rem/2 '微軟正黑體', Verdana, Arial, Helvetica, sans-serif;

    display: block;
    overflow: hidden;
    letter-spacing: .1vw;

    margin: auto;
}

.form_body2 .list p {
    font-size: 1.125rem;
    font-weight: normal;
    line-height: 1.6;

    margin: 2% 5% 0 0;
}

.form_title_img img {
    width: 100%;
    max-width: 568px;
}

.form_container .form_body2 .list {
    font: 700 1.35rem/2 '微軟正黑體', Verdana, Arial, Helvetica, sans-serif;

    display: block;
    overflow: hidden;
    letter-spacing: .1vw;

    margin: 20px 0 20px 1%;
}

.form_container .form_body2 .list2 {
    display: block;
    overflow: hidden;

    margin: 20px 8% 20px 1%;
    padding-left: 5%;
    /*text-align: center;*/
}

.form_body2 .list span {
    padding-left: 0;
}

.form_body2 .list2 span {
    padding-left: 0;
}



.pic {
    width: 20%;
    padding: 10px 10px 0;
}



.form_container .form_body2 input[type=text],
input[type=mail],
select,
input[type=password] {
    display: block;

    width: 65%;
    padding: 10px 30px;
    margin-left: 2%;
    color: #999;
    border: #ddd 1px solid;
    border-radius: 9px;
    outline: none;
    box-shadow: inset 0 2px 6px 0 rgb(90 90 90 / 30%);
}

.form_container .form_body2 textarea {
    font: .78em '微軟正黑體', Verdana, Arial, Helvetica, sans-serif;
    line-height: 160% !important;

    display: block;

    width: 76%;
    padding: 10px 30px 0;

    color: #999;
    border: #ddd 1px solid;
    border-radius: 9px;
    outline: none;
    box-shadow: inset 0 2px 6px 0 rgb(90 90 90 / 30%);
}

.form_container .form_body2 label.vcode {
    display: -webkit-flex;
    /* Safari */
    display: flex;

    justify-content: stretch;
    -webkit-justify-content: stretch;
    align-items: center;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    /* Safari 6.1+ */
}

.form_container .form_body2 input.ipt_vcode {
    width: 50%;
}

.form_container .form_body2 label input[type=text]:focus,
input[type=password]:focus {
    color: #000;
    outline: none;
}




.form_container .form_body2 input[type='submit']:hover,
input[type='submit']:hover,
input[type='submit2']:hover,
input[type='button']:hover,
input[type='file']:hover {
    transition: .3s ease;

    box-shadow: 0 3px 9px 0 rgba(98, 98, 98, .3);
}

.form_container .form_body2 .submit,
.submit2 {
    font: 800 1.125em/2.5 '微軟正黑體', Verdana, Arial, Helvetica, sans-serif;

    display: inline-block;

    min-width: 256px;
    padding: 0 15px;

    cursor: pointer;
    transition: .5s ease;
    letter-spacing: 2px;

    color: #000;
    border: none;
    border-radius: 8px;
    background-color: #e72831;
}

.form_container .form_body2 .submit:hover,
.submit2:hover {
    transition: .3s ease;

    background-color: #9d474c;
    box-shadow: 0 3px 9px 0 rgba(98, 98, 98, .3);
}
/*== end of form ==*/


/* ================= 活動贈品 ================= */
.gift-img{
    max-width: 1000px;
    margin: 0 auto;

    display: grid;
    justify-content: center;
	 justify-items: center; 
    grid-template-columns: 420px 420px;
    column-gap: 16px;
    row-gap: 40px;
}

.gift-img > img{
    width: 80%;
    height: auto;
}

.gift-img > img.main-gift{
    grid-column: 1 / -1;
    max-width: 520px;
    margin: 0 auto 24px;
}



/*== WINNER table ==*/

.winnerbox {
    width: 90%;
    margin: auto;
    padding: 0px 0;

    color: #221815;
}

.winner_gift {
    font-size: 70%;
}

table.winner-wrap {
    width: 100%;
    margin: 0 auto 5%;
    padding: 0;

    border-radius: 6px;
}

table.winner-wrap thead {
    background: transparent;
}

table.winner-wrap tr.winner-header {
    font-size: 1.5em;
    line-height: 2;

    text-align: center;
    letter-spacing: 2px;

    color: #fff;
    background-color: var(--ColorGreen);
}

table.winner-wrap tr.winner-header th {
    margin: auto;
}

table.winner-wrap tr {
    line-height: 3;

    display: flex;
    display: -webkit-flex;

    background-color: #fff;

    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    flex: 1;
    -webkit-flex: 1;
}

table.winner-wrap tr:nth-child(even) {
    background-color: #f2f2f2;
}

table.winner-wrap td[colspan]:not([colspan="1"]) {
    width: auto;
}

table.winner-wrap tr td {
    display: inline-block;

    width: 30%;
    padding: 0 1.5%;
}

table.winner-wrap tr td:nth-child(odd) {
    border-right: 1px #eee solid;
    border-left: 1px #eee solid;
}

table.winner-wrap tr td:first-child {
    border-left-width: 0;
}

table.winner-wrap tr.fix-flex {
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
}

button.goto-btn {
    font: 700 2.4em/2 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif;

    letter-spacing: 2px;
    display: block;

    width: 30%;
    margin: 0 auto 6%;

    cursor: pointer;

    color: #000;
    border: 0;
    border-radius: 10px;
    background-color: #fff64a;
    transition: .3s ease;
}

button.goto-btn:hover,
button.goto-btn a:hover {
    transition: .3s ease;

    background-color: #000;
    color: #fff64a;
    box-shadow: 0 3px 9px 0 rgba(98, 98, 98, .3);
}

.join-game-btn img
{
    margin:0 auto;
    width: 100%;
    height: auto;
    max-width: 350px;
	margin-top: 50px
}
.join-game-btn:active {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
}

.join-game-btn:hover
{
    transform: translateY(-3px);
    transition: 400ms ease;
}

/*== Tab setting ==*/
.tabcontent {
    display: none;
}

nav.result-nav {
    font-size: 1.25em;

    width: 80%;
}

nav.result-nav button {
    font: 500 1.125em/1.5 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif;

    color: #000;
    border-width: 0;
    background-color: transparent;
}

nav.result-nav button:focus {
    outline: 0;
}

nav.result-nav button:hover {
    color: #00c2b7;
}

nav.result-nav button:after {
    display: none;
}

nav.result-nav span {
    display: inline-block;

    width: 3px;
    height: 1.75em;

    content: '';

    border-radius: 2px;
    background-color: #00c2b7;
}

.tabcontent {
    width: 100%;
    margin: 2% auto;
    padding: 5%;

    border-radius: 10px;
    background-color: #fff;
}

.tabcontent h4 {
    font: 500 1.5em/2 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif;

    text-align: center;
}

.tabcontent p {
    font-size: 2em;
    font-weight: 700;
    line-height: 2;

    text-align: center;

    color: #ec1e79;
}

#Event1 {
    display: block;
}

/*== End of Tab setting ==*/

/*== GAME ==*/
.game-wrap {
    justify-content: space-between;
    align-items: flex-start;
    -webkit-justify-content: space-between;
    -webkit-align-items: flex-start;
    margin: 5% auto;
}

.game-wrap img {
    width: 100%;
    max-width: 220px;
    height: auto;
    -webkit-box-shadow: 10px 8px 5px -20px rgba(66, 84, 90, 1);
    -moz-box-shadow: 10px 8px 5px -20px rgba(66, 84, 90, 1);
    box-shadow: 10px 8px 5px -20px rgba(66, 84, 90, 1);
    transition: .5s ease;
    border-radius: 28px;
}

.game-wrap img:hover {
    -webkit-box-shadow: 2px 15px 23px -20px rgba(66, 84, 90, 1);
    -moz-box-shadow: 2px 15px 23px -20px rgba(66, 84, 90, 1);
    box-shadow: 2px 15px 23px -20px rgba(66, 84, 90, 1);
    transition: .5s ease;
    transform: translateY(2px);
}


   .desktop_title{
     
    }

/*== end of GAME ==*/
/*----------------------------------------------------
    rules
----------------------------------------------------*/
.rules {
    width: 100%;
    margin: auto;
    padding: 10px 0 20px;

    color: #252525;
}

.rules_2 {
    width: 100%;
    margin: auto;
    padding: 10px 0 20px;

    color: #252525;
}

.rules_2 a {
    text-decoration: underline;

    color: #221815;
}

.rules_2 a:hover {
    color: #c90b0e;
}

/*.rules h3,
.rules_2 h3 {
    background-color: #f3d455;
    display: block;
    color: #252525;
    font-size: 1.6em;
    padding: 1%;
    width: 15%;
    text-align: right;
    padding-right: 3%;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}*/
.rules_2 h3 {
    display: block;

    width: 100%;
    max-width: 268px;
    height: auto;
    margin: 8% auto 0;
}

.rules li {
    font-size: .9em;
    line-height: 180%;

    margin-top: 6px;
    margin-right: 45px;
    margin-bottom: 5px;
    margin-left: 35px;

    list-style-type: decimal;

    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
}


.rules_2 ul {
    line-height: 160%;

    width: 90%;
    margin: 3% auto;
}

.rules_2 li {
    font-size: 1.0em;

    margin-top: 6px;
    margin-bottom: 5px;
    margin-left: 15px;

    list-style-type: decimal !important;
    ;
}


.rules_2 li ul {
    width: 96%;
    margin: 0 auto;
}

.rules_2 li ul li {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;

    list-style-type: disc !important;
}

.rules_3 li {
    font-size: 1.0em;
    line-height: 180%;

    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 10px;
    padding: 0;

    list-style-type: disc !important;
    ;
}

.submit {
    font-size: 90%;

    clear: both;
    overflow: hidden;

    width: 90%;
    margin: 1% auto;

    text-align: center;
}

input.button_contact {
    font-family: '微軟正黑體', '黑體', Arial, Helvetica, sans-serif;
    font-size: 110%;

    float: left;

    width: 45%;
    margin-bottom: 10px;
    margin-left: 3%;
    padding: 10px;

    vertical-align: middle;
    text-decoration: none;

    color: #242424;
    border: 1px solid #fbce23;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

/*----------------------------------------------------
   top
---------------------------------------------------*/

.top_btn {
    clear: both;

    width: auto;
    margin-top: 15px;
    padding-right: 20px;
    padding-bottom: 10px;

    text-align: right;
}

.top_btn img {
    transition: opacity 1s;

    opacity: .2;
}

.top_btn img:hover {
    opacity: .7;
}

/*----------------------------------------------------
    notice
----------------------------------------------------*/
.notice {
    width: 95%;
    margin: 2% auto 0;
    padding-bottom: 0;
}

.notice .content {
    font-size: 1em;

    display: block;

    margin: 0 auto;

    color: #ffdd88;
}

.notice .content p {
    line-height: 1.5;

    margin: 1% auto;
}

.notice .content strong {
    margin: 0 1px;

    color: #ffbf31;
}

.notice ol li {
    line-height: 1.5;

    margin-bottom: 10px;
    margin-left: 20px;

    list-style-type: decimal;
}

.notice h3 {
    font-size: 1.167em;

    margin-bottom: 15px;
}

.notice span.item {
    margin-left: auto;
    padding-bottom: 1px;

    border-bottom: 2px solid #333;
}
/*== scroll to top arrow ==*/
.scroll-to-top-container
{
    width: 25px;
    height: 55px;
    margin: 10px auto;
}
.scroll-to-top-button
{
    position: fixed;
    z-index: 2;
    right: 50px;
    bottom: 30px;

    display: none;

    width: inherit;
    height: 25px;

    cursor: pointer;

    border-radius: 12px;
    background: url('../images/scroll_to_top.png');
    background-repeat: no-repeat;
    background-size: 25px 25px, cover;
}
/*== end of scroll to top arrow ==*/
/*----------------------------------------------------
    footer
----------------------------------------------------*/
footer {
    position: absolute;
    left: 0;

    width: 100%;
}

footer .footer_b {
    background: black;
}

footer .footer_w {
    background: white;
}

footer .inner_b,
footer .inner_w {
    overflow: hidden;

    width: 1000px;
    margin: 0 auto;

    text-align: center;
}

footer .inner_b {
    color: #fff;
    background: #000;
}

footer .logo {
    line-height: 70px;

    margin-right: 20px;
}

footer .logo img {
    vertical-align: middle;
}

footer .inner_w {
    color: #000;
    background: #fff;
}

footer .copy {
    font-size: .725em;
    line-height: 1;

    letter-spacing: 1px;
}


@media only screen and (max-width: 1024px) and (min-height: 1366px) {
    /*==event content==*/

    .form_container {
        margin-bottom: 12%;
    }


    .form_body2 .list2 span {
        padding-left: 0;
    }


    .whole-bg .inner img.desktop_title {
        position: relative;
        z-index: 40;
        top: 20px;
        left: 0;

        display: inline-block;

        width: 100%;
        max-width: 1076px;
        margin: 0;
    }

    .whole-bg .inner img.desktop_title2 {
        position: absolute;
        z-index: 50;
        top: 450px;
        left: 2%;

        display: inline-block;

        width: 100%;
        max-width: 958px;
        margin: 0;
    }

    .hide-lg {
        display: none;
    }

    .hide-sm {
        display: block;
    }

    article .inner {
        width: 100%;
    }


    footer .inner_b,
    footer .inner_w {
        width: auto;
    }

    .hotspring-1 {
        left: 1%;
    }

    .hotspring-2 {
        right: 1%;
    }
}

@media (min-width: 1679.9px) {
    .hotspring-1 {
        left: 12%;
    }

    .hotspring-2 {
        right: 12%;
    }
}

@media only screen and (max-width: 1280px) and (min-height: 1024px) {
    .whole-bg .inner img.desktop_title_g2 {
        display: none;
    }

    .whole-bg .inner img.desktop_title_b2 {
        display: none;
    }

    footer .inner_b,
    footer .inner_w {
        width: auto;
    }

    .hotspring-1,
    .hotspring-2 {
        transform: scale(.8);
    }

    .hotspring-1 {
        left: 1%;
    }

    .hotspring-2 {
        right: 1%;
    }
}


@media only screen and (max-width: 1280px) and (min-height: 800px) {

    footer .inner_b,
    footer .inner_w {
        width: auto;
    }
}

@media only screen and (orientation: portrait) {
    .form_footer {
        width: 90%;

        justify-content: space-between;
        -webkit-justify-content: space-between;
    }

    .form_body h3 {
        text-align: center;
    }

    .header-text {
        font-size: 1.75rem;
    }
}

@media only screen and (orientation: landscape) and (hover: hover) and (pointer: fine) {
    .form_body2 {
        width: 80%;
    }

    .form_container .form_body2 input[type=text],
    input[type=mail],
    input[type=password],
    select,
    .form_container .form_body2 textarea {
        width: 67%;
    }

    .form_container .form_body2 input.ipt_vcode {
        width: 57%;
        margin: 0 2%;
    }
}

@media screen and (max-width: 1023.9px) and (min-width:768px) {
    .form_container .form_body2 .list img {
        margin-top: 10px;
        margin-left: 10px;
    }


    .giftbox dl {
        margin: 3% 5%;

        Width: 90%;
    }

    .giftbox dt {
        Width: 40%;
    }

    .giftbox dt img {
        height: auto;

        Width: 100%;
    }

    .giftbox dd {
        Width: 55%;
    }

    .giftbox dd img {
        height: auto;

        Width: 95%;
    }

    .form_container .form_body,
    .form_container .form_body2 {
        width: 95%;
    }

    .form_body2 .list2 span {
        padding-left: 0;
    }



    /*==event content==*/

    article .inner {
        width: 100%;
    }

    .hide-lg {
        display: block;

        width: 100%;
    }

    .hide-sm {
        display: none;
    }

    .hotspring-1,
    .hotspring-2 {
        transform: scale(.65);
    }

    .hotspring-1 {
        left: -15%;
    }

    .hotspring-2 {
        right: -15%;
    }

    /*==menu==*/

    .menu {
        line-height: 240%;

        top: 17px;
    }


    .campaign .btn,
    .campaign_v .btn {
        font-size: 1.125em;

        width: 85% !important;
        padding: 10px 20px;
    }

    .campaign img,
    .campaign_v img {
        font-size: 1.0em;

        width: 60%;
        padding: 0 0 !important;
    }


    .campaign h2,
    .campaign_v h2 {
        font-size: 1.4em;
    }

    header .inner {
        width: auto;
    }


    /*----------------------------------------------------
    footer
----------------------------------------------------*/
    footer .inner_b,
    footer .inner_w {
        width: auto;
    }
}

@media only screen and (orientation: landscape) and (hover: none) and (pointer: coarse) {

    .hotspring-1,
    .hotspring-2 {
        transform: scale(.8);
    }

    .hotspring-1 {
        left: -5%;
    }

    .hotspring-2 {
        right: -5%;
    }

    .giftbox dd {
        width: auto;
    }

    .event p,
    .form_footer {
        width: 90%;
    }

    .form_container .form_body2 {
        width: 75%;
    }

    .form_container .form_body2 input[type=text],
    .form_body2 input[type='text'],
    input[type='mail'],
    textarea,
    select,
    .form_container .form_body2 textarea,
    input[type=password] {
        width: 61%;
        margin: 0 1%;
    }

    .form_body h3 {
        text-align: center;
    }

    .form_container .form_body2 .list {
        margin-left: 5%;
    }

    .form_container .form_body2 input.ipt_vcode {
        width: 50%;
    }

    .popup {
        width: 95%;
    }
}

@media screen and (max-width: 930px) {

    /*==event content==*/
    .form_title,
    .form_body2 h4 {
        font-size: 90%;
    }

    .form_container {
        margin-bottom: 12%;
    }


    .form_body2 .list2 span {
        padding-left: 0;
    }


    .whole-bg .inner img.desktop_title {
        position: relative;
        z-index: 40;
        top: 20px;
        left: 0;

        display: inline-block;

        width: 100%;
        max-width: 1076px;
        margin: 0;
    }

    .whole-bg .inner img.desktop_title2 {
        position: absolute;
        z-index: 50;
        top: 450px;
        left: 2%;

        display: inline-block;

        width: 100%;
        max-width: 958px;
        margin: 0;
    }


    .popup {
        width: 90%;
        margin: 0 auto;
        padding: 20px 0;
    }




    .hide-lg {
        display: none;
    }

    .hide-sm {
        display: block;
    }

    article .inner {
        width: 90%;
    }


    footer .inner_b,
    footer .inner_w {
        width: auto;
    }
	
      .game-wrap img {
        max-width: 160px;
    }

}

@media screen and (max-width: 667px) and (min-width:375px) {
    .giftbox dt {
        Width: 30%;
    }

    .giftbox dt img {
        height: auto;

        Width: 100%;
    }

    .giftbox dd {
        padding-left: 0;

        Width: 65%;
    }

    .giftbox dd img {
        height: auto;

        Width: 90%;
    }
}

@media screen and (max-width: 760px) and (min-width:360px) {
    .giftbox dt {
        Width: 40%;
    }

    .giftbox dt img {
        height: auto;

        Width: 100%;
    }

    .giftbox dd {
        Width: 55%;
    }

    .giftbox dd img {
        height: auto;

        Width: 100%;
    }
}

@media screen and (max-width: 767.9px) {

    .form_body h3 {
        font: 400 1.125rem/1.4 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif;
    }

    .form_body2 {
        width: 90%;
    }

    .form_body2 .list2 span {
        padding-left: 0;
    }

    .form_container .form_body2 input[type='submit'] {
        margin: 0 auto;
    }
    .whole-bg
    {
        background: url(../images/mobile-bg.png) top center no-repeat;
        background-attachment: fixed;
        background-size: contain;
		background-color: #d82121
    }
	
  .desktop_title{
        margin: 4vw auto 6vw; 
        display: block;     
	     width: 90%   } 



    button.goto-btn
    {
        width: auto;
        font-size:1.75rem;
        padding:0 3%;
    }
    /* == GAME == */
    .game-wrap {
        flex-wrap: nowrap;
        -webkit-flex-wrap: nowrap;
        align-items: center;
        -webkit-align-items: center;
        justify-content: space-evenly;
        -webkit-justify-content: space-evenly;
    }

    .game-wrap img {
        lex: 0 0 33.3333%;  /* ⭐ 三張一定排一行 */
        max-width: 33.3333%;
    }
    .game-wrap dd.game-gift
    {
        width: 380px;
    }

    /*----------------------------------------------------
    rules
----------------------------------------------------*/
    .rules {
        width: 100%;
        margin: auto;
        padding: 20px 0;
    }

    .rules ol {
        padding-left: 10px;
    }

    .rules li {
        margin: 0 10px;
    }

    .rules_2 {
        width: 100%;
        margin: auto;
        padding: 20px 0;
    }




    /*.rules h3,
    .rules_2 h3 {
        background-color: #f3d455;
        display: block;
        color: #252525;
        font-size: 1.4em;
        padding: 1%;
        width: 30%;
        text-align: right;
        padding-right: 3%;
    }*/
	
	.event {  
    padding: 2% 0 0% 0;

}

    .event h3 {
	 font: 500 1.0rem ;
    text-align: center;
    margin: 1.8em auto 0;
    background: transparent url(../images/title-bg3.png) center center no-repeat;
    background-size: contain ;
    place-content: center;
    padding: 2%;
    color: #ffbf31;

    }

	.event h3.title-b
{
    background-image: url(../images/title-bg3.png) ;
}
	
	.event p.game-intro 
{
	margin-top: 1%
}

    .event button {
        font: 700 1.8em/2 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif;

        display: block;

        width: 60%;
    }
    .event button.back
    {
        width: 80%;
    }

    .giftbox button {
        font: 700 1.8em/2 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif;

        display: block;

        width: 60%;
    }



    .giftbox h3 {
        font-size: 1.2em;

        display: block;
        clear: both;

        padding: 1% 5% 0;

        text-align: center;

        color: #d33a34;
    }
	
	.form_body h3,.winnerbox h3 {
    font: 400 1.1em/1.4;
    background-image:none;
	margin-top: 0
}

	
	.join-game-btn img
{
    margin:0 auto;
    width: 80%;
    height: auto;
    max-width: 350px;
	margin-top: 50px
}

    nav{
        width:100%;
        padding:0 5%;
    }



    .hide-lg-md {
        display: block;
    }

    .hide-lg {
        display: block;

        width: 100%;
    }

    .hide-lg img {
        width: 100% !important;
        height: auto;
    }

    .hide-sm {
        display: none;
    }

    .content_wrapper {
        height: auto;
        padding: 0;
    }

    /*----------------------------------------------------
    header
----------------------------------------------------*/
    header .inner {
        width: 100%;
    }

    /*----------------------------------------------------
    main
---------------------------------------------------*/

    #main {
        overflow: hidden;
    }
    .game-result
    {
        width: 95%;
        margin-top: 20%;
        padding-top: 15%;
    }
    .form_container .form_body .list {
        font-size: 1.2em;
    }

    .form_body {
        width: 95%;
        margin: 0 auto;
    }

    .form_text {
        line-height: 2;

        padding-left: 0;

        border-left-width: 0;
    }

    .form_container .form_body input[type=text],
    input[type=password],
    textarea,
    select {
        display: block;

        width: 85%;
    }

    .form_container .form_body input.ipt_vcode {
        margin-right: 0;
    }

    .form_container .form_body input[type=submit],
    input[type=submit] {
        min-width: 49%;
    }

    .form_container .form_body2 input .form_container .form_body2 .list {
        font-size: 1.2em;

        margin: 20px 8% 20px 1%;

        /*text-align: center;*/
    }

    .form_body2 .list p {
        font-size: 1.125rem;
        font-weight: normal;

        margin: 2% 5% 0 0;
    }

    .form_container .form_body .list img {
        margin-top: 10px;
    }

    .form_container .form_body2 .list img {
        margin-top: 10px;
        margin-left: 10px;
    }


    .form_container .form_body2 textarea {
        width: 85%;
    }


    .form_container .form_body2 input[type=text],
    .form_body2 input[type='text'],
    input[type='mail'],
    textarea,
    select {
        display: block;

        width: 85%;
        margin: 0 auto;
    }

    .form_container .form_body2 textarea {
        width: 85%;
        margin: auto;
    }

    /*.form_container .form_body2 input.ipt_vcode
    {
        margin-right: 0;
    }*/

    .form_container .form_body2 input[type=submit] input[type=submit],
    input[type=button],
    input[type=file] {
        width: 80%;
    }

    .form_label {
        flex-direction: column;

        -webkit-flex-direction: column;
    }

    .flex-box input[type=submit],
    input[type=button] {
        min-width: 80%;
        margin: 2% auto;
    }


    .flex-box input[type=file] {
        min-width: 49%;
    }

    .form_container .form_body2 .flex-box input[type='submit'] {
        margin: 2% auto;
    }

    .bottom_text {
        font-size: 1.0em;

        margin: 0 5px;
    }
    .apply-wrap,.gift-img
    {
        flex-direction: column;
        -webkit-flex-direction: column;
    }
	
	.apply-wrap img
{
    width:92%;
    max-width:400px;
    height: auto;
	margin: 2% 4%
}
    .gift-img img
    {
        width: 80% !important;
    }
    /*----------------------------------------------------
    article
----------------------------------------------------*/
    article .inner {
        width: 100%;
    }

    /*----------------------------------------------------
    footer
----------------------------------------------------*/
    footer .inner_b,
    footer .inner_w {
        width: auto;
    }
}

@media screen and (max-width: 540px) {
    .event p {
        font-size: 1.0em;

        padding: 0 5%;
    }
    .game-wrap dd p
    {
        font-size: 1.5rem;
    }

    .giftbox h3 {
        font-size: 1.13em;

        padding: 1% 8% 0;
    }

    .giftbox dl {
        flex-direction: column;

        -webkit-flex-direction: column;
    }


    .giftbox dt {
        Width: 100%;
    }

    .giftbox dt img {
        height: auto;

        Width: 70%;
    }

    .giftbox dd {
        text-align: center;

        Width: 90%;
    }

    .giftbox dd img {
        height: auto;

        Width: 100%;
    }

    .giftbox p {
        line-height: 160%;

        padding: 2% 5%;
    }

    .lucky-draw {
        width: 95%;
    }

    .lucky-draw p {
        font-size: 5vw;
    }

    /*----------------------------------------------------
    popup
----------------------------------------------------*/

    .form_container .form_body input[type=text],
    input[type=password],
    textarea,
    select {
        display: block;

        width: 80%;
    }

    .form_container .form_body2 textarea {
        width: 80%;
    }


    .form_container .form_body2 input[type=text],
    .form_body2 input[type='text'],
    input[type='mail'],
    textarea,
    select {
        display: block;

        width: 80%;
        margin: 0 auto;
    }

    .popup {
        width: 90%;
        margin: 0 auto;
        padding: 20px 0;

        justify-content: center;
        -webkit-justify-content: center;
    }

    .popup a {
        width: calc(100% / 2 - 1em);
    }


    table.winner-wrap tr.winner-header {
        font-size: 1.2em;
        line-height: 120%;

        padding: 2%;

        letter-spacing: 0;
    }

    table.winner-wrap tr td {
        font-size: .88em;

        display: inline-block;

        width: 100%;
        padding: 0 1.5%;
    }

    /*==menu==*/

    .menu {
        top: 5px;

        padding: 2% 6%;

        text-align: center;
    }

    .menu li {
        font-size: 1.0em;

        display: inline !important;

        padding: 2px 10px;

        list-style-type: decimal;

        text-align: center;
    }

    article .inner {
        width: 90%;
    }

    .hide-lg {
        display: block;

        width: 100%;
    }
	
	
	  .gift-img{
        grid-template-columns: 1fr;
    }

    .gift-img > img{
        width: 90%;
        max-width: 420px; /* 保持不會過大 */
    }

    .gift-img > img.main-gift{
        grid-column: auto; /* 取消跨欄 */
    }
}



@media screen and (max-width: 414px) {
    /*----------------------------------------------------
  footer
----------------------------------------------------*/

    footer .logo {
        line-height: 1;

        display: block;

        margin: 8px auto 0;
    }

    footer .copy {
        display: block;

        margin: 10px auto 20px;
    }
}

@media screen and (max-width: 375px) {
    .giftbox h3 {
        font-size: 1.0em;
    }


    .menu {
        top: 4px;
        left: 0;
    }

    table.winner-wrap tr td {
        font-size: .88em;

        display: inline-block;

        width: 100%;
        padding: 0 1.5%;
    }
}



@media screen and (max-width: 360px) {
    /*==menu==*/

    .menu {
        position: absolute;
        z-index: 50;
        top: 4px;
        left: 0;

        width: 100%;
        margin: 0;
    }

    .menu li {
        font-size: .93em;

        padding: 0 6px;
    }
}


@media screen and (max-width: 320px) {
    /*==menu==*/

    .menu {
        position: absolute;
        z-index: 50;
        top: 5px;
        left: 0;

        width: 100%;
        margin: 0;
    }

    .menu li {
        font-size: .88em;

        padding: 0 4px;
    }
}

@media screen and (max-width: 280px) {
    /*==menu==*/

    .menu {
        position: absolute;
        z-index: 50;
        top: 5px;
        left: 0;

        width: 100%;
        margin: 0;
    }

    .menu li {
        font-size: .75em;

        padding: 0 3px;
    }


    .menu li a:hover {
        padding: 4px;
    }

    .event h3 {
        width: 100%;
    }

    .rules h3,
    .rules_2 h3 {
        width: 50%;
    }
}