@import url('https://fonts.googleapis.com/css?family=Hind:400,500,600,700&display=swap');


/*-- 作者字體 --*/
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@800&display=swap');
/*-- COPYRIGHT --*/
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&display=swap');
/*-- 內文 --*/
@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');

h1,h2,h3,h4,h5,h6,a,p{ font-family: 'Jost', "Microsoft JhengHei",sans-serif; }
h1,h2,h3,h4,h5,h6{ font-weight: 400; color:#000;}

.w-60px{width: 60px!important;}

a:hover{text-decoration: none;}
/* 
 .top_bg{
  background-image: url('../img/bg2.jpg');
  background-repeat: no-repeat; 
  background-size: cover;
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
 } */

 .bg-w{     background-color: #fff;  z-index: 10;  position: relative;}


 #top_btn{
    display: block;
    position: relative;
    right: 15px;
    bottom: 10px;
    z-index: 10;
    margin-left: auto;
    width: 40px;
  }
  
  /* #top_btn.active{opacity:1; bottom: 155px; z-index: 90;} */
  #top_btn img{ width: 100%;}


 
 .all_btn{font-size: 24px; line-height: 1; color: rgb(0, 0, 0); text-align: right; display: inline-block; position: absolute;  bottom: 0px;  right: 5%; z-index: 13;}
 .all_btn:hover{color: #000;}
 .all_btn img{margin-bottom: 5px;}

 /*----------- 滑鼠特效 ----------*/
 #mycursor {
  cursor: none;
  width: 0px;
  height: 0px;
 	position: fixed;
 	top: 0;
 	left: 0;
  z-index: 10000;
  will-change:left,top;
  pointer-events: none;
}

#mycursor #inner{
  position: relative;
  width: 0px;
  height: 0px;
  left: 0px;
  top: 0px;
  transition: all 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(0, 0, 0, 0);
  font-size: 20px;
  font-weight: 600;
}

#mycursor #inner.active{
  width: 60px;
  height: 60px;
  left: -30px;
  top: -30px;
  border-radius: 50px;
  background-color: #000;
  color: #fff;
}

#mycursor #inner span img{width: 0px;}

#mycursor #inner.active span{line-height: 0;}
#mycursor #inner.active span img{width: 22px;}
#mycursor #inner.active span img.center{width: 15px;}






.top_wrap{
  position: fixed;
  top: 50%;
  left: 0;
  width: 100vw;
  z-index: 10;
  pointer-events: none;
}
.top_wrap .banner_left{
    background-image: url(../img/logo1.png);
    position: absolute;
    left: -10vw;
    display: inline-block;
    width: 29vw;
    height: 9vw;
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain;
}
.top_wrap .banner_right{
  background-image: url(../img/logo2.png);
    position: absolute;
    right: -1vw;
    display: inline-block;
    width: 80vw;
    height: 9vw;
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
}
.top_wrap .banner_left img{height: 9vw;}
.top_wrap .banner_right img{ height: 9vw;}

.top_wrap .banner_art_left{position: relative; font-size: 10vw;    left: -30px;}

.wrapper{padding: 0; padding-top: 4.5vw;}
.wrapper2{padding-top: 2vw;}
.hv-center{ display: flex; justify-content: center; align-items: center;}

.w79{width: 79%;}
.w158px{width: 158px;}
.w174px{width: 174px;}
.w100{width:100%;}
.m-top{margin-top: 3% !important;}
.container{max-width: 1000px;}
.title{
    max-width: 1000px;
    margin: auto;
    text-align: left;
    padding-bottom: 30px;
}

.title h6{font-size: 32px;}
/*news*/
.news{position: relative; margin-top: 80px;}
.news h6{margin:30px 0; font-size: 18px;}

.news_slider_a{width: 1024px;  display: block;  margin: auto;}
.art_slider_a{width: 768px;  display: block;  margin: auto; }
.pro_slider_a{width: 500px;  display: block;  margin: auto; }

.news .more{
    font-size: 20px;
    display: block;
    text-align: right;
    color: #fff;
    font-weight: 400;
    padding-right: 90px;
    margin-top: -6vw;
    padding-bottom: 4vw;
    position: absolute;
    bottom: 0;
    right: 0;
    text-shadow: 1px 1px #000;
}

.news .all_link{ display: block; width: 100%; height: 100%;}

.news .more:hover{
    color: #fff;
    text-decoration: none;
}

.news .swiper-container {
      width: 100%;
      text-align: center;
}

.news .swiper-slide {
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
    }


/*products*/
.products span a {
    font-size: 20px;
    display: inline-block;
    float: right;
    color: #bfc0c0;
    font-weight: 400;
    padding-right: 40px;
    margin-bottom: 30px;
}
.products{padding:50px 0; background-color: #fff; position: relative;}
.products .inner{display: inline-block;width: 100%;padding: 0 5%;}
.products .inner .img_card{position: relative;display: inline-block; width:29%;}
.products .inner .img_card img{width:100%;}


.products .inner .img_card .img_info_div{opacity: 0; transform: scale(0.8); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.85); display: flex;  justify-content: center;  align-items: center;
                                         transition: all 0.5s;}
.products .inner .img_card .img_info_div div{padding-bottom: 20px;}
.products .inner .img_card .img_info_div span{position: absolute; bottom: 10px; right: 20px; font-size: 20px; color: #000; text-align: right;}
.products .inner .img_card .img_info_div span img{width: 60px; margin-bottom: -20px;}
.products .inner .img_card .img_info_div h2{font-size: 28px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 300px;}
.products .inner .img_card .img_info_div p{margin: 0; font-size: 24px; color: #000; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 300px;}

.products .inner .img_card:hover .img_info_div{opacity: 1; transform: scale(1);}

.products h5{color:#000; font-family:"Microsoft JhengHei" ; font-weight: 600; margin:0;}
.products h5 a{color:#000; font-family:"Microsoft JhengHei "; font-weight: 600; text-decoration: none; font-size: 18px;}
.products p{color:#bfc0c0; font-size: 18px;}
.products .name{padding-right: 40px;}
/*.products img{width:100%;}*/


/*back*/
.back p{text-align: center;font-size: 28px;margin: 50px 0;}
.back button{
    color: #fff;
    text-align: center;
    font-size: 20px;
    margin: 50px auto;
    border: 1px solid transparent;
    background: none;
    display: block;
    cursor: pointer;
}

/*artist*/
.artist{padding:50px 0; background-color: #fff; }
.artist .inner{ margin: auto;text-align: center; position: relative;}
.artist h5{color: #000; font-weight: 400; font-size: 20px;}
.artist p{
	font-size: 18px;
  font-weight: 600;
  font-family:Microsoft JhengHei ;
  color: #bfc0c0;

}

.artist span a {
    font-size: 20px;
    display: block;
    text-align: right;
    color: #bfc0c0;
    font-weight: 400;
    padding-right: 40px;
}





/*about*/
.about{ padding: 50px 0; z-index: 11; position: relative; background-color: #fff;}
.about .inner{max-width: 1000px; margin: auto;}
.about .inner img{width:100%;}
.about p{margin: 10px 0; letter-spacing: 1px; font-weight: 200; color: #000; font-family: 'Hind', sans-serif; width: 100%;font-size: 18px;}
.s3 + .swiper-pagination{position: relative;}
.s3 + .swiper-pagination .swiper-pagination-bullet {margin: 0 5px;}

/*project*/
.project{ padding: 50px 0; z-index: 11; position: relative; background-color: #fff;}
.project .inner{max-width: 1000px; margin: auto;}
.project p{letter-spacing: 1px; font-weight: 200; color: #000; font-family: 'Hind', sans-serif;}
.s4 + .swiper-pagination{position: relative;}
.s4 + .swiper-pagination .swiper-pagination-bullet {margin: 0 5px;}


/*contact*/
.contact{padding: 50px 0; z-index: 11; position: relative; background-color: #fff;}
.contact .inner{max-width: 1000px; margin: auto;}
.contact h6{margin: 30px 0 10px 0;}
.contact p{font-family:'Hind', sans-serif; font-weight: 500; padding-left: 12px; letter-spacing: 0.5px; color: #000;}
.contact .info{background-color: #fff;}
.s5 + .swiper-pagination{position: relative;}
.s5 + .swiper-pagination .swiper-pagination-bullet {margin: 0 5px; width:8px;}

/*footer*/
.footer{padding: 50px 0;}
.footer a{font-weight: 400;}
.footer .inner{max-width: 1024px; margin: auto;}
.footer .ig_name{
    display: block;
    text-align: center;
    font-weight: 500;
    color: #000 !important;
    font-size: 20px;
}
.footer span{font-size: 14px; color: #000; font-weight: 500;}
.footer .ig_lg{
    width: 9%;
}
.footer .ig_sm{
    width: 16%;
    margin-right: 5px;
}

.footer .ig_1{
    width:50%;
    border-radius: 50%;
    margin: auto;
    display: block;
}

.fb .fb_lg{width: 9%;}

.yt .yt_lg{width: 9%;}
.footer .search{
    border: 1px solid #000;
        margin: 0 5px;
        font-weight: 500;
        color: #000 !important;
        padding: 0 10px;
}

.footer .search i{color: #000;     margin: 0 5px;}
.no_t{position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;}
.copyright{background-color: #fbfbfc; padding: 10px 0 10px 80px;  z-index: 10;   position: relative;}
.copyright ul{list-style: none; padding: 0;}
.copyright ul li{display: inline-block;    margin-right: 5px;}
.copyright ul li img{ width: 60px;}
.copyright h4{font-family: 'Nanum Myeongjo', serif;}
.copyright h6{font-family: "Microsoft JhengHei"; margin: 0; color: #000;}
.copyright_info h6{background-color: #fff; padding: 20px 0; margin: 0; color: #000;}

.swiper-slide iframe{
    height: 65vw;
    margin: -8vw 0;}
.swiper-h{height: 275px;}
.swiper-button-next,.swiper-button-prev{top:auto; bottom: -72px;}
.swiper-button-prev{
  width: 60px;
  height: 60px;
  background: #000;
  border-radius: 50%;
  background-image: url(../img/right.svg);
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
  right:30%;
  left: auto;
}
.swiper-button-next{
  width: 60px;
  height: 60px;
  background: #000;
  border-radius: 50%;
   background-image: url(../img/left.svg);
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
  right: 20%;
  left: auto;
}
.prev_arrow{top:64px;}
.next_arrow{top:64px;}
.news .swiper-pagination-bullets{bottom: 60px !important; right: 0;  width: 50%;  margin: auto;}
.swiper-pagination-bullet-active{background: #000;}


.hamburger{
  position: relative;
  z-index: 20;
  padding: 30px 40px;
  outline: none !important;
}


 .hamburger--slider.is-active .hamburger-inner { transform: translate3d(0, 10px, 0) rotate(90deg); }
 .hamburger--slider.is-active .hamburger-inner::before { transform: rotate(0deg) translate3d(0px, 0px, 0); opacity: 1; }
 .hamburger--slider.is-active .hamburger-inner::after { transform: translate3d(0, -30px, 0) rotate(0deg); }

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after{
  background-color: #000;
  width: 30px;
  height: 2px;
  transition: all 0.25s; 
}



.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after{
  background-color: #000;
  transition: all 0.25s; 
}

.menu{
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 100;
   transition: all 0.5s; 
   border-bottom: 1px solid #ccc;
   background-color: #fff !important;
  }

.top_color{background-color: none;}

.list_box{position: absolute;  top: 91px;  left: 0; width: 100%;  background-color: #fff;  display: flex;  justify-content: center;  align-items: center; transition: all 0.5s;
          z-index: -1; height: 0vh; overflow: hidden; visibility: hidden;}

.list_box.active{
   visibility:visible;
   z-index: 10;
   height: 92vh;
  }

  .list{
    display: inline-block;
    width: 100%;
    list-style: none;
    padding: 0;
    text-align: center;
  }

  .list li{
    padding: 20px;
  }

  .list li a{
  color:#000;
  font-size: 30px;
  }

  

  /* .menu.ch_menu{
    background-color: #bfc0c0eb;
  }

  .menu.ch_menu .hamburger-inner,.menu.ch_menu .hamburger-inner::before,.menu.ch_menu .hamburger-inner::after{
    background-color: #000;
  }

  .menu.ch_menu .hamburger-inner,.menu.ch_menu .hamburger-inner::after{
    background-color: #000;
    opacity: 1;
  }


  .menu.ch_menu .logo img{ 
    filter: invert(1);
    opacity: 1;
  } */


  .list_div{
    display: inline-block;
    position: absolute;
    right: 0;
  }
  
  .menu .logo{ 
    display: inline-block;
    position: relative;
    z-index: 20;
    padding: 29px;
  }

  .menu .logo a{
   display: block;
  }

  .menu .logo img{
     width:250px;
  } 

  .view_on_yt{
   position: absolute;
         right: 5vw;
         bottom: 5vw;
         background-color: red;
         padding: 5px 15px;
         color: #fff;
  }

  
  
 

 

 
  .nav-m{
    margin-left: -17px;
    font-size: 18px;
    margin-top: -6vw;
    padding-bottom: 6vw;
   }

 
/*----------------------------------news------------------------------------*/

/*news_pic*/
.news_pic{margin-top:160px;}

/*news_info*/
.news_info{background-color: #fff; margin:50px 0;}
.news_info h1{ color:#000;font-size: 36px; margin: 0;}
.news_info h2{color:#000; font-weight: 600; font-family:"Microsoft JhengHei" ; font-size: 22px; margin: 10px 0px;}
.news_info .date{ color:#000; font-size: 24px;}
.news_info p{
    font-size: 16px;
    line-height: 30px;
    letter-spacing:2px;
    font-family:"Microsoft JhengHei";
    font-weight: 400;
    color:  #000;
    margin-top: 20px;
}

/*more*/
/*.more{padding: 50px 0; background-color: #fff;margin-top:10%;}
.more .inner{max-width: 1024px; margin: auto;}
.more h6{margin: 30px 0; font-size: 18px; color: #fff; margin-top: -6vw; padding-bottom: 6vw;}*/

.news_more h4{font-weight: 400; font-size: 16px; color:#000;}
.news_more h5{color: #000;font-weight: 600; font-size: 14px; font-family:"Microsoft JhengHei";}
.news_more h5 a{color: #000;font-weight: 600; font-size: 14px; font-family:"Microsoft JhengHei "; text-decoration: none;}
.news_more p{font-size: 12px; font-family:"Microsoft JhengHei" ; color: #727171;}
.news_more span a {
    font-size: 20px;
    display: block;
    text-align: right;
    color: #000;
    font-weight: 400;
    margin: 10px 0;
}

.news_more .news_list img{width: 100%;}
.news_more .news_list .row{width: 875px;}


.web{word-wrap: break-word;}

/*----------------------------------news_list------------------------------------*/
.news_list{margin-bottom: 100px; position: relative;}
.news_list .all_btn{bottom: 6px; right: 0; color: #000;}
.news_list h4{font-weight: 400; font-size: 16px; color:#000;     overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.news_list h6{color: #000;font-weight: 600; font-size: 14px; font-family:"Microsoft JhengHei" ; line-height: 18px;}
.news_list h6 a{color: #000;font-weight: 600; font-size: 14px; font-family:"Microsoft JhengHei" ; text-decoration: none; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.news_list p{font-size: 12px; font-family:"Microsoft JhengHei" ; color: #9fa0a0; line-height: 20px;}
/*----------------------------------all item------------------------------------*/
/*item*/
.item_info{background-color: #fff; padding:100px 0;}
.item_info .inner{max-width: 1024px; margin: auto;}
.item_info h5{margin:0;}
.item_info h5 a{color:#000; font-family:"Microsoft JhengHei"; font-weight: 600; font-size: 18px;     word-break: break-all;}
.item_info p{color:#bfc0c0; font-size: 18px;}
.item_info .lg_pic{width:79%;}





/*----------------------------------artist------------------------------------*/

.artist_info{padding: 50px 0; background-color: #fff;}
.artist_info .inner{max-width: 1024px; margin: auto;}
.artist_info .title{font-family:"Microsoft JhengHei"; margin: 0;}
.artist_info hr{width:97%;}
.artist_info h3{color: #000;font-weight: 400;}
.artist_info .artist_year{list-style: none;margin:auto;}
.artist_info .artist_year li{
    font-family: 'Hind', sans-serif; 
    font-weight: 500;
    line-height: 28px; 
    font-size: 16px;
    color: #000;
}
.artist_info .artist_year h6{
    font-weight: 500;
    line-height: 28px; 
    font-size: 16px;
    color: #000;
}
.artist_info p{font-size:16px; font-weight: 400; color: #000; margin-left: 0 !important; padding: 0 1.5rem;}
.artist_info img{width:65%;}

.artist_info a{word-break: break-all;}

.item_more{padding: 50px 0; background-color: #fff;}
.item_more .inner{max-width: 1024px; margin: auto;}
.item_more h6{font-size: 24px; color: #fff; margin-top: -4vw; padding-bottom: 4vw;}
.item_more p{color: #bfc0c0; font-size: 18px;}
.item_more h5{margin: 0; color: #000;}
.item_more h5 a{color: #000; text-decoration: none; font-family:"Microsoft JhengHei"; font-weight: 600; font-size: 18px;}
.item_more span a{
    font-size: 20px;
    display: block;
    text-align: right;
    color: #000;
    font-weight: 400;
    margin: 10px 0;
    padding-right: 40px;
    }


/*----------------------------------allartist------------------------------------*/
.all_artist h1{font-size: 9vw; font-weight: 800; margin-left: -1.2vw; font-family:  'Nunito Sans', sans-serif;}
.all_artist .art_name:nth-child(odd) h1{color: #231815;}
.all_artist .art_name:nth-child(even) h1{color: #898989;}
.all_artist .art_name{position: relative; width: 100%;}
.all_artist .art_img{display: none; position: fixed; top: 0; left: 0; pointer-events: none;}
.all_artist .art_img img{width: 250px;}
.all_artist .art_img.active{display: block;}
.all_artist .art_img .close_btn,
.all_artist .art_img .view_btn{display: none;}


/*product_pic*/
.product_pic{border-top: 1px solid;border-bottom: 1px solid; padding: 160px 0 60px 0;}
.product_pic .inner{display:block;}
.product_pic h1{margin: 20px auto;width: 24%;}
.product_pic p{width: 24%;margin: auto;line-height: 30px;font-size: 16px;}

/*----------------------------------product------------------------------------*/

.product_info{margin:100px 0;}
.product_info .inner{    padding-top: 60px;}
.product_info .inner{max-width: 1000px; margin: auto;}
.product_info p{font-size: 16px; font-family:"Microsoft JhengHei" ; font-weight: 400;}
.product_txt{margin-top: 40px;}


/*info_footer*/
.footer_info{list-style: none; background-color: #fff;margin-bottom:0; text-align: right; margin-top: 3%;} 
.footer_info li{display: inline-block;}
.footer_info img {width: 60%;}
/*inner_footer*/
.inner_footer{background-color: #fff;}
 


.product_info h6{color: #000; font-size: 20px; font-family:"Microsoft JhengHei" ;font-weight: 600;}
.product_info hr{width:100%;}
.product_info .swiper-slide img{width:100%;}
.product_info .swiper-pagination{width:100%; text-align: left;}
.product_info .swiper-pagination-bullet img{width:100%;}
.product_info .swiper-pagination-bullet{
    width: 33%;
    height: auto;
    background: none;
}

.product_info .swiper-pagination-bullets{position: relative;}
.product_info .swiper-pagination-clickable .swiper-pagination-bullet {outline: none;}



@media(min-width: 1280px){

.products .inner .img_card:nth-child(6n+1){margin-left: 71%;}
.products .inner .img_card:nth-child(6n+2){margin-right: 68%;margin-top: -15%;margin-bottom: 5%;}
.products .inner .img_card:nth-child(6n+3){margin-left: 35%; margin-right: 35%; margin-bottom: 5%;  }
.products .inner .img_card:nth-child(6n+4){margin-right: 41%;}
.products .inner .img_card:nth-child(6n+5){margin-top: 5%;  }
.products .inner .img_card:nth-child(6n+6){margin: -8% 35% 8%; }


}

 
 @media(max-width: 768px){
   .news_more .news_list .row{ width: auto;}
   .news_list .all_btn{ right: 20px; bottom: -88px;}

   .news_slider_a{ width: 100%;}
   .art_slider_a{width: 100%;}
   .pro_slider_a{width: 100%;}
 }

 @media(max-width: 420px){

  .w-60px{width:40px !important;}

  .w158px{ width: 100%;}

  .title{font-size: 20px; padding:0;}

  .title h6{ font-size: 24px;}

   .top_bg{
   background-image: url('../img/ph_bg.jpg');
   background-position: center; 
   }

   .copyright ul li img{width: 20px;}

   .all_btn{font-size: 18px;}


   #top_btn{ position: relative;  bottom: 0;  right: 0;  opacity: 1;  width: 100%;  background-color: #fff;  z-index: 10;  text-align: right;  padding: 10px;}
   #top_btn img {width: 25px;}

   .top_wrap{transform: rotateZ(90deg); top: 14%; left: 10%; z-index: 1;}
   .top_wrap .banner_left{display: none;}
   .top_wrap .banner_right{     width: 170vw; height: 20vw; background-position-x: -90px; right: -110%;}
  
   .wrapper {padding-top: 65px;}
   .wrapper2 { padding-top: 6vh;}
    .menu{
     padding: 0;
   }
   .menu .list{
      margin: 0;
      right: auto;
      width: 100%;
    padding-left: 0;
    padding: 20px 0;
   }

   .menu .list li{ 
    display: block;
   }

   .menu .list li a{
     font-size: 15px;
   }

   .menu .list.active{
   right: auto;
   padding-top: 15vh;
   height: 70vh;
  }

  .menu .logo{ padding: 14px 20px;}
  .menu .logo a{width: 35px; overflow: hidden;}
  .menu .logo img{ 
    width: 235px;
  }

  .hamburger-box{width: 30px;}
  
  .hamburger{
   position: relative;
   float: right;
   z-index: 10;
   padding: 17px 10px 0px 10px;
            outline: none !important;
  }

  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after{
   width: 20px;
   height: 1px;
   
  }

  .hamburger-inner, .hamburger-inner::after{
    /* opacity: 1; */
  }

  .products .inner .img_card .img_info_div div{width: 100%;}
  .products .inner .img_card .img_info_div h2{ font-size: 16px; width: 100%; margin: 0; padding-top: 15px;}
  .products .inner .img_card .img_info_div p{ font-size: 12px;  width: 100%;}
  .products .inner .img_card .img_info_div span{ font-size: 16px; right: 5px; bottom: 0;}
  .products .inner .img_card .img_info_div span img{     width: 35px;  margin-bottom: -20px;}

  .products .inner .img_card:hover .img_info_div{display: flex;}

  .products.news_div .inner .img_card .img_info_div h2{font-size: 16px; width: 100%; margin: 0; padding-top: 15px;}
  .products.news_div .inner .img_card .img_info_div p{ font-size: 12px;  width: 100%;}
  .products.news_div .inner .img_card .img_info_div span{ font-size: 16px; right: 5px; bottom: 0;}
  .products.news_div .inner .img_card .img_info_div span img{     width: 35px;  margin-bottom: -20px;}

  .products.news_div .inner .img_card:hover .img_info_div{display: block;}

  .list_box{top:59px; display: block;}


  .news{margin:0; padding: 0 20px;  height: 89vh; display: flex; align-items: center;}
  .news h6 {
    margin: 16px 0;
    padding-left: 50px;
    font-size: 20px;
    }

  .news_info p{font-size: 14px; word-wrap: break-word;}
  

  /*.news .swiper-slide{padding: 0 30px;}*/
  .news .swiper-container {width: 100%;}

  .news .swiper-slide {
      background-position: center;
      background-size: 120%;
      background-repeat: no-repeat;
    }
  .news .swiper-slide img{width:100%;}
  .news .swiper-pagination-bullets{bottom: 15px !important;}
  .news span a{margin-top: -9vw; padding-right: 15px;}
  .products{padding:0; padding-bottom: 80px;}
  .products img{width: 100%;}
  .products span a{margin:0;padding:15px 15px 0 0;}
  .products .inner .img_card{position: relative;display: inline-block; vertical-align: top; width:47%;margin-left: 1%; margin-right:1%; margin-bottom:1%; z-index: 10;}
  .products .inner .img_card:nth-child(2){margin-top: 30%;}
  .products .inner .img_card:nth-child(2n+3){margin-top: -15%;}
  .products .inner .img_card:nth-child(2n+4){margin-top: 15%;}
  .products .inner .img_card:nth-child(2n+5){margin-top: -15%;}
  .products .inner .img_card:nth-child(2n+6){margin-top: 15%;}
  .products .name{padding-right: 0;}
  .artist{padding: 0px 20px; }
  .artist .inner{ padding-bottom: 0px;  padding: 18vh 0; text-align: left;}
  .artist .inner .all_btn{     bottom: 7vh;  right: 0;}
  .artist img{width:100%;}
  .artist span a{margin:0;padding:15px 15px 0 0;}
  .swiper-h {height: auto;}
  .more .swiper-h {height: 520px;}
  .prev_arrow {top: 160px;}
  .next_arrow {top: 160px;}
  .nav-m {
    margin-left: -17px;
    justify-content: center;
    font-size: 20px;
    margin-top: -30vw;
    padding-bottom: 15vw;
   }

  .about {padding: 0px 20px;}

  .about p{  width: 100%; font-size: 14px;}
  .about .inner{padding:18vh 0;}
  .about .inner img {
    width: 100%;
    display: block;
    margin: auto;
  }

  .about .info{width:100%;}
  .contact .info{width:100%;}
  .contact {padding: 0 30px 20px 30px;}
  .contact span{width:100%;}
  .contact span a{
   font-size: 20px;
    display: block;
    text-align: right;
    font-weight: 400;
    width: 100%;
    padding-right: 10px;
    color: #000;
  }
  
  .project{ padding: 0px 20px 0px 20px;}
  .project img{ width: 100% !important; height: auto !important;}
  .project .inner{ padding: 18vh 0;}

  .project p{font-size: 14px; margin: 10px 0;}
  .footer_info img{width:60%;}


  .back button{margin:50px auto;}
  .copyright{padding: 10px 0; background-color: #fff; border-top: 1px solid #dedede;}
  .copyright h4{display: none;}
  .copyright h6{font-size: 12px; text-align: center;}
  .copyright ul { text-align: right;padding-right: 10px; padding-bottom: 10px; border-bottom: 1px solid #dedede;}



    /*----------------------------------news------------------------------------*/
    .news_pic{margin-top: 100px;}
    .news_pic img{width:100%;}
    .news_info{padding: 0 5%;}
    .news_info img{width: 100%;}
    .news_info h2{margin-top: 10px; margin-bottom: 20px;font-size: 18px; }
    .news_info h6{margin: 16px 0;padding-left: 70px;font-size: 20px;}
    .news_info .web{word-break: break-word;}

    .news_more{margin-top: 8%;}
    .news .more{  padding-bottom: 8vw;  padding-right: 10px;}
    .more h6{
        margin: 16px 0;
        padding-left: 70px;
        font-size: 20px;
        margin-top: -25vw;
        padding-bottom: 25vw;
  
    }
    .more span a {
    margin-top: 20px;
    padding-right: 10px;
    }
    .news_list{padding: 0 5%;}
    .news_list .all_btn {bottom: -88px;right: 20px;}
    .news_list img{width: 100%;}
    /*----------------------------------artist------------------------------------*/
    .artist_info h3{color: #000;margin-top: 16px;}
    .artist_info hr{width:86%;}
    .artist_info img{width:86%;}

    .all_artist .art_img .close_btn, .all_artist .art_img .view_btn{ display: block;}

    .item_more span a {
    font-size: 20px;
    display: block;
    text-align: right;
    font-weight: 400;
    width: 100%;
    padding-right: 20px;
    color: #000;
    }

    .item_more img{width:100%;}
    /*----------------------------------artist------------------------------------*/
    .item_info{padding: 50px 0;}
    .item_info .lg_pic{width:100%;}
    .item_info img{width: 100%;}
    .item_more h5 a{font-size: 14px;}
    /*----------------------------------product------------------------------------*/
    .product_info{margin: 40px 0;}
    .product_info h1{font-size: 30px; margin: 15px 0;}
    .product_info img{width:100%;}
    .product_info hr{width: 80%;}
    .product_info p{font-size: 14px; 
                   /*line-height: 30px;*/
                  }
    .product_pic{padding: 100px 0 60px 0;}
    .product_pic h1{width:100%; font-size: 30px;}
    .product_pic p{width:100%; font-size: 14px;}
    .product_pic img{width:100%;}

    .all_artist{padding: 50px 0;}
    .all_artist h1{ margin-bottom: 15px;}
    .all_artist .art_img{ position: absolute;  left: 30px; z-index: 10; pointer-events:auto;}
    .all_artist .art_img .close_btn{    color: #000; position: absolute; right: 0; top: 0; font-size: 20px; padding: 5px;}
    .all_artist .art_img .view_btn{  color: #000;  position: absolute; bottom: 0; right: 0;  padding: 5px 10px;  text-align: right;}
    .all_artist .art_img .view_btn img{ width: 50px; margin-bottom: -10px;}

    .art_name:nth-last-child(1) .art_img{ top: auto; bottom: 0px;}
    .art_name:nth-last-child(2) .art_img{ top: auto; bottom: 0px;}
    .art_name:nth-last-child(3) .art_img{ top: auto; bottom: 0px;}
    .art_name:nth-last-child(4) .art_img{ top: auto; bottom: 0px;}

    .footer_info{margin-top: 8%;}

    



}

 /*iphone x*/
@media(max-width: 420px) AND (max-height: 850px) AND (min-height: 800px){
  .news .swiper-pagination-bullets {bottom: 40px !important;}
}