/*
#bgFrame{
	display:block;
	overflow:hidden;
	width:100vw;
	height:100vh;
	position:fixed;
	top:0;
	left:0;
	z-index:-10;
}

#bgFrame > ul{
	display:block;
	overflow:hidden;
	width:1146px;
	height:100vh;
	position:fixed;
	top:0;
	left: calc(50% - 429px);
}

#bgFrame > ul > li{
	display:block;
	overflow:hidden;
	float:left;
	width:286px;
	height:100vh;
	background-color:#efefef;
	border-left:1px solid #ffffff;
}

#contentFrame{
	background:none;
}
*/

/* ==========================================================
*
* Title Box
*
========================================================== */
#titleBox{
	display:block;
	overflow:hidden;
	width:100%;
	height:670px;
	position:relative;
}

#topCopy{
	display:block;
	overflow:hidden;
	width:80%;
	padding:45px;
	position:absolute;
	bottom:0;
	left:0;
	background-color:#00152d;
	color:#ffffff;
	line-height:155%;
	font-size: 1.8rem;
}

#topCopy h4{
	font-size:1.8rem;
	font-weight:bold;
	margin-bottom:1em;
	line-height:125%;
}

#titleBox a.boxBtn{
	display:block;
	overflow:hidden;
	width:40%;
	max-width: 570px;
	padding:1em;
	color:#ffffff;
	text-decoration:none;

	background: -moz-linear-gradient(left,  rgba(0,82,156,0) 0%, rgba(0,82,156,1) 40%);
	background: -webkit-linear-gradient(left,  rgba(0,82,156,0) 0%,rgba(0,82,156,1) 40%);
	background: linear-gradient(to right,  rgba(0,82,156,0) 0%,rgba(0,82,156,1) 40%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000529c', endColorstr='#00529c',GradientType=1 );


    position:absolute;
    bottom: 0;
    right:0;
}


a.boxBtn > span{
	margin-left:25%;
}

.prc-left::after{
	content: "\e908";
	float:right;
}


/* for Sp --------------------*/
@media screen and (max-width: 750px) {

	#titleBox{
		height:calc(100vh - 45px);
	}

	#topCopy{
		width:70%;
		padding:30px;
		font-size: 1.2rem;
	}

	#topCopy h4{
		font-size:1.4rem;
	}



}


/**************************
Slyde show
*************************/
#slydeSet,
#slydeSet > ul{
	display:block;
	overflow:hidden;
	width:100%;
	height:670px;
	position:relative;
}

#slydeSet > ul > li{
	opacity:0;
	display:block;
	overflow:hidden;
	width:100%;
	height:670px;
	position:absolute;
	top:0;
	left:0;
	background-position:50% 50%;
	background-repeat: no-repeat;
	background-size:cover;
}


#slydeSet > ul > li > p{
	display:inline-block;
	overflow:hidden;
	position:absolute;
}


#slydeSet > ul > li:nth-child(1){
	opacity:1.0;
	background-image: url("https://www.prcbroker.net/cn/images/top/slyde/_pc/slyde_01.png");
}
#slydeSet > ul > li:nth-child(1) > p{
	top:128px;
	right:0;
}

#slydeSet > ul > li:nth-child(2){
	background-image: url("https://www.prcbroker.net/cn/images/top/slyde/_pc/slyde_02.png");
}
#slydeSet > ul > li:nth-child(2) > p{
	top:94px;
	right:0;
}

#slydeSet > ul > li:nth-child(3){
	background-image: url("https://www.prcbroker.net/cn/images/top/slyde/_pc/slyde_03.png");
}
#slydeSet > ul > li:nth-child(3) > p{
	top:calc(50% - 35px);
	left:calc(50% - 181px);
}

#slydeSet > ul > li:nth-child(4){
	background-position:right top;
	background-image: url("https://www.prcbroker.net/cn/images/top/slyde/_pc/slyde_04.png");
}
#slydeSet > ul > li:nth-child(4) > p{
	top:135px;
	left:181px;
}


#frontBer{
	display:inline-block;
	overflow:hidden;
	width:10px;
	height: 429px;
	position:absolute;
	top:125px;
	left:40px;
	opacity:1.0;
}


/* for Sp --------------------*/
@media screen and (max-width: 750px) {
	#slydeSet,
	#slydeSet > ul{
		height:100%;
	}

	#slydeSet > ul > li{
		height:100%;
	}

	#slydeSet > ul > li > p{
		display:block;
		overflow:hidden;
		padding:0;
	}

	#slydeSet > ul > li > p img{
		width:100%;
		height:auto;
	}

	#slydeSet > ul > li:nth-child(1){
		background-image: url("https://www.prcbroker.net/cn/images/top/slyde/_sp/slyde_01.png");
	}
	#slydeSet > ul > li:nth-child(1) > p{
		top:144px;
		left:0;
		right:auto;
	}

	#slydeSet > ul > li:nth-child(2){
		background-image: url("https://www.prcbroker.net/cn/images/top/slyde/_sp/slyde_02.png");
	}
	#slydeSet > ul > li:nth-child(2) > p{
		top:144px;
		left:0;
		right:auto;
	}

	#slydeSet > ul > li:nth-child(3){
		background-image: url("../image/slyde_03.png");
	}
	#slydeSet > ul > li:nth-child(3) > p{
		top:248px;
		left:0;
	}

	#slydeSet > ul > li:nth-child(4){
		background-position:right top;
		background-image: url("https://www.prcbroker.net/cn/images/top/slyde/_sp/slyde_04.png");
	}
	#slydeSet > ul > li:nth-child(4) > p{
		top:222px;
		left:0;
	}


	#frontBer{
		top:auto;
		bottom:10px;
		left:10px;
	}

	#frontBer > img{
		width:8px;
		height:auto;
	}

}



/* ==========================================================
*
* Service Box
*
========================================================== */
#companyDate{
	display:block;
	overflow:hidden;
	width: 100%;
	padding:50px 0;
	text-align:center;
}

#companyDate > .innerFrame{
	display:block;
	overflow:hidden;
	width: 100%;
	max-width:1200px;
	margin:0 auto;
}

#companyDate > .innerFrame > ul{
	display:block;
	overflow:hidden;
}

#companyDate > .innerFrame > ul > li{
	display:inline-block;
	overflow:hidden;
	width:286px;
	text-align: center;
}

#companyDate > .innerFrame > ul > li > a{
	display:block;
	overflow:hidden;
	color:#000000;
	text-decoration:none;
}


#companyDate > .innerFrame > ul > li > a > span{
	display:inline-block;
	overflow:hidden;
	font-size: 1.8rem;
}

p.circleImg{
	display:inline-block;
	overflow:hidden;
	width: 167px;
	height:167px;
	position:relative;
	margin-bottom:25px;
}

p.circleImg > img.cframe{
	position: absolute;
	top:0;
	left:0;
    /*transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;*/
}

#companyDate > .innerFrame > ul > li > a:hover > p.circleImg > img.cframe{
	animation: spin 0.5s linear infinite;
}


@keyframes spin {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}


/* for Sp --------------------*/
@media screen and (max-width: 750px) {
	#companyDate > .innerFrame > ul{
		display:inline-block;
		overflow:hidden;
	}

	#companyDate > .innerFrame > ul > li{
		display:block;
		overflow:hidden;
		width:100%
		margin:1em 0;
		text-align:left;
	}
	#companyDate > .innerFrame > ul > li:nth-child(2){
		padding:10px 0;
	}

	#companyDate > .innerFrame > ul > li > a > span{
		display:inline-block;
		overflow:hidden;
		font-size: 1.8rem;
		margin-top:25px;
	}

	p.circleImg{
		width:21vw;
		height:auto;
		position:relative;
		float:left;
		margin-bottom:0;
		margin-right:1em;
	}

	p.circleImg > img.cframe{
		display: none;
	}

	p.circleImg > img.cicon{
		width:100%;
		height:auto;
	}


}


/* ==========================================================
*
* News Box
*
========================================================== */
#newsindex{
	display:block;
	overflow:hidden;
	width: 100%;
	padding:25px 50px;
	color:#ffffff;
	position:relative;

    background: #00162f;
    background: -moz-linear-gradient(left, #00162f 0%, #00529c 100%);
    background: -webkit-linear-gradient(left, #00162f 0%,#00529c 100%);
    background: linear-gradient(to right, #00162f 0%,#00529c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00162f', endColorstr='#00529c',GradientType=1 );
}

#newsindex .innerFrame{
	display:block;
	overflow:hidden;
	width:100%;
	max-width:1200px;
	margin:0 auto;
	position:relative;
}


#newsindex h2{
	display:inline-block;
	overflow:hidden;
	/*width:220px;*/
	line-height:125%;
	font-size:2.8rem;
	position:absolute;
	top:50%;
	left:60px;
	-webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

#newsindex h2 > span{
	font-size:1.4rem;
	padding-left:0.5em;
}

#newsindex dl{
	display:block;
	overflow:hidden;
	width:100%;
	max-width:930px;
	line-height:155%;
	margin-left:250px;
}

#newsindex dl > dt,
#newsindex dl > dd{
	display:block;
	overflow:hidden;
	float:left;
}

#newsindex dl > dt{
	clear:both;
	width: 10em;
	padding-left:45px;
	position:relative;
}

#newsindex dl > dt.new::after{
	content:"NEW";
	display:inline-block;
	overflow:hidden;
	width:38px;
	text-align:center;
	font-size:12px;
	line-height:100%;
	padding:2px 4px;
	color:#000000;
	background-color:#f9ca03;

	position:absolute;
	top:50%;
	left:0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

#newsindex dl > dd{
	width: calc(100% - 10em);
}

#newsindex a{
	text-decoration:none;
	color:#ffffff;
}


#newsindex a.prc-left{
	display:inline-block;
	overflow:hidden;
	width:60px;
	padding:1em 0;
	text-align:center;
	position:absolute;
	top:50%;
	right:0;
	-webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    line-height: 100%;
}


/* for Sp --------------------*/
@media screen and (max-width: 750px) {
	#newsindex{
		padding:0;
		background: #00162f!important;
	}

	#newsindex .innerFrame{
		display:block;
		overflow:hidden;
		width:100%;
		max-width:1200px;
		margin:0 auto;
		position:relative;
	}


	#newsindex h2{
		display:block;
		width:100%;
		font-size:2.5rem;
		position:relative;
		top:auto;
		left:auto;
		-webkit-transform:none;
	    transform:none;
	    margin:50px 25px 0;
	}

	#newsindex h2 > span{
		display:block;
		font-size:1.0rem;
		padding-left:0;
		line-height:125%;
		margin-bottom:25px;
	}

	#newsindex dl{
		max-width:100%;
		line-height:155%;
		margin-left:0;
		padding:0 25px 50px;
	}

	#newsindex dl > dt,
	#newsindex dl > dd{
		float:none;
	}

	#newsindex dl > dt{
		width:100%;
		padding-left:0;
	}

	#newsindex dl > dt.new::after{
		margin-left:5px;
		font-size:10px;
		left:auto;
	}


	#newsindex dl > dd{
		width:100%;
		margin-bottom: 1em;
	}

	#newsindex a{
		text-decoration:none;
		color:#ffffff;
	}


	/*#newsindex a.prc-left{
		display:block;
		overflow:hidden;
		width:60px;
		padding:1em 0;
		text-align:center;
		position:absolute;
		top:50%;
		right:0;
		-webkit-transform: translateY(-50%);
	    transform: translateY(-50%);
	}*/

	#newsindex a.prc-left{
		width:40%;
		max-width: 570px;
		padding:1em;

	    background: #00162f;
	    background: -moz-linear-gradient(left, #00162f 0%, #00529c 100%);
	    background: -webkit-linear-gradient(left, #00162f 0%,#00529c 100%);
	    background: linear-gradient(to right, #00162f 0%,#00529c 100%);
	    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00162f', endColorstr='#00529c',GradientType=1 );

	    position:absolute;
		top:auto;
	    bottom:0;
	    -webkit-transform:none;
	    transform:none;
	}



}



/* ==========================================================
*
* Account Box
*
========================================================== */
#accoundData{
	display:block;
	overflow:hidden;
	width:100%;
	max-width:900px;
	margin:0 auto;
	background-color:#ffffff;
	position:relative;
}

#accoundData > h2{
	display:inline-block;
	overflow:hidden;
	width:280px;
	font-size:2.8rem;
	line-height:125%;
	text-align:center;
	position:absolute;
	top:50%;
	left:0;
	-webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

#accoundData > dl{
	display:block;
	overflow:hidden;
	width: calc(100% - 280px);
	margin-left:280px;
	padding:60px 0;
}

#accoundData > dl > dt{
	display:block;
	overflow:hidden;
	font-size:2.0rem;
	font-weight:bold;
	padding-bottom:5px;
	border-bottom:3px solid;
}

#accoundData > dl > dt a{
	display:block;
	overflow:hidden;
	color:#000000;
	line-height:125%;
	text-decoration:none;
}

#accoundData > dl > dt:nth-child(1){
	border-image: linear-gradient(to right, #8dffff 0%, #0055a0 100%);
    border-image-slice: 1;
}
#accoundData > dl > dt:nth-child(3){
	border-image: linear-gradient(to right, #10fe3a 0%, #0055a0 100%);
    border-image-slice: 1;
}
#accoundData > dl > dt:nth-child(5){
	border-image: linear-gradient(to right, #e8b916 0%, #0055a0 100%);
    border-image-slice: 1;
}


#accoundData > dl > dd{
	padding-top:0.5em;
	margin-bottom:2em;
}


#accoundData > a.prc-left{
	display:block;
	overflow:hidden;
	text-align:center;
	text-decoration:none;
	color:#ffffff;
	padding:1em 0;
	line-height:125%;

    background: #02152e;
    background: -moz-linear-gradient(left, #02152e 0%, #8f0781 100%);
    background: -webkit-linear-gradient(left, #02152e 0%,#8f0781 100%);
    background: linear-gradient(to right, #02152e 0%,#8f0781 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02152e', endColorstr='#8f0781',GradientType=1 );
}

#accoundData > a.prc-left::after{
	float:none;
	margin-left: 0.5em;
}

/* for Sp --------------------*/
@media screen and (max-width: 750px) {
	#accoundData{
		padding:50px 25px;
	}

	#accoundData > h2{
		width:100%;
		font-size:2.5rem;
		position:relative;
		top:auto;
		left:auto;
		-webkit-transform:none;
	    transform:none;
	}

	#accoundData > dl{
		display:block;
		overflow:hidden;
		width:100%;
		margin-left:0;
		padding:25px 0;
	}

}



/* ==========================================================
*
* Platform Box
*
========================================================== */
#pratformData{
	display:block;
	overflow:hidden;
	width:100%;
	position: relative;
	margin:150px 0;
}

#pratformData .innerFrame{
	 display:block;
	 overflow:hidden;
	 width:90%;
	 height:440px;
	 position:relative;
}
#pratformData h2{
	display:block;
	overflow:hidden;
	line-height:125%;
	font-size:2.8rem;
	position:absolute;
	bottom:350px;
	right:0;
}

#pratformData h3{
	display:block;
	overflow:hidden;
	line-height:125%;
	font-size:4.5rem;
	position:absolute;
	top:155px;
	right:40px;
	color:#ffffff;
	font-weight:normal;
}


#pratformData .bg_squere{
	display:block;
	overflow:hidden;
	width:100%;
	height:335px;
	position:absolute;
	bottom:0;
	left:0;
	background-color:#00152b;
}

img#pcImg{
	position:absolute;
	top:0;
	right:500px;
}

img#spImg{
	 display:none;
}


#pratformData > a.prc-left{
	display:block;
	overflow:hidden;
	width:40%;
	max-width: 570px;
	padding:1em;
	color:#ffffff;
	text-decoration:none;

	background: -moz-linear-gradient(left, rgba(143,7,129,0) 0%, rgba(143,7,129,1) 75%);
	background: -webkit-linear-gradient(left, rgba(143,7,129,0) 0%,rgba(143,7,129,1) 75%);
	background: linear-gradient(to right, rgba(143,7,129,0) 0%,rgba(143,7,129,1) 75%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008f0781', endColorstr='#8f0781',GradientType=1 );

    position:absolute;
    bottom: 0;
    right:0;
}

#pratformData > a.prc-left> span{
	margin-left:25%;
}



/* for Sp --------------------*/
@media screen and (max-width: 750px) {

	#pratformData{
		margin:0;
		padding:100px 0;
	}

	#pratformData .innerFrame{
		 width:100%;
		 height:auto;
	}

	#pratformData h2{
		font-size:2.5rem;
		position:relative;
		text-align:center;
		margin-bottom:25px;
		bottom:auto;
		right:auto;
	}

	#pratformData h3,
	#pratformData .bg_squere{
		display:none;
	}

	img#pcImg{
		display:none;
	}

	img#spImg{
		display:block;
		width:100%;
		height:auto;
	}

	#pratformData > a.prc-left{
		width:100%;
		max-width:100%;
		padding:1em;
		color:#ffffff;
		text-align:center;

		background: #02152e;
	    background: -moz-linear-gradient(left, #02152e 0%, #8f0781 100%);
	    background: -webkit-linear-gradient(left, #02152e 0%,#8f0781 100%);
	    background: linear-gradient(to right, #02152e 0%,#8f0781 100%);
	    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02152e', endColorstr='#8f0781',GradientType=1 );


	    position:relative;
	    bottom:auto;
	    right:auto;
	}

	#pratformData > a.prc-left > span{
		margin-left:0;
	}

	#pratformData > a.prc-left::after {
	    float: none;
	    margin-left: 0.5em;
	}

}



/* ==========================================================
*
* Financial Calendar Box
*
========================================================== */
#calendar{
	display:block;
	overflow:hidden;
	width:100%;
	padding:60px 0;
	background: url("https://www.prcbroker.net/_shared/images/top/callender_bg.png") no-repeat 50% 50%;
	background-size: cover;
}

#calendar h2{
	color:#ffffff;
	font-size:2.8rem;
	text-align:center;
	margin-bottom:60px;
}

#mql5content{
	display:block;
	overflow:hidden;
	width:900px;
	height:600px;
	margin:0 auto;
	background-color:#ffffff;
}

#mql5content iframe{
	width:900px;
	height:600px;
}


/* for Sp --------------------*/
@media screen and (max-width: 750px) {
	#calendar{
		padding:50px 25px;
	}

	#calendar h2{
		font-size:2.5rem;
		margin-bottom:30px;
	}

	#mql5content{
		width:100%;
		height:90vw;
	}
	
	#mql5content iframe{
		width:100%;
		height:90vw;
	}

}



/* ==========================================================
*
* Risk Warning Box
*
========================================================== */
#warning{
	display:block;
	overflow:hidden;
	width:100%;
	padding:50px 25px;
}

#warning .innerFrame{
	display:block;
	overflow:hidden;
	width:100%;
	max-width:1200px;
	margin:0 auto;
	position:relative;
}

#warning h2{
	display:inline-block;
	overflow:hidden;
	/*width:220px;*/
	line-height:125%;
	font-size:2.8rem;
	position:absolute;
	top:50%;
	left:60px;
	-webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

#warning p{
	display:block;
	overflow:hidden;
	width:calc(100% - 250px);
	line-height:155%;
	margin-left:250px;
}


/* for Sp --------------------*/
@media screen and (max-width: 750px) {

	#warning{
		padding:50px 25px;
	}

	#warning h2{
		width:100%;
		font-size:2.5rem;
		position:relative;
		top:auto;
		left:auto;
		-webkit-transform:none;
	    transform:none;
	}

	#warning p{
		display:block;
		overflow:hidden;
		width:100%;
		line-height:155%;
		margin-left:0;
	    margin-top:1em;
	}
}




/* ==========================================================
*
* Hover Setting
*
========================================================== */

.pc #titleBox a.boxBtn:hover,
.pc a.boxBtn:hover{
	/*color:#fb16a4;*/
	filter: brightness(150%);
}


.pc #newsindex a:hover{
	color:#fb16a4;
}

.pc #companyDate > .innerFrame > ul > li > a:hover{
	color:#fb16a4;
}



.pc #accoundData > dl > dt a:hover{
	/*color:#01a2e7;*/
	color:#fb16a4;
	text-decoration:none;
}

.pc #accoundData > a.prc-left:hover{
	/*color:#fb16a4;*/
	filter: brightness(150%);
}
.pc #pratformData > a.prc-left:hover{
	/*color:#fb16a4;*/
	filter: brightness(150%);
}