@charset "utf-8";

.gold__mei{margin: 60px auto 0; max-width: 1200px; width: 100%;}
.gold__mei .title h2{padding: 50px 0 18px 0; font:500 34px/1 var(--PFR);color: #333333; text-align: center;}

/*实金产品*/
.por__mei{margin-bottom: 60px;}
.por__mei .li{width: 30%;}
.por__mei .ul{margin-top: 16px; align-items: flex-start;}
.por__mei .li .img_box{margin-bottom: 8px; height: 240px; border-radius: 16px; overflow: hidden;}
.por__mei .li .img_box img{width: 100%; height: 100%; object-fit: cover;}
.por__mei .li p{font: 400 16px/1.5 var(--PFR);}

/*实物黄金的特点*/
.goldtd{position: relative;}
.goldtd ul{margin-top: 16px;flex-wrap: wrap;}
.goldtd ul li{position: relative; margin-top: 24px; max-width: 282px; width: 22%; height: 300px;flex-direction: column;border: 1px solid #EBF0F4;}
.goldtd ul li h3{padding: 30px 0 14px 0;font:500 22px/1 var(--PFR);color: #333333;text-align: center;}
.goldtd ul li p{padding: 0 30px; font:400 16px/1.5 var(--PFR); color: #666666;}
.goldtd ul li .box1{flex-direction: column;}
.goldtd ul li .box1 img{width: 56px; height: 56px;}
.goldlibox{position: absolute;left: 0;top: 118px;flex-wrap: wrap;}
.goldtd ul li .liitem{
	box-sizing: border-box;
	position: absolute;
	padding: 0 24px; 
	width: 100%;height: 100%;
	text-align: justify; 
	font:400 16px/1.5 var(--PFR);
	color: #666666; background: rgba(255, 255, 255, 1);
	opacity: 0;transition:all .1s;transition-delay:.1s;}
.goldtd ul li:hover .liitem{display: flex; animation: myfirst .1s forwards; }
.goldtd ul li .liitem{display: flex; animation: myfirst_out .1s forwards; }

/*实物黄金对比*/
.golddb{margin-top: 60px;}
.golddb ul{flex-direction: column;margin:40px 0; border: 1px solid #EBF0F4;border-radius: 20px;}
.golddb ul li{width: 100%;height: 60px;color: #000000;}
.golddb ul li:hover{background-color: rgba(0,0,0,.02); }
.golddb ul li .line{position: absolute;right: 0;top: 18px; width: 1px;height: 24px;background-color: #D8D8D8;}
.golddb ul li .dealitem{padding: 0 2px; width: 16.66%; height: auto;font:400 14px/1.5 var(--PFR); box-sizing: border-box;}
.golddb ul li:nth-of-type(1) .dealitem{font-weight: 600;}
.golddb ul li:nth-last-of-type(1){height: 114px;}
/*实金买价\实金回收价*/
.tabwrapper{margin-bottom: 80px;}
.tabwrapper .gdtab{height: 110px;}
.tabwrapper .gdtab .gdtabitem{position: relative; color: #999999;line-height: 26px;cursor: pointer;}
.tabwrapper .gdtab .gdtabitem h2{font:300 18px/1 var(--PFR);}
.tabwrapper .gdtab .gdtabitem:nth-of-type(2){margin-left: 56px;}
.goldtabActived h2{font:500 20px var(--PFM) !important; color: #333333 !important;}
.goldtabActived:after{position: absolute;left: 0;bottom: -5px; margin: 0 auto;width: 100%;content:''; display:block; border-bottom: 9px solid #FFF8E9; border-radius: 4px;transition: all 0.4s;z-index: -1;}

.gdtabcontent .goldbuy{flex-direction: column;}
.gdtabcontent .goldbuy .fdc p:nth-of-type(1){padding-top: 36px; font:400 16px/1 var(--PFR); color: #323334; }
.gdtabcontent .goldbuy .fdc .h2{ padding: 20px 0; font:500 56px/1 var(--PFR); color: #DAB660;}
.gdtabcontent .goldbuy .fdc p:nth-of-type(2){font:400 16px/1 var(--PFR); color: #999999; display: flex;align-items: center;}
.gdtabcontent .goldbuy .fdc p:nth-of-type(2) a{color: #999; transition: all .4s;}
.gdtabcontent .goldbuy .fdc p:nth-of-type(2) a:hover{color: #8E7436;}
.gdtabcontent .goldbuy .fdc p:nth-of-type(2) span{color: #DAB660;}
.gdtabcontent .goldbuy .fdc p:nth-of-type(2) img{width: 18px;height: 18px;display: block;margin-right: 30px;margin-left: 10px;}

.gdtabcontent .goldbuy .buylc{margin-top: 83px;position: relative;max-width: 1200px; width: 100%;padding: 40px 0;border: 1px solid #E6EAEE;border-radius: 20px;display: flex;justify-content: center;align-items: center;flex-direction: column;}
.gdtabcontent .goldbuy .buylc h3{font:500 24px/1 var(--PFR); color: #333333;position: absolute;left: 0;right: 0;top: -15px;margin: 0 auto;text-align: center;width: 260px;z-index: 2;background-color: #FFFFFF;}
.gdtabcontent .goldbuy .buylc h4{padding-bottom: 4px; border-bottom: 1px solid #EEEEEE; font:500 16px/1 var(--PFR);}
.gdtabcontent .goldbuy .buylc ul{margin-bottom: 32px;}
.gdtabcontent .goldbuy .buylc ul{display: flex;justify-content: space-between;align-items: center; flex-wrap: wrap; width: 100%; }
.gdtabcontent .goldbuy .buylc ul li{width: 16.5%;height: 120px;display: flex;justify-content: center;align-items: center;position: relative;}
.gdtabcontent .goldbuy .buylc ul li > div{width: 70%;}
.gdtabcontent .goldbuy .buylc ul li span{font:500 20px/1 var(--PFR); color: #333333; text-align: center;}
.gdtabcontent .goldbuy .buylc ul li p{font:400 14px/1.5 var(--PFR); color: #666666; text-align: center;padding-top:20px;}
.gdtabcontent .goldbuy .buylc ul li img{width: 20px;height: 20px;display: block;}
.goldbuytips{font:400 14px/1.5 var(--PFR); padding: 35px 16px 0;color: #999999;}
.gdtabcontentbottom{font: 400 14px/1.5 var(--PFR); color: #333333; text-align: center;margin-top: 40px;}

.goldgg{background: url(../images/gold/goldgg.jpg) center center no-repeat;background-size: cover;height: 120px;;margin: 0 auto;cursor: pointer;}

@media only screen and (max-width: 992px){	
	.gold__mei{margin: 5vw auto;}
	.gold__mei .title h2{padding: 0 0 3vw;}
	/*实金产品*/
	.por__mei{margin-bottom: 5vw;}
	.por__mei .li{}
	.por__mei .ul{margin-top: 2vw;}
	.por__mei .li .img_box{margin-bottom: 2vw; height: 180px; border-radius: 2vw; }
	.por__mei .li .img_box img{}
	.por__mei .li p{font-size: var(--sm_t);}
	/*实物黄金的特点	*/
	.goldtd ul li{padding: 4.6vw 0; width: 30%; height: initial;}
	.goldtd ul li .box1 img{width: 6vw; height: 6vw;}
	.goldtd ul li .liitem{padding:2vw; font-size: var(--sm_t);}
	.goldtd ul li h3{padding:2vw 0; font-size: var(--md_t);}
	.goldtd ul li p{padding: 0 2vw; font-size:var(--sm_t);}
	.goldtd ul li .liitem,
	.golddb ul li .dealitem{ font-size: var(--sm_t);}
	.golddb ul li .dealitem br{display: none;}
	/*实金买价\实金回收价*/
	.tabwrapper .gdtab{height: initial;}
	.gdtabcontent .goldbuy .fdc .h2{font-size: 34px;}
	.gdtabcontent .goldbuy .buylc{margin-top: 6vw;}
	.gdtabcontent .goldbuy .buylc ul li span{font-size: var(--t_md);}
	.gdtabcontent .goldbuy .buylc ul li p{font-size: var(--t_sm);}
}

@media only screen and (max-width: 540px){
	.gold__mei{margin: 6vw auto;}
	.gold__mei .title h2{padding: 0 0 3vw; font-size: 4.8vw;}
	
	/*实金产品*/
	.por__mei{margin-bottom: 6vw;}
	.por__mei .ul{margin-top: 2vw;}
	.por__mei .li .img_box{margin-bottom: 2vw; height: 120px; border-radius: 2vw; }
	.por__mei .li .img_box img{}
	.por__mei .li p{min-height: 16vw; font-size: var(--sm_t);}
	/*实物黄金的特点*/
	.goldtd{margin-bottom: 6vw;}
	.goldtd ul{margin-top: 0;}
	.goldtd ul li{padding: 6vw 0; width: 46%; height: auto;}
	.goldtd ul li:hover .liitem{height: 100%; font-size: var(--sm_t);}
	.goldtd ul li .box1 img{width: 8vw; height: 8vw;}
	.goldtd ul li h3{padding:3vw; font-size:var(--md_t);}
	.goldtd ul li p,
	.goldtd ul li .liitem{font-size: var(--sm_t);}
	.goldtd ul li .liitem{padding:2vw; }
	
	.golddb{margin: 0 0 6vw;}
	.golddb ul{margin-top: 4vw;}
	.golddb ul li{padding: 2vw 0; height: initial;}
	.golddb ul li:nth-last-of-type(1){height: initial;}
	.golddb ul li .dealitem{font-size: var(--sm_t);}
	.golddb ul li .dealitem br{display: none;}
	/*实金买价\实金回收价*/
	.tabwrapper{margin-bottom: 6vw;}
	.tabwrapper .gdtab{height: initial;}
	.tabwrapper .gdtab .gdtabitem h2{font-size: var(--md_t);}
	.tabwrapper .gdtab .goldtabActived h2{font-size: 3.8vw !important;}
	.gdtabcontent .goldbuy p:nth-of-type(1){padding-top: 3vw !important; font-size: var(--sm_t) !important;}
	.gdtabcontent .goldbuy .h2{padding: 3vw 0; font-size: 6vw;}
	.gdtabcontent .goldbuy p:nth-of-type(2){font-size: var(--sm_t);}
	.gdtabcontent .goldbuy .buylc{margin-top: 6vw; padding: 3vw 0; width: 100%;}
	.gdtabcontent .goldbuy .buylc h3{font-size: var(--md_t);}
	.gdtabcontent .goldbuy .buylc h4{font-size: var(--sm_t);}
	.gdtabcontent .goldbuy .buylc ul li{padding: 2vw 0; height:initial;}
	.gdtabcontent .goldbuy .buylc ul li span{font-size: var(--sm_t);}
	.gdtabcontent .goldbuy .buylc ul li p{font-size: var(--sm_t);}
	.gdtabcontent .goldbuy .buylc ul li img{width: 2vw; height: 2vw;}
	.goldbuytips{padding: 3vw 2vw 0; font-size: var(--sm_t);}
	.gdtabcontentbottom{margin-top: 3vw; font-size: var(--sm_t);}
	
	.tabwrapper{margin: 0;}
}

@keyframes myfirst
{
    from {opacity: 0;}
    to {opacity: 1;}
}
@keyframes myfirst_out
{
    from {opacity: 1;}
    to {opacity: 0;}
}