/* 공통 */
html { font-size:16px; }
.wrap { width:1200px; margin:0 auto;}

.up-on-scroll { opacity:0; transform:translateY(30px); transition-duration:0.5s; }
.up-on-scroll.action { opacity:1; transform:translateY(0); }

.left-on-scroll { opacity:0; transform:translate(-65%, -50%) !important; transition-duration:0.5s; }
.left-on-scroll.action { opacity:1; transform:translate(-50%, -50%) !important; }

.right-on-scroll { opacity:0; transform:translate(-35%, -50%) !important; transition-duration:0.5s; }
.right-on-scroll.action { opacity:1; transform:translate(-50%, -50%) !important; }

@media screen and (max-width:1280px) {
html { font-size:15px; }
.wrap { width:980px }
}

@media screen and (max-width:1024px) {
html { font-size:14px; }
.wrap { width:auto; padding:0 20px; }

.left-on-scroll { opacity:0; transform:translateY(30px) !important; transition-duration:0.5s; }
.left-on-scroll.action { opacity:1; transform:translateY(0) !important; }

.right-on-scroll { opacity:0; transform:translateY(30px) !important; transition-duration:0.5s; }
.right-on-scroll.action { opacity:1; transform:translateY(0) !important; }
}

@media screen and (max-width:768px) {
html { font-size:13px; }
.wrap { padding:0 15px; }
}

@media screen and (max-width:640px) {
html { font-size:12px; }
.wrap { padding:0 10px; }
}

@media screen and (max-width:400px) {
html { font-size:9px; }
}





#main .t { font-size:3.75rem; position:relative; padding:45px 0 0; font-weight:800; text-align:center; margin:0 0 35px; }
#main .t.white { color:#fff; }
#main .t.black { color:#333; }
#main .t span { display:block; padding:0 20px; position:absolute; top:0; left:50%; transform:translate(-50%, 0); color:#fff; font-size:1.5rem; border-radius:15px; letter-spacing:2px; font-weight:700; white-space:nowrap; line-height:1.875rem; }
#main .t span.green { background-color:#6bc113; }
#main .t span.blue { background-color:#297bdf; }

#main article { padding:120px 0; }

@media screen and (max-width:1280px) {
#main article { padding:100px 0; }
}

@media screen and (max-width:1024px) {
#main article { padding:80px 0; }
}

@media screen and (max-width:768px) {
#main article { padding:60px 0; }
}

@media screen and (max-width:640px) {
#main article { padding:40px 0; }
}





#main .visual { background-image:url('../img/main/bg_visual.png'); background-repeat:no-repeat; background-position:center; background-size:cover; position:relative; overflow:hidden; padding:0; }
#main .visual > div { position:relative; text-align:right; padding-top:80px; padding-bottom:45px; }
#main .visual > div img { margin:0 -3% 0 0; width:63.917%; position:relative; z-index:500; }
#main .visual > div div { position:absolute; top:50%; left:2%; transform:translate(0, -50%); z-index:500; }
#main .visual > div div p { text-align:center; font-size:2.25rem; color:#fff; line-height:3.125rem}
#main .visual > div div p span { color:#6bc113; font-weight:700; }
#main .visual img.snowfall-flakes { opacity:0.95; }

@media screen and (max-width:1280px) {
}

@media screen and (max-width:1024px) {
}

@media screen and (max-width:768px) {
#main .visual > div { text-align:center; padding-top:80px; padding-bottom:40px; }
#main .visual > div img { margin:0 0 40px; width:80%; }
#main .visual > div div { position:static; top:auto; left:auto; transform:translate(0, 0); }
}

@media screen and (max-width:640px) {
#main .visual > div img { margin:0 0 30px; width:auto; }
}





#main .covid { background-image:url('../img/main/bg_covid.png'); background-repeat:no-repeat; background-position:center; background-size:cover; }
#main .covid > div {  }
#main .covid > div p { color:#fff; text-align:center; font-size:2.25rem; line-height:3.125rem; font-weight:700; }

@media screen and (max-width:1280px) {
}

@media screen and (max-width:1024px) {
}

@media screen and (max-width:768px) {
}

@media screen and (max-width:640px) {
#main .covid > div p br { display:none; }
}





#main .story { background-image:url('../img/main/bg_story.png'); background-repeat:no-repeat; background-position:center top; background-size:cover; overflow:hidden; position:relative; }
#main .story > div { padding-top:60px; position:relative; z-index:100; }
#main .story > div div { margin:0 auto; width:854px; }
#main .story > div div div { padding:0 0 62.52%; position:relative; }
#main .story > div div div iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none; background-color:#ccc;  }
#main .story > div div div img { position:absolute; bottom:-16.5%; right:-20.5%; width:41.5%; }
#main .story > img { position:absolute; top:0; left:50%; transform:translate(-50%, 0); width:100%; animation:blink-effect 1s step-end infinite; }
@keyframes blink-effect { 50% { opacity: 0; } }

@media screen and (max-width:1280px) {
#main .story > div { padding-top:45px; }
}

@media screen and (max-width:1024px) {
#main .story > div { padding-top:30px; }
#main .story > div div { width:auto; }
}

@media screen and (max-width:768px) {
#main .story > div { padding-top:15px; }
}

@media screen and (max-width:640px) {
#main .story > div { padding-top:0; }
}





#main .peace { background-image:url('../img/main/bg_peace.png'); background-repeat:no-repeat; background-position:center; background-size:cover; }
#main .peace > div {  }
#main .peace > div ul { position:relative; margin:50px 0; }
#main .peace > div ul li.image { position:absolute; top:0; width:38.5%; height:100%; }
#main .peace > div ul li.image img { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); max-width:100%; max-height:100%; }
#main .peace > div ul li.text { width:61.5%; position:relative; overflow:hidden; }
#main .peace > div ul li.text img { width:100%; }
#main .peace > div ul li.text div { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:90%; max-height:100%; text-align:center; }
#main .peace > div ul li.text div p { font-size:1.625rem; line-height:2.3rem; color:#333; }
#main .peace > div ul li.text div p br { display:block; }
#main .peace > div ul li.text div p br.m { display:block !important; }
#main .peace > div ul.left li.image { left:0; }
#main .peace > div ul.left li.text { margin:0 0 0 38.5%; }
#main .peace > div ul.right li.image { right:0; }
#main .peace > div ul.right li.text { margin:0 38.5% 0 0; }

@media screen and (max-width:1280px) {
}

@media screen and (max-width:1024px) {
#main .peace > div ul { margin:10% 0 0; }
#main .peace > div ul:first-child { margin-top:0; }
#main .peace > div ul li.image { position:static; top:auto; width:85%; height:auto; text-align:center; }
#main .peace > div ul li.image img { position:static; top:auto; left:auto; transform:translate(0, 0); max-width:100%; max-height:100%; }
#main .peace > div ul li.text { width:85%; }
#main .peace > div ul.left li.image ,
#main .peace > div ul.left li.text { margin:0 auto; }
#main .peace > div ul.right li.image ,
#main .peace > div ul.right li.text { margin:0 auto; }
}

@media screen and (max-width:768px) {
#main .peace > div ul li.image { padding:0 0 30px; }
#main .peace > div ul li.text { width:95%; }
}

@media screen and (max-width:640px) {
#main .peace > div ul li.image { padding:0 0 15px; }
#main .peace > div ul li.text { width:100%; background-color:#f7e5db; border-radius:5px; }
#main .peace > div ul li.text img { display:none; }
#main .peace > div ul li.text div { position:static; top:auto; left:auto; transform:translate(0, 0); width:auto; margin:4px; }
#main .peace > div ul li.text div.red { border:1px solid #c32323; }
#main .peace > div ul li.text div.blue { border:1px solid #0a3896; }
#main .peace > div ul li.text div.green { border:1px solid #488b04; }
#main .peace > div ul li.text div p { margin:2px; padding:14px; }
#main .peace > div ul li.text div.red p { border:1px dashed #c32323; }
#main .peace > div ul li.text div.blue p { border:1px dashed #0a3896; }
#main .peace > div ul li.text div.green p { border:1px dashed #488b04; }
#main .peace > div ul li.text div p br { display:none; }
}





#main .gift { background-image:url('../img/main/bg_gift.png'); background-repeat:no-repeat; background-position:center; background-size:cover; position:relative; overflow:hidden; }
#main .gift > div { position:relative; text-align:right;  }
#main .gift > div img { margin:0; width:47.75%; position:relative; z-index:500; }
#main .gift > div div { position:absolute; top:50%; left:2%; transform:translate(0, -50%); z-index:500; }
#main .gift > div div p { text-align:center; font-size:2.25rem; color:#fff; line-height:3.125rem}
#main .gift > div div p span { color:#6bc113; font-weight:700; }

@media screen and (max-width:1280px) {
}

@media screen and (max-width:1024px) {
}

@media screen and (max-width:768px) {
#main .gift > div { text-align:center; }
#main .gift > div img { margin:0 0 40px; width:80%; }
#main .gift > div div { position:static; top:auto; left:auto; transform:translate(0, 0); }
}

@media screen and (max-width:640px) {
#main .gift > div img { margin:0 0 30px; width:auto; }
#main .gift > div div p br { display:none; }
#main .gift > div div p br.m { display:block; }
}





#main .support { background-image:url('../img/main/bg_support.png'); background-repeat:no-repeat; background-position:center bottom; background-size:cover; }
#main .support > div {  }
#main .support > div ul { overflow:hidden; margin:-2%; }
#main .support > div ul li { float:left; width:46%; margin:2%; border-radius:20px; background-color:rgba(255, 255, 255, 0.9); text-align:center; padding:70px 45px; box-sizing:border-box; }
#main .support > div ul li span { display:inline-block; padding:0 20px; color:#fff; font-size:1.5rem; border-radius:20px; letter-spacing:2px; font-weight:700; background-color:#066be7; line-height:2.313rem; }
#main .support > div ul li p { margin:65px 0 50px; font-size:3.125rem; color:#333; font-weight:700; }
#main .support > div ul li a { display:inline-block; width:215px; color:#066be7; font-size:1.875rem; border-radius:31px; font-weight:700; line-height:3.625rem; border:2px solid #066be7; text-align:center; }
#main .support > div ul li a:hover { background-color:#066be7; color:#fff; }

@media screen and (max-width:1280px) {
#main .support > div ul li { padding:60px 35px; }
#main .support > div ul li p { min-height:159px; margin:60px 0 45px; }
}

@media screen and (max-width:1024px) {
#main .support > div ul li { padding:50px 25px; }
#main .support > div ul li p { min-height:147px; margin:55px 0 40px; }
}

@media screen and (max-width:768px) {
#main .support > div ul li { padding:40px 15px; float:none; width:auto; }
#main .support > div ul li p { min-height:inherit; margin:50px 0 35px; }
}

@media screen and (max-width:640px) {
#main .support > div ul li { padding:30px 15px; }
#main .support > div ul li p { margin:45px 0 30px; font-size:2.25rem; }
}