@charset "UTF-8";

/* CSS Document */

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@font-face {
    font-family: 'Notosans-R';
    src: url('../fonts/NotoSansKR-Regular.eot');
    src: url('../fonts/NotoSansKR-Regular.eot?#iefix') format('embedded-opentype');
	src: local('☺'), url('../fonts/NotoSansKR-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* CSS Document */
@font-face {
    font-family: 'Notosans-B';
    src: url('../fonts/NotoSansKR-Bold.eot');
    src: url('../fonts/NotoSansKR-Bold.eot?#iefix') format('embedded-opentype');
	src: local('☺'), url('../fonts/NotoSansKR-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/** bootstrap **/
.container {margin-right: auto;margin-left: auto;padding-left:0;padding-right:0;}
.row {margin-left: -15px;margin-right: -15px;}
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
	float: left;position:relative;min-height: 1px;padding-left: 15px;padding-right: 15px;
}

.clearfix:before,
.clearfix:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after {
	content: " ";display: table;
}
.clearfix:after,
.container:after,
.container-fluid:after,
.row:after {
	clear: both;
}

.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {width:100%;margin-bottom: 15px;}
/** E:bootstrap **/


/** 공통 **/
.hide {text-indent: -9999px; overflow: hidden; font-size: 0; color: transparent;}

#objectstory_wrap {padding-top:92px;padding-bottom:62px}
/* sec_top */
.foundbf_title {font-size:15px; font-weight:normal; background-color:#c17824;width:100%;color:#ffffff; padding:18px;}
.foundbf_title .title_sub02 {position:absolute; right:20px; margin-top:-12px; text-align: right; width: 50%;}

.sec_top > .container {padding-top: 100px; margin: 0 auto;}
.sec_top > .container h1 {
	width: 348px;
	height: 69px;
	margin: 0 auto;
	background: url("../img/objectstory/txt_sec01_h1.png") no-repeat center 0;
}
.sec_top > .container p {
	width: 579px;
	height: 83px;
	margin: 0 auto;
	background: url("../img/objectstory/txt_sec01_h1_sub.png") no-repeat center 0;
}
.sec_top > .visual_area {position: relative; height: 487px; background-color: #f8f0e2;}
.sec_top > .visual_area .left {
	position: absolute;
	left: 0;
	width: 56%;
	height: 487px;
	background: url("../img/objectstory/bg_visual.jpg") no-repeat top right;
	background-size: cover;
}
.sec_top > .visual_area .right {
	position: absolute;
	right: 0;
	top: 120px;
	padding-left: 46px;
	width: 44%;
}
.sec_top > .visual_area .txt {
	width: 300px;
	font-size: 18px;
	text-align: justify;
	line-height: 33px;
}
.sec_top > .visual_area .txt > h2 {
	width: 207px;
	height: 103px;
	background: url("../img/objectstory/txt_sec01_h2.png") no-repeat;
}
.sec_top > .visual_area .txt > span {
	display: inline-block;
	padding-bottom: 22px;
	font-family: 'Notosans-R', sans-serif;
	font-size: 18px;
	color: #333;
}
.sec_top > .visual_area .video {position: absolute;left: 0; top: 0; width: 100%; height: 100%;}
.sec_top > .visual_area .btn_play {
	display: block;
	width: 168px;
	height: 58px;
	color: #fff;
	line-height: 58px;
	text-align: center;
	font-family: 'Notosans-B', sans-serif;
	font-size: 20px;
	background: #553f24;
	border-radius: 29px;
}
.sec_top > .visual_area .btn_play > span {
	display: inline-block;
	width: 14px;
	height: 17px;
	margin-right: 16px;
	background: url("../img/objectstory/ico_arrow.png") no-repeat;
}
.sec_top > .popup_movie {display: none;}
.sec_top > .popup_movie.popup_on {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 100;
	display: block;
	background: rgba(0, 0, 0, 0.9);
}
.sec_top > .popup_movie .container {
	position: relative;
	top: 50%;
	margin: -280px auto 0;
	max-width: 1000px;
}
.sec_top > .popup_movie .con {
	position: relative;
	padding-top: 56.25%;
}
.sec_top > .popup_movie .video {
	position: absolute;
	left: 0; top: 0; width: 100%; height: 100%;
}
.sec_top #popup_close {
	position: absolute;
	right: 12px;
	top: -10%;
	width: 45px;
	height: 45px;
	text-indent: -9999px;
	overflow: hidden;
	cursor: pointer;
	background: url("../img/objectstory/btn_close.png") no-repeat center;
}
.sec_top .message {display: none;	font-size: 18px; color: #fff;}

/* sec_02 */
.sec_02 > .container {position: relative;	padding: 114px 0 95px; max-width: 1150px; margin: 0 auto;}
.sec_02 > .container > h2 {
	width: 551px;
	height: 63px;
	background: url("../img/objectstory/txt_sec02_h2.png") no-repeat;
}
.sec_02 > .container > p {
	width: 826px;
	height: 110px;
	background: url("../img/objectstory/txt_sec02_h2_sub.png") no-repeat;
}
.sec_02 .content_box {position: relative;	margin-bottom: 54px; text-align: left; }
.sec_02 .content_box .txt {
	position: absolute;
	right: 0;
	top: 96px;
	z-index: 10;
	width: 420px;
	height: 339px;
	padding: 39px 0 0 34px;
	box-shadow: -15px -8px 20px -15px rgba(0,0,0,.1);
	background: #fff;
}
.sec_02 .content_box .txt > h3 {
	display: inline-block;
	font-family: 'Notosans-B';
	font-size: 26px;
	line-height: 1;
	color: #343434;
}
.sec_02 .content_box .txt > h3.type2 {display: block; padding-bottom: 12px;}
.sec_02 .content_box .txt > span {font-size: 18px; color: #9e3617; line-height: 1; font-family: 'Notosans-R', sans-serif; margin-top: 15px; display: block; }
.sec_02 .content_box .txt > span:before {
	content: "";
	display: inline-block;
	width: 2px;
	height: 15px;
	margin: 0 10px 0 0;
	background: #9e3617;
}
.sec_02 .content_box .txt > h3.type2 + span:before {margin: 0 10px 0 0;}
.sec_02 .content_box .txt > p {padding-top: 22px; font-family: 'Notosans-R', sans-serif; font-size: 16px; color: #555; word-break: keep-all; }
.sec_02 > .txt_area {
	height: 482px;
	padding: 84px 0 11px;
	background: #ffdbb8 url("../img/objectstory/img_article.png") no-repeat center bottom;
}
.sec_02 > .txt_area .container {max-width: 1000px; margin: 0 auto;}
.sec_02 > .txt_area > .container > p {
	width: 927px;
	height: 84px;
	margin: 0 auto;
	background: url("../img/objectstory/txt_sec03_p.png") no-repeat center 0;
}
/* sec_03 */
.sec_03 > .container {max-width: 1000px; padding: 84px 0 119px; margin: 0 auto;}
.sec_03 > .container > h2 {
	width: 730px;
	height: 58px;
	margin: 0 auto;
	background: url("../img/objectstory/txt_sec04_h2.png") no-repeat center 0;
}
.sec_03 > .container > p {font-family: 'Notosans-B'; font-size: 20px; color: #7e562f; text-align: center;}
.sec_03 > .container > .btn_area { padding: 50px 0 40px 0; }
.sec_03 > .container > .btn_area > a {
	display: block;
	width: 385px;
	height: 67px;
	line-height: 67px;
	margin: 0 auto;
	margin-bottom: 40px;
	text-align: center;
	background-color: #b06a2e;
	color: #fff;
	font-size: 24px;
	font-weight: 500;
}
.sec_03 > .container > .btn_area > a:hover { background-color: #ffa200; }
.sec_03 > .container > .btn_area > a.btn_join_object { background: url("../img/objectstory/btn_giving.jpg") no-repeat; }
.sec_03 > .container > .btn_area > a.btn_join_object2 { background: url("../img/objectstory/btn_giving2.jpg") no-repeat; }
.sec_03 .banner > li {
	float: left;
	width: 48.4%;
	height: 102px;
	border: 1px solid #999;
	background: url("../img/objectstory/img_banner_1.png") no-repeat;
}
.sec_03 .banner > li + li {
	float: right;
	background: url("../img/objectstory/img_banner_2.png") no-repeat;
}
.sec_03 .banner > li > a {
	display: block;
	font-family: 'Notosans-R', sans-serif;
	font-size: 18px;
	color: #666;
	line-height: 102px;
	text-indent: 31%;
}
.sec_03 .banner > li strong {font-family: 'Notosans-R', sans-serif; font-size: 18px; color: #333; font-weight: normal;}
.sec_03 .banner > li strong:before {
	content: "";
	display: inline-block;
	width: 2px;
	height: 15px;
	margin: 0 12px;
	background: #666;
}
.sec_03 .banner > li strong:after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 11px;
	margin-left: 15px;
	background: url("../img/objectstory/ico_arrow2.png") no-repeat;
}

.tab button { width: 33.333% !important; }

/* IE8 전용 */
@media \0screen {
	.sec_top > .popup_movie.popup_on {
		position: absolute; background: url("../img/objectstory/bg_black.png");	}
	.sec_top .message {display: block;}
}

@media only screen and (min-width:1px) and (max-width:999px) {
	
	.sec_top > .visual_area .video {position: absolute;left: 0; top: 0; width: 100%; height: 100%;}
	
  #objectstory_wrap {padding-top:52px}
	/* sec_top */
  .foundbf_title {z-index:99; position:fixed; font-size:12px; padding: 6px 4px 2px; font-family: dodum}
  .foundbf_title .title_sub02 {right:10px; margin-top:0px;}
  .foundbf_title .title_sub02 .mobile_out {position: absolute; left: -3000%;}
	.sec_top > .container {padding: 70px 20px 0;}
	.sec_top > .container h1 {
		width: 297px;
		max-width: 100%;
		height: 39px;
		margin-bottom: 20px;
		background: url("../img/objectstory/m_txt_sec01_h1.png") no-repeat center 0;
		background-size: contain;
	}
	.sec_top > .container p {
		width: 239px;
		height: 50px;
		margin-bottom: 30px;
		background: url("../img/objectstory/m_txt_sec01_h1_sub.png") no-repeat center 0;
		background-size: contain;
	}
	.sec_top > .visual_area {height: auto;}
	/*.sec_top > .visual_area .left {
		position: static;
		width: 100%;
		height: 0;
		padding-top: 51.6666%;
		background: url("../img/objectstory/m_bg_visual.jpg") no-repeat;
		background-size: cover;
	}
	*/
	.sec_top > .visual_area .left { 
		position: relative;
		width: 100%;
		height: 0;
		padding-top: 30px;
		padding-bottom: 46.25%;
		overflow: hidden;
	}
	.sec_top > .visual_area .right {
		position: static;
		width: 100%;
		padding: 30px 20px;
	}
	.sec_top > .visual_area .txt {width: 100%; font-size: 15px; text-align: center;}
	.sec_top > .visual_area .txt > h2 {
		width: 282px;
		height: 26px;
		margin: 0 auto 23px;
		background: url("../img/objectstory/m_txt_sec01_h2.png") no-repeat center 0;
		background-size: contain;
	}
	.sec_top > .visual_area .txt > span {display: block; padding-bottom: 30px; line-height: 24px; font-size: 15px;}
	.sec_top > .visual_area .btn_play {
		display: inline-block;
		width: 112px;
		height: 39px;
		line-height: 39px;
		font-size: 13px;
	}
	.sec_top > .visual_area .btn_play > span {
		width: 9px;
		height: 11px;
		margin-right: 10px;
		background: url("../img/objectstory/ico_arrow.png") no-repeat;
		background-size: contain;
	}
	.sec_top > .popup_movie .container {
		position: relative;
		top: 50%;
		margin-top: auto;
		transform: translateY(-60%);
	}
	.sec_top #popup_close {
		top: -55px;
		right: 30px;
		background-size: 31px 31px;
	}

	/* sec_02 */
	.sec_02 > .container {padding: 60px 0 0;}
	.sec_02 > .container > h2 {
		width: 245px;
		height: 67px;
		margin: 0 auto;
		background: url("../img/objectstory/m_txt_sec02_h2.png") no-repeat center 0;
		background-size: contain;
	}
	.sec_02 > .container > p {
		width: 276px;
		height: 129px;
		margin: 24px auto 44px;
		background: url("../img/objectstory/m_txt_sec02_h2_sub.png") no-repeat center 0;
		background-size: contain;
	}
	.sec_02 .content_box {margin-bottom: 0; overflow: hidden;}
	.sec_02 .content_box > img {width: 120%; max-width: inherit; margin-left: -10%; }
	.sec_02 .content_box .txt {
		position: static;
		width: 100%;
		height: auto;
		padding: 30px 20px 58px;
		box-shadow: none;
	}
	.sec_02 .content_box .txt > h3 {font-size: 22px;}
	.sec_02 .content_box .txt > span {font-size: 15px;}
	.sec_02 .content_box .txt > span:before {height: 12px;}
	.sec_02 .content_box .txt > p {padding-top: 19px; font-size: 14px;}
	.sec_02 > .txt_area {
		padding: 55px 0 51px;
		background: #ffdbb8 url("../img/objectstory/m_img_article.png") no-repeat center bottom 10%;
		background-size: 320px;
	}
	.sec_02 > .txt_area > .container {position: relative; padding-top: 50%;}
	.sec_02 > .txt_area > .container > p {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 291px;
		height: 139px;
		background: url("../img/objectstory/m_txt_sec03_p.png") no-repeat center 0;
		background-size: contain;
	}

	/* sec_03 */
	.sec_03 > .container {padding: 56px 0 50px;}
	.sec_03 > .container > h2 {
		width: 262px;
		height: 59px;
		margin-bottom: 22px;
		background: url("../img/objectstory/m_txt_sec04_h2.png") no-repeat center 0;
		background-size: contain;
	}
	.sec_03 > .container > p {font-size: 15px; padding: 0 20px;}
	.sec_03 > .container > .btn_area > a {
		width: 320px;
		height: 60px;
		line-height: 60px;
		margin: 0 auto;
		margin-bottom: 15px; 
		background: url("../img/objectstory/btn_giving.jpg") no-repeat center 0;
		background: #b06a2e;
		background-size: 100% !important;
		font-size: 20px;
		font-weight: 500;
	}
	.sec_03 .banner > li {
		position: relative;
		float: none;
		width: 320px;
		height: 70px;
		margin: 0 auto;
		background-size: 80px 70px;
	}
	.sec_03 .banner > li + li {float: none; margin-top: 6px; background-size: 80px 70px;}
	.sec_03 .banner > li > a {
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		padding-left: 27%;
		line-height: 1;
		text-indent: 0;
		font-size: 14px;
	}
	.sec_03 .banner > li > a > span {
		position: relative;
		top: 50%;
		display: block;
		transform: translateY(-50%);
	}
	.sec_03 .banner > li strong {font-size: 14px;}
	.sec_03 .banner > li strong:before {margin: 0 8px;}
	.sec_03 .banner > li strong:after {display: none;}
}