@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

body {
    height: 100vh;
}
*, *::before, *::after {
    box-sizing: border-box;
    font-family: "Noto Sans TC", "微軟正黑體";
}
h2,h4{
    letter-spacing:0.3em;
}
ul li{
    letter-spacing:0.2em;
    line-height: 1.8em;
}
.navbar{
    position: absolute;
    left:0;
    right:0;
    z-index:10000;
}
.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.active, 
.navbar-light .navbar-nav .nav-link.show, 
.navbar-light .navbar-nav .show>.nav-link{
    color:#20859D;

}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    color:#20859D;
}
.nav-item:hover{
    
border-bottom: 3px solid #20859D;
}
.active{
    
    border-bottom: 3px solid #20859D;
}
.conic {
    position: relative;
    z-index: 0;
    width: 30px;
    height: 90px;
    /* margin: 20px; */
    border-radius: 5px;
    overflow: hidden;
    /* padding: 2rem; */
    
    /* animation: line_b 2s linear 1;
    animation-fill-mode: both; */
}
.delay_1{
    animation-delay: 0.2s;
}
.delay_2{
    animation-delay: 0.4s;
}
.hide_action{

    animation-name: hide_ani;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    overflow: hidden;
}


@keyframes hide_ani {
    80% {
        opacity: 1;
    }
    80.1% {

    }
    99.99% {
        height:100vh;
    }
    100% {
        opacity: 0;
        height:0;
    }
}


@keyframes line_b {
    80% {
        border: 0px solid #595757;
    }
    80.1% {
        /* border: 6px solid #595757; */
    }
    100% {
        /* border: 6px solid #595757; */
    }
}

.conic_bg{
    position: absolute;
    z-index: 0;
    width: 400%;
    height: 200%;
    left:-150%;
    top:-50%;
    border-radius: 5px;
    overflow: hidden;
    /* padding: 2rem; */
    
    /* animation: xxxx 2s linear 1; */
    animation-name: xxxx;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    transform: rotate(0.75turn);
    
    background-color: #595757;
    background-image: conic-gradient(#595757, white, #595757);

}
.conic_content {
    content: '';
    position: absolute;
    z-index: 2;
    left: 3px;
    top: 3px;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    background: white;
    border-radius: 2px;
    animation: tttt 2s linear 1;
    animation-fill-mode: both;
}
.logo{
    position:absolute;
    top:0;
    left:0;
    width:0%;
    height:100%;
    z-index: -100;
    clip-path: polygon(0% 0%, 20% 0, 98% 68%, 98% 100%, 0% 100%);
    animation: logo_bg 1s linear 1;
    animation-delay: 1.3s;
    
    animation-fill-mode: both;
    
    background-image: linear-gradient(to left,rgba(0,0,0,0.5), rgba(255,255,255,0.5));
}
.logo_block{
    position: relative;
}
@keyframes logo_bg {
    80% {
        
        width:100%;
    }
    80.1% {
    }
    100% {
        
        width:100%;
    }
}
@keyframes tttt {
    80% {
        background: white;
    }
    80.1% {
        /* background: transparent; */
    }
    100% {
        /* background: transparent; */
    }
}

@keyframes xxxx {
    80% {
        transform: rotate(1.75turn);
        background-color: #595757;
        background-image: conic-gradient(#595757, white, #595757);
    }
    80.1% {
        
        transform: rotate(1.75turn);
        
    }
    100% {
        
        transform: rotate(1.75turn);
    }
}


.make_bg{
    position: absolute;
    top:0;
    left:0;

    background:url('../img/web_design.jpg');
    background-size: auto 80%; 
    background-repeat: no-repeat;
    background-position: right 10% bottom 20%;

    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.adviser_bg{
    position: absolute;
    top:0;
    left:0;

    background:url('../img/adviser.jpg');
    background-size: auto 80%; 
    background-repeat: no-repeat;
    background-position: left 10% bottom 20%;

    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.adviser_bg_move{

    background-position: left -100% bottom 20%;
    opacity: 0;
    z-index:-100;
}

.adviser_bg_move_in{

    background-position: left 10% bottom 20%;
    opacity: 1;
    z-index:-100;
}


.make_bg_move{

    background-position: right -100% bottom 20%;
    opacity: 0;
    z-index:-100;
}

.make_bg_move_in{

    background-position: right 10% bottom 20%;
    opacity: 1;
    z-index:-100;
}


.design_bg{
    position: absolute;
    top:0;
    left:0;

    background:url('../img/design.jpg');
    background-size: auto 80%; 
    background-repeat: no-repeat;
    background-position: right 10% bottom 20%;

    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.design_bg_move{

    background-position: right -100% bottom 20%;
    opacity: 0;
    z-index:-100;
}

.design_bg_move_in{

    background-position: right 10% bottom 20%;
    opacity: 1;
    z-index:-100;
}



.market_bg{
    position: absolute;
    top:0;
    left:0;

    background:url('../img/market.jpg');
    background-size: auto 80%; 
    background-repeat: no-repeat;
    background-position: left 10% bottom 20%;

    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.market_bg_move{

    background-position: left -100% bottom 20%;
    opacity: 0;
    z-index:-100;
}

.market_bg_move_in{

    background-position: left 10% bottom 20%;
    opacity: 1;
    z-index:-100;
}

.make_content{
    margin-left:auto;
    margin-right:auto;
    background:rgba(255,255,255,0.7);
    padding:10px;
    border-radius: 10px;
}
.adviser_content,.design_content,.market_content{
    margin-left:auto;
    margin-right:auto;
    background:rgba(255,255,255,0.7);
    padding:10px;
    border-radius: 10px;
}


@media (min-width: 576px) {
    
    .market_content{
        margin-left:55%;
        /* background:transparent; */
    }
    .adviser_content{
        margin-left:60%;
        /* background:transparent; */
    }
    .make_content,.design_content{
        
        margin-left:10%;
        /* background:transparent; */
    }
}