@charset "UTF-8"; 

.v2 header .gnb-bg {top:110px}
#fp-nav{right:17px!important}
#fp-nav ul li a span, .fp-slidesNav ul li a span{background: #f5f5f5;!important}
#header { position: fixed!important; } 
::-webkit-scrollbar { display: none; } 
.sr-only,
.sr-only:before,
.sr-only:after { width:1px; height:1px; opacity:0; color:rgba(0,0,0,0); position:absolute; top:-9999em; left:-9999em; text-indent:-9999em } 

.clear { clear:both; height:0; } 
.clearfix:after { content:''; display:block; clear:both } 

.floating-support-area { position:fixed; top:170px; right:4%; z-index:99; width:138px; height:187px; background-image:url(../images/floating-banner-bg.png); background-repeat:no-repeat } 
.floating-support-area>a { display:block; width:100%; height:100%; font-size:24px; color:#0991e9; text-align:center; font-weight:700; padding-top:140px } 

section { position:relative } 
.dots-right { right:2.5%!important } 
.dots li a:before { width:10px!important; height:10px!important; background:transparent!important; border:1px solid #fff!important; transition:none!important } 
.dots li a.active:before { width:12px!important; height:12px!important; background:#fff!important; border:inherit!important; margin-top:-1px!important; left:9px!important } 

.section1 { background-image:url(../images/section1-bg.jpg); background-size:cover; background-repeat:no-repeat; background-position:center top } 
.section2 { background-image:url(../images/section2-bg.jpg); background-size:cover; background-repeat:no-repeat; background-position:center center } 
.section3 { background-image:url(../images/section3-bg.jpg); background-size:cover; background-repeat:no-repeat; background-position:center center } 
.section4 { background-image:url(../images/section4-bg.jpg); background-size:cover; background-repeat:no-repeat; background-position:center center } 
.section5 { background-image:url(../images/section5-bg.jpg); background-size:cover; background-repeat:no-repeat; background-position:center center } 
.section6 { background-image:url(../images/section6-bg.jpg); background-size:cover; background-repeat:no-repeat; background-position:center center } 
.section7 { background-image:url(../images/section7-bg.jpg); background-size:cover; background-repeat:no-repeat; background-position:center bottom; background-color:#212833 } 
.section8 { background-color:#415169 } 
.section9 { background-image:url(../images/section9-bg.jpg); background-size:cover; background-repeat:no-repeat; background-position:center top } 
.section10 { background-image:url(../images/section10-bg.jpg); background-size:cover; background-repeat:no-repeat; background-position:center top } 

.section1 .camp-label { width:116px; height:116px; background-color:#0991e9; color:#faeb00; line-height:116px; font-size:20px; text-align:center; line-height:27px; padding:30px 0; font-weight:500; position:absolute; top:165px; left:60px } 
.section1 .camp-label>span { display:block } 
.section1 .inner { padding-top:150px; text-align:center; line-height:100px; letter-spacing:-1.5px } 
.section1 .inner h3 { font-family:Verdana; color:#0991e9; font-size:120px; font-weight:400 } 
.section1 .inner .sub-title { font-size:50px; color:#faeb00; margin-bottom:70px } 

.section7 .inner { text-align:center; color:#fff; padding-top:5vw; } 
.section7 .inner h4 { font-size:35px } 
.section7 .inner h4::after { content:""; display:block; width:70px; height:5px; margin:40px auto; background-color:#c0935d; border-radius:15px } 
.section7 .inner h4 .bg-txt { display:inline-block; padding:0 8px 3px 8px; background-color:#faeb00; color:#0991e9; line-height:40px } 
.section7 .inner .sub-txt { font-size:20px; line-height:28px } 
.section7 .inner .ukraine-support-list { width:1120px; margin:auto; margin-top:40px; margin-bottom:63px } 
.section7 .inner .ukraine-support-list>ul { margin-left:-20px; margin-right:-20px } 
.section7 .inner .ukraine-support-list>ul>li { float:left; width:33.3333%; padding-top:188px } 
.section7 .inner .ukraine-support-list>ul>li:nth-child(1) { background-image:url(../images/section7-img1.jpg); background-repeat:no-repeat; background-position:center top } 
.section7 .inner .ukraine-support-list>ul>li:nth-child(2) { background-image:url(../images/section7-img2.jpg); background-repeat:no-repeat; background-position:center top } 
.section7 .inner .ukraine-support-list>ul>li:nth-child(3) { background-image:url(../images/section7-img3.jpg); background-repeat:no-repeat; background-position:center top } 
.section7 .inner .ukraine-support-list>ul>li>.list-inner { padding-left:20px; padding-right:20px; text-align:left } 
.section7 .inner .ukraine-support-list>ul>li>.list-inner>.txt { width:280px; height:140px; padding:20px 15px; background-color:#212833; float:right; } 
.section7 .inner .ukraine-support-list>ul>li>.list-inner>.txt>h5 { font-size:20px } 
.section7 .inner .ukraine-support-list>ul>li>.list-inner>.txt>h5::after { content:""; display:block; margin-top:10px; margin-bottom:14px; width:53px; height:1px; background-color:#c0935d } 
.section7 .inner .ukraine-support-list>ul>li>.list-inner>.txt>ul>li { position:relative; padding-left:10px } 
.section7 .inner .ukraine-support-list>ul>li>.list-inner>.txt>ul>li::before { content:"-"; position:absolute; left:0 } 

.section8 .inner { text-align:center; padding-top:7%; font-size:21px; line-height:28px; color:#fff } 
.section8 .inner h4::after { content:""; display:block; width:70px; height:5px; margin:40px auto; background-color:#c0935d; border-radius:15px } 
.section8 .inner .section8-slider { width:850px; height:433px; margin:auto; margin-top:40px; box-shadow:7px 5px 20px 7px #313d4f } 
.section8 .inner .section8-slider .video-wrapper { position:relative; padding-bottom:48%; padding-top:25px; height:0 } 
.section8 .inner .section8-slider .video-wrapper iframe { position:absolute; top:0; left:0; width:100%; height:100% } 
.section8 .inner .section8-slider .slick-dots { bottom:-45px } 
.section8 .inner .section8-slider .slick-dots li { width:15px; height:15px; margin:0 10px } 
.section8 .inner .section8-slider .slick-dots li button { width:15px; height:15px; border-radius:50%; border:2px solid #fff; background-color:transparent } 
.section8 .inner .section8-slider .slick-dots li.slick-active button { background-color:#fff } 
.section8 .inner .section8-slider .slick-dots li button::before { display:none } 

.section9 .inner { text-align:center; color:#fff; padding-top:228px; font-size:21px; line-height:28px; color:#fff } 
.section9 .inner h4 { font-size:60px; font-family:Verdana; color:#faeb00; font-weight:400 } 
.section9 .inner h4::after { content:""; display:block; width:70px; height:5px; margin:40px auto; background-color:#c0935d; border-radius:15px } 
.section9 .inner .ukraine-swiper { width:1230px; margin:auto; margin-top:30px; padding-bottom:15px } 
.section9 .inner .ukraine-swiper .swiper-wrapper .swiper-slide img { width:100% } 
.section9 .inner .ukraine-swiper .swiper-pagination { top:initial; bottom:0 } 
.section9 .inner .ukraine-swiper .swiper-button-next,
.section9 .inner .ukraine-swiper .swiper-button-prev { background-color:rgba(255,255,255,.75); width:66px; height:66px; color:#fff } 
.section9 .inner .ukraine-swiper .swiper-button-next { right:0 } 
.section9 .inner .ukraine-swiper .swiper-button-prev { left:0 } 
.section9 .inner .ukraine-swiper .swiper-button-next:after, 
.section9 .inner .ukraine-swiper .swiper-button-prev:after { font-size:28px; text-shadow:1px 1px 13px #000 } 
.section9 .inner .ukraine-swiper .swiper-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background-color:#fff } 

.section10 .inner { text-align:center; color:#fff; font-size:20px; font-weight:500; position:absolute; top:53%; left:50%; transform: translate(-50%, -50%) } 
.section10 .inner .eng-message::after { content:""; display:block; width:1px; height:32px; background-color:#fff; margin:20px auto; font-family:Verdana; font-size:21px; font-weight:400 } 

.btn-ukraine-support { font-size:40px; font-weight:600; color:#0991e9; background-color:#faeb00; padding:14px 95px; border-radius:50px; z-index:9;position:relative} 
.right-box { width:550px; height:100%; background-color:rgba(0,0,0,.75); color:#fff; font-size:23px } 
.right-box .inner-txt { padding-top: 240px; opacity: 0; } 
 /* padding-left:145px; */
.section2 .img-txt { position:absolute; bottom:80px; right: -350px; opacity: 0; } 
.section3 .img-txt { position:absolute; bottom:70px; right: -310px; opacity: 0; } 
.section4 .img-txt { position:absolute; bottom:0px; right: -350px; opacity: 0; } 
.section5 .img-txt { position:absolute; bottom:150px; right: -200px; opacity: 0; } 
.section6 .img-txt { position:absolute; bottom:111px; right: -100px; opacity: 0; } 

.mt30 { margin-top:30px } 
.mt60 { margin-top:60px } 

.txt-green { color:#6cd448!important } 



body{height:auto!important;}
html,body { margin:0; padding:0; width:100%; height:auto; } 
.mainfullbox { width:100%; height:100%; position:relative; color:#ffffff; } 

#mainfull_navi { position: fixed; top: 45%; right: 38px; z-index: 8992; } 
#mainfull_navi ul { margin:0; padding:0; list-style:none; } 
#mainfull_navi ul li { margin-bottom:10px; } 
#mainfull_navi p { border:2px solid #fff; width:12px; height:12px; border-radius:10px; text-align:center; margin:0 auto; font-size:12px; color:#fff; vertical-align:middle; line-height:10px; } 
#mainfull_navi p:hover { background-color:#f50; } 
#mainfull_navi a.on p { background-color:#f50 !important; } 
#mainfull_navi p.on { background-color:#fff !important; } 
@media screen and (max-width:1025px){
 #mainfull_navi { right:5%; } 
 }

.modal-harim { display: none; z-index: 500; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.6); } 
.modalBox-harim {height: 100%;position: relative; text-align: center;left : 50%; position : sticky; cursor: -webkit-zoom-out;display: flex;flex-direction: row;justify-content: center;align-items: center;} 
.modalBox-harim>img {cursor: -webkit-zoom-out; } 
.swiper-slide>img:hover { cursor: -webkit-zoom-in; } 

@media screen and (max-width:950px){
 .section2 .img-txt { right: -460px; } 
 .section3 .img-txt { right: -374px; } 
 .section5 .img-txt { right: -360px; bottom: 100px; } 
 .section6 .img-txt { right: -122px; bottom: 0; } 
 }



 /* 빛날리기 애니메이션 CSS */

 .snow { position: absolute; min-width: 50vw; min-height: 50vh; height: 100%; width: 50%; top: 0; left: 0; color:#ffff00; } 

.snow .svg { position: absolute; width: 100%; height: 100%; } 

#snow-top-layer { will-change: transform; transform: translateY(0); animation: fall 22.5s infinite linear; } 

#snow-bottom-layer { will-change: transform; transform: translateY(0); animation: fall 45s infinite linear; } 

@keyframes fall { 100% { transform: translateY(-768px); } 
 }