site.css

/* stripe */
.masthead.stripe{
    padding: 50px 0px;
}
.long.stripe{
    height: 200px;
}
.short.stripe{
    height: 70px;
}
.real.long.stripe{
    height: 600px;
}

.bg-top{
    height:645px;
    width:100%;
    background:url('img/bg-top.png');
}
.bg-bot{
    position:relative;
    top:-1px;
    height:408px;
    width:100%;
    background:url('img/bg-bot.png');
}

/* frame & filter */
.frame.background{
    position: absolute;
    top:0;
    bottom:0;
    z-index: 1;
    width: 100%;
}
.frame.filter{
    position: fixed;
    top:0;
    z-index: 2;
    width: 100%;
    height: 100%;
    transition: background-color 0.7s;
    background: rgba(0,0,0,0.1);
}
.frame.curtain{
    position: relative;
    z-index: 3;
}
/* stript and filter color */
.index.stripe .header,.index.stripe h1,.index.stripe h2,.index.stripe h3,.index.stripe h4,.index.stripe h5,.index.stripe i,.index{
    color: #060050 !important;
    text-shadow: 0px 0px 20px #909090;
}

.des.stripe .header,.des.stripe h1,.des.stripe h2,.des.stripe h3,.des.stripe h4,.des.stripe h5,.des.stripe i{
    color: #008984 !important;
    text-shadow: 0px 0px 20px #FFF;
}
.frame.filter.des{
    background: rgba(86, 237, 255, 0.31);
}

.recruit.stripe .header,.recruit.stripe h1,.recruit.stripe h2,.recruit.stripe h3,.recruit.stripe h4,.recruit.stripe h5,.recruit.stripe i,.ui.recruit.header i,.ui.recruit.header div{
    color: #C27B00 !important;
    text-shadow: 0px 0px 20px #FFF;
}
.frame.filter.recruit{
    background: rgba(255, 169, 123, 0.24);
}

.concert.stripe .header,.concert.stripe h1,.concert.stripe h2,.concert.stripe h3,.concert.stripe h4,.concert.stripe h5,.concert.stripe i,.ui.concert.header i,.ui.concert.header div{
    color: #FF0075 !important;
    text-shadow: 0px 0px 20px #FFF;
}
.frame.filter.concert{
    background: rgba(255, 167, 251, 0.27);;
}

.vender.stripe .header,.vender.stripe h1,.vender.stripe h2,.vender.stripe h3,.vender.stripe h4,.vender.stripe h5,.vender.stripe i,.ui.vender.header i,.ui.vender.header div{
    color: #126F00 !important;
    text-shadow: 0px 0px 20px #FFF;
}
.frame.filter.vender{
    background: rgba(164, 255, 181, 0.27);
}

.footer.stripe{
    background: black;
}
.footer.stripe .header{
    color: white;
}

/* header */
@media (min-width: 1050px){
    .ui.header.massive{
        font-size: 5em;
    }
}

/* misc */
.centerized{
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.centerAligned{
    text-align: center !important;
}
.ui.hidable.hidden{
    display:none;
}

@media (min-width: 700px){
    .viewport-height{
        min-height: 100vh;
    }
}

.bg{
    min-width: 100%;
    min-height: 100vh;
}

/* segment */
.ui.homebrew.inverted.segment{
    background: black;
    color: #46f69d !important;
}

/* rwd */
@media (min-width: 700px){
    .visible.on.xs{
        display: none;
    }
}

@media (max-width: 700px){
    .visible.having.sm{
        display: none;
    }
}

@media (max-width: 700px){
    .visible.on.sm{
        display: none;
    }
}

@media (min-width: 1050px){
    .visible.on.sm{
        display: none;
    }
}

@media (max-width: 1050px){
    .visible.on.md{
        display: none;
    }
}

@media (max-width: 1050px){
    .visible.having.md{
        display: none;
    }
}

@media (min-width: 1050px){
    .visible.no.md{
        display: none;
    }
}

@media (min-width: 1400px){
    .visible.on.md{
        display: none;
    }
}

@media (max-width: 1400px){
    .visible.on.lg{
        display: none;
    }
}

@media (min-width: 1400px){
    .visible.no.lg{
        display: none;
    }
}

/* body */
body {
    background:url('img/bg.png');
    /*margin: 0;*/
}
/* font */
h1,h2,h3,h4,h5,h6,p,div,input{
    font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", "標楷體", DFKai-SB, sans-serif !important;
}

/* input */
div.recruit-input{
    width: 80%;
    margin-top: 20px;
}
div.ui.transparent.underlined.input{
    border-bottom: 2px #422B09 groove;
}
.ui.transparent.underlined.input input{
    color: white;
}
.ui.transparent.underlined.input ::-webkit-input-placeholder { /* WebKit browsers */
    color: #E6E974;
}
.ui.transparent.underlined.input :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #E6E974;
    opacity:  1;
}
.ui.transparent.underlined.input ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #E6E974;
    opacity:  1;
}
.ui.transparent.underlined.input :-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #E6E974;
}

/* uploader */
#shown-has-img{
    display: none;
}
.ui.button.fluid{
    margin-bottom: 5px;
}
.ui.inverted.cus-orange.segment{
    background-color: rgba(88, 90, 0, 0.51) !important;
    color: #FFF !important;
}

/* some small fix */
.us.ui.label{
    margin-bottom: 10px;
}

/* menu */
#menuable h2 .header,#menuable h2 .content,#menuable h2 i{
    -webkit-transition: color 0.5s,opacity 0.5s;
    -o-transition: color 0.5s,opacity 0.5s;
    transition: color 0.5s,opacity 0.5s;
    cursor:pointer;

}
#menuable #to-top{
    display: none !important;
}
#menuable h2:hover .header,#menuable h2:hover .content,#menuable h2:hover i{
    color: white !important;
    text-shadow: 0px 0px 10px #000;
    opacity: 0.99 !important;
}
@media (min-width: 700px){
    #menuable{
        -webkit-transition: background-color 0.5s;
        -o-transition: background-color 0.5s;
        transition: background-color 0.5s;
        background-color: rgba(12, 103, 82, 0);
    }
    #menuable.menued{
        background: url('img/menu-bg.png');
        background-position: 0 2px;
        padding-bottom: 20px;
        position: fixed;
        width: 101%;
        top: -75px;
        z-index: 10;
        left: 0;
    }
    #menuable.menued h2 .header,#menuable.menued h2 .content,#menuable.menued h2 i{
        /* opacity: 0.4; */
        color: #060050 !important;
    }
    #menuable.menued div.column{
        padding-bottom:0;
    }

    #menuable #to-top img{
        width:50px;
        margin-top:80px;
    }
    #menuable.menued #to-top{
        display: inline-block !important;
    }
}

/* concert */

@media (min-width: 1050px){
    div#time-table{
        width: 61%;
    }
}
div#time-table table{
    background-color: rgba(59, 55, 90, 0.4) !important;
}
div#time-table table td,div#time-table table th{
    color: #A1005B !important;
    font-size: 20px;
}

/* vender */
.vender-ex{
    height: 200px;
    width: auto !important;
}

.slide_ctl{
    color:rgb(216, 107, 0);
}

#picture_txt h3,#picture h3{
    color:rgb(73, 116, 39) !important;
}

@media (max-width: 700px){
    .ui.icon.header .content{
        font-size:17px;
    }
}