header, body{
    padding: 0;
    margin : 0;
    font-family: arial,"Microsoft JhengHei","微軟正黑體",sans-serif !important;
    font-weight: 500;
}
html{
    background-image: url(https://traveltbc.com/wp-content/uploads/2021/03/Capture.png);
    background-attachment: fixed;
}
body, html, .body1{
    position: absolute;
    width:100%;
    scroll-behavior: smooth;
}
body{
    opacity: 0;
}

body::after{
    position:absolute; width:0; height:0; overflow:hidden; z-index:-1; 
    content:
    url(https://traveltbc.com/wp-content/uploads/2021/04/area34.jpg) 
    url(https://traveltbc.com/wp-content/uploads/2021/04/area26.jpg) 
    url(https://traveltbc.com/wp-content/uploads/2021/12/%E8%BF%91%E6%B1%9F%E5%85%AB%E5%B9%A1%E5%A5%B3%E5%85%92%E7%AF%80%E9%9B%9B%E4%BA%BA%E5%BD%A2013-1024x683.jpg)  
    url(https://traveltbc.com/wp-content/uploads/2021/05/prof-hariko1.png); 
}
 .body1{
    /* background: url(https://traveltbc.com/wp-content/uploads/2021/03/sun-bg.png) no-repeat; #a5a26b;
    background-position: 1% 0;
    background-size: 180% auto;
    background-attachment: fixed; */
    background: url(https://traveltbc.com/wp-content/uploads/2022/01/160366811.png) repeat;
    background-size: 15% auto;
    background-attachment: fixed;
} 

a{
    text-decoration: none;
    color:#55524c;
}

.border-line{
    width: 100%;
    height: 3px;
    border-top: 3px solid rgba(184, 162, 99, 1);
    background-image: url(https://traveltbc.com/wp-content/uploads/2021/03/Capture.png);
}
.border-line-1{
    width: 100%;
    height: 3px;
    border-top: 2px solid rgba(184, 162, 99, 1);
    background-color: rgba(184, 162, 99, 1);
    /* background-image: url(https://traveltbc.com/wp-content/uploads/2021/03/Capture.png); */
}

.head-text{
    height:50%;
}
.head-text img{
    height:90%;
    width:auto;
}
.head-text img:hover{
    opacity: 0.9;
}
#banner{
    background-color: #cfc5b4;
    background-image: url("https://traveltbc.com/wp-content/uploads/2021/03/Capture.png");
    display:flex;
    justify-content: center;
    align-items: center;
    width:100%;
    height:100vh;
    position: relative;
    z-index:10;
    overflow: hidden;
    transition: max-height 0.8s linear;
    -webkit-transition: max-height 0.8s linear;
}
.headimg{
    height:90vh;
    width: 90vh;
    display:flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
.headimgs{
    background-image: url("https://traveltbc.com/wp-content/uploads/2021/04/area34.jpg");
    background-size: auto 107%;
    background-position: 50% 35%;
    background-repeat: no-repeat;
    height:90vh;
    width: 90vh;
    border-radius: 50%;
}

.imgframe{
    height:90vh;
    width:70vw;
    display:flex;
    justify-content: center;
    align-items: center;
    margin-left:14%;
    overflow: visible;
}

.inner-box{
    height:98vh;
    width:100vw;
    background: url(https://traveltbc.com/wp-content/uploads/2021/04/banner-frame.png) no-repeat center;
    background-size: auto 100%;
    position: absolute;
}
.kumo-1,.kumo-2,.kumo-3,.kumo-4{
    height:100%;
    width:100%;
    background: no-repeat center;
    position: absolute;
    background-size: auto 100%;
    animation-timing-function:ease-in-out; 
    animation-direction: alternate;
    animation-iteration-count: infinite;
}
.kumo-1{
    background-image: url(https://traveltbc.com/wp-content/uploads/2021/04/kumo-1.png);
    z-index: -1;
    animation-name: kumo1;
    animation-duration: 2.6s; 
}
.kumo-2{
    background-image: url(https://traveltbc.com/wp-content/uploads/2021/04/kumo-2.png);
    z-index: -1;
    animation-name: kumo2;
    animation-duration: 3s; 
}
.kumo-3{
    background-image: url(https://traveltbc.com/wp-content/uploads/2021/04/kumo-3.png);
    animation-name: kumo3;
    animation-duration: 2.8s; 
}
.kumo-4{
    background-image: url(https://traveltbc.com/wp-content/uploads/2021/04/kumo-4.png);
    animation-name: kumo4;
    animation-duration: 2.8s; 
}
  
@keyframes kumo1 {
    0% {transform: translateX(-1vw);}
    100% {transform:  translateX(1vw);}}
@keyframes kumo2 {
    0% {transform: translateX(1vw);}
    100% {transform:  translateX(-1vw);}}
@keyframes kumo3 {
    0% {transform: translateX(1vw);}
    100% {transform:  translateX(-1vw);}}
@keyframes kumo4 {
    0% {transform: translateX(-1vw);}
    100% {transform:  translateX(1vw);}}

@-webkit-keyframes kumo1 {
    0% {transform: translateX(-1vw);}
    100% {transform:  translateX(1vw);}}
@-webkit-keyframes kumo2 {
    0% {transform: translateX(1vw);}
    100% {transform:  translateX(-1vw);}}
@-webkit-keyframes kumo3 {
    0% {transform: translateX(1vw);}
    100% {transform:  translateX(-1vw);}}
@-webkit-keyframes kumo4 {
    0% {transform: translateX(-1vw);}
    100% {transform:  translateX(1vw);}}



hgroup{
    height:90vh;
    width:30vw;
    margin-right:6%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

hgroup p{
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-weight: 500;
    font-size:2vmin;
    position: absolute;
    color:#55524c;
    right:23%;
    top:30%;
    white-space:nowrap;
}

hgroup nav{
    height:27%;
    width: 150px;
    overflow:hidden;
    flex-direction: column;
}
nav a{
    color:#55524c;
    text-decoration: none;
    font-weight: 500;
    font-size: 2.1vmin;
    display: block;
    line-height: 2;
    border-bottom: 0.2px solid #9b9790;
    text-align: center;  
    transition: font-size 0.3s;  
    -webkit-transition: font-size 0.3s; 
    cursor: pointer;
}

nav a:hover{
    font-size: 2.6vmin;
    color:black;
    transition: font-size 0.3s; 
    -webkit-transition: font-size 0.3s;
}

.dl{
    margin-top:0;
    transition: margin-top 0.4s;
    -webkit-transition: margin-top 0.4s;
}

#max{
    width:100vw; 
    height:100vh;
    overflow:hidden;
    transition: max-height 0.75s;
    -webkit-transition: max-height 0.75s;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    position: fixed;
    background-image: url(https://traveltbc.com/wp-content/uploads/2021/03/Capture.png);
    display: flex;    
    justify-content: center;
    align-items: center;}

polygon {
fill-opacity:0.0;}

.chi-pos{
    width:100%;
    height:100px;
    display: block;
    box-sizing: border-box;
}
.chi-position{
    position: absolute;
    z-index: -100;
    top:0;
}

@media screen and (max-width: 1060px) {
    hgroup p{
        display:none !important;
    }
    .headimg{
        max-height:480px;
        max-width:480px;
    }
    .headimgs{
        max-height:480px;
        max-width:480px;
    }
    .inner-box{
        max-height: 520px;
    }
}

@media screen and (max-width: 720px) {
    .body1{
        padding-bottom:50px;
        background-size: 180px auto !important;
    }
    body{
        position: unset;
    }
    hgroup nav{
        display: none;
    }
    hgroup{
        position: absolute;
        margin:0;
        height:90%;
        width:30%;
    }
    .headimg{
        height:180px;
        width: 180px;
    }
    .headimgs{
        height:180px;
        width: 180px;
    }
    .inner-box{
        height:98%;
        width:100%;
    }
    .imgframe{
        height:90%;
        width:100%;
        margin-left:0 !important;}
    #banner{
        height:200px;
        position: relative;
        z-index:1;
    }
    .head-text{
        height:70%;
    }
    .head-text img{
        height:126px;
        width:52px;
    }
    .chi-position{
        position: absolute;
        z-index: -100;
        top:0;
    }
    .site-info{
        display: none;
    }
}

@media screen and (min-width: 1300px){
    body {
        font-size: 1.7vmin;
    }
}