/* ========================= header ========================= */

header{width: 100%; height: 80px; background-color: rgba(255,255,255,0); text-align: center; position: fixed; padding: 0 40px; box-sizing: border-box; z-index: 1000; transition: .3s; top: 0;}
header .logo{ display: block;  height: 80px; padding: 10px 0; box-sizing: border-box; width: 150px; left: 0; right: 0; margin: 0 auto;}

header .logo img{ width: auto; display: inline-block;}
header img.p-open-active{ display: none;}

header .h-resbtn{ position: absolute; display: block; color: #fff; background-color: #6A833B; width: 180px; height: 50px; line-height: 50px; text-align: center; right: -220px; bottom: 15px; font-weight: 400; letter-spacing: 3px; opacity: 0; transition: .3s; }
header .h-resbtn:hover{ background-color: #c7ceb9;}

header .h-resbtn.show{ right: 420px; opacity: 1;}

/* header scroll */
header.scroll{  background-color: rgba(255,255,255,1); }
header.scroll .logo img:nth-child(2){ display: none}
header.scroll img.p-open-active{ display: block;}
header.scroll .menu span{ background-color: #666; }

/* header active */
header.active{  background-color: rgba(255,255,255,1); }
header.active .logo img:nth-child(2){ display: none}
header.active img.p-open-active{ display: block;}
header.active .menu span{ background-color: #666; }

/* ============= header menu ============= */
header .menu{ position: absolute; right: 40px; top: 25px; width: 25px; height: 25px; cursor: pointer; }
header .menu span{ position: absolute; width: 5px; height: 5px; background-color: #fff; transition: .3s;}
.m-span-wrap{ display: block; position: relative; width: 100%; height: 100%;}
header .menu span:nth-child(1){top: 0; left: 0;}
header .menu span:nth-child(2){top: 0; left: 10px}
header .menu span:nth-child(3){top: 0; right: 0;}
header .menu span:nth-child(4){top: 10px; left: 0;}
header .menu span:nth-child(5){top: 10px; left: 10px}
header .menu span:nth-child(6){top: 10px; right: 0;}
header .menu span:nth-child(7){top: 20px; left: 0;}
header .menu span:nth-child(8){top: 20px; left: 10px}
header .menu span:nth-child(9){top: 20px; right: 0;}

/* active */
header .menu.active span{ background-color: #666; }
header .menu.active span:nth-child(2){width: 4px; height: 4px; top: 6px; left: 5px; right: auto; }
header .menu.active span:nth-child(4){width: 4px; height: 4px; top: 15px; left: 5px; right: auto; }
header .menu.active span:nth-child(6){width: 4px; height: 4px; top: 6px; left: auto; right: 5px; }
header .menu.active span:nth-child(8){width: 4px; height: 4px; top: 15px; left: auto; right: 5px; }
/* ============= header menu ============= */






/* =========== panel =========== */ 
.panel{width: 640px; height: calc(100% - 80px); background-color: rgba(255,255,255,0); position: fixed; right: -600px; top: 80px; transition: .3s; z-index: 1000; transition: .3s;}

.panel.scroll{ background-color: rgba(255,255,255,1); }
.panel.active{ background-color: rgba(255,255,255,1); right: 0;}


.panel.scroll .sns ul li i{ color: #666; }
.panel .sns{ width: 40px; height: 100%;  position: relative; }
.panel .sns ul{ width: 40px; height: 30px; position: absolute; top: calc(50% - 30px); transition: .3s;}
.panel .sns ul li{ width: 40px; height: 40px; float: left; text-align: center;}

.panel .sns ul li i{ color: #fff; font-size: 1.286em; transition: .3s;}
.panel.active .sns ul li i{ color: #666; }
.panel .sns .p-resbtn{ position: absolute; display: block; font-size: 12px; color: #fff; background-color: #6A833B; width: 180px; height: 60px; line-height: 60px; text-align: center; transform: rotate(-90deg); left: -80px; bottom: 100px; font-weight: 400; letter-spacing: 3px; opacity: 1; transition: .3s;}
.panel .sns .p-resbtn:hover {background-color: #c7ceb9;}
.panel .sns .p-resbtn.hide{left: 600px; opacity: 0; pointer-events: none; cursor: default;}

.panel-in{width: 600px; height: 100%; border-left: 1px solid #eee; box-sizing: border-box; padding-left: 30px; padding-right: 40px;}

.panel-in .in-top{width: 100%; height: 85px; line-height: 85px;}
.panel-in .in-top a{font-size: 1.429em; color: #aaa; font-weight: 400; margin-right: 40px;}
.panel-in .in-top a.active{ color: #6A833B;  border-bottom:2px solid #6A833B; }

.in-middle{ width: 100%; height: calc(100% - 290px); overflow-y: auto; }
.in-middle::-webkit-scrollbar{ width: 6px; }
.in-middle::-webkit-scrollbar-thumb { background-color: #6A833B; border-radius: 8px; }
.in-middle::-webkit-scrollbar-track { background-color: #eee; border-radius: 8px; }

.in-middle li{ box-sizing: border-box;}
.in-middle li ul > li{ padding: 5px}
.in-middle li a{ display: block; width: 100%; height: auto;  }
.in-middle li .img{ width: 100%; padding-top: 61%; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; border-radius: 0; position: relative; transition: .3s; }
.in-middle li ul > li a:hover .img{ background-size: 105% 105%; }
.in-middle p.tit{ color: #fff; position: absolute; bottom: 10px; left: 10px; }
.in-middle  .room > li{ padding: 0;}
.in-middle a.inner-tab{ display: inline-block; width: auto; font-size: 24px; color: #aaa; margin-right: 50px; padding-bottom: 25px;}
.in-middle a.inner-tab.active{ color: #666; text-decoration: underline; text-underline-position:under;}

.in-middle .room-inner{ display: none;}








.in-bottom{height: 205px; width: 100%; border-top: 1px solid #eee; }
.in-bottom .pb-btnarea{ padding-top: 40px; padding-bottom: 30px; overflow: hidden;}
.in-bottom .pb-btnarea li{padding: 0 10px; box-sizing: border-box;}
.in-bottom .pb-btnarea a{display: block; width: 100%; height: 100px; border-radius: 14px; border: 1px solid #eee; text-align: center; padding: 20px 0; box-sizing: border-box; box-shadow: 0 0 5px #eee;}
.in-bottom .pb-btnarea a p{ color: #666; font-weight: 400; font-size: 1.143em; padding-top: 5px;}

.in-bottom > p{font-size: 12px; line-height: 15px;}




/* =================== 1024px =================== */
@media (max-width: 1024px) {
    header{height: 60px; padding: 0 15px!important; background-color: rgba(255,255,255,1) }
    header .logo{ height: 30px; padding: 15px 0 10px; width: 70px; left: 0; right: auto; margin: 0; }
    header .logo img:nth-child(2){ display: none}
    header img.p-open-active{ display: block; width: 140%;}
    
    header .menu span{ background-color: #666; }
    
    header .menu{ position: absolute; right: 15px; top: 15px; width: 25px; height: 25px; cursor: pointer; }
    
    header.active{  border-bottom: 1px solid #eee; }

    .panel{width: 100%; height: calc(100vh - 110px); background-color: #fff; position: fixed; right: -100%; top: 60px; transition: .3s;}
    
    
    .panel .sns{ width: 32px; height: 100%;  position: relative; }
    .panel .sns ul{ width: 32px; height: 30px; position: absolute; top: calc(50% - 30px); transition: .3s;}
    .panel .sns ul li{ width: 32px; height: 50px; float: left; text-align: center;}
    
    .panel-in{width: calc(100% - 32px); height: 100%; padding-left: 15px; padding-right: 15px;}
    
    .panel-in .in-top{height: 60px; line-height: 60px;}
    .panel-in .in-top a{font-size: 17px; color: #aaa; font-weight: 400; margin-right: 25px;}
    
    .in-middle{ height: calc(100% - 210px); }
    .in-middle li ul > li{ padding: 5px!important;}
    .in-middle li .img{ padding-top: 65%; }
    .in-middle p.tit{ bottom: 5px; left: 5px; }

    .in-middle a.inner-tab{ display: inline-block; width: auto; font-size: 14px; color: #aaa; margin-right: 25px; padding-bottom: 15px; }

    
    .in-bottom{height: auto; }
    .in-bottom .pb-btnarea{ padding-top: 10px; padding-bottom: 20px; }
    .in-bottom .pb-btnarea li{padding: 0 5px; }
    .in-bottom .pb-btnarea a{height: 60px; border-radius: 7px; border: 1px solid #eee; padding: 10px 0; }
    .in-bottom .pb-btnarea a img{ height: 25px;}
    .in-bottom .pb-btnarea a p{ color: #666; font-weight: 400; font-size: 10px; padding-top: 3px;}
    
    .in-bottom > p{font-size: 10px;}
}




/* ========================= header ========================= */