body {
    background: #fef0d8;
    font-family: "Microsoft JhengHei", "敺株��迤暺煾��";
}
#canv{
    position: fixed;
    z-index: -1;
}
#gotop {
    display: none;
    position: fixed;
    width: 150px;
    height: 150px;
    z-index: 999;
    right: 20px;
    bottom: 20px;
    left: initial;
    cursor: pointer;
}

#gotop img {
    width: 100%;
}
@media screen and (max-width:768px) {
    #gotop {
        width: 80px;
        height: 80px;
    }
}

header {
    height: 120px;
    display: flex;
    align-items: center;
}

@media screen and (max-width:768px) {
    header {
        height: 80px;
    }
    header img {
        max-width: 150px;
    }
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 15px;
}

article {
    margin-top: 40px;
}

@media screen and (max-width:768px) {
    article {
        margin-top: 0;
    }
}

/* banner*/

.banner_wrap {
    position: relative;
}

.banner_wrap img {
    position: absolute;
    width: 100%;
}

.earth {
    max-width: 50vw;
    left: 50%;
    transform: translate(-50%, 0);
    -webkit-animation: 	zoomIn 1s ease-out;
    animation: 	zoomIn 1s ease-out;
    transform-origin: left;
}

@keyframes spin { 
    0% { 
        transform: rotate(360deg) translate(-50%, 0);
        transform-origin: left;
    } 
    100% {
        transform: rotate(0deg) translate(-50%, 0);
        transform-origin: left;
    } 
}
@-webkit-keyframes opacity {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes opacity {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}






.logo {
    max-width: 40vw;
    left: 50%;
    transform: translate(-50%, 50%);
    -webkit-animation:opacity 2s ease-in, move 2s ease-in infinite;
    animation:opacity 2s ease-in, move 2s ease-in infinite;
}

.people1 {
    max-width: 9vw;
    left: 27%;
    top: 2vw;
    -webkit-animation: 	bounceInDown 3s;
    animation: 	bounceInDown 3s;
}

.people2 {
    max-width: 7vw;
    right: 27%;
    top: 17vw;
    -webkit-animation: 	bounceInUp 3s;
    animation: 	bounceInUp 3s ;
}

.people3 {
    max-width: 8vw;
    left: 25%;
    top: 18vw;
    -webkit-animation: 	bounceInUp 2s;
    animation: 	bounceInUp 2s;
}

.hot_balloon {
    max-width: 7vw;
    left: 19%;
    top: 8vw;
    -webkit-animation: 	bounceInUp 2s;
    animation: 	bounceInUp 2s;
}

.cloud1 {
    max-width: 7vw;
    left: 28%;
    top: 16.6vw;
    -webkit-animation: 	slideInLeft 2s;
    animation: 	slideInLeft 2s;
}

.cloud2 {
    max-width: 11vw;
    left: 72%;
    top: 20vw;
    z-index: -1;
    -webkit-animation: 	slideInRight 2s;
    animation: 	slideInRight 2s;
}

.cloud3 {
    max-width: 12vw;
    left: 16%;
    top: 29vw;
    -webkit-animation: 	slideInLeft 2s;
    animation: 	slideInLeft 2s;
}

@media screen and (max-width:768px) {
    .earth {
        max-width: 100%;
    }
    .logo {
        max-width: 80vw;
    }
    .people1 {
        max-width: 11vw;
        left: 12%;
        top: 12vw;
    }
    .people2 {
        max-width: 8vw;
        right: 10%;
        top: 39vw;
    }
    .people3 {
        max-width: 8vw;
        left: 6%;
        top: 37vw;
    }
    .people3 {
        max-width: 8vw;
        left: 6%;
        top: 37vw;
    }
    .hot_balloon {
        max-width: 7vw;
        left: 3%;
        top: 24vw;
    }
    .cloud1 {
        max-width: 15vw;
        left: 7%;
        top: 32.8vw;
    }
    .cloud2 {
        max-width: 16vw;
        left: 87%;
        top: 48vw;
        z-index: -1;
    }
    .cloud3 {
        max-width: 17vw;
        left: 5%;
        top: 52vw;
    }
}

@media screen and (min-width:1400px) {
    .earth {
        max-width: 800px;
    }
    .logo {
        max-width: 600px;
    }
    .people1 {
        max-width: 120px;
        left: 26%;
        top: 40px;
    }
    .people2 {
        max-width: 100px;
        right: 26%;
        top: 250px;
    }
    .people3 {
        max-width: 100px;
        left: 24%;
        top: 280px;
    }
    .hot_balloon {
        max-width: 100px;
        left: 17%;
        top: 125px;
    }
    .cloud1 {
        max-width: 100px;
        left: 27%;
        top: 250px;
    }
    .cloud2 {
        max-width: 150px;
        left: 73%;
        top: 290px;
        z-index: -1;
    }
    .cloud3 {
        max-width: 160px;
        left: 15%;
        top: 400px;
    }
}

/* banner_end */

/* nav*/

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    padding-top: 40vw;
    padding-left: 0;
    margin-bottom: 80px;
}

nav ul li {
    writing-mode: vertical-lr;
    font-size: 1.6rem;
    margin: 0 10px;
    letter-spacing: 5px;
    height: 200px;
}

nav ul li:nth-of-type(2) ,nav ul li:nth-of-type(6) {
    padding-top: 30px;
}


nav ul li:nth-of-type(3) ,nav ul li:nth-of-type(5) {
    padding-top: 50px;
}

nav ul li:nth-of-type(4){
    padding-top: 60px;
}

nav ul li:hover{
    -webkit-animation: move 3s infinite ease-in-out;
    animation: move 3s infinite ease-in-out;
    transition: .5s;
}


@-webkit-keyframes move {
    0%   {margin-top: 0;}
    25%  {margin-top: 8px;}
    50%  {margin-top: 0;}
    75%  {margin-top: 8px;}
    100% {margin-top: 0;}
}

@keyframes move {
    0%   {margin-top: 0;}
    25%  {margin-top: 8px;}
    50%  {margin-top: 0;}
    75%  {margin-top: 8px;}
    100% {margin-top: 0;}
}


nav ul li:hover a{
    font-family: "noto sans";
    font-weight: bold;
    color: #ff0074;
}
nav ul li i{
    color: #f3a400;
    transition: .5s;
    padding-bottom: 10px;
}
nav ul li:hover i{
    color: #2a89ff;
    text-shadow: -3px 0px 0px #f8ca6c;
}


nav ul a {
    text-decoration: none;
    color: #000;
}

@media screen and (min-width:1400px) {
    nav ul {
        padding-top: 650px;
        margin-bottom: 100px;
    }
    nav ul li {
        font-size: 1.8rem;
        margin: 0 12px;
        height: 250px;
    }
}

@media screen and (max-width:768px) {
    nav ul {
        padding-top: 70vw;
    }

    nav ul li {
        font-size: 2rem;
        padding: 0 8px;
        height: 230px;
    }

    .fa-map-marker-alt:before {
        content: "\f3c5";
        padding-left: 8px;
    }
}


@media screen and (max-width:500px) {
    nav ul {
        padding-top: 65vw;
        margin-bottom: 50px;
    }
    nav ul li {
        font-size: 1.4rem;
        margin: 0 2px;
        padding: 0 6px;
        height: 200px;
    }
}

/* nav_end */

/* main_content */
.main_content{
    margin-bottom: 40px;
}

.tilte_a{
    position: relative;
    color: #fff;
    background-color: #ff2a7e;
    padding: 6px 0;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 12px;
    text-shadow: 2px 1px 3px #000;
    margin-bottom: 0;
}

.tilte_a::before{
    position: absolute;
    z-index: -1;
    content: "";
    width: 100%;
    height: 90%;
    border: 2px dashed #58b9f7;
    left: 4px;
    top: 8px;
}

.tilte_b{
    position: relative;
    color: #fff;
    background-color: #1574ea;
    padding: 6px 0;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 12px;
    text-shadow: 2px 1px 3px #000;
    margin-bottom: 0;
}

.tilte_b::before{
    position: absolute;
    z-index: -1;
    content: "";
    width: 100%;
    height: 90%;
    border: 2px dashed #ff2a7e;
    left: -9px;
    top: -8px;
}

.main_wrap{
    padding: 0 20px 40px;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    box-sizing: border-box;
}
.main_box{
    padding:40px 20px 0;
    box-sizing: border-box;
    width: 50%;
    display: flex;
    flex-wrap: wrap;
}

.main_box a{
    width: 100%;
    color: #444242;
    transition: .2s;
}

.main_box a:hover{
    color: #f48f01;
}
.main_box a h3{
    margin: 0 0 10px 0;
    line-height: 40px;
    font-size: 1.4rem;
}

.date{
    width: 50%;
    align-self: flex-end;
    font-size: 1.2rem;
    color: #444242;
}

.pink{
    color: #ff2a7e;
    font-weight: 700;
}

.blue{
    color: #1574ea;
    font-weight: 700;
}

.price{
    width: 50%;
    align-self: flex-end;
    text-align: right;
    font-size: 2rem;
    font-style: italic;
    font-family: "noto sans";
}

.call{
    width: 50%;
    align-self: flex-end;
    text-align: right;
    font-size: 1.5rem;
    font-style: italic;
    font-family: "noto sans";
}

.price::after{
    content: "韏�";
    color: #444242;
    font-size: 1rem;
    font-style: normal;
}

@media screen and (max-width:768px) {
    .main_box{
        width: 100%;
    }
    .date{
        width: 100%;
    }
    .price{
        width: 100%;
    }
    .call{
        width: 100%;
    }
}

@media screen and (max-width:500px) {
    .main_wrap{
        padding-left: 0;
        padding-right: 0;
    }
    .main_box{
        padding-bottom: 10px;
        border-bottom: 2px dashed #444242;
    }

    .price{
       margin-top: 20px;
    }
}
/* main_content_end */

/*footer*/
footer {
    color: #fff;
    background: url(../images/footer_bg.jpg) no-repeat center center;
    background-size: cover;
    font-size: 14px;
    letter-spacing: 1px;
    width: 100%;
    height: auto;
    min-height: 340px;
    margin: 0 auto;
    word-break: break-all;
}

@media screen and (max-width: 768px) {
    footer {
        font-size: 12px;
    }
}


footer a {
    color: #fff;
}

footer a:hover {
    color:#00c3dd;
}

.foot_wrap {
    display: flex;
    width: 80%;
    margin: 0 auto;
    padding-top: 5%;
    padding-bottom: 3%;
}


@media screen and (max-width: 1024px) {
    .foot_wrap {
        width: 90%;
    }
}

@media screen and (max-width: 576px) {
    .foot_wrap {
        width: 80%;
        flex-direction: column;
    }
}

.footer_left {
/*    flex: 40%;*/
    width: 40%;
}

@media screen and (max-width: 768px) {
    .footer_left {
/*        flex: 30%;*/
        width: 30%;
    }
}

@media screen and (max-width: 576px) {
    .footer_left {
        padding-top: 20px;
        width: 100%;
    }
}

.footer_right {
    display: flex;
/*    flex: 60%;*/
    width: 60%;
    justify-content: space-between;
}

@media screen and (max-width: 768px) {
    .footer_right {
/*        flex: 70%;*/
        width: 70%;
        margin-left: 4%;
    }
}

@media screen and (max-width: 576px) {
    .footer_right {
        margin: 10px 0;
        flex-direction: column;
        width: 100%;
    }
}

.contact_box_warp {
    display: flex;
    flex-wrap: wrap;
}

@media screen and (max-width: 576px) {
    .contact_box_warp {
        flex-direction: column;
        align-items: start;
    }
}


.contact_box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
/*    flex: 33%;*/
    width: 33%;
}

@media screen and (max-width: 576px) {
    .contact_box {
        width: 100%;
        align-items: flex-start;
    }
    
}
/* footer-end */