@import url('https://fonts.googleapis.com/css2?family=Yesteryear&display=swap');

#ourstory {
	padding-bottom:70px;
}
@media screen and (max-width: 768px) { 
	#ourstory {
		padding-bottom:5px;
	}
}

/* Our Story 비주얼 */
#ourstory .visual {
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	position:relative;
	max-width:1920px;
	height:800px;
	margin:0 auto;
}
#ourstory .visual .img {
	position:absolute; 
	top:0; 
	left:0;
	width:100%;
	height:inherit;
	background:url('../images/ourstory/ourstory_visual.jpg') no-repeat center/cover;
}
#ourstory .visual .text {
	text-align:center;
}
#ourstory .visual .text p {
	padding-bottom:15px;
	color:#f86e1a;
	font-family:'Yesteryear';
	font-size:30px;
	letter-spacing:0.9px;
}
#ourstory .visual .text h2 {
	color:#fff;
	font-size:54px;
	font-weight:700;
	letter-spacing:-1.08px;
}
#ourstory .visual .text h2 img {
	margin-right:20px;
	vertical-align:middle;
}
#ourstory .visual .text h2 br {
	display:none;
}
#ourstory .visual .scroll {
	position:absolute;
	bottom:50px;
	left:50%;
	width:24px;
	height:24px;
	margin-left:-12px;
	background:url('../images/ourstory/ourstory_visual_arrow.png') no-repeat center/cover;
	cursor:pointer;
}
@media screen and (max-width: 1024px) { 
	#ourstory .visual {
		height:650px;
	}
	#ourstory .visual .text p {
		font-size:25px;
	}
	#ourstory .visual .text h2 {
		font-size:44px;
	}
}
@media screen and (max-width: 768px) { 
	#ourstory .visual {
		height:640px;
	}
	#ourstory .visual .img {
		left:0;
		width:100%;
		margin:0;
		background-image:url('../images/ourstory/ourstory_visual_m.jpg');
	}
	#ourstory .visual .text p {
		padding-bottom:20px;
		font-size:24px;
		letter-spacing:0.72px;
	}
	#ourstory .visual .text h2 {
		font-size:32px;
		letter-spacing:-0.64px;
	}
	#ourstory .visual .text h2 img {
		width:109px;
		margin:0 0 10px;
	}
	#ourstory .visual .text h2 br {
		display:block;
	}
	#ourstory .visual .scroll {
		bottom:32px;
	}
}

/* Our Story 「생명의 삶」의 시작 */
#ourstory .intro {
	padding:85px 0;
	background:#fbf8f1;
}
#ourstory .intro .wrap_inner {
	display:flex;
}
#ourstory .intro .title {
	flex:0 0 50%;
}
#ourstory .intro .title span {
	color: #f86e1a;
	font-family:'Yesteryear';
	font-size: 20px;
	letter-spacing: 0.6px;
}
#ourstory .intro .title h3 {
	font-size:32px;
	font-weight:800;
}
#ourstory .intro .sub {
	flex:0 0 50%;
}
#ourstory .intro .sub p {
	font-size:16px;
	/*line-height:28px;*/
	line-height:35px;
}
#ourstory .intro .sub p + p {
	padding-top:20px;
}
@media screen and (max-width: 1024px) { 
	#ourstory .intro .title {
		flex:0 0 270px;
	}
	#ourstory .intro .title span {
		display:inline-block;
		padding-bottom:8px;
		font-size:18px;
	}
	#ourstory .intro .title h3 {
		font-size:26px;
	}
	#ourstory .intro .sub {
		flex:1 1 100%;
	}
	#ourstory .intro .sub p {
		font-size:15px;
		/*line-height:26px;*/
		line-height:33px;
	}
	#ourstory .intro .sub p + p {
		padding-top:15px;
	}
}
@media screen and (max-width: 768px) { 
	#ourstory .intro {
		padding:60px 0;
	}
	#ourstory .intro .wrap_inner {
		display:block;
	}
	#ourstory .intro .title {
		padding-bottom:28px;
	}
	#ourstory .intro .title span {
		font-size:16px;
	}
	#ourstory .intro .title h3 {
		font-size:22px;
	}

}

/* Our Story 생명의 삶을 만드는 사람들 */
#ourstory .qna_list {
	padding:80px 0 0;
}
#ourstory .qna_list h3.title {
	padding-bottom:40px;
	font-size:32px;
	font-weight:800;
}
#ourstory .qna_list .box {
	position:relative;
	display:flex;
	width:100%;
}
#ourstory .qna_list .box + .box {
	margin-top:80px;
}
#ourstory .qna_list .box .img_wrap.left {
	margin-right:90px;
}
#ourstory .qna_list .box .img_wrap.right {
	margin-left:90px;
}
#ourstory .qna_list .box .img_wrap .img {
	overflow:hidden;
	border-radius:8px;
	background:no-repeat center/cover;
}
#ourstory .qna_list .box .img_wrap .img01 {
	width:550px;
	height:640px;
	background-image:url('../images/ourstory/qna_img01.png');
}
#ourstory .qna_list .box .img_wrap .img02 {
	width:550px;
	height:380px;
	background-image:url('../images/ourstory/qna_img02.png');
}
#ourstory .qna_list .box .img_wrap .img03 {
	width:100%;
	height:528px;
	background-image:url('../images/ourstory/qna_img03.png');
}
#ourstory .qna_list .box .img_wrap .img04 {
	width:65%;
	height:380px;
	background-image:url('../images/ourstory/qna_img04.png');
}
#ourstory .qna_list .box .img_wrap .img05 {
	width:32.5%;
	height:380px;
	background-image:url('../images/ourstory/qna_img05.png');
}
#ourstory .qna_list .box .img_wrap .img06 {
	width:550px;
	height:380px;
	background-image:url('../images/ourstory/qna_img06.png');
}
#ourstory .qna_list .box .img_wrap .img07 {
	width:550px;
	height:849px;
	background-image:url('../images/ourstory/qna_img07.png');
}
#ourstory .qna_list .box .img_wrap .img08 {
	width:65%;
	height:380px;
	background-image:url('../images/ourstory/qna_img08.png');
}
#ourstory .qna_list .box .img_wrap .img09 {
	width:32.5%;
	height:380px;
	background-image:url('../images/ourstory/qna_img09.png');
}
#ourstory .qna_list .box .text {
	position:relative;
	flex:1 1 100%;
	padding-top:60px;
}
#ourstory .qna_list .box .text.line::after {
	position:absolute; 
	bottom:0; 
	left:0;
	width:100%; 
	height:2px;
	border-radius:4px;
	background:#e6e6e6;
	content:'';
}
#ourstory .qna_list .box .text h4 {
	margin-bottom:40px;
	font-size:24px;
	font-weight:800;
	line-height:34px;
}
#ourstory .qna_list .box .text h4::before {
	display:flex;
	align-items: center;
	justify-content: center;
	width:30px; 
	height:30px;
	margin-bottom:12px;
	border:2px solid #f86e1a;
	border-radius:50%;
	color:#f86e1a;
	font-size:14px;
	font-weight:800;
	content:'Q';
}
#ourstory .qna_list .box .text h4::after {
	display:block;
	width:23px; 
	height:4px;
	margin-top:20px;
	border-radius:4px;
	background:#f86e1a;
	content:'';
}
#ourstory .qna_list .box .text .info * {
	font-size:16px;
	/*line-height:28px;*/
	line-height:35px;
}
#ourstory .qna_list .box .text .info p + p {
	padding-top:20px;
}
#ourstory .qna_list .box .text .info p .pt {
	color:#f86e1a;
}
#ourstory .qna_list .box .text .info ul {
	margin-top:-15px
}
#ourstory .qna_list .box .text .info ul li {
	padding:15px 0;
	display:flex;
}
#ourstory .qna_list .box .text .info ul li + li {
	border-top:2px solid #e6e6e6;
}
#ourstory .qna_list .box .text .info ul li span {
	flex:0 0 76px;
	color:#666;
}
#ourstory .qna_list .box .text .info ul li p strong {
	display:block;
	font-weight:800;
}
#ourstory .qna_list .box.full {
	display:block;
	margin:80px 0;
	text-align:center;
}
#ourstory .qna_list .box.full .text {
	position:absolute; 
	top:50%;
	left:0;
	width:100%;
	padding-top:0;
	-ms-transform: translate(0,-50%);
	-webkit-transform: translate(0,-50%);
	transform: translate(0,-50%);
}
#ourstory .qna_list .box.full .text h4 {
	color:#fff;
}
#ourstory .qna_list .box.full .text h4::before {
	margin:0 auto 12px;
}
#ourstory .qna_list .box.full .text h4::after {
	display:none;
}
#ourstory .qna_list .box.full .text .info p {
	color:#fff;
}
#ourstory .qna_list .box.full .img_wrap .img {
	border-radius:0;
}
#ourstory .qna_list .box.normal_full {
	display:block;
}
#ourstory .qna_list .box.normal_full .img_wrap {
	display:flex;
	justify-content: space-between;
}
#ourstory .qna_list .box.normal_full .text {
	padding-bottom:80px;
}
@media screen and (max-width: 1024px) { 
	#ourstory .qna_list .qna_list h3.title {
		font-size:26px;
	}
	#ourstory .qna_list .box .img_wrap.left {
		margin-right:45px;
	}
	#ourstory .qna_list .box .img_wrap.right {
		margin-left:45px;
	}
	#ourstory .qna_list .box .img_wrap {
		flex:0 0 50%;
	}
	#ourstory .qna_list .box .img_wrap .img {
		width:100% !important;
	}
	#ourstory .qna_list .box .text h4 {
		font-size:21px;
		line-height:31px;
	}
	#ourstory .qna_list .box .text .info * {
		font-size:15px;
		/*line-height:28px;*/
		line-height:35px;
	}
	#ourstory .qna_list .box.normal_full .img_wrap .img {
		flex:0 0 49%;
	}
}
@media screen and (max-width: 768px) { 
	#ourstory .qna_list {
		padding:56px 0 0;
	}
	#ourstory .qna_list h3.title {
		padding-bottom:25px;
		font-size:22px;
	}
	#ourstory .qna_list .box {
		flex-direction:column;
	}
	#ourstory .qna_list .box + .box {
		margin-top:0;
	}
	#ourstory .qna_list .box .img_wrap {
		margin:0 !important;
	}
	#ourstory .qna_list .box .img_wrap .img01 {
		height:382px;
	}
	#ourstory .qna_list .box .img_wrap .img02 {
		height:227px;
	}
	#ourstory .qna_list .box .img_wrap .img03 {
		height:610px;
	}
	#ourstory .qna_list .box .img_wrap .img04 {
		height:160px;
	}
	#ourstory .qna_list .box .img_wrap .img05 {
		height:160px;
	}
	#ourstory .qna_list .box .img_wrap .img06 {
		height:227px;
	}
	#ourstory .qna_list .box .img_wrap .img07 {
		height:507px;
	}
	#ourstory .qna_list .box .img_wrap .img08 {
		height:160px;
	}
	#ourstory .qna_list .box .img_wrap .img09 {
		height:160px;
	}
	#ourstory .qna_list .box .text {
		padding:35px 0 !important;
	}
	#ourstory .qna_list .box .text h4 {
		margin-bottom:25px;
		font-size:18px;
		line-height:28px;
	}
	#ourstory .qna_list .box .text h4::before {
		width:32px;
		height:32px;
		font-size:15px;
	}
	#ourstory .qna_list .box .text .info p + p {
		padding-top:13px;
	}
	#ourstory .qna_list .box .text .info ul li {
		flex-direction: column;
	}
	#ourstory .qna_list .box .text .info ul li span {
		flex:1;
		padding-bottom:4px;
	}
	#ourstory .qna_list .box.full {
		margin:60px 0;
	}
	#ourstory .qna_list .box.full .text {
		padding:0 15px !important;
	}
	#ourstory .qna_list .box.full .text h4 br {
		display:none;
	}
	#ourstory .qna_list .box.full .text .info p br {
		display:none;
	}
	#ourstory .qna_list .box.normal_full .text {
		margin-bottom:35px;
	}
	#ourstory .qna_list .box.reverse .text {
		order:2;
	}
	#ourstory .qna_list .box.reverse .img_wrap {
		order:1;
	}
}