@charset "UTF-8";
/* CSS Document */

.after::after { display: block;  content: "";  clear: both; }
.after>div { float: left; }

/* 너비 & 높이 */
.wd_full { width: 100%;}
.wd_960 { width: 960px; margin: 0 auto;}
.wd_1080 { width: 1080px; margin: 0 auto;}

.txt_center { text-align: center;}

.mt_30 { margin-top: 30px;}
.mt_50 { margin-top: 50px;}
.mt_80 { margin-top: 80px;}
.mt_200 { margin-top: 200px;}
.pt_40 { padding-top: 40px;}
.pt_80 { padding-top: 80px;}
.pt_100 { padding-top: 100px;}
.pt_120 { padding-top: 120px;}
.pt_140 { padding-top: 140px;}
.pb_40 { padding-bottom: 40px;}


/* ===== 전자입찰교육원 기념일 ====== */
#ebei_anniversary { width: 100%;}
.anniversary_wrap { width: 100%;}
.anniversary_wrap section { min-width: 1080px;}



/* ===== step1 ====== */
.step1 { height: 1098px;  background: #12bcff url("../../../images/event/20220509_event/page_bg_01.png") center no-repeat;}
.step1_wrap { position: relative;}
.step1_wrap .main_title .cake { height: 744px;  background: url("../../../images/event/20220509_event/cake.png") center no-repeat;}

/* 풍선 */
.step1_wrap .img_balloon_01 { position: absolute;  top: 570px;  left: -670px;  animation: img_balloon_01_ani 2s ease infinite normal;}
@keyframes img_balloon_01_ani {  0% { top: 570px;}  50% { top: 580px;}  100% { top: 570px; } }
.step1_wrap .img_balloon_02 { position: absolute;  top: 90px;  left: -410px;  animation: img_balloon_02_ani 2s ease infinite normal;}
@keyframes img_balloon_02_ani {  0% { top: 90px;}  50% { top: 120px;}  100% { top: 90px; } }
.step1_wrap .img_balloon_03 { position: absolute;  top: 375px;  left: -40px;  animation: img_balloon_03_ani 2s ease infinite normal;}
@keyframes img_balloon_03_ani {  0% { top: 375px;}  50% { top: 350px;}  100% { top: 375px; } }
.step1_wrap .img_balloon_04 { position: absolute;  top: 420px;  right: 50px;  animation: img_balloon_04_ani 2s ease infinite normal;}
@keyframes img_balloon_04_ani {  0% { top: 420px;}  50% { top: 450px;}  100% { top: 420px; } }
.step1_wrap .img_balloon_05 { position: absolute;  top: -20px;  right: -350px;  animation: img_balloon_05_ani 2s ease infinite normal;}
@keyframes img_balloon_05_ani {  0% { top: -20px;}  50% { top: -50px;}  100% { top: -20px; } }
.step1_wrap .img_balloon_06 { position: absolute;  top: 600px;  right: -550px;  animation: img_balloon_06_ani 2s ease infinite normal;}
@keyframes img_balloon_06_ani {  0% { top: 600px;}  50% { top: 630px;}  100% { top: 600px; } }



/* ===== step2 ====== */
.step2 { height: 1000px; background: linear-gradient(145deg, #fcdce0, #ffbcc5);}
.step2_wrap { }
.step2_wrap .title_wrap { position: relative;}
.step2_wrap .title_wrap .bg { position: absolute;  top: 60px;  right: 410px;  width: 220px; height: 206px;  background: url("../../../images/event/20220509_event/heart.png");  animation: heart_ani 2s ease infinite normal;}
@keyframes heart_ani {  0% { transform: scale(1);}  50% { transform: scale(0.8);}  100% { transform: scale(1); } }
.step2_wrap .title_wrap .txt { position: absolute;  width: 100%;  height: 61px;  background: url("../../../images/event/20220509_event/step2_title.png") center no-repeat;}
.step2_wrap .title_wrap .point { position: absolute;  top: 115px;  right: 473px;  width: 93px;  height: 18px;  background: url("../../../images/event/20220509_event/gif_100per.gif") no-repeat;}

.step2_wrap .gift_wrap{ position: relative;}
.step2_wrap .gift_wrap .gift_bg { height: 242px; background: url("../../../images/event/20220509_event/gift_bg.png") center no-repeat;}
.step2_wrap .gift_wrap .gift { position: absolute;  top: -70px; width: 100%; height: 398px; background: url("../../../images/event/20220509_event/gift.png") center no-repeat;}
.step2_wrap button.unboxing_time { width: 508px; height: 129px; background: url("../../../images/event/20220509_event/btn_unboxing_time.png") no-repeat;}
.step2_wrap button.unboxing_time:hover { background: url("../../../images/event/20220509_event/btn_unboxing_time_on.png");}
.step2_wrap .gift_wrap:hover .gift { animation: wobble-hor-bottom 1s both infinite; }
@keyframes wobble-hor-bottom {
    0%, 100% { transform: translateX(0%);  transform: translateX(0%);
        transform-origin: 50% 50%;  transform-origin: 50% 50%; }
    15% { transform: translateX(-30px) rotate(-6deg);
        transform: translateX(-30px) rotate(-6deg); }
    30% { transform: translateX(15px) rotate(6deg);
        transform: translateX(15px) rotate(6deg); }
    45% { transform: translateX(-15px) rotate(-3.6deg);
        transform: translateX(-15px) rotate(-3.6deg); }
    60% { transform: translateX(9px) rotate(2.4deg);
        transform: translateX(9px) rotate(2.4deg); }
    75% { transform: translateX(-6px) rotate(-1.2deg);
        transform: translateX(-6px) rotate(-1.2deg);} }

/* 마케팅 동의 */
.step2_wrap .information_agree { padding: 110px 0 40px;  box-sizing: border-box;}
.step2_wrap .information_agree ul li { width: 100%;    font-size: 20px;}
.step2_wrap .information_agree input[type="checkbox"]+label {
    display: inline-block;  background: url('../../../images/event/20220509_event/checkbox_large.png') no-repeat;  cursor: pointer;  padding-left: 36px;  line-height: 26px;}
.step2_wrap .information_agree input[type="checkbox"]:checked+label {
    background: url('../../../images/event/20220509_event/checkbox_large_on.png') no-repeat;}
.step2_wrap .information_agree input[type="checkbox"] { display: none; }



/* ===== step3 ====== */
.step3 { height: 1110px;  box-sizing: border-box;  background: url("../../../images/event/20220509_event/page_bg_03.png") center no-repeat;}
.step3 .gift_wrap { height: 750px; margin-top: 40px;}
.step3 .gift_wrap .img_gift1 { width: 960px; height: 310px;  margin-bottom: 10px;  background: url("../../../images/event/20220509_event/img_gift_01.png") no-repeat;}
.step3 .gift_wrap .img_gift2 { position: relative;  width: 475px;  height: 430px;  background: url("../../../images/event/20220509_event/re_img_gift_02.png") no-repeat;}
.img_gift2 button { position: absolute;  left: 37px;  bottom: 30px; width: 400px;  height: 60px;  background: url("../../../images/event/20220509_event/img_gift_02_btn.png") no-repeat;}
.img_gift2 button:hover { background: url("../../../images/event/20220509_event/img_gift_02_btn_on.png") no-repeat;}
.step3 .gift_wrap .img_gift3 { position: relative;  width: 475px;  height: 430px;  margin-left: 10px;  background: url("../../../images/event/20220509_event/re_img_gift_03.png") no-repeat;}
.img_gift3 button { position: absolute;  right: 37px;  bottom: 30px; width: 400px;  height: 60px;  background: url("../../../images/event/20220509_event/img_gift_03_btn.png") no-repeat;}
.img_gift3 button:hover { background: url("../../../images/event/20220509_event/img_gift_03_btn_on.png") no-repeat;}



/* ===== step4 ====== */
.step4 { height: 1500px;  box-sizing: border-box; background: url("../../../images/event/20220509_event/page_bg_04.png") center no-repeat;}
.step4 .sub_wrap button { margin-bottom: 10px;}
.step4 .sub_wrap button.sub1 { width: 960px;  height: 80px; background: url("../../../images/event/20220509_event/sub_01.png") no-repeat;}
.step4 .sub_wrap button.sub1:hover { background: url("../../../images/event/20220509_event/sub_01_on.png");}
.step4 .sub_wrap button.sub2 { width: 960px;  height: 80px; background: url("../../../images/event/20220509_event/sub_02.png") no-repeat;}
.step4 .sub_wrap button.sub2:hover { background: url("../../../images/event/20220509_event/sub_02_on.png");}
.step4 .sub_wrap button.sub3 { width: 960px;  height: 80px; background: url("../../../images/event/20220509_event/sub_03.png") no-repeat;}
.step4 .sub_wrap button.sub3:hover { background: url("../../../images/event/20220509_event/sub_03_on.png");}



/* ===== step5 ====== */
.step5 { height: 600px;  box-sizing: border-box;  background: #211945;}




/* ===== 이벤트 상품 레이어 ====== */
#ebei_anniversary_layer { position: relative;  width: 560px;  height: 600px;}
#ebei_anniversary_layer .close_box { position: absolute;  top: 10px;  right: 10px;  transition: transform 1s;}
#ebei_anniversary_layer .close_box:hover { transform: rotate(180deg);}
#ebei_anniversary_layer .layer_bg { position: absolute;  width: 560px;  height: 600px;  background: url("../../../images/event/20220509_event/layer/layer_bg.png") no-repeat;}
#ebei_anniversary_layer .layer_bg p { color: #202020;  font-family: 'GongGothicLight';  font-size: 15px;  font-weight: 600;  letter-spacing: -0.05em;}

/* 폼 스타일 - select */
div.ebei_select { position: relative;  display: inline-block; }
div.ebei_select:before { content: "";  position: absolute;  top: 16px;  right: 0;  pointer-events: none;  font-weight: 900;  width: 0;  height: 0;  border-left: 6px solid transparent;  border-right: 6px solid transparent;  border-top: 8px solid #bcbec0;}
div.ebei_select select { font-size: 20px;  font-weight: 500;  padding: 0px 50px 0px 40px;  height: 40px;  line-height: 40px;  box-sizing: border-box;  width: 100%;  color: #8491a7;  border-radius: 0;  background-color: white;  margin: 0;  -webkit-appearance: none;/* 네이티브 외형 감추기 */ -moz-appearance: none;  appearance: none;  border: none ;  outline: 0;  vertical-align: -0.5px;}

/* Input 연락처 */
.ebei_input_mobile{  background: #fff;  display: inline-block;  border: 1px solid #fbc4c1;  font-size: 20px !important;  color: #bcbec0;  white-space: nowrap;}
.ebei_input_mobile input[type=text]{ border: none !important;  text-align: center;  width: 90px;  height: 40px;}

#ebei_anniversary_layer .layer_bg button { position: absolute;  bottom: 0;  width: 560px;  height: 80px; background: url("../../../images/event/20220509_event/layer/btn_gift.png") no-repeat;}
#ebei_anniversary_layer .layer_bg button:hover  { background: url("../../../images/event/20220509_event/layer/btn_gift_on.png") no-repeat;}