@charset "utf-8";

/*------------------------------------------------------------
    firstView
------------------------------------------------------------*/

.content {
	overflow: hidden;
	background: #fff;
}

.content img {
	width: 100%;
}


#aboutSec {
	padding-top: 96px;
	box-sizing: border-box;
	height: 100vh;
}

.about {
	position: relative;
	height: 100%;
}

.about h3 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: #fff;
	font-size: 20px;
	font-weight: 400;
	text-align: center;
	letter-spacing: 1.3px;
}

.about h3 span {
	font-size: 110px;
	font-weight: 100;
	letter-spacing: 1px;
	display: block;
	line-height: 1;
	margin-bottom: 7px;
}

.parallaxBox,
.parallaxBox2 {
	position: relative;
	overflow: hidden;
}

.parallaxCon {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.parallaxBox2 .parallaxCon {
	bottom: 0;
	top: auto;
}

.conItem {
	background: #F4F2E9;
	text-align: center;
	letter-spacing: 1.2px;
    padding: 80px 0 0;
}

.conItem h3 {
    width: 50%;
    margin: 0 auto 30px;
}

.info {
	font-size: 17px;
	line-height: 2.2;
	margin-bottom: 25px;
}

.info span {
	font-size: 12px;
}

.conItemBtm {
	font-size: 12px;
	letter-spacing: 0.5px;
	line-height: 2.2;
    padding-top: 25px;
}

.zambia {
	background-color: #F4F2E9;
	padding-top: 70px;
	padding-bottom: 477px;
}

.zambiaCon {
	position: relative;
}

.zambiaMapWrap {
	position: relative;
	margin-top: -100px;
	left: 0;
	flex: 0 0 100%;
	transition-delay: .8s;
}

.zambiaItemBox {
	position: relative;
	z-index: 1;
}

.zambiaMapWrap img {
	width: 100%;
/*    max-width: 1400px;*/
}

.zambiaMapBox {
	position: absolute;
	left: 12.4%;
	top: 65.3%;
	width: 4.2%;
	transform: translateX(-50%);
	left: 15.2%; /* add */
    top: 65.8%; /* add */
    width: 3.9%; /* add */
}

.zambiaMap {
	text-align: center;
	font-size: 9px;
	font-weight: 300;
	color: #BE0025;
	margin-bottom: -10px;
	transition-delay: .5s;
}

.zambiaMap.fadeInAnim {
	-webkit-transform: translateY(0px);
	transform: translateY(0px);
}

.zambiaMap img {
	display: block;
	margin: 0 auto;
}

.zambiaMap p {
	padding-top: 5px;
	margin: 0 -50px;
}

.zambiaMapNum {
	width: 348px;
	margin-left: -25px;
	position: absolute;
	transition-delay: .5s;
	top: 45px; /* add */
    left: 15px; /* add */
}

.zambiaMapNum > img {
	width: 100%;
	display: block;
}

.zambiaMapCon {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 8%;
	text-align: center;
}

.zambiaMapCon p {
	font-size: 14px;
	font-weight: 500;
	color: #BE0025;
	padding-top: 41px;
	letter-spacing: .5px;
	margin-bottom: 18px;
}

.zambiaMapGirl {
	width: 110px;
	margin: auto;
	border-bottom: 1px solid rgba(222,45,83,.5);
	padding-bottom: 11px;
}

.zambiaMapGirl span {
	display: block;
	width: 25px;
	margin: 0 auto;
}

.zambiaNumBox {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.zambiaNumBox > span {
	color: #BE0025;
	font-size: 14px;
	position: relative;
	left: -6px;
	top: -6px;
}

.zambiaNumText {
	text-align: center;
}

.zambiaNumText span {
	font-size: 110px;
	line-height: 1;
	color: #BE0025;
	display: inline-block;
	max-width: 68px;
	min-width: 27px;
	height: 110px;
	overflow: hidden;
}

.scaleY0 {
	transform: scaleY(0);
	transform-origin: center bottom;
}

.zambiaNumText span:nth-child(2) {
	margin-left: -13px;
}

.zambiaItemWrap {
	display: flex;
	flex-wrap: nowrap;
	overflow: hidden;
	align-items: flex-start;
	margin-bottom: -54px;
	max-width: 1500px;  /* add */
    margin: 0 auto;  /* add */
}

.zamItemWrap {
	transform: translateX(-100%);
	flex: 0 0 100%;
}

.zamItem {
	display: flex;
	width: 90%;
	margin: 0 auto;
	padding-top: 70px;
	max-width: 1215px;
}

.zamLeft {
	flex: 0 0 45.5%;
	position: relative;
	max-width: 490px;
    margin-right: 5.8vw; /* add */
}

.leftPic1 {
	width: 490px;
	border-radius: 10px;
	width: 100%; /* add */
    max-width: 490px; /* add */
}

.leftPic2 {
	width: 185px;
	border-radius: 11px;
	right: 0;
	position: absolute;
/*	top: 45%;*/
	overflow: hidden;
	margin-top: 50px; /* add */
    width: 100%; /* add */
    max-width: 290px; /* add */
    right: -13%; /* add */
}

.zamRight {
	flex: 1;
	padding: 71px 35px;
	box-sizing: border-box;
	padding: 71px 35px 71px 0; /* add */
}

.zamRight h3 {
	width: 69%;
}

.zamRiTitle {
	font-size: 24px;
	font-weight: 500;
	color: #BE0025;
	letter-spacing: 1px;
	margin-bottom: 45px;
}

.zamRiInfo {
	font-size: 15px;
	font-weight: 300;
	padding-left: 52px;
	letter-spacing: 0.6px;
	padding-right: 40px;
	line-height: 1.9;
}

.zamRiInfo p {
	margin-bottom: 36px;
}

.zamRiInfo span {
	font-weight: 500;
	color: #BE0025;
	padding: 1px 3px 3px;
}


.zamItem:nth-child(2) {
	flex-direction: row-reverse;
}

.zamItem:nth-child(2) .zamRight h3 {
	width: 81.5%;
}

.zamItem:nth-child(2) .zamLeft {
	flex: 0 0 47.5%;
}

.zamItem:nth-child(2) .leftPic1 {
	width: 500px;
}

.zamItem:nth-child(2) .zamRight {
	padding: 2px 53px;
}

.zambiaItemBox {
	margin-bottom: 140px;
}

.aboutImg {
	height: 100vh;
}

.zamRiInfoAnima {
	position: relative;
	opacity: 1;
	-webkit-transform: translateY(0px);
	transform: translateY(0px);
}

.zamRiInfoAnima1 {
	margin-top: -36px;
}

.zamRiInfoAnima.fadeInAnim  .zamRiInfoAnimaHideen {
	width: 0;
	transition: width 1.8s ease .8s;
	position: absolute;
	left: 0;
	top: 0;
	color: transparent !important;
	overflow: hidden;
}

.zamRiInfoAnimaHideen span {
	background: rgba(222,45,83,0.1);
	color: transparent !important;
}

.zamRiInfoAnima.fadeInAnim.visible .zamRiInfoAnimaHideen {
	width: 100%;
}

/* ipad */
.ipad .scroll a:hover::after {
	border: none;
	border-top: 1px solid #BE0025;
	border-left: 1px solid #BE0025;
}

.ipad .aboutImg {
	height: auto;
}

.ipad .zambiaMapNum {
	margin-left: -80px;
}

.ipad .zambiaMapWrap {
	margin-top: -40px;
    left: -25px;
}

.ipad .snsInfoBox {
	width: 94.6%;
}

.ipad .leftPic2 {
    max-width: 270px;
}

/* add */
.navInnMenu .navActive a::after {
	width: 78%;
}
@media all and (min-width: 0) and (max-width: 767px) {
	.navInnMenu .navActive a::after {
		width: 32%;
	}
}

.pagePath {
	background: #F4F2E9;
	padding: 20px 74px;
}

.pagePath li,
.pagePath li a {
	display: inline-block;
	color: #BE0025;
	font-size: 11px;
	font-weight: 300;
	letter-spacing: 0.5px;
}

.pagePath li a {
	display: block;
}

.ipad #aboutSec {
	height: auto;
}


@media all and (min-width: 0) and (max-width: 767px) {

	.scroll,
	.firstBox h1 {
		transition-delay: 1.8s;
	}

	.scroll a:hover::after {
		border: none;
		border-top: 1px solid #BE0025;
		border-left: 1px solid #BE0025;
	}

	.about h3 {
		font-size: 18px;
	}

	.about h3 span {
		font-size: 80px;
	}
    
    .conItem {
        padding: 65px 0 0;
    }
    
    .conItem h3 {
        width: 90%;
        margin: 0 auto 15px;
    }
    
    .info {
		font-size: 16px;
		line-height: 1.8;
		margin-bottom: 25px;
		letter-spacing: 0.2px;
	}

	.info span {
		font-size: 12px;
	}
    
    .conItemBtm {
	    font-size: 11px;
        padding-top: 0;
    }

	.zambia {
		padding-top: 70px;
		/* padding-bottom: 100px; */
		padding-bottom: 490px;
	}

	.zamItem,.zamItem:nth-child(2) {
		width: 88%;
		padding-top: 0;
		flex-direction: column-reverse;
		margin-bottom: 60px;
	}

	.zamItem:last-child {
		margin-bottom: 0;
	}

	.zamRight,.zamItem:nth-child(2) .zamRight {
		padding: 0;
	}

	.zamRight h3 {
		width: 92%;
		margin: 0 auto 5px;
	}

	.zamRiTitle {
		font-size: 20px;
		margin-bottom: 25px;
	}

	.zamRiInfo {
		padding: 0;
		letter-spacing: 0.7px;
	}

	.zamRiInfo p {
		margin-bottom: -2px;
	}

	.zamRiInfoAnima1 {
		margin-top: 0;
	}

	.leftPic1 {
		width: 240px;
		margin-left: 24px;
	}

	.zamLeft,.zamItem:nth-child(2) .zamLeft {
		flex: 1;
	}

	.zamItem:nth-child(2) .zamRight h3 {
		width: auto;
	}

	.zamItem:nth-child(2)  .zamRiTitle {
		letter-spacing: 0;
		margin-right: -13px;
		line-height: 1.6;
	}

	.zamRiInfo span {
		letter-spacing: 0.5px;
	}

	.zamItem:nth-child(2) .zamRight {
		margin-bottom: 34px;
	}

	.zamItem:nth-child(2) .leftPic1 {
		width: 258px;
		margin: 0 auto;
	}

	.zambiaItemBox {
		margin-bottom: 77px;
	}

	/* map */

	.zamItemWrap .leftPic2 {
		display: none;
	}
    
    .leftPic2 {
	    margin-top: 25px; /* add */
        max-width: 240px; /* add */
        right: 7%; /* add */
    }
    
    .leftPic3 {
	border-radius: 11px;
	position: absolute;
	overflow: hidden;
	margin-top: 175px; /* add */
    width: 100%; /* add */
    max-width: 210px; /* add */
    right: 38%; /* add */
}

	.zambiaMapBox {
		left: 26%;
		top: 80.5%;
		width: 15.8%;
	}

	.zambiaMap {
		margin-bottom: -44px;
	}

	.zambiaItemWrap {
		overflow: visible;
		margin-bottom: 153px;
	}

	.zambiaMapWrap {
		margin-top: 85px;
	}

	.zambiaMapNum {
		width: 279px;
		margin-left: 30px;
        top: 35px;
        left:-5px;
	}

	.zambiaMapCon p {
		font-size: 10px;
		padding-top: 33px;
		letter-spacing: 0.3px;
		margin-bottom: 18px;
	}

	.zambiaMapGirl span {
		width: 20px;
	}

	.zambiaMapGirl {
		width: 88px;
		padding-bottom: 7px;
	}

	.zambiaNumText span {
		font-size: 88px;
		max-width: 52px;
		min-width: 20px;
		height: 88px;
	}

	.zambiaNumBox > span {
		font-size: 10px;
		left: -9px;
		top: -6px;
	}

	.zamItem:nth-child(1) .zamLeft {
		position: absolute;
		top: 43.7%;
	}

	.zamItem:nth-child(2) {
		padding-top: 380px;
	}

	.zamItemWrap .zamLeft {
		position: absolute;
		top: 46%;
	}

	.aboutImg {
		height: 100%;
	}

	#aboutSec {
		padding-top: 60px;
		height: auto;
	}

	.about {
		height: auto;
	}

}

@media all and (min-width: 341px) and (max-width: 374px) {
	.zambiaMapWrap {
		margin-top: 200px;
	}
}

@media all and (min-width: 320px) and (max-width: 341px) {
	.zambiaMapWrap {
		margin-top: 300px;
	}
}

@media all and (min-width: 0) and (max-width: 320px) {

	.zamRiTitle {
		font-size: 19px;
	}

}

@media all and (min-width: 768px) and (max-width: 1365px) {
	.zambiaMapNum {
		top: 125px; /* add */
    	left: -25px; /* add */
	}
	
}
@media all and (max-width: 350px) {
	.zambiaMapNum {
		width: 255px;
	}
}