@charset "UTF-8";

/* 회원가입이벤트 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard-dynamic-subset.css");
.memberJoin_202309 { width:100%; position:relative; overflow:hidden; text-align:center; }
.memberJoin_202309 * { font-family:Pretendard,'Spoqa Han Sans','맑은 고딕','Malgun Gothic','돋움',dotum,AppleGothic,sans-serif; color:#111; }
.memberJoin_202309 .content { position:relative; width:1200px; margin:0 auto;}
.memberJoin_202309 .topImg { width:100%; height:1293px; background:#111841; }
.memberJoin_202309 .topImg p { position:absolute; top:0; animation:fadeIn_02 .8s ease infinite; }
.memberJoin_202309 .topImg:before { display:block; content:""; position:absolute; left:0; top:108px; background:url(images/topLeft.png) no-repeat; width:526px; height:388px; }
.memberJoin_202309 .topImg:after { display:block; content:""; position:absolute; right:0; top:485px; background:url(images/topRight.png) no-repeat; width:594px; height:360px; }
.memberJoin_202309 .topImg li { position:absolute; }
.topImg li:first-child { left:420px; top:86px; animation:fadeIn .3s .8s ease-out both; z-index:100; }
.topImg li:nth-child(2) { left:40px; top:140px; animation:fadeIn .6s .3s ease-in-out both; }
.topImg li:nth-child(3) { left:290px; top:436px; animation:fadeIn .3s 1.1s ease-out both; }
.topImg li:nth-child(4) {left:260px; top:590px;  animation:scale .2s 1.6s ease-out both; }
.topImg li:nth-child(5) {left:363px; top:743px;  animation:fadeIn_up .3s 2s ease-out both; }
.topImg li:nth-child(6) {left:35px; top:363px;  animation:leaf .3s 2.3s ease-out both; }

.memberJoin_202309 .section_01 { position:relative; background:#b09355; height:480px; }
.memberJoin_202309 .section_01 .content { height:480px; }
.memberJoin_202309 .section_01 span { position:absolute; left:340px; top:-110px; animation:upDown 1s infinite ease-in-out; z-index:10; }
.memberJoin_202309 .section_01 p { position:absolute; left:140px; top:-70px; }
.memberJoin_202309 .section_01 em { position:absolute; bottom:-60px; z-index:100; animation: moter_01 10s linear infinite forwards, moter_02 .15s ease-in-out infinite forwards; transition:.2s; }

.memberJoin_202309 .section_02 { position:relative; background:#111841; height:1080px; }
.memberJoin_202309 .section_02:before { content:""; display:block; position:absolute; left:0; top:0; width:282px; height:500px; background:url(images/section02_left.png) no-repeat; }
.memberJoin_202309 .section_02:after { content:""; display:block; position:absolute; right:0; bottom:0; width:233px; height:437px; background:url(images/section02_right.png) no-repeat; }
.memberJoin_202309 h2 { padding:80px 0 0px; }
.section_03 .layer_win { display:none; position:absolute; left:50%; top:10px; margin:110px 0 0 -270px;z-index:1000; }
.section_03 .layer_win span { position:absolute; left:-90px; top:-40px; z-index:100; animation:scale_02 .2s .4s ease-out both; }
.section_03 .layer_win div img { animation:scale_02 .2s .2s ease-out both; }
.section_03 .layer_win div p { position:absolute; top:190px; left:15px; text-align:center; width:520px; font-weight:700; font-size:36px; line-height:1.1; letter-spacing:-2px; z-index:100; animation:fadeIn .3s .5s ease-out both; }
.section_03 .layer_win button { animation:fadeIn .3s .8s ease-out both; }
.memberJoin_202309 .section_03 { position:relative; background:#ffc000; height:1150px; }
.memberJoin_202309 .section_03 h2 { position:relative; }
.memberJoin_202309 .section_03 h2 span { position:absolute; left:50%; top:150px; margin-left:300px; animation:upDown 1s infinite ease-in-out; }
.memberJoin_202309 .section_03 .box_open { margin:0 auto; width:1200px; padding-top:50px;}
.section_03 .box_open > li { position:relative; float:left; width:384px; height:588px; margin-left:24px; }
.section_03 .box_open > li:first-child { background:url(images/box_01.png) no-repeat; margin-left:0; }
.section_03 .box_open > li:nth-child(2) { background:url(images/box_02.png) no-repeat; }
.section_03 .box_open > li:nth-child(3) { background:url(images/box_03.png) no-repeat; }
.section_03 .box_open > li ul { margin:417px 0 0 0; }
.section_03 .box_open > li ul li { display:inline-block; width:312px; height:60px; margin-bottom:10px; }
.section_03 .box_open > li ul a { display:block; width:100%; height:100%; transition:all .2s; background:#111 url(images/bullet.png) no-repeat 192px center; padding:14px 30px 0 0; color:#fff; font-size:24px; font-weight:800; border-radius:10px; box-sizing:border-box; }
.section_03 .box_open > li ul a:hover,.section_03 .box_open > li ul a.current { background:#db0000 url(images/bullet.png) no-repeat 192px center; }

.section_03 .box_open li a:hover span { background:#0043ed url(images/btn_key.png) no-repeat right 0; border:1px solid #0043ed; }
.section_03 > p { position:absolute; bottom:120px; left:50%; margin-left:100px; color:#712d00; text-align:left; }

.section_03 .aside { position:fixed; right:20px; }
.section_03 .aside li a { display:block; width:110px; height:110px; border-radius:70px; box-sizing:border-box; padding-top:68px; box-shadow:2px 2px 10px rgba(0,0,0,.3); transition:all .25s; color:#111; }
.section_03 .aside li:nth-child(1) a { background:#fff url(images/aside_01.png) no-repeat center 18px; }
.section_03 .aside li:nth-child(2) a { background:#fff url(images/aside_02.png) no-repeat center 18px; }
.section_03 .aside li a:hover { background-color:#ffe400; }
.section_03 .aside li:first-child { margin-bottom:13px; }
.section_03 .layer_wrap { display:none; position:fixed; top:50%; left:50%; margin:-450px 0 0 -520px; text-align:center; z-index:1000; }
.section_03 .layer_content { position:relative; background:#fff; border-radius:0 0 10px 10px; }
.section_03 .layer_wrap h2 { background:#ffc000; font-size:25px; height:60px; line-height:58px; font-weight:bold; border-radius:10px 10px 0 0; padding:0; }
.section_03 .btn_layerClose { position:absolute; right:20px; top:13px; z-index:101; }
.section_03 .layer_remain .layer_content { width:1040px; height:790px; overflow:auto; overflow-x:hidden; }
.section_03 .layer_prize.layer_wrap { margin:-210px 0 0 -350px;  }
.section_03 .layer_prize .layer_content { width:700px; min-height:60px; padding:40px 0 50px; }
.layer_remain ul { border-bottom:1px dashed #ccc; padding:15px 0; margin:0 30px; }
.layer_remain ul:last-child { border:none; }
.layer_remain ul:after { content:""; display:block; clear:both; }
.layer_remain li { float:left; width:25%; }
.layer_remain dt { font-size:21px; font-weight:bold; padding:10px 0 5px; }
.layer_remain dt small {  display:block; font-size:16px; font-weight:normal; margin-top:-15px; }
.layer_remain dd { font-size:18px; }
.layer_remain dd strong,.layer_prize table td strong { color:#ff4949; }
.layer_prize table { border-top:1px solid #111; width:640px; margin:0 auto;}
.layer_prize table td { height:60px; font-size:21px; border-bottom:1px solid #ccc; text-align:left; padding:0 20px; }
.layer_prize table td.center { text-align:center; }
.memberJoin_202309 .guide { background:#150707; padding:80px 0; text-align:left; }
.memberJoin_202309 .guide h3 { position:relative; font-size:21px; font-weight:bold; background:url(images/icon_guide.png) no-repeat; padding:10px 0 8px 55px; color:#fff; }
.memberJoin_202309 .guide h3:after { position:absolute; right:0; top:23px; content:""; display:block; background:#fff; width:990px; height:1px; }
.memberJoin_202309 .guide dl { margin-left:55px; }
.memberJoin_202309 .guide dt { font-weight:bold; font-size:18px; margin:20px 0 3px; color:#fff; }
.memberJoin_202309 .guide dd { line-height:1.6; color:#fff; }
.memberJoin_202309 .guide dd:before { content:"- " }
.memberJoin_202309 .section_04 { background:#111841; padding:100px 0 120px; }
.memberJoin_202309 .section_04 ul { width:1200px; margin:0 auto; margin-top:50px; }
.memberJoin_202309 .section_04 ul:after { content:""; display:block; clear:both; }
.memberJoin_202309 .section_04 li { float:left; width:285px; height:335px; margin-right:20px;  box-sizing:border-box; padding-top:250px; }
.memberJoin_202309 .section_04 li:nth-child(1) { background:url(images/link_txt01.png) no-repeat; }
.memberJoin_202309 .section_04 li:nth-child(2) { background:url(images/link_txt02.png) no-repeat; }
.memberJoin_202309 .section_04 li:nth-child(3) { background:url(images/link_txt03.png) no-repeat; padding-top:180px; }
.memberJoin_202309 .section_04 li:last-child { margin-right:0; background:url(images/link_txt04.png) no-repeat;}
.memberJoin_202309 .section_04 li a { display:block; width:245px; height:65px; line-height:60px; border-radius:10px; background:#111; border:1px solid #111; box-sizing:border-box; margin:0 auto 5px; color:#fff; font-size:18px; transition:all .25s; }
.memberJoin_202309 .section_04 li a:hover { background:#db0000; border:1px solid #db0000; }
.memberJoin_202309 .section_04 h2{ padding:0; }

/* 명절게임 레이어 */
.layer_game { width:840px; height:790px; margin:-450px 0 0 -440px !important; }
.layer_game .layer_content { padding:30px 15px; height:720px; }
.layer_game .layer_content h3 { margin-top:30px; }
.layer_game .game_content { background:url(images/game_bg.png) no-repeat bottom center; height:590px; }
.layer_game .game_content img { position:absolute; cursor:pointer; }

.oimg1 { left:660px; top:210px; }
.oimg2 { left:490px; top:210px; }
.oimg3 { left:320px; top:210px; }
.oimg4 { left:150px; top:210px; }
.oimg5 { left:0; top:210px;}
.selimg1 { left:390px; top:380px; }
.selimg2 {  left:85px; top:450px;}
.selimg3 {  left:560px; top:470px;}
.selimg4 { left:200px; top:385px;}
.selimg5 { left:200px; top:600px;}


#cardPile img.ui-draggable-dragging {
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  border-radius:10px;
}


@keyframes fadeIn {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

@keyframes fadeIn_up {
	0% {
		transform: translateY(30%);
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

@keyframes fadeIn_02 {
	0% {
		opacity:.4;
	}
	30% {
		opacity:1;
	}
	60% {
		opacity:1;
	}
	100% {
		opacity:.4;
	}
}

@keyframes aniLeft {
	0% {
		opacity:0;
		transform: translateX(10%);
	}
	100% {
		opacity:1;
		transform: translateX(0%);
	}
}
@keyframes leaf {
	0% {

		transform: rotateY(20deg);
		opacity: 0;
	  }
	  100% {
		transform: rotateY(0deg);
		opacity: 1;
	  }
}
@keyframes upDown {
	0% {
		transform: translateY(0%);
	}
	50%{
		transform: translateY(-15%);
	}
	100% {
        transform: translateY(0%);
	}
}


@keyframes scale {
	0% {
		transform: scale(2); 
		opacity:0;
	}
	100% {
        transform: scale(1);
		opacity:1;
	}
}
@keyframes scale_02 {
	0% {
		transform: scale(.5); 
		opacity:0;
	}
	100% {
        transform: scale(1);
		opacity:1;
	}
}

@keyframes moter_01 {
	from {
		right:-50%;
	}

	90% {
		right:150%;
	}
	100% {
		right:150%;
	}
}
@keyframes moter_02 {
	0% {
		bottom:-60px;
	}
	100% {
		bottom:-58px;
	}
}