@charset "utf-8";

@import url(bootstrap.min.css);
@import url(util.css);
@import url(video.css);
@import url(animate.min.css);

/* Font */
@font-face{font-weight:300;font-family:'NotoSerif';src:url(../font/NotoSerifCJKkr-Light.woff) format('woff')}
@font-face{font-weight:400;font-family:'NotoSerif';src:url(../font/NotoSerifCJKkr-Regular.woff) format('woff')}
@font-face{font-weight:500;font-family:'NotoSerif';src:url(../font/NotoSerifCJKkr-Medium.woff) format('woff')}
@font-face{font-weight:700;font-family:'NotoSerif';src:url(../font/NotoSerifCJKkr-Bold.woff) format('woff')}
@font-face {font-family: 'GmarketSans';font-weight: 300;font-style: normal;src: url('../font/GmarketSansLight.woff') format('woff');font-display: fallback} 
@font-face {font-family: 'GmarketSans';font-weight: 500;font-style: normal;src: url('../font/GmarketSansMedium.woff') format('woff');font-display: fallback} 
@font-face {font-family: 'GmarketSans';font-weight: 700;font-style: normal;src: url('../font/GmarketSansBold.woff') format('woff');font-display: fallback} 
.font-sans{font-family: 'GmarketSans',sans-serif !important}
.font-serif{font-family:'NotoSerif',sans-serif !important;font-display:fallback}
@font-face {
   font-family: 'Cafe24Ssurround';
   src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24Ssurround.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}

/* reset with bootstrap */
body{position:relative;-webkit-text-size-adjust:none;text-align:justify;overflow: hidden;}
body,input,textarea,select,button,table{font-weight:700;font-size:28px;line-height:1;letter-spacing: -0.04em;font-family:'GmarketSans','NotoSans',sans-serif;color:#111;font-display:fallback}
a,input,textarea,select,button{text-decoration:none;color:#231f20;outline:0 !important;-webkit-transition:color .4s,border-color .4s,background .4s,box-shadow .4s,opacity .4s;transition:color .4s,border-color .4s,background .4s,box-shadow .4s,opacity .4s}
a:hover,a:focus,a:active{color:inherit;text-decoration: none}
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}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{font-weight: 700}
input{background: none;border: 0;box-shadow: none}
input::-ms-clear,input::-ms-reveal{display:none;width:0;height:0}
input::-webkit-search-decoration,input::-webkit-search-cancel-button,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none}
li{list-style:none}
label{cursor:pointer}
table{width:100%;border-collapse:collapse}
a,button{cursor:pointer}
button{border:0;box-shadow:none;background:none}
i{font-style:normal}
img{max-width:100%}

/* Typhography */
.text-primary {color: #0853C3 !important}
.text-red {color: #FF3A3A !important}

.bg-purple {background-color: #A396F1 !important}
.bg-light-purple {background-color: #F5F6FF !important}
.bg-dark {background-color: #2D347D !important;color: #fff !important}

/* Icon */
.icon {display:inline-block;position: relative;overflow: visible;width: 32px;height: 32px;padding: 0;border-radius: 40px;border: 2px solid transparent;background-color:#0666F7;box-shadow: 0 4px #003DDA;background-position:50% 50%;background-repeat:no-repeat;background-size: 100% auto;font-size:0;line-height:0;text-decoration:none;vertical-align:middle;text-indent:-1000em}
.icon:before{content: '';position: absolute;top: 8%;left: 11%;width: 9px;height: 22%;background: url(../img/btn-light.svg) no-repeat center / auto 100%}
.icon-plus{background: #0666F7 url(../img/icon-plus.png) no-repeat top 8px center / 50% auto}
.icon-zoom{width: 48px;height: 48px;background: #0666F7 url(../img/icon-zoom.png) no-repeat top 0px center / 42px auto}
.icon-check{width: 30px;height: 30px;background-image: url(../img/icon-check.svg)}
.icon-close{width: 48px;height: 48px;background-image: url(../img/icon-close.svg);border-color: transparent;background-size: 30px auto;background-position: top 10px center}
.icon.no-style{box-shadow: none;background-color: transparent;border-radius: 0}
.icon.no-style::before{display: none}
.icon-o{width: 36px;height: 35px;background: url(../img/icon-o.svg) no-repeat center / 100%}
.icon-x{width: 36px;height: 35px;background: url(../img/icon-x.svg) no-repeat center / 100%}
/*탐구 말풍선 물약*/
.balloon {position: absolute; left: 32px; top: 24px; padding: 40px 31px 32px; font-size: 48px; font-weight: 700; line-height: 1.1; text-shadow: 0px 3px 8px #7838ff; color: #fff; background: url(../img/bubble-label.png) no-repeat center /contain;}
.modal .balloon {left: 225px; top: -230px;}
.modal-step .balloon{display: block; top: 0px;}
/* Button */
.sbtn{display: inline-flex;vertical-align: top;align-items: center;justify-content: center;position: relative;height: 56px;padding: .2em 1em 0;border-radius: 30px;background: linear-gradient(to top, #00D388, #44E3BB);box-shadow: 0 6px #0BA678;text-shadow: 0 3px 8px #1EB688;;font-size: 28px;color: #fff;transition: none}
.sbtn:before{content: '';position: absolute;top: 12%;left: 7%;width: 20px;height: 22%;;background: url(../img/btn-light.svg) no-repeat center / auto 100%}
.sbtn:hover{box-shadow: none;transform: translateY(.25em);transform-origin: top center}
.sbtn-lg{font-size: 32px;height: 70px}
.sbtn.disabled, .sbtn:disabled{background: linear-gradient(to top, #9C9C9C, #B0B0B0);box-shadow: 0 6px #626262;text-shadow: 0 3px 8px #6C6C6C;pointer-events: none}
.btn-prev:disabled{opacity: 0}
.btn-start{background: linear-gradient(to top, #FFD100, #FFDE00);box-shadow: 0 9px #F9B506;text-shadow: 0 3px 5px #FFB801}
.icon-start{content:'';display:inline-block;width: 37px;height: 51px;margin: -12px 0 0 15px;background-image: url(../img/icon-start.png)}
.sbtn-purple{background: linear-gradient(to top, #A768F7, #BE8CFE);box-shadow: 0 6px #5200D8;text-shadow: 0 3px 8px #7838FF}
[drop-refresh]{background: linear-gradient(to top, #638EA7, #638FA8);box-shadow: 0 4px #537A90;text-shadow: 0 3px 8px #547B92}

/* Bubble */
.bubble {position: relative;display: flex;align-items: center;justify-content: center;padding: 50px 30px;background: #fff;box-shadow: 0 4px 0 #E3E3E3;border-radius: 40px;font-family: 'Cafe24Ssurround', sans-serif;font-size: 24px;text-align: center}
.bubble::before {content:"";position: absolute;top: 100%;left: 50%;transform: translateX(-50%);width: 46px;height: 34px;background: url(../img/bubble-tail.png) no-repeat 0 0/auto 100%}
.bubble .before {position: absolute;top: 100%;left:auto;width: 46px;height: 34px;background: url(../img/bubble-tail.png) no-repeat 0 0/auto 100%}
.bubble-cont{line-height: 1.3125;opacity: 0}
.virtual.active .bubble-cont{animation: fadeIn 1s 1.5s forwards}
.bubble.reverse::before, .bubble.reverse .before{transform: scale(-1, 1)}
.bubble.top::before, .bubble.top .before{top: auto;bottom: 100%;background-image: url(../img/bubble-tail-top.png)}
.bubble.top.reverse::before{transform: scale(-1, -1) translateX(50%)}
.bubble.reverse::before{transform: scale(-1, 1) translateX(50%)}
.bubble.left::before, .bubble.left .before{top: 50%;right: calc( 100% - 1px );left: auto;transform: translateY(-50%);width: 52px;height: 72px;background: url(../img/bubble-tail-rotate.png) no-repeat 0 0/auto 100%}
.bubble.left.reverse::before, .bubble.left.reverse .before{top: auto;bottom: -6px;background-image: url(../img/bubble-tail-rotate-reverse.png);transform: none}
.bubble.right::before, .bubble.right .before{top: 50%;width: 52px;height: 72px;background: url(../img/bubble-tail-rotate.png) no-repeat 0 0/auto 100%;transform:rotate(180deg);}
.bubble.right.reverse::before, .bubble.right.reverse .before{background-image: url(../img/bubble-tail-rotate-reverse.png)}
.bubble.top.auto .before{left: auto;transform: none}
.bubble.auto::before{display: none}

/* table */
.tb{border-collapse: separate;border-spacing: 0;text-align: center;    font-size: 20px;font-weight: 700;line-height: 1.5;box-shadow: 0 6px #F2F2F2;border-radius: 16px;overflow: hidden}
.tb-fixed{table-layout: fixed}
.tb tr>*{height: 60px;background: #fff;padding: 10px;border: 1px solid #ADDBF4;border-width: 0 1px 1px 0}
.tb th{background-color: #7DC2EA;color: #fff}
.tb .form-control{display: inline-block}
.tb .color01{background-color: #3190C7 !important;border-right-width: 0}
.tb tbody tr:last-child>*{border-bottom-width:0}
.tb tr>*:last-child{border-right-width:0}
.tb.v2{border: 1px solid #A6C7DA;box-shadow: none}
.tb.v2 th {background-color: #93B7CC}
.tb.v2 tr>*{border-color: #A6C7DA}
.tb.v2 .color01{background-color: #638FA8 !important}

/* form */
.form-control {border:2px solid #ddd;border-radius: 10px;padding: 7px;height: 40px;font-size: 19px;text-align: center;color: #266EFA;font-weight: 700}
.form-control[readonly] {background-color: #fff;box-shadow: none !important}
.form-control:disabled{background: #e9ecef !important}

.answer-wrp {position: relative;display: inline-block;vertical-align: middle}
.answer-wrp .tx-a {position: absolute;top: 100%;left: 50%;transform: translateX(-50%);font-size: 16px;color: #ED1F69;display: none}
.answer-wrp svg{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);max-width: 160%;pointer-events: none}
.answered:not(.corrected) .tx-a {display: block}
@keyframes correct {
  100% {stroke-dashoffset: 1014}
}
.correct-path{animation: correct .7s ease both;display: none}
.corrected .correct-path{display: block}
.corrected svg{animation: fadeOut .5s .7s both}
.answered .form-control{pointer-events: none}
[data-answer-group]{display: none}

/* Modal */
.icon-modal-close{position: absolute;top: 16px;right: 16px;width: 64px;height: 64px;border-radius: 40px;background: url(../img/icon-close.svg) no-repeat top 16px center, linear-gradient(to top, #005DEA, #0666F7);box-shadow: 0 6px #003DDB;z-index: 5}
.icon-modal-close:before{content: '';position: absolute;top: 6px;left: 9px;width: 11px;height: 11px;background: url(../img/btn-light.svg) no-repeat center / 100% auto}
.modal{position: absolute;background: rgba(0,0,0,.6);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px)}
.modal-dialog{max-width: 848px}
.modal-content{background: linear-gradient(to top, #F0F0F0, #fff);border-radius: 40px;border: 0;box-shadow: 0 6px 0 #E4E4E4;text-align: center}
.modal-header{position: relative;margin-top: -24px;padding: 0 0 0 50px;background-color: transparent;border: 0}
.modal-header .icon-modal-close{position: absolute;top: 0;right: -15px}
.modal-title{position: relative;height: 67px;padding: 0.7em 1em;border-radius: 30px;background: linear-gradient(to top, #005DEA, #0666F7);box-shadow: 0 6px #003DDB;font-size: 32px;color: #fff;line-height: 1}
.modal-title:before {content: '';position: absolute;top: 9px;left: 11px;width: 12px;height: 9px;background: url(../img/btn-light.svg) no-repeat center / 100% auto}
.modal-body{padding:50px 80px 65px}
.modal-zoom .modal-body{padding: 40px 42px}
.modal-zoom .img-label{margin-top:12px;font-size: 64px;color:#0853C3}
.modal-half .modal-content, .modal-zoom .modal-content{width: auto;margin-right: auto;margin-left: auto}
.modal-half .modal-dialog{max-width: none}
.modal-alert .modal-dialog{max-width: 600px}
.modal-alert .modal-content, .modal-half .modal-content {border-radius: 30px}
.modal-alert .icon-modal-close, .modal-half .icon-modal-close{top: -24px;right: -24px}
.modal-alert .modal-body, .modal-half .modal-body {display: flex;justify-content: center;align-items: center;min-height:170px;padding: 35px 20px 25px 246px;font-size: 40px;line-height: 1.3}
.modal-half .modal-body{padding: 35px 70px 25px 260px}
.modal-alert .modal-body .char, .modal-half .modal-body .char{position: absolute;bottom: -7px;left: 25px;width: 266px;height: 218px;background: url(../img/modal-alert-correct.png) no-repeat center / cover}
.modal-alert .modal-body .char.ai-wrong{background-image: url(../img/modal-alert-wrong.png)}
.modal-alert .modal-body .char.ai-correct{background-image: url(../img/ani-step.png)}
.modal-alert .modal-body{font-family: 'Cafe24Ssurround', sans-serif}
.modal-backdrop.show{opacity: .8}
.modal-backdrop{display: none !important}
.modal-answer .modal-dialog{display: flex;align-items: end;max-width: 100%;height: 100%;margin: 0 auto}
.modal-answer .modal-content{width: auto;margin: 0 40px 120px 318px;border-radius: 48px}
.modal-answer .icon-modal-close {top: -17px;right: -9px;width: 46px;height: 46px;background-size: 28px;background-position: top 11px center}
.modal-answer .icon-modal-close:before{top: 8%;left: 15%}
.modal-answer .modal-body{display: flex;width: auto;padding: 52px 54px 50px 142px;font-size: 28px;line-height: 1.28572;text-align: left}
.modal-answer:after{content: '';position: absolute;bottom: 0;left: 0;width: 430px;height: 325px;background: url(../img/modal-answer-correct.png) no-repeat center / cover}
.modal-answer .modal-body::before {content: "";position: absolute;top: 50%;left: 51px;width: 70px;height: 70px;background: url(../img/icon-o.png) no-repeat 0 0/auto 100%;transform: translateY(-50%)}
.modal-answer .modal-body:after {content: "";position: absolute;top: 100%;left: 127px;width: 46px;height: 34px;background: url(../img/bubble-tail.png) no-repeat 0 0/auto 100%}
#modal-wrong:after{background-image:url(../img/modal-answer-wrong.png)}
#modal-wrong .modal-body::before{background-image:url(../img/icon-x.png)}
/* .modal-intro:after{content: '';position: absolute;bottom: 0;left: 0;width: 400px;height: 324px;background: url(../img/ani-goal.png) no-repeat center / cover} */
/* .modal-step:after{background-image: url(../img/ani-step.png)} */
.modal-intro{overflow: hidden !important}
#modal-goal .char-ani{bottom: 30px;left: -37px;width: 378px}
.modal-step .char-ani{left: -37px;width: 478px}
.modal-intro .modal-dialog{max-width: 100%;background: url(../img/bg-modal-intro.png) no-repeat center / cover;justify-content: center}
.modal-intro .modal-content{justify-content: center;width: 1120px;height: 642px; background: transparent; border-radius: 0; box-shadow: none} 
.modal-intro .icon-modal-close{top: 77px;right: 102px}
.modal-intro .modal-body{flex: 0 0 auto;padding: 0;font-size: 60px;line-height: 1.3}
.modal-intro .title{font-size: 68px;color: #0853C3;margin-bottom: 14px}
.modal-intro .sbtn{width: 224px;height: 64px;margin-top: 40px;font-size: 32px;background: linear-gradient(to top, #03D2FC, #06DEF7);box-shadow: 0 5px #0097D8;text-shadow: 0 3px 7px #05AFF8}
.modal-intro .sbtn:before{top: 9px;left: 11px;width: 12px;height: 9px}

/* drag */
.disabled{pointer-events: none}
[data-invisible]{display: flex;flex-wrap: wrap;align-items: center;position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;visibility: hidden}
.ui-draggable{cursor: pointer}
.ttakji-box{position: relative;padding: 21px 15px 22px;background: #fff;box-shadow: 0 4px #E4E4E4;border-radius: 10px;font-size: 24px;text-align: center}
.ttakji-wrp{display: flex;justify-content: center;align-items: center;margin-top: 17px}
.ttakji-box .drag-ttakji{position: relative;margin: 0 7px}
.drag-ttakji{display: flex;align-items: center;justify-content: center;min-width: 120px;height: 56px;background: #fff;border-radius: 10px;border: 2px solid #0853C3;box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.14);font-size: 19px;color: #0853C3;font-weight: 700;cursor:pointer}
.ui-draggable img{max-width: none}
.drag-ttakji.dragging, .drag-ttakji.ui-draggable-disabled{background: #E9E9E9;border: 0;box-shadow: none;color:#999;cursor: default}
.drag-ttakji.dragging *, .drag-ttakji.ui-draggable-disabled *{visibility: hidden}
.ttakji-box .drop-refresh{position: absolute;right: 0;bottom: 100%;margin-bottom: 10px;display: none}
.ttakji-box .sbtn{width: 120px;height:40px;font-size:18px}
.ttakji-box .sbtn:before{left:1px}
.ttakji-box .ui-draggable-disabled ~ .drop-refresh{display: block}
.drop-control{position: absolute;right: 30px;bottom: 36px;display: none}
.drop-start + .drop-control{display: block}
.drop-end [drop-end-show]{display: block}
.drop-ex .ui-draggable {opacity: 0;pointer-events: none}
.drop-ex + .drop-control [drop-ex], .drop-ex~* [drop-ex],
.drop-end + .drop-control [drop-ex], .drop-end~* [drop-ex]{opacity: 0;pointer-events: none}
.drop-ex [data-invisible]{opacity: 1;visibility: visible}
.drop-area{display: flex;align-items: center;font-size: 26px}
.drop-area>.box{position:relative;width: 314px;height: 100%;padding-top: 56px;background: #fff;border-radius: 16px;box-shadow: 0 6px 0 #F2F2F2}
.drop-fix{position:relative;display: flex;align-items: center;flex-wrap: wrap;width: 100%;height: 100%}
.drag-fix.ui-draggable-disabled{opacity: 0}

/* drop */
.drop-type-box{position: relative;min-width: 120px;min-height: 56px;margin: 0 4px;background: #fff;border-radius: 10px;display: flex;align-items: center;justify-content: center;font-size: 19px;text-indent:0 !important}
.drop-type-box:before{content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;border-radius: 10px;border: 2px dashed #0075FF}
.drop-type-box.ui-droppable-disabled{color: #0853C3}
.drop-type-box.ui-droppable-disabled:before{border: 2px solid #0853C3;box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.14);color: #0853C3}
.ui-draggable-disabled, .dragging {cursor: default}
.ui-draggable-dragging {z-index: 200 !important}

/* 인트로 */
.bx{border-radius: 20px;color: #fff;background: #8E9096;border: 5px solid #82858B}
#wrap{overflow:hidden;position: relative;width: 1280px;height: 720px;transform-origin: 0 0}
.wrap{width: 100%;height: 100%}
.tab-pane{height: 100%}
.tab-content{width:100%;height:100%}
#intro{display: flex;align-items: center;justify-content: center;flex-direction: column;height: 100%;background: url(../img/bg.png) no-repeat 50% 50% / cover}
.intro{text-align: center}
.intro-title{font-size: 80px;font-weight: 600;color: #fff;letter-spacing: -0.04em;text-shadow: 0 5px 8px #0048B2;line-height: 1.1}
.intro-title>span{position: relative}
.intro-title>span:before, .intro-title>span:after{content: '';position: absolute;top: -81px;left: calc( 100% + -27px );width: 170px;height: 170px;background: url(../img/light.png) no-repeat 50% 50% / cover}
.intro-title>span:after{background-image: url(../img/light-on.png);animation: light-ani 2s infinite 1s linear}
@keyframes light-ani{
   10%, 30%, 50%{opacity: 0}
   20%, 40%, 60%, 100%{opacity: 1}
}

.btn-start{width: 575px;height: 100px;font-size:48px}
.btn-start:before{top: 10%;left: 2%;height: 16%}
.intro-buttons{margin: 48px 0 26px;display: flex;justify-content: center}
.intro-buttons .sbtn{width: 280px;height: 80px;font-size: 40px}
.intro-buttons .sbtn:before{top: 9%;left: 4%;height: 16%}
.intro-buttons .sbtn+.sbtn{margin-left:15px}
.intro .ch{position: absolute;pointer-events: none;z-index: 5;animation-delay: .5s}
.char-ani.master{bottom: 79px;right: -187px;left: auto !important;width: 570px}
.intro .animate__animated{animation-duration: .5s}

#modal-goal .ch{position: absolute;bottom: 28px;right: 43px}
#modal-goal .ch-ani{width: 160px;height: 192px;background: url(../img/ani-goal.png) no-repeat 0 0/auto 100%;/*animation: ani-goal .4s steps(2) infinite*/}
/* @keyframes ani-goal {
   100% { background-position: -320px; }
} */
.intro-step{display: none}
.modal-step .ch{position: absolute;right: 0;bottom: 0;animation-duration: .5s}
.modal-step .ch-ani{width: 210px;height: 390px;background: url(../img/ani-step.png) no-repeat 0 0/auto 100%;animation: ani-step .4s steps(2) infinite}
@keyframes ani-step {
   100% { background-position: -420px; }
}
.ani-stop{animation:  none !important}

/* 가상실험실 */
.virtual-wrap{display: none;height: 100%;background: radial-gradient(at 50% 20%, #CECBCC 40%, #A9AEB2 80%)}
.virtual-wrap::before{content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 160px;background: #d9d9d9}
.virtual{height: 100%}
.virtual:not(.active){display: none}
.virtual-hd{position: absolute;top: 0;left: 0;z-index: 20;height: 55px;padding: 4px 60px 0 200px;background: url(../img/bg-virtual-hd.png) no-repeat top right / auto 100%;color: #fff}
.virtual-hd strong{position: absolute;width: 189px;height: 74px;top: 0;left: 0;padding: 18px 0 0 17px;text-shadow: 0 4px 8px #0860E7;background: url(../img/bg-virtual-tit.png) no-repeat 0 0 / cover}
.virtual-hd h2{font-size: 20px;color: #0853C3;text-align: right}
.virtual-hd h2:before{content: '';display: inline-block;vertical-align: middle;width: 38px;height: 43px;margin: -4px 1px 0 0;background: url(../img/icon-light.png) no-repeat center / cover}
.wrap>.sbtn{position: absolute;z-index: 30;top: 20px;right: 20px;width: 48px;height: 48px;padding: 0} 
.wrap>.sbtn:before{top: 11%;left: 7%;width: 20px;height: 19%}

.lab-control {position: absolute; right: 30px; top: 20px; display: flex;}
.lab-control .sbtn {position: relative; left: 0; top: 0; width: 48px; height: 48px; padding: 0; z-index: 51; background: url(../img/icon-mute.png) no-repeat top 8px center / 41px auto, linear-gradient(to top, #D44B20, #E36A44);box-shadow: 0 6px #AF3610}
.lab-control .sbtn +.sbtn {margin-left: 12px;}
.lab-control .btn-mute{background: url(../img/icon-mute.png) no-repeat top 8px center / 41px auto, linear-gradient(to top, #D44B20, #E36A44);box-shadow: 0 6px #AF3610}
.lab-control .btn-mute.muted{background: url(../img/icon-mute-on.png) no-repeat top 8px center / 41px auto, linear-gradient(to top, #D44B20, #E36A44);box-shadow: 0 6px #AF3610}
.lab-control .btn-home{display: block; background: url(../img/icon-home.png) no-repeat top 8px center / 41px auto, linear-gradient(to top, #00D388, #44E3BB); box-shadow: 0 6px #0FA375;}
.lab-control .btn-exit{background: url(../img/icon-exit.png) no-repeat top 13px center / 28px auto, linear-gradient(to top, #0666F7 0%, #005DEA 100%);box-shadow: 0 6px #003DDA;}
#wrap.ready .lab-control .btn-home {display: none;}


.virtual-cont{position: relative;width: 100%;height: 100%}
.virtual-button{position: absolute;bottom: 36px;left:0;z-index:30;width: 100%;font-size: 0}
.virtual-button>*{position: absolute;bottom: 0;left: 30px} 
.virtual-button .sbtn{min-width: 148px;white-space: nowrap}
.virtual-button>.sbtn+*{right: 30px;left: auto}
.virtual-button>*:nth-child(3){position: absolute;left: 207px}
.sbtns{display: flex;align-items: center;flex-direction: column}
.sbtns button + button {margin-top:12px}
.btn-prev{padding-left: 50px}
.btn-next{padding-right:50px}
.btn-prev:after, .btn-next:after{content: '';position: absolute;top: 50%;right:20px;width: 36px;height: 40px;background: url(../img/icon-arrow.png) no-repeat center / cover;transform: translateY(-50%)}
.btn-prev:after{right:auto;left: 20px;transform: translateY(-50%) scale(-1, 1)}
.guide-wrp{position: absolute;top:0;left:0;width:100%;height:100%;z-index: 0;opacity: 0;visibility: hidden;transition: .3s}
.guide-wrp.shown{opacity: 1;visibility: visible;pointer-events: none}
.guide-wrp .bubble{height: 100%}
.guide-ai{position: absolute;top: 218px;left: 875px;width: 316px;height: 169px}
/* .guide-ai::after{content: '';position: absolute;top: 56px;left: -227px;;width: 428px;height: 428px;background: url(../img/guide-ai.png) no-repeat center / cover} */
.guide-hand{position: absolute;top: 121px;left: 667px;width: 35px;height: 35px;transform: translateY(-50px);opacity: 0;transition: .3s}
.guide-hand:after{content: '';position: absolute;top: 11px;right: -63px;width: 88px;height: 84px;background: url(../img/guide-hand.png) no-repeat center / 100%;transform: translate(0, 0)}
.guide-open .guide-wrp:not(.shown){z-index: 30;opacity: 1;visibility: visible}
.guide-open .guide-hand{animation: hand-ani 2s 2s forwards}
@keyframes hand-ani{
   to{
      opacity: 1;
      transform: translateY(0px)
   }
}
.guide-hand .circle:before, .guide-hand .circle:after{content: '';position: absolute;top: 50%;left: 50%;width: calc( 100% + 64px );height: calc( 100% + 64px );background: rgba(0, 133, 255, .2);border-radius: 50%;transform: translate(-50%, -50%);animation: flash 2s linear 0.25s infinite alternate}
.guide-hand .circle:after{width: calc( 100% + 32px );height: calc( 100% + 32px );background: rgba(0, 133, 255, .3);animation: flash 2s linear 0s infinite alternate}
.guide-hand .circle i{display: inline-block;vertical-align: top;position: relative;width: 100%;height: 100%;background: #0085FF;border-radius: 50%}

.plus-wrp, .interaction{position: absolute;top: 0;width: 100%;z-index: 20}
.interaction{height: 100%}
.plus-wrp>*, .interaction>*{position: absolute}
.plus-wrp.active + .guide-wrp .bubble{opacity: 0;visibility: hidden}
.plus-wrp.active + .guide-wrp .char-ani{transition: 1s;left: -800px !important}
.plus-btns{z-index: 10}
.plus-btns .btn-plus{position: absolute}
.btn-plus.active .icon-plus{border-color: #0565F5;background: #fff url(../img/icon-plus-on.png) no-repeat top 7px center / 50% auto;box-shadow: 0 4px #003DDA}
@keyframes icon-plus-ani{
   10%, 30%, 50%{border-color:#FF557E;background: #FF557E url(../img/icon-plus.png) no-repeat top 8px center / 50% auto;box-shadow: 0 4px #C82950}
   20%, 40%, 60%, 100%{border-color:#0666F7;background: #0666F7 url(../img/icon-plus.png) no-repeat top 8px center / 50% auto;box-shadow: 0 4px #003DDA}
}
.label{position: absolute;top: -21px;left: 50%;min-width: 105px;height: 50px;padding: .7em .5em .5em;border-radius: 24px;background: #1B51A4;box-shadow: 0 4px #0F3F88;font-size: 24px;color: #fff;text-align: center;line-height: 1;transform: translateX(-50%)}
.plus-area{top: 113px;left: 740px;width: 329px;height: 425px}
.plus-area .label{position: absolute;top: -31px;left: 50%;min-width: 160px;height: 62px;padding: 0.6em 1em;font-family: 'GmarketSans';font-size: 32px}
.plus-area .label.desc{display:none;top: 217px;left: calc( 100% + 22px );min-width: auto;height: 38px;border-radius: 22px;font-size: 20px;transform: none;white-space: nowrap}
.plus-area .label.desc:before, .plus-area .label.desc:after{content: '';position: absolute;top: 50%;right: 100%;transform: translateY(-50%)}
.plus-area .label.desc:before{width: 116px;border: 2px dashed #0666F7}
.plus-area .label.desc:after{right: calc( 100% + 120px );width:10px;height:10px;background:#0666F7;border-radius: 50%}
.plus-area .tab-pane.active .label.desc{display: block;animation: fadeIn .5s 1s both}

.icon-input-check{border-radius: 8px;border: 0;background:#464D60 url(../img/icon-input-chk.png) no-repeat top 9px center / 21px auto;box-shadow: 0 3px #313748}
.icon-input-check::before{display:none}
input:checked ~ .icon-input-check{background-color: #266EFA;box-shadow: 0 3px #0955EA}
.choice{position: absolute;left: 835px; top: 117px;z-index: 10}
.choice label{display: block;position: relative;margin:0}
.choice .active{pointer-events: none}

.enlarge{position:absolute;opacity: 0;z-index: 5} 
.enlarge:after{content: '';position: absolute;top: 90px;left: -56px;width: 88px;height: 88px;border-radius: 50%;border: 3px dashed #0075FF;opacity: 0}
.enlarge .enlarge-img{animation: scale 1s 1.25s both;transform-origin: 0 50%}
.enlarge, .enlarge:after{animation: fadeIn .5s forwards}
@keyframes scale {
    0%{transform: scale(0);opacity: 0}
    100%{transform: scale(1);opacity: 1}
}

.char-ani{position: absolute;bottom:0;left:0;width:334px;height:334px;z-index:10}
.char-ani:after{content: '';position: absolute;top: 0;left: 0%;width: 100%;height: 104.5%;background: url(../img/cat02/shadow.png) no-repeat 0 0 / 100% auto}
.char-ani>*{position:relative;background-position: center;background-repeat:no-repeat;background-size: cover}

.show-fix{display: block !important}
.show-item{animation: fadeIn 1s both}

.nav-wrp{display: flex;align-items: center;position: absolute;top: 66px;left: 233px;font-size: 22px}
.nav-tit{height: 69px;margin-right:8px;padding: 24px 25px;border-radius: 2rem;background: #fff;box-shadow: 0 4px 0 #D3D3D3;color:#0853C3}
.nav-tabs {padding: 6px 6px 12px;border-radius: 2rem;background: #fff;box-shadow: 0 4px 0 #D3D3D3}
.nav-tabs>button {position:relative;height: 50px;padding: 18px;background:transparent;box-shadow: 0 6px 0 transparent;border-radius: 2rem;font-size: 22px;color: #C6C6C6;transition: none}
.nav-tabs>button.active {background: linear-gradient(to top, #FF9900, #FFAE11);box-shadow: 0 6px 0 #F67600;color: #fff}
.nav-tabs>button+button{margin-left:8px}