@charset "utf-8";

/* sandoll-andante */
/*@font-face{
  font-family: 'sandoll-andante', sans-serif;
	font-weight: 400;
	font-style: normal;
}*/

/* sandoll-andante 대체폰트 */
@font-face {
    font-family: 'SchoolSafeTravel';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2402_keris@1.0/TTHakgyoansimYeohaengR.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}
/*@font-face {
    font-family: 'SchoolSafeTravel';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts-20-12@1.0/ELAND_Nice_M.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: '62570';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.3/62570체.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SchoolSafeTravel';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2402_keris@1.0/TTHakgyoansimYeohaengR.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}*/

/*= RESET =*/
*{padding:0; margin:0; text-decoration:none; list-style:none; box-sizing:border-box;}
body {overflow-x:hidden; zoom:1;}
ul, ol{list-style-type:none;}
img,fieldset{border:none;}
body, input, textarea, select, button, table{font-size:13px; color:#666; font-family:"SpoqaHanSansNeo", "Apple SD Gothic Neo", Helvetica, sans-serif, Arial; font-weight: 400;}
a{text-decoration:none; color:#666; }
a:link, a:visited{text-decoration:none; color:#666; /*outline: none!important;*/}
a:hover, a:active{text-decoration:none; color:#666; /*outline: none!important;*/}
input{border:0;}
select{vertical-align: top;height:24px;border:1px solid #c5c5c5;}
iframe{border: 0; margin: 0; padding: 0;}
button {overflow: visible; padding: 0; margin: 0; background: none; border: 0;}

/*////////////header////////////*/
/*common*/
.emergency_relief_cnts_top {
  height: 30px;
}
.CampaignList{left: 47.75%; margin-left: -274px; top: 30px;}
.CampaignList ul {padding: 6px 14px !important;}
.CampaignList ul li {margin-bottom: 7px;}

/*white*/
.emergency_relief_cnts_top {
  background: #fff;
  border-bottom-color: #dadada;
}
.emergency_relief_cnts_top ul.util_right li a {
  color: #7f7f7f;
}
.emergency_relief_cnts_top ul.util_right .save_user,
.emergency_relief_cnts_top ul.util_right .save_user strong{ 
  color:#000;
}

/*brown*/
/*.emergency_relief_cnts_top {height: 30px;}*/

/*footer
#footer {width: 100%; height: auto; background: #fffbf7; border-top: 2px solid #ed425a;}
#footer .inner {width: 1000px; margin: 0 auto; position: relative; min-height: 72px; padding-top: 22px;}*/

/*common*/
body.on{overflow: hidden;}
#wrap{margin: 0 auto; max-width: 1920px; min-width: 1250px;}

/*= CONTENT =*/
.content_area{margin: 0 auto; max-width: 1920px; min-width: 1320px;}

.div_sec{max-width:1920px; min-width:1248px; overflow:hidden; position:relative;}
.div_sec img{display:block;}
.div_sec img.center_img{position: relative; top: 0; left: 50%; transform: translateX(-50%); display: block; max-width: none;}
.div_sec .screen_out {overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px;}
.div_sec .div_inner{position: absolute; top: 0; left: 50%; bottom:0; margin-left: -624px; width: 1248px;}

.areaTop{display: flex; justify-content: center; align-items: center; height: 60px; background: #efe4d4;}
.areaTop span{font-size: 20px; color: #59472c;}

.area01{height: 1698px;}
.area01 .a1_logo{position: absolute; top: 25px; left:0;}
.area01 h1{position: absolute; top: 120px; left:0; opacity:0; transition: 1s;}
.area01 h1.on{opacity: 1;}
.area01 .a1_title01{position: absolute; top: 484px; left:0; font-size: 26px; color: #51201d; letter-spacing: -0.05em; line-height: 1.461;}
.area01 .a1_title02{position: absolute; top: 610px; left:0; font-weight: 700; font-size: 26px; color: #51201d; letter-spacing: -0.05em; line-height: 1.461;}
.area01 .a1_box{position: relative; top:102px; left: 434px; width: 920px; height: 732px;}
.area01 .a1_box .a1b_kit{position: absolute; top:107px; right:150px; opacity: 0; transition:.5s .5s;}
.area01 .a1_box .a1b_witch{position: absolute; top:224px; left:122px; opacity: 0; transition:.5s .85s;}
.area01 .a1_box .a1b_frame{position: relative;}
.area01 .a1_confetti1 > span,
.area01 .a1_confetti2 > span{position: absolute; scale:0;}
.area01 .a1_confetti1 > span.a1c1{top:168px; left:322px;}
.area01 .a1_confetti1 > span.a1c2{top:117px; left:332px;}
.area01 .a1_confetti1 > span.a1c3{top:187px; left:343px;}
.area01 .a1_confetti1 > span.a1c4{top:126px; left:359px;}
.area01 .a1_confetti1 > span.a1c5{top:214px; left:413px;}
.area01 .a1_confetti1 > span.a1c6{top:107px; left:432px;}
.area01 .a1_confetti2 > span.a1c1{top:392px; left:223px;}
.area01 .a1_confetti2 > span.a1c2{top:450px; left:226px;}
.area01 .a1_confetti2 > span.a1c3{top:350px; left:236px;}
.area01 .a1_confetti2 > span.a1c4{top:410px; left:248px;}
.area01 .a1_confetti2 > span.a1c5{top:382px; left:282px;}
.area01 .a1_confetti2 > span.a1c6{top:432px; left:296px;}
.area01 .a1_btn{position: absolute; top: 718px; left:0; display: flex; justify-content: center; align-items: center; width: 477px; height: 100px; font-weight: 700; font-size: 30px; color: #fff; letter-spacing: -0.025em; background: url('/webPub/sc_2025/myown_manyo/images/a1_btn_bg.png')no-repeat; background-size: cover;}
.area01 .a1_moon{position: absolute; top:800px; right:-28px;}
.area01 .div_movie{position:absolute; top:905px; left:50%; margin-left:-532px; display:block; width:1065px; }
.area01 .div_movie .load_movie{position:relative; aspect-ratio: 16 / 9;}
.area01 .div_movie .load_movie iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

/*a1 animation*/
.area01 .a1_box.on .a1b_kit{right:180px; opacity: 1;}
.area01 .a1_box.on .a1b_witch{opacity: 1;}

.area02 {margin-top: -148px; height: 960px;}
.area02 .a2_text1{position: absolute; top: 204px; left:0; font-size: 26px; color: #fff; letter-spacing: -0.05em; line-height: 1.461;}
.area02 .a2_title{position: absolute; top: 350px; left:0; font-family: 'sandoll-andante', 'SchoolSafeTravel'; font-size: 45px; color: #fff; letter-spacing: -0.05em; line-height: 1.376; text-shadow: 1px 1px 2px rgba(28,6,70,0.82);}
.area02 .a2_text2{position: absolute; top: 496px; left:0; font-size: 26px; color: #fff; letter-spacing: -0.05em; line-height: 1.461; text-shadow: 1px 1px 2px rgba(28,6,70,0.82);}
.area02 .a2_text2 span{display: inline-block; padding: 5px; font:inherit; font-weight: 700; background: #ff6a79; line-height: 1;}
.area02 .a2_wave1{position: absolute; top:624px; left:-335px;}
.area02 .a2_wave2{position: absolute; top:420px; right:-335px;}
.area02 .a2_wave3{position: absolute; top:608px; right:-335px;}
.area02 .crystal_area{position: absolute; top:197px; right:135px;}
.area02 .crystal_area .a2_crystal{position: relative}
.area02 .crystal_area .a2_effect{position: absolute; top:-23px; left:-17px; opacity: 0; scale: 0.6; transition: .5s;}
.area02 .crystal_area .a2_star{position: absolute; top:-95px; left:-87px; opacity: 0; scale: 0.9; transition: .5s .5s;}
.area02 .crystal_area .a2_cryText1{position: absolute; top:36px; left:10px;}
.area02 .crystal_area .a2_cryText2{position: absolute; top:36px; left:10px;}
.area02 .crystal_area .a2_cryText3{position: absolute; top:36px; left:10px;}
.area02 .a2_witch{position: absolute; top:377px; right:2px;}

/*a2 crystal animation*/
.area02 .crystal_area.on .a2_effect{opacity: 1; scale: 1;}
.area02 .crystal_area.on .a2_star{opacity: 1; scale: 1;}

.glow{
  border-radius: 100% 100% 84% 89%;
  position: absolute;
  top: 0;
  left:8px;
  width:450px;
  height:438px;
  -webkit-animation: glowing 1500ms infinite;
  -moz-animation: glowing 1500ms infinite;
  -o-animation: glowing 1500ms infinite;
  animation: glowing 1500ms infinite;
}
@-webkit-keyframes glowing {
    0% { background-color: #9cb0ea; box-shadow: 0 0 3px #c3f0ff; opacity: .4;}
    50% { background-color: #c3e7fd; box-shadow: 0 0 100px #c6e4ff; opacity: .6;}
    100% { background-color: #9cb0ea; box-shadow: 0 0 3px #b3ecff; opacity: .4;}
}
@-moz-keyframes glowing {
  0% { background-color: #9cb0ea; box-shadow: 0 0 3px #c3f0ff; opacity: .4;}
  50% { background-color: #c3e7fd; box-shadow: 0 0 100px #c6e4ff; opacity: .6;}
  100% { background-color: #9cb0ea; box-shadow: 0 0 3px #b3ecff; opacity: .4;}
}
@-o-keyframes glowing {
  0% { background-color: #9cb0ea; box-shadow: 0 0 3px #c3f0ff; opacity: .4;}
  50% { background-color: #c3e7fd; box-shadow: 0 0 100px #c6e4ff; opacity: .6;}
  100% { background-color: #9cb0ea; box-shadow: 0 0 3px #b3ecff; opacity: .4;}
}
@keyframes glowing {
  0% { background-color: #9cb0ea; box-shadow: 0 0 3px #c3f0ff; opacity: .4;}
  50% { background-color: #c3e7fd; box-shadow: 0 0 100px #c6e4ff; opacity: .6;}
  100% { background-color: #9cb0ea; box-shadow: 0 0 3px #b3ecff; opacity: .4;}
}

.area03 {margin-top: -210px; height: 2830px;}
.area03 .a3_title{position: absolute; top: 140px; left:0; width:100%; font-family:  'sandoll-andante', 'SchoolSafeTravel'; font-size: 54px; color: #222; letter-spacing: -0.05em; line-height: 1.2; text-align: center; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, -1px 0 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, 0 1px 0 #fff; opacity: 0;}
.area03 .a3_title.on{
  -webkit-animation: fade-in-fwd 0.6s 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	animation: fade-in-fwd 0.6s 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.a3_giftArea{position: absolute; width:100%; text-align: center;}
.a3_giftArea.a3ga1{top:269px; left: 0;}
.a3_giftArea.a3ga2{top:1161px; left: 0;}
.a3_giftArea.a3ga3{top:1987px; left: 0;}
.a3_giftArea .a3_gtitle{display: inline-block;}
.a3_giftArea .a3_subtitle{margin-top: 32px; font-weight: 700; font-size: 40px; color: #222222; letter-spacing: -0.05em; line-height: 1.4; text-align: center;}
.a3_giftArea .a3_text{margin-top: 10px; font-size: 26px; color: #222222; letter-spacing: -0.05em; line-height: 1.461; text-align: center;}
.a3_giftArea .a3_text span{font: inherit; font-weight: 700;}
.a3_giftArea.a3ga1 .a3_gcontent{margin-top: 72px; display: flex; justify-content: center; gap:22px;}
.a3_giftArea.a3ga1 .a3_gcontent .a3gc_right{position: relative;}
.a3_giftArea.a3ga1 .a3_gcontent .a3gc_right ul{position: absolute; top:0; left: 0; right: 0; bottom:0;}
.a3_giftArea.a3ga1 .a3_gcontent .a3gc_right ul li{display: flex; align-items: center; margin-left:28px; text-align: left;}
.a3_giftArea.a3ga1 .a3_gcontent .a3gc_right ul li.a3g1_itme1{margin-top:20px; height:146px;}
.a3_giftArea.a3ga1 .a3_gcontent .a3gc_right ul li.a3g1_itme2{margin-top:10px; height:157px;}
.a3_giftArea.a3ga1 .a3_gcontent .a3gc_right ul li.a3g1_itme3{height:157px;}
.a3_giftArea.a3ga1 .a3_gcontent .a3gc_right ul li > span{width:108px;}
.a3_giftArea.a3ga1 .a3_gcontent .a3gc_right ul li > span img {transform: translateZ(0); will-change: transform;}
.a3_giftArea.a3ga1 .a3_gcontent .a3gc_right ul li.a3g1_itme1 > span img{transform-origin: 32px 52px;}

.a3_giftArea.a3ga1 .a3_gcontent .a3gc_right ul li > p{font-size: 18px; color: #222222; letter-spacing: -0.05em; line-height: 1.666;}
.a3_giftArea.a3ga1 .a3_gcontent .a3gc_right ul li > p > b{display: inline-block; margin-bottom: 4px; font:inherit; font-weight: 700;}
.a3_giftArea.a3ga1 .a3_gcontent .a3gc_right .a3g1_noti{position: absolute; bottom: 30px; left: 0;  width: 100%; font-size: 16px; color: #666666; letter-spacing: -0.05em; line-height: 1.3;}
.a3_giftArea.a3ga2 .a3g2_card1{position: absolute; top:182px; left:460px;}
.a3_giftArea.a3ga2 .a3g2_card2{position: absolute; top:154px; left:89px;}
.a3_giftArea.a3ga2 .a3g2_card3{position: absolute; top:280px; left:720px;}
.a3_giftArea.a3ga2 .a3g2_talk1{position: absolute; top:622px; left:26px;}
.a3_giftArea.a3ga2 .a3g2_talk2{position: absolute; top:156px; right:40px;}
.a3_giftArea.a3ga2 .a3g2_star1{position: absolute; top:518px; left:0;}
.a3_giftArea.a3ga2 .a3g2_star2{position: absolute; top:553px; right:0;}
.a3_giftArea.a3ga3 .a3_gcontent{margin-top:28px; display: flex; justify-content: center;}
.a3_giftArea.a3ga3 .a3_gcontent .a3gc_left{margin-right: 26px; margin-left: 84px;}
.a3_giftArea.a3ga3 .a3_gcontent .a3gc_right{margin-top: -16px;}

/*a3 item animation*/
.flicker {
  animation: flicker 2s steps(1) infinite;
}

.swing30 {
  animation: swing30 2s steps(1) infinite;
}
.swing25re {
  animation: swing25re 2s steps(1) infinite;
}

.updown1 {
  animation: updown1 5s ease-in-out infinite;
}

.updown2 {
  animation: updown2 3s ease-in-out infinite;
}

.cardupdown1 {
  animation: cardupdown1 5s ease-in-out infinite;
}

.talkupdown1 {
  animation: talkupdown1 5s ease-in-out infinite;
}

.talkupdown2 {
  animation: talkupdown2 5s 1s ease-in-out infinite;
}

@keyframes flicker {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100%  { opacity: 0; }
}

@keyframes swing30 {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(30deg); }
  100%  { transform: rotate(0deg); }
}

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

@keyframes updown1 {
  0% {
    transform: translateY(8px);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(8px);
  }
}

@keyframes updown2 {
  0% {
    transform: translateY(8px);
  }
  50% {
    transform: translateY(-2px);
  }
  100% {
    transform: translateY(8px);
  }
}

@keyframes cardupdown1 {
  0% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(-10px);
  }
}

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

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

@-webkit-keyframes fade-in-fwd {
  0% {
    -webkit-transform: translateZ(-80px);
            transform: translateZ(-80px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes fade-in-fwd {
  0% {
    -webkit-transform: translateZ(-80px);
            transform: translateZ(-80px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}

.area04 {margin-top: -154px; height: 940px;}
.area04 .a4_title{margin-top:158px; width:100%; font-family: 'sandoll-andante', 'SchoolSafeTravel'; font-size: 54px; color: #58370f; letter-spacing: -0.05em; line-height: 1.37; text-align: center; opacity: 0;}
.area04 .a4_title.on{
  -webkit-animation: fade-in-fwd 0.6s 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	animation: fade-in-fwd 0.6s 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.area04 .a4_text1{margin-top:20px; width:100%; font-size: 26px; color: #222; letter-spacing: -0.05em; line-height: 1.461; text-align: center;}
.area04 .a4_text1 b{font:inherit; font-weight: 700;}
.area04 ul{position: relative; margin-top: 46px; display: flex; justify-content: center; gap: 64px;}
.area04 ul::before{content: ''; position: absolute; top:47px; left:278px; width:700px; height: 5px; background: url('/webPub/sc_2025/myown_manyo/images/a4_stepBar.jpg'); background-size: 100% 100%;}
.area04 ul li{position: relative; display: flex; flex-direction: column; align-items: center; min-width: 270px;}
.area04 ul li span.stepTitle{margin-top: 39px; font-family: 'sandoll-andante', 'SchoolSafeTravel'; font-size: 22px; color: #222; letter-spacing: -0.05em; line-height: 1; text-align: center;}
.area04 ul li span.stepText{margin-top: 4px; font-size: 24px; color: #222; letter-spacing: -0.05em; line-height: 1.5; text-align: center;}
.area04 ul li span.stepNoti{font-size: 20px; color: #222; letter-spacing: -0.05em; line-height: 1.8; text-align: center;}
.area04 .a4_text2{margin-top:53px; width:100%; font-size: 24px; color: #222; letter-spacing: -0.05em; line-height: 1.5; text-align: center;}

.area05{padding:100px 0 80px; width:100%; background: #f6f6f6;}
.area05 .a5_title{display:block; width:100%; font-family: 'sandoll-andante', 'SchoolSafeTravel'; font-size: 44px; color: #000; letter-spacing: -0.025em; line-height: 1; text-align:center;}
.area05 .faq-container {margin: 47px auto 0; padding: 0; width: 1248px; display: flex; flex-direction: column; list-style: none; border-top: 4px solid #333333;}
.area05 .faq-container li.faq {margin-bottom: 20px; position: relative; background-color: #ffffff; overflow: hidden; transition: 0.2s; cursor:pointer; border-bottom:2px solid #999999;}
.area05 .faq-container .faq__title {display: flex; align-items: center; margin: 0; padding:45px 0; font-size: 26px; font-weight: 700; color: #58370f; letter-spacing: -0.025em; line-height: 1; transition:.2s;}
.area05 .faq-container .faq .faq__title:after{content:''; position:absolute; top:45px; right:90px; width:40px; height:24px; background:url('/webPub/sc_2025/myown_manyo/images/a5_open.png')no-repeat; background-size:cover; transition:.2s;}
.area05 .faq-container .faq.active .faq__title:after{transform:rotate(180deg);}
.area05 .faq-container .faq__title span{margin:0 24px 0 82px; display: flex; align-items: center; justify-content: center; width:44px; height: 44px; font-family: 'sandoll-andante', 'SchoolSafeTravel'; font-weight: 400; font-size: 20px; color: #fff; letter-spacing: -0.05em; line-height: 1.376; border-radius: 100%; background: #58370f;}
.area05 .faq-container .faq__answer {max-height: 0; overflow: hidden; background: #efefef; transition: 0.2s;}
.area05 .faq-container .faq__text {padding: 25px 150px; color: #000000; font-size: 22px; letter-spacing:-0.025em; line-height:1.636; word-break: keep-all;}
.area05 .faq-container .faq.active .faq__answer {border-top: 1px solid #dddddd; max-height: 500px; transition: 0.4s;}  

.copy-area {padding:40px 0;background:#f7f7f7;}
.copy-area p {font-family: 'SpoqaHanSansNeo'; font-weight: 400; font-size: 19px; text-align: center; color: #333333;}

.float_area {position:fixed; right: 50px; top:200px; z-index:6; transition:.3s;}
.float_area.pin{top:50px;}
.float_area a.float_btn {display:block; width: 171px;}
.float_area a.card {position: relative; width: 171px; height: 260px; perspective: 2500px;}
.float_area .cover-image { width: 100%; height: 100%; object-fit: cover;}
.float_area .manyo-wrapper {transition: all 0.5s; position: absolute; width: 100%; z-index: -1;}
.float_area .manyo-wrapper::before {content: ""; opacity: 0; width: 100%; height: 80px; transition: all 0.5s; position: absolute; left: 0; top: 0; height: 100%;
  background-image: linear-gradient(
    to bottom,
    transparent 46%,
    rgba(12, 13, 19, 0.5) 68%,
    rgba(12, 13, 19) 97%
  );
}
.float_area .character {width: 100%; opacity: 0; transition: all 0.5s; position: absolute; z-index: -1;}
.float_area .btn_bottom{position: absolute; bottom: 0; display:flex; align-items: center; justify-content: center; width:100%; height:60px; background: url('/webPub/sc_2025/myown_manyo/images/float_bg2.jpg'); font-family: 'sandoll-andante', 'SchoolSafeTravel'; font-size: 20px; color: #fff; letter-spacing: -0.025em; transition: all 0.5s;}

/*hover*/
.float_area .card:hover .manyo-wrapper {transform: perspective(900px) translateY(2.5%) rotateX(32deg) translateZ(0);}
.float_area .card:hover .manyo-wrapper::before{ opacity: 1; }
.float_area .card:hover .character {opacity: 1; transform: translate3d(0%, -13%, 200px);}
.float_area .card:hover .btn_bottom{transform: scale(1.1);}

.sns_area{ padding:47px 0 62px; border-top:3px solid #f8f6f3;}
.sns_area h3{font-weight: normal; display: inline-block; font-size: 16px; color: #4e4e4e; vertical-align: middle; margin-right:8px;}
.sns_area .div_inner {margin: 0 auto; height: 100%; text-align: center;}
.sns_area > .div_inner > a{display: inline-block; margin-left: 14px; vertical-align: middle; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s;}
.sns_area > .div_inner > a > img{width:54px;}