.sectionjoin{
	width:62.5%;
	margin-left:auto;
	margin-right:auto;
	font-size:16px;
	line-height:30px;
}
.joinpart3Tit{
	font-size:20px;
	font-weight:900;
	line-height:34px;
}
 @media(max-width:768px) {
 .joinpart3Tit{
	font-size:16px;
}
}
.part2{
	width:100%;
	height:calc(100vh - 96px);
	text-align:left;	
	background-image:url(../images/jioninpart2.jpg);
    background-size: 100% auto;
    color: white;
    background-position: center center;
}
.part2 .titlePart{
	color:white;
}
.part2Text{
	position:absolute;
	left:20%;
	width:30%;
	font-size:16px;
	line-height:30px;
}
.joininpart1 {
    width: 25%;
    display: inline-block;
}
.marginRight{
	margin-right:12%;
}
.joininpart1 img{
	max-width:100%;
}
.joininpart4{
	width:100%;
	height:calc(100vh - 90px);
	background-image:url(../images/jioninpart4.jpg);
	background-size:100% 100%;
	text-align:center;
}
.joininpart4Text{
	width:40%;	
}
 @media(max-width:1600px) {
 .part2Text{
	width:40%;
	    left: 10%;
}
}
 @media(max-width:1440px) {
 .sectionjoin{
	width:80%;
}
.marginRight{
		margin-right:10%;
	}
		.part2{
	width:100%;
}
.part2Text{
		left:10%;
		width:60%;
	}
 }
  @media(max-width:1024px) {
  .sectionjoin{
	font-size:14px;
	line-height:24px;
}
.part2Text{
	font-size:14px;
	line-height:24px;
	    left: 5%;
}
  }
 @media(max-width:768px) {
	 .sectionjoin{
		width:90%;
		font-size:14px;
		line-height:20px;
	}
	.part2{
	background-color:black;
	background-image:url(../images/jioninpart2.jpg);
	background-size:100% auto;
	background-position:center;
	background-repeat:no-repeat;
	width:100%;height:100%;
}
	.part2Text{
		left:5%;
		right:5%;
		width:90%;
		font-size:14px;
		line-height:20px;
		position:relative;
	}
	.joininpart4{
		height:auto;
		padding-bottom:30px;
		background-color:#e0dee3;
		background-position:center bottom;
		background-repeat:no-repeat;
		background-size:100% auto;
	}
}
.canvas_box{
	height:100%;
}
.halfpart{
	width:50%;background-color:#f0f0f0;height:70%;position:relative;
}
.halfpartL{
	width:50%;background-color:#fff;height:100%;position:relative;
}
@media(min-width:769px) {
	.halfpart{
	float:left;
}
.halfpartL{
	float:left;
}
}
.halfpartL img{
	    max-height: 100%;height:100%;
}
.halfpartLR{
	width:80%;margin:auto;
}
.textpart{
	position:absolute;left: 0;
 		top: 0;
 		bottom: 0;
 		right: 0;
 		margin: auto;
 		height:50%;width:80%;
}
.textpartL{
 		margin: auto;
 		height:100%;width:90%;
}
.halfpart img{
	width:100%;height:auto;/* float:left; */max-height:100%;
}
.joinDetailP{
	line-height:30px;
}
.code {
  width: 40%;
  clear: both;
  height: 50px;
  border-radius: 2px;
 }
  @media(max-width:1366px) {
  .code {
  height: 40px;
  }
}
  @media(max-width:1024px) {
  .halfpartLR{
	width:90%;
}
}
  @media(max-width:768px) {
.halfpart{
	width:100%;height:auto;position:relative;
}
.joinDetailP {
    line-height: 26px;
}
.condition{
	/* height:calc(100vw*1000/967 + 100vh - 60px); */
} 
.halfpartL{
	width:100%;/* height:calc(100vw*1000/967); */
}
.halfpartL img{
	   width:100%; max-height: 100%;height:auto;
}
  .halfpartLR{
	width:90%;    height: 100%;
}
.halfpartR{
	    height: 100%;
}
.mt30 {
    margin-top: 20px;
}
}
  .code pre, .code code {
    height: 100%;
    margin: 0; }
  .code code {
    padding: 20px 0 0 20px; }
  .code--small code {
    padding-top: 75px; }
  .code--left {
    float: left; }
  .code--right {
    float: right; }
  .code--wider {
    width: 60%; }
    .code--wider code {
      padding-top: 60px; }
.gu_sum3{
	width:100%;
	height:100%;
	min-height:380px;
	margin:60px auto 0px auto; 
	background:url(../images/line2.jpg) repeat-y left top;	
}
.gu_sum3 .dl1{
	width:100%;
}
.gu_sum3 .dl1 dt{
	width:20px;
	height:1px;
	left:-25px;
	position:relative;
	float:left;
}

.gu_sum3 .dl1 dt:after{
	position:absolute;
	top:11px;
	left:18px;
	width:16px;
	height:16px;
	background:#2c2074;
	border:2px solid #2c2074;
	border-radius:100%;
	content:"";
}

.gu_sum3 .dl1 dd{
	width: 90%;
    padding-top: 5px;
    line-height: 28px;
    font-size: 16px;
    padding-left: 40px;
    float: left;
}
  @media(max-width:1366px) {
  .code {
  height: 40px;
  }
  .gu_sum3{
	min-height:320px;
	margin:30px auto 0px auto; 
}
  .gu_sum3 .dl1 dd{
	width: 100%;
    padding-left: 40px;
}

}
  @media(max-width:768px) {
  .gu_sum3{
	margin:10px auto 0px auto; 
}
}
.gu_sum3 strong{
	font-size:24px;
	font-weight:normal;
}
.processIndex{
	background:#2c2074;
	width:20px;
	height:20px;
	border-radius:100%;
	color:white;
	font-size:16px;
	line-height:20px;
	margin-right:10px;
    display: inline-block;
}

.process{
	border:1px solid black;
	padding:5px;
	text-align:center;
	display: inline-block;
	font-size:16px;
}
 @media(max-width:1680px) {
 .process{
 font-size:14px;
 padding:0px;
 }
}
 @media(max-width:1600px) {
 .halfpartLR .mtb80{
 	margin-top:40px;margin-bottom:40px;
 }
	.sectionjoin{
		width:80%;
	}
	.textpart{
 		height:60%;
}
.processpart .pad120{
	padding-top:80px;
}
 }
  @media(max-width:1366px) {
  .textpart{
 		height:70%;
 		width:90%;
}
   }
  @media(max-width:1280px) {
  .sectionjoin{
		width:90%;
	}
}
   @media(max-width:1024px) {
  .gu_sum3 .dl1 dd{
    padding-left: 20px;
    line-height: 24px;
}
   }
  @media(max-width:768px) {
  .textpart{
 		height:100%;position:relative;padding-top: 30px;
}
  .gu_sum3 .dl1 dd{
    line-height: 20px;
    font-size:14px;
}
.mtb80{
 	margin-top:40px;margin-bottom:40px;
 }
 .process{
 display:block;
 }
 .processpart .pad120{
	padding-top:60px;
}
 }
.processIndex{
	margin-right:5px;
	}
	 .process{
 font-size:14px;
 padding-top:5px;
 padding-bottom:5px;
 }

.item4{
	width:24%;
}
.item3{
	width:32%;
}
.item1{
	width:98%;
}
.processpart{
	background:#f0f0f0;
}
  @media(min-width:769px) {
  .processpc{
	display:block;
}
.processmobile{
	display:none;
}
}
  @media(max-width:768px) {
 .processpart .sectionfull{
    text-align:center;height:calc(100vh - 60);
  }
  .processpc{
	display:none;height:0px;
}
.processmobile{
	display:block;
    width:90%;
}
.processtitle{
    width:90%;
    margin: auto;
}
.sectioncanvas{
	height:calc(100vw*20/16);
}
#canvas{
	    position: absolute;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
}
}