@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");
@import url("https:////spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.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:1103px; background:url(images/visual.png) center no-repeat; text-align:center; background-size:cover}
.visual > .bottom{position:absolute;left:0;right:0;bottom:0;width:100%;height:100%; margin:0 auto; background:url(images/visual_main.png) center bottom no-repeat; background-size:auto 100%;}
.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_bg { position:absolute; left:50%; top:724px; Z-INDEX:900; width:485px; height:229px; margin-left:-538px;/* background:url(images/character_bg.png) center top no-repeat; background-size:auto 100%;*/   }
.visual .character_bg .character { position:absolute; left:0; top:0; Z-INDEX:900; width:485px; height:229px; background:url(images/character.png) center top no-repeat; background-size:auto 100%; animation: walk 1.5s infinite ease-in-out;   }
.visual .character_center_bg { position:absolute; left:50%; top:710px; width:397px; height:242px; margin-left:138px; background:url(images/character_center_bg.png) center top no-repeat; background-size:auto 100%; }
.visual .character_center_bg .character_center { position:absolute; left:0; top:0; width:397px; height:242px; background:url(images/character_center.png) center top no-repeat; background-size:auto 100%; animation: walk 2s infinite ease-in-out;  }
.visual .character_left{position:absolute;left:50%;top:632px;margin-left:calc(-600px - 10%);animation: sway 2s infinite ease-in-out;} 
.visual .character_right{position:absolute;right:50%;margin-right:calc(-600px - 10%);top:804px;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 > img{height:317px;;}
@media only screen and (max-width:1800px) {
	.visual .character_left{left:5%;margin-left:0;} 
	.visual .character_right{right:2%;margin-right:0;} 
}
@media only screen and (max-width:1650px) {
	.visual .character_left{left:2%;margin-lfet:0;} 
	.visual .character_right{top:870px;margin-lfet:0;} 
}
@media only screen and (max-width:1200px) {
.visual{height:756px;}
.visual .maintitle { padding-top:123px; }
.visual .maintitle > img{height:164px}
.visual .character_bg { top:492.32px; width:329.8px; height:155.72px; margin-left:-365.84px;}
.visual .character_bg .character { width:329.8px; height:155.72px; }
.visual .character_center_bg {top:482.8px; width:269.96px; height:164.56px; margin-left:93.84px;}
.visual .character_center_bg .character_center {width:269.96px; height:164.56px;}
.visual .character_left {left:1%; top:429.76px; width:147.56px; height:125.12px;}
.visual .character_left  > img{height:100%;}
.visual .character_right {z-index:1000;right:7.48%; top:576.72px; width:120.36px; height:127.84px;}
.visual .character_right > img{height:100%;}
.visual > .title{ bottom:-90px;height:180px;}
.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:687px;}
	.visual .maintitle { padding-top:150px; }
	.visual .maintitle > img{height:100px}
	.visual .character_bg {left:10%;top:474.4px; width:291px; height:137.4px; margin-left:0}
	.visual .character_bg .character {width:291px; height:137.4px;}
	.visual .character_center_bg {left:auto;right:5%;top:496px; z-index:1000; width:238.2px; height:145.2px; margin-left:0;}
	.visual .character_center {top:496px; z-index:1000; width:238.2px; height:145.2px;}
	.visual .left { background:url(images/visual_left.png) left -100px top no-repeat; background-size:auto 100%;}
	.visual .right { background:url(images/visual_right.png) right -100px top no-repeat; background-size:auto 100%; }
	.visual .character_left {left:1%; top:417.2px; width:130.2px; height:110.4px;}
	.visual .character_right {right:6.6%; top:402.4px; width:106.2px; height:112.8px;}
	.visual > .title{display:flex; align-items: center;justify-content: center; z-index:2000; bottom:-80px;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:520px) {
	.visual{height:510px;}
	.visual .character_bg {left:2%;top:348.56px; width:213.4px; height:100.76px;}
	.visual .character_bg .character {width:213.4px; height:100.76px;}
	.visual .character_center_bg {right:2%;top:352.4px; width:174.68px; height:106.48px;}
	.visual .character_center_bg .character_center {width:174.68px; height:106.48px;}
	.visual .character_left {left:5.28%; top:278.08px; width:95.48px; height:80.96px;}
	.visual .character_right {right:4.84%; top:303.76px; width:77.88px; height:82.72px;}
}
@media only screen and (max-width:470px) {
	.visual .character_left{z-index:1100;left:5px;top:278px}
	.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;}
}
@media only screen and (max-width:390px) {
	.visual .character_left{display:none;}
	.visual .character_right{display:none;}
	.visual .character_center_bg{right:-4%;}
}

.depth1{position:relative;height:872px;margin-top:-40px;background:url(images/come_bg.png) center no-repeat #ffe5b8; background-size:0 608px; clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 100%);}
.depth1 .txt{position:relative;z-index:1000;padding-top:270px;text-align:center;color:#1a1a1a}
.depth1 .txt .st1{font-family: 'NEXON Lv1 Gothic OTF';font-size:51px;line-height:1.5;}
.depth1 .txt .st1 > span{display:block;}
.depth1 .txt .st1 > span > strong{font-weight:700;}
.depth1 .txt .st2{font-family:'IBM Plex Sans KR';font-weight:700;;font-size:75px;}
.depth1 .txt .st2 > span{display:block;}
.depth1 .txt .st2 > span > strong{font-weight:700;color:#5c85f1;}
.depth1 .txt .img{height:55px;padding:10px 0;background:url(images/bar.png) center no-repeat;}
.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:auto;padding-bottom:10%; background:url(images/come_bg.png) center no-repeat #ffe5b8; background-size:0 600px;}
.depth1 .txt{padding-top:190px;}
.depth1 .txt .img{background-size:auto 38.5px;}
.depth1 .txt .st1{font-size:36px;}
.depth1 .txt .st2{font-size:55px;}
.depth1 .left > img{height:600px;}
.depth1 .right > img{height:600px;}
}

@media only screen and (max-width:768px) {
.depth1{overflow:hidden;height:auto;padding-bottom:0;}
.depth1 .txt{padding-top:20%;padding-bottom:15%;}
.depth1 .txt .img{background-size:auto 18.86px;}
.depth1 .txt .st1{font-size:26px;line-height:1.4;}
.depth1 .txt .st2{font-size:38px;}
.depth1 .txt .img{height:35px; }
}

@media only screen and (max-width:530px) {
.depth1 .left{left:-10%;top:0;}
.depth1 .right{right:-10%;top:0;}
.depth1 .txt .st1{font-size:22px;}
.depth1 .txt .st2{font-size:30px;}
}

@media only screen and (max-width:400px) {
.depth1 .left{left:-25%;top:0;}
.depth1 .right{right:-95%;top:0;}
.depth1 .txt .st1{font-size:20px;}
.depth1 .txt .st2{font-size:27px;}
}

		

.depth2{padding:201px 0 59px;text-align:center;background:#f7efda;}

@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:#f7efda;}	
.depth3 .joytitle{display:flex;width:100%;max-width:986px;margin:0 auto;padding:203px 0 80px 0;}
.depth3 .joytitle > div{font-weight:700;font-size:83px;}
.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{font-family:'IBM Plex Sans KR';letter-spacing:-0.07em;line-height:1.2;}
.depth3 .joytitle > .txt > span{display:block;}
.depth3 .joytitle > .txt .c2{color:#4f86f9}
@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 56px 0;}
.depth3 .joytitle > div{font-size:58px;}
.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 28px 0;}
	.depth3 .joytitle > div{font-size:26px;}
	.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-bottom:23px;box-sizing:border-box;border-radius:50px;background:#ffffff;}
.depth3 .roundarea > .title1{padding:60px 10px 0 67px;font-family: 'IBM Plex Sans KR';font-size:51px;font-weight:700;letter-spacing:-0.04em;}
.depth3 .roundarea > .title2{padding:60px 67px 120px 67px;font-family: 'NEXON Lv1 Gothic OTF';font-size:38px;letter-spacing:-0.008em;}
.depth3 .roundarea > .title2 > strong{font-weight:700;color:#4f86f9}
.depth3 .roundarea > .title3{padding:80px 67px 80px 67px;font-family: 'NEXON Lv1 Gothic OTF';font-size:38px;letter-spacing:-0.008em;line-height:1.73;}
.depth3 .roundarea > .title3 > span{display:block;}
.depth3 .roundarea > .roundbox{overflow:hidden;position:relative;min-height:100px;margin:23px 27px 0 23px;border-radius:62px;background:#f2f2f2;}
.depth3 .roundarea > .roundbox.s2{background:#ffffff;}
.depth3 .roundarea > .roundbox > .line { position: absolute; top: 135px; left: -50%; width: 100%; height: 100px; background: #4a8aff; transform: rotate(-45deg); text-align: center; }
.depth3 .roundarea > .roundbox > .line > span{padding-left:245px;font-family: 'NEXON Lv1 Gothic OTF';font-weight:700;font-size:43px;color:#ffffff;line-height:100px;text-align:center;}
.depth3 .roundarea > .roundbox > .cafegift{display: flex;flex-wrap: wrap;width:674px; margin:0 auto; padding-top:170px;}
.depth3 .roundarea > .roundbox > .cafegift > dl > dt{height:395px; }
.depth3 .roundarea > .roundbox > .cafegift > dl > dd{display:flex;justify-content: flex-start;margin-top:30px;font-family: 'Spoqa Han Sans Neo', 'sans-serif';font-weight:700;font-size:31px;color:#20499d; text-align:center;}
.depth3 .roundarea > .roundbox > .cafegift > dl > dd > span{display:block;margin:0 auto;padding-left:40px; background:url(images/arrow.png) left center no-repeat;}
.depth3 .roundarea > .roundbox > .cafegift > dl:nth-child(1){flex: 0 0 40%;}
.depth3 .roundarea > .roundbox > .cafegift > dl:nth-child(2){flex: 0 0 60%;}
.depth3 .roundarea > .roundbox > .cafegift > dl:nth-child(3){flex: 0 0 100%;margin-top:80px;}
.depth3 .roundarea > .roundbox > .cafegift > dl:nth-child(1) > dt{background:url(images/gift1.png) center no-repeat;background-size:auto 100%;}
.depth3 .roundarea > .roundbox > .cafegift > dl:nth-child(2) > dt{background:url(images/gift2.png) center no-repeat;background-size:auto 100%;}
.depth3 .roundarea > .roundbox > .cafegift > dl:nth-child(3) > dt{height:461px;background:url(images/gift3.png) center no-repeat; background-size:100%;}
.depth3 .roundarea > .roundbox > .txt1{margin-top:60px;font-family:'IBM Plex Sans KR';font-weight:700;font-size:35px;color:#164097;text-align:center;letter-spacing:-0.03em}
.depth3 .roundarea > .roundbox > .txt2{margin:30px 0 40px 0;font-family:'NEXON Lv1 Gothic OTF';font-size:30px;color:#1a1a1a;text-align:center;letter-spacing:-0.008em;line-height:1.7;}
.depth3 .roundarea > .roundbox > .txt2 > span{display:block;}
.depth3 .roundarea > .roundbox > .txt2 > span > strong{font-weight:700;}
.depth3 .roundarea > .roundbox > .imgbox{text-align:center;}
.depth3 .roundarea > .roundbox > .imgbox.s1{margin-top:35px;height:377px;}
.depth3 .roundarea > .roundbox > .imgbox > img{width:auto;height:100%;}
.depth3 .roundarea > .roundbox > .imgbox.s2{margin-top:83px;height:353px;;}

.depth3 .roundarea > .roundbox > .cafegoods{display: flex;flex-wrap: wrap; align-items: center;justify-content: center;width:886px; margin:0 auto; gap: 0; padding-bottom:110px; box-sizing:border-box;}
.depth3 .roundarea > .roundbox > .cafegoods > dl > dt{margin-top:40px;text-align:center;}
.depth3 .roundarea > .roundbox > .cafegoods > dl > dt > img{height:100%;}
.depth3 .roundarea > .roundbox > .cafegoods > dl > dt.s1{height:301px;}
.depth3 .roundarea > .roundbox > .cafegoods > dl > dt.s2{height:301px;}
.depth3 .roundarea > .roundbox > .cafegoods > dl > dt.s3{height:417px;}
.depth3 .roundarea > .roundbox > .cafegoods > dl > dt.s4{height:300px;}
.depth3 .roundarea > .roundbox > .cafegoods > dl > dt.s5{height:358px;}
.depth3 .roundarea > .roundbox > .cafegoods > dl > dd{display:flex;justify-content: flex-start;margin-top:40px;font-family: 'Spoqa Han Sans Neo', 'sans-serif';font-weight:700;font-size:40px;color:#20499d; text-align:center;}
.depth3 .roundarea > .roundbox > .cafegoods > dl > dd > span{display:block;margin:0 auto;padding-left:40px; background:url(images/arrow.png) left center no-repeat;}
.depth3 .roundarea > .roundbox > .cafegoods > dl:nth-child(1){flex: 0 0 39.5%;}
.depth3 .roundarea > .roundbox > .cafegoods > dl:nth-child(2){flex: 0 0 59.5%;}
.depth3 .roundarea > .roundbox > .cafegoods > dl:nth-child(3){flex: 0 0 100%;margin-top:80px;}
.depth3 .roundarea > .roundbox > .cafegoods > dl:nth-child(4){flex: 0 0 100%;margin-top:80px;}
.depth3 .roundarea > .roundbox > .cafegoods > dl:nth-child(5){flex: 0 0 100%;margin-top:80px;}

.depth3 > .talk{text-align:center;}
.depth3 > .talk > p{padding:290px 0 140px 0;font-family:'NEXON Lv1 Gothic OTF';font-size:49px;line-height:1.63;letter-spacing:-0.008em;}
.depth3 > .talk > p > span{display:block;}
.depth3 > .talk > p > span > strong{font-weight:700;color:#4f86f9;}

.depth3 > .talk > img{padding-bottom:360px;}

@media only screen and (max-width:1200px) {
    .depth3 .roundarea { width:712px; border-radius:35px; }
    .depth3 .roundarea > .title1 { padding:42px 7px 0 46.9px; font-size:35.7px; }
    .depth3 .roundarea > .title2 { padding:42px 46.9px 84px 46.9px; font-size:26.6px; }
    .depth3 .roundarea > .title3 { padding:56px 46.9px 56px 46.9px; font-size:26.6px; }
    .depth3 .roundarea > .roundbox { min-height:70px; margin:16.1px 18.9px 0 16.1px; border-radius:43.4px; }
    .depth3 .roundarea > .roundbox > .line { top:94.5px; height:70px; }
    .depth3 .roundarea > .roundbox > .line > span { padding-left:171.5px; font-size:30.1px; line-height:70px; }
    .depth3 .roundarea > .roundbox > .cafegift { width:471.8px; padding-top:119px; }
    .depth3 .roundarea > .roundbox > .cafegift > dl > dt { height:276px; }
	.depth3 .roundarea > .roundbox > .cafegift > dl > dd > span{padding-left:28px; background:url(images/arrow.png) left center no-repeat; background-size:20px auto}
    .depth3 .roundarea > .roundbox > .cafegift > dl > dd { margin-top:21px; font-size:21.7px; }
    .depth3 .roundarea > .roundbox > .cafegift > dl:nth-child(3) > dt { height:322.7px; }
    .depth3 .roundarea > .roundbox > .txt1 { margin-top:42px; font-size:24.5px; }
    .depth3 .roundarea > .roundbox > .txt2 { margin:21px 0 28px 0; font-size:21px; }
    .depth3 .roundarea > .roundbox > .imgbox.s1 { margin-top:24.5px; height:263.9px; }
    .depth3 .roundarea > .roundbox > .imgbox.s2 { margin-top:58.1px; height:247px;}
    .depth3 .roundarea > .roundbox > .cafegoods { width:620.2px; padding-bottom:77px; }
    .depth3 .roundarea > .roundbox > .cafegoods > dl > dt { margin-top:28px; }
	.depth3 .roundarea > .roundbox > .cafegoods > dl > dd > span{padding-left:28px; background:url(images/arrow.png) left center no-repeat; background-size:20px auto;}
	.depth3 .roundarea > .roundbox > .cafegoods > dl > dt.s1{height:211px;}
	.depth3 .roundarea > .roundbox > .cafegoods > dl > dt.s2{height:211px;}
	.depth3 .roundarea > .roundbox > .cafegoods > dl > dt.s3{height:292px;}
	.depth3 .roundarea > .roundbox > .cafegoods > dl > dt.s4{height:210px;}
	.depth3 .roundarea > .roundbox > .cafegoods > dl > dt.s5{height:251px;}    .depth3 .roundarea > .roundbox > .cafegoods > dl > dd { margin-top:28px; font-size:28px; }
    .depth3 .roundarea > .roundbox > .cafegoods > dl:nth-child(1) { flex:0 0 39.5%; }
    .depth3 .roundarea > .roundbox > .cafegoods > dl:nth-child(2) { flex:0 0 59.5%; }
    .depth3 .roundarea > .roundbox > .cafegoods > dl:nth-child(3) { flex:0 0 100%; margin-top:56px;}
    .depth3 .roundarea > .roundbox > .cafegoods > dl:nth-child(4) { flex:0 0 100%; margin-top:56px;}
    .depth3 .roundarea > .roundbox > .cafegoods > dl:nth-child(5) { flex:0 0 100%; margin-top:56px; }
    .depth3 > .talk > p { padding:203px 0 98px 0; font-size:34.3px; }
    .depth3 > .talk > img { width:840px; padding-bottom:252px; }
}

@media only screen and (max-width:768px) {
	.depth3 .roundarea{width:90%;border-radius:17.5px;}
	.depth3 .roundarea > .title1 { padding:21px 3.5px 0 23.45px; font-size:17.85px; }
    .depth3 .roundarea > .title2 { padding:21px 23.45px 42px 23.45px; font-size:13.3px; }
    .depth3 .roundarea > .title3 { padding:28px 23.45px 28px 23.45px; font-size:13.3px; }
    .depth3 .roundarea > .roundbox { min-height:35px; margin:8.05px 9.45px 0 8.05px; border-radius:21.7px; }
    .depth3 .roundarea > .roundbox > .line { top:47.25px; height:35px; }
    .depth3 .roundarea > .roundbox > .line > span { padding-left:85.75px; font-size:15.05px; line-height:35px; }
    .depth3 .roundarea > .roundbox > .cafegift { width:235.9px; padding-top:59.5px; }
    .depth3 .roundarea > .roundbox > .cafegift > dl > dt { height:138px; }
	.depth3 .roundarea > .roundbox > .cafegift > dl > dd > span{padding-left:14px; background:url(images/arrow.png) left center no-repeat; background-size:10px auto}
    .depth3 .roundarea > .roundbox > .cafegift > dl > dd { margin-top:10.85px; font-size:10.85px; }
    .depth3 .roundarea > .roundbox > .cafegift > dl:nth-child(3) > dt { height:161.35px; }
    .depth3 .roundarea > .roundbox > .txt1 { margin-top:21px; font-size:12.25px; }
    .depth3 .roundarea > .roundbox > .txt2 { margin:10.5px 0 14px 0; font-size:10.5px; }
    .depth3 .roundarea > .roundbox > .imgbox.s1 { margin-top:12.25px; height:131.95px; }
    .depth3 .roundarea > .roundbox > .imgbox.s2 { margin-top:29.05px; height:123.5px; }
    .depth3 .roundarea > .roundbox > .cafegoods { width:310.1px; padding-bottom:38.5px; }
    .depth3 .roundarea > .roundbox > .cafegoods > dl > dt { margin-top:14px; }
	.depth3 .roundarea > .roundbox > .cafegoods > dl > dd > span{padding-left:14px; background:url(images/arrow.png) left center no-repeat; background-size:10px auto;}
	.depth3 .roundarea > .roundbox > .cafegoods > dl > dt.s1{height:106px;}
	.depth3 .roundarea > .roundbox > .cafegoods > dl > dt.s2{height:106px;}
	.depth3 .roundarea > .roundbox > .cafegoods > dl > dt.s3{height:146px;}
	.depth3 .roundarea > .roundbox > .cafegoods > dl > dt.s4{height:105px;}
	.depth3 .roundarea > .roundbox > .cafegoods > dl > dt.s5{height:126px;}    .depth3 .roundarea > .roundbox > .cafegoods > dl > dd { margin-top:14px; font-size:14px; }
    .depth3 .roundarea > .roundbox > .cafegoods > dl:nth-child(1) { flex:0 0 39.5%; }
    .depth3 .roundarea > .roundbox > .cafegoods > dl:nth-child(2) { flex:0 0 59.5%; }
    .depth3 .roundarea > .roundbox > .cafegoods > dl:nth-child(3),
    .depth3 .roundarea > .roundbox > .cafegoods > dl:nth-child(4),
    .depth3 .roundarea > .roundbox > .cafegoods > dl:nth-child(5) { flex:0 0 100%; margin-top:28px; }
    .depth3 > .talk > p { padding:101.5px 0 49px 0; font-size:17.15px; }
    .depth3 > .talk > img { width:90%; padding-bottom:126px; }
}



.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 .txt2 > span{display:inline-block;}
.depth4 .maparea .explan .info .txt3 { max-width: 460px; font-family: 'NEXON Lv1 Gothic OTF'; font-size: 25px; line-height: 1.6; 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:440px 0 0 0; background: url(images/grass.png) left top 60% no-repeat, url(images/grass.png) right top 60% 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:308px 0 0 0; background: url(images/grass.png) left top 60% no-repeat, url(images/grass.png) right top 60% 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:153px 0 0 0; background: url(images/grass.png) left top 60% no-repeat, url(images/grass.png) right top 60% 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);
    }
}