@charset "utf-8";

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

/* Font */
@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} 

/* 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.25;letter-spacing: -0.04em;font-family:'GmarketSans',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-org {color: #e74f36 !important}
.dot-text{line-height: 1.3em;padding-left: .8em;position: relative}
.dot-text::before{content: '';position: absolute;width: .3em;height: .3em;border-radius: 100%;background: currentColor;top: .65em;margin-top: -.2em;left: 0;}
.arr-text{font-weight: 500;margin-bottom: 10px;}
.arr-text{padding-left: 40px;position: relative;line-height: 32px;}
.arr-text::before{content: '';position: absolute;width: 28px;height: 28px;top: -1px;left: 0;background: url(../img/arr.png) no-repeat 0 0/100% auto;}

/* Icon */
.icon {display:inline-block;position: relative;overflow: visible;width: 32px;height: 32px;padding: 0;border-radius: 40px;border: 0;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}

/* Modal */
.modal-backdrop{display: none;}
.icon-modal-close{position: absolute;width: 28px;height: 28px;background-image: url(../img/modal-close.png);top: 40px;right: 40px}
.icon-modal-close:hover{opacity: .8;}
.modal{position: absolute;background: rgba(0,0,0,.6);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px)}
.modal-content{border-radius: 50px;border: 0;line-height: 1.3}
.modal-goal .modal-dialog{max-width: 1020px;}
.modal-goal .modal-content{background: linear-gradient(328deg, rgb(5,199,147) 0%, rgb(42,152,161) 45%, rgb(78,105,175) 100%);color: #fff;padding: 50px;}
.modal-goal .title{display: flex;width: 215px;height: 70px;font-size: 32px;font-weight: 400;color: #f5e39a;align-items: center;justify-content: center;background: #2c3b4c;border-radius: 35px;padding-top: 10px;}
.modal-goal .content{display: flex;margin-top: 30px;min-height: 245px;}
.modal-goal .content>p{flex: 1;font-size: 40px;}
.modal-goal .char{flex-shrink: 0;align-self: flex-end;}
.modal-virtual-intro .modal-dialog{max-width: 640px;}
.modal-virtual-intro .modal-content{height: 355px;background: linear-gradient( 90deg, rgb(51,60,71) 0%, rgb(66,78,92) 100%);border-radius: 50px;text-align: center;padding-top: 65px;align-items: center;}
.modal-virtual-intro .modal-content::before{content: '';position: absolute;top: 3px;right: 3px;bottom: 3px;left: 3px;background: url(../img/intro-overlay.png) no-repeat 0 0/566px auto;}
.modal-virtual-intro .icon-modal-close{width: 18px;height: 18px;top: 30px;right: 30px}
.modal-virtual-intro .txt{position: relative;font-size: 22px;font-weight: 400;margin-top: 40px;}

.modal-arrange .modal-dialog{max-width: 1205px;margin-right: 0;}
.modal-arrange .icon-modal-close{background-image: url(../img/arrange-close.png);top: 25px;right: 40px}
.modal-arrange .modal-content{border-radius: 50px 0 0 50px;background: #fffffa;border: 10px solid #e0dece;border-right: 0;padding: 100px 50px 30px 110px;font-size: 25px;color: #303a46;font-weight: 700;}
.modal-arrange .title{position: absolute;top: 0;left: 85px;width: 203px;height: 60px;background: url(../img/title.png) no-repeat 0 0/100% auto;padding-top: 15px;line-height: 47px;font-size: 25px;color: #fff;font-weight: 500;text-align: center;}


/* motion */
.ani-stop{animation:  none !important}

/* layout */
#wrap{overflow:hidden;position: relative;width: 1280px;height: 720px;transform-origin: 0 0}
.wrap{width: 100%;height: 100%;overflow: hidden;}
.tab-pane{height: 100%}
.tab-content{width:100%;height:100%}
.lab-control{position: absolute;right: 33px;top: 14px;display: flex;gap: 12px;z-index: 10;}
.lab-control .icon{width: 32px;height: 32px;box-shadow: 2px 3px 10px 0px rgba(29, 36, 46, 0.56);border-radius: 100%;}
.icon-home{background-image: url(../img/home.png);}
.icon-home:hover, .icon-home:focus{background-image: url(../img/home_on.png);}
.icon-exit{background-image: url(../img/exit.png);}
.icon-exit:hover, .icon-exit:focus{background-image: url(../img/exit_on.png);}
.icon-sound{background-image: url(../img/sound.png);}
.icon-sound:hover, .icon-sound:focus{background-image: url(../img/sound_on.png);}
[data-state="ready"] .lab-control{right: 30px;top: 30px;}
[data-state="ready"] .lab-control .icon{width: 42px;height: 42px;box-shadow: 2px 3px 10px 0px rgba(11, 52, 96, 0.23)} 
[data-state="ready"] .icon-sound{background-image: url(../img/icon-sound.png);}
[data-state="ready"] .icon-sound:hover, [data-state="ready"] .icon-sound:focus{background-image: url(../img/icon-sound_on.png);}
[data-state="ready"] .icon-exit{background-image: url(../img/icon-exit.png);}
[data-state="ready"] .icon-exit:hover, [data-state="ready"] .icon-exit:focus{background-image: url(../img/icon-exit_on.png);}
[data-state="ready"] .btn-home{display: none;}

/* 인트로 */
#intro{height: 100%;background: url(../img/intro.jpg) no-repeat 50% 50% / cover}
#intro.bg2{background-image: url(../img/intro2.jpg);}
.intro-title{font-size: 72px;font-weight: 600;color: #fff;letter-spacing: -0.04em;line-height: 1.1;width: 1029px;height: 322px;display: flex;align-items: center;justify-content: center;margin: 155px auto 0;text-align: center;padding-top: 10px;}
.text-ylw{color: #fff605 !important;}
.text-purple{color: #98a0f7 !important;}
#intro .animate__animated{animation-duration: .5s}
.intro-char{position: absolute;bottom: 0;left: 0}
.btn-start{width: 370px;height: 90px;font-size: 35px;color: #fff;margin: 27px auto 0;display: flex;border-radius: 45px;background: linear-gradient( 360deg, rgb(112,115,239) 0%, rgb(136,142,244) 65%, rgb(160,168,249) 100%);box-shadow: 0px 4px 11px 0px rgba(11, 52, 96, 0.23)}
.btn-start>span:first-child{flex: 1;line-height: 90px;padding-top: 3px;}
.btn-start>span:last-child{width: 111px;height: 90px;border-radius: 0 45px 45px 0;background-image: linear-gradient( 360deg, rgb(219,85,11) 0%, rgb(237,130,6) 65%, rgb(255,174,0) 100%);display: flex;align-items: center;justify-content: center;}
.icon-start{width: 79px;height: 59px;background-image: url(../img/icon-start.png);transition: transform .4s;}
.btn-start:hover, .btn-start:focus{background: linear-gradient( 360deg, rgb(79,82,213) 0%, rgb(102,108,216) 65%, rgb(124,133,218) 100%);}
.btn-start:hover .icon-start, .btn-start:focus .icon-start{transform: translateX(5px);}


/* 가상실험실 */
[data-state="start"] #intro, [data-state="ready"] #virtual{display: none;}
#virtual{height: 100%;background: #303a46;color: #fff;}
.virtual-hd{position: absolute;left: 10px;right: 10px;height: 60px;background: #434d5a;border-radius: 0 0 30px 30px;box-shadow: 0px 1px 17px 0px rgba(29, 36, 46, 0.22);}
.virtual-hd h2{font-size: 26px;line-height: 60px;font-weight: 400;padding-left: 50px;}
.virtual{height: calc(100% - 60px);margin-top: 60px;}
.virtual:not(.active){display: none}
.virtual-intro, .virtual-cont{position: relative;width: 100%;height: 100%;font-size: 21px;}
.virtual-intro:not(.active), .virtual-intro.active+.virtual-cont{display: none;}
.guide{animation: fadeIn 1s both;position: absolute;font-size: 20px;}
.guide:not(.show), .virtual-button:not(.show){display: none;}
.guide-info{position: absolute;top: 20px;right: 20px;min-width: 500px;min-height: 106px;display: flex;align-items: center;border-radius: 15px 53px 53px 15px;background: linear-gradient( 360deg, rgb(149,159,171) 0%, rgb(191,199,208) 39%, rgb(233,238,244) 82%);z-index: 100;}
.guide-info .txt{color: #303a46;padding: 0 135px 0 30px;}
.guide-info .char{position: absolute;right: 24px;bottom: -7px}
.guide-result{bottom: 35px;left: 35px;background: linear-gradient( 360deg, rgb(69,106,190) 0%, rgb(92,131,218) 47%, rgb(115,155,245) 100%);display: flex;align-items: center;padding: 35px 53px 30px;border-radius: 25px;min-width: 590px;min-height: 130px;}
.guide-result .char{position: absolute;width: 106px;height: 110px;background: url(../img/guide-result.png) no-repeat 0 0/100% auto;top: -55px;left: 20px}
.guide-result>p:not(.active){display: none;}
.virtual-button>button{position: absolute;bottom: 30px;left: 30px;width: 70px;height: 70px;display: flex;align-items: center;justify-content: center;font-size: 16px;color: #fff;background: url(../img/btn.png) no-repeat 0 0/100% auto;padding-top: 4px;}
.virtual-button>button:hover{opacity: .8;}

.virtual-button .btn-replay, .virtual-button .blue{left: auto;right: 30px;background-image: url(../img/btn-replay.png);}
.virtual-button .btn-arrange{width: 120px;height: 56px;border-radius: 28px 0 0 28px;background: #627182;top: 50%;right: 0;margin-top: -28px;font-size: 20px;font-weight: 500;left: auto;}
.virtual-button>button .guide-hand{top: 40%;left: 75%}


.guide-hand{position: absolute;display: none;pointer-events: none;}
.guide-hand.show, .guide-hand.shown{display: block;}
.guide-hand .hand{display: block;width: 85px;height: 79px;background: url(../img/guide-hand.png) no-repeat 0 0/100% auto;}