@charset "UTF-8";
/* reset */
html, body, div, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, address, code, em, img, samp, small, sub, sup, b, i, dl, dt, dd, ol, ul, li, fieldset, form, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body, input, textarea, select, table, button { font-size: 12px; margin: 0; color: #333; font-family: "Helvetica Neue", Helvetica, "Noto Sans","맑은 고딕", dotum, gulim,  Sans-serif, "Apple Color Emoji","Segoe UI Emoji","NotoColorEmoji","Segoe UI Symbol","Android Emoji","EmojiSymbols"; }

fieldset, img { border: 0; }

legend { display: none; }

em, address, i { font-style: normal; }

ul, ol, dl { list-style: none; }

button { cursor: pointer; border: 0; outline: none; background-color: transparent; }

hr { clear: both; }

label { cursor: pointer; }

table { border-collapse: collapse; border-spacing: 0; }

a { color: #333; text-decoration: none; cursor: pointer; outline: none; }

a:hover, a.active { color: #333; text-decoration: underline; }

img { vertical-align: top; }

input[type="text"]:focus, input[type="password"]:focus, textarea:focus { outline: none; }

header, hgroup, article, nav, footer, figure, figcaption, canvas, section, menu, details, aside { display: block; }

input, label, textarea, select { vertical-align: middle; }

textarea { border: 0; resize: none; }

input[type=text]::-ms-clear { display: none; }

input[type='checkbox'], input[type='radio'] { margin: 0; padding: 0; *margin: -3px; *margin-left: -4px; }

input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.campaignWrap { min-width: 1250px; }

.blind { position: absolute; z-index: -10; width: 0; height: 0; line-height: 0; font-size: 0; text-indent: -9999px; }

.sectionComment img { vertical-align: initial !important; }

.btn_s1_bean, #section1 .btnGetBean, #section2 .btnGetBean, .btn_s1_bean_complete, #section1 .btnGetBean.active, #section2 .btnGetBean.active, .btn_s1_m1, #section1 .mission1 .hideCont .btnMission, .btn_s1_m2, #section1 .mission2 .hideCont .btnMission:before, .btn_s2_bean, .btn_s2_bean_complete, .btn_s3_link, #section3 .innerWrap .btnGetBean, .h_h2, #headerTop .innerWrap > h2, .pop_close, .moduleLayerDefault .layerClose, .q1_answer1, #section2 .quizWrap.quiz1 li:nth-child(1) .answer span i:after, .q1_answer2, #section2 .quizWrap.quiz1 li:nth-child(2) .answer span i:after, .q1_answer3, #section2 .quizWrap.quiz1 li:nth-child(3) .answer span i:after, .q1_str1, #section2 .quizWrap.quiz1 li:nth-child(1) strong:before, .q1_str2, #section2 .quizWrap.quiz1 li:nth-child(2) strong:before, .q1_str3, #section2 .quizWrap.quiz1 li:nth-child(3) strong:before, .q2_answer1, #section2 .quizWrap.quiz2 li:nth-child(1) .answer span i:after, .q2_answer2, #section2 .quizWrap.quiz2 li:nth-child(2) .answer span i:after, .q2_answer3, #section2 .quizWrap.quiz2 li:nth-child(3) .answer span i:after, .q2_str1, #section2 .quizWrap.quiz2 li:nth-child(1) strong:before, .q2_str2, #section2 .quizWrap.quiz2 li:nth-child(2) strong:before, .q2_str3, #section2 .quizWrap.quiz2 li:nth-child(3) strong:before, .q3_answer1, #section2 .quizWrap.quiz3 li:nth-child(1) .answer span i:after, .q3_answer2, #section2 .quizWrap.quiz3 li:nth-child(2) .answer span i:after, .q3_answer3, #section2 .quizWrap.quiz3 li:nth-child(3) .answer span i:after, .q3_answer4, #section2 .quizWrap.quiz3 li:nth-child(4) .answer span i:after, .q3_str1, #section2 .quizWrap.quiz3 li:nth-child(1) strong:before, .q3_str2, #section2 .quizWrap.quiz3 li:nth-child(2) strong:before, .q3_str3, #section2 .quizWrap.quiz3 li:nth-child(3) strong:before, .q3_str4, #section2 .quizWrap.quiz3 li:nth-child(4) strong:before, .q_answer_false, #section2 .quizWrap .answer.false span i:before, .q_answer_true, #section2 .quizWrap .answer.true span i:before, .q_confirm, #section2 .quizWrap .btnAllComplete, .q_next, #section2 .quizWrap .btnNext, .q_next_active, #section2 .quizWrap .btnNext.active, .q_o, #section2 .quizWrap li > a.btnChoiceO:before, .q_o_over, #section2 .quizWrap li > a.btnChoiceO:hover:before, .q_prev, #section2 .quizWrap .btnPrev, .q_prev_active, #section2 .quizWrap .btnPrev.active, .q_x, #section2 .quizWrap li > a.btnChoiceX:before, .q_x_over, #section2 .quizWrap li > a.btnChoiceX:hover:before, .s1_h3, #section1 .innerWrap > h3, .s1_ico_check, #section1 .mission3 .contArea:after, .s1_ico_m1, #section1 .mission1 .contArea:before, .s1_ico_m3, #section1 .mission2 .contArea:before, #section1 .mission3 .contArea:before, .s2_h3, #section2 .innerWrap > h3 { background-image: url('/campaign/cardtip/resources/images/ccfd3/sprite/sprite-web.png'); background-repeat: no-repeat; display: inline-block; vertical-align: middle; font-size: 0; line-height: 0; text-indent: -9999px; }

.btn_s1_bean, #section1 .btnGetBean, #section2 .btnGetBean { width: 350px; height: 98px; background-position: 0 -1071px; }

.btn_s1_bean_complete, #section1 .btnGetBean.active, #section2 .btnGetBean.active { width: 350px; height: 98px; background-position: -605px 0; }

.btn_s1_m1, #section1 .mission1 .hideCont .btnMission { width: 611px; height: 139px; background-position: 0 -2138px; }

.btn_s1_m2, #section1 .mission2 .hideCont .btnMission:before { width: 378px; height: 34px; background-position: 0 -606px; }

.btn_s2_bean { width: 500px; height: 99px; background-position: 0 -1533px; }

.btn_s2_bean_complete { width: 500px; height: 99px; background-position: 0 -1632px; }

.btn_s3_link, #section3 .innerWrap .btnGetBean { width: 540px; height: 99px; background-position: 0 -1323px; }

.h_h2, #headerTop .innerWrap > h2 { width: 840px; height: 315px; background-position: 0 -3466px; }

.pop_close, .moduleLayerDefault .layerClose { width: 38px; height: 38px; background-position: 0 0; }

.q1_answer1, #section2 .quizWrap.quiz1 li:nth-child(1) .answer span i:after { width: 464px; height: 154px; background-position: -490px -1169px; }

.q1_answer2, #section2 .quizWrap.quiz1 li:nth-child(2) .answer span i:after { width: 701px; height: 178px; background-position: 0 -3288px; }

.q1_answer3, #section2 .quizWrap.quiz1 li:nth-child(3) .answer span i:after { width: 610px; height: 157px; background-position: 0 -3131px; }

.q1_str1, #section2 .quizWrap.quiz1 li:nth-child(1) strong:before { width: 838px; height: 85px; background-position: 0 -691px; }

.q1_str2, #section2 .quizWrap.quiz1 li:nth-child(2) strong:before { width: 662px; height: 35px; background-position: 0 -264px; }

.q1_str3, #section2 .quizWrap.quiz1 li:nth-child(3) strong:before { width: 720px; height: 126px; background-position: 0 -2012px; }

.q2_answer1, #section2 .quizWrap.quiz2 li:nth-child(1) .answer span i:after { width: 490px; height: 154px; background-position: 0 -1169px; }

.q2_answer2, #section2 .quizWrap.quiz2 li:nth-child(2) .answer span i:after { width: 631px; height: 153px; background-position: 0 -2430px; }

.q2_answer3, #section2 .quizWrap.quiz2 li:nth-child(3) .answer span i:after { width: 470px; height: 154px; background-position: -500px -1632px; }

.q2_str1, #section2 .quizWrap.quiz2 li:nth-child(1) strong:before { width: 720px; height: 35px; background-position: 0 -132px; }

.q2_str2, #section2 .quizWrap.quiz2 li:nth-child(2) strong:before { width: 662px; height: 84px; background-position: 0 -396px; }

.q2_str3, #section2 .quizWrap.quiz2 li:nth-child(3) strong:before { width: 515px; height: 84px; background-position: 0 -2891px; }

.q3_answer1, #section2 .quizWrap.quiz3 li:nth-child(1) .answer span i:after { width: 572px; height: 156px; background-position: 0 -2975px; }

.q3_answer2, #section2 .quizWrap.quiz3 li:nth-child(2) .answer span i:after { width: 548px; height: 154px; background-position: 0 -2737px; }

.q3_answer3, #section2 .quizWrap.quiz3 li:nth-child(3) .answer span i:after { width: 685px; height: 154px; background-position: 0 -2583px; }

.q3_answer4, #section2 .quizWrap.quiz3 li:nth-child(4) .answer span i:after { width: 658px; height: 153px; background-position: 0 -2277px; }

.q3_str1, #section2 .quizWrap.quiz3 li:nth-child(1) strong:before { width: 490px; height: 85px; background-position: -350px -1071px; }

.q3_str2, #section2 .quizWrap.quiz3 li:nth-child(2) strong:before { width: 793px; height: 85px; background-position: 0 -776px; }

.q3_str3, #section2 .quizWrap.quiz3 li:nth-child(3) strong:before { width: 549px; height: 85px; background-position: -378px -606px; }

.q3_str4, #section2 .quizWrap.quiz3 li:nth-child(4) strong:before { width: 662px; height: 85px; background-position: 0 -861px; }

.q_answer_false, #section2 .quizWrap .answer.false span i:before { width: 255px; height: 59px; background-position: -164px 0; }

.q_answer_true, #section2 .quizWrap .answer.true span i:before { width: 464px; height: 92px; background-position: -500px -1533px; }

.q_confirm, #section2 .quizWrap .btnAllComplete { width: 170px; height: 62px; background-position: -720px -132px; }

.q_next, #section2 .quizWrap .btnNext { width: 66px; height: 132px; background-position: -539px 0; }

.q_next_active, #section2 .quizWrap .btnNext.active { width: 66px; height: 132px; background-position: -728px -264px; }

.q_o, #section2 .quizWrap li > a.btnChoiceO:before { width: 210px; height: 210px; background-position: -750px -1323px; }

.q_o_over, #section2 .quizWrap li > a.btnChoiceO:hover:before { width: 210px; height: 210px; background-position: -662px -396px; }

.q_prev, #section2 .quizWrap .btnPrev { width: 66px; height: 132px; background-position: -890px -132px; }

.q_prev_active, #section2 .quizWrap .btnPrev.active { width: 66px; height: 132px; background-position: -662px -264px; }

.q_x, #section2 .quizWrap li > a.btnChoiceX:before { width: 210px; height: 210px; background-position: -662px -861px; }

.q_x_over, #section2 .quizWrap li > a.btnChoiceX:hover:before { width: 210px; height: 210px; background-position: -540px -1323px; }

.s1_h3, #section1 .innerWrap > h3 { width: 986px; height: 112px; background-position: 0 -1786px; }

.s1_ico_check, #section1 .mission3 .contArea:after { width: 126px; height: 48px; background-position: -38px 0; }

.s1_ico_m1, #section1 .mission1 .contArea:before { width: 60px; height: 60px; background-position: -419px 0; }

.s1_ico_m3, #section1 .mission2 .contArea:before, #section1 .mission3 .contArea:before { width: 60px; height: 60px; background-position: -479px 0; }

.s2_h3, #section2 .innerWrap > h3 { width: 714px; height: 114px; background-position: 0 -1898px; }

@keyframes movement { 0% { transform: translateX(0); }
  50% { transform: translateX(20px); }
  100% { transform: translateX(0); } }
@keyframes flash { 0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; } }
#layerAlert { position: fixed; left: 0; top: 0; z-index: 10000; text-align: center; }
#layerAlert.show .layerWrap, #layerAlert.show .moduleLayerDefault { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; }
#layerAlert.show .layerWrap .innerwrap, #layerAlert.show .moduleLayerDefault .innerwrap { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); }
#layerAlert.show .layerDimmed { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; }
#layerAlert .layerDimmed { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; background: #000; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; transition-duration: 0.4s; }
#layerAlert .layerWrap { display: inline-block; position: relative; z-index: 2; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; transition-duration: 0.4s; transition-timing-function: cubic-bezier(0.36, 0.55, 0.19, 1); transition-property: all, margin; }
#layerAlert .layerWrap .innerwrap { position: relative; z-index: 2; min-width: 300px; padding: 5px; -moz-transform: scale(0.8, 0.8); -ms-transform: scale(0.8, 0.8); -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); transition-duration: 0.4s; transition-timing-function: cubic-bezier(0.36, 0.55, 0.19, 1); transition-property: all, margin; border: 1px solid #c4c4c4; background: #f0f0f0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
#layerAlert .layerWrap .inner { min-height: 130px; background: #fff; }
#layerAlert .layerWrap .inner .txt { display: table-cell; padding: 15px; margin: 0 auto; line-height: 23px; word-break: break-word; text-align: center; vertical-align: middle; color: #50596c; font-size: 16px; }
#layerAlert .layerWrap .layerBtn { display: inline-block; padding: 15px 0 10px 0; text-align: center; }
#layerAlert .layerWrap .layerBtn a { position: relative; display: inline-block; vertical-align: top; min-width: 70px; white-space: nowrap; overflow: hidden; word-break: break-all; text-overflow: ellipsis; -o-text-overflow: ellipsis; padding: 6px 8px; color: #fff; font-size: 13px; text-decoration: none; margin: 0 5px; font-weight: bold; letter-spacing: -1px; outline: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
#layerAlert .layerWrap .layerBtn a.layerConfirm { background: #00d39a; }
#layerAlert .layerWrap .layerBtn a.layerConfirm:hover { -webkit-box-shadow: inset -1px 7px 15px 11px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset -1px 7px 15px 11px rgba(0, 0, 0, 0.1); box-shadow: inset -1px 7px 15px 11px rgba(0, 0, 0, 0.1); }
#layerAlert .layerWrap .layerBtn a.layerCancel { background: #9e9e9e; }
#layerAlert .layerWrap .layerBtn a.layerCancel:hover { -webkit-box-shadow: inset -1px 7px 15px 11px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset -1px 7px 15px 11px rgba(0, 0, 0, 0.1); box-shadow: inset -1px 7px 15px 11px rgba(0, 0, 0, 0.1); }
#layerAlert .layerWrap .layerClose { position: absolute; top: 6px; right: 4px; padding: 0px 8px 4px 9px; font-size: 17px; color: #737171; font-family: tahoma; text-decoration: none; border-radius: 21px; }

.slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }

.slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; }
.slick-list:focus { outline: none; }
.slick-list.dragging { cursor: pointer; cursor: hand; }

.slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; }
.slick-track:before, .slick-track:after { content: ""; display: table; }
.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }

.slick-slide { float: left; height: 100%; min-height: 1px; display: none; }
[dir="rtl"] .slick-slide { float: right; }
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }

.slick-arrow.slick-hidden { display: none; }

#layerAlert.show { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; }
#layerAlert.show .layerDimmed { opacity: 0.8; }
#layerAlert.show .layerWrap .innerwrap, #layerAlert.show .moduleLayerDefault .innerwrap { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; }

.moduleLayerDefault { position: relative; z-index: 2; top: 50%; margin: 0 auto; }
.moduleLayerDefault .innerwrap { position: relative; z-index: 2; min-width: 300px; padding: 5px; -moz-transform: scale(0.8, 0.8); -ms-transform: scale(0.8, 0.8); -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); transition-duration: 0.4s; transition-timing-function: cubic-bezier(0.36, 0.55, 0.19, 1); transition-property: all, margin; padding: 0; opacity: 0; }
.moduleLayerDefault .inner { position: relative; margin: 0 auto; }
.moduleLayerDefault .inner .txt .comment { position: absolute; bottom: 213px; left: 0; width: 100%; height: 51px; font-size: 22px; line-height: 51px; color: #666; font-family: 'Noto Sans KR'; }
.moduleLayerDefault .inner .txt .comment strong { color: #37af4b; font-weight: normal; }
.moduleLayerDefault .inner .txt .btn_go_happybean { display: inline-block; position: absolute; width: 167px; height: 28px; left: 207px; bottom: 158px; text-indent: -9999px; }
.moduleLayerDefault .layerBtn { bottom: 43px; left: 0; position: absolute; width: 100%; font-size: 0; line-height: 0; text-align: center; }
.moduleLayerDefault .layerBtn a { position: relative; display: inline-block; width: 186px; height: 64px; font-size: 0; text-indent: -9999px; line-height: 0; }
.moduleLayerDefault .layerClose { top: -48px; right: 0; position: absolute; }

.popGetBean1 .innerwrap .inner, .popGetBean2 .innerwrap .inner, .popGetBean3 .innerwrap .inner { width: 580px; height: 670px; }
.popGetBean1 .innerwrap .inner .txt, .popGetBean2 .innerwrap .inner .txt, .popGetBean3 .innerwrap .inner .txt { text-align: center; }
.popGetBean1 .innerwrap .inner .layerBtn, .popGetBean2 .innerwrap .inner .layerBtn, .popGetBean3 .innerwrap .inner .layerBtn { bottom: 50px; }

.popGetBean1 .innerwrap .inner { background: url(/campaign/cardtip/resources/images/ccfd3/web/pop_getbean1.png) no-repeat; }

.popGetBean2 .innerwrap .inner { background: url(/campaign/cardtip/resources/images/ccfd3/web/pop_getbean2.png) no-repeat; }

.popGetBean3 .innerwrap .inner { background: url(/campaign/cardtip/resources/images/ccfd3/web/pop_getbean3.png) no-repeat; }

.popLogin .innerwrap .inner { width: 580px; height: 335px; background: url(/campaign/cardtip/resources/images/ccfd3/web/popup_login.png) no-repeat; }
.popLogin .innerwrap .inner .layerBtn { bottom: 60px; }
.popLogin .innerwrap .inner .layerBtn a { width: 186px; }

.popEnd .innerwrap .inner { width: 580px; height: 335px; background: url(/campaign/cardtip/resources/images/ccfd3/web/popup_end.png) no-repeat; }
.popEnd .innerwrap .inner .layerBtn { bottom: 60px; }
.popEnd .innerwrap .inner .layerBtn a { height: 64px; }

.popAleady .innerwrap .inner { width: 580px; height: 335px; background: url(/campaign/cardtip/resources/images/ccfd3/web/popup_already.png) no-repeat; }
.popAleady .innerwrap .inner .layerBtn { bottom: 60px; }
.popAleady .innerwrap .inner .layerBtn a { width: 186px; height: 64px; }

.pop10min .innerwrap .inner { width: 580px; height: 542px; background: url(/campaign/cardtip/resources/images/ccfd3/web/popup_10min.png) no-repeat; }
.pop10min .innerwrap .inner .txt .btn_ask { display: inline-block; position: absolute; width: 144px; height: 25px; left: 217px; bottom: 50px; }
.pop10min .innerwrap .inner .layerBtn { bottom: 99px; }

.campaignWrap { position: relative; }
.campaignWrap .innerWrap { position: relative; margin: 0 auto; width: 1250px; height: 100%; }

#headerTop { position: relative; margin: 0 auto; height: 972px; overflow: hidden; background: #e7edf4 url(/campaign/cardtip/resources/images/ccfd3/web/bg_headerTop.gif) no-repeat top center; }
#headerTop .innerWrap > h2 { display: block; margin: 88px auto 0 auto; }

#section1 { height: 3144px; overflow: hidden; background: #d0e1f5 url(/campaign/cardtip/resources/images/ccfd3/web/bg_section1.gif) no-repeat top center; }
#section1 .innerWrap { height: 2892px; }
#section1 .innerWrap > h3 { top: 200px; left: 132px; position: absolute; }
#section1 .mission1, #section1 .mission2, #section1 .mission3 { top: 0; left: 0; position: absolute; width: 929px; background: url(/campaign/cardtip/resources/images/ccfd3/web/s1_content.png) no-repeat; }
#section1 .mission1 h4, #section1 .mission2 h4, #section1 .mission3 h4 { font-size: 0; text-indent: -9999px; line-height: 0; }
#section1 .mission1 .contArea.complete:before, #section1 .mission1 .contArea.complete:after, #section1 .mission2 .contArea.complete:before, #section1 .mission2 .contArea.complete:after, #section1 .mission3 .contArea.complete:before, #section1 .mission3 .contArea.complete:after { display: none; }
#section1 .mission1 .hideCont, #section1 .mission2 .hideCont, #section1 .mission3 .hideCont { top: 0; left: 0; position: absolute; }
#section1 .mission1 .hideCont strong, #section1 .mission1 .hideCont p, #section1 .mission1 .hideCont ol, #section1 .mission2 .hideCont strong, #section1 .mission2 .hideCont p, #section1 .mission2 .hideCont ol, #section1 .mission3 .hideCont strong, #section1 .mission3 .hideCont p, #section1 .mission3 .hideCont ol { font-size: 0; text-indent: -9999px; line-height: 0; }
#section1 .mission1 .hideCont:before, #section1 .mission2 .hideCont:before, #section1 .mission3 .hideCont:before { content: ''; top: 0; left: 0; position: absolute; }
#section1 .mission1 .hideCont.on:before, #section1 .mission2 .hideCont.on:before, #section1 .mission3 .hideCont.on:before { opacity: 0; transition: 0.6s; }
#section1 .mission1 { left: 299px; top: 447px; height: 443px; background-position: 0 0; }
#section1 .mission1 .contArea:before { content: ''; top: -61px; left: -287px; position: absolute; }
#section1 .mission1 .hideCont:before { left: 0; top: 125px; width: 930px; height: 317px; background: url(/campaign/cardtip/resources/images/ccfd3/web/s1_content_b1.png) no-repeat; }
#section1 .mission1 .hideCont .btnMission { top: 211px; left: 161px; position: absolute; animation: movement 2s ease-in-out infinite; }
#section1 .mission2 { left: 22px; top: 1128px; height: 691px; background-position: 0 -445px; }
#section1 .mission2 .contArea:before { content: ''; top: -53px; right: -290px; position: absolute; }
#section1 .mission2 .hideCont { left: 349px; }
#section1 .mission2 .hideCont:before { left: 0; width: 528px; height: 100%; background: url(/campaign/cardtip/resources/images/ccfd3/web/s1_content_b2.png) no-repeat; }
#section1 .mission2 .hideCont:nth-child(2) { top: 124px; height: 156px; }
#section1 .mission2 .hideCont:nth-child(3) { top: 312px; height: 158px; }
#section1 .mission2 .hideCont:nth-child(3):before { background-position: 0 -188px; }
#section1 .mission2 .hideCont:nth-child(4) { top: 502px; height: 188px; }
#section1 .mission2 .hideCont:nth-child(4):before { background-position: 0 -378px; }
#section1 .mission2 .hideCont .btnMission { top: 50%; left: 13px; position: absolute; width: 508px; height: 104px; margin-top: -52px; background-color: #ffbc3e; border-radius: 50px; font-size: 0; text-indent: -9999px; line-height: 0; }
#section1 .mission2 .hideCont .btnMission:before { content: ''; top: 35px; left: 71px; position: absolute; animation: flash 1.3s ease infinite; }
#section1 .mission3 { left: 299px; top: 2046px; height: 516px; background-position: 0 -1136px; }
#section1 .mission3 .contArea:before { content: ''; top: -32px; left: -290px; position: absolute; }
#section1 .mission3 .contArea:after { content: ''; top: 200px; left: 817px; position: absolute; animation: flash 1.3s ease infinite; }
#section1 .mission3 .hideCont { left: 17px; width: 904px; height: 75px; }
#section1 .mission3 .hideCont:before { left: 0; width: 904px; height: 100%; background: url(/campaign/cardtip/resources/images/ccfd3/web/s1_content_b3.png) no-repeat; }
#section1 .mission3 .hideCont:nth-child(2) { top: 243px; }
#section1 .mission3 .hideCont:nth-child(2):before { background-position: 0 8px; }
#section1 .mission3 .hideCont:nth-child(3) { top: 319px; }
#section1 .mission3 .hideCont:nth-child(3):before { background-position: 0 -68px; }
#section1 .mission3 .hideCont:nth-child(4) { top: 395px; }
#section1 .mission3 .hideCont:nth-child(4):before { background-position: 0 -144px; }
#section1 .mission3 .hideCont .btnMission { top: 0; right: 0; position: absolute; width: 73px; height: 75px; font-size: 0; text-indent: -9999px; line-height: 0; }
#section1 .btnGetBean { top: 2651px; left: 450px; position: absolute; }
#section1 .nextInfo { height: 252px; background: #5254ce url(/campaign/cardtip/resources/images/ccfd3/web/bg_section1_info.gif) no-repeat top center; }
#section1 .nextInfo strong { font-size: 0; text-indent: -9999px; line-height: 0; }

#section2 { height: 1296px; overflow: hidden; background: #f6f1dc url(/campaign/cardtip/resources/images/ccfd3/web/bg_section2.gif) no-repeat top center; }
#section2 .innerWrap { height: auto; padding-top: 197px; }
#section2 .innerWrap > h3 { display: block; margin: 0 auto; }
#section2 .instanceStudy { width: 1246px; overflow: hidden; margin: 0 auto; padding-top: 77px; padding-bottom: 45px; }
#section2 .instanceStudy ul { width: 1400px; }
#section2 .instanceStudy li { position: relative; float: left; width: 380px; height: 662px; margin-right: 53px; background: url(/campaign/cardtip/resources/images/ccfd3/web/s2_content.png) no-repeat; }
#section2 .instanceStudy li:nth-child(1) { background-position: 0px 0; }
#section2 .instanceStudy li.complete:nth-child(1) { background-position: 0px -662px; }
#section2 .instanceStudy li:nth-child(2) { background-position: -380px 0; }
#section2 .instanceStudy li.complete:nth-child(2) { background-position: -380px -662px; }
#section2 .instanceStudy li:nth-child(3) { background-position: -760px 0; }
#section2 .instanceStudy li.complete:nth-child(3) { background-position: -760px -662px; }
#section2 .instanceStudy li a { bottom: 16px; left: 10px; position: absolute; width: 360px; height: 80px; font-size: 0; text-indent: -9999px; line-height: 0; }
#section2 .quizWrap { top: 386px; left: 0; position: absolute; display: none; width: 1250px; height: 688px; }
#section2 .quizWrap ul { padding: 30px 55px 0 55px; }
#section2 .quizWrap li { display: none; position: relative; }
#section2 .quizWrap li.current { display: block; }
#section2 .quizWrap li.complete strong, #section2 .quizWrap li.complete > a { display: none; }
#section2 .quizWrap li.complete .answer { display: block; }
#section2 .quizWrap li strong { display: table-cell; width: 1140px; height: 207px; text-align: center; vertical-align: middle; font-size: 0; text-indent: -9999px; line-height: 0; text-indent: 0; }
#section2 .quizWrap li > a { top: 207px; position: absolute; width: 495px; height: 355px; border-radius: 5px; box-shadow: 0px 10px 0px 0px #d4d4d4; background-color: #eaeaea; font-size: 0; text-indent: -9999px; line-height: 0; }
#section2 .quizWrap li > a:hover { box-shadow: 0px 10px 0px 0px #cacae1; background-color: #dfdff7; }
#section2 .quizWrap li > a.btnChoiceO { left: 55px; }
#section2 .quizWrap li > a.btnChoiceO:before { content: ''; top: 70px; left: 140px; position: absolute; }
#section2 .quizWrap li > a.btnChoiceX { right: 55px; }
#section2 .quizWrap li > a.btnChoiceX:before { content: ''; top: 70px; left: 140px; position: absolute; }
#section2 .quizWrap .answer { display: none; width: 1000px; height: 592px; margin: 0 auto; }
#section2 .quizWrap .answer span { display: table-cell; width: 1000px; height: 592px; vertical-align: middle; text-align: center; }
#section2 .quizWrap .answer span i:before { content: ''; display: block !important; margin: 0 auto; }
#section2 .quizWrap .answer.true span i:before { content: ''; margin-bottom: 29px; }
#section2 .quizWrap .answer.false span i:before { content: ''; margin-top: 22px; margin-bottom: 40px; }
#section2 .quizWrap .btnAllComplete { display: block; margin: 48px auto 0 auto; }
#section2 .quizWrap .btnPrev { top: 274px; left: 0; position: absolute; }
#section2 .quizWrap .btnNext { top: 274px; right: 0; position: absolute; }
#section2 .quizWrap.quiz1 { background: url(/campaign/cardtip/resources/images/ccfd3/web/bg_q_pop1.gif) no-repeat top center; }
#section2 .quizWrap.quiz1 li:nth-child(1) strong:before { content: ''; }
#section2 .quizWrap.quiz1 li:nth-child(1) .answer span i:after { content: ''; }
#section2 .quizWrap.quiz1 li:nth-child(2) strong:before { content: ''; }
#section2 .quizWrap.quiz1 li:nth-child(2) .answer span i:after { content: ''; }
#section2 .quizWrap.quiz1 li:nth-child(3) strong:before { content: ''; }
#section2 .quizWrap.quiz1 li:nth-child(3) .answer span i:after { content: ''; }
#section2 .quizWrap.quiz2 { background: url(/campaign/cardtip/resources/images/ccfd3/web/bg_q_pop2.gif) no-repeat top center; }
#section2 .quizWrap.quiz2 li:nth-child(1) strong:before { content: ''; }
#section2 .quizWrap.quiz2 li:nth-child(1) .answer span i:after { content: ''; }
#section2 .quizWrap.quiz2 li:nth-child(2) strong:before { content: ''; }
#section2 .quizWrap.quiz2 li:nth-child(2) .answer span i:after { content: ''; }
#section2 .quizWrap.quiz2 li:nth-child(3) strong:before { content: ''; }
#section2 .quizWrap.quiz2 li:nth-child(3) .answer span i:after { content: ''; }
#section2 .quizWrap.quiz3 { background: url(/campaign/cardtip/resources/images/ccfd3/web/bg_q_pop3.gif) no-repeat top center; }
#section2 .quizWrap.quiz3 li:nth-child(1) strong:before { content: ''; }
#section2 .quizWrap.quiz3 li:nth-child(1) .answer span i:after { content: ''; }
#section2 .quizWrap.quiz3 li:nth-child(2) strong:before { content: ''; }
#section2 .quizWrap.quiz3 li:nth-child(2) .answer span i:after { content: ''; }
#section2 .quizWrap.quiz3 li:nth-child(3) strong:before { content: ''; }
#section2 .quizWrap.quiz3 li:nth-child(3) .answer span i:after { content: ''; }
#section2 .quizWrap.quiz3 li:nth-child(1) strong:before { content: ''; }
#section2 .quizWrap.quiz3 li:nth-child(1) .answer span i:after { content: ''; }
#section2 .quizWrap.quiz3 li:nth-child(2) strong:before { content: ''; }
#section2 .quizWrap.quiz3 li:nth-child(2) .answer span i:after { content: ''; }
#section2 .quizWrap.quiz3 li:nth-child(3) strong:before { content: ''; }
#section2 .quizWrap.quiz3 li:nth-child(3) .answer span i:after { content: ''; }
#section2 .quizWrap.quiz3 li:nth-child(4) strong:before { content: ''; }
#section2 .quizWrap.quiz3 li:nth-child(4) .answer span i:after { content: ''; }
#section2 .quizWrap .pagination { top: 38px; left: 121px; position: absolute; color: #fff; letter-spacing: 4px; }
#section2 .quizWrap .pagination i { font-weight: bold; font-size: 29px; }
#section2 .quizWrap .pagination span { opacity: 0.5; font-size: 27px; }
#section2 .quizWrap .pagination span::before { content: '/'; }
#section2 .quizWrap .btnQuizClose { top: 45px; right: 56px; position: absolute; width: 48px; height: 48px; font-size: 0; text-indent: -9999px; line-height: 0; }
#section2 .btnGetBean { display: block !important; margin: 0 auto !important; }

#section3 { overflow: hidden; background: #4267b2 url(/campaign/cardtip/resources/images/ccfd3/web/bg_section3.gif) no-repeat center 110px; }
#section3 .innerWrap { height: 880px; }
#section3 .innerWrap .btnGetBean { top: 676px; left: 355px; position: absolute; }
#section3 .infoWrap { height: 450px; background-color: #f2f2f2; }
#section3 .infoWrap:before { content: ''; display: block; width: 1140px; height: 358px; margin: 0 auto; background: url(/campaign/cardtip/resources/images/ccfd3/web/bg_section3_info.gif) no-repeat; }

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