@charset "utf-8";
/* CSS Document */

body{margin:0; padding:0; font-family: 'Roboto', sans-serif; font-size:14px; color:#fff; background:#000; font-weight:normal; line-height:30px}
h1,h2,h3,h4,h5,h6{ font-family: 'Roboto', sans-serif ;font-weight:400; color:#fff}
h1{font-size:46px}
h2{font-size:36px}
h3{font-size:27px}
h4{font-size:24px}
h5{font-size:20px}
a{ text-decoration:none;}
.gap10{ height:10px; display:block; clear:both}
.gap15{ height:15px; display:block; clear:both}
.gap20{ height:20px; display:block; clear:both}
.gap25{ height:25px; display:block; clear:both}
.gap30{ height:30px; display:block; clear:both}
.gap35{ height:35px; display:block; clear:both}
.gap40{ height:40px; display:block; clear:both}
.gap45{ height:45px; display:block; clear:both}
.gap50{ height:50px; display:block; clear:both}

.opendiv{ display:block}
.hidediv{ display:none}

@media only screen and (max-width: 767px) {
.opendiv{ display:none}
.hidediv{ display:block}
}

.textleft{ text-align:left}
.textright{ text-align:right}
.textcenter{ text-align:center}

.h6,h6{font-size:17px}
#navtop{  background-color:none;  top: 0px;  width: 100%;  display: block;  transition: top 0.3s;  z-index:1;  position:absolute; transition: 0.5s;}
#navtop:hover{ background-color: #dab818;}
#navtop:hover{ color:#000}
#navtop:hover a{  color: #000;}
#navtop a{ color: #fff; text-align: center; text-decoration: none; font-size: 14px;}
#navtop a:hover { color: black;}

#navtop .logo{ font-size:36px; text-transform:uppercase; text-align:center;}
#navtop .logo a{ font-size:36px; margin:0; padding:0}


#navbar{background-color: #dab818;  position: fixed;  top: -80px;  width: 100%;  display: block;  transition: top 0.5s; z-index:4; color:#000}

#navbar a{ color: black; text-decoration:none; }
#navbar .logo a { color: black; font-size:29px; text-align:center}

#navbar-m{background-color: #dab818;  position: fixed;  top:0px;  width: 100%; transition: top 0.5s; z-index:4; color:#000}

#navbar-m a{ color: black; text-decoration:none; }
#navbar-m a:hover{ color: white; text-decoration:none; }
#navbar-m .logo a { color: black; font-size:29px; text-align:center}



.titlePage{ text-transform:uppercase; text-align:center; color:#fff; margin:30px; 0px; font-weight:500}
.titlePage2{ text-transform:uppercase; color:#dab818; margin:30px; 0px; font-weight:500; text-align:left}
.titlePage-line{ margin:10px 0 25px 0; background:url(../images/line-b.jpg) no-repeat left; height:5px; width:150px}
.titlePage-line2{ margin:10px 0 25px 0; background:url(../images/line-b2.jpg) no-repeat left; height:5px; width:150px}

.footer{ background:#3b3b3b; border-top:#dab818 solid 2px; padding:40px 0px; color:#dab818; margin-top:50px }
.footer a:link, .footer a:active, .footer a:visited, footer h3{color:#dab818 }

 ul.listmenu{ list-style:none; margin:0; padding:0;  }
 ul.listmenu li{ list-style:none; margin:0; padding:2px 0;background:none; }
ul.listmenu li a:link, ul.listmenu li a:active, ul.listmenu li a:visited{ font-size:14px; color:#dab818; text-decoration:none }
ul.listmenu li a:hover{ color:#32CD32; text-decoration:none ;}

.gold-btn a:link, .gold-btn a:active, .gold-btn a:visited{ background:#dab818; font-style:normal; text-decoration:none; color:#000; padding:10px 20px; font-weight:500; text-transform:uppercase}
.gold-btn a:hover{ background:#ffd200; color:#000; }
.gold-btn-cart a:link, .gold-btn-cart a:active, .gold-btn-cart a:visited{ background:#dab818; font-style:normal; text-decoration:none; color:#000; padding:10px 20px; font-weight:500; text-transform:uppercase; font-size:18px;}
.gold-btn-cart a:hover{ background:#ffd200; color:#000; }

.gray-btn a:link, .gray-btn a:active, .gray-btn a:visited{ background:#aaa; font-style:normal; text-decoration:none; color:#000; padding:6px 20px; font-weight:500; text-transform:uppercase; display:block}
.gray-btn a:hover{ background:#333; color:#fff; }

.footerdown{ background:#000;padding:20px 0px; color:#dab818;}

.footicon i{ background:#000; padding:10px 6px; height:14px; width:24px; color:#fff; text-align:center; border-radius:50%; margin-right:10px}
.footicon i:hover{ background:#111; color:#dab818; }

.notice{ width:100%; background:#dab818; color:#000; font-size:20px; padding:10px; margin:20px 0px; box-sizing: border-box;}

.homegoldBg{width:100%; background:#dab818; color:#000; padding:60px 0; margin:50px 0px;}
.homegoldBg h2, .homegoldBg h1, .homegoldBg h3, .homegoldBg h4{ color:#000}
.product-title{ font-size:48px; font-weight:500; color:#fff}

.container-products { position: relative; text-align: center; color: white;}
.pro-high-text{ width:100%;  position: absolute; bottom: 0px; left: 0px;  background-color: rgba(218, 184, 24, 0.7); color:#000; padding:5px 10PX; box-sizing: border-box; font-size:17px; font-weight:500; text-align:left}

.account{background:#fff; padding:3px 0px; margin:0 auto; color:#000; text-align:center}

.account a:link, .account a:active,.account a:visited{ color:#000000; text-decoration:none; margin:0; padding:0; font-size:12px}

.proTxt{ text-align:center; color:#fff;text-decoration:none; text-align:center; position:relative;}
.proTxt a{ font-size:18px; text-decoration:none; text-align:center; color:#dab818}
.proTxt a:hover{ color:#fff}

.list {
  display: flex;
  flex-wrap: wrap;
}

.procell{  display: flex; 
  padding: 0;
  width: 100%; }

.proImg{ width:100%; height:358px;}

.proTxt .extra{ width:100%; height:150px; background:#222; display:none; z-index:6}
.proTxt:hover .extra{ width:100%; background:#000; display:block; position:absolute; top:115px;
  left: 50%;
  transform: translate(-50%, -50%);}
/*  .proTxt:hover .extra a:link{ color:#dab818; margin:15px 0px; display:inline-block}
  .proTxt:hover .extra a:hover{ color:#fff; }*/
  
  .proTxt:hover .extra a.goldbtn:link{ color:#000; background:#dab818; padding:5px 20px; margin:15px 0px; display:inline-block}
  
  .proTxt:hover .extra a.goldbtn:hover{ color:#000; background:#ccc; padding:5px 20px; margin:15px 0px; display:inline-block}

.colorbox a{ text-decoration:none; margin-right:15px; display:inline-table}
.colorbox a .select-c{ width:20px; height:20px; border-radius:50%; color:#fff; border:solid 2px #fff; background:#dab818}
.colorbox-blk{ width:20px; height:20px; border-radius:50%; color:#fff; border:solid 2px #555; background:#000}
.colorbox-wh{ width:20px; height:20px; border-radius:50%; color:#fff; border:solid 2px #555; background:#fff}
.colorbox-red{ width:20px; height:20px; border-radius:50%; color:#fff; border:solid 2px #555; background:#f00}
.colorbox-yel{ width:20px; height:20px; border-radius:50%; color:#fff; border:solid 2px #555; background:#FFCC33}
.colorbox-grn{ width:20px; height:20px; border-radius:50%; color:#fff; border:solid 2px #555; background:#339933}


.sizebox a{ text-decoration:none; margin-right:5px; display:inline-table; background:#fff; color:#000; padding:1px 11px; font-size:17px;}
.sizebox a:hover{ background:#dab818; color:#000; }
.sizebox a.select{background:#dab818; color:#000;}
.wishlist a:link{ color:#fff; text-decoration:none; font-size:17px;}
.wishlist a:hover{ color:#dab818; text-decoration:none; font-size:17px;}

.accordion { background:#000; color: #fff; cursor: pointer; padding:8px 0px; width: 100%; border:none;  border-top:solid 1px #333; border-bottom:solid 1px #333; text-align: left;    font-size: 16px;  transition: 0.4s; font-weight:500}
.active, .accordion:hover { background-color: #000;}
.accordion:after { content: '\002B'; color: #777; font-weight: bold; float: right;  margin-right:10px;}
.active:after {content: "\2212";}
.panel { padding: 0 0px; background-color: #000; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; font-weight:300}
.goldline{ width:100%; height:1px; background:#dab818;}
.reviewTxt{ font-size:13px; color:#fff; line-height:18px}

.facility a:link, .facility a:active, .facility a:visited{ text-align:center; color:#dab818; font-size:18px; text-decoration:none; margin:0 auto; font-weight:500}
.facility a:hover{ color:#ccc; }

.logbox{ margin:0 10%}
.finput{ width:96%; padding:8px 2%; color:#000; background:#fff; border:none}
.finputBtn{font-family: 'Roboto', sans-serif ; width:100%; padding:13px 2%; color:#000; background:#dab818; border:none; font-weight:500;  font-size:15px; cursor:pointer}
.finputBtn:hover{background:#222; color:#dab818;}

.logbox a{ color:#fff; text-decoration:none;}
.logbox a:hover{ color:#dab818; text-decoration:none;}
.cart-box{ border:solid 1px #222; padding:10px; margin-bottom:15px;}

.dashlist{ margin:0; padding:0;}
.dashlist ul{ margin:0; padding:0; list-style:none}
.dashlist ul li{ margin:0; padding:10px 0; list-style:none; width:100%; border-bottom:dotted 1px #555; display:inline-block; float:left}
.dashlist ul li:hover , .dashlist ul li.select2{ background:#222}
.dashlist ul li a{ color:#fff; text-decoration:none; font-size:18px; display:block}
.dashlist ul li a:hover{ color:#dab818;}
.dashlist ul li i{ color:#dab818; padding-right:10px; padding-left:5px;}
.das-box{ width:29%; display:inline-block; margin-right:2.45%; margin-bottom:10px; float:left}
.das-box h4{ font-size:22px; color:#000}


.order{ border-bottom:solid 1px #333; padding:0 0 10px 0; width:100%; margin-bottom:15px;}

.banner { position: relative; text-align: center; color:#dab818;}
.banner video { width:100%;}
.discover{ position: absolute; bottom: 20px; left: 47%;}
.discover a{ color:#dab818; padding:5px 10px; border:solid 1px #dab818; border-radius:20px; box-sizing: border-box; font-size:12px; font-weight:500; text-align:center; background-color: rgb(0, 0, 0, 0.3);}
.discover a:hover{background-color: rgb(0, 0, 0, 0.8); color:#fff}

@media only screen and (max-width: 767px) {
body{font-size:14px;}
#navtop.logo{ font-size:26px;}


h1{font-size:40px}
h2{font-size:30px}
h3{font-size:24px}
h4{font-size:20px}
h5{font-size:18px}
h6{font-size:15px}

.textleft{ text-align:center}
.textright{ text-align:center}
.textcenter{ text-align:center}

.gap10{ height:5px; display:block; clear:both}
.gap15{ height:12px; display:block; clear:both}
.gap20{ height:15px; display:block; clear:both}
.gap25{ height:20px; display:block; clear:both}
.gap30{ height:20px; display:block; clear:both}
.gap35{ height:20px; display:block; clear:both}
.gap40{ height:20px; display:block; clear:both}
.gap45{ height:20px; display:block; clear:both}
.gap50{ height:20px; display:block; clear:both}

.opendiv{ display:none}
.hidediv{ display:block}
.titlePage{ margin:20px; 0px}
.titlePage-line{ margin:8px 0 20px 0; background:url(../images/line-s.jpg) no-repeat left; height:3px; width:100px}
.titlePage-line2{ margin:8px 0 20px 0; background:url(../images/line-s2.jpg) no-repeat left; height:3px; width:100px}
.homegoldBg{width:100%; background:#dab818; color:#000; padding:30px 0; margin:20px 0px;}
.product-title{ font-size:30px; font-weight:500;}
.sizebox a{ margin-right:2px; display:inline-table; padding:0px 10px; font-size:13px;}

.gold-btn-cart a:link, .gold-btn-cart a:active, .gold-btn-cart a:visited{ background:#dab818; padding:7px 15px; font-weight:500;  font-size:15px;}
.reviewTxt{ font-size:12px; color:#fff; line-height:14px}
.facility a:link, .facility a:active, .facility a:visited{  font-size:16px;}

.das-box{ width:42%; display:inline-block; margin-bottom:10px; float:left}


.discover{ position: absolute; bottom: 10px; left: 34%;}
.discover a{  padding:3px 7px; font-size:11px;}
.proTxt{ font-size:13px}
.proImg{ width:100%; height:300px; margin:0 auto }
.proTxt h5{ height:auto; line-height:22px; font-size:16px}

.footer h4{ font-size:20px}
}