/* Loader */
/* http://tobiasahlin.com/spinkit/ */
@media only screen and (max-width: 520px) {
    .spinner {
      margin: 280px auto!important;
    }
}
@media only screen and (min-width: 521px) and (max-width: 1367px) {
    .spinner {
      margin: 320px auto!important;
    }
}
@media only screen and (min-width: 1368px){
    .spinner {
      margin: 450px auto!important;
    }
}
#loader{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: teal;
    z-index: 999;

}
.spinner {
  margin: 200px auto ;
  width: 80px;
  text-align: center;
}

.spinner > div {
  width: 20px;
  height: 20px;
  background-color: #fff;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

.highlight{
    color: aquamarine!important;
}
.highlight-red{
    color: red!important;
}
.ccumis{
    position: absolute;
    padding: .5rem;
    left: 0;
    right: 0;
    bottom: 2.5rem;
    margin: 0 auto;
    margin-top: auto;
    max-width: 390px;
    width: 100%;
    opacity: .3;
}
.ccumis:hover{
    opacity: 1;
}
html{
    font-size: 100%;
    font-family: "微軟正黑體";
}
body {
    font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif, "微軟正黑體";
    margin: 0;
    padding: 0;
}
html,body{
    width: 100%;
    height: 100%;
}
body p{
    color: white;
    
    font-size: 1.1rem;
    margin:0em 0em .5rem;
}

#main-cont{
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}
.vertical-scrolling{
    
}
header#sec-main-header{
    //background-color: rgba(255,255,255,.1);
}

.top-logo .ui.header{
    color: white;
}
.top-logo .ui.header .content{
    line-height: 2;
}
.top-logo .ui.header .sub.header{
    color: white;
    font-size: 1.5rem;
}
.top-logo i.circular.icon{
    
    //box-shadow: 0em 0em 0em 0.05em rgba(255,255,255, 0.2) inset;
}
.middle-align-ot:before{
    content: "";
    height:100%!important;
    display: inline-block!important;
    vertical-align: middle!important;
}
.middle-align-ot{
    margin: 0 auto;
}
.middle-align-el{
    display: inline-block!important;
    vertical-align: middle!important;
    max-width: 99.5%;
}
.center-align-ot{
    text-align: center;
}
.center-align-el{
    margin-top: 0 auto;
    left: 0;right: 0;
    text-align: center;
}
h2.ui.header .top-logoName{
    font-size: 3.5rem;
}
section .content-box{
    height: 100%;
    /*width: 100%;*/
}

/* #sec-desc */
section#sec-desc .ui.grid{
    height: inherit;
}
.ui.grid > .column:not(.row).cp-cont{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    min-height: 600px
}
.cp-main{

}
.cp-sub{
    min-height: 180px;
    display: block;
    overflow: hidden;
    float: left;
    width: 33%;
    height: 33%;
    /*border: 1px solid black;*/
    background-color: rgba(0,0,0,.9);
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center;
    opacity: .6;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
    z-index: 1;
}
.cp-sub:hover{
    opacity: 1;
}

.maxwidth{
    max-width: 1280px;
}

/* ---- particles.js ---- */
canvas {
    display: block;
    vertical-align: bottom;
}
#particles-js {
	z-index: -1;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #0f1229; /*#232741*/
/*
    background-image: url(asset/ccu_logo.png);
    background-repeat: no-repeat;
    background-size: 20%;
    background-position: 50% 50%;*/
}
/* ---- stats.js ---- */

.count-particles {
    background: #000022;
    position: absolute;
    top: 48px;
    left: 0;
    width: 80px;
    color: #13E8E9;
    font-size: .8em;
    text-align: left;
    text-indent: 4px;
    line-height: 14px;
    padding-bottom: 2px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
}

.js-count-particles {
    font-size: 1.1em;

}

#stats,
.count-particles {
    -webkit-user-select: none;
    margin-top: 5px;
    margin-left: 5px;
}

#stats {
    border-radius: 3px 3px 0 0;
    overflow: hidden;
}

.count-particles {
    border-radius: 0 0 3px 3px;
}

.ui.cards > .card, .ui.card.cast{
    display: inline-block;
    margin: 2rem;
}
/* fullpage.css */
#fp-nav{
    margin-right: 3%;
}
#fp-nav ul li a span, 
.fp-slidesNav ul li a span {
    background: white;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
}
      
#fp-nav ul li a.active span, 
.fp-slidesNav ul li a.active span, 
#fp-nav ul li:hover a.active span, 
.fp-slidesNav ul li:hover a.active span {
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    background: transparent;
    box-sizing: border-box;
    border: 1px solid white;
}

/* Swiper.js */
.cast-img{
    width: 100%;
    height: 364px;
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center;
}
.swiper-container {
    width: 100%;
    height: 500px;
    margin: 20px auto;
}
.swiper-slide {
    width: 330px;
    text-align: center;
    font-size: 18px;
    background: transparent;
    
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.swiper-pagination-bullet{
    background-color: white;
}
/*Semantic.css*/
.ui.header{
    font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif, "微軟正黑體";
    color: white;
    letter-spacing: .1rem;
}
.ui.cards > .card, .ui.card{
    background-color: rgba(255,255,255,0);
    /*box-shadow:none;*/
    box-shadow: 0px 1px 3px 0px #D4D4D5, 0px 0px 0px 1px #D4D4D5;
}


.ui.cards > .card > .content > a.header, .ui.card > .content > a.header{
    color: white;
}
.ui.cards > .card .meta > a:not(.ui), .ui.card .meta > a:not(.ui){
        color: rgba(255, 255, 255, 0.65);
}
.ui.cards > .card > .content, .ui.card > .content{
        padding: .5rem .5rem;
}

.ui.reddy.ribbon.label {
    border-color: rgba(178, 30, 30, 0.86) !important;
}
.ui.reddy.labels .label, .ui.reddy.label {
    background-color: rgba(219, 40, 40, 0.88) !important;
    border-color: #DB2828 !important;
    color: #FFFFFF !important;
}
.ui.text.container{
    font-family: "微軟正黑體";
}
.ui.form.segment p{
    color: rgba(0, 0, 0, 0.87);
    line-height: .7rem;
}
.ui.header + p {
    letter-spacing: .07rem;
}
.ui.celled.grid > .column:not(.row), .ui.celled.grid > .row > .column{
    box-shadow: -1px 0px 0px 0px rgba(255, 255, 255, 0.1);
}
#joinus .err{
    display: none;
}
section[id^=sec]{
        
        margin-top: 4rem;
    }

    
@media screen and (max-width: 767px) {
    
    section .content-box{
        width: 100%;
    }
    #sec-desc{
        padding: 0 .3rem;
    }
    #sec-desc p{
        text-indent: 2em;
    }
    .ui.grid > .column:not(.row).cp-cont{
        min-height: 670px;
    }
    #sec-desc .middle-align-ot:before{
        content: none;
    }
    .cp-main{
        width: 100%!important;
        background-color: white;
    }
    .cp-sub{

        opacity: .7;
        width: 50%;
        
    }
    .ui.segment{
        padding: .3rem .3rem;
    }
    .ui.form.segment p{
        text-indent:0;
        font-size: 1rem;
        line-height: 1.2rem;
    }
    .ui.container {
        width: auto !important;
        margin-left: .6em !important;
        margin-right: .6em !important;
      }

}
@media only screen and (min-width: 769px) {
    .cp-main{
        opacity: 1!important;
    }
    section .wide.column:nth-of-type(even) .content-box{
        padding-right: 100px;
    }
}