@charset "utf-8";
/* Common */
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
html,body,input,textarea,select,button,table{font-family:'나눔고딕','돋움',Dotum,AppleGothic,sans-serif} 
img,fieldset{border:0}
ul,ol{list-style:none}
em,address{font-style:normal}
a{text-decoration:none;}
a:hover,a:active,a:focus{text-decoration:underline}
input[type=text]::-ms-clear{display:none}
.blind{position:absolute; clip:rect(0 0 0 0); width:1px; height:1px; margin:-1px; overflow:hidden; color:transparent; font-size:1px;}

.card_wrap {width:100%; min-width:1250px; overflow:hidden; position:relative;}

.card_wrap .section1 {width:100%; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec1.gif) center 0 no-repeat; background-color:#fff;}
.card_wrap .section1 .inner_box {width:1250px; height:100px; margin:0 auto; position:relative;}
.card_wrap .section1 .logo a {display:block; width:210px; height:100px; position:absolute; left:0px; top:0px; }
.card_wrap .section1 .btn_box a.btns1 {width: 422px; height: 100px; display:inline-block; position:absolute; right:0px; top:0px; }
.card_wrap .section1 .btns2:hover {background:url(/campaign/cardtip/resources/images/ccfd2/web/sec1_3_on.jpg) 0 0 no-repeat;}

.card_wrap .section2 {width:100%; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec2.gif) center 0 no-repeat; background-color:#00bbe6; }
.card_wrap .section2 .inner_box {width:1250px; height:960px; margin:0 auto; position:relative;}
.card_wrap .section2 .btn_howto {position:absolute; left:398px; top:636px; display:inline-block; width: 459px; height: 129px; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec2_1_off.png) 0 0 no-repeat; }
.card_wrap .section2 .btn_howto:hover {background:url(/campaign/cardtip/resources/images/ccfd2/web/sec2_1_on.png) 0 0 no-repeat;}

.card_wrap .section3 {width:100%;  position:relative; height: 0px; overflow:hidden; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec3.gif) center 0 no-repeat;  background-color:#f0d101;}
.card_wrap .section3 .inner_box {width:1250px; height:825px; margin:0 auto; position:relative;}
.card_wrap .section3 .btn_start {position:absolute; left:732px; top:564px; display:inline-block; width: 459px; height: 129px; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec3_1.png) 0 0 no-repeat; opacity:0;}
.card_wrap .section3 .btn_start:hover {opacity:1;}
.card_wrap .section3 .step_box {display:inline-block; }
.card_wrap .section3 .step_box li {display:inline-block; width: 160px; height: 160px; position:absolute; transition: all 0.5s ease 0s;}
.card_wrap .section3 .step_box .step1 {left:46px; top:151px; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec3_2_1.png) 0 0 no-repeat; }
.card_wrap .section3 .step_box .step2 {left:376px; top:169px; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec3_2_2.png) 0 0 no-repeat; }
.card_wrap .section3 .step_box .step3 {left:178px; top:332px; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec3_2_3.png) 0 0 no-repeat; }
.card_wrap .section3 .step_box .step4 {left:463px; top:379px; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec3_2_5.png) 0 0 no-repeat; }
.card_wrap .section3 .step_box li.ani1 {transform: scale(1.15, 1.15) rotate(10deg);}
.card_wrap .section3 .step_box li.ani2 {transform: scale(1.15, 1.15) rotate(-10deg);}

.card_wrap .section4 {width:100%; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec4.png) center 0 no-repeat;  background-color:#7bb6cd; position:relative; overflow:hidden; }
.card_wrap .section4 .inner_box {width:1250px; height:1110px; margin:0 auto; position:relative; }
.card_wrap .section4 .start_box {width: 1250px; height: 795px; position:absolute; left:0px; top:140px; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec4_1.png) 0 0 no-repeat; }
.card_wrap .section4 .start_box .btn_start {position:absolute; left:398px; top:488px; display:inline-block; width: 459px; height: 129px; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec4_2.png) 0 0 no-repeat; opacity:0;}
.card_wrap .section4 .start_box .btn_start:hover {opacity:1;}
.card_wrap .section4 .start_box .coin {position:absolute; display:inline-block; width: 45px; height: 49px; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec4_1_1.png) 0 0 no-repeat; animation: coin_updown 1s ease-in-out 0s infinite ;}
.card_wrap .section4 .start_box .coin1 {left:157px; bottom:260px; }
.card_wrap .section4 .start_box .coin2 {left:253px; bottom:260px; }
.card_wrap .section4 .start_box .coin3 {left:990px; bottom:218px; }
.card_wrap .section4 .start_box .coin4 {left:1080px; bottom:218px; }

@keyframes coin_updown {
	0%		{transform: translate(0, 0px);}
	50%		{transform: translate(0, 5px);}
	100%	{transform: translate(0, 0px);}
}

.card_wrap .section4 .title {display:none; width: 1250px; height: 265px; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec4_3.png) center 0 no-repeat; }
.card_wrap.npay_wrap .section4 .title {background:url(/campaign/cardtip/resources/images/ccfd2/web/sec4_3_npay.png) center 0 no-repeat;}

.card_wrap .section4 .phone_wrap {position:absolute; left:72px; bottom:-835px; width: 516px; height: 835px; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec4_4.png) center 0 no-repeat;}
.card_wrap .section4 .phone_wrap .btn {display:inline-block; width: 392px; height: 175px; position:absolute; }
.card_wrap .section4 .phone_wrap .btn1 {left:-94px; top:70px; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec4_5_1.png) center center no-repeat; }
.card_wrap .section4 .phone_wrap .btn2 {left:200px; top:237px; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec4_5_2.png) center center no-repeat; }
.card_wrap .section4 .phone_wrap .btn3 {left:-94px; top:395px; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec4_5_3.png) center center no-repeat; }
.card_wrap .section4 .phone_wrap .btn1.on {background:url(/campaign/cardtip/resources/images/ccfd2/web/sec4_5_1_on.png) center center no-repeat; }
.card_wrap .section4 .phone_wrap .btn2.on {background:url(/campaign/cardtip/resources/images/ccfd2/web/sec4_5_2_on.png) center center no-repeat; }
.card_wrap .section4 .phone_wrap .btn3.on {background:url(/campaign/cardtip/resources/images/ccfd2/web/sec4_5_3_on.png) center center no-repeat; }
.card_wrap .section4 .phone_wrap .btn1.complete {background:url(/campaign/cardtip/resources/images/ccfd2/web/sec4_5_1_comp.png) center center no-repeat; }
.card_wrap .section4 .phone_wrap .btn2.complete {background:url(/campaign/cardtip/resources/images/ccfd2/web/sec4_5_2_comp.png) center center no-repeat; }
.card_wrap .section4 .phone_wrap .btn3.complete {background:url(/campaign/cardtip/resources/images/ccfd2/web/sec4_5_3_comp.png) center center no-repeat; }
.card_wrap .section4 .phone_wrap .hand {display:none;  width: 56px; height: 70px; position:absolute; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec4_7.png) center center no-repeat; animation: hand_updown 0.5s ease-in-out 0s infinite ;}
.card_wrap .section4 .phone_wrap .hand1 {position:absolute; left:50px; top:260px; }
.card_wrap .section4 .phone_wrap .hand2 {position:absolute; left:370px; top:425px; }
.card_wrap .section4 .phone_wrap .hand3 {position:absolute; left:50px; top:585px; }

@keyframes hand_updown {
	0%		{transform: translate(0, 0px);}
	50%		{transform: translate(0, -20px);}
	100%	{transform: translate(0, 0px);}
}

.card_wrap .section4 .conts_box {display:none; width: 558px; height: 733px; position:absolute; right:0px; top:266px; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec4_6_1.png) center bottom no-repeat;}
.card_wrap .section4 .conts_box li {position:absolute; left:0px; top:0px; width: 558px; height: 733px; display:none; }
.card_wrap .section4 .conts_box li.ty1 {background:url(/campaign/cardtip/resources/images/ccfd2/web/sec4_6_2.png) center bottom no-repeat;}
.card_wrap .section4 .conts_box li.ty2 {background:url(/campaign/cardtip/resources/images/ccfd2/web/sec4_6_3.png) center bottom no-repeat; }
.card_wrap .section4 .conts_box li.ty3 {background:url(/campaign/cardtip/resources/images/ccfd2/web/sec4_6_4.png) center bottom no-repeat;}
.card_wrap .section4 .conts_box li .btn_confirm {display:inline-block; width: 326px; height: 85px; position:absolute; left:115px; top:598px;}

.card_wrap .section4 .btn_getbean {display:none; width: 426px; height: 85px; position:absolute; left:757px; top:864px; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec4_getbean.gif) 0 0 no-repeat; }


.card_wrap .section5 {width:100%; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec5.png) center 0 no-repeat;  background-color:#0d98cc; position:relative; overflow:hidden; }
.card_wrap .section5 .inner_box {width:1250px; height:1110px; margin:0 auto; position:relative; }
.card_wrap .section5 .start_box {width: 1250px; height: 795px; position:absolute; left:0px; top:140px; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec5_0.png) 0 0 no-repeat; }
.card_wrap .section5 .start_box .btn_start {position:absolute; left:398px; top:417px; display:inline-block; width: 459px; height: 129px; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec4_2.png) 0 0 no-repeat; opacity:0;}
.card_wrap .section5 .start_box .btn_start:hover {opacity:1;}
.card_wrap .section5 .start_box .coin_box {width: 800px; display:inline-block; position:absolute; left:270px; bottom:132px; }
.card_wrap .section5 .start_box .coin_box span {float: left; display:inline-block; width: 33px; height: 32px; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec5_0_1.png) 0 0 no-repeat; position:relative; margin-right: 35px; animation: coin_arcordian 1s ease-in-out 0s infinite ;}
@keyframes coin_arcordian {
	0%		{transform: scale(1, 1);}
	50%		{transform: scale(0.9, 1);}
	100%	{transform: scale(1, 1);}
}

.card_wrap .section5 .title {display:none; width: 1250px; height: 295px; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec5_1.png) center 0 no-repeat; }

.card_wrap .section5 .prograss_box {display:none; width: 728px; height: 86px; padding: 11px 15px 0 11px;  position:absolute; left:250px; top:264px; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec5_3.png) 0 0 no-repeat; }
.card_wrap .section5 .prograss_box .bar {display:inline-block; width: 0%; height: 59px; background-color:#ab3232; border-radius: 10px; padding:0; transition: width 0.5s ease 0s;}
.card_wrap .section5 .prograss_box.width25  .bar {width: 25%; }
.card_wrap .section5 .prograss_box.width50  .bar {width: 50%; }
.card_wrap .section5 .prograss_box.width75  .bar {width: 75%; }
.card_wrap .section5 .prograss_box.width100 .bar {width: 100%; }
.card_wrap .section5 .conts_box {display:none; width: 1250px; height: 740px; position:absolute; left:0px; bottom:0px;}
.card_wrap .section5 .conts_box .step1 {width: 1250px; height: 740px; position:absolute; left:0px; top:0px; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec5_2_1.png) 0 0 no-repeat; }
.card_wrap .section5 .conts_box .step1 .btn_next {display:inline-block; position:absolute; left:672px; top:483px; width: 328px; height: 87px; }
.card_wrap .section5 .conts_box .step2 {display:none; width: 1250px; height: 740px; position:absolute; left:0px; top:0px; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec5_2_2.png) 0 0 no-repeat; }
.card_wrap .section5 .conts_box .step2 .btn_next {display:inline-block; position:absolute; left:672px; top:483px; width: 328px; height: 87px; }
.card_wrap .section5 .conts_box .step3 {display:none;width: 1250px; height: 740px; position:absolute; left:0px; top:0px; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec5_2_3.png) 0 0 no-repeat; }
.card_wrap .section5 .conts_box .step3 .btn_next {display:none; position:absolute; left:674px; top:499px; width: 328px; height: 87px; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec5_2_3_5.png) 0 0 no-repeat; }
.card_wrap .section5 .conts_box .step3 .btn_box a {display:inline-block;  width: 371px; height: 211px; position:absolute; opacity:0; transition: opacity 0.5s ease 0s;} 
.card_wrap .section5 .conts_box .step3 .btn_box li.on a {opacity:1;}
.card_wrap .section5 .conts_box .step3 .btn_box .btn1 {left:464px; top:50px; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec5_2_3_1.png) 0 0 no-repeat; }
.card_wrap .section5 .conts_box .step3 .btn_box .btn2 {left:838px; top:50px; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec5_2_3_2.png) 0 0 no-repeat; }
.card_wrap .section5 .conts_box .step3 .btn_box .btn3 {left:464px; top:268px; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec5_2_3_3.png) 0 0 no-repeat; }
.card_wrap .section5 .conts_box .step3 .btn_box .btn4 {left:838px; top:268px; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec5_2_3_4.png) 0 0 no-repeat; }
.card_wrap .section5 .conts_box .step3 .hand_box {display:inline-block; }
.card_wrap .section5 .conts_box .step3 .hand_box div {display:none; width: 56px; height: 70px; position:absolute; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec4_7.png) 0 0 no-repeat; animation: hand_updown 0.5s ease-in-out 0s infinite ;}
.card_wrap .section5 .conts_box .step3 .hand_box .hand1 {left:618px; top:250px; display:block; }
.card_wrap .section5 .conts_box .step3 .hand_box .hand2 {left:1000px; top:250px;}
.card_wrap .section5 .conts_box .step3 .hand_box .hand3 {left:618px; top:470px;}
.card_wrap .section5 .conts_box .step3 .hand_box .hand4 {left:1000px; top:470px;}
.card_wrap .section5 .conts_box .step3 .character {display:none; position:absolute; left:0px; top:55px; width: 405px; height: 521px; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec5_2_3_7.png) 0 0 no-repeat;}

.card_wrap .section5 .conts_box .step4 {display:none; width: 1250px; height: 740px; position:absolute; left:0px; top:0px; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec5_2_4.png) 0 0 no-repeat; }
.card_wrap .section5 .conts_box .step4 .btn_box a {display:inline-block;  width: 535px; height: 105px; position:absolute; background:url(/campaign/cardtip/resources/images/ccfd2/web/blank0.png) 0 0 repeat;} 
.card_wrap .section5 .conts_box .step4 .btn_box .btn1 {left:670px; top:257px; }
.card_wrap .section5 .conts_box .step4 .btn_box .btn2 {left:670px; top:375px; }
.card_wrap .section5 .conts_box .step4 .btn_box .btn3 {left:670px; top:493px;}
.card_wrap .section5 .conts_box .step4 .answer {display:none; width: 1250px; height: 740px; position:absolute; left:0px; top:0px;}
.card_wrap .section5 .conts_box .step4 .answer .btn_revert {position:absolute; left:774px; top:399px; display:inline-block; width: 326px; height: 85px; background:url(/campaign/cardtip/resources/images/ccfd2/web/blank0.png) 0 0 repeat;}
.card_wrap .section5 .conts_box .step4 .answer .btn_in_next {position:absolute; left:774px; top:494px; display:inline-block; width: 326px; height: 85px; background:url(/campaign/cardtip/resources/images/ccfd2/web/blank0.png) 0 0 repeat;}
.card_wrap .section5 .conts_box .step4 .answer1 {background:url(/campaign/cardtip/resources/images/ccfd2/web/sec5_2_4_1.png) 0 0 no-repeat;}
.card_wrap .section5 .conts_box .step4 .answer2 {background:url(/campaign/cardtip/resources/images/ccfd2/web/sec5_2_4_2.png) 0 0 no-repeat;}
.card_wrap .section5 .conts_box .step4 .answer3 {background:url(/campaign/cardtip/resources/images/ccfd2/web/sec5_2_4_3.png) 0 0 no-repeat;}
.card_wrap .section5 .bean_box {display:none; width: 1250px; height: 630px; position:absolute; left:0px; bottom:105px; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec5_2_5.png) 0 0 no-repeat;}
.card_wrap .section5 .bean_box .btn_link {position:absolute; left:806px; top:243px; display:inline-block; width: 290px; height: 55px; background:url(/campaign/cardtip/resources/images/ccfd2/web/blank0.png) 0 0 repeat;}
.card_wrap .section5 .bean_box .btn_getbean {position:absolute; left:413px; top:494px; display:inline-block; width: 428px; height: 87px; background:url(/campaign/cardtip/resources/images/ccfd2/web/blank0.png) 0 0 repeat;}

.card_wrap .section6 {width:100%; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec6.gif) center 0 no-repeat;  background-color:#90dce4; position:relative; overflow:hidden; }
.card_wrap .section6 .inner_box {width:1250px; height:1045px; margin:0 auto; position:relative; }
.card_wrap .section6 .start_box {width: 1004px; height: 727px; position:absolute; left:125px; top:208px; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec6_1.png) 0 0 no-repeat; }
.card_wrap .section6 .start_box .btn {position:absolute; display:inline-block; width: 180px; height: 220px;  background:url(/campaign/cardtip/resources/images/ccfd2/web/blank0.png) 0 0 repeat;}
.card_wrap .section6 .start_box .btn1 {left:120px; top:383px; }
.card_wrap .section6 .start_box .btn2 {left:314px; top:383px; }
.card_wrap .section6 .start_box .btn3 {left:510px; top:383px; }
.card_wrap .section6 .start_box .btn4 {left:705px; top:383px; }

.card_wrap .section6 .conts_box {display:none; width: 1004px; height: 727px; position:absolute; left:125px; top:208px; }
.card_wrap .section6 .conts_box .tabs {display:inline-block; }
.card_wrap .section6 .conts_box .tabs a {position:absolute; z-index:5; display:inline-block; width: 179px; height: 180px;  background:url(/campaign/cardtip/resources/images/ccfd2/web/blank0.png) 0 0 repeat;}
.card_wrap .section6 .conts_box .tabs .btn1 {left:122px; top:0px; }
.card_wrap .section6 .conts_box .tabs .btn2 {left:317px; top:0px; }
.card_wrap .section6 .conts_box .tabs .btn3 {left:512px; top:0px; }
.card_wrap .section6 .conts_box .tabs .btn4 {left:707px; top:0px; }

.card_wrap .section6 .conts_box .tab_conts {display:inline-block; }
.card_wrap .section6 .conts_box .tab_conts li {position:absolute; left:0px; top:0px; width: 1004px; height: 727px; opacity:0; transition: opacity 0.5s ease 0s;}
.card_wrap .section6 .conts_box .tab_conts li.on {opacity:1;}
.card_wrap .section6 .conts_box .tab_conts li.ty1 {background:url(/campaign/cardtip/resources/images/ccfd2/web/sec6_2_1.png) 0 0 no-repeat; }
.card_wrap .section6 .conts_box .tab_conts li.ty2 {background:url(/campaign/cardtip/resources/images/ccfd2/web/sec6_2_2.png) 0 0 no-repeat; }
.card_wrap .section6 .conts_box .tab_conts li.ty3 {background:url(/campaign/cardtip/resources/images/ccfd2/web/sec6_2_3.png) 0 0 no-repeat; }
.card_wrap .section6 .conts_box .tab_conts li.ty4 {background:url(/campaign/cardtip/resources/images/ccfd2/web/sec6_2_4.png) 0 0 no-repeat; }
.card_wrap .section6 .conts_box .tab_conts .id_name {width: 200px; text-align:right; position:absolute; right:530px; top:208px; font-size:42px; font-weight:bold; line-height:46px; color:#141414; letter-spacing:-0.05em; }


.card_wrap .section8 {width:100%; background:url(/campaign/cardtip/resources/images/ccfd2/web/sec8.gif) center 0 no-repeat;  background-color:#fff; position:relative; overflow:hidden; }
.card_wrap .section8 .inner_box {width:1250px; height:168px; margin:0 auto; position:relative; }
.card_wrap .section8 .btn_link {position:absolute; left:492px; top:36px; display:inline-block; width: 317px; height: 94px; background:url(/campaign/cardtip/resources/images/ccfd2/web/blank0.png) 0 0 repeat;}

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

/* 팝업공통 */
.card_wrap .popup_all > div {display:table; width:100%; height:100%; position:fixed; left:0px; top:0px; z-index:150;}
.card_wrap .popup_all .bg {width:100%; height:100%; position:absolute; left:0px; top:0px; background:url(/campaign/cardtip/resources/images/ccfd2/web/blank75.png) 0 0 repeat;}
.card_wrap .popup_all .out_layer_box {display:table-cell; text-align:center; vertical-align:middle;}
.card_wrap .popup_all .in_layer_box {display:inline-block; width:580px; position:relative; z-index:10;}
.card_wrap .popup_all .btn_close {display:inline-block; width:38px; height:38px; position:absolute; right:0px; top:-50px; background:url(/campaign/cardtip/resources/images/ccfd2/web/btn_popup_close.png) 0 0 no-repeat;}
.card_wrap .popup_all .btn_confirm {display:inline-block; position:absolute; background:url(/campaign/cardtip/resources/images/ccfd2/web/blank0.png) 0 0 repeat;}
.card_wrap .popup_all .btn_go_happybean {display:inline-block; position:absolute; background:url(/campaign/cardtip/resources/images/ccfd2/web/blank0.png) 0 0 repeat;}
.card_wrap .popup_all .btn_ask {display:inline-block; position:absolute; background:url(/campaign/cardtip/resources/images/ccfd2/web/blank0.png) 0 0 repeat;}

.movePage li:nth-child(1) a{background: url(/campaign/cardtip/resources/images/ccfd2/web/movepage_prev.gif) no-repeat;}
.movePage li:nth-child(2) a{background: url(/campaign/cardtip/resources/images/ccfd2/web/movepage_next.gif) no-repeat;}