@charset "utf-8";

/* video css */
.videobg {
    position: absolute;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 9;
}
.Mvideo {
    width: 100%;
    height: 100%;
    max-height: 969px;
    overflow: hidden;
}
#videoWrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin: 0;
}
#videoWrap iframe,
#videoWrap object,
#videoWrap embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.play_button {
    display: block;
    /* position: fixed; */
    position: absolute;
    width: 500px;
    height: 200px;
    background: none;
    color: #fff;
    text-shadow: 1px 1px 3px #434343;
    z-index: 100;
    right: 6%;
    top: 74%;
}
.play_button h1 {
    font-size: 40px;
    padding: 20px 0 15px 0;
}
.play_button .txt {
    display: block;
    line-height: 23px;
    padding-bottom: 15px;
}
.play_button .playing {
    cursor: pointer;
}
.play_button button {
    background: url('/images/common/video_play.png');
    width: 58px;
    height: 58px;
    border: none;
    outline: none;
    cursor: pointer;
    transition: all 0.6s;
}
.play_button .playing:hover .paly_btn {
    background: url('/images/common/video_playing.png');
    transition: all 0.6s;
}
.play_button span:last-child {
    vertical-align: top;
    line-height: 60px;
    padding-left: 10px;
}
.play_popup {
    display: none;
    width: 100%;
    height: 100%;
    z-index: 10000;
    position: fixed;
    top: 0;
    left: 0;
    background: rgb(0,0,0,0.8);
}
.popup_video {
    text-align: center;
    position: absolute;
    width: 100%;
    top: 51%;
    right: 0;
    left: 0;
    transform: translateY(-50%);
}
.video_content {
    position: relative;
    line-height: 0;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;

}
.iframe_video {
    width: 100%;
    height: 0;
    position: relative;
    /* overflow: hidden; */
    padding-top: 55%;
    margin: 0 auto;
}
.play_close {
    top: -50px;
    color: #fff;
    background: none;
    font-size: 30px;
    border: none;
    right: 21px;
    text-align: center;
    width: 40px;
    height: 40px;
    position: absolute;
    cursor: pointer;
}
.popupvideo {
    position: absolute;
    display: block;
    top: 0;
    width: 100%;
}







.Mcont02 {
    width: 100%;
    margin: 0 auto;
    padding: 50px 0;
    background: url('/images/main/bg01.jpg')no-repeat top center;
    background-size: cover;
}
.M02_item {
    text-align: center;
    color: #948f89;
}
.M02_item h3 {
    font-size: 15px;
}
.M02_item h2 {
    font-size: 45px;
    font-weight: 500;
    margin: 40px 0 30px;
}
.M02_item p {
    display: inline-block;
    width: 46px;
    height: 46px;
}

.Mcont03 {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: url('/images/about/bg01.jpg')no-repeat top center;
    background-size: cover;
}
.Mcont03:After {
    display: block; clear: both; content: "";
}
.Mcont03 .box1 {
    float: left !important;
    width: 75%;
    height: 100%;
}
.Mcont03 .box1 .box_top {
    height: 50%;
    width: 100%;
    border-bottom: 2px solid #868078;
    overflow: hidden;
}
.Mcont03 .box .box_bottom {
    width: 100%;
    height: 50%;
    overflow: hidden !important;
}
.box_con01 {
    float: left;
    width: 60% ;
    overflow: hidden;
    height: 100%;
    border-right: 2px solid #868078;
}
.box_con01 > video {
    width: 100% !important;
    object-fit: cover;
}
.box_con02 {
    float: left;
    width: 29.86%;
    height: 100%;
    box-sizing: border-box;
    padding: 10% 2.5%;
}
.box_con02:after {
    content: '';
    display: block;
    clear: both;
}
.box_con03 {
    float: left;
    width: 20%;
    height: 100%;
    border-right: 2px solid #868078;
    overflow: hidden;
}
.box_con04 {
    float: left;
    width: 19.7%;
    height: 100%;
}
.box_con05 {
    width: 60%;
    height: 100%;
    overflow: hidden;
    border-left: 2px solid #868078;
}
.box_con05 > video {
    width: 100% !important;
    object-fit: cover;
}
.Mcont03 .box2 {
    float: right;
    width: 25%;
    height: 100%;
    box-sizing: border-box;
    box-sizing: border-box;
    border-left: 2px solid #868078;
}
.Mcont03 .box2 > img {
    display: block;
    width: 100%;
    height: 100%;
}
/*
.Phbox {
    float: left;
    width: 50%;
}
.P01_item {
    width: 100%;
    position: relative;
}
.P01_item > div {
    display: table-cell;
    border-collapse: collapse;

} 
.P01_item:after {
    display: block; clear: both; content: "";
}
.P01_cont {
    float: left;
    width: 69.333333%;
    height: 493px;
    border: 2px solid #7d6558;
    overflow: hidden;
} 
.P01dummy {
    width: 100%;
    height: 276px; 
    border-bottom: 2px solid #7d6558;
}
.P02_cont {
    width: 30%;
    height: 493px;
    border-top: 2px solid #7d6558; 
    border-right: 2px solid #7d6558; 
    border-bottom: 2px solid #7d6558; 
}

.P03_cont:first-child {
    border-right: unset;
}
.P03_cont:last-child {
    position: relative;
    border-left: unset;
    width: 288px;
    height: 472px;
}
.P03_cont {
    float:left;
    width: 34.5666666%;
    border-left: 2px solid #7d6558;
    border-right: 2px solid #7d6558;
}
.P02dummy {
    width: 100%;
    height:276px;
    border-bottom: 2px solid #7d6558;
}
.P03dummy {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 430px;
    background: url('/images/main/P03.png')no-repeat top center;
    background-size: cover;
}

.P04_cont {
    float: left;
}
.P04_cont:first-child {
    width: 65%;
}
.P04_cont:last-child {
    width: 34.555%;
    border: 2px solid #7d6558;
}
.P04dummy {
    width: auto;
    height: 406px;
    border-top: 2px solid #7d6558;
    border-bottom: 2px solid #7d6558;
    padding: 88px 0 0 15px;
}
.P04dummy h2 {
    font-size: 20px;
    color: #6d7a70;
    margin-bottom: 20px;
}
.P04dummy p {
    line-height: 1.5em;
}
*/
/* main section02 animation */
.P01_01, .P01_02, .P01_06 {overflow: hidden;}
/*.P01_01 img {
    animation: P01_01 8s ease-in infinite both;
}*/
@keyframes P01_01 {
    0% {transform: scale(1);}
    50% {transform: scale(1.2);}
    100% {transform: scale(1);}
} 
.P01_02 img {
    animation: P01_02 10s linear infinite both;
}
@keyframes P01_02 {
    0% {margin-top: 0;}
    50% {margin-top:-500px;}
    100% {margin-top: 0;}
} 
.P03dummy {
    animation: P03dummy 12s ease-in-out infinite both;
}
@keyframes P03dummy {
    0% {margin-bottom: 0;}
    50% {margin-bottom:-800px;}
    100% {margin-bottom: 0;}
} 
.P01_06 img {
    animation: P01_06 9s cubic-bezier(.45,.17,.15,.88) infinite both;
}
@keyframes P01_06 {
    0% {transform: scale(1);}
    50% {transform: scale(1.2);}
    100% {transform: scale(1);}
}  
/* mobile animation object */
@media (max-width:560px) {
    .P03dummy {
        height: 290px;
        bottom: 260px;
        animation: P03dummy 10s ease-in-out infinite both;
    }
    @keyframes P03dummy {
        0% {margin-bottom: 0;}
        50% {margin-bottom:-500px;}
        100% {margin-bottom: 0;}
    } 
}



.Mcont05 {
    position: relative;
    background: url('/images/main/bg02.jpg')no-repeat top center;
    background-size: cover;
    height: 100vh;
}
.Mcont05 h3 {
    font-weight: 500;
    position: absolute;
    top: 74%;
    left: 78%;
    transform: translate(-50%, -50%);
}


.Mcont06 {
    position: relative;
    background: url('/images/main/bg03.jpg')no-repeat top center;
    background-size: cover;
    height: 100vh;
}
.Mcont06 h2 {
    font-size: 60px;
    font-weight: 500;
    color: #fff;
    padding: 70px 0 0 50px;
}
.Mcont06 p {
    position: absolute;
    font-size: 20px;
    color: #6d7a70;
    text-align: right;
    top: 70%;
    left: 23%;
    transform: translate(-50%, -50%);
}
.Mcont_about {
    position: absolute;
    bottom: 65px;
    right: 150px;
}
.Mcont_about a {
    font-size: 20px;
    color: #6d7a70;
    vertical-align: middle;
    transition: 0.3s all;
}
.Mcont_about a img {
    width: 39px;
    display: inline-block;
    margin-left: 10px;
    vertical-align: bottom;
}
.Mcont_about a:hover {}

.Mcont07 {
    position: relative;
    background: url('/images/common/bg_reser.jpg')no-repeat top center;
    background-size: cover;
    height: 100vh;
}
.reserCont {
    position: relative;
    display: inline-block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

.resertxt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
}
.resertxt p {
    text-align: center;
    font-size: 16px;
    color: #6d7a70;
    margin-top: 185px;
}
.resertxt a {
    position: relative;
    display: block;
    width: 76px;
    height: 76px;
    line-height: 76px;
    text-align: center;
    margin: 80px auto 0;
    font-size: 18px;
    color: #fff;
    background: url('/images/common/Breser.png')no-repeat top center;
    background-size: cover;
}
.resertxt a span {
    display: inline-block;
}
.resertxt a::after {
    display: block;
    content: "";
    margin: -5px auto 0;
    width: 2px;
    height: 300px;
    background: #6d7a70;
}













@media  (max-width: 1480px){}
@media  (max-width: 1024px) {
    .resertxt {
        position: absolute;
        top: 80%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 100%;
    }
    
}
@media  (max-width: 768px) {}
@media  (max-width: 560px) {} 
@media  (max-width: 400px) {}