@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable.css");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@100;200;300;400;500;600;700&display=swap");
@import url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2107@1.0/NEXONLv1Gothic.css");

@font-face {
    font-family: 'NEXON Lv1 Gothic OTF';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'NEXON Lv1 Gothic OTF';
	src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF Bold.woff') format('woff');
	font-weight: 700; /* bold */
	font-style: normal;
}

html{overflow:scroll;overflow-x:auto}
html{width:100%;height:100%;-webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none;}
body{overflow:hidden;width:100%;min-width:320px;margin:0px;padding:0px;font-family:'Pretendard Variable',sans-serif,'Noto Sans KR';font-weight:400;font-size:18px;color:#1a1a1a;line-height:1.4; word-break:keep-all;}


img{border:none;vertical-align:top}

h1, h2, h3, h4, h5, h6, em{margin:0;padding:0;font-weight:normal; font-style:normal; font-family: 'GmarketSansBold';}
p{margin:0;padding:0; font-family: 'Pretendard Variable',sans-serif,'Noto Sans KR';}
ol, ul, dl, li, dt, dd{display:block;margin:0;padding:0;list-style:none; font-family: 'Pretendard Variable',sans-serif,'Noto Sans KR';}

textarea{margin:0;padding:0;border:none;resize:none;}
input{margin:0;padding:0;border:none;font-family: 'Pretendard Variable',sans-serif,'Noto Sans KR';font-weight:normal;}
input[type=text],input[type=password],input[type=submit],input[type=button]{-webkit-appearance: none;-webkit-border-radius: 0;}
input[type=checkbox]{border:1px solid #666666;border-radius:0;}
input[type=radio]{border:1px solid #666666;}
input:focus,textarea:focus{outline-style:none;}

a{color:inherit;text-decoration:none;outline:none;select-dummy:expression(this.hideFocus=true);}
a:hover{color:inherit;text-decoration:none}
a:active{color:inherit;text-decoration:none}
a:visited{color:inherit;text-decoration:none}
address, em, strong{font-weight:normal}


.wrap{}

.visual{position:relative;height:1081px; background:url(images/visual.png) center no-repeat; text-align:center; background-size:cover}
.visual .maintitle {position:relative; padding-top:176px; }
.visual .left { position:absolute; left:0; top:0; width:100%; height:100%; background:url(images/visual_left.png) left top no-repeat; background-size:auto 100%;}
.visual .right { position:absolute; left:0; top:0; width:100%; height:100%; background:url(images/visual_right.png) right top no-repeat; background-size:auto 100%; }
.visual .leaf { position:absolute; left:0; top:0; width:100%; height:100%; background:url(images/leaf.png) center top no-repeat; background-size:auto 100%; animation: sway 2s infinite ease-in-out; }
.visual .character { position:absolute; left:0; top:0; width:100%; height:100%; background:url(images/character.png) center top no-repeat; background-size:auto 100%;  }
.visual .character_left{position:absolute;left:32px;top:765px;animation: sway 2s infinite ease-in-out;} 
.visual .character_right{position:absolute;right:117px;top:593px;animation: sway 2s infinite ease-in-out;} 
.visual > .title{position:absolute;left:0;right:0;z-index:1000;bottom:-160px;height:327px;text-align:center;}
.visual > .title .imgbox{position:relative;min-height:0;}
.visual > .title .imgbox .flag .character_center{position:absolute;left:calc(50% + 338px); top:-85px; animation: walk 0.8s infinite ease-in-out;}
.visual > .title .imgbox .flag > img{height:317px;;}
@media only screen and (max-width:1650px) {
	.visual .character_left{top:700px;}
}
@media only screen and (max-width:1400px) {
.visual .character_right{right:2%;} 
}
@media only screen and (max-width:1300px) {
.visual .character_left{top:765px;}
}
@media only screen and (max-width:1200px) {
.visual{height:756px;}
.visual .maintitle { padding-top:123px; }
.visual .maintitle > img{height:164px}
.visual .character_left{left:22px;top:535px}
.visual .character_left > img{height:170px;}
.visual .character_right{right:81px;top:415px;}
.visual .character_right >img{height:99px;}
.visual > .title{ bottom:-90px;height:180px;}
.visual > .title .imgbox .flag .character_center{left:calc(50% + 200px); top:-45px;}
.visual > .title .imgbox .flag .character_center > img{width:107px;}
.visual > .title .imgbox .flag > img{height:180px;}
}
@media only screen and (max-width:980px) {
.visual .character_right{right:2%;} 
}
@media only screen and (max-width:768px) {
	.visual{height:667px;}
	.visual .maintitle { padding-top:150px; }
	.visual .maintitle > img{height:100px}
	.visual .character{ background-position: calc(50% + 10px) 50px; background-size:auto 80%; }
	.visual .character_left{left:5px;top:460px}
	.visual .character_left > img{height:170px;}
	.visual .character_right{z-index:1000;right:10px;top:500px;}
	.visual .character_right >img{height:99px;}
	.visual > .title{display:flex; align-items: center;justify-content: center; z-index:2000; bottom:-112px;height:221px;}
	.visual > .title .imgbox .flag{position:relative;z-index:3000;width:100%;margin:0 auto;}
	.visual > .title .imgbox .flag .character_center{left:calc(50% + 140px); top:-30px;}
	.visual > .title .imgbox .flag .character_center > img{width:71px;}
	.visual > .title .imgbox .flag > img{height:120px;}
}
@media only screen and (max-width:470px) {
	.visual .character_left{z-index:1100;left:5px;top:480px}
	.visual > .title .imgbox .flag .character_center{left:calc(50% + 110px); top:-20px;}
	.visual > .title .imgbox .flag .character_center > img{width:56px;}
	.visual > .title .imgbox .flag > img{height:94px;}
}

.depth1{position:relative;height:608px;font-family:'IBM Plex Sans KR';background:url(images/come_bg.png) center no-repeat #ffe5b8; background-size:0 608px; }
.depth1 .txt{position:relative;z-index:1000;padding-top:190px;text-align:center;color:#1a1a1a}
.depth1 .txt .st1{font-size:56px;}
.depth1 .txt .st2{font-weight:700;;font-size:75px;}
.depth1 .txt .st3{font-weight:700;font-size:75px;color:#2f9300}
.depth1 .left{position:absolute;left:0;top:0;}
.depth1 .right{position:absolute;right:0;top:0;}
@media only screen and (max-width:1200px) {
.depth1{height:425px; background:url(images/come_bg.png) center no-repeat #ffe5b8; background-size:0 425px;}
.depth1 .txt{padding-top:133px;}
.depth1 .txt .st1{font-size:39px;}
.depth1 .txt .st2{font-size:52px;}
.depth1 .txt .st3{font-size:52px;}
.depth1 .left > img{height:425px;}
.depth1 .right > img{height:425px;}
}
@media only screen and (max-width:768px) {
.depth1{overflow:hidden;height:auto;}
.depth1 .txt{padding-top:20%;padding-bottom:15%;}
.depth1 .txt .st1{font-size:23px;}
.depth1 .txt .st2{font-size:30px;}
.depth1 .txt .st3{font-size:30px;}
}
@media only screen and (max-width:530px) {
.depth1 .left{position:absolute;left:-10%;top:0;}
.depth1 .right{position:absolute;right:-10%;top:0;}
}
@media only screen and (max-width:400px) {
.depth1 .left{position:absolute;left:-25%;top:0;}
.depth1 .right{position:absolute;right:-35%;top:0;}
}
		

.depth2{padding:201px 0 59px;text-align:center;background:#f7f7d0;}
@media only screen and (max-width:1200px) {
	.depth2{padding:140px 0 41px;}
	.depth2 > img{width:840px;}
}
@media only screen and (max-width:768px) {
	.depth2{padding:98px 0 28px;}
	.depth2 > img{width:90%;}

}

.depth3{background-color: #f7f7d0;background-image: url(images/joy_left.png), url(images/joy_right.png);background-position: left top, right top 160px;background-repeat: no-repeat;}	
.depth3 .joytitle{display:flex;width:100%;max-width:986px;margin:0 auto;padding:203px 0 160px 0;}
.depth3 .joytitle > div{font-size:2vw;font-weight:700;font-size:90px;}
.depth3 .joytitle > .num{width:191px;}
.depth3 .joytitle > .num > span{display:block;width:162px;height:162px;margin-top:20px;border-radius:162px;line-height:162px;text-align:center;color:#1a1a1a;background:#ffffff;}
.depth3 .joytitle > .txt{width:795px;font-family:'IBM Plex Sans KR';letter-spacing:-0.04em;line-height:1.2;}
.depth3 .joytitle > .txt > span{display:block;}
.depth3 .joytitle > .txt .c2{color:#2f9300}
@media only screen and (max-width:1200px) {
.depth3{background-position: left top, right top 112px; background-size:auto 100%, auto 100%}	
.depth3 .joytitle{max-width:690px;padding:142px 0 112px 0;}
.depth3 .joytitle > div{font-size:63px;}
.depth3 .joytitle > .num{width:133px;}
.depth3 .joytitle > .num > span{width:113px;height:113px;margin-top:14px;border-radius:113px;line-height:113px;}
.depth3 .joytitle > .txt{width:556px;}
}
@media only screen and (max-width:768px) {
	.depth3{background-position: left top, right top 56px; background-size:auto 100%, auto 100%}	
	.depth3 .joytitle{ width:90%; margin:0 auto; padding:71px 0 56px 0;}
	.depth3 .joytitle > div{font-size:30px;}
	.depth3 .joytitle > .num{width:66px;}
	.depth3 .joytitle > .num > span{width:56px;height:56px;margin-top:7px;border-radius:56px;line-height:56px;}
	.depth3 .joytitle > .txt{width:90%;}
}

.depth3 .roundarea{width:1018px;margin:0 auto;padding:65px 58px;box-sizing:border-box;border-radius:50px;background:#ffffff;}
.depth3 .roundarea > .title{display:inline-block;height:98px;padding:0 37px;margin-bottom:30px;border-radius:15px;font-family: 'NEXON Lv1 Gothic OTF';font-weight:700;font-size:41px;line-height:98px;color:#ffffff;background:#2f9300;}
.depth3 .roundarea > .title.st2{margin-bottom:50px;}
.depth3 .roundarea > .subtitle{position:relative;padding:0 10px;margin-bottom:50px;}
.depth3 .roundarea > .subtitle p{font-family:'IBM Plex Sans KR';font-weight:700;font-size:53px;line-height:1.3; letter-spacing:-0.03em}
.depth3 .roundarea > .subtitle .txt2{font-size:73px;}
.depth3 .roundarea > .subtitle .txt2 > span{position:relative;color:#2f9300}
.depth3 .roundarea > .subtitle .txt2 > span .mark{position:relative;margin-left:5px;}
.depth3 .roundarea > .subtitle .ico01{position:absolute;right:0;top:211px;}
.depth3 .roundarea > .subtitle .ico02{position:absolute;right:0;top:-30px;}
.depth3 .roundarea > .explan{padding:0 10px;font-family: 'NEXON Lv1 Gothic OTF';font-size:38px; letter-spacing:-0.03em;}
.depth3 .roundarea > .explan .txt{width:65%;line-height:1.7;}
.depth3 .roundarea > .explan .txt.st2{width:70%;padding-top:10px;font-size:41px;}
.depth3 .roundarea > .explan .txt > span{color:#2f9300}
@media only screen and (max-width:1200px) {
.depth3 .roundarea{width:712px;padding:45px 40px;border-radius:35px;}
.depth3 .roundarea > .title{height:68px;padding:0 25px;margin-bottom:21px;border-radius:10px;font-size:28px;line-height:68px;}
.depth3 .roundarea > .title.st2{margin-bottom:35px;}
.depth3 .roundarea > .subtitle{padding:0 7px;margin-bottom:35px;}
.depth3 .roundarea > .subtitle p{font-size:37px;}
.depth3 .roundarea > .subtitle .txt2{font-size:51px;}
.depth3 .roundarea > .subtitle .txt2 > span .mark{margin-left:3.5px;}
.depth3 .roundarea > .subtitle .txt2 > span .mark > img{width:49px;}
.depth3 .roundarea > .subtitle .ico01{top:147px;}
.depth3 .roundarea > .subtitle .ico01 > img {width:207px}
.depth3 .roundarea > .subtitle .ico02{top:-21px;}
.depth3 .roundarea > .subtitle .ico02 > img{width:207px;}
.depth3 .roundarea > .explan{padding:0 7px;ffont-size:26px;}
.depth3 .roundarea > .explan .txt.st2{width:70%;padding-top:7px;font-size:28px;}
.depth3 .roundarea > .explan .txt > span{color:#2f9300}
}
@media only screen and (max-width:768px) {
.depth3 .roundarea{width:90%;padding:22px 20px;border-radius:17px;}
.depth3 .roundarea > .title{height:34px;padding:0 12px;margin-bottom:10px;border-radius:5px;font-size:14px;line-height:34px;}
.depth3 .roundarea > .title.st2{margin-bottom:17px;}
.depth3 .roundarea > .subtitle{padding:0 3px;margin-bottom:17px;}
.depth3 .roundarea > .subtitle p{font-size:18px;}
.depth3 .roundarea > .subtitle .txt2{font-size:25px;}
.depth3 .roundarea > .subtitle .txt2 > span .mark{margin-left:1,7px;}
.depth3 .roundarea > .subtitle .txt2 > span .mark > img{width:24px;}
.depth3 .roundarea > .subtitle .ico01{top:73px;}
.depth3 .roundarea > .subtitle .ico01 > img {width:103px}
.depth3 .roundarea > .subtitle .ico02{top:-10px;}
.depth3 .roundarea > .subtitle .ico02 > img{width:103px;}
.depth3 .roundarea > .explan{padding:0 3px;font-size:13px;}
.depth3 .roundarea > .explan .txt.st2{width:70%;padding-top:3px;font-size:14px;}
.depth3 .roundarea > .explan .txt > span{color:#2f9300}
}

.depth3 .roundarea > .cook01{margin:220px 0 340px 0;text-align:center;}
.depth3 .roundarea > .cook02{margin:130px 0 250px 0;text-align:center;}
.depth3 .roundarea > .schedule{margin-bottom:70px;padding:0 10px;}
.depth3 .roundarea > .schedule > .title{padding-left:53px;font-family: 'NEXON Lv1 Gothic OTF';font-weight:700;font-size:39px;line-height:1.7;background:url(images/point.png) left top 10px no-repeat;}
.depth3 .roundarea > .schedule > .explan > p{font-family: 'NEXON Lv1 Gothic OTF';font-size:39px;line-height:1.7}
.depth3 .roundarea > .schedule > .explan > p > span{display:inline-block;height:65px;;padding:0 14px; border-radius:14px; color:#ffffff;font-size:35px;line-height:65px; letter-spacing:-0.03em;background:#41bc00;}
@media only screen and (max-width:1200px) {
.depth3 .roundarea > .cook01{margin:154px 0 238px 0;}
.depth3 .roundarea > .cook01 > img{width:100%;}
.depth3 .roundarea > .cook02{margin:91px 0 175px 0;}
.depth3 .roundarea > .cook02 > img{width:100%;}
.depth3 .roundarea > .schedule{margin-bottom:49px;padding:0 7px;}
.depth3 .roundarea > .schedule > .title{padding-left:37px;font-size:27px;background:url(images/point.png) left top 7px no-repeat; background-size:26px auto;}
.depth3 .roundarea > .schedule > .explan > p{font-size:27px;}
.depth3 .roundarea > .schedule > .explan > p > span{height:45px;padding:0 10px; border-radius:10px; font-size:24px;line-height:45px;}
}
@media only screen and (max-width:768px) {
.depth3 .roundarea > .cook01{margin:77px 0 119px 0;}
.depth3 .roundarea > .cook01 > img{width:100%;}
.depth3 .roundarea > .cook02{margin:45px 0 87px 0;}
.depth3 .roundarea > .cook02 > img{width:100%;}
.depth3 .roundarea > .schedule{margin-bottom:24px;padding:0 3px;}
.depth3 .roundarea > .schedule > .title{padding-left:18px;font-size:13px;background:url(images/point.png) left top 3px no-repeat; background-size:13px auto;}
.depth3 .roundarea > .schedule > .explan > p{font-size:13px;}
.depth3 .roundarea > .schedule > .explan > p > span{height:22px;padding:0 5px; border-radius:5px; font-size:12px;line-height:22px;}
}

.depth3 .roundarea > .title2{padding:110px 0 185px 0;}
.depth3 .roundarea > .title2 > p{font-family: 'NEXON Lv1 Gothic OTF';font-size:49px;line-height:1.6;text-align:center;}
.depth3 .roundarea > .title2 > p > span{font-weight:700;color:#2f9300}
.depth3 .roundarea > .title3{margin-bottom:30px;text-align:center;}
.depth3 .roundarea > .title3 > p{display:inline-block;height:80px;margin:0 auto;padding:0 27px;font-family: 'NEXON Lv1 Gothic OTF';font-weight:700;font-size:49px;line-height:80px;color:#2f9300;letter-spacing:-0.08em;background:#f0ffe3;}
.depth3 .roundarea > .button{text-align:center;}
.depth3 .roundarea > .button > a{display:inline-block;height:169px;padding: 0 138px;border-radius:138px;font-family: 'NEXON Lv1 Gothic OTF';font-weight:700;font-size:58px;line-height:169px;color:#ffffff;letter-spacing:-0.08em;background:#1a1a1a;}
.depth3 .roundarea > .add{margin-top:20px;font-family: 'NEXON Lv1 Gothic OTF';font-size:26px;color:#808080;letter-spacing:-0.08em;text-align:center;}
.depth3 .talk{padding: 540px 0 540px 0;text-align:center;}
@media only screen and (max-width:1200px) {
.depth3 .roundarea > .title2{padding:77px 0 129px 0;}
.depth3 .roundarea > .title2 > p{font-size:34px;}
.depth3 .roundarea > .title3{margin-bottom:21px;}
.depth3 .roundarea > .title3 > p{height:56px;padding:0 19px;font-size:34px;line-height:40px;letter-spacing:-0.08em;}
.depth3 .roundarea > .button > a{height:118px;padding: 0 96px;border-radius:96px;font-size:40px;line-height:118px;}
.depth3 .roundarea > .add{margin-top:14px;font-size:18px;}
.depth3 .talk{padding: 378px 0 378px 0;text-align:center;}
.depth3 .talk > img{width:719px;}
}
@media only screen and (max-width:768px) {
.depth3 .roundarea > .title2{padding:38px 0 64px 0;}
.depth3 .roundarea > .title2 > p{font-size:17px;}
.depth3 .roundarea > .title3{margin-bottom:10px;}
.depth3 .roundarea > .title3 > p{height:28px;padding:0 9px;font-size:17px;letter-spacing:-0.08em;}
.depth3 .roundarea > .button > a{height:59px;padding: 0 48px;border-radius:48px;font-size:20px;line-height:59px;}
.depth3 .roundarea > .add{margin-top:7px;font-size:10px;}
.depth3 .talk{padding: 189px 0 189px 0;text-align:center;}
.depth3 .talk > img{width:90%;}
}


.depth4 { padding: 130px 0 413px 0; background: #f7f7d0; }
.depth4 .location { padding: 50px 0 80px 0; text-align: center; background: url(images/title_bg.png) center top no-repeat; }
.depth4 .location > span { overflow: hidden; display: block; height: 186px; font-family: 'IBM Plex Sans KR'; font-weight: 700; font-size: 60px; color: #5a310a; line-height: 200px; background: url(images/title.png) center no-repeat; }
.depth4 .maparea { display: flex; justify-content: space-between; width: 100%; max-width: 980px; margin: 0 auto; }
.depth4 .maparea .explan { width: 50.6%; }
.depth4 .maparea .explan .info { margin-top: 40px; color: #5a310a; }
.depth4 .maparea .explan .info:first-child { margin-top: 0; }
.depth4 .maparea .explan .info .txt1 { max-width: 460px; font-family: 'NEXON Lv1 Gothic OTF'; font-weight: 700; font-size: 44px; letter-spacing: -0.05em; }
.depth4 .maparea .explan .info .txt2 { max-width: 460px; margin-top: 10px; font-family: 'NEXON Lv1 Gothic OTF'; font-size: 31px; line-height: 1.6; letter-spacing: -0.05em; }
.depth4 .maparea .explan .info .txt3 { max-width: 430px; padding-left: 18px; font-family: 'NEXON Lv1 Gothic OTF'; font-size: 25px; line-height: 1.6; text-indent: -18px; letter-spacing: -0.05em; }
.depth4 .maparea .explan .info .txt4 { max-width: 410px; padding-left: 18px; margin-top: 5px; font-family: 'NEXON Lv1 Gothic OTF'; font-size: 25px; line-height: 1.6; text-indent: -18px; color: #ae652e; letter-spacing: -0.05em; }
.depth4 .maparea .map { width: 48%; max-width: 484px; }
.depth4 .maparea .map .mapbox { overflow: hidden; padding-bottom: 42px; border-radius: 20px; background: #ffffff; }
.depth4 .maparea .map .mapbox .address { display: flex; justify-content: flex-start; padding: 0 39px 9px 39px; background: #ffffff; }
.depth4 .maparea .map .mapbox .address .title { width: 97px; }
.depth4 .maparea .map .mapbox .address .title > span { display: block; width: 100%; border-radius: 10px; font-family: 'NEXON Lv1 Gothic OTF'; font-size: 21px; color: #ffffff; line-height: 32px; text-align: center; background: #004a3b; }
.depth4 .maparea .map .mapbox .address .explan { width: calc(100% - 97px); padding-left: 12px; box-sizing: border-box; font-family: 'NEXON Lv1 Gothic OTF'; font-size: 22px; line-height: 32px; color: #004a3b; letter-spacing: -0.04em; }
.depth4 .maparea .map .mapbox .address .explan > span { font-size: 16px; }
@media only screen and (max-width:1200px) {
.depth4 { padding: 91px 0 289px 0; }
.depth4 .location { padding: 35px 0 56px 0; background: url(images/title_bg.png) center top no-repeat; background-size:auto 168px }
.depth4 .location > span { height: 130px; font-size: 42px; line-height: 140px; background: url(images/title.png) center no-repeat; background-size:auto 130px}
.depth4 .maparea { max-width: 686px; }
.depth4 .maparea .explan .info { margin-top: 28px; }
.depth4 .maparea .explan .info .txt1 { max-width: 322px; font-size: 30px; letter-spacing: -0.05em; }
.depth4 .maparea .explan .info .txt2 { max-width: 322px; margin-top: 7px; font-size: 21px; letter-spacing: -0.05em; }
.depth4 .maparea .explan .info .txt3 { max-width: 280px; padding-left: 12px; font-size: 17px; text-indent: -12px; letter-spacing: -0.05em; }
.depth4 .maparea .explan .info .txt4 { max-width: 280px; padding-left: 12px; margin-top: 3px; font-size: 17px; text-indent: -12px; letter-spacing: -0.05em; }
.depth4 .maparea .map { max-width: 338px; }
.depth4 .maparea .map .mapbox { padding-bottom: 29px; border-radius: 14px; }
.depth4 .maparea .map .mapbox > img{ width:100%; }
.depth4 .maparea .map .mapbox .address { padding: 0 27px 6px 27px; }
.depth4 .maparea .map .mapbox .address .title { width: 68px; }
.depth4 .maparea .map .mapbox .address .title > span { border-radius: 7px; font-size: 14px; line-height: 22px; }
.depth4 .maparea .map .mapbox .address .explan { width: calc(100% - 67px); padding-left: 8px; font-size: 15px; line-height: 22px; letter-spacing: -0.04em; }
.depth4 .maparea .map .mapbox .address .explan > span { font-size: 11px; }
}
@media only screen and (max-width:768px) {
.depth4 { padding: 45px 0 144px 0; }
.depth4 .location { padding: 17px 0 28px 0; background: url(images/title_bg.png) center top no-repeat; background-size:auto 168px }
.depth4 .location > span { height: 65px; font-size: 21px; line-height: 70px; background: url(images/title.png) center no-repeat; background-size:auto 65px}
.depth4 .maparea { display:block; width:90%; }
.depth4 .maparea .explan{width:100%;}
.depth4 .maparea .explan .info { margin-top: 14px; }
.depth4 .maparea .explan .info .txt1 { font-size: 15px; letter-spacing: -0.05em; }
.depth4 .maparea .explan .info .txt2 { margin-top: 3px; font-size: 10x; letter-spacing: -0.05em; }
.depth4 .maparea .explan .info .txt3 { padding-left: 6px; font-size: 10px; text-indent: -6px; letter-spacing: -0.05em; }
.depth4 .maparea .explan .info .txt4 { padding-left: 6px; margin-top: 1px; font-size: 10px; text-indent: -6px; letter-spacing: -0.05em; }
.depth4 .maparea .map { width:100%;max-width: 100%; }
.depth4 .maparea .map .mapbox { margin-top:20px; padding-bottom: 14px; border-radius: 7px; }
.depth4 .maparea .map .mapbox > img{ width:100%; }
.depth4 .maparea .map .mapbox .address { padding: 0 13px 6px 13px; }
.depth4 .maparea .map .mapbox .address .title { width: 50px; }
.depth4 .maparea .map .mapbox .address .title > span { border-radius: 3px; font-size: 10px; line-height: 20px; }
.depth4 .maparea .map .mapbox .address .explan { width: calc(100% - 33px); padding-left: 4px; font-size: 10px; line-height: 20px; letter-spacing: -0.04em; }
.depth4 .maparea .map .mapbox .address .explan > span { font-size: 10px; }
}


.depth4 .grass { max-width: 868px; margin: 0 auto; padding: 250px 0; background: url(images/grass.png) left center no-repeat, url(images/grass.png) right center no-repeat; background-size: 70px auto; }
.depth4 .videoarea { width: 100%; max-width: 964px; margin: 0 auto; }
.depth4 .videoarea .video-wrapper { position: relative; width: 100%; margin: 0 auto; padding-top: 56.25%; overflow: hidden; }
.depth4 .videoarea .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.depth4 .videoarea .ps{margin-top:10px;font-family: 'NEXON Lv1 Gothic OTF'; font-size:18px; text-align:center; }
.depth4 .videoarea .explan{ max-width: 670px; margin: 0 auto; padding: 33px 0 500px 0; font-family: 'NEXON Lv1 Gothic OTF'; font-size: 41px; line-height:1.7; text-align: center; letter-spacing: -0.05em; }
@media only screen and (max-width:1200px) {
.depth4 .grass { max-width: 607px; padding: 175px 0; background: url(images/grass.png) left center no-repeat, url(images/grass.png) right center no-repeat; background-size: 49px auto; }
.depth4 .videoarea { max-width: 674px; }
.depth4 .videoarea .ps{margin-top:7px;font-size:15px; }
.depth4 .videoarea .explan{ max-width: 469px; padding: 23px 0 350px 0; font-size: 28px; letter-spacing: -0.05em; }
}
@media only screen and (max-width:768px) {
.depth4 .grass { max-width: 303px; padding: 87px 0; background: url(images/grass.png) left center no-repeat, url(images/grass.png) right center no-repeat; background-size: 24px auto; }
.depth4 .videoarea { max-width: 337px; }
.depth4 .videoarea .ps{margin-top:5px;font-size:10px; }
.depth4 .videoarea .explan{ max-width: 234px; padding: 11px 0 175px 0; font-size: 14px; letter-spacing: -0.05em; }
}

.depth4 .donation { max-width: 1043px; padding:60px 30px 73px 30px; box-sizing:border-box; margin: 0 auto; border-radius: 90px; background: #ffffff; }
.depth4 .donation .subtitle { font-family: 'NEXON Lv1 Gothic OTF'; font-weight: 700; font-size: 28px; color: #92b9d4; text-align: center; }
.depth4 .donation .subtitle > span { color: #93c01e; }
.depth4 .donation .farm { padding: 40px 0; text-align: center; }
.depth4 .donation .explan { font-family: 'NEXON Lv1 Gothic OTF'; font-size: 31px; line-height:1.67; color:#5a310a; text-align:center; letter-spacing:-0.05em }
.depth4 .donation .explan > span { display:block; }
.depth4 .donation .pagego {display:flex; justify-content: center; margin-top:65px; text-align:center;}
.depth4 .donation .pagego > a {display:flex; align-items: center; justify-content: center; width:343px; height:125px; margin:0 14px; font-family: 'NEXON Lv1 Gothic OTF'; font-weight:700; font-size:26px; line-height:1.5; color:#5a310a; background:url(images/button.png) center no-repeat; background-size:contain; }
.depth4 .donation .partner {display:flex; align-items: center; justify-content: center; gap:29px; margin-top:60px;}
@media only screen and (max-width:1200px) {
.depth4 .donation { max-width: 730px; padding:42px 21px 51px 21px; border-radius: 63px; }
.depth4 .donation .subtitle { font-size: 19px; }
.depth4 .donation .farm { padding: 28px 0; }
.depth4 .donation .farm > img{max-width:350px} 
.depth4 .donation .explan { font-size: 21px; letter-spacing:-0.05em }
.depth4 .donation .pagego { margin-top:45px; }
.depth4 .donation .pagego > a { width:240px; height:87px; margin:0 9px; font-size:18px; }
.depth4 .donation .partner { gap:20px; margin-top:42px;}
}
@media only screen and (max-width:768px) {
.depth4 .donation { max-width: 90%; padding:21px 10px 25px 10px; border-radius: 31px; }
.depth4 .donation .subtitle { font-size: 10px; }
.depth4 .donation .farm { padding: 14px 0; }
.depth4 .donation .farm > img{max-width:200px} 
.depth4 .donation .explan { font-size: 10px; letter-spacing:-0.05em }
.depth4 .donation .pagego { margin-top:22px; }
.depth4 .donation .pagego > a { width:120px; height:43px; margin:0 4px; font-size:10px; }
.depth4 .donation .partner { gap:10px; margin-top:21px;}
.depth4 .donation .partner > span > img{height:43px;}
}


.motion {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.motion.active {
    opacity: 1;
    transform: translateY(0);
}

.motion.hidden {
    opacity: 0;
    transform: translateY(30px); /* 살짝만 내려가게 해서 부드럽게 */
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOutDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(50px);
    }
}

@keyframes sway {
    0% { transform: rotate(-1deg); }
    50% { transform: rotate(1deg); }
    100% { transform: rotate(-1deg); }
}

@keyframes walk {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}