/* BASIC css start */
/*snb*/
.grid_4        { float:left; display:inline; width:180px; height:535px; background:#0071e3; }
.grid_4 dl     { padding:30px 30px 0;}
.grid_4 dt     { padding-bottom:8px;}
.grid_4 dt a   { color:white; font-size:26px;}
.grid_4 dd     { border-bottom:1px dotted #83acd5;}
.grid_4 dd a   { color:white; font-size:16px; line-height:33px;}
.grid_4 dd a:hover{ color:#ffde7b;}

.scrollFixIt{font-size:1px; color:#f0f0f0;}
.left31{padding-left:31px;}
.top60{padding-top:60px;}
.gallery{padding:0;}
.gallery a,.gallery a:link,.gallery a:visited{border:1px solid #f6f6f6; width:222px;}
.gallery a:hover{border:1px solid #2d2d35}


/* ¼îÇθô È÷½ºÅ丮 */
.mall_history    { padding:30px 0 50px; text-align:center; background:#eef0f3;}
.mall_history ul { padding:25px;}
.mall_history li { display:inline-block; width:143px; text-align:center; vertical-align:top;}
.mall_history li div { text-align:center; color:#333; font-weight:500; font-size:13px; padding:3px 5px 14px;}
.mall_history li img { width:96%; border:1px solid #e0e5e7; filter:opacity(0.8);}
.width470        { /*width:1800px;*/ width:470px;}


/*product*/
.products        { padding:30px 0 80px; text-align:center; }
.products ul     { display:flex; flex-wrap: wrap; justify-content:center; gap:3px; width:100%; }
.products li     { display:flex; flex-direction:column; justify-content:center; width:140px; margin:0 0 4px; padding:5px 0; font-size:16px; font-weight:500; line-height:18px; border:1px solid #e3e3e3; }
.products li img { width:100%;}
.products li .ct, 
.products li .mf, 
.products li .ip { margin:0 2px; padding:0 3px; font-size:11px; font-weight:500; border-radius:4px; }
.products li .ct { color:#ffa647; border:1px solid  #ffa647;}
.products li .mf { color:#6dc9cc; border:1px solid  #6dc9cc;}
.products li .ip { color:#5c9dfb; border:1px solid  #5c9dfb;}

.gallerycontainer{ width:800px; margin:0 auto 30px }
.gallerycontainer > div         { position:relative; height:360px; margin-top:20px; padding-left:515px;}
.gallerycontainer > div > a > img { width:90px; margin:0 0 6px; border:1px solid #ddd;}
.gallerycontainer a:hover       { background-color:transparent;}
.gallerycontainer > div > a:hover > img   { border:1px solid blue;}
.gallerycontainer a span        { position:absolute; padding:0; top:0; left:0; color:black; text-align:center; border:1px dashed gray; background-color:white; visibility:visible; }
.gallerycontainer a:hover span  { visibility:visible; z-index:50;}
.gallerycontainer a span img    { padding:2px; border:1px solid white;}

.gallerycontainer01   { display:flex; flex-wrap:wrap; gap:4px; position:relative; width:861px; margin:0 auto; padding-top:532px; }
.gallerycontainer01 >li:first-child a span { z-index:1}
.gallerycontainer01 a { display:inline-block;}
.gallerycontainer01 a > img { width:169px !important; height:104px;}
.gallerycontainer01 a:hover > img { box-sizing:border-box; border:solid 2px #DD2D2D; }
.gallerycontainer01 a span  { box-sizing:border-box; position:absolute; top:0; left:0; height:527px; border:2px solid #000; visibility:visible; }
.gallerycontainer01 a:hover span  { visibility:visible; z-index:50; }
.gallerycontainer01 a span > img { width:859px; height:524px; }






#thumbBox { /*Outermost DIV for thumbnail viewer*/
	        position:absolute;	left:100px; top:0; width:auto; padding:7px; padding-bottom:0; background:#313131; visibility:hidden; z-index:10; cursor:hand; cursor:pointer;
          }
#thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */
            font: bold 12px Tahoma; letter-spacing: 5px; line-height: 1em; color: white; padding:4px 0; text-align:right;
          }
#thumbBox #thumbImage { background-color:white;}
#thumbLoading { position:absolute; padding:5px; border:1px solid black; background-color:#efefef; visibility:hidden; z-index:5;}


@media screen and (-webkit-min-device-pixel-ratio:0) {
    .width470 {width:470px;}
}
/* BASIC css end */