/*referFriendMain*/
.referFriendMain {
	position: relative;
}
.referFriendMain .mainPhoto {
	width: 100%;
}
.referFriendMain .mainPhoto img {
    min-height: 330px;
    object-fit: cover;
    object-position: center;
}
.referFriendMain .mainList {
	position: absolute;
	bottom: 10%;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.referFriendMain .mainList li {
	width: 166px;
}
.referFriendMain .mainList li:first-child {
	margin-right: 10px;
}
.referFriendMain .mainList li a {
	display: block;
	width: 100%;
}
/*referFriendMain*/

/*areaReferFriend*/
.areaReferFriend {
	padding: 55px 0 65px;
	background: #FFF8DD;
}
.areaReferFriend .inner {
	max-width: 1087px;
}
.areaReferFriend .areaTitle {
	margin-bottom: 59px;
}
.areaReferFriend .referList {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 34px;
}
.areaReferFriend .referList li {
	position: relative;
	width: calc(100%/3 - 15px);
	background-color: #fff;
	border-radius: 5px;
	padding: 29px 20px 23px;
}
.areaReferFriend .referList li:not(:last-child) {
	margin-right: 22px;
}
.areaReferFriend .referList li .referStep {
	position: absolute;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: flex-start;
	top: -5px;
	left: 12px;
	width: 62px;
	height: 63px;
	color: #fff;
	background: url(../images/refer-friend/area-refer-friend-photo-04.png) no-repeat top left/ 100%;
	font-size: 13px;
	padding: 1px 0;
}
.areaReferFriend .referList li .referStep .number {
    display: block;
    width: 100%;
    font-size: 27px;
    text-align: center;
    line-height: 0.9;
}
.areaReferFriend .referList li .referPhoto {
	width: 100%;
	text-align: center;
	margin-bottom: 24px;
}
.areaReferFriend .referList li .referPhoto img {
	width: 73.9%;
}
.areaReferFriend .referList li .referSub {
	text-align: center;
	color: #40536A;
} 
.areaReferFriend .referNote + .referNote {
	margin-top: 7px;
}
/*areaReferFriend*/

@media(max-width: 1080px) and (min-width: 769px) {
	.areaReferFriend .referList li {
		padding: 40px 10px 20px;
	}
}
@media(max-width: 1025px) and (min-width: 769px) {
	.areaReferFriend .referList li .referSub br {
		display: none;
	}
}
@media(max-width: 900px) and (min-width: 769px) {
	.areaReferFriend .referList li .referStep {
		width: 50px;
		height: 55px;
		font-size: 12px;
	}
	.areaReferFriend .referList li .referStep:before {
		border-left-width: 25px;
		border-right-width: 25px;
		border-bottom-width: 9px;
	}
	.areaReferFriend .referList li .referStep .number {
		font-size: 22px;
	}
}

@media(max-width: 768px) {
	.referFriendMain .mainList {
		bottom: 7.3%;
		width: 100%;
	}
	.referFriendMain .mainList li {
    	max-width: 166px;
    	width: 42.6%;
	}

	.referFriendMain .mainPhoto img {
		min-height: 290px;
	}
	.areaReferFriend {
    	padding: 30px 0 35px;
	}
	.areaReferFriend .areaTitle {
    	margin-bottom: 31px;
	}
	.areaReferFriend .referList {
		padding: 0 7px;
	    margin-bottom: 16px;
	}
	.areaReferFriend .referList li {
		width: 100%;
		max-width: 400px;
		padding: 27px 20px 44px;
		margin: 0 auto;
	}
	.areaReferFriend .referList li:not(:last-child) {
    	margin: 0 auto 21px;
	}
	.areaReferFriend .referList li .referStep:before {
		border-bottom-width: 10px;
	}
	.areaReferFriend .referList li .referPhoto img {
    	width: 67%;
	}
	.areaReferFriend .referNote {
		width: 100%;
		max-width: 400px;
		font-size: 12px;
        padding: 0 7px;
        line-height: 1.55;
        margin: 0 auto;
	}
	.areaReferFriend .referNote + .referNote {
    	margin-top: 9px;
	}
}

/* processApp */
.areaReferFriend .processApp {
    position: relative;
	margin-top: 32px;
}
.areaReferFriend .processApp .appPhoto {
    width: 100%;
}
.areaReferFriend .processApp .appbtn {
    position: absolute;
    top: 5.6%;
    right: 6.3%;
    width: 16%;
    height: 10%;
} 
.areaReferFriend .processApp .appbtn a {
    display: block;
    width: 100%;
    height: 100%;
    transition: all .3s;
}
.areaReferFriend .processApp .appbtn.appGoogleBtn {
    top: 53%;
    right: 6.1%;
    width: 16.2%;
}
@media(min-width: 769px) {
    .areaReferFriend .processApp .appbtn a:hover{
        background: rgba(255, 255, 255, 0.3);
    }
}

@media(max-width: 768px) {
    .areaReferFriend .processApp {
        width: 104.2%;
        margin-left: -2%;
		margin-top: 12px;
    }
    .areaReferFriend .processApp .appbtn {
        top: auto;
        right: auto;
        width: 39%;
        height: 9.2%;
        bottom: 2.7%;
        left: 9%;
    }
    .areaReferFriend .processApp .appbtn.appGoogleBtn {
        top: auto;
        right: auto;
        left: 51.5%;
        width: 39.3%;
    }
}
/* processApp */