/* JAYLEE 2020-12-08 불러오는중 로딩 loading 페이지 */
.fullscreen-loading {position:absolute; display:block; top:0; left:0; width:100%; min-width:1024px; height:100%; align-items:center; justify-content:center; background-color:#f7f7f7; opacity:0.3; overflow:hidden; z-index:9999;}
.fullscreen-loading-speaking {position:absolute; display:block; top:0; left:0; width:100%; min-width:1024px; height:100%; align-items:center; justify-content:center; background-color: black; opacity:0.95; overflow:hidden; z-index: 9998;}
svg.tea{transform:scale(2);}
#teabag{transform-origin:top center; transform:rotate(3deg); animation:swing 2s infinite;}
#steamL{stroke-dasharray:13; stroke-dashoffset:13; animation:steamLarge 2s infinite;}
#steamR{stroke-dasharray:9; stroke-dashoffset:9; animation:steamSmall 2s infinite;}

.make-some-tea {display:inline-flex; width:37px; line-height:48px; z-index:99999;}

@keyframes steamLarge {
  0% {stroke-dashoffset:13; opacity:0.6;}
  100% {stroke-dashoffset:39; opacity:0;}
}
@-moz-keyframes steamLarge {
  0% {stroke-dashoffset:13; opacity:0.6;}
  100% {stroke-dashoffset:39; opacity:0;}
}
@-o-keyframes steamLarge {
  0% {stroke-dashoffset:13; opacity:0.6;}
  100% {stroke-dashoffset:39; opacity:0;}
}
@-webkit-keyframes steamLarge {
  0% {stroke-dashoffset:13; opacity:0.6;}
  100% {stroke-dashoffset:39; opacity:0;}
}


@keyframes steamSmall {
  10% {stroke-dashoffset:9; opacity:0.6;}
  80% {stroke-dashoffset:27; opacity:0;}
  100% {stroke-dashoffset:27; opacity:0;}
}
@-moz-keyframes steamSmall {
  10% {stroke-dashoffset:9; opacity:0.6;}
  80% {stroke-dashoffset:27; opacity:0;}
  100% {stroke-dashoffset:27; opacity:0;}
}
@-o-keyframes steamSmall {
  10% {stroke-dashoffset:9; opacity:0.6;}
  80% {stroke-dashoffset:27; opacity:0;}
  100% {stroke-dashoffset:27; opacity:0;}
}
@-webkit-keyframes steamSmall {
  10% {stroke-dashoffset:9; opacity:0.6;}
  80% {stroke-dashoffset:27; opacity:0;}
  100% {stroke-dashoffset:27; opacity:0;}
}

#loader {position:absolute; display:inline-flex; width:100%; min-width:1280px; height:100%; align-items:center; justify-content:center; overflow:hidden;
	user-select:none;
	-moz-user-select:none;
	-o-user-select:none;
	-webkit-user-select:none;}
	
#loader.popup {position:absolute; display:inline-flex; width:100%; min-width:0px; height:100%; align-items:center; justify-content:center; overflow:hidden;
	user-select:none;
	-moz-user-select:none;
	-o-user-select:none;
	-webkit-user-select:none;}

.loading-container {position:relative; display:inline-flex; width:250px; align-items:center; justify-content:center; flex-wrap:wrap;}

.loading-message {position:relative; display:inline-flex; width:auto; height:48px; align-items:center;}
.loading-message p {position:relative; margin:0; font-size:15px; color:transparent; white-space:nowrap;}
.loading-message p:before {content:"Now Loading... Have a cup of tea"; position:absolute; top:0; left:0; width:100%; height:100%; color:#da4747; overflow: hidden; border-right:14px solid white; font-size: 15px; animation: css_typing 6s steps(32) infinite;}


#loaderSpeaking {position:absolute; display:inline-flex; width:100%; min-width:1280px; height:100%; align-items:center; justify-content:center; overflow:hidden;
	user-select:none;
	-moz-user-select:none;
	-o-user-select:none;
	-webkit-user-select:none;}

#loaderSpeaking2 {position:absolute; display:inline-flex; width:100%; min-width:1280px; height:100%; align-items:center; justify-content:center; overflow:hidden;
	user-select:none;
	-moz-user-select:none;
	-o-user-select:none;
	-webkit-user-select:none;}
/* JAYLEE 2020-12-08 에러 error 페이지 */
.error-page-container{position:absolute; display:inline-flex; top:0; width:100%; min-width:1024px; height:100%; justify-content:center; overflow:auto;}
.error-page-wrap {position:relative; display:inline-flex; width:750px; height:650px; align-items:center; justify-content:center;}
.error-message-wrap {position:relative; display:inline-flex; width:100%; flex-wrap:wrap; justify-content:center;}
.error-content {position:relative; display:inline-flex; width:auto; height:auto; line-height:50px; padding:0 30px; align-items:center; justify-content:center; font-size:35px; color:#8cc2d0; overflow:hidden;}

.error-code-container {display:inline-block; width:auto; height:50px; font-weight:600; overflow:hidden;} 
.error-code-container:before {position:absolute; content:'['; left:0; line-height:50px; color:#16a085; font-size:42px;}
.error-code-container:after {position:absolute; content:']'; top:calc(50% - 25px); right:0; line-height:50px; color:#16a085; font-size:42px;}
.error-code-container .text {display:inline; float:left; margin:0; font-size:30px;}

.error-code-list {width:auto; margin-top:0; padding-left:100px; text-align:left; white-space:nowrap; list-style:none; animation-name:change; animation-duration:4.5s; animation-iteration-count:infinite;}
.error-code-list__code, .error-code-list__message {line-height:50px; margin:0; font-size:30px;}

.error-message__korean {position:relative; display:inline-flex; width:100%; height:100%; margin-top:20px; align-items:center; justify-content:center;}
.typing {line-height:30px; color:#7899b9; font-size:30px; font-weight:900; white-space:nowrap;}
#caret {display:inline-block; animation-name:cursor; animation-duration:0.75s; animation-iteration-count:infinite;} 

@keyframes change {
  0% {transform:translate3d(0,0,0);}
  50% {transform:translate3d(0,-50%,0);}
  100% {transform:translate3d(0,0,0);}
}
@-moz-keyframes change {
  0% {transform:translate3d(0,0,0);}
  50% {transform:translate3d(0,-50%,0);}
  100% {transform:translate3d(0,0,0);}
}
@-o-keyframes change {
  0% {transform:translate3d(0,0,0);}
  50% {transform:translate3d(0,-50%,0);}
  100% {transform:translate3d(0,0,0);}
}

@-webkit-keyframes change {
  0% {transform:translate3d(0,0,0);}
  50% {transform:translate3d(0,-50%,0);}
  100% {transform:translate3d(0,0,0);}
}


@keyframes cursor {
  from {border-bottom: 30px solid #cfdde0} 
  50% {border-bottom: 30px solid transparent} 
  to {border-bottom: 30px solid #cfdde0} 
}
@-moz-keyframes cursor {
  from {border-bottom: 30px solid #cfdde0} 
  50% {border-bottom: 30px solid transparent} 
  to {border-bottom: 30px solid #cfdde0} 
}
@-o-keyframes cursor {
  from {border-bottom: 30px solid #cfdde0} 
  50% {border-bottom: 30px solid transparent} 
  to {border-bottom: 30px solid #cfdde0} 
}
@-webkit-keyframes cursor {
  from {border-bottom: 30px solid #cfdde0} 
  50% {border-bottom: 30px solid transparent} 
  to {border-bottom: 30px solid #cfdde0} 
}