@charset "utf-8";
.main-bn{ position:relative; width: 100%; height:100vh; }
.main-bn .main-bn-in{ width:100%; height:100%; }
.main-bn .main-bn-in .main-bn-img{ width:100%; height:100%; background:url(../img/main/image5.jpg) no-repeat center; background-size:cover; }

.main-bn-con{ position:absolute; bottom:-20px; left:50%; transform:translate(-50%, -50%); z-index:99; text-align:center; }
.main-bn-con h2 span{ color:#fff; font-size:40px; line-height: 1.5em; letter-spacing: 2px; font-family: 'SeoulHangang'; font-weight: 300; display:block; text-shadow: 0 1px 3px rgba(0,0,0,.5);}
.main-bn-con h2 span::after{ content:""; display: block; margin: 20px auto; width:100px; height:2px; background-color:#fff; }

.mouse{ width:30px; height:60px; border: 2px solid #fff; border-radius: 60px; position:relative; top: 20px; left:50%; transform:translateX(-50%); }
.mouse:before{ content:''; width: 8px; height:8px; position:absolute; top:10px; left:50%; transform: translateX(-50%); background-color:#fff; border-radius:50%; opacity:1; animation:wheel 2s infinite; }
@keyframes wheel{
	to{
		opacity: 0;
		top: 40px;
	}

}

/*story*/
.story{ width:100%; margin-bottom: 80px;}
.story .story-in{ width:1400px; margin: 0 auto; }
.story-in .story-tit{ margin: 120px auto; }
.story-in .story-tit p{ text-align:center; }
.story-in .story-tit p span{ font-family: 'SUIT'; font-size:12px; color:#9c9c9c; text-align:center; letter-spacing: 5px; }

.story-list{ display:flex; flex-direction:column; }
.story-list .content{ display:flex; justify-content:space-between; margin-top:0px; }
.story-list .content:nth-of-type(2){ flex-direction: row-reverse; margin: 60px 0; }
.content .con-txt{ width:40%; padding-right:60px; }
.content:nth-of-type(2) .con-txt{ padding-left:60px; padding-right:0; }
.content .con-txt h2{ font-family: 'SeoulHangang'; font-size:40px; margin-bottom:50px; /*color: #546168;*/ font-weight: 400; }
.content .con-txt p span{ display:block; line-height:1.5em; color:#6c6c6c; font-size: 16px;}
.content .con-txt p span a { color:#6c6c6c;  }

.content .img-list{ width:60%; aspect-ratio: 4/3; }
.story-list .first {  border-bottom:1px solid rgba(84, 97, 104, 0.3); padding-bottom: 60px; }
.story-list .first .img-list{  background: url('../img/sub4/1/image5.jpg') no-repeat center/cover; }

.story-list .second { align-items: center; }
.story-list .second .img-list { background: url('../img/sub4/2/image1.jpg') no-repeat center/cover; }


.content .con-txt .btn { border: 1px solid #b2b1a8; width:180px; height:50px; border-radius: 25px; margin-top: 40px; }
.content .con-txt .btn a{ display: block; font-family: 'JejuMyeongjo'; font-size:16px; line-height:50px; text-align:center; color:#5d5d5d; transition:all 0.3s ease-in-out; }
.content .con-txt .btn a:hover{ letter-spacing:2px; }

/*------------------------------------------- 반응형 --------------------------------------------------------------------------------------*/
@media all and (max-width: 1400px){
	.story .story-in{ width:95%; }
}

@media all and (max-width: 1024px){
	.main-bn { height: 65vh; margin-top: 80px; }
	.mouse { display: none; }
	.story-in .story-tit { margin-top: 80px; }

	.story-list .content{ flex-direction:column; }
	.content .con-txt{ width:100%; margin-bottom:60px; padding-right:0; }
	.content .img-list{ width:100%; }
	.story-list .content:nth-of-type(2){ flex-direction:column; }
	.content:nth-of-type(2) .con-txt{ padding-left:0; width: 100%;}

}

@media all and (max-width: 768px){
	.main-bn-con h2 span{ font-size:28px; }
	.content .img-list{ width:100%; flex-direction: column;}
	.content .img-list .con-img{ width: 100%; height:300px; margin-bottom: 30px;}
	.story-in .story-tit p span{ display:block; line-height: 1.5em;}

	.content .con-txt h2 { font-size: 36px; }
	.content .con-txt p span { font-size: 14px; }
	.story-list .second .con-txt h2 { font-size: 32px; margin-bottom: 20px; }

}
@media all and (max-width: 520px){
	.content .con-txt h2 { font-weight: 600; }
	.content .con-txt p span { font-size: 16px; font-weight: 800; line-height: 1.7em; }

}

@media all and (max-width: 500px){
	.content .con-txt h2 { font-size: 32px; }
	.story-list .second .con-txt h2 { font-size: 28px; }
}
@media all and (max-width: 360px){
	.main-bn-con h2 span { font-size: 25px; }
}