.index_body{
  background:#e7ebec
  url(../images/bar/texture-white.png);  
}
.index_header{
  background: url(../images/bar/top_main.jpg);
  background-size: cover;
  width: 100%;
  height: 120vh;
  margin-top:80px;
  position: relative;

}
.index_header .index_logo{
    width:550px;
    position: absolute;
    top: 30%;
    left: 50%;
    opacity: 0%;
    transform: translate(-50%);
    animation-name:index_logo;
    animation-duration:1.5s;
    animation-delay: .5s;
    animation-fill-mode: forwards;
}
@keyframes index_logo{
  0%{
opacity: 0%;
  }
  100%{
    opacity: 100%;
  }
}
.index_header .index_pen{
    position: absolute;
    bottom:30%;
    left: 50%;
    transform:translate(-50%)  rotate(0deg);
    transform-origin: left;
    z-index: 10;
   
    opacity: 0%;
    transform: translate(-50%);
    animation-name:index_logo;
    animation-duration:1.5s;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
    transition: .5s;
}
 .index_pen:hover{
  filter: drop-shadow(0 0 10px #000);
}
.index_pen_ph{
  display:none;
  
}
/*----------menu-------------*/
.index_menu{
  height: 100vh;
  /* display: flex;
  justify-content:space-between; */
  align-items: center;
  margin: 0 auto;
  position: relative;
  /* overflow: hidden; */
}

.index_paper_ph{
display: none;
}
.index_other_ph{
  display: none;
}
.index_ink_ph{
  display: none;
}
.index_paper{
  position:absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%,-50%);
  transition: 1.5s;
}
.index_paper img{
  width:300px;
  margin: 10px;
}
.index_menu img{
  transition: .5s;
}
.index_menu a:hover img{
  filter: drop-shadow(0 10px 10px #000);
  transform: translatey(-10px);
}
.index_ink{
  margin: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  transition: 1.5s;
}

/* .index_ink::before{
  content: "";
position: absolute;
top:50%;
left:100%;
border-bottom: 1px solid #b8926b;
width:170%;
} */
.index_ink img{
  width:90%;
}
.index_other img{
  width: 200px;
  margin: 10px;
}
.index_other{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  transition: 1.5s;
}
.index_menu_text{
  position: absolute;
  left: 50%;
  top: 250%;
  transform: translate(-50%);
  transition: .5s;
}
.index_menu_text h5{
  text-align: center;
  font-size: 20px;
  line-height: 40px;
  position: relative;
}
.index_menu_text h5::after{
  content: "";
  position: absolute;
 top: 110%;
  left:50%;
  transform: translate(-50%);
  border-bottom: 1px solid #000000;
  width:300px;
}
.index_menu_text h5::before{
  content: "";
  position: absolute;
 top: 115%;
  left:50%;
  transform: translate(-50%);
  border-bottom: 1px solid #000000;
  width:300px;
}
.index_menu_text p{
  text-align: center;
  font-weight: bold;
}
.index_menu_text_ph{
  display: none;
}
@media screen and (max-height:850px){
  .index_menu{
    height: 110vh;
  }
  .index_menu_text{
    left: 50%;
    top: 260%;
  }

}
@media screen and (max-height:580px){
  .index_menu{
    height: 110vh;
  }
  .index_menu_text{
    left: 50%;
    top: 280%;
  }

}
@media screen and (max-width:1150px) {
  .index_paper img{
    width:250px;
  }
}
@media screen and (max-width:980px) {
    .index_paper img{
    width:200px;
  }
} 
@media screen and (max-width:767px) {
  .index_pen_ph{
    display: block;
    width: 65%;
    position: absolute;
    /* top: 80%; */
    left:18%;
    transition: .5s;
  }
  .index_paper_ph{
    display: block;
  }
  .index_other_ph{
    display: block;
  }
  .index_ink_ph{
    display: block;
  }
  .index_pen{
    display: none;
  }
  .index_html{
    width: 100%;
  } 
  .index_header{
    background: url(../images/bar/top_main.jpg)center;
  }
  .index_menu{
  display: block;
  height:1800px;
  }
  .index_menu img{
    display: block;
    margin: 50px auto;
    width:50%;
  }
  .index_paper{
    display: none;
  }
  .index_ink{
    display: none;
  }
  .index_other{
    display: none;
  }
  .index_paper img{
    width:50%;
    margin:0px auto;
  }
  .index_menu_text_ph{
    display: block;
    padding-top:500px ;
  }
  .index_menu_text_ph h5{
    font-size: 20px;
    text-align: center;
    line-height: 30px;
    position: relative;
  }
  .index_menu_text_ph h5::after{
    content: "";
    position: absolute;
   top: 110%;
    left:50%;
    transform: translate(-50%);
    border-bottom: 1px solid #000000;
    width:300px;
  }
  .index_menu_text_ph h5::before{
    content: "";
    position: absolute;
   top: 115%;
    left:50%;
    transform: translate(-50%);
    border-bottom: 1px solid #000000;
    width:300px;
  }
  .index_menu_text_ph p{
    text-align: center;
    font-weight: bold;
  }
  .index_pen_box::before{
   display: none;
   }
  .index_ink::before{
   display: none;
    }
  .index_pen_box::after{
    display: none;
   }
   .index_pen_box{
    display: none;
  }
 
  .index_menu_text{
 display: none ;
  }
  .index_header .index_logo{
    width:80vw;
    
}
.index_header .index_pen{
   width:80vw;
}
}@media screen and (max-width:414px) {
  .index_pen_ph{
    width: 90%;
    top: 60%;
    left:5%; 
  }
  .index_menu{
    display: block;
    height:1100px;
    }
}

/*--------about_content-----*/
.index_about{
background: #14191D;
margin-top: 400px;
}
.index_about_content{
  display: flex;
  justify-content: space-between;
}
.index_about_text{
  width: 50%;
  background: #14191D;
  position: relative;
}
.index_about_text p{
  font-size: 20px;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  line-height: 30px;
  text-align: center;
  opacity:0%;
}
.index_about_text p.active{
  animation-name:index_about_text;
  animation-duration: 1.5s;
  /* animation-delay: .5s; */
  animation-fill-mode: forwards;
}
@keyframes index_about_text{
  0%{
    opacity:0%;
    top: 60%;
  }
  20%{
    opacity:20%;
  }
  40%{
    opacity:40%;
  }
  60%{
    opacity:60%;
  }
  80%{
    opacity:80%;
  }
  100%{
    opacity:100%;
    top: 50%;
  }
}
.index_about_text_ph{
  display: none;
}
.index_about_pic{
  width: 50%;
  height:50vh;
  overflow: hidden;
  position: relative;
 opacity:0%;
}
.index_about_pic.active{
  animation-name:index_about_pic;
  animation-duration: 1.5s;
  /* animation-delay: .5s; */
  animation-fill-mode: forwards; 
}
@keyframes index_about_pic{
  0%{
    opacity:0%;
    left:-50%;
  }
  20%{
    opacity:0%;
  }
  40%{
    opacity:0%;
  }
  60%{
    opacity:20%;
  }
  80%{
    opacity:30%;
  }
  100%{
    opacity:100%;
    left:0%;
  }
}
.index_about_text_pc{
  width: 50%;
  background: #14191D;
  position: relative;
}
.index_about_text_pc p{
  font-size: 20px;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  line-height: 30px;
  text-align: center;
  opacity:0%;
}
.index_about_text_pc p.active{
  animation-name:index_about_text;
  animation-duration: 1.5s;
  /* animation-delay: .5s; */
  animation-fill-mode: forwards;
}
.index_about_content_pc img{
  opacity:0;
}
.index_about_content_pc img.active{
  animation-name:index_about_content_pc;
  animation-duration: 1.5s;
  /* animation-delay: .5s; */
  animation-fill-mode: forwards;
  position: relative;
}
@keyframes index_about_content_pc{
  0%{
    opacity:0%;
    right:-50%;
  }
  20%{
    opacity:0%;
  }
  40%{
    opacity:0%;
  }
  60%{
    opacity:20%;
  }
  80%{
    opacity:30%;
  }
  100%{
    opacity:100%;
    right:0%;
  }
}
.index_about_pic img{
  width:1000px;
}
.index_about_text_pc a p{
  font-size: 30px;
  color:#B8926A;
  text-decoration: none;
  position: absolute;
  top:65%;
  left: 50%;
  transform: translate(-50%,-50%);
  opacity: 0;
}
.index_about_text_pc a p.active{
  animation-name:index_about_text_a;
  animation-duration: 1.5s;
  /* animation-delay: .5s; */
  animation-fill-mode: forwards;
}
.index_about_text_pc a{
  text-decoration: none;
}
.index_about_text_pc a p::after{
  content: "";
  position: absolute;
 top: 110%;
  left:50%;
  transform: translate(-50%);
  border-bottom: 1px solid #B8926A;
  width:0px;
  transition: .5s;
}
.index_about_text_pc a:hover p::after{
  width:150px;
}
@keyframes index_about_text_a{
  0%{
    opacity:0%;
    top: 75%;
  }
  20%{
    opacity:20%;
  }
  40%{
    opacity:40%;
  }
  60%{
    opacity:60%;
  }
  80%{
    opacity:80%;
  }
  100%{
    opacity:100%;
    top: 65%;
  }
}
@media screen and (max-width:1200px) {
  .index_about_text p{
    font-size: 18px;
  }
  .index_about_text a p{
    top:65%;
  }
}
@media screen and (max-width:1000px) {
  .index_about_text p{
    font-size: 16px;
  }
  .index_about_text a p{
    font-size: 25px;
  }
}
@media screen and (max-width:900px) {
  .index_about_text p{
    font-size: 14px;
  }
}
@media screen and (max-width:767px) {
  .index_about_content{
    display: block;
  }
  .index_about_content_pc{
    display: none;
  }
  .index_about_pic{
    width:100%;
    height:200px;
    padding-top: 20px;
  }
  .index_about_pic img{
    width:400px;
    margin: 0 auto;
    display: block;
  }
  .index_about_text{
    display:none;
  }
  .index_about_text_ph{
    display: block;
    text-align: center;
    height: 50vh;
    position: relative; 
  }
  .index_about_text_ph p{
    font-size: 20px;
    color: #fff;
    line-height: 50px;
    position: relative;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
  }
  .index_about_text_ph p.active{
    animation-name:index_about_text_ph_p;
    animation-duration: 1.5s;
    animation-delay: .5s;
    animation-fill-mode: forwards;
  }
  @keyframes index_about_text_ph_p{
    0%{
      opacity:0%;
      top:30%;
    }
    20%{
      opacity:20%;
    }
    40%{
      opacity:40%;
    }
    60%{
      opacity:60%;
    }
    80%{
      opacity:80%;
    }
    100%{
      opacity:100%;
      top: 40%;
    }
  }
  .index_about_text_ph a p{
    font-size: 30px;
    color: #B8926A;
    opacity: 0;
  }
  .index_about_text_ph a{
    text-decoration: none;
    line-height: 50px;
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .index_about_text_ph a.active{
    animation-name:index_about_text_ph_a;
    animation-duration: 1.5s;
    /* animation-delay: .5s; */
    animation-fill-mode: forwards;
  }
  @keyframes index_about_text_ph_a{
    0%{
      opacity:0%;
      top: 65%;
    }
    20%{
      opacity:20%;
    }
    40%{
      opacity:40%;
    }
    60%{
      opacity:60%;
    }
    80%{
      opacity:80%;
    }
    100%{
      opacity:100%;
      top: 85%;
    }
  }
  .index_about_text_ph a p::after{
    content: "";
    position: absolute;
   top: 110%;
    left:50%;
    transform: translate(-50%);
    border-bottom: 1px solid #B8926A;
    width:0px;
    transition: .5s;
  }
  .index_about_text_ph a:hover p::after{
    width:150px;
  }
 
}
/*---------index_shop_line----------*/
.index_shop_line{
  background: #000;
  position: relative;
  margin-top:-30px;
}
.index_shop_line p{
  color: #fff;
  font-size: 30px;
  text-align: center;
  padding: 50px;
  opacity: 0;
}
.index_shop_line p.active{
  animation-name:index_about_text;
  animation-duration: 1.5s;
  animation-delay: .5s;
  animation-fill-mode: forwards;
}
.index_shop_line img{
position: absolute;
left: 50%;
top:100%;
transform: translate(-50%,-50%);
animation-name: shop_line_pic;
animation-iteration-count:infinite;
animation-duration:1.5s;
}
@keyframes shop_line_pic{
0%{
  top:90%;
}
50%{
  top:100%;
}
100%{
  top:90%;
}
}

@media screen and (max-width:767px) {
  .index_shop_line{
    display: none;
  }
}
/*---------index_shop----------*/
.index_shop{
  margin-top:100px;
}
.index_shop h3{
  font-size: 30px;
  text-align: center;
}
.index_shop_content{
  margin: 0 auto;
}
.index_shop_slider_out{
  width: 1110px;
  height: 280px;
  overflow: hidden;
  position: relative;
  /* background: #000; */
 margin: 0 auto;
}
.index_shop_slider{
  position:absolute;
  left:0px;
  width:1480px;
  transition: .5s;
  display: flex;
  /* justify-content: space-between; */
}
.index_shop_slider .index_shop_box{
  height:250px;
  width:350px;
  margin:0 20px 0 0;
  background: #ccc;
  border: 1px solid #000;
  opacity: 0;
  transition:.5s;
  position: relative;
  overflow: hidden;
}
.index_shop_slider .index_shop_box.active{
  animation-name:index_shop_box;
  animation-duration: 1s;
  /* animation-delay: .5s; */
  animation-fill-mode: forwards;
}
.index_shop_slider .index_shop_box img{
  width: 100%;
  height: 100%;
  transition: .8s;
}
.index_shop_slider .index_shop_box:hover img{
  filter: brightness(50%);
  }
.index_shop_slider .index_shop_box p{
position: absolute;
bottom:-40%;
transition: .8s;
line-height: 30px;
font-size: 16px;
margin-left:5px;
}
.index_shop_slider .index_shop_box p strong{
  color:#EEC84D;
  font-size: 20px;
  font-weight: 400; 
}
.index_shop_slider .index_shop_box:hover p{
  bottom:0%;
  
}
 @keyframes index_shop_box{
  0%{
    opacity:0%;
   transform: translateY(100px);
  }
  20%{
    opacity:20%;
  }
  40%{
    opacity:40%;
  }
  60%{
    opacity:60%;
  }
  80%{
    opacity:80%;
  }
  100%{
    opacity:100%;
    transform: translateY(0);
  }
} 

.index_shop_point{
  display: flex;
  justify-content:center;
}
.index_shop_point li{
  list-style: none;
  width: 10px;
  height: 10px;
  border: 1px solid #9CA4A7;
  border-radius: 50%;
  margin-right: 40px;
  transition: .5s;
}
.index_shop_point li:hover{
background: #9CA4A7;
}
.index_shop_button{
  width: 150px;
  background: #14191D;
  padding: 10px;
  text-align: center;
  margin: 0 auto;
  border-radius: 2px ;
  transition: .5s;
}
.index_shop_point_three{
  display: none;
}
.index_shop_point_ph{
  display: none;
}
.index_shop a{
  color: #fff;
  text-decoration: none;
}
.index_shop_button:hover{
  background: rgb(68, 74, 78);
}
@media screen and (max-width:1200px){
  .index_shop_slider_out{
    width: 740px;
  }
  .index_shop_point{
    display: none;
  }
  .index_shop_point_three{
    display: flex;
    justify-content:center;
  }
  .index_shop_point_three li{
    list-style: none;
    width: 10px;
    height: 10px;
    border: 1px solid #9CA4A7;
    border-radius: 50%;
    margin-right: 40px;
    transition: .5s;
  }
  .index_shop_point_three li:hover{
  background: #9CA4A7;
  }

}
@media screen and (max-width:767px) {
  .index_shop_slider_out{
    width: 350px;
  }
  .index_shop_slider{
    width:1460px;
  }
  .index_shop_button{
    width:80%;
  }
  .index_shop_point_three{
    display: none;
  }
 .index_shop_point_ph{
  display: flex;
  justify-content:center;
  /* padding: 0; */
}
.index_shop_point_ph li{
  list-style: none;
  width: 10px;
  height: 10px;
  border: 1px solid #9CA4A7;
  border-radius: 50%;
  margin-right: 40px;
  transition: .5s;
}
.index_shop_point_ph li:hover{
background: #9CA4A7;
}
}
/*---------news---------*/
.index_news{
  margin: 50px 20px 10px 20px;
}
.index_news_content{
  height: 380px;
  /* background: #000; */
  overflow: hidden;
  position: relative;
  display: flex;
  margin: 0px auto;
}
.index_news_slider{
  display: flex;
  position: absolute;
  left: 0px;
  width: 3840px;
  transition: 1.5s;
  margin: 0;
  padding: 0;
  list-style: none;
}
.index_news_slider img{
  width: 100%;
  height: 100%;
  opacity: 0;
  /* object-fit: cover; */
}
.index_news_slider img.active{
  animation-name:index_shop_box;
  animation-duration: 1s;
  /* animation-delay: .5s; */
  animation-fill-mode: forwards;
}
.index_news_point{
  display: flex;
  justify-content:center;
  /* padding: 0; */
}
.index_news_point li{
  list-style: none;
  width: 10px;
  height: 10px;
  border: 1px solid #9CA4A7;
  border-radius: 50%;
  margin-right: 40px;
  transition: .5s;

}
.index_news_point li:hover{
  background: #9CA4A7;
}
@media screen and (max-width:767px) {
  .index_news_content{
    height:150px;
  }
  .index_news_slider img{
    width: 51%;
  }
}
@media screen and (max-width:414px) {
  .index_news_slider img{
    width: 30%;
    margin: 0 auto;
  }
}
/*----------index_address-------*/
.index_address{
  background: #14191D;
}
.index_address_content{
  display: flex;
  justify-content: space-evenly;
  margin: 0px auto;
}
.index_address_pic{
  width: 50%;
  height: 410px;
  overflow: hidden;
  margin:20px;
}
.index_address_pic img{
  width: 600px;
  opacity: 0;
}
.index_address_pic img.active{
  animation-name:index_about_content_pc;
  animation-duration: 1.5s;
  /* animation-delay: .5s; */
  animation-fill-mode: forwards;
  position: relative;
}
.index_address_text{
  width: 50%;
  color: #fff;
  margin-bottom: 30px;
  opacity: 0;
}
.index_address_text.active{
  animation-name:index_about_text;
  animation-duration: 1s;
  animation-delay: 1.5s;
  animation-fill-mode: forwards;
}
.index_address_text h3{
  font-size:30px;
  margin-bottom: 0;
}
.index_address_text h4{
  font-size:20px;
  margin: 0;
  position: relative;
}
.index_address_text h4::after{
  content: "";
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  bottom:0;
  border-bottom: 1px solid #fff;
  width:0%;
  animation-name:index_about_after;
  animation-duration: 1s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}
/* .index_address_text h4.active::after{
  animation-name:index_about_after;
  animation-duration: 1s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
} */

@keyframes index_about_after{
  0%{
    width:0%;
  }
  100%{
    width:90%;
  }
} 
.index_address_text_p{
  line-height: 30px;
  position: relative;
}
.index_address_text_p::after{
  content: "";
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  bottom:0;
  border-bottom: 1px solid #fff;
  width:0%;
  animation-name:index_about_after;
  animation-duration: 1s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}
/* .index_address_text_p.active::after{
  animation-name:index_about_after;
  animation-duration: 1s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
} */
.index_address_text a{
  text-decoration: none;
  font-size: 30px;
  color:#B8926B;
  position: relative;
}
.index_address_text a p{
  position: relative;
}
.index_address_text a p::after{
  content: "";
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  bottom:0;
  border-bottom: 1px solid #B8926B;
  width:0;
 transition: .5s;
}
.index_address_text a:hover p::after{
  width:121px;
}
.index_google_map{
  margin: 0 auto;
  overflow: hidden;
  padding-bottom: 20px;
}
.index_address iframe{
  display: block;
  margin: 0 auto;
  width:1280px;
  height: 600px;
}

@media screen and (max-width:1100px){
  .index_address_pic img{
    width: 700px;
  }
  .index_address iframe{
    width:800px;
    height: 600px;
  }
}
@media screen and (max-width:767px){
  .index_address_content{
  flex-direction: column;
  }
  .index_address_pic{
    width: 95%;
    height: 300px;
    margin: 20px auto;
  }
  /* .index_address_pic img{
    width: 400px;
  } */
  .index_address_text{
    width: 95%;
    margin: 20px auto;
  }
  .index_address_text h4::after{
    width:100%;
  }
  .index_address_text p::after{
    width:100%;
  }
  .index_address iframe{
    width:600px;
    height: 300px;
  }
}
@media screen and (max-width:500px){
  .index_address_pic img{
    width:100%;
  }
  .index_address iframe{
    width:300px;
    height:200px;
  }
}