@font-face {font-family: NotoSans;src: url("/css/Xyyv.ttf");}
@font-face{font-family: Italiana;src: url("/css/ITALIANA-REGULAR.TTF");}
*,:before,:after {-o-box-sizing:content-box;-ms-box-sizing:content-box;box-sizing:border-box;}
html,body {height:100%;font-family: Georgia, NotoSans,"Microsoft Yahei",Arial,Helvetica,sans-serif;color:#333;background:rgba(238,238,238,1);}
body,ul,li,dl,dd {margin:0; padding:0;}
img {border:0;max-width:100%;height:auto;}
a {color:#666;text-decoration: none;-webkit-tap-highlight-color: transparent;}
h1,h2,h3,h4,h5,h6 {font-weight:normal;}
input,textarea {-webkit-appearance: none;}
li{ list-style-type:none}
.clear { clear: both;  }
.red{ color:red;}
.wrap {width:1600px;margin:0 auto; min-height:890px; }
.wrap1020 {width:1020px;margin:0 auto;}
.mt140{ padding-top:6rem}
.mt1{margin-top:1rem!important}
.mt2 {  margin-top: 2rem!important; margin-bottom:0}
.mobile{ display:none}
.tishi{ width:10px; height:10px;border-radius:100%; background-color:red; position:absolute; top:45px;right:33px;display: none;}
.icon-personal{ background: url(/image/personal.png) no-repeat; width:22px; height:22px; display:block; margin:48px auto;}
.no .icon-personal{ background: url(/image/personal2.png) no-repeat;} 
.header {height:4.7rem;background:rgba(238,238,238,1);z-index:997; position:fixed; top:0; left:0; width:100%;}
.header .logo {display:block;width:10rem;margin:36px auto 0 auto;}
.header .grid {position:absolute;top:0;right:6.5rem; width:15%; line-height:6rem;}
.header .grid li{float:left;cursor: pointer;width:25%; font-size:1em; font-weight:100;	list-style-type: none; text-align:center; position: relative;}
/* .header .grid li a{color:#666;} */
.header .grid li a.yuyan{font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 20px; border-radius:100%; width:28px; height:28px; line-height:24px; margin:46px auto; font-size: 14px; display: block;}
.no { background:none} 
.no a, .no .grid li a {  color: #fff;}
.no { background:none}
.no .icon-personal{ background: url(/image/personal2.png) no-repeat;}
nav {position:absolute;width:38%;left:2rem;text-align:center; line-height:3em; margin-top:1rem;letter-spacing:2px}
nav>a {display: inline-block;color:#666;font-size:0.7rem; margin:0 1rem; font-family:Italiana,Verdana, Arial, Helvetica, sans-serif}
nav>a:hover{color:#dbb16e;  -webkit-transition: ease-in-out .5s;   transition: ease-in-out .5s;}
nav>a.active {color:#dbb16e; /*border-bottom:2px solid #dbb16e*/}
nav>a>div:nth-child(1) {letter-spacing:0.15rem;}
nav>a>div:nth-child(2) {font-size:1rem;margin-top:0.5rem;margin-left: -0.15rem;}
main {position: relative;padding:0;overflow: visible;}
footer { padding-bottom:18px;min-height:1rem;clear:both; line-height:30px; text-align:center; font-size:0.25em; font-family:Verdana, Arial, Helvetica, sans-serif;color:#999 ;margin-top: 20px;}
footer a{color:#999; margin:0 0.25rem}
footer a:hover{color:#dbb16e;}
.index-foot{ position:fixed; width:100%; height:2rem; left:0; bottom:0; color:#666;}
.index-foot a{ color:#666;}
.tooltip {border-radius:0.25rem;}
.tooltip-body {font-size:0.8rem;}.
.mobile-read h5 {border-top:2px solid #000;margin-top:3rem;}
.mobile-read #qrcode {margin-top: .5rem;}
.pagination li {float: left;margin:0 0.5rem;}
.pagination a {display:block;color:#fff;background:#CECECE;height:2rem;width:2rem;text-align:center;border-radius:2rem;font-size:12px;line-height:2rem;}
.pagination li.active a {background:#096;}
.pagination .disabled {display: none;}
.pagination .pre,.pagination .next {font-family: 'Xyyv';color:#096;font-size:2rem;background:#fff;}
.pagination .pre:before {content: "\e600";}
.pagination .next:before {content: "\e601";}
#backtop {display:none;position:fixed;bottom:8rem;right:1rem;color:#096;z-index:10;}
#backtop i {font-size:4rem;}
#backtop div {font-size:0.8rem;text-align:center;}
.animated {-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
.animated.infinite {-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;}
.animated.hinge {-webkit-animation-duration:2s;animation-duration:2s;}
@-webkit-keyframes bounceInLeft {0% {opacity:0;-webkit-transform: translateX(-2000px);transform: translateX(-2000px);}
60% {opacity:1;-webkit-transform: translateX(30px);transform: translateX(30px);}80% {-webkit-transform: translateX(-10px);transform: translateX(-10px);}
100% {-webkit-transform: translateX(0);transform: translateX(0);}}
@keyframes bounceInLeft {0% {opacity:0;-webkit-transform: translateX(-2000px);-ms-transform: translateX(-2000px);transform: translateX(-2000px);}60% {opacity:1;-webkit-transform: translateX(30px);-ms-transform: translateX(30px);transform: translateX(30px);}80% {-webkit-transform: translateX(-10px);-ms-transform: translateX(-10px);transform: translateX(-10px);}100% {-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}}
.bounceInLeft {-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft;}
.follow {margin-top:15rem;}.follow li {float: left;width:25%;margin:0 4%;}
.follow a {text-align:center;display:block;height:8rem;width:8rem;line-height:8rem;border:1px solid #ccc;border-radius:4rem;font-size:2rem;margin:0 auto;color:#999;}
.support {padding:0 5rem;}.support>h4 {margin:0 0 2rem;}
.support li {background:#F0F0F0;padding:0 1rem;border-radius:0.3rem;margin-bottom:1rem;}
.support .accordion-body {font-size:0.9rem;line-height:1.8rem;color:#888;}
.unsubscribe {text-align:center;margin-top:5rem;}
.unsubscribe button {display:block;background:#096;color:#fff;height:3rem;line-height:3rem;width:8rem;margin:3rem auto;border-radius:0.3rem;border: none;}
.shuliang,.icon-prev,.icon-next,.in_banner h2, .in_banner p{ display:none}
.nobuy {border: 2px solid #aba9a7;   float: left;line-height: 2.5rem;font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.8em;   width: 15rem;   margin: 1rem 1rem 0 0;   text-align: center;cursor: no-drop;   color: #aba9a7;}
 .buynow a{color:#dbb16e}
@media screen and (max-width: 480px)  { /*当屏幕尺寸小于480px时，应用下面的CSS样式*/
    .wrap{ min-height:600px}
    .mt140{ padding-top:60px;}
    .header{ height:60px;}
    .header .logo{  width:8rem; margin-top:22px; float:left; margin-left:10px; position:absolute; z-index:9999}
    .in_banner h2, .in_banner p{ bottom: 3rem;right: 2rem;}
    .in_banner p{ bottom: 2rem;}
    .icon-prev, .icon-next, .shuliang{ bottom: 1rem;}
    .shuliang{  right: 6rem;}
    .icon-next{ right: 2rem;}
    .icon-prev{right: 4rem;}
    .mobile{ display: block}
    .mobile .icon-menu{ position:absolute; top:20px; right:20px; z-index:9999;font-size:20px;}
    .mobile .icon-buy{ position:absolute; top:20px; z-index:999; right:20px;}
    .mobile_nav{ position:fixed; width:100%; height:100%; left:0; top:0;background:rgba(250,250,250,.6); padding:80px 0 0 0; display:none}
    .mobile_nav a,.no .mobile_nav a{ font-size:0.8em; line-height:3em; height:3em; display:block; padding-left:10px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#666}
    .mobile_nav .active{ border-right:2px solid #dbb16e}
    .grid,nav,.banner h2,.magazine_cross,.cart-thead,.opcart, .order-process,.p-type,.p-props,.p-sum{ display:none}
    .banner{ height:auto}
    .shop-details h2,.share{ text-align: center;}
    .wrap,.details_img,.shop-details,.details_img,.large_img, small_img,.shop-details,.details-goods li .box,.wrap1020,.exhibition-information li{ width:100%;}
    nav{ left:0}
    .items li,.artist li{ width:49%}
    .artist-works li{ width:9rem; height:9rem}
    .small_img li{ background:none; width:17%; height:3rem; margin:10px 10px 0 0}
    .shop-details h2{ line-height:2em;}
    .artist-works li{ width:46%; height:9.6rem}
    .buynow { width:95%; text-align:center; position:fixed;bottom:10px; background:#dbb16e; color:#fff; margin:0; padding:5px;font-size: 18px;  z-index:999;}
   
    .items .w50{ height:auto}
    .Available li{ width:44%; height:9rem}
    .no .mobile .icon-buy,.no .mobile .icon-menu{ color:#fff}
    .exhibition-banner{ height:12rem}
    .exhibition-artist{ top:23%}
    figure.effect-jazz h2{font-size: 0.8rem;}
    figure.effect-jazz:hover p, figure.effect-jazz p{font-size: 0.3rem;}
    .page{ width:100%}
    .large_img{ width:auto;height: 30rem;}
    .buy_box{ width:96%}
    .buy_cross{ left:300px;}
    .buy2{ width:9.8rem}
    .buy_mt2,.nobuy{ width:100%;    margin: 1rem 0 0 0;}
    .ex_buy{ margin:0; position:figure; bottom:0}
    .share{ float:none}
    .login_box{ width:96%;left:5px;margin-left: 0;}
    .magazine li{ width:98%;height:10rem; margin:1%}
    .magazine p, .magazine h2{ top:20%;}
    .magazine li h2{ font-size:14px;top:55px}
   .order-info-mod dl,.p-goods,.p-action{ width:100%}
   .p-price,.p-freight,.p-quantity{ width:44%}
   .exhibition-box,.exhibition-introduce,.works,.shop-details,.small_img{ padding:10px;}
   .large_img li{ width:100%;height:auto}
   .buy{ display:none}
   .more_goods{ padding:0 10px;}
   .order_box h3{ font-size:14px;}
    .p-box div{ margin:0}
   .order-info-mod dl{ margin-top:20px;}
    .items,.artist{ padding-left:5px;}
     .Shipping_returns h2{ text-align:center}
    .about-introduce{ width:90%; margin:0 auto}
    .items li figure.effect-winston{min-height:230px;}
}

@media only screen and (min-width:641px) and (max-width:960px)  {
       html {font-size:16px}
        nav>a {width:25%;}
    .wrap{ min-height:auto}
    .mt140{ padding-top:60px;}
    .header{ height:60px;}
    .header .logo{  width:10rem; margin-top:20px;}
    .in_banner h2, .in_banner p{ bottom: 3rem;right: 2rem;}
    .in_banner p{ bottom: 2rem;}
    .icon-prev, .icon-next, .shuliang{ bottom: 1rem;}
    .shuliang{  right: 6rem;}
    .icon-next{ right: 2rem;}
    .icon-prev{right: 4rem;}
    .mobile{ display: block}
    .mobile .icon-menu{ position:absolute; top:25px; left:20px; z-index:999;}
    .mobile .icon-buy{ position:absolute; top:25px; z-index:999; right:20px;}
    .mobile_nav{ position:fixed; width:30%; height:100%; left:0; top:0;background:rgba(210,210,210,.8); padding:80px 0 0 0; display:none}
    .mobile_nav a,.no .mobile_nav a{ font-size:0.8em; line-height:3em; height:3em; display:block; padding-left:10px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#333}
    .mobile_nav .active{ border-right:2px solid #dbb16e}
    .grid,nav,.banner h2{ display:none}
    .banner{ height:auto}
    .wrap,.details_img,.shop-details,.details_img,.large_img, small_img,.shop-details,.details-goods li .box,.wrap1020,.exhibition-information li{ width:100%;}
    nav{ display:none; left:0}
   .magazine li{ height:10rem}
   .mobile .icon-menu,.mobile .icon-buy{ position:absolute; top:20px; right:20px; z-index:9999;color: #fff; font-size:20px;}
    .mobile .icon-buy{right:20px;}
    .exhibition-box,.exhibition-introduce{ padding:0 20px;}
    .items,.artist{ padding-left:8px;}
    .more_goods h3{ padding-left:10px;}

   .details_img,.shop-details{ width:50%; padding:0 10px;}
    .large_img li{ width:95%}
    .large_img{ height:auto}
    .exhibition-banner{ height:24rem}
    .exhibition-artist{top:40%;right:5%}
    .small_img li{margin: 10px 10px 0 0;}
    .artist-works li { width: 7rem;    height: 7rem;}
    .Shipping_returns h2{ text-align:center}
    .about-introduce{ width:80%; margin:0 auto}
    
}
@media only screen and (min-width:961px) and (max-width:1024px) {
    html {font-size:18px}
    nav>a{    margin: 0 0.5rem;}
    .wrap {width:100% }
    .items li, .artist li{width:24% }
    .banner{ height:auto}
    .magazine li{ height: 14rem;}
     .exhibition-box,.exhibition-introduce,.works{ padding:0 20px;}
    .exhibition-banner{ height:75%}
    .exhibition-artist{top:73%;right:5%}
}
@media only screen and (min-width:1024px) and (max-width:1280px) {
    .header .grid{right:0;width: 20%;}
    nav{left:0}
    .exhibition-banner{ height:65%}
    .exhibition-artist{top:40%;right:5%}
    .header .grid{ width:30%}
    main{ padding-left:15px;}
    .details_img,.shop-details{ width:50%}
    .large_img li{ width:95%; height:auto}
    .large_img{ width:100%;height: 30rem;}
    .more_goods h3{ padding-left:15px;}
    .items li, .artist li{ width:24%}
}
@media only screen and (min-width:1281px) and (max-width:1680px) {
    
    html{font-size:20px}
    .buy_goods ul{height:500px;}
    .wrap {width:1350px; }
    nav{ left:0}
    .header .grid{ right:0}
    .items .w50 {  width: 49%; height: 35rem;}
    .magazine li{ height:17rem:}
    .shop-details{width:33rem;}
    .small_img li{ width:10rem: height:10rem}
    .exhibition-banner{height:75%;}
    .exhibition-artist{ top:72%}
    
}

@media only screen and (min-width:1681px) {
    html {font-size:20px}
    nav>a{    margin: 0 1rem;}
  
}