@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/noto-sans-kr-v11-korean-regular.eot'); /* IE9 Compat Modes */
  src: local('Noto Sans KR Regular'), local('NotoSansKR-Regular'),
       url('fonts/noto-sans-kr-v11-korean-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/noto-sans-kr-v11-korean-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/noto-sans-kr-v11-korean-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/noto-sans-kr-v11-korean-regular.svg#NotoSansKR') format('svg'); /* Legacy iOS */
}
/* noto-sans-kr-500 - korean */
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/noto-sans-kr-v11-korean-500.eot'); /* IE9 Compat Modes */
  src: local('Noto Sans KR Medium'), local('NotoSansKR-Medium'),
       url('fonts/noto-sans-kr-v11-korean-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/noto-sans-kr-v11-korean-500.woff') format('woff'), /* Modern Browsers */
       url('fonts/noto-sans-kr-v11-korean-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/noto-sans-kr-v11-korean-500.svg#NotoSansKR') format('svg'); /* Legacy iOS */
}
/* noto-sans-kr-700 - korean */
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/noto-sans-kr-v11-korean-700.eot'); /* IE9 Compat Modes */
  src: local('Noto Sans KR Bold'), local('NotoSansKR-Bold'),
       url('fonts/noto-sans-kr-v11-korean-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/noto-sans-kr-v11-korean-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/noto-sans-kr-v11-korean-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/noto-sans-kr-v11-korean-700.svg#NotoSansKR') format('svg'); /* Legacy iOS */
}
@media (max-width: 576px) { 
	html{
		font-size:15px
		}
}
@media (min-width: 576px) { 
	html{
		font-size:17px
		}
}
@media (min-width: 992px){ 
	html{font-size:18px}
}
@media (min-width: 1024px){ 
	html{font-size:17px}
}
@media (min-width: 1605px) { 
	html{font-size:19px}
}
body{
    font-family: 'Noto Sans KR',sans-serif;
	background-color:#d5d4d0;
}

.btn, input{
	 box-shadow:none!important;	
}
.overflow-hide{
	overflow:hidden;
}
.btn-group.btn-group-toggle .btn{
	cursor:default
}
.result{
	z-index:10;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:rgba(0,0,0,.7)
}
.result .success{
	height:100%;
	width:80%;
	max-width:400px;
	background-image: url(../img/ok-yesican.png);
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;	
}
.result .fail{
	height:100%;
	width:80%;
	max-width:400px;
	background-image: url(../img/fail-yesican.png);
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;	
}
.guide{
	z-index:10;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#d5d4d0;
}
.guide .guide-text{
	z-index:11;
	position:relative;
	color:#313131;
	background-color: #dc7a8c;
	border-radius:1rem;
	border:5px solid #dc7a8c;
	box-shadow: 0 0 5px 5px rgba(0,0,0,.1);	
	margin:0 15px;
	overflow:hidden;
}
.guide .guide-text .img-group{
	width:100%;
	text-align: center;
}
.guide .guide-text .img-box{
	width: 14rem;
	padding-bottom: 14rem;
	position:relative;
	display:inline-block;
}
.guide .guide-text .img{
	width:100%;
	height:100%;
	left:0;
	top:0;
	position:absolute;
	background-image: url(../img/break-yesican.png);	
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;		
}
.guide .guide-text  .card-body{
	background-color:#ffffff;
}
.guide .guide-text .card-footer{
	background-color:#dc7a8c;
	color:#ffffff;
	padding-bottom:1.2rem;
	padding-top:1.2rem;
}
.guide .guide-text h2{
	color:#dc7a8c
}
.guide .guide-text .btn{
	background-color:#ffffff;
	border:1px solid #ffffff;
	color:#dc7a8c;
	display:inline-block;
}
.guide .guide-text .btn:hover{
	background-color:#ffffff;
	border:1px solid #ffffff;
	color:#dc7a8c;
}
.change-role-group {
	z-index:10;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
}
.change-role-group .change-role-text{
	z-index:11;
	position:relative;
	color:#ffffff;
	background-color:#dc7a8c;
	border-radius:1rem;
	border:5px solid #dc7a8c;
	box-shadow: 0 0 5px 5px rgba(0,0,0,.1);	
	margin:0 15px;
	padding:2rem;
	overflow:hidden;
}
.change-role-group .change-role-text img{
	width:4rem;
	height:4rem;
	display:inline-block;
}
.change-role-group .change-role-text .btn {
    background-color: #ffffff;
    border: 1px solid #ffffff;
    color: #dc7a8c;
    display: inline-block;
}
.wrapper{
	height:100vh;
	position:relative;
	background-image: url(../img/mainBG-yesican.jpg);
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;	
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0	
}
.wrapper-inner {
	width:100wh;
	height:calc(100vh - 3.8rem);
	position:relative;
}
.frame{
	position: relative;
}
.frame-inner{
	position:relative;
}
.section{
    z-index: 7;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
	background-color: rgba(0,0,0,.7);
}
.section a {
    height: 2.8rem;
    padding: 0 .2rem;
    font-size: .8rem;
	word-break: break-all;
    color: rgba(255,255,255,.6)!important;
    line-height: 1.1;
    cursor: pointer;
}
.section a.active {
    color: rgba(255,255,255,1)!important;	
}
.frame-main{
	border:1px solid #aaaaaa;
	background-color:#ffffff;
	border-radius:.8rem;
	margin-top:1rem;
	margin-bottom:1rem;
	box-shadow: 0 0 5px 5px rgba(0,0,0,.1);
}
.movie .frame-main{
	border:0;
	background-color:transparent;
	box-shadow: none;
}
.frame .top-menu{
	border:1px solid #29271c;
	background-color:#3e3c30;
	height:2.5rem;
	line-height:2.5rem;
	border-radius:100px;
	box-shadow: 0 0 5px 5px rgba(0,0,0,.1);
}
.frame .top-menu a i{
	font-size:1.3rem;
	line-height:2.5rem;
	vertical-align:top;
	display:inline-block;
}
.frame .direction{
	padding-left:1rem;
	padding-right:1rem;
}
.tooltip {
  font-size: 12px;
}
.frame .top-menu span{
	line-height:2.5rem;
	display:inline-block;
	vertical-align:top
}
.frame .top-menu .num{
	color:#e7d5bc;
	font-size:.8rem;
}
.frame .top-menu a{
	color:#dc7a8c;
	line-height:2.5rem;
	font-size:.8rem;
	cursor:pointer;
}
.frame .top-menu a:hover{
	color:#94d1c2;
}
.frame .answer-group .answer{
	padding:.3rem;
	background-color:#ffffff;
	color:#3e3c30;
	margin:.2rem;
	display:block;
	cursor:pointer;
	font-weight:500;
	border-radius:.3rem;
}
.frame .answer-group .answer:hover, .frame .answer-group .answer:focus{
	background-color:#e7d5bc!important;
	color:#3e3c30;
}
.frame .frame-main .title{
	padding:.5rem 1rem;
	border-top:1px solid #303249;
	background-color:#3e3c30;
	color:#e7d5bc;
	margin-top:-1rem;
	display:inline-block;
	font-size:1.1rem;
	border-bottom-right-radius:.4rem;
	border-bottom-left-radius:.4rem;
	width:18rem;
	text-align:center;
	left:50%;
	position:relative;
	margin-left:-9rem;
    box-shadow:inset 0px 15px 10px -10px rgba(0,0,0,.6);	
}
.frame .frame-main .title:before{
	content:'';
	width: 0px;
	height: 0px;
	border-top: .5rem solid transparent;
	border-right: .5rem solid #29271c;
	position:absolute;
	top:-1px;
	left:-.5rem;
}
.frame .frame-main .title:after{
	content:'';
	width: 0px;
	height: 0px;
	border-top: .5rem solid transparent;
	border-left: .5rem solid #29271c;
	position:absolute;
	top:-1px;
	right:-.5rem;
}
.movie .frame-main .title{
	border-radius:100px;
	z-index:3;
}
.movie-overlay{
	position:fixed;
	z-index:1;
	background-color:rgba(0,0,0,.7);
	top:2.5rem;
	left:0;
	right:0;
	bottom:0;
}
.movie .position-relative{
	z-index:3;
}
.movie .frame-main .title:before, .movie .frame-main .title:after{
	display:none
}
.movie .movie-num-group{
	margin-top:-.5rem;
	z-index:10;
	position:relative;
}
.movie .movie-num{
	width:2rem;
	height:2rem;
	line-height:2rem;
    text-align:center;
	background-color:#aaaaaa;
	color:#ffffff!important;
	cursor:pointer;
	border-radius:50%;
	display:inline-block;
}
.movie .movie-num.active{
	background-color:#45c77f!important;
	color:#ffffff!important;
}
.frame .answer-group{
	border:1px solid #29271c;
	background-color:#3e3c30;
	padding:.5rem;
	border-radius:.8rem;
	text-align:center;
	box-shadow: 0 0 5px 5px rgba(0,0,0,.1);	
}	
.frame .answer-position{
	position:fixed;
	bottom:1rem;
	left:0;
	right:0;
}
.q-text {
    border: 2px solid #dc7a8c;
    border-radius: 1rem;
    overflow: hidden;
    font-weight: 700;
    background-color: #dc7a8c;
}
.q-text {
    font-size: 1.3rem;
}
.q-text-m{
	font-size: 1.2rem!important;
}
.q-text-q {
    color:#ffffff;
}
.q-text-a {
    background-color: #ffffff;
	color:#3e3c30;
}
.input-typing, .input-typing:focus{
	color:#000000;
	font-weight:700;
	font-size: 1.3rem;	
}
.input-typing:focus{
	border:1px solid #ffffff;	
}
.q-pquiz {
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    border: 2px solid #dc7a8c;
    position: relative;
}
.q-pquiz span {
    position: absolute;
    top: -1rem;
    background-color: #dc7a8c;
    color: #ffffff;
    padding: .3rem .85rem;
    border-radius: 100px;
    width: 3rem;
    left: 50%;
    margin-left: -1.5rem;
}	
.picture-quiz-q-img{
	border-radius:.5rem;
	overflow:hidden;
}	
.picture-quiz-q-img:hover{

}
.q-pquiz img{
	position:absolute;
	top:50%;
	left:50%;
}
.directive {
    background-color: #dc7a8c;
	color:#ffffff;
    padding: .8rem 1rem;
    border-radius: .8rem;
    font-weight: 500;
	margin-right:1rem;
	margin-left:1rem;
	font-size:1.3rem;
}
.directive-m {
	font-size:1rem;
}
.q-pquiz-t2{
	position:relative;
	border-radius:50%;
	border:3px solid #dc7a8c;
	overflow:hidden;
}	
.q-pquiz-t2 img{
	position:absolute;
	left:50%;
	top:50%;
}	
.q-pannel {
    font-size: 1.1rem;
    padding: 1rem;
    padding-top: 0;
    display: block;
    font-weight: 500;
    border-bottom: 1px solid #000000;
	margin-left:1rem;
	margin-right:1rem;
}
.speaking-t3-contents .speaking-step2{
	background-color:#ffffff;
	border-radius:.3rem;
	overflow:hidden;
}
.speaking-t3-contents .speaking-step2.text-danger{
	border-bottom:0;
	margin-top:-1px;
}
.speaking-t3-contents .speaking-step2 .speaking-name, 
.speaking-t3-contents .speaking-step2 .speaking-contents{
	padding-bottom:.5rem;
	padding-top:.5rem;	
	border-bottom:1px solid #dddddd;
}
.speaking-t3-contents .speaking-step2.text-danger .speaking-name, 
.speaking-t3-contents .speaking-step2.text-danger .speaking-contents{	
	border-bottom:0;
}
.speaking-t3-contents .speaking-step2.text-danger .speaking-name{
	color: #ffffff;
	background-color:#519ea9;
}
.speaking-t3-contents .speaking-step2.text-danger .speaking-contents{
	background-color: #dc7a8c;
    color: #ffffff!important;
}
.speaking-t3-contents .speaking-step2 .speaking-name{
	font-size:.92em;
}
.recording a{
	width:2.8rem;
	height:2.8rem;
	border-radius:50%;
	border:1px solid rgba(0,0,0,.5);
	background-color:#45c77f;
	color:#ffffff!important;
	line-height:1;
	font-size:.7rem;
	display:inline-block;
	-webkit-box-shadow: 0 0 6px 2px rgba(0,0,0,0.5) inset;
	box-shadow: 0 0 6px 2px rgba(0,0,0,0.5) inset;	
	text-align:center;
	cursor:pointer;
}
.recording a:hover{
	background-color:#d7e027;
	color:#3e3c30!important;
}
.recording a.send{
	height:2.8rem;
	width:auto;
	padding-left:1rem;
	padding-right:1rem;
	border-radius:.4rem;
	background-color:#45c77f;
	color:#ffffff!important;
	font-size:.7rem;	
	display:inline-block;
	-webkit-box-shadow: 0 0 6px 2px rgba(0,0,0,0.5) inset;
	box-shadow: 0 0 6px 2px rgba(0,0,0,0.5) inset;	
	text-align:center;
	cursor:pointer;	
}
.recording a.send:hover{
	background-color:#d7e027;
	color:#3e3c30!important;	
}
.recording a.disable, .recording a.disable:hover{
	background-color:#dddddd;
	color:#828282!important;	
	cursor:default;
}
.recording a.youare{
      animation: colorchange 1s infinite both; /* animation-name followed by duration in seconds*/
         /* you could also use milliseconds (ms) or something like 2.5s */
      -webkit-animation: colorchange 1s infinite both; /* Chrome and Safari */
}
    @keyframes colorchange
    {
      0%   {background: #45c77f;}
      50%  {background: #d7e027;}
      100% {background: #45c77f;;}
    }

    @-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
    {
      0%   {background: #45c77f;}
      50%  {background: #d7e027;}
      100% {background: #45c77f;;}
    }
.progress-bar {
    background-color: #45c77f;	
}
.btn-group-toggle .btn-secondary:not(:disabled):not(.disabled).active{
	background-color:#519ea9;
	color:#ffffff!important;
	border-color:#519ea9;
}
.overflow{
	overflow-y:auto;
	color:#898989;
}
.talk-tryagain, .tryagain{
	color:#bbffb3
}
.talk-question-blank{
	height:7rem;
	overflow:auto;
}
.talk-answer-group{
	margin-top:1rem;
}
.talk-answer-group a{
	background-color:#3e3c30;
	border:2px solid #3e3c30;
	color:#ffffff!important;
	border:2px solid #ffffff;
	padding:.6rem 1.1rem;
	font-size:1.2rem;
	border-radius:.3rem;
	cursor:pointer;
}
.talk-answer-group.st2 a{
	padding:.3rem .8rem;
	font-size:1rem;
}
.talk-answer-group a:hover{
	border:2px solid #3e3c30;
	background-color:#ffffff;	
	color:#3e3c30!important;
}
.talk-answer-overflow{
		overflow-y:auto;
		padding:1rem;
		border:2px solid #3e3c30;
		border-radius: 1rem;
		background-color:#efefef;
}
@media (max-width: 576px){
	.q-img-s img{
		width:12rem;
	}	
	.q-img-xs img{
		width:7rem;
	}		
	.q-img-l img{
		width:13rem;
	}	
	.q-pquiz {
		width: 6rem;
		height: 6rem;
	}	
	.q-pquiz img {
		width: 3.5rem;
		margin-left:-1.75rem;
		margin-top:-1.75rem;
	}	
	.q-pquiz-t2{
		width:9rem;
		height:9rem;
	}	
	.q-pquiz-t2 img{
		width:6rem;
		height:6rem;
		margin-left:-3rem;
		margin-top:-3rem;
	}	
	.picture-quiz-q-img{
		max-width: 70px;
	}	
	.directive {
		padding: .5rem 1rem;
		font-size:1.2rem;
	}	
	.directive-m{
		font-size:1rem;
	}
	.frame .answer-group.speaking-t1-ans .answer{
		padding:.1rem .3rem;
	}	
	.phonics-story-movie::before{
		content:'';
		padding-top: 75%!important;
	}
	.speaking-t3-contents {
		height: calc(100vh - 380px)!important;
	}		
}
@media (max-width: 991px){
	.container, .frame{
		height:calc(100%)
	}
	.frame-inner{
		margin-top:1rem;
	}			
	.speaking-t3-contents {
		height: calc(100vh - 450px)!important;
	}	
}
@media (min-width: 576px){
	.q-img-s img{
		width:14rem;
	}	
	.q-img-l img{
		width:16rem;
	}	
	.q-pquiz {
		width: 7rem;
		height: 7rem;
	}	
	.q-pquiz img {
		width: 4.5rem;
		margin-left:-2.25rem;
		margin-top:-2.25rem;
	}		
	.picture-quiz-q-img{
		max-width:80px
	}		
	.frame-main.frame-full-main, .frame-main{
		min-height:500px;
	}
	.q-pquiz-t2{
		width:18rem;
		height:18rem;
	}	
	.q-pquiz-t2 img{
		width:13rem;
		height:13rem;
		margin-left:-6.5rem;
		margin-top:-6.5rem;
	}	
}
@media (min-width: 768px){
	.q-img-s img{
		width:18rem;
	}	
	.q-img-l img{
		width:20rem;
	}	
	.q-pquiz {
		width: 11rem;
		height: 11rem;
	}	
	.q-pquiz img {
		width: 7rem;
		margin-left:-3.5rem;
		margin-top:-3.5rem;
	}	
}
@media  (min-width: 992px){	
	.frame .answer-position{
		position:relative;
		bottom:0;
	}	
	.frame .answer-position.typing{
		position:fixed;
		bottom:1rem;
	}		
	.frame-main.frame-full-main, .frame-main {
		min-height: 300px;
	}
	.frame .answer-wrapper{
		margin-top:1rem!important;		
	}
	.frame .answer-wrapper.pos-bottom{
		margin-top:1rem!important;
		height:auto;	
		background-image:none;	
		bottom: 0;
		position: relative;		
	}	
	.frame .answer-group{
		bottom:auto;	
		left:0;
		right:0;
		text-align:left;
	}
	.q-img-s img{
		width:12rem;
	}	
	.q-img-l img{
		width:14rem;
	}	
	.picture-quiz-q-img{
		max-width:100%
	}
	.q-pquiz {
		width: 10rem;
		height: 10rem;
	}	
	.q-pquiz img {
		width: 6rem;
		margin-left:-3rem;
		margin-top:-3rem;
	}		
	
}
@media  (min-width: 1024px){
	.q-pquiz-t2 {
		width: 15rem;
		height: 15rem;
	}
	.q-pquiz-t2 {
		width: 12rem;
		height: 12rem;
	}	
	.q-pquiz-t2 img {
		width: 8rem;
		height: 8rem;
		margin-left: -4rem;
		margin-top: -4rem;
	}
	.mover-wrapper{
		padding-right: 10rem;
		padding-left: 10rem;
	}	
}
@media  (min-width: 1605px){
	.q-img-s img{
		width:15rem;
	}
	.q-img-l img{
		width:17rem;
	}	
	.q-text {
		font-size: 1.4rem;
	}
	.frame .answer-position.typing{
		position:relative;
		bottom:0;
	}	
	.frame-main.frame-full-main, .frame-main {
		min-height: 400px;
	}	
	.q-pquiz-t2{
		width:18rem;
		height:18rem;
	}	
	.q-pquiz-t2 img{
		width:13rem;
		height:13rem;
		margin-left:-6.5rem;
		margin-top:-6.5rem;
	}	
	.mover-wrapper{
		padding-right: 0;
		padding-left: 0;
	}	
	
}
.answer:focus,  .answer:active{
	background-color:#ffffff!important;
}