@charset "UTF-8";

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,button{margin:0;padding:0}
fieldset,img{border:0 none}
dl,ul,ol,menu,li{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
input,select,textarea,button{vertical-align:middle}
input::-ms-clear{display:none}
button{border:0 none;background-color:transparent;cursor:pointer}
html,body{background-color:#000}
body,th,td,input,select,textarea,button{font-size:14px;line-height:1.5;font-family:'Malgun Gothic','맑은 고딕','Apple SD Gothic Neo',sans-serif;color:#fff}
a{color:#333;text-decoration:none}
a:active,a:hover{text-decoration:none}
a:active{background-color:transparent}
address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:normal}
img{vertical-align:top}

/* global */
.ir_pm{display:block;overflow:hidden;font-size:0;line-height:0;text-indent:-9999px}
.screen_out{overflow:hidden;position:absolute;width:0;height:0;line-height:0;text-indent:-9999px}
.hide{display:none}

/* comm */
.txt_comm,
.list_util [class^="link_"] .txt_util,
.list_gnb .link_gnb,
.ico_scroll{overflow:hidden;background-position:0 0;background-repeat:no-repeat;font-size:0;line-height:0;text-indent:-9999px}
.list_comm,
.list_util,
.list_reward,
.list_step,
.list_mission{font-size:0}
.list_comm li,
.list_util li,
.list_reward li,
.list_step li,
.list_mission li{display:inline-block;vertical-align:top}

/* header */
.promotion-header{overflow:hidden;position:fixed;top:0;left:0;z-index:1000;width:100%;height:70px;padding:0 30px 0 40px;background-color:rgba(22,22,22,1);box-sizing:border-box}
.promotion-title{float:left;margin-top:16px}
.promotion-title .link_logo{display:block;font-size:0}
.list_util{float:right;margin-top:16px}
.list_util li + li{position:relative;margin-left:15px}
.list_util li + li:after{position:absolute;top:13px;left:-8px;width:2px;height:11px;background-color:#595959;content:''}
.list_util [class^="link_"]{display:block;padding:10px}
.list_util [class^="link_"] .txt_util{display:block;position:relative;height:15px;opacity:.61}
.list_util [class^="link_"] .txt_util{-webkit-transition:all 0.35s;-moz-transition:all 0.35s;transition:all 0.35s}
.list_util [class^="link_"]:active .txt_util,
.list_util [class^="link_"]:hover .txt_util{opacity:1}
.list_util .link_home .txt_util{width:83px;background-image:url(../images/header_go_homepage.png)}
.list_util .link_today .txt_util{width:117px;background-image:url(../images/header_not_today.png)}

/* gnb */
.doc-gnb{position:fixed;top:0;left:34px;z-index:1000;margin-top:394px;width:188px;height:333px;background:url(../images/nav_bg.png) no-repeat 0 0}
.list_gnb{padding:11px 34px 11px 30px}
.list_gnb li + li{position:relative}
.list_gnb li + li:before{content:"";display:block;position:absolute;width:55px;height:49px;background:url(../images/nav_dashline.png) no-repeat 0 0;left:4px;top:-24px}
.list_gnb .link_gnb{display:block;position:relative;width:100%;height:77px}
.list_gnb .link_gnb:after{content:"";display:block;position:absolute;left:0;width:100%;top:0;height:100%;background-repeat:no-repeat;background-position:center;-webkit-transition:opacity .2s linear;-moz-transition:opacity .2s linear;transition:opacity .2s linear;opacity:0}
.list_gnb .link_gnb:before{content:"";display:block;position:absolute;left:0;width:100%;top:0;height:100%;background-repeat:no-repeat;background-position:center;-webkit-transition:opacity .2s linear;-moz-transition:opacity .2s linear;transition:opacity .2s linear;opacity:.53}
.list_gnb .link_gnb:hover:before,
.list_gnb .link_gnb.on:after{opacity:1}
.list_gnb .link_gnb.on:before{opacity:.53}
.list_gnb .link_intro:before{background-image:url(../images/nav_menu_main.png)}
.list_gnb .link_intro.on:after{background-image:url(../images/nav_menu_main_sel.png)}
.list_gnb .link_event1:before{background-image:url(../images/nav_menu_event1.png)}
.list_gnb .link_event1.on:after{background-image:url(../images/nav_menu_event1_sel.png)}
.list_gnb .link_event2:before{background-image:url(../images/nav_menu_event2.png)}
.list_gnb .link_event2.on:after{background-image:url(../images/nav_menu_event2_sel.png)}

.scroll_top{font-size:0;line-height:0;display:block;width:100%;padding-top:30px;height:44px;position:relative}
.scroll_top:before{content:"";position:absolute;display:block;width:100%;height:3px;bottom:100%;left:0;background:url(../images/nav_horzline.png) no-repeat 50%}
.scroll_top:after{content:"";display:block;margin:0 auto;width:48px;height:14px;background:url(../images/nav_top.png) no-repeat 50% 0;opacity:.53;-webkit-transition:opacity .2s linear;-moz-transition:opacity .2s linear;transition:opacity .2s linear}
.scroll_top:hover:after{opacity:1}


/* footer */
.promotion-footer{background:#000;position:relative}
.inner_foot{position:relative;width:1178px;height:435px;margin:0 auto;padding:130px 0 100px;box-sizing:border-box;letter-spacing:-1px}
.inner_foot .logo_info{float:left;width:502px;padding-top:7px;}
.inner_foot .logo_info a{float:left;vertical-align:top;}
.inner_foot .logo_kakao{padding-top:1px;}
.inner_foot .logo_company{margin-left:55px}
.inner_foot .info_service{float:left}
.inner_foot .list_service{padding-top:2px}
.inner_foot .list_service:after{display:block;clear:both;content:''}
.inner_foot .list_service li{float:left}
.inner_foot .list_service li + li{position:relative;padding-left:24px}
.inner_foot .list_service li + li:before{position:absolute;top:9px;left:13px;width:2px;height:5px;background:#909090;content:''}
.inner_foot .list_service .link_info{font-size:14px;line-height:18px;color:#e7e7e7;text-decoration:none;letter-spacing:-1.65px}
.inner_foot .list_service .link_info strong{color:#edc06a;font-weight:bold;}
.inner_foot .info_company{margin-top:23px;font-size:14px;line-height:20px;color:#e7e7e7}
.inner_foot .info_company .link_txt {color:#e7e7e7/*;text-decoration:underline;*/}
.inner_foot .info_copy{display:block;margin-top:26px;font-size:12px;color:#cacaca}
.inner_foot .info_copy .link_txt{color:#cacaca;text-decoration:none}

.inner_foot .logo_kakao .img_comm{width:145px;height:26px;margin-top:32px;background-position:0 -40px}
.inner_foot .logo_company .img_comm{width:93px;height:78px;background-position:0 -70px}
.inner_foot .logo_company .img_logo{vertical-align:top}
.inner_foot .service_info{float:left;font-size:13px;letter-spacing:-1px;color:#c9c9c9}
.service_info a{font-weight:bold;font-size:13px;color:#c9c9c9}
.service_info .txt_bar{margin:0 6px}
.inner_foot .kakao_info{margin-top:4px}
.inner_foot .kakao_info,.copyright,.copyright a{font-size:12px;line-height:18px;letter-spacing:0;color:#8a8a8a}
.copyright{float:left;text-indent:0;vertical-align:baseline}
.inner_foot .grade_info{position:absolute;top:-145px;right:-50px;padding:19px 34px 37px;border:1px solid #373737;background-color:#1e1e1e}
.inner_foot .grade_info .box_grade{overflow:hidden;padding-top:20px}
.inner_foot .grade_info .list_grade{float:left;width:122px;height:71px;margin-right:6px;background-position:-460px 0}
.inner_foot .grade_info .list_info{float:right;width:460px;height:70px;background-position:-135px -80px}
.inner_foot .grade_info .grade_15 .list_grade{background-position:0 -345px}
.inner_foot .grade_info .grade_15 .list_info{background-position:-128px -345px}
.inner_foot .grade_info .ico_tail{position:absolute;bottom:-15px;left:50%;margin-left:-14px;width:27px;height:15px;background-position:-430px -30px}
.layer_grade{display:none;position:absolute;left:50%;bottom:131px;margin-left:-329px;padding:39px 34px 38px;border:1px solid #373737;background-color:#1e1e1e}
.layer_grade.visible{display:block}
.layer_grade .info_grade{width:588px;height:161px;background:url(../images/grade_guide.png) no-repeat 0 0}
.layer_grade .btn_close{position:absolute;top:0;right:0;padding:10px}
.layer_grade .btn_close .img_comm2{font-size:0;display:block;position:relative;width:17px;height:17px}
.layer_grade .btn_close .img_comm2:before,
.layer_grade .btn_close .img_comm2:after{width:24px;height:1px;background:#fff;content:"";display:block;position:absolute;left:50%;top:50%;transform-origin:0 0}
.layer_grade .btn_close .img_comm2:before{
	-webkit-transform:rotate(45deg) translate(-50%,-50%);
	-moz-transform:rotate(45deg) translate(-50%,-50%);
	-ms-transform:rotate(45deg) translate(-50%,-50%);
	transform:rotate(45deg) translate(-50%,-50%)
}
.layer_grade .btn_close .img_comm2:after{
	-webkit-transform:rotate(-45deg) translate(-50%,-50%);
	-moz-transform:rotate(-45deg) translate(-50%,-50%);
	-ms-transform:rotate(-45deg) translate(-50%,-50%);
	transform:rotate(-45deg) translate(-50%,-50%)
}


/* ui */
.ico_scroll{display:inline-block;position:relative;width:23px;height:39px;margin:108px 0 0;border:2px solid #fff;border-radius:14px;vertical-align:top}
.ico_scroll_wheel{position:absolute;top:50%;margin-top:-1px;left:6px;width:11px;height:2px;background:#fff;
-webkit-animation:ani_move_arr 1.3s cubic-bezier(0.28,0.38,0.68,0.75) infinite;
-moz-animation:ani_move_arr 1.3s cubic-bezier(0.28,0.38,0.68,0.75) infinite;
animation:ani_move_arr 1.3s cubic-bezier(0.28,0.38,0.68,0.75) infinite
}
.ico_scroll_wheel:before,
.ico_scroll_wheel:after{content:"";display:block;position:absolute;left:0;width:100%;height:2px;background:#fff}
.ico_scroll_wheel:before{top:-4px}
.ico_scroll_wheel:after{top:4px}


/* layout */
.container-promotion{overflow:hidden;position:relative;min-width:1240px}
[class^="section_"]{background-position:50% 0;background-repeat:no-repeat;background-size:cover}
[class^="section_"] .bg{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
[class^="section_"] .inner_event{position:relative;box-sizing:border-box;width:1240px;margin:0 auto}


/* intro */
.section_intro{overflow:hidden;position:relative;height:1151px;background-image:url(../images/main_bg.jpg);margin-bottom:-60px}
.section_intro .bg:before,
.section_intro .bg:after{content:"";display:block;position:absolute;height:100%;top:0;width:710px;background-repeat:repeat-y;background-image:url(../images/main_shadow_side.png)}
.section_intro .bg:before{left:0;background-position:0 50%}
.section_intro .bg:after{right:0;background-position:100% 50%}
.section_intro .leaves:after{content:"";display:block;position:absolute}
.section_intro .leaves{position:absolute;left:0;width:100%;top:0;height:100%;background:url(../images/main_bg_leaves.png) no-repeat 50% 0;background-size:cover}
.section_intro .leaves:after{content:"";display:block;position:absolute;left:0;bottom:0;width:100%;background:url(../images/main_shadow.png) repeat-x center bottom;height:255px}

.section_intro .shadow{position:absolute}
.section_intro .tree1{width:1714px;height:1531px;top:50%;left:50%;margin-top:90px;margin-left:130px;background:url(../images/main_bg_tree1.png) no-repeat center;
-webkit-animation:tree1_move 17s .45s ease-in-out infinite;
-moz-animation:tree1_move 17s .45s ease-in-out infinite;
animation:tree1_move 17s .45s ease-in-out infinite
}
.section_intro .tree2{width:1714px;height:1531px;top:50%;left:50%;margin-top:-1397px;margin-left:384px;background:url(../images/main_bg_tree2.png) no-repeat center;
-webkit-animation:tree2_move 14s .3s ease-in-out infinite;
-moz-animation:tree2_move 14s .3s ease-in-out infinite;
animation:tree2_move 14s .3s ease-in-out infinite
}
.section_intro .tree3{width:1856px;height:1723px;top:50%;right:50%;margin-top:-694px;margin-right:384px;background:url(../images/main_bg_tree3.png) no-repeat center;
-webkit-animation:tree3_move 21s .15s ease-in-out infinite;
-moz-animation:tree3_move 21s .15s ease-in-out infinite;
animation:tree3_move 21s .15s ease-in-out infinite
}

.section_intro .inner_event{height:100%;padding:282px 0 0 0;}
.section_intro .wrap_intro{position:absolute;top:50%;left:50%;width:1120px;text-align:center;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.section_intro .wrap_intro img{display:inline-block;width:auto}
.section_intro .tit_intro{text-align:center;height:192px}
.section_intro .desc_intro{text-align:center;height:52px;margin:70px 0 58px 0}
.section_intro .period_intro{text-align:center;height:45px}


/* event */
.section_event .inner_event{position:relative;height:auto;width:1240px;margin:0 auto;box-sizing:border-box}
.section_event .inner_event img{display:inline-block;width:auto}
.section_event .tit_event,
.section_event .desc_event,
.section_event .period_event{display:block;width:100%;text-align:center}
.section_event .box_reward{z-index:1;position:relative}
.section_event .char_pubg{position:absolute;z-index:1;pointer-events:none;background-repeat:no-repeat;background-position:0 0}

.list_reward{text-align:center}
.list_reward li{display:inline-block;vertical-align:top}
.list_reward span{display:block}
.list_reward .reward{padding-top:16px}

/* type_event1 */
.type_event1{overflow:hidden;position:relative;height:1642px;background-image:url(../images/event1_bg.png);margin-bottom:-40px}
.type_event1 .inner_event{padding:167px 0 0 0}
.type_event1 .tit_event{height:163px}
.type_event1 .period_event{height:45px;margin:40px 0 54px}
.type_event1 .box_reward{position:relative;background:url(../images/event1_box.png) no-repeat 50% 0;height:703px;margin-bottom:12px}
.type_event1 .box_reward:before{content:"";display:block;position:absolute;pointer-events:none;left:-41px;top:-178px;width:1775px;height:1165px;background:url(../images/event1_box_grass.png) no-repeat 0 0}
.type_event1 .list_reward{padding-top:95px}
.type_event1 .char_pubg{width:766px;height:1261px;background-image:url(../images/event1_visual.png);left:1100px;top:-214px}

/* type_event2 */
.type_event2{overflow:hidden;position:relative;height:1560px;background-image:url(../images/event2_bg.png);margin-bottom:-56px}
.type_event2 .inner_event{padding:179px 0 0 0}
.type_event2 .tit_event{height:164px;margin:0 0 39px}
.type_event2 .period_event{height:45px;width:752px;margin:0 auto 14px;text-align:left}
.type_event2 .box_reward{position:relative;background:url(../images/event2_box.png) no-repeat 50% 0;height:562px;margin-top:41px;margin-bottom:20px}
.type_event2 .list_reward{padding-top:60px}
.type_event2 .list_reward li + li{margin-left:3px}
.type_event2 .char_pubg{width:1611px;height:1331px;background-image:url(../images/event2_visual.png);left:50%;margin-left:-157px;top:225px}


/* notice */
.notification{overflow:hidden;position:relative;height:448px;background-image:url(../images/notice_bg.png)}
.notification .inner_event{padding:95px 0 0 0}
.notification .tit_event{text-align:left;margin-bottom:32px}



/* obj_move */
[class*="obj_move"]{opacity:0}
.obj_move_tb{
	-webkit-transform:translate(0,-80px);
	-moz-transform:translate(0,-80px);
	-ms-transform:translate(0,-80px);
	transform:translate(0,-80px);
	-webkit-transition:opacity 300ms ease,transform 500ms cubic-bezier(0.175,0.885,0.32,1);
	-moz-transition:opacity 300ms ease,transform 500ms cubic-bezier(0.175,0.885,0.32,1);
	transition:opacity 300ms ease,transform 500ms cubic-bezier(0.175,0.885,0.32,1)
}
.obj_move_bt{
	-webkit-transform:translate(0,80px);
	-moz-transform:translate(0,80px);
	-ms-transform:translate(0,80px);
	transform:translate(0,80px);
	-webkit-transition:opacity 300ms ease,transform 500ms cubic-bezier(0.175,0.885,0.32,1);
	-moz-transition:opacity 300ms ease,transform 500ms cubic-bezier(0.175,0.885,0.32,1);
	transition:opacity 300ms ease,transform 500ms cubic-bezier(0.175,0.885,0.32,1)
}
.obj_move_rl{
	-webkit-transform:translate(1000px,-12px);
	-moz-transform:translate(1000px,-12px);
	-ms-transform:translate(1000px,-12px);
	transform:translate(1000px,-12px);
	-webkit-transition:opacity 200ms ease,transform 400ms cubic-bezier(0,0,0,0.99);
	-moz-transition:opacity 200ms ease,transform 400ms cubic-bezier(0,0,0,0.99);
	transition:opacity 200ms ease,transform 400ms cubic-bezier(0,0,0,0.99)
}

.activated .obj_move_tb,
.activated .obj_move_bt,
.activated .obj_move_rl{opacity:1;
	-webkit-transform:translate(0,0);
	-moz-transform:translate(0,0);
	-ms-transform:translate(0,0);
	transform:translate(0,0)
}
.activated .delay100{-moz-transition-delay:.1s;transition-delay:.1s}
.activated .delay200{-moz-transition-delay:.2s;transition-delay:.2s}
.activated .delay300{-moz-transition-delay:.3s;transition-delay:.3s}
.activated .delay400{-moz-transition-delay:.4s;transition-delay:.4s}
.activated .delay500{-moz-transition-delay:.5s;transition-delay:.5s}
.activated .delay600{-moz-transition-delay:.6s;transition-delay:.6s}
.activated .delay700{-moz-transition-delay:.7s;transition-delay:.7s}
.activated .delay800{-moz-transition-delay:.8s;transition-delay:.8s}
.activated .delay900{-moz-transition-delay:.9s;transition-delay:.9s}
.activated .delay1000{-moz-transition-delay:1s;transition-delay:1s}





/* animation */

/* tree-move */
@-webkit-keyframes tree1_move{
	0% {-webkit-transform:rotate(-1.5deg) translate(-3px, 2px)}
	25% {-webkit-transform:rotate(2deg) translate(1px, -5px)}
	50% {-webkit-transform:rotate(-.5deg) translate(-7px, 3px)}
	75% {-webkit-transform:rotate(1deg) translate(1px, -2px)}
	100% {-webkit-transform:rotate(-1.5deg) translate(-3px, 2px)}
}
@-moz-keyframes tree1_move{
	0% {-moz-transform:rotate(-1.5deg) translate(-3px, 2px)}
	25% {-moz-transform:rotate(2deg) translate(1px, -5px)}
	50% {-moz-transform:rotate(-.5deg) translate(-7px, 3px)}
	75% {-moz-transform:rotate(1deg) translate(1px, -2px)}
	100% {-moz-transform:rotate(-1.5deg) translate(-3px, 2px)}
}
@keyframes tree1_move{
	0% {transform:rotate(-1.5deg) translate(-3px, 2px)}
	25% {transform:rotate(2deg) translate(1px, -5px)}
	50% {transform:rotate(-.5deg) translate(-7px, 3px)}
	75% {transform:rotate(1deg) translate(1px, -5px)}
	100% {transform:rotate(-1.5deg) translate(-3px, 2px)}
}

@-webkit-keyframes tree2_move{
	0% {-webkit-transform:rotate(2deg) translate(-3px, -2px)}
	28% {-webkit-transform:rotate(-1deg) translate(1px, 6px)}
	50% {-webkit-transform:rotate(2.5deg) translate(-2px, 1px)}
	72% {-webkit-transform:rotate(-1.5deg) translate(4px, -5px)}
	100% {-webkit-transform:rotate(2deg) translate(-3px, -2px)}
}
@-moz-keyframes tree2_move{
	0% {-moz-transform:rotate(2deg) translate(-3px, -2px)}
	28% {-moz-transform:rotate(-1deg) translate(1px, 6px)}
	50% {-moz-transform:rotate(2.5deg) translate(-2px, 1px)}
	72% {-moz-transform:rotate(-1.5deg) translate(4px, -5px)}
	100% {-moz-transform:rotate(2deg) translate(-3px, -2px)}
}
@keyframes tree2_move{
	0% {transform:rotate(2deg) translate(-3px, -2px)}
	28% {transform:rotate(-1deg) translate(1px, 6px)}
	50% {transform:rotate(2.5deg) translate(-2px, 1px)}
	72% {transform:rotate(-1.5deg) translate(4px, -5px)}
	100% {transform:rotate(2deg) translate(-3px, -2px)}
}

@-webkit-keyframes tree3_move{
	0% {-webkit-transform:rotate(-1deg) translate(5px, -2px)}
	30% {-webkit-transform:rotate(2deg) translate(1px, 5px)}
	55% {-webkit-transform:rotate(-1.5deg) translate(-8px, 2px)}
	75% {-webkit-transform:rotate(.5deg) translate(1px, 5px)}
	100% {-webkit-transform:rotate(-1deg) translate(5px, -2px)}
}
@-moz-keyframes tree3_move{
	0% {-moz-transform:rotate(-1deg) translate(5px, -2px)}
	30% {-moz-transform:rotate(2deg) translate(1px, 5px)}
	55% {-moz-transform:rotate(-1.5deg) translate(-8px, 2px)}
	75% {-moz-transform:rotate(.5deg) translate(1px, 5px)}
	100% {-moz-transform:rotate(-1deg) translate(5px, -2px)}
}
@keyframes tree3_move{
	0% {transform:rotate(-1deg) translate(5px, -2px)}
	30% {transform:rotate(2deg) translate(1px, 5px)}
	55% {transform:rotate(-1.5deg) translate(-8px, 2px)}
	75% {transform:rotate(.5deg) translate(1px, 5px)}
	100% {transform:rotate(-1deg) translate(5px, -2px)}
}

/* ani_move_arr */
@-webkit-keyframes ani_move_arr{
	0% {-webkit-transform:translateY(-3px)}
	50% {-webkit-transform:translateY(2px)}
	100% {-webkit-transform:translateY(-3px)}
}
@-moz-keyframes ani_move_arr{
	0%{-moz-transform:translateY(-3px)}
	50%{-moz-transform:translateY(2px)}
	100%{-moz-transform:translateY(-3px)}
}
@keyframes ani_move_arr{
	0%{transform:translateY(-3px)}
	50%{transform:translateY(2px)}
	100%{transform:translateY(-3px)}
}