@charset "utf-8";
/* CSS Document */
/*http://bestjquery.com/tutorial/service-box/demo114/*/
/*屬於員工專區的樣式*/
.serviceBox{
    font-family: 'Titillium Web', sans-serif;
    text-align: center;
    padding: 10px 15px;
    box-shadow: 0px -3px 2px rgba(0,0,0,0.05);
    position: relative;
    z-index: 1;
    transition: all 0.3s ease 0s;
}
.serviceBox:before{
    content: "";
    background: #16a085;
    width: 80px;
    height: 15px;
    border-radius: 15px 15px 0 0;
    transform: translateX(-50%);
    position: absolute;
    top: -15px;
    left: 50%;
}
.serviceBox .service-icon{
    color: #1abc9c;
    background: #fff;
    font-size: 50px;
    line-height: 110px;
    width: 130px;
    height: 130px;
    margin: 0 auto 20px;
    border-radius: 50%;
    border: 10px solid #1abc9c;
    position: relative;
    transition: all 0.3s ease 0s;
}
.serviceBox:hover .service-icon{ box-shadow: 0 0 15px rgba(0,0,0,0.25) inset; }
.serviceBox .service-icon i{ transition: all 0.3s ease 0s; }
.serviceBox:hover .service-icon i{
    transform: rotateX(360deg) rotateY(360deg);
}

.serviceBox .service-icon img{ transition: all 0.3s ease 0s; }
.serviceBox:hover .service-icon img{
    transform: rotateX(360deg) rotateY(360deg);
}
.serviceBox .service-icon:before{
    content: "";
    background: #1abc9c;
    width: 55px;
    height: 35px;
    border-radius: 0 0 15px 15px;
    transform: translateX(-50%);
    position: absolute;
    top: -35px;
    left: 50%;
}
.serviceBox .title{
    color: #16a085;
    font-size: 20px;
    margin: 0 0 10px;
    text-transform: uppercase;
	font-family: "Roboto Condensed", "Noto Sans TC", sans-serif;
}
.serviceBox .description{
    line-height: 28px;
}
/*奇美電子報*/
.serviceBox.purple:before{ background: #8e44ad; }
.serviceBox.purple .service-icon{
    color: #9b59b6;
    border-color: #9b59b6;
}
.serviceBox.purple .service-icon:before{ background: #9b59b6; }
.serviceBox.purple .title{ color: #8e44ad; }
/*影音教學平台*/
.serviceBox.blue:before{ background: #2980b9; }
.serviceBox.blue .service-icon{
    color: #3498db;
    border-color: #3498db;
}
.serviceBox.blue .service-icon:before{ background: #3498db; }
.serviceBox.blue .title{ color: #2980b9; }
/*護理部電子報*/
.serviceBox.red:before{ background: #c61e69; }
.serviceBox.red .service-icon{
    color: #f92a84;
    border-color: #f92a84;
}
.serviceBox.red .service-icon:before{ background: #f92a84; }
.serviceBox.red .title{ color: #f92a84; }
@media only screen and (max-width:990px){
    .serviceBox{ margin: 0 0 30px; }
}
/*醫學圖書館*/
.serviceBox.cyan:before{ background: #006a7d; }
.serviceBox.cyan .service-icon{
    color: #f92a84;
    border-color: #019cb8;
}
.serviceBox.cyan .service-icon:before{ background: #019cb8; }
.serviceBox.cyan .title{ color: #019cb8; }
@media only screen and (max-width:990px){
    .serviceBox{ margin: 0 0 30px; }
}
/*建置中*/
.serviceBox.grey:before{ background: #b1b1b1; }
.serviceBox.grey .service-icon{
    color: #f92a84;
    border-color: #C7C7C7;
}
.serviceBox.grey .service-icon:before{ background: #C7C7C7 }
.serviceBox.grey .title{ color: #C7C7C7; }
@media only screen and (max-width:990px){
    .serviceBox{ margin: 0 0 30px; }
}
/*員工檢疫登錄*/
.serviceBox.orange:before{ background: #c72f00; }
.serviceBox.orange .service-icon{
    color: #f73c03;
    border-color: #f73c03;
}
.serviceBox.orange .service-icon:before{ background: #f73c03 }
.serviceBox.orange .title{ color: #f73c03; }
@media only screen and (max-width:990px){
    .serviceBox{ margin: 0 0 30px; }
}
/*學習歷程*/
.serviceBox.d-blue:before{ background: #0d4782; }
.serviceBox.d-blue .service-icon{
    color: #286fb7;
    border-color: #286fb7;
}
.serviceBox.d-blue .service-icon:before{ background: #286fb7; }
.serviceBox.d-blue .title{ color: #0d4782; }
/*新進員工專區*/
.serviceBox.d-green:before{ background: #009624; }
.serviceBox.d-green .service-icon{
    color: #39a845;
    border-color: #39a845;
}
.serviceBox.d-green .service-icon:before{ background: #39a845; }
.serviceBox.d-green .title{ color: #009624; }