@charset "utf-8";
#ds-lt-content>main>section.ds-lt-width {padding-left:0; padding-right:0; padding-top:0; min-width:100%; max-width:100%;}
#ds-lt-content>main>section>div{font-size:20px;}
#ds-lt-content>main>section ul {list-style:none; margin:0; padding:0;}

/* WIDTH 100% 활용 */
#ds-index-1 {background:url('../layout/img/main1-02.png') repeat-x bottom center #c7e8fa;}
#ds-index-1-title {position:absolute;}
#ds-index-1-title span{display:inline-block;}
#ds-index-1>div>div{width:100%; padding-bottom:75%; position:relative;}
.ds-index-1-img {position:absolute;}
/* 배경문양 왼쪽 */
#ds-index-1-img-01 {top:23%; right:90%; width:33%}
/* 배경문양 오른쪽 */
#ds-index-1-img-03 {top:10%; right:-30%; width:39%}
/* 태양 */
#ds-index-1-img-04 {top:15%; right:12%; width:12.2%}
/* 비행기 */
#ds-index-1-img-05 {top:32%; right:26%;  width:9.9%}
/* 구름 */
#ds-index-1-img-06 {top:21%; left:-1%; width:100%}
/* 학교 */
#ds-index-1-img-07 {bottom:25%; right:15%; width:27%}
/* 버스 */
#ds-index-1-img-08 {bottom:25%; width:20%;}
/* 토끼 */
#ds-index-1-img-09 {bottom:10%; left:4%; width:40%}
/* 큰사람 */
#ds-index-1-img-10 {bottom:5%; right:-2%; width:33%}
/* 꽃 */
#ds-index-1-img-11 {bottom:2%; width:43%}
/* 장미꽃 */
#ds-index-1-img-12 {bottom:12%; right:33%;  width:19%}

#ds-index-1-title {top:20%; left:30px; display:block; z-index:1;}
#ds-index-1-title>div:not(last-child) {font-size:25px; line-height:1.3}
#ds-index-1-title>div:last-child {font-size:0; margin-top:20px;}
#ds-index-1-title>div:last-child img+img{margin-left:30px;}


/* ds-index-2 */
#ds-index-2 {background:#f8b133; font-size:1rem;}
#ds-index-2>div{padding:5em;}
#ds-index-2 ul {display:flex; justify-content:space-around; align-items:center; list-style:none; padding:0; margin:0;}
#ds-index-2 a {width:10em; height:10em;text-align:center; display:flex; justify-content:center; align-items:flex-end; box-sizing:border-box; overflow:hidden; position:relative;}
#ds-index-2 a>div{transition:opacity 1s;}
#ds-index-2 a>div>div{font-size:0;}
.ds-index-2-under span{display:block; font-size:1.15em; margin:0.7em 0 0 0; color:#fff;}
.ds-index-2-under {margin:0 0 1em 0; display:block; position:relative; z-index:1; opacity:1;}
.ds-index-2-over{position:absolute!important; z-index:2; top:0; left:0; height:100%; width:100%; margin-bottom:0; display:flex; justify-content:center; align-items:center; opacity:0;}

#ds-index-2 a:hover .ds-index-2-under {opacity:0;}
#ds-index-2 a:hover .ds-index-2-over {opacity:1;}

/* ds-index-3 */
#ds-index-3 {background:url('../layout/img/main3-1.jpg') no-repeat bottom center; background-size:cover; background-attachment:fixed; font-size:1rem;}
#ds-index-3 >div {height:30em; position:relative;}
#ds-index-3 >div>a {display:inline-block; padding:2em;position:absolute; margin:2em 0 0 2em; color:#ddd; font-size:1.2em;}
#ds-index-3 >div>a:hover { background:rgba(0,0,0,0.3); color:#fff;}
#ds-index-3 >div>a>* {line-height:1.6}
#ds-index-3 >div>a>h2{margin:0;}
#ds-index-3 >div>a>span{line-height:1; padding:0.5em 1.2em; border:1px solid #fff; display:inline-block; margin-top:0.5em;}
#ds-index-3 >div>a:hover>span {font-weight:bold;}

/* ds-index-4 */
#ds-index-4 { font-size:1rem;}
#ds-index-4>div {padding:5em 0;}
#ds-index-4 ul {display:flex; justify-content:center; align-items:center; list-style:none; padding:0; margin:0;}
#ds-index-4 li {margin:0 2em;}
#ds-index-4 a {display:block; font-size:0;}
#ds-index-4 a img {transition:transform 0.5s;}
#ds-index-4 a:hover img {transform:scale(1.05,1.05)}

@media all and (max-width:767px) {
	#ds-index-1 {background-size:200%;}
	#ds-index-1-title {top:24%; left:5%;}
	#ds-index-1-title>div:not(last-child) {font-size:1.1rem; line-height:1.3}
	#ds-index-1-title>div:last-child {font-size:0; margin-top:0.5rem;}
	#ds-index-1-title>div:last-child img{width:30%;}
	#ds-index-1-title>div:last-child img+img{width:40%; margin-left:5px;}
	
	#ds-index-2>div{padding:1em 0; font-size:0.85em;}
	#ds-index-2 ul {justify-content:space-around;}
	#ds-index-2 a {width:initial; height:initial; flex:0 0 22%; width:100%; height:120px;}
	
	.ds-index-2-under span{font-size:0.9em; margin:0.5em 0 0 0;}
	.ds-index-2-under img {max-width:60%; height:auto;}
	.ds-index-2-over img {max-width:90%; height:auto;}
	
	#ds-index-3 {background-attachment:initial; }
	#ds-index-3 >div {height:initial; position:relative; padding:3em 0 3em 1em;}
	#ds-index-3 >div>a {display:inline-block; padding:0; position:relative; margin:0; font-size:0.8em;}
	#ds-index-3 >div>a>h2{margin:0;}
	
	#ds-index-4>div {padding:3.5em 0;}
	#ds-index-4 ul {justify-content:space-between; align-items:center;}
	#ds-index-4 li {margin:0;}
	#ds-index-4 a {text-align:center;}
	#ds-index-4 a img {max-width:85%!important;}
}