header{ width: 100%; height: 110px; position: fixed; top: 0; left: 0; transition: .5s; z-index: 999;}
header .wrap1400{ position: relative;}
header h1.logo{ display: inline-block; width: 200px;}
header h1.logo img{ width: 100%; object-fit: cover;}
header h1.logo .mobile{ display: none;}
header .right-con{ display: inline-block; width: fit-content; top: 40px;}
header .right-con #reser-btn{ display: inline-block; color: #fff; line-height: 26px; text-align: center; margin-right: 80px; position: relative; top: -5px;}
header .right-con #reser-btn i{ font-size: 20px; padding-right: 5px;}
header .right-con #reser-btn p{ font-size: 15px; display: inline-block;}
header .right-con #panelbtn{ display: inline-block;}

#panelbtn{ width: 31px; height: 37px; padding: 0; overflow: hidden; position: relative; top: 5px; transition: .3s;}
#panelbtn a{ display: block; width: 100%; height: 100%; position: relative; }
#panelbtn i{ font-size: 36px; position: relative; top: 3px;}

#panelbtn.hide{ opacity: 0;}


/* panel */
.panel{ position: fixed; top: 0; right: -332px; width: 332px; height: 100vh; background-color: rgba(34,34,34,.8); z-index: 1000; display: block; overflow-y: scroll; transition: .5s; padding: 40px; }
.panel::-webkit-scrollbar {display: none; }
.panel.active{ right: 0; }
.panel .panel-top{ display: none;}
.panel .panel-close{ display:block; font-size: 36px; padding-bottom: 60px;}

.panel nav{ padding-bottom: 40px;}
.mNav > ul > li{ width: 100%; overflow: hidden; padding-bottom: 10px; text-align: left; }
.mNav > ul > li > a{ display: block; width: 100%; box-sizing: border-box; line-height: 16px; height: 16px; font-size: 16px; letter-spacing: 0.04em; transition: .3s; color: rgba(255,255,255,.5); overflow: hidden; margin-bottom: 10px; }
.mNav > ul > li > a p{ position: relative; transition: .3s; top: 0;}
.mNav > ul > li > a:hover{color:rgba(255,255,255,1);}
.mNav > ul > li > a:hover p{ position: relative; top: -16px;}
.mNav > ul > li > a.active{ color:rgba(255,255,255,1);}
.mNav > ul > li > a.active p{ position: relative; top: -16px;}

.subNav{ width: 100%; overflow: hidden; display: none; border-top: 1px solid rgba(255,255,255,.3); margin-bottom: 15px; }
.subNav li{ width: 100%; height: auto; box-sizing: border-box; border-bottom: 1px solid rgba(255,255,255,.3); }
.subNav li a{ display: block; width: 100%; height: 100%; padding-left: 15px; line-height: 30px; font-size: 13px; box-sizing: border-box; color: #7eacd7; }
.subNav li a .line{ width: 10px; height: 1px; background-color: #fff; display: inline-block; transition: .3s; position: relative; margin-right: 5px; top: -5px; transform: scaleX(0); transform-origin: left;}
.subNav li a p{ display: inline-block; transition: .3s; left: -15px; position: relative;}
.subNav li a:hover{ color: #fff;}
.subNav li a:hover .line{ transform: scaleX(1);}
.subNav li a:hover p{ left: 0;}


.panel .img-wrap{ width: 100%; height: 158px; overflow: hidden; position: relative;}
.panel .linkpop{ width: calc(100% - 80px); height: 150px; position: absolute; bottom: 40px; left: 40px; flex-wrap: nowrap; flex-direction: column;}
.panel .linkpop a{ display: block; width: 100%; height: 30px; line-height: 28px; text-align: center; border: 1px solid #fff; opacity: .7; color: #fff; font-size: 12px;}


.black-bg{ width: 100%; height: 300px; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 900;
    background: -moz-linear-gradient(top, rgba(0,0,0,.3) 0%, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0,0,0,.3) 0%,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}


footer{ width: 100%; height: 225px; background-color: #222; transition: .3s; position: relative; font-size: 0;}
footer .top{ height: 130px;}
footer .top .flex-wrap{ margin: 0 40px; width: calc(100% - 80px); height: 100%; left: 0; right: 0; margin: 0 auto; border-bottom: 1px solid rgba(238,238,238,.2);}
footer .top .flex-wrap .left p{ font-size: 12px; line-height: 28px;}
footer .top .flex-wrap .right .f-reser-btn{ display: inline-block; width: 50px; height: 50px; line-height: 48px; border-radius: 50%; border: 1px solid #fff; color: #fff; text-align: center; font-size: 16px; opacity: .5;}
footer .btm{ height: 95px;}
footer .btm .flex-wrap{ margin: 0 40px; width: calc(100% - 80px); height: 100%; left: 0; right: 0; margin: 0 auto;}
footer .btm .flex-wrap .left a{ font-size: 12px; line-height: 28px;}
footer .btm .flex-wrap .left span{ font-size: 12px; padding: 0 5px; color: #999;}
footer .btm .flex-wrap .right p{ opacity: .2; font-size: 12px; display: inline-block;}

.fp-auto-height.fp-section, .fp-auto-height .fp-slide, .fp-auto-height .fp-tableCell{ height: 225px!important; vertical-align: top;}

/* =================== 1024px =================== */
@media (max-width: 1024px) {
    header{ position: fixed; top: 0; left: 0; width: 100%; height: 50px; background-color: #fff; z-index: 1000;}
    header h1.logo{ display: inline-block; width: 160px; height: auto; overflow: hidden; position: relative;}
    header h1.logo a{ display: block; width: 100%; height: 20px;}
    header h1.logo img{ position: absolute; top: 0; left: 0; width: 100%; object-fit: cover; }
    header h1.logo .mobile{ display: block; opacity: 1;}
    header h1.logo .common{ opacity: 0; display: none;}

    header .right-con{ top: 0; text-shadow: unset;}
    header .right-con #reser-btn{ color: #3677b3; line-height: 36px; margin-right: 25px; top: 0;}
    header .right-con #reser-btn i{ font-size: 20px; color: #3677b3;  padding-right: 3px;}
    header .right-con #reser-btn p{ font-size: 12px; color: #3677b3; position: relative; top: -3px;}
    #panelbtn{ width: 22px; height: 25px; top: 3px; }
    #panelbtn i{ font-size: 25px; position: relative; top: 3px; color: #222;}

    .panel{ right: -100%; width: 100%; padding: 0; z-index: 1100; background-image: url(../img/common/panel-bg.jpg); background-size: cover; background-repeat: no-repeat; background-position: center;}
    .panel .panel-top{ width: 100%; height: 50px; display: flex; justify-content: space-between; align-items: center; padding: 0 15px; border-bottom: 1px solid rgba(255,255,255,.2);}
    .panel .panel-top h1.logo{ display: inline-block; width: 160px; height: auto; overflow: hidden; position: relative;}
    .panel .panel-top h1.logo a{ display: block; width: 100%; height: 20px;}
    .panel .panel-top h1.logo img{ position: absolute; top: 0; left: 0; width: 100%; object-fit: cover; }
    .panel .panel-top .right-con{ top: 0; text-shadow: unset;}
    .panel .panel-top .right-con #reser-btn{ display: inline-block; color: #4ea2ef; line-height: 36px; margin-right: 25px;}
    .panel .panel-top .right-con #reser-btn i{ display: inline-block; font-size: 20px; color: #4ea2ef; margin-right: 5px; position: relative; top: 3px;}
    .panel .panel-top .right-con #reser-btn p{ display: inline-block; font-size: 12px; color: #4ea2ef; position: relative; top: 0;}
    .panel .panel-close { display: inline-block; font-size: 25px; padding-bottom: 0; position: relative; top: 3px;}
    
    .panel nav{ padding: 35px 15px;}
    .mNav > ul > li{ width: 100%; overflow: hidden; padding-bottom: 10px; text-align: left; }
    .mNav > ul > li > a{ line-height: 18px; height: 18px; font-size: 18px; color: rgba(255,255,255,.4); margin-bottom: 15px; }
    .mNav > ul > li > a p{ position: relative; transition: .3s; top: 0;}
    .mNav > ul > li > a p:nth-child(1){ display: none;}
    .mNav > ul > li > a:hover{color:rgba(255,255,255,1);}
    .mNav > ul > li > a:hover p{ position: relative; top: 0;}
    .mNav > ul > li > a.active{ color:rgba(255,255,255,1);}
    .mNav > ul > li > a.active p{ position: relative; top: 0;}

    .subNav{ margin-bottom: 10px; }
    .subNav li a{ font-size: 12px;  }


    .panel .img-wrap{ display: none!important;}
    .panel .linkpop{ display: none;}


    .black-bg{ display: none;}


    footer{ width: 100%; height: unset; }
    footer .top{ height: unset;}
    footer .top .flex-wrap{ margin: 0 15px; width: calc(100% - 30px); padding: 40px 0; flex-direction: column; align-content: flex-start;}
    footer .top .flex-wrap > div{ width: 100%;}
    footer .top .flex-wrap .left p{ font-size: 12px; line-height: 22px; padding-bottom: 0;}
    footer .top .flex-wrap .right .f-reser-btn{ display: block; width: 50px; height: 50px; line-height: 48px; border-radius: 50%; border: 1px solid #fff; color: #fff; text-align: center; font-size: 16px; opacity: .5; float: right;}
    footer .btm{ height: unset;}
    footer .btm .flex-wrap{ margin: 0; width: 100%; padding: 40px 15px; flex-direction: column; align-content: flex-start;}
    footer .btm .flex-wrap .left a{ font-size: 12px; line-height: 22px; padding-bottom: 25px;}
    footer .btm .flex-wrap .left span{ font-size: 12px; padding: 0 5px; color: #999;}
    footer .btm .flex-wrap .right p{ opacity: .2; font-size: 12px; padding-right: 0; display: block; padding-top: 30px;}
    .fp-auto-height.fp-section, .fp-auto-height .fp-slide, .fp-auto-height .fp-tableCell{ height: unset!important; vertical-align: top;}
}