.home{
    background-image: url(../../Image/images/飄飄雲2.png),linear-gradient(to left,rgb(73, 255, 246),rgb(131, 100, 249));
    background-repeat:repeat-y;
    width: 100vw; 
    height: 100vh;
    background-size: cover;
    overflow-x:hidden;
    }

.home-img{
    margin-top: 200px;
    width: 100%;
    height: 100%;
    }

.home-one{ 
    width: 100%;
    max-height: 44vh;
    box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    margin-top: 8vh;
    margin-bottom: 20px;
    border-color:rgba(225, 225, 225, 0.7); border-style:solid;
    }

.home-two{
    box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background:rgba(225, 225, 225, 0.7);
    padding: 10px;
    margin-top: 8vh;
    margin-bottom: 20px;
    }

.home-three{ 

    height: 20vw;
    box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background:rgba(225, 225, 225, 0.7);
    padding: 10px;
    }
     
.home-four{
    box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background:rgba(225, 225, 225, 0.7);
    padding: 10px;
    }   
.home-text{
    height:35pt;
    margin-bottom:10px;
    width:100% !important;
}

.home-text2{
    height:35pt;
    width:150px !important;
}

.home-title{
    text-align:center;
    font-size: 25px;
    color:blue;
}

.main-img {
    margin-top: 1vh;
    width: 15vw;
    height: 100%;
}

.main-one {
    max-height: 25vh;
    max-width: 33vw;
    box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    margin-top: 1vh;
    margin-bottom: 20px;
    border-color: rgba(225, 225, 225, 0.7);
    border-style: solid;
}

.main-two { 
    border-color:rgba(255, 255, 255, 0); border-style:solid;
    }

.main-title{
    margin-top: 20px;
}    

.btn-sign{
    width:100px;
    height:50px;
    }

.hero_header{
    text-align:center;
    vertical-align: bottom;
    color:black;
    margin-top: 10px;
}

.side-home{
    background-image: url(../../Image/images/飄飄雲.png),linear-gradient(to left,rgb(73, 255, 246),rgb(131, 100, 249));
    background-repeat  : no-repeat,no-repeat;
    width: 100vw; 
    height: 100vh;
    background-size: cover;
    overflow-x:hidden;
    overflow-y:hidden;
}

.side-head-bar{
    padding-right: 30px;
    width: 100vw;
    height: 30px;
    background: rgb(242,246,248); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 43%, rgba(216,225,231,1) 43%, rgba(181,198,208,1) 46%, rgba(181,198,208,1) 46%, rgba(224,239,249,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 43%,rgba(216,225,231,1) 43%,rgba(181,198,208,1) 46%,rgba(181,198,208,1) 46%,rgba(224,239,249,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 43%,rgba(216,225,231,1) 43%,rgba(181,198,208,1) 46%,rgba(181,198,208,1) 46%,rgba(224,239,249,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9',GradientType=0 ); /* IE6-9 */
    font-size:16pt;
    text-align: right;
    cursor:pointer;
}

.side-head
{
    height:140px;
}

.side-left{
    width: 13vw; 
    height: 77vh;
    overflow: auto;
    background-image:linear-gradient(to bottom,rgb(73, 255, 246),rgb(131,100,246));
  }

.side-bar{
    width: 1vw;
    height: 77vh;
    position: relative;
    background: rgb(242,246,248); /* Old browsers */
    background: -moz-linear-gradient(left, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 43%, rgba(216,225,231,1) 43%, rgba(181,198,208,1) 46%, rgba(181,198,208,1) 46%, rgba(224,239,249,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 43%,rgba(216,225,231,1) 43%,rgba(181,198,208,1) 46%,rgba(181,198,208,1) 46%,rgba(224,239,249,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 43%,rgba(216,225,231,1) 43%,rgba(181,198,208,1) 46%,rgba(181,198,208,1) 46%,rgba(224,239,249,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9',GradientType=1 ); /* IE6-9 */
    cursor:pointer;
}

.side-right
{
    width: calc(100vw - 14vw); 
    height: 77vh; 
}
.side-footer{
    width: 100vw;   
    height: 4vh;
    text-align:center;
    font-family: sans-serif;
}

.side-logo{
    height:140px;
}

.side-panel-top{
    width: 13.5vw;
}

.side-panel-mid{
    background-image: url(../../Image/images/選單框-中.png);
    background-repeat: repeat-y;
    background-size: 13.5vw;
}
.side-panel-bottom{
    vertical-align: top;
    width: 13.5vw;
}

.side-panel-title{
    width: 10vw;
    background-image: url(../../Image/images/熱氣球-青綠.png);
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 2vw;
    padding:0.5vw 0.5vw 0.5vw 2vw;
    font-size: 1vw;
    font-weight: bold;
    cursor:pointer;
}

.side-panel-detail{
    margin-left: 3vw;
    font-weight: bold;
    width:9vw;
}

.icon {
    width: 3vh;
    height: 3vh;
}