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

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

html,
body {
    background: #15013b;
    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/20191210/img/main/bling-3.png');
    background-repeat: no-repeat;
    background-position: center;
}

.hidden {
    display: none;
}
/*=============================================
=                  Navbar                     =
=============================================*/

.navbar {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .75);
    opacity: 0.85;
    background-color: #41009a;
    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/20191210/img/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;
    cursor: pointer;
    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;
}

#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: relative;
    margin: 40px auto 0px auto;
    z-index: 8;
}

#project-3-Section .selectVote.selected {
    font-size: 11pt;
    text-shadow: black 0.1em 0.1em 0.2em;
    color: #f2d44d;
    top: 0px;
    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"] {
    margin-top: 55px;
}
#project-3-Section .selected[data-name="candidate-5"] .selectVote {
    margin-top: 8px;
}
#project-3-Section .selected[data-name="candidate-6"] .selectVote {
    display: none;
}


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

.voteFinish:active {
    background-image: url('//img.eprice.com.tw/img/tw/event/20191210/img/vote/voteButton-gray.png') !important;
}

.voteFinish.active, .voteFinish.active:active {
    background-image: url('//img.eprice.com.tw/img/tw/event/20191210/img/vote/voteButton.png') !important;
}

/*=============================================
=        project-4-Section 最新戰況       =
=============================================*/
.nav-tabs .nav-link.active,
.nav-tabs .show>.nav-link {
    color: #41009a;
    background-color: #ffff00;
    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, 251, 43, 0.5) inset, 0px 0px 12px 2px rgba(255, 251, 43, 0.5);
    border: 3px #ffff00 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/20191210/img/newest/no-1.png');
}

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

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

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


#project-4-Section .item-margin {
    margin: 10px;
    background-color: #fff;
    border: #8681ff solid 3px;
    border-radius: 10px;
    box-shadow: 0px 0px 4px 1px rgba(133, 105, 255, 0.7);

}

#project-4-Section .tab-content strong {
    color: #8681ff;
}


.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: #8681ff;
}

.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;
}

.navbar-footer .icon {
    display: inline-block;
    width: 65px;
    height: 45px;
    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/20191210/img/footerIcon/B01.png');
}

.navbar-footer .icon-2 {
    background-image: url('//img.eprice.com.tw/img/tw/event/20191210/img/footerIcon/B02.png');
}

.navbar-footer .icon-3 {
    background-image: url('//img.eprice.com.tw/img/tw/event/20191210/img/footerIcon/B03.png');
}

.navbar-footer .icon-4 {
    background-image: url('//img.eprice.com.tw/img/tw/event/20191210/img/footerIcon/B04.png');
}

.navbar-footer .icon-5 {
    background-image: url('//img.eprice.com.tw/img/tw/event/20191210/img/footerIcon/B05.png');
}

.navbar-footer .icon-6 {
    background-image: url('//img.eprice.com.tw/img/tw/event/20191210/img/footerIcon/B06.png');
}

.navbar-footer .icon-7 {
    background-image: url('//img.eprice.com.tw/img/tw/event/20191210/img/footerIcon/B07.png');
}

#footer .copyright {
    background-image: linear-gradient(#a84df7, #7f31f9);
}



/*=============================================
=                   modal                    =
=============================================*/
.modal-content {
    background-image: linear-gradient(#a84df7, #7f31f9);
    box-shadow: 0px 0px 12px 2px rgba(155, 255, 247, 0.5) inset, 0px 0px 12px 2px rgba(155, 255, 247, 0.5);
    border: 3px #00ffff solid;

}

.modal-title {
    color: #fff;
    font-weight: bolder;
    text-shadow: #4000a5 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/20191210/img/main/modalTitle-icon.png');
}

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

/*=============================================
=               modal 獎品內容                 =
=============================================*/
.gifts .giftName {
    padding-top: 5px;
    height: 48px;
    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: #41009a;
    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: #41009a;
}

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


/*=============================================
=               modal 投票的                   =
=============================================*/

.voteSection .vote-item {
    height: 48px;
    line-height: 48px;
    font-weight: normal;
}

.voteSection .vote-item strong {
    vertical-align: middle;
    line-height: normal;
    display: inline-block;
}

.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/20191210/img/vote/vote-icon.png');

}

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

a.voteIt:hover:before {
    content: url('//img.eprice.com.tw/img/tw/event/20191210/img/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;
}


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

.ui-dialog {
    background: #8681ff;
    border: 2px solid #ffff00;
    border-radius: 8px;
    padding: 5px;
    z-index: 1010;
    max-width: 80%;
    min-width: 400px;
    position: fixed !important;
    top: 50% !important;
}

.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: #8681ff;
    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;
}



@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: relative;
        top: 45%;
        text-align: center;
        width: 100%;
    }   
}


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

    .card-list .newVote, .voteSection, .giftList .gifts {
        width: 33.33%;
    }
    #project-3-Section .selectVote {
        position: relative;
        top: 45%;
        text-align: center;
        width: 100%;
    }
}

@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: relative;
        top: 45%;
        text-align: center;
        width: 100%;
    }
    
    #project-3-Section img[data-name="candidate-image"] {
        width: 70px;
    }   
}

@media(max-width:480px) {
    .hidden-xs {
        display: none !important;
    }
    
    .visible-xs {
        display: inline-block !important;
    }
    
    .voteSection .vote-margin .vote-item {
        font-size: 10pt;
    }
    
    #project-4-Section .nav .nav-link{
        width:16.66%;
        padding: 10px;
        text-align: center;
    }
    #project-3-Section .selectVote {
        position: relative;
        top: 45%;
        text-align: center;
        width: 100%;
        font-size: 13pt;
    }
    #project-3-Section .selected .selectVote.selected {
        margin-top: -52px;
    }
    #project-3-Section .selected[data-name="candidate-5"] .selectVote {
        margin-top: -36px;
    }
    #project-3-Section img[data-name="candidate-image"] {
        margin-top: 40px;
    }
    #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"] {
        margin-top: 52px;
    }
    
    .modal-candidate {
        margin: 0.5rem 0rem;
    }
    .modal-candidate .modal-body {
        padding: 1rem 0rem;
    }
    .modal-candidate .modal-body>.container {
        padding: 0.5rem;
    }
    
    .modal-candidate .modal-body .voteSection .vote-margin .vote-item {
        height: auto;
    }
    
    #project-4-Section .tab-content strong {
        display: inline-block;
        padding: 0px 40px;
    }
}