@charset "utf-8";

#main{background: url(../img/page003/bg.png) no-repeat 0 0/100% auto;overflow: hidden}
.bt-howto{background-image: url(../img/page003/bt-howto.png);}
.bt-howto:hover, .bt-howto:active{background-image: url(../img/page003/bt-howto_hover.png);}

.img-wrp{position: absolute;pointer-events: none;}
svg{overflow: visible}
.img-wrp strong{position: absolute;font-size: 35px;font-weight: 800;line-height: 1.2;color: #000;white-space: nowrap;pointer-events: none;}
.img-wrp strong>span{display: block}


.img-wrp.on path{pointer-events: auto; cursor: pointer;}
.img-wrp.on:not(.done){z-index: 5}
.img-wrp.on:not(.done) path{filter: drop-shadow(0px 8px 8px rgba(0, 0, 0, 0.25));stroke-width: 4px;stroke-linecap: round;stroke-linejoin: round;stroke-dasharray: 5px, 8px;stroke: #006FBE}
.step-wrp .circle{position: absolute;width: 61px;height: 61px;background: #9B1828;box-shadow: 0px 4px 6px 0px rgba(255, 255, 255, 0.20) inset, 0px -4px 6px 0px rgba(0, 0, 0, 0.25) inset;filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));border-radius: 100%;top: 547px;left: 930px;pointer-events: none;z-index: 10;}

.img-wrp.on:not(.done) strong{color: #fff}
.img-wrp.on:not(.done) strong>span{position: relative;z-index: 5}
.img-wrp.on:not(.done) strong>span::before{content: attr(data-text);position: absolute;top: 0;left: 0;-webkit-text-stroke: 8px #006FBE;z-index: -1;}


.step2.on:not(.done) path{stroke: #158C04}
.step2.on:not(.done) strong>span::before{-webkit-text-stroke-color: #158C04}
.step3.on:not(.done) path{stroke: #C92C5A}
.step3.on:not(.done) strong>span::before{-webkit-text-stroke-color: #C92C5A}
.step4.on:not(.done) path{stroke: #097371}
.step4.on:not(.done) strong>span::before{-webkit-text-stroke-color: #097371}
.step5.on:not(.done) path{stroke: #A24A15}
.step5.on:not(.done) strong>span::before{-webkit-text-stroke-color: #A24A15}
.step6.on:not(.done) path{stroke: #582BAE}
.step6.on:not(.done) strong>span::before{-webkit-text-stroke-color: #582BAE}

.modal-open-guide path{filter: none !important;stroke-width: 0 !important}
.modal-open-guide strong{color: #000 !important}
.modal-open-guide strong>span:before{display: none}

body:not(.modal-open-guide) .step-wrp .step2:not(.on) path{fill: #777;}
body:not(.modal-open-guide) .step-wrp .step3:not(.on) path{fill: #828282;}
body:not(.modal-open-guide) .step-wrp .step4:not(.on) path{fill: #8B8B8B;}
body:not(.modal-open-guide) .step-wrp .step5:not(.on) path{fill: #959595;}
body:not(.modal-open-guide) .step-wrp .step6:not(.on) path{fill: #9C9C9C;}


/* modal */
.modal .modal-dialog{max-width: none;justify-content: center;}
.guide-1 .inner {left: 233px;top: 533px}
.guide-2 .inner {right: 30px;top: 155px}
.guide-2 .modal-arr{left: 420px}
.guide-2 .position-absolute{top: 22px;right: 130px}
.modal-content.no-style{background: none;border: 0;padding: 0;box-shadow: none;width: auto;}
.modal:not(.modal-howto-guide) .modal-content{background: #fff;display: block;border-radius: 50px;box-shadow: -4px -4px 4px 0px rgba(0, 0, 0, 0.25) inset, 0px 4px 4px 0px rgba(0, 0, 0, 0.10);}
.modal:not(.modal-howto-guide) .close{top: -15px;right: -15px}
.modal .title{vertical-align: top;margin: -5px 0 45px}

.modal-view .modal-content{width: 1850px;padding: 0 60px 60px;}
.book{width: 650px;height: 720px;background: url(../img/page003/book.png) no-repeat;font-size: 45px;color: #fff;line-height: 1.4;display: flex;align-items: center;padding: 0 103px 48px 110px;text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);font-weight: 700;text-align: justify;}
.book strong{color: #FFDD86;font-weight: 700;}
.book strong:before{content: '「';margin-left: -20px;}
.book strong:after{content: '」';margin-right: -20px;}
.book .inner>p{margin-top: 40px;}

.modal-quiz .modal-content{width: 1700px;padding: 0 80px 80px;}

/* video */
.video-js{margin: 0 auto;border-radius: 30px;overflow: hidden;background: none;}
.video-js .vjs-tech{position: static;outline: 0 !important;height: calc(100% - 105px);border-radius: 30px;overflow: hidden;background: #e5e5e5;border: 4px solid #D9D9D9;}
.video-js .vjs-button > .vjs-icon-placeholder:before, .vjs-icon-volume-mute:before, .video-js .vjs-mute-control .vjs-icon-placeholder:before{content: '' !important}
.video-js .vjs-big-play-button{font-size: 0;top: 50%;left: 50%;width: 110px;height: 110px;background: url(../img/page003/play-lg.png) no-repeat 0 0/100% auto !important;margin: -105px 0 0 -55px}
.video-js .vjs-control-bar{bottom: 0;height: 90px;-ms-flex-align: center;align-items: center;box-shadow: -4px -4px 4px 0px rgba(0, 0, 0, 0.10) inset, 0px 4px 4px 0px rgba(0, 0, 0, 0.10);background: #f7f7f7;border-radius: 30px;padding: 15px 20px;opacity: 1 !important;transition: none;}

.video-js .vjs-control{background-repeat: no-repeat;background-size: 100% auto}
.video-js .vjs-play-control{width: 60px;height: 60px;margin-right: 13px;background-image: url(../img/page003/icon-play.png)}
.video-js .vjs-play-control.vjs-playing{background-image: url(../img/page003/icon-pause.png) !important}
.video-js .vjs-stop-control{width: 60px;height: 60px;margin-right: 13px;background-image: url(../img/page003/icon-stop.png)}
.video-js .vjs-progress-control{min-width: 0;-ms-flex: 1;flex: 1;margin-right: 12px;}
.video-js .vjs-progress-control .vjs-progress-holder{margin: 0}
.video-js .vjs-slider{background: #DBDDDD;height: 20px;border-radius: 10px;outline: 0;border: 2px solid rgba(0, 0, 0, 0.05);}
.video-js .vjs-load-progress{opacity: 0}
.video-js .vjs-progress-holder .vjs-play-progress, .video-js .vjs-progress-holder .vjs-load-progress, .video-js .vjs-progress-holder .vjs-load-progress div{border-radius: 6px}
.video-js .vjs-play-progress{background: #2BA7FF;}
.video-js .vjs-play-progress:before{content: '';width: 20px;height: 20px;background: url(../img/page003/progress-dot.png) no-repeat 0 0/20px;top: -2px;right: -12px;filter: drop-shadow(0px 4px 3px rgba(0, 0, 0, 0.20));border-radius: 100%}
.video-js .vjs-time-tooltip{top: -36px;padding: 2px 6px;line-height: 20px}
.video-js .vjs-progress-control:hover .vjs-time-tooltip,.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip{font-size: 14px}
.video-js .vjs-volume-panel.vjs-volume-panel-vertical,
.video-js .vjs-fullscreen-control,
.video-js .vjs-progress-control .vjs-play-progress .vjs-time-tooltip{display: none}

/* 퀴즈 */
.bt-quiz{position: relative; z-index: 10; background: url(../img/page003/btn-quiz.png) no-repeat center center / contain;text-indent: -9999px;width: 381px;height: 86px;pointer-events: auto;}
.bt-quiz.on, .readyQuiz .bt-quiz{background-image: url(../img/page003/btn-quiz-active.png);pointer-events: auto;}
.bt-quiz.on ~ .popup{display: none}
.bt-quiz.on+.active-cursor{opacity: 1}

.bt-quiz-wrp{position: relative;}
.popup{padding: 56px 0 0 50px;height: 174px;color: #000;font-weight: 700;font-size: 35px;opacity: 0; transition: 0.2s;pointer-events: none;width: 610px;background: url(../img/page003/bubble.png) no-repeat;position: absolute; z-index: 10; top: 92px;right: 72px;}
/* .bt-quiz-wrp:hover .popup{opacity: 1;} */
.before-popup-close{position: absolute; top: 29px;right: 15px;pointer-events: all;}
.popup-close{position: absolute; top: 29px;right: 15px;display: none;}
.active-cursor{opacity: 0; top: 40px; right: 0;transition: opacity 0.4s;pointer-events: none;}
.popup .after{display: none;}

.readyQuiz{position: relative;}
.readyQuiz .cont-top{pointer-events: none}
.readyQuiz::after{content: '';position: absolute;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.50);pointer-events: none;}
.readyQuiz .popup{opacity: 1;padding-left: 30px;}
.readyQuiz .popup-close{display: block;pointer-events: auto;}
.readyQuiz .popup .before{display: none}
.readyQuiz .popup .after{display: block}


#quiz-line{width: 1540px;height: 646px;display: flex;flex-direction: column;position: relative}
.q-line:not(.make-end) .drawBtn{visibility: hidden}
.q-line-btn{position: relative;}
.q-line-btn button{display: block;transition: none;position: absolute;top: 100%;left: 50%;width: 30px;height:30px;margin: -15px 0; border-radius: 50%;text-indent: -999em;z-index: 10;background: #333;}
.q-line-btn button:before{content: '';position: absolute;width: 50px;height: 50px;top: 50%;left: 50%;margin: -25px;}
.q-line-btn.top button {top: auto;bottom: 100%;margin-bottom: 20px;}
.q-line-btn.btm button{margin-top: 20px;}
.canvas{display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 15;pointer-events: none}
.no-touch{-ms-user-select: none;-webkit-touch-callout: none;-webkit-user-select: none;user-select: none}

.quiz-reset{position: absolute;top: 10px;right: 80px}
.quiz-reset:not(.show){display: none}

.q-line ul{display: flex;justify-content: space-between;}

.q-line-badge{display: flex;width: 468px;height: 159px;background: url(../img/page003/box.png) no-repeat;font-size: 40px;color: #fff;line-height: 1.1;align-items: center;justify-content: center;font-weight: 800; text-align: center;}
.line-done .q-line-badge{color: #FFDE86;}
.q-line-btn img{width: 468px;height: 260px;object-fit: cover;border: 4px solid #d9d9d9;border-radius: 30px;}
#view6 .book{
    font-size: 40px;
}
#view6 .book .inner>p {
    margin-top: 10px
}

.modal .vjs-poster{left: auto;}