@charset "utf-8";

body {overflow-x:hidden;}
iframe{border: 0; margin: 0; padding: 0;}
#wrap{max-width: 1920px; min-width: 1200px;
}

/*reset, common */
.emergency_relief_cnts_top {
    height: 30px;
    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;
}

.CampaignList ul {padding: 6px 14px !important;}
.CampaignList ul li {
    margin-bottom: 7px;
}
#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;}

.sns_area{ padding:47px 0 62px; border-top:3px solid #f8f6f3; text-align: center;}
.sns_area h3{
	font-weight: normal;
	display: inline-block;
    font-size: 16px;
    color: #4e4e4e;
    vertical-align: middle;
	margin-right:8px;
}

.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;
}


.campaign-view-contents{width:auto;}
.div_sec{max-width:1920px; min-width:1200px; overflow:hidden;}
.div_sec img.center_img{position: relative; top: 0; left: 50%; transform: translateX(-50%); display: block; max-width: none;}
.div_sec img{display:block;}
.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%; margin-left: -600px; width: 1200px;}

.div_sec.area01{position:relative;}

.div_sec.area01 .a1_cardArea{overflow:visible; margin:0 auto; width:1022px; height:990px;}
.div_sec.area01 .a1_cardArea .a1_cardMove{position:absolute; top:781px; left:89px; width:1022px; transition:1s;}
.div_sec.area01 .a1_cardArea .a1_cardMove .a1_cardInner{position:relative; height:749px; text-align:center; background: rgba(0, 0, 0, 0.05);}
.div_sec.area01 .a1_cardArea .a1_cardMove .a1_cardInner > span{display:inline-block;}
.div_sec.area01 .a1_cardArea .a1_cardMove .a1_cardInner .a1_cardTitle{margin-top:36px;}
.div_sec.area01 .a1_cardArea .a1_cardMove .a1_cardInner .a1_cardText{margin-top:20px;}
.div_sec.area01 .a1_cardArea .a1_cardMove .a1_cardInner .a1_cardCrewBg{position:absolute; bottom:0px; left:-89px; opacity:0; transition:.7s 1s;}
.div_sec.area01 .a1_cardArea .a1_cardMove .a1_cardInner .a1_cardCrew{position:absolute; bottom:37px; left:294px; opacity:0; transition:.7s 1s;}

.div_sec.area01 .a1_cardArea .a1_cardMove.on{top:31px}
.div_sec.area01 .a1_cardArea .a1_cardMove.on .a1_cardInner .a1_cardCrew{opacity:1; z-index: 3; overflow: hidden;}
.div_sec.area01 .a1_cardArea .a1_cardMove.on .a1_cardInner .a1_cardCrew:after{
	content: ""; width: 50px; height: 500px; position: absolute; bottom: -50px; left: -100px;	opacity: .2;	z-index: 4; background: #fff;

	-webkit-transform: rotate(25deg);
	transform: rotate(25deg);

	-webkit-animation:crew 3s 2s ease-in-out;
		animation:crew 3s 2s ease-in-out; 
	-webkit-animation-iteration-count:infinite;
		animation-iteration-count:infinite;
}
.div_sec.area01 .a1_cardArea .a1_cardMove.on .a1_cardInner .a1_cardCrewBg{opacity:1; z-index:5;}

.div_sec.area01 .a1_cardArea .btn_area{display:block; position:absolute; bottom: -6px; padding-bottom: 6px; background: #000;}
.div_sec.area01 .a1_cardArea .btn_area span.icon_down{display:inline-block; position:absolute; top:15px; left:377px; width:53px;}
.div_sec.area01 .a1_cardArea .btn_area span.icon_down img{display:block;}
.div_sec.area01 .a1_cardArea .btn_area span.icon_down .icon_downArr{}
.div_sec.area01 .a1_cardArea .btn_area span.icon_down .icon_downBottom{margin-top:2px;}

.div_sec.area01 .a1_cardArea .btn_area .slide-bottom {
	-webkit-animation: slide-bottom 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
	        animation: slide-bottom 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
}

.div_sec.area01 .a1_pic_default{position:absolute; }
.div_sec.area01 .a1_pic{position:absolute; opacity:0; transition:.5s;}
.div_sec.area01 .a1_pic.on{opacity:1;}
.div_sec.area01 .pic01{ 
	top:210px;
	left:-401px; 
	-webkit-animation:cloud1 8s ease-in-out 3s infinite;
		animation:cloud1 5s ease-in-out 5s infinite; 
}
.div_sec.area01 .pic02{
	top:125px;
	left:-60px;
	-webkit-animation:cloud2 8s ease-in-out 2s infinite; 
		animation:cloud2 8s ease-in-out 2s infinite; 
}
.div_sec.area01 .pic03{
	top:178px;
	left:-146px;
	-webkit-animation:plain1 5s ease-in-out 2s infinite; 
		animation:plain1 5s ease-in-out 2s infinite; 
}

.div_sec.area01 .pic04{
	top:160px;
	right:13px;
	-webkit-animation:cloud3 8s ease-in-out 2s infinite; 
		animation:cloud3 5s ease-in-out 2s infinite; 
}
.div_sec.area01 .pic05{top:179px; right:-360px;}

.div_sec.area01 .a1_truck_move{position: absolute; top: 360px; right: -266px; width: 242px; height: 77px; transition:1.7s linear;}
.div_sec.area01 .a1_truck_move.on{right:-700px;}
.div_sec.area01 .pic06{bottom:0px; left:0px;}
.div_sec.area01 .pic07{top:0px; left:14px;}
.div_sec.area01 .pic08{top:0px; left:42px;}
.div_sec.area01 .pic09{top:0px; left:70px;}

.div_sec.area01 .pic10{bottom:0px; left:-247px;}
.div_sec.area01 .pic11{top:493px; right:-328px;}
.div_sec.area01 .pic12{
	top:774px; right:-117px;

	-webkit-animation: shake-bottom 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) 2s infinite both;
        animation: shake-bottom 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) 2s infinite both;
}

.div_sec.area02{position:relative; padding-bottom:42px; background:#fff;}
.div_sec.area02 .a2_title{display:block; padding-top:36px; text-align:center;}
.div_sec.area02 .a2_text{display:block; padding-top:36px;text-align:center;}
.div_sec.area02 .a2_title img,
.div_sec.area02 .a2_text img{display:inline-block;}

.div_sec.area03{}

.div_sec.area03 .a3_top{position:relative; padding-top: 28px; height:67px; text-align:center; background:#e72410;}
.div_sec.area03 .a3_top img{display:inline-block;}

.div_sec.area03 .a3_area01{position:relative; height:1013px; background-image:url('/webPub/sc_2018/digitalgoods/images/a3_cont1_bg.png'); background-repeat:no-repeat; background-position: center top 430px; background-color:#ffd541;}
.div_sec.area03 .a3_area01 .a3a1_title{display:block; position:absolute; top:40px; left:50%; margin-left:-321px;}

.div_sec.area03 .a3_area01 .a3a1_img01{position:absolute; top:328px; left:177px;}
.div_sec.area03 .a3_area01 .a3a1_img01 .a3a1_arr1{position:absolute; top:0px; right:-123px;}
.div_sec.area03 .a3_area01 .a3a1_img01 .a3a1_name1{position:absolute; top:-44px; right:-154px; box-shadow: 0 0 0 black; transition: all 0.2s;}
.div_sec.area03 .a3_area01 .a3a1_img01:hover .a3a1_name1{box-shadow: -0.3rem 0.3rem 0 black; transform: translate(0.3rem, -0.3rem);}

.div_sec.area03 .a3_area01 .a3a1_img02{position:absolute; top:475px; left:75px;}
.div_sec.area03 .a3_area01 .a3a1_img02 .a3a1_arr2{position:absolute; top:141px; left:-95px;}
.div_sec.area03 .a3_area01 .a3a1_img02 .a3a1_name2{position:absolute; top:97px; left:-176px; box-shadow: 0 0 0 black; transition: all 0.2s;}
.div_sec.area03 .a3_area01 .a3a1_img02:hover .a3a1_name2{box-shadow: 0.3rem 0.3rem 0 black; transform: translate(-0.3rem, -0.3rem);}

.div_sec.area03 .a3_area01 .a3a1_img03{position:absolute; top:588px; left:399px;}
.div_sec.area03 .a3_area01 .a3a1_img03 .a3a1_arr3{position:absolute; top:271px; left:-110px;}
.div_sec.area03 .a3_area01 .a3a1_img03 .a3a1_name3{position:absolute; top:282px; left:-289px; box-shadow: 0 0 0 black; transition: all 0.2s;}
.div_sec.area03 .a3_area01 .a3a1_img03:hover .a3a1_name3{box-shadow: 0.3rem 0.3rem 0 black; transform: translate(-0.3rem, -0.3rem);}

.div_sec.area03 .a3_area01 .a3a1_img04{position:absolute; top:597px; left:890px;}
.div_sec.area03 .a3_area01 .a3a1_img04 .a3a1_arr4{position:absolute; top:110px; right:-50px;}
.div_sec.area03 .a3_area01 .a3a1_img04 .a3a1_name4{position:absolute; top:200px; right:-160px; box-shadow: 0 0 0 black; transition: all 0.2s;}
.div_sec.area03 .a3_area01 .a3a1_img04:hover .a3a1_name4{box-shadow: -0.3rem 0.3rem 0 black; transform: translate(0.3rem, -0.3rem);}

.div_sec.area03 .a3_area02{position:relative; height:1185px; background:#fdbb2d;}
.div_sec.area03 .a3_area02 .a3a2_title{display:block; position:absolute; top:40px; left:50%; margin-left:-370px;}
.div_sec.area03 .a3_area02 .a3a2_img01{position:absolute; top:350px; left:-190px;}
.div_sec.area03 .a3_area02 .a3a2_img02{position:absolute; top:350px; left:650px;}
.div_sec.area03 .a3_area02 .a3a2_img02 .a3a2_arr1{position:absolute; top:70px; right:145px;}
.div_sec.area03 .a3_area02 .a3a2_img02 .a3a2_name1{position:absolute; top:12px; right:-142px; width:263px;}
.div_sec.area03 .a3_area02 .a3a2_img02 .a3a2_name1 span{display:inline-block; margin-bottom:7px; box-shadow: 0 0 0 black; transition: all 0.2s;}
.div_sec.area03 .a3_area02 .a3a2_img02 .a3a2_name1 span:last-child{margin-bottom:0px;}
.div_sec.area03 .a3_area02 .a3a2_img02:hover .a3a2_name1 span{box-shadow: -0.3rem 0.3rem 0 black; transform: translate(0.3rem, -0.3rem);}

.div_sec.area03 .a3_area02 .a3a2_img03{position:absolute; top:826px; left:1070px;}

.div_sec.area03 .a3_area03{position:relative; height:1162px; background:#f29f00;}
.div_sec.area03 .a3_area03 .a3a3_title{display:block; position:absolute; top:40px; left:50%; margin-left:-416px;}

.div_sec.area03 .a3_area03 .s3_wrap{position: absolute; top: 293px; left:50%; margin-left:-274px; width: 548px;}
.div_sec.area03 .a3_area03 .s3_wrap .msg_bg{}
.div_sec.area03 .a3_area03 .s3_wrap .a3_msg1{position:absolute; top:90px; left:46px; opacity:0; transition:.2s .5s;}
.div_sec.area03 .a3_area03 .s3_wrap .a3_msg2{position:absolute; top:182px; right:46px; opacity:0; transition:.2s 1s;}
.div_sec.area03 .a3_area03 .s3_wrap .slider3_area{overflow:hidden; position: absolute; top: 248px; left: 57px; width: 437px; opacity:0; transition:.2s 1.5s;}
.div_sec.area03 .a3_area03 .s3_wrap .swiper-button-prev{left:-162px; width: 96px; height: 108px; background: url('/webPub/sc_2018/digitalgoods/images/prev_btn.png'); opacity:0; transition:.2s 1.5s;}
.div_sec.area03 .a3_area03 .s3_wrap .swiper-button-next{right:-162px; width: 96px; height:108px; background: url('/webPub/sc_2018/digitalgoods/images/next_btn.png'); opacity:0; transition:.2s 1.5s;}

.div_sec.area03 .a3_area03 .s3_wrap.aos-animate .a3_msg1{opacity:1;}
.div_sec.area03 .a3_area03 .s3_wrap.aos-animate .a3_msg2{opacity:1;}
.div_sec.area03 .a3_area03 .s3_wrap.aos-animate .slider3_area{opacity:1;}
.div_sec.area03 .a3_area03 .s3_wrap.aos-animate .swiper-button-prev{opacity:1;}
.div_sec.area03 .a3_area03 .s3_wrap.aos-animate .swiper-button-next{opacity:1;}

.div_sec.areaBnr_style2{position:relative; height:139px; background:#000;}
.div_sec.areaBnr_style2 a.btn_area{display:block; text-align:center;}
.div_sec.areaBnr_style2 a.btn_area .center_area{overflow:hidden; display:inline-block;}
.div_sec.areaBnr_style2 a.btn_area .center_area span{float:left;}
.div_sec.areaBnr_style2 a.btn_area .center_area span.icon_down{position:relative; padding-top:24px; width:53px;}
.div_sec.areaBnr_style2 a.btn_area .center_area span.icon_down img{display:block;}
.div_sec.areaBnr_style2 a.btn_area .center_area span.icon_down .icon_downArr{}
.div_sec.areaBnr_style2 a.btn_area .center_area span.icon_down .icon_downBottom{margin-top:2px;}

.div_sec.areaBnr_style2 a.btn_area .center_area span.btn_title{margin-left:24px;}

.div_sec.areaBnr_style2 a.btn_area .slide-bottom{
	-webkit-animation: slide-bottom 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
	        animation: slide-bottom 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
}

.div_sec.area04{position:relative;  padding-top:45px; padding-bottom: 36px; text-align:center; background:#d0cabc;}
.div_sec.area04 .a4_title{display:block; text-align:center;}
.div_sec.area04 .a4_title img{display:inline-block;}
.div_sec.area04 .a4_text{margin:26px 0 28px; display:block; text-align:center;}
.div_sec.area04 .a4_text img{display:inline-block;}
.div_sec.area04 .a4_ul{position:relative; margin:36px auto 20px; width:1200px; height:400px;}
.div_sec.area04 ul{overflow:hidden; position:absolute; left:50%; margin-left:-765px; width:1530px;}
.div_sec.area04 ul li{float:left; margin-right:72px;}
.div_sec.area04 ul li:last-child{margin-right:0;}
.div_sec.area04 .btn_area{margin:0 auto; width: 683px; height: 126px; background: #e72410; box-shadow: 0 0 0 black; transition: all 0.2s;}
.div_sec.area04 .btn_area:hover{box-shadow: 0.7rem 0.7rem 0 black; transform: translate(-0.7rem, -0.7rem);}
.div_sec.area04 .btn_area a{overflow:hidden; display: block; padding: 24px 0 0 98px; height:102px;}

.div_sec.area05{position:relative;}


/* Generated by Animista */
/*  slide-bottom */
@-webkit-keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  30% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  85% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
			opacity:1;
  }
  100% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
			opacity:0;
  }
}

@keyframes slide-bottom {
 0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  30% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  85% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
			opacity:1;
  }
  100% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
			opacity:0;
  }
}

/*  shake-bottom */
@-webkit-keyframes shake-bottom {
  0%,
  50%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
  }
  5% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  10%,
  20%,
  30% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
  15%,
  25%,
  35% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  40% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  45% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
}
@keyframes shake-bottom {
  0%,
  50%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
  }
  5% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  10%,
  20%,
  30% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
  15%,
  25%,
  35% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  40% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  45% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
}

/* animation*/
/*  cloud */
@-webkit-keyframes cloud1 {
	0% {transform: translateX(0%) translateY(0%);}
	50% {transform: translateX(15%) translateY(0%);}
	100% {transform: translateX(0%) translateY(0%);}
}
@keyframes cloud1 {
	0% {transform: translateX(0%) translateY(0%);}
	50% {transform: translateX(15%) translateY(0%);}
	100% {transform: translateX(0%) translateY(0%);}
}

@-webkit-keyframes cloud2 {
	0% {transform: translateX(0%) translateY(0%);}
	50% {transform: translateX(-25%) translateY(10%);}
	100% {transform: translateX(0%) translateY(0%);}
}
@keyframes cloud2 {
	0% {transform: translateX(0%) translateY(0%);}
	50% {transform: translateX(-25%) translateY(10%);}
	100% {transform: translateX(0%) translateY(0%);}
}

@-webkit-keyframes cloud3 {
	0% {transform: translateX(0%) translateY(0%);}
	50% {transform: translateX(10%) translateY(0%);}
	100% {transform: translateX(0%) translateY(0%);}
}
@keyframes cloud3 {
	0% {transform: translateX(0%) translateY(0%);}
	50% {transform: translateX(10%) translateY(0%);}
	100% {transform: translateX(0%) translateY(0%);}
}

@-webkit-keyframes plain1 {
	0% {transform: translateX(0%) translateY(0%); opacity:1;}
	50% {transform: translateX(-180%) translateY(-70%); opacity:1;}
	55% {transform: translateX(-180%) translateY(-70%); opacity:0;}
	70% {transform: translateX(0%) translateY(0%); opacity:0;}
	80% {transform: translateX(0%) translateY(0%); opacity:1;}
	100% {transform: translateX(0%) translateY(0%); opacity:1;}
}
@keyframes plain1 {
	0% {transform: translateX(0%) translateY(0%); opacity:1;}
	50% {transform: translateX(-180%) translateY(-70%); opacity:1;}
	55% {transform: translateX(-180%) translateY(-70%); opacity:0;}
	70% {transform: translateX(0%) translateY(0%); opacity:0;}
	80% {transform: translateX(0%) translateY(0%); opacity:1;}
	100% {transform: translateX(0%) translateY(0%); opacity:1;}
}

/*  crew */
@-webkit-keyframes crew {
	0% {left:-100px}
	50% {left:120%;}
	100% {left:120%;}
}
@keyframes crew {
	0% {left:-100px}
	50% {left:120%;}
	100% {left:120%;}
}