@charset "utf-8";
.main-bn-swip .swiper-slide{background-size: cover; background-repeat: no-repeat;}
.main-bn-swip .s1{background-image:url(../img/sub4/2/image1.jpg);}
.main-bn-swip .s2{background-image:url(../img/sub4/2/image2.jpg);}
.main-bn-swip .s3{background-image:url(../img/sub4/2/image3.jpg);}
.main-bn-swip .s4{background-image:url(../img/sub4/2/image4.jpg);}
.main-bn-swip .s5{background-image:url(../img/sub4/2/image5.jpg);}
.main-bn-swip .s6{background-image:url(../img/sub4/2/image6.jpg);}
.main-bn-swip .s7{background-image:url(../img/sub4/2/image7.jpg);}
.main-bn-swip .s8{background-image:url(../img/sub4/2/image8.jpg);}
.main-bn-swip .s9{background-image:url(../img/sub4/2/image9.jpg);}
.main-bn-swip .s10{background-image:url(../img/sub4/2/image10.jpg);}


.br-520 { display: none; }
.main-bn{ position:relative; width: 100%; height:100vh; }
.main-bn .main-bn-in{ width:100%; height:100%; }


.main-bn-con{ top:85%; }
/* .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); margin-bottom: 20px; }  */
.main-bn-con h2 span{ margin-bottom: 20px;}
.main-bn-con h2 span::after{ content:""; display: block; margin: 20px auto; width:100px; height:2px; background-color:#fff; }


.mouse{ width:30px; height:50px; border: 2px solid #fff; border-radius: 60px; position:relative; top: 0px; left:50%; transform:translateX(-50%); }
.mouse:before{ content:''; width: 5px; height:5px; 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{ width:100%; margin-bottom: 120px;}
.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 Variable', sans-serif; font-size:12px; color:#9c9c9c; text-align:center; letter-spacing: 5px;margin-right:10px;}

.garden{ width:100%; margin: 0 auto; }
.garden .garden-in{ width:1400px; margin:0 auto; display: flex; justify-content: space-between; position: relative; top: 0; left: 0;}
.garden .garden-in .tit{ width:30%; position:sticky; top:150px; height:600px; }
.garden .garden-in .tit h3{ font-family: 'SUIT Variable', sans-serif; font-size: 14px; font-weight: 300; color: #9c9c9c; margin-bottom: 10px;}
.garden .garden-in .tit h2{ font-family: 'SeoulHangang'; font-weight:500; font-size: 40px; /*color: #546168;*/ margin-bottom: 30px;}
.garden .garden-in .tit p span{ display:block; font-family: 'SUIT Variable', sans-serif; font-size:16px; font-weight:300; line-height:1.5em; color: #6c6c6c;}

.garden .garden-in .garden-line{ width:68%; display:flex; justify-content:space-between; flex-wrap: wrap; }
.garden .garden-in .garden-line .g-img1 { width: 100%; aspect-ratio: 1.618/1; background: url('../img/sub4/2/image5.jpg') no-repeat center/cover; margin-bottom: 40px; }
.garden .garden-in .garden-line .garden-list{ width:calc(50% - 20px); display:flex; justify-content:flex-start; flex-direction:column; }
.garden .garden-in .garden-line .garden-list .garden-con{ width:100%; margin:0 auto; }
.garden .garden-in .garden-line .garden-list:nth-of-type(2){ margin-top:150px; }
.garden .garden-in .garden-line .garden-list .garden-con h4{ font-family: 'SeoulHangang'; font-size:20px; font-weight: 500; margin-top:14px; margin-bottom:30px;  }
.garden .garden-in .garden-line .garden-list .garden-con .garden-img{ width:100%; height:700px; margin-bottom: 40px; }
.garden .garden-in .garden-line .garden-list .garden-con .garden-img.g1{ background:url(../img/sub4/2/image1.jpg) no-repeat 75% 50%; background-size:cover; }
.garden .garden-in .garden-line .garden-list .garden-con .garden-img.g2{ background:url(../img/sub4/2/image2.jpg) no-repeat 50% 50%; background-size:cover; }
.garden .garden-in .garden-line .garden-list .garden-con .garden-img.g3{ background:url(../img/sub4/2/image3.jpg) no-repeat 50% 50%; background-size:cover; }
.garden .garden-in .garden-line .garden-list .garden-con .garden-img.g4{ background:url(../img/sub4/2/image4.jpg) no-repeat 50% 50%; background-size:cover; }
.garden .garden-in .garden-line .garden-list .garden-con .garden-img.g5{ background:url(../img/sub4/2/image5.jpg) no-repeat 50% 50%; background-size:cover; }
.garden .garden-in .garden-line .garden-list .garden-con .garden-img.g6{ background:url(../img/sub4/2/image6.jpg) no-repeat 50% 50%; background-size:cover; }
.garden .garden-in .garden-line .garden-list .garden-con .garden-img.g7{ background:url(../img/sub4/2/image7.jpg) no-repeat 50% 50%; background-size:cover; }
.garden .garden-in .garden-line .garden-list .garden-con .garden-img.g8{ background:url(../img/sub4/2/image8.jpg) no-repeat 50% 50%; background-size:cover; }
.garden .garden-in .garden-line .garden-list .garden-con .garden-img.g9{ background:url(../img/sub4/2/image9.jpg) no-repeat 50% 50%; background-size:cover; }
.garden .garden-in .garden-line .garden-list .garden-con .garden-img.g10{ background:url(../img/sub4/2/image10.jpg) no-repeat 50% 50%; background-size:cover; }



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

@media all and (max-width: 1366px){
	.garden .garden-in{ flex-direction:column; }
	.garden .garden-in .tit{ position:relative; top:0; width:100%; margin-bottom: 60px; height: auto; }
	.garden .garden-in .garden-line{ width:100%; }
	.garden .garden-in .garden-line .garden-list { width: 48%; }
	.garden .garden-in .garden-line .garden-list .garden-con { width: 100%; }
}

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

	.story-in .story-tit { margin: 80px auto; }
}

@media all and (max-width: 768px){
	.main-bn-con h2 span{ font-size:30px; }
	.garden .garden-in .tit h2  { font-size: 36px; }
	.garden .garden-in .garden-line .garden-list .garden-con .garden-img{ height: 400px; }
}

@media all and (max-width:520px){
	.br-520 { display: block; }

	.story-in .story-tit p span { display: block; line-height: 1.5em; margin-right: 0; font-size: 14px; }

	.garden .garden-in .tit{ height:auto; margin-bottom:60px; }
	.garden .garden-in .tit h2{ font-size:32px; margin-bottom: 40px; font-weight: 600; }
	.garden .garden-in .tit h3{ font-size:14px; }
	.garden .garden-in .tit p{ margin-top:30px; }
	.garden .garden-in .tit p span{ font-size:16px; font-weight: 800; line-height: 1.7em; }

	.garden .garden-in .garden-line{ flex-direction:column; }
	.garden .garden-in .garden-line .garden-list{ width:100%; }
	.garden .garden-in .garden-line .garden-list:nth-of-type(2){ margin-top:0px; }
	.garden .garden-in .garden-line .garden-list .garden-con{ width:100%; }
	.garden .garden-in .garden-line .garden-list .garden-con h4{ font-size:16px; position: relative; margin-bottom: 30px;}
	.garden .garden-in .garden-line .garden-list .garden-con h4:after{ content:""; width:60%; height:0.5px; background-color:#666; display:block; position:absolute; right:0; top:50%; transform:translateY(-50%); }
	.garden .garden-in .garden-line .garden-list .garden-con:last-child{ margin-top:0px; }
	.garden .garden-in .garden-line .garden-list .garden-con .garden-img{ height:auto; padding-bottom:75%; margin-bottom: 20px; }
}

@media all and (max-width: 360px){
	.main-bn-con h2 span { font-size: 25px; }
}