/*=============================================
=                  General                    =
=============================================*/

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    /* border: 1px solid white; */
}

html,
body {
    background: #252533;
    max-width: 100%;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    max-height: 100%;
}

#project-1-Section,
#project-2-Section,
#project-3-Section,
#project-4-Section,
#project-5-Section {
    background-image: url('//img.eprice.com.tw/img/tw/event/20211215/main/bling-3.png');
    background-repeat: no-repeat;
    background-position: center;
}

/*=============================================
=                  Navbar                     =
=============================================*/

.navbar {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .75);
    opacity: 0.85;
    background-color: #850aaa;
    font-weight: bolder;
    color: #fff;
}

.navbar-dark .navbar-nav .nav-link {
    color: #fff;
}

/*=============================================
=                  Header                     =
=============================================*/
#header {
    background-image: url('//img.eprice.com.tw/img/tw/event/20211215/main/headerImage.jpg');
    background-position: center center;
    background-size: cover;
    padding: 0;
    border-radius: 0;
}

#header .jumbotron {
    margin-bottom: 0;
}


#header .slogan-1 {
    position: relative;
    z-index: 100;
}

#header .bling {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 2;
}


#header .slogan-2 {
    position: relative;
    z-index: 100;
}


#header .floorLamp {
    position: absolute;
    left: 0;
    right: 0;
    top: -10;
    bottom: 0;
    margin: auto;
    z-index: 1;
}

/*=============================================
=           project-1-Section 按鈕             =
=============================================*/
#project-1-Section .project-1 {
    position: relative;
    z-index: 100;
}

#project-1-Section .bigShareButton,
#project-1-Section .bigVoteButton {
    position: relative;
    z-index: 100;
    transform: translateY(10px);
    transition: all 0.5s ease;
}

#project-1-Section .bigVoteButton:hover {
    transform: translateY(0px);

}

#project-1-Section .bigShareButton:hover {
    transform: translateY(0px);

}

.project-1>.col-6,
.bigButton>.nav-link {
    padding: 0;
}

#project-1-Section .line-1 {
    position: absolute;
    left: 0;
    right: 0;
    top: 40%;
    z-index: 3;
}

/*=============================================
=        project-2-Section 超多豪華好禮         =
=============================================*/
#project-2-Section .gift {
    padding: 10px;
}

.btn-lg,
.btn-group-lg>.btn {
    border: 0;
    padding: 0;
}

#project-2-Section .moreGift {
    position: relative;
    text-align: center;
    color: white;
    font-weight: bolder;
    font-size: 1.4em;
    text-shadow: black 0.1em 0.1em 0.2em;
}


#project-2-Section .moreGift .moreImg {
    -webkit-filter: brightness(0.5);
    transform: translateY(0px);
    transition: all 0.5s ease;

}

#project-2-Section .moreGift .moreImg:hover {
    -webkit-filter: brightness(1);
    transform: translateY(-10px);

}

#project-2-Section .moreGift .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*=============================================
=        project-3-Section 趕快投票       =
=============================================*/

#project-3-Section .vote {
    padding: 5px 3px;
}

#project-3-Section .vote {
    position: relative;
    z-index: 2;
    -webkit-filter: grayscale(0.8);
    transition: all 0.2s ease;
    color: rgba(140, 140, 140);
    font-size: 1.3em;
}

/* 2021.12.15 - Rover - begin */
#project-3-Section .vote:hover, #project-3-Section .vote.selected {
    position: relative;
    z-index: 2;
    -webkit-filter: grayscale(0);
    color: #fff;
    font-weight: bold;
}

#project-3-Section .btn-show-modal {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 10;
}

#project-3-Section .item {
    width: 50%;
    max-width: 146px;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 50%;
}

#project-3-Section img[data-name="candidate-image"] {
    width: 100px;
    position: absolute;
    bottom: 15%;
    margin: 0px 0px 0px -50px;
    z-index: 8;
}

#project-3-Section .selectVote.selected {
    font-size: 11pt;
    text-shadow: black 0.1em 0.1em 0.2em;
    color: #f2d44d;
    top: 13%;
    width: 100px;
    z-index: 9; 
}

#project-3-Section .selected[data-name="candidate-5"] img[data-name="candidate-image"], 
#project-3-Section .selected[data-name="candidate-6"] img[data-name="candidate-image"],
#project-3-Section .selected[data-name="candidate-7"] img[data-name="candidate-image"] {
    margin-top: 55px;
}
#project-3-Section .selected[data-name="candidate-8"] img[data-name="candidate-image"] {
    bottom: 25%;
}

#project-3-Section .selected[data-name="candidate-5"] .selectVote,
#project-3-Section .selected[data-name="candidate-6"] .selectVote,
#project-3-Section .selected[data-name="candidate-7"] .selectVote,
#project-3-Section .selected[data-name="candidate-8"] .selectVote {
    margin-top: 8px;
}

.btn.voteFinish, .btn.voteFinish:active, .btn.voteFinish.active {
    background-image: url('//img.eprice.com.tw/img/tw/event/20211215/vote/voteButton-gray.png') !important;
    width: 238px;
    height: 79px;
    background-repeat: no-repeat;
    background-position: center;
}

.btn.voteFinish:hover {
    background-image: url('//img.eprice.com.tw/img/tw/event/20211215/vote/voteButton.png') !important;
    width: 238px;
    height: 79px;
    background-repeat: no-repeat;
    background-position: center;
}
/* 2021.12.15 - Rover - finish */


/*=============================================
=        project-4-Section 最新戰況       =
=============================================*/
.nav-tabs .nav-link.active,
.nav-tabs .show>.nav-link {
    color: #6a2db7;
    background-color: #ffffff;
    box-shadow: 0px 0px 12px 2px #ffff0050;
}

a.nav-link {
    color: #fff;
}

a.nav-link:hover {
    color: #ffff00;
}

.tab-content {
    background: rgba(0, 0, 0, .3);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0px 0px 12px 2px rgba(255, 255, 255, 0.5) inset, 0px 0px 12px 2px rgba(255, 255, 255, 0.5);
    border: 3px #ffffff solid;

}

.card-list {
    /* 讓card-list內部的內容並排排列 */
    display: flex;
    /* 調整flex元件的排列方式 */
    /* flex-start, center, flex-end  */
    /* space-between, space-around */
    justify-content: flex-start;
    /* flex內部元素的寬度如果不夠放,自動換行 */
    flex-wrap: wrap;
}

.item-1 .card-text:before {
    content: url('//img.eprice.com.tw/img/tw/event/20211215/newest/no-1.png');
}

.item-2 .card-text:before {
    content: url('//img.eprice.com.tw/img/tw/event/20211215/newest/no-2.png');
}

.item-3 .card-text:before {
    content: url('//img.eprice.com.tw/img/tw/event/20211215/newest/no-3.png');
}

#project-4-Section .card-header {
    background-image: linear-gradient(#bb4ef4, #7c0a8c);
    border-radius: 5px 5px 0 0;
    color: #ffff00;
    font-weight: bold;
    text-shadow: #7c0a8c 0.08em 0.08em 0.02em;
}


#project-4-Section .item-margin {
    margin: 10px;
    background-color: #fff;
    border: #b352ff solid 3px;
    border-radius: 10px;
    box-shadow: 0px 0px 4px 1px #bb4ef4;

}


.card-content>h2,
.card-content>p {
    margin: 0;
}


.card-content {
    padding: 10px 0px 0px;
}

.card-img {
    width: auto;
}

.card-text:before {
    font-size: 16px;
    line-height: 16px;
    font-weight: bold;
    color: #383838;
    content: "獲得 ";
}

.newVote .card-text {
    font-size: 27px;
    font-weight: bold;
    color: #f74d4d;
}

.card-text:after {
    font-size: 16px;
    font-weight: bold;
    color: #383838;
    content: " 票";
}

.flex-box {
    /* flex能讓裡面的元素排在同一行 */
    display: flex;
    /* 讓在flex裡面的元素，在超出可擺放的空間時，自動換行 */
    flex-wrap: wrap;
}




/*=============================================
=                   Footer                    =
=============================================*/

.footer-end {
    box-shadow: 0px 0px 12px 2px rgba(255, 251, 43, 0.5);
    background-color: #ffff00;
    line-height: 0;
}

.navbar-footer .icon {
    display: inline-block;
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
}

.navbar-footer .icon-1 {
    background-image: url('//img.eprice.com.tw/img/tw/event/20211215/footerIcon/A01.png');
	width: 150px;
    height: 80px;
}

.navbar-footer .icon-2 {
    background-image: url('//img.eprice.com.tw/img/tw/event/20211215/footerIcon/A02.png');
	width: 160px;
    height: 80px;
}

.navbar-footer .icon-3 {
    background-image: url('//img.eprice.com.tw/img/tw/event/20211215/footerIcon/A03.png');
	width: 120px;
    height: 80px;
}

.navbar-footer .icon-4 {
    background-image: url('//img.eprice.com.tw/img/tw/event/20211215/footerIcon/A04.png');
	width: 140px;
    height: 80px;
}

.navbar-footer .icon-5 {
    background-image: url('//img.eprice.com.tw/img/tw/event/20211215/footerIcon/A05.png');
	width: 110px;
    height: 80px;
}

.navbar-footer .icon-6 {
    background-image: url('//img.eprice.com.tw/img/tw/event/20211215/footerIcon/A06.png');
	width: 60px;
    height: 80px;
}

.navbar-footer .icon-7 {
    background-image: url('//img.eprice.com.tw/img/tw/event/20211215/footerIcon/A07.png');
	width: 120px;
    height: 80px;
}

.navbar-footer .icon-8 {
    background-image: url('//img.eprice.com.tw/img/tw/event/20211215/footerIcon/A08.png');
	width: 90px;
    height: 80px;
}

.navbar-footer .icon-9 {
    background-image: url('//img.eprice.com.tw/img/tw/event/20211215/footerIcon/A09.png');
	width: 90px;
    height: 80px;
}

.navbar-footer .icon-10 {
    background-image: url('//img.eprice.com.tw/img/tw/event/20211215/footerIcon/A10.png');
	width: 110px;
    height: 80px;
}

#footer .copyright {
    background-image: linear-gradient(#850aaa, #6d0888);
}



/*=============================================
=                   modal                    =
=============================================*/
.modal-content {
    background-image: linear-gradient(#7900c6, #4c067d);
    box-shadow: 0px 0px 12px 2px rgba(253, 255, 128, 0.5) inset, 0px 0px 12px 2px rgba(155, 255, 247, 0.5);
    border: 3px #ffe600 solid;

}

.modal-title {
    color: #fff;
    font-weight: bolder;
    text-shadow: #491260 0.08em 0.08em 0.02em;
}

.modal-notify .modal-header {
    border-radius: 20px 20px 0 0;
    border-bottom: none;
    padding-bottom: 0px;
}

.modal-notify .modal-content {
    border-radius: 20px;
}

.modal-title:before {
    content: url('//img.eprice.com.tw/img/tw/event/20211215/main/modalTitle-icon.png');
}

.modal-title:after {
    content: url('//img.eprice.com.tw/img/tw/event/20211215/main/modalTitle-icon.png');
}

/*=============================================
=               modal 獎品內容                 =
=============================================*/
.gifts .giftName {
    padding-top: 5px;
    font-weight: bolder;
    color: #fff;
    font-size: 0.9em;
}

.gifts .giftName .old {
    color: #ffff00;
    font-size: 1em;

}

.gifts>.giftCount {
    font-size: 0.8em;
    color: #ffff88;
}

#modalGift .modal-body .gift-content {
    background-color: #fff;
}

#modalGift .modal-body .gifts-img {
    padding: 15%;
}

.tab-container {
    overflow-y: scroll;
    background-color: #4c067d;
    padding: 15px;
    border-radius: 0 0 8px 8px;
    height: calc(100% - 40px);
}

#tab-gift {
    width: 100%;
    height: 480px;
    overflow-y: hidden;
}


#tab-gift>ul {
    display: flex;
    margin: 0;
    padding: 0;

}


#tab-gift>ul>li {
    height: 40px;
    width: 50%;
    line-height: 40px;
    list-style: none;
    box-sizing: border-box;
    border-radius: 8px 8px 0 0;
}

#tab-gift>ul>li .tab {
    color: #fff;
    font-weight: bolder;
    text-decoration: none;
}


#tab-gift>ul>li.active {
    background: #4c067d;
}

#tab-gift>ul>li .tab:hover {
    color: #ffff00;
}


/*=============================================
=               modal 投票的                   =
=============================================*/
.voteSection .vote-margin {
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 10px;
}

a.voteIt {
    padding: 5px 10px;
    border-radius: 20px;
    color: #ffff00;
    border: 2px solid #ffff00;
    text-decoration: none;

}

a.voteIt:before {
    line-height: 30px;
    content: url('//img.eprice.com.tw/img/tw/event/20211215/vote/vote-icon.png');

}

a.voteIt:hover {
    background-color: #f74d4d;
    color: white;
}

a.voteIt:hover:before {
    content: url('//img.eprice.com.tw/img/tw/event/20211215/vote/vote-icon2.png');
}

/*=============================================
=               modal 活動辦法                   =
=============================================*/

ol.setsumei {
    font-size: 0.9em;
}

ol.setsumei li {
    padding-bottom: 8px;
    color: #ffff00;
    font-weight: bolder;
}

ol.setsumei span {
    padding-bottom: 8px;
    color: #fff;
    font-weight: 400;
}

/* 2021.12.15 - Rover - begin */
.hidden {
    display: none;
}

body > .overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;    
    opacity: 0.5;
    background-color: #000;
}

.ui-dialog {    
    padding: 5px;
    z-index: 1010;
    max-width: 80%;
    min-width: 400px;
    position: fixed !important;
    top: 50% !important;
    background-image: linear-gradient(#7900c6, #4c067d);
    box-shadow: 0px 0px 12px 2px rgba(253, 255, 128, 0.5) inset, 0px 0px 12px 2px rgba(155, 255, 247, 0.5);
    border: 3px #ffe600 solid;
    border-radius: 20px;
}

.ui-dialog .ui-dialog-titlebar {
    display: none;
}

.ui-dialog .ui-dialog-content {
    padding: 30px 15px 15px 15px;
    color: #fff;
}

.ui-dialog .ui-dialog-buttonset {
    text-align: center;
    padding-bottom: 8px;
}

.ui-dialog .ui-dialog-buttonset button {
    background-color: #cfcf3d;
    color: #8D0909;
    box-shadow: 0px 0px 4px #383838;
    font-weight: bold;
    border: 1px solid #c8b76c;
    border-radius: 5px;
    padding: 3px 15px;
    font-size: 11pt;
    cursor: pointer;
}

.ui-dialog .ui-dialog-buttonset button:hover {
    outline: none;
    color: #544ef2;
    border-color: #f2e39e;
    background-color: #ffff00;
}

.ui-dialog .ui-dialog-buttonset button+button {
    margin-left: 15px;
}

.ui-dialog .ui-dialog-buttonset button:active, .ui-dialog .ui-dialog-buttonset button:focus {
    outline: none;
}

.visible-xs {
    display: none !important;
}
/* 2021.12.15 - Rover - finish */


@media screen and (min-width: 993px) {

    .card-list .newVote,
    .voteSection,
    .giftList .gifts {
        width: 20%;
    }

    #project-5-Section .formWidth {
        width: 50%;
    }

    #project-3-Section .selectVote {
        position: absolute;
        top: 45%;
        right: 20%;
    }
}


@media screen and (max-width: 992px) and (min-width: 541px) {

    .card-list .newVote,
    .voteSection,
    .giftList .gifts {
        width: 33.33%;
    }

    #project-3-Section .selectVote {
        position: absolute;
        top: 45%;
        right: 20%;
    }
}

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

    .card-list .newVote,
    .voteSection,
    .giftList .gifts {
        width: 50%;
    }

    #project-5-Section .formWidth {
        width: 100%
    }

    #project-3-Section .selectVote {
        position: absolute;
        top: 45%;
        right: 10%;
    }
}

@media(max-width:600px) {
    #project-4-Section .nav .nav-link {
        width: 16.66%;
        padding: 10px;
        text-align: center;
    }

    #project-3-Section .selectVote {
        position: absolute;
        top: 45%;
        right: 5%;
    }
}