@charset "utf-8";
@import url('swiper.min.css');
@import url('reset.css');
@import url('modal.css');
@import url('line-awesome.min.css');
@import url('simple-line-icons.css');
@import url(//fonts.googleapis.com/earlyaccess/nanumpenscript.css); .nanumpenscript * { font-family: 'Nanum Pen Script', cursive; }
@import url('webfont.css');/*20200921*/

* {
	font-family: Dotum, '돋움', Helvetica, "Apple SD Gothic Neo", sans-serif;
	box-sizing: border-box;
}

body {
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	padding-top: 1px;
	margin-top: -1px;
	letter-spacing: 0.5px;
	word-spacing: -0.7px;
	height: auto;
	font-family: Dotum, '돋움', Helvetica, "Apple SD Gothic Neo", sans-serif;
	font-size: 14px;
	line-height: 1.6em;
	color: #666;
}
.centerThis {
	padding: 0 15px;
	position: relative;
	min-width: 290px;
}

/* ----------------------------------------------------------------
 lnb Styling
 -----------------------------------------------------------------*/
#content_wrap {
	position: relative;
	display: table;
	width: 100%;
	height: 100vh;
}

#content_inner {
	width: 100%;
	display: table;
	padding-top: 40px;
}
#content_inner.fix {
	margin-bottom: 44px;
}
#content_inner .subFix {
	margin-bottom: 20px;
	padding-top: 200px;
}
#content_inner .footFix {
	margin-bottom: 60px;
	padding-top: 200px;
}
#ltnav {
	height: 100%;
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: 99999;
	display: none;
}
.ltnavMenu li {
	border-bottom: 1px solid #e8e8e8;
	color: #4c576d;
}
.ltnavMenu li a {
	display: block;
	padding: 15px 20px 15px 12px;
}
.ltnavMenu li em {
	display: inline-block;
	margin-left: 6px;
	background: red;
	width: 18px;
	height: 18px;
	line-height: 18px;
	text-align: center;
	color: #fff;
	font-size: 9px;
	font-weight: bold;
	position: relative;
	top: -1px;
	border-radius: 50em;
}
.ltnavMenu li i {
	display: inline-block;
	width: 18px;
	text-align: center;
	margin-right: 6px;
}
.ltnav_inner {
	width: 239px;
	vertical-align: top;
	height: 100%;
	background: #73cbca;
	overflow-x: hidden !important;
	overflow-y: auto;
	-webkit-box-shadow: 3px 0px 15px -3px rgba(0,0,0,0.6);
	-moz-box-shadow: 3px 0px 15px -3px rgba(0,0,0,0.6);
	box-shadow: 3px 0px 15px -3px rgba(0,0,0,0.6);
	font-size: 15px;
	color: #fff;
}
#ltnav_mask {
	display: none;
	width: 100%;
	height: 100%;
	z-index: 991;
	background: rgba(0,0,0,0.5);
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

#lnav_close {
	position: fixed;
	top: 0px;
	left: 239px;
	height: 40px;
	width: 44px;
	line-height: 40px;
	cursor: pointer;
	text-align: center;
	font-size: 1.4em;
	color: #fff;
	z-index: 999;
	background: rgba(0,0,0,0.8);
	display: none;
}

/* header */

.header_main_fixed {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	z-index: 99;
}
#header {
	height: 40px;
	position: relative;
	background: #fbee3e;
}
#header h1 {
	text-align: center;
	display: block;
	margin: 0 auto;
	line-height: 40px;
	font-size: 14px;
	font-weight: bold;
	color: #008000;
}
#header h1 img {
	max-height: 33px;
	position: relative;
	top: 2px;
}
/* ----------------------------------------------------------------
 header .util
 -----------------------------------------------------------------*/

#ltnav_btn, #header_back, #header_close {
	position: absolute;
	right: 0;
	top: 0;
	height: 40px;
	width: 48px;
	cursor: pointer;
	text-align: center;
}
#ltnav_btn {
	left: 0px;
}
#header_back{
	left: 48px;
	width:100px;
}
#ltnav_btn span, #header_back span, #header_close span {
	height: 40px;
	width: 48px;
	line-height: 40px;
	position: relative;
	text-align: center;
	font-size: 24px;
	color: #008000;
}
#header_back span{
	width: auto;
}
#header_back .us{
	letter-spacing: 0px
}
#header_back label{
display: inline-block;
    font-size: 17px;
    line-height: 40px;
    vertical-align: top;
    cursor:pointer;
    letter-spacing: -1.3px;
}
.header_util {
	position: absolute;
	right: 0px;
	top: 0px;
	height: 40px;
	line-height: 40px;
}
.header_point {
	width: auto;
	text-align: right;
	padding-right: 13px;
}
.header_point img {
	height: 27px;
	position: relative;
	top: 3px;
}
.header_point label {
	margin-left: 10px;
	font-weight: 700;
	color: #f61841;
	font-size: 19px;
	position: relative;
	top: 0px;
}
.header_name {
	width: auto;
	text-align: left;
}
.header_name span {
	font-size: 13px;
}
.header_text {
	position: absolute;
	right: 0px;
	top: 0;
	padding: 0 15px;
	cursor: pointer;
	font-size: 14px;
	text-align: center;
	min-width: 48px;
	height: 48px;
	line-height: 48px;
}
.header_text span {
	width: 100%;
	height: 100%;
	position: relative;
	display: inline-block;
}
.headerTabFixed {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 99;
}

/* main menu */
#cssmenu i {
	margin-right: 6px;
	text-align: center;
	position: relative;
	font-size: 24px;
	position: relative;
	top: 3px;
}
#cssmenu, #cssmenu ul, #cssmenu li, #cssmenu a {
	margin: 0;
	padding: 0;
	border: 0;
	position: relative;
}
#cssmenu {
	width: 239px;
}
#cssmenu > ul > li:last-child {
	margin: 0;
}
/* title  */

#cssmenu > ul > li > div {
	display: block;
	padding: 0px 15px;
	height: 50px;
	line-height: 50px;
	border-bottom: 1px solid rgba(255,255,255,0.05);
	font-size: 17px;
	font-weight: 500;
	cursor: pointer
}
#cssmenu .has-sub .tt {
	position: relative;
	cursor: pointer;
}
#cssmenu .has-sub .tt:after {
	font-family: FontAwesome;
	position: absolute;
	top: 50%;
	right: 15px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	content: '\f107';
	font-size: 19px;
}
#cssmenu .has-sub.active .tt {
	color: #008000;
	background: #fbee3e;
}
#cssmenu .has-sub.active .tt:after {
	position: absolute;
	top: 50%;
	right: 15px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	content: '\f106';
	font-size: 22px;
	color: #008000;
}
/* Sub menu */
#cssmenu .has-sub ul {
	display: none;
	background: #fbee3e;
	color: #008000;
	padding: 10px 8px 10px 15px;
}
#cssmenu ul ul li {
	line-height: 22px;
}
#cssmenu ul ul {
	display: block;
	color: #6e6e6e;
}
#cssmenu .has-sub > ul > li {
	padding: 8px 0px;
}
#cssmenu .has-sub  li:first-child {
	border-top: 0;
	padding-top: 0
}
#cssmenu ul ul li:hover {
	text-decoration: none;
	cursor: pointer;
}

/* fix button */
.btnArea {
	margin: 25px 0 20px 0;
}
.fixedBtn_bottom {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
}
.fixedBtn_bottom a {
	border-radius: 0
}

/* login */
.loginWrap {
	width: 100%;
	height: 100vh;
	display: block;
	background: url(../images/login_bg.png) no-repeat center top;
	background-size: cover;
	overflow: hidden;
	position: fixed;
}
.loginWrap .container {
	margin: 0 auto;
	position: relative;
	padding: 0 15px;
}
.loginBox {
	top: 50%;
	left: 0;
	right: 0;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	position: fixed;
	width: 100%;
}
.loginBox h1 img {
	max-width: 140px;
	margin: 0 auto;
	margin-bottom: 3px;
}
.loginBox .inner {
	max-width: 360px;
	margin: 0 auto;
	text-align: center;
	background: #ffffff;
	padding: 15px 30px 20px 30px;
	border-radius: 18px;
	border: 5px solid #73cbca;
}
.loginInt {
	border: 2px solid #c8c8c8;
	background: #fff;
	border-radius: 5px;
	overflow: hidden;
}
.loginInt li {
	padding: 0 20px;
	padding-left: 30px;
	position: relative;
}
.loginInt li:first-child {
	border-bottom: 1px solid #c8c8c8;
}
.loginInt li:before {
	content: '\f364';
	font-family: 'LineAwesome';
	position: absolute;
	left: 13px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	color: #ccc;
	font-size: 21px;
}
.loginInt .pw:before {
	content: '\f360';
}
.loginInt input {
	border: 0;
	text-align: left;
	padding: 10px 13px;
	width: 100%;
}
.id_check {
	margin-top: 8px;
	text-align: left;
	position: relative;
}
.id_check .info i {
	font-size: 24px;
	color: #a6a6a6;
	position: absolute;
	right: 0;
	top: 0px;
}
.loginBtn {
	margin-top: 13px;
}
.icon_info_mark {
	display: inline-block;
	width: 22px;
	height: 22px;
	line-height: 22px;
	font-size: 14px;
	border-radius: 50em;
	margin-right: 2px;
}
.loginText {
	margin-top: 10px;
}
.loginText span a {
	color: #73cbca;
	font-weight: 700;
	font-size: 12px;
	text-decoration: underline
}
.loginText span:first-child {
	float: left;
}
.loginText span:last-child {
	float: right;
}
.loginInfoBox {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	text-align: center;
	color: #222;
	padding: 10px;
	padding-top: 0px;
}
.loginInfoBox h2 {
	font-size: 1.1em;
}
.loginInfoBox a {
	font-size: 0.9em;
	text-decoration: underline;
}
.loginInfoBox p {
	margin-top: 10px;
}
.loginInfoBox p span {
	display: inline-block;
	margin: 0 10px;
}
.loginInfoBox a {
	font-weight: 700;
	color: #008000;
}
/*- option */
.optionBox {
	background: #fff;
	border-top: 1px solid #e8e8e8;
	border-bottom: 1px solid #e8e8e8;
}
.optionBox tr {
	border-bottom: 1px solid #f5f5f5;
}
.optionBox tr:hover {
	cursor: pointer
}
.optionBox tr:last-child {
	border-bottom: 0px;
}
.optionBox th {
	text-align: left;
	color: #222;
}
.optionBox th, .optionBox td {
	height: 48px;
	padding: 0 13px;
}
.optionBox td {
	text-align: right;
}

/* ----------------------------------------------------------------
 join
 -----------------------------------------------------------------*/
.joinList {
	padding-top: 20px;
}
.joinFinText {
	text-align: center;
	padding-top: 8%;
}
.joinFinText p {
	margin-bottom: 20px;
}
.joinFinText em {
	display: inline-block;
	width: 44px;
	height: 44px;
	line-height: 44px;
	text-align: center;
	border-radius: 50em;
	color: #fff;
	background: #73cbca;
	font-size: 22px;
}
.btitle {
	text-align: left;
	padding: 6px 15px;
	border-bottom: 1px solid #e8e8e8;
	font-weight: 700;
	background: #f5f7f8;
	font-size: 13px;
}
.urlInfo dt, .urlInfo dd {
	display: table-cell;
	vertical-align: top;
}
.urlInfo dt {
	width: 180px;
}
.urlInfo dl {
	margin-top: 10px;
	display: table;
	width: 100%;
}
.urlInfo dl:first-child {
	margin-top: 0px;
}
.urlInfo dd {
	margin-top: 2px;
}
.urlInfo dt {
	font-weight: 700;
	font-size: 13px;
	color: #2e2e2e !important;
}
.urlInfo dd textarea {
	background: #fff;
	height: 120px;
	margin-bottom: 8px;
	color: #8e8e8e;
}
.urlInfo dd li {
	margin-top: 8px;
}
.urlInfo .dlTb {
	display: table;
	width: 100%;
}
.urlInfo .dlTb dt, .urlInfo .dlTb dd {
	display: table-cell;
	vertical-align: middle;
	text-align: left;
}
.urlInfo .dlTb dt {
	width: 140px;
}
.urlInfo dd.col_3 p span {
	width: 31%;
}
.urlInfo dd.col_3 span label {
	margin-right: 0px;
	box-sizing: border-box;
}
.urlInfo dd.col_3 p {
	margin-bottom: 7px;
}
.urlTxt {
	background: #f93047;
	color: #fff;
	padding: 5px;
	margin-top: 3px;
	border-radius: 4px;
}
.urlTxt2 {
	color: #f93047;
	margin-top: 3px;
	font-size: 12px;
}
.inputInfo {
	font-size: 12px;
	color: #999;
}
.urlInfoBox {
	display: table;
	width: 100%;
}
.urlInfoBox dt, .urlInfoBox dd {
	display: block;
	width: 100%;
}
.urlInfoBox li {
	display: table-cell;
	width: 50%;
}
.urlInfoBox li:first-child {
	padding-right: 13px;
}
.urlInfoBox li:last-child {
	padding-left: 13px;
}

/* ----------------------------------------------------------------
 Content
 -----------------------------------------------------------------*/
.content_tt {
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
}
.content_tt h2 {
	color: #1b68bc;
	font-weight: 700;
}
.content_list li {
	float: left;
	height: 66px;
	text-align: center;
	margin-bottom: 13px;
}
.content_list.col_3 li {
	width: 33.33%;
}

.content_list.col_5 li {
	width: 20%;
}

.content_list li a {
	display: block;
	margin: 0 8px;
	height: 100%;
	border-radius: 8px;
	font-weight: 700;
	background-color: #05bcfe;
	color: #fff;
	border-color: #05bcfe;
	 box-shadow:
        inset 0 0 2px 0 rgba(255,255,255,.4),
        inset 0 0 3px 0 rgba(0,0,0,.4),
        inset 0 0 3px 5px rgba(0,0,0,.05),
        2px 2px 4px 0 rgba(0,0,0,.25);
	position:relative;
	overflow:hidden;
}
.sample {
	background-color: #ff0505 !important;
	border-color: #ff0505 !important;
}
.listening {
	background-color: #05bc58 !important;
	border-color: #05bc58 !important;
}

.content_list li .dlBox {
	display: table;
	width: 100%;
	height: 100%;
	position: relative;
}
.content_list li .dlBox  dt{
	font-size: 17px;
}
.content_list li a:before, .content_list li a:after, .level1Box .item:before, .level1Box .item:after {
    content: '';
    display: block;
    position: absolute;
    left: 2px;
    right: 2px;
    height: 3px;
}
.content_list li a:before, .level1Box .item:before {
    top: 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    background: rgba(255,255,255,.6);
    box-shadow: 0 1px 2px 0 rgba(255,255,255,.6);
}
.content_list li a:after, .level1Box .item:after {
    bottom: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background: rgba(0,0,0,.15);
    box-shadow: 0 -1px 2px 0 rgba(0,0,0,.15);
}
.content_list li dl {
	display: table-cell;
	vertical-align: middle;
}
.content_list li dd {
	margin-top: 4px;
	text-align: center;
	display: inline-block;
	padding: 2px 10px;
	border-radius: 50em;
	background: #fff;
	color: #f61841 !important;
}
.content_list li dd img {
	max-height: 16px;
	position: relative;
	top: 1px;
	margin-right: 4px;
}
.finish{
	background: #ffffff !important;
	 color: #05bcfe !important;
}

/* ----------------------------------------------------------------
 levelBox
 -----------------------------------------------------------------*/
.listBox.col_4 li {
	width: 25%;
}
.listBox li {
	float: left;
	text-align: center;
}
.levelBox dl {
	margin: 0 6px;
	margin-bottom: 13px;
}
.levelBox dt, .levelBox dd {
	border-radius: 8px;
	font-size: 13px;
}
.levelBox dt {
	padding: 8px 7px;
	margin-bottom: 5px;
	color: #fff;
	font-weight: 700;
	background: #73cbca;
}
.levelBox dd {
	padding: 8px 7px;
	margin-bottom: 4px;
	background: #fbee3e;
}
.whiteLevel dd, .voLevel dd {
	background: #f1f1f1;
}
.voLevel dt {
	background-color: #ba73a4;
}
.levelBox dt, .levelBox dd {
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

/* ----------------------------------------------------------------
 swiper
 -----------------------------------------------------------------*/
.level1Box ul {
	margin: 0 -13px;
}
.level1Box li {
	float: left;
	text-align: center;
	margin-bottom: 13px;
	width: 25%;
	padding: 0 13px;
}

.swiper-container {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 120px;
	padding: 0 13px;
}
.swiper-slide {
	text-align: center;
	font-size: 18px;
	height: 120px;
	background: #73cbca;
	color: #fff;
	border-radius: 13px;
}
.swiper-slide .item, .level1Box .item {
	display: table;
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 18px;
	height: 120px;
	overflow:hidden;
	background: #05bcfe;
	color: #fff;
	border-radius: 13px;
	 box-shadow:
        inset 0 0 2px 0 rgba(255,255,255,.4),
        inset 0 0 3px 0 rgba(0,0,0,.4),
        inset 0 0 3px 5px rgba(0,0,0,.05),
        2px 2px 4px 0 rgba(0,0,0,.25);
	position: relative;
}

.swiper-slide .item dl, .level1Box .item dl {
	width: 100%;
	display: table-cell;
	vertical-align: middle;
}
.swiper-slide .item dt, .level1Box .item dt {
	font-weight: 700;
	display: inline-block;
	font-size: 21px;
	margin-bottom: 10px;
}
.swiper-slide .item  dd, .level1Box .item dd {
	font-size: 12px;
	line-height: 1.15em;
}

/* ----------------------------------------------------------------
 playBox
 -----------------------------------------------------------------*/
.playBox {
	background: #6bcbca;
	color: #fff;
	padding: 6px 13px;
}
.playtt {
	float: left;
}
.playBox .playtt span {
	display: inline-block;
	padding: 3px 15px;
	background: #2ea2a1;
	border-radius: 50em;
	font-weight: 700;
	font-size: 13px;
}
.playBox .playtt span:before {
	content: "\f232";
	font-size: 17px;
	position: relative;
	top: 1px;
	margin-right: 3px;
	font-family: LineAwesome;
}
.playBox2 {
	padding: 20px;
	padding-bottom: 0;
	text-align: center;
}
.playBox2 .imgBox img {
	max-height: 60vh;
}
.playBox .playtt h2 {
	display: inline-block;
	margin-left: 13px;
	font-size: 16px;
}
.playttBtn {
	float: right;
}
.playttBtn a {
	height: 30px;
	line-height: 30px;
	color: #6bcbca;
	padding: 0 13px;
	border: 1px solid #fff;
	background: #ffffff;
	border-radius: 5px;
}

.playttBox {
	min-height: 52px;
}

.playbtt {
	position: relative;
	display: table;
	width: 100%;
}
.playbtt h2 {
	display: table-cell;
	vertical-align: top;
}
.playbtt .playttBtn {
	display: table-cell;
	width: 100px;
	vertical-align: top;
}
.playbtt  .playttBtn a {
	border: 2px solid #6bcbca;
	line-height: 26px;
}
.playBox2 h2 {
	text-align: left;
	font-size: 15px;
	font-weight: 700;
	color: #b971a3;
}
.playBox2 span {
	margin-left: 5px;
}
.playCheck {
	display: table;
	width: 100%;
	text-align: center;
}
.playCheck li {
	display: table-cell;
	vertical-align: middle;
	width: 33.333%;
	cursor: pointer;
}
.playImg img, .playImg p {
	max-width: 25vw;
	max-height: 50vh;
    padding: 1rem 0;
}

.playImg p {
	font-size: 33px;
	display: table-cell;
	vertical-align: middle;
	font-weight: 700;
	color: #6973bf;
	height: 100%;
}
.playImg p strong.tango {
	font-size: 40px;
}
.playImgCheck3 {
	height: 50vh !important;
}
.playImgCheck2 {
	height: 25vh !important;
}
.playImgCheck {
	width: 100%;
	height: 100%;
	position: relative;
	display: table;
}
.playImgCheck:before, .playImgCheck:after {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	height: 100%;
	display: block;
	content: '';
	z-index: 9
}
.playImgCheck.anSwer:before {
	background: url(../images/lessons/bg_q_answer.png) no-repeat center center;
	background-size: 50%;
}
.playImgCheck.anSelect:before {
	background: url(../images/lessons/bg_q_select.png) no-repeat center center;
	background-size: 50%;
}
.playImgCheck.anTwo:before {
	background: url(../images/lessons/bg_q_answer.png) no-repeat center center;
	background-size: 50%;
}
.playImgCheck.anTwo:after {
	background: url(../images/lessons/bg_q_select.png) no-repeat center center;
	background-size: 50%;
}
.playImgCheck2.anSwer:before {
	background-size: 40%;
}
.playImgCheck2.anSelect:before {
	background-size: 40%;
}
.playImgCheck2.anTwo:before, .playImgCheck2.anTwo:after {
	background-size: 40%;
}
.playImgTop img {
	max-width: 100%;
	max-height: 28vh;
}
.playImgTop .textBox {
	padding: 6px;
	border: 2px solid #e8e8e8;
	background: #f7f7f7;
	margin: 2px 0;
	text-align: left;
}

.oxBox {
	display: table;
	width: 100%;
}
.oxBox li {
	display: table-cell;
	width: 50%;
	font-weight: 700;
	vertical-align: top;
	padding: 0 10px;
}
.oxBox li:first-child {
	border-right: 1px solid #e8e8e8;
}
.oxBox dt {
	margin-top: 10px;
	font-size: 33px;
	color: #2e2e2e;
	margin-bottom: 13px;
}
.oxBox dt:before {
	display: block;
	content: '';
	margin-bottom: 10px;
	background: url(../images/lessons/bg_o.jpg) no-repeat center center;
	background-size: 29px;
	height: 30px;
	width: 100%;
}
.oxBox li:last-child dt:before {
	background: url(../images/lessons/bg_x.jpg) no-repeat center center;
	background-size: 29px;
}

.videoWrap {
	display: flex;
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	padding-top: 40px;
}
.videoBox {
	width: 100%;
}
.videoRight {
	width: 46px;
	height: 100%;
	overflow: hidden;
}
.videoRight a {
	display: table;
	height: 100%;
	width: 100%;
}
.videoRight span {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	font-size: 24px;
	font-weight: 700;
}
.videoRight small {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: normal;
}

/* 200207 수정사항 leve5_mod */
.playWrap {
	width: 100%;
	display: table;
	height: calc(100vh - 147px);
}
.playWrap, .playWrap p {
	font-size: 21px;
}
.playWrap .playImgTop {
	width: 50%;
	display: table-cell;
	vertical-align: middle;
}
.playWrap .playImgText {
	width: 50%;
	display: table-cell;
	vertical-align: middle;
}
.playWrap .playCheck {
	margin-top: 0px;
}
.playWrap .playImgCheck2.anSwer::before {
	background-size: contain;
}
.playWrap .playImgCheck2.anSelect::before {
	background-size: contain;
}
.playWrap .playImgCheck2.anTwo::before, .playWrap .playImgCheck2.anTwo::after {
	background-size: contain;
}
.playWrap .playImgTop img {
	max-height: 50vh;
	padding-right: 13px;
}
.playWrap.sero .playImgText li {
	display: block;
	width: 100%;
	/*text-align: left;*/
	height: 16vh;
}

.playWrap.sero .playImgCheck2 {
	height: 13vh !important;
}

.nextBtn {
	position: fixed;
	right: 0;
	background: rgba(0,0,0,0.5);
	color: #fff;
	width: 40px;
	height: 60px;
	line-height: 60px;
	display: block;
	text-align: center;
	z-index: 9;
	top: 50%;
	cursor: pointer;
	font-size: 1.6em;
}

/* ----------------------------------------------------------------
 new login
 -----------------------------------------------------------------*/
.loginTT {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 40px;
	line-height: 40px;
	background: #fbee3e;
	color: #f61841;
	text-align: center;
	font-weight: 700;
}
.popClose {
	display: block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	position: absolute;
	right: 0;
	top: 0;
	text-align: center;
	font-size: 1.7em;
}
.popClose a {
	display: block;
	width: 100%;
	height: 100%;
	color: #008000;
	font-weight: 700;
}
.loginSns {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 0;
	right: 0;
	width: 100%;
}
.loginSns ul {
	display: table;
	width: 100%;
}
.loginSns li {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	font-weight: 700;
	padding: 0 13px;
}
.loginSns a {
	background: #fff;
	padding: 13px;
	padding-left: 0px;
	width: 100%;
	border-radius: 30px;
	display: inline-block;
	border: 1px solid #e1e1e1;
}
.loginSns span {
	position: relative;
	padding-left: 33px;
}
.loginSns span:before {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 0px;
	background-size: 22px 22px;
	width: 22px;
	height: 22px;
	background-repeat: no-repeat;
}
.login_naver span:before {
	background-image: url(../images/icon_naver.png);
}
.login_naver {
	color: #00c73c;
}
.login_facebook span:before {
	background-image: url(../images/icon_facebook.png);
}
.login_facebook {
	color: #3b5998;
}
.login_google span:before {
	background-image: url(../images/icon_google.png);
}
.login_google {
	color: #4286f5;
}

/* terms */
.agreeBox {
	height: 100%;
}
.agreeBox textarea {
	height: 100%;
	background: #f1f1f1;
	padding: 10px;
	color: #666;
}
.termsBox {
	padding: 20px;
}
.termsBox dl {
	margin-bottom: 15px;
}
.termsBox dl:last-child {
	margin-bottom: 0px;
}
.termsBox dt {
	font-size: 1.1em;
	color: #222;
	margin-bottom: 8px;
	font-weight: 700;
}

/* confrim*/
.conList .content_tt {
	margin-bottom: 13px;
}
.conList h2 {
	text-align: left;
}
.conList table {
	border-top: 2px solid #1b68bc;
	text-align: center;
}
.conList thead th {
	padding: 8px 10px;
	border-bottom: 1px solid #ccc;
	background: #f1f1f1;
}
.conList tbody tr {
	border-bottom: 1px solid #e8e8e8;
}
.conList tbody th, .conList tbody td {
	padding: 15px 10px;
	background: #fff;
}
.conList strong {
	color: #f61841;
}

/* 추가 20200402*/
.tangoWrap p {
	text-align: center;
	position: relative;
}
.tango {
	font-size: 1.5rem;
}
.tangoWrap p:before, .tangoWrap p:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(-50%,-50%);
	width: 100%;
	height: 100%;
	display: block;
}
.tangoWrap  p.anSwer:after {
	background: url(../images/lessons/bg_q_answer.png) no-repeat right center;
	background-size: contain;
}
.tangoWrap  p.anSelect:before {
	background: url(../images/lessons/bg_q_select.png) no-repeat right center;
	background-size: contain;
}
.tangoWrap p.anTwo:after {
	background: url(../images/lessons/bg_q_answer.png) no-repeat right center;
	background-size: contain;
}
.tangoWrap p.anTwo:before {
	background: url(../images/lessons/bg_q_select.png) no-repeat right center;
	background-size: contain;
}

/* body bg */
.body-orange{
	background-color: #f4b183 !important;
}
.body-green{
	background-color: #a9d18e !important;
}


/* 200607 */
.movBox{
	display: flex;
    flex-direction: row;
    width: 100%;
}
.moving_mod, .cloud_text{
	flex:1;
	margin: auto;
}
.moving_mod img{
	width: 100%;
}
.cloud_text {
	background: url(../images/cloud.png) no-repeat center center;
	background-size: 100%;
	width: 100%;
	height: calc(100vh - 147px);
	text-align: center;
	color: #fff;
	font-size: 3rem;
	font-weight: 700;
	font-family: 'Nanum Pen Script' !important;
}

.cloud_text div {
	display: table;
	margin: auto;
	width: 100%;
	height: 100%;
}
.cloud_text span {
	display: table-cell;
	width: 100%;
	vertical-align: middle;
	font-family: 'Nanum Pen Script' !important;
}



/* ----------------------------------------------------------------
 Content_add 20200921
 -----------------------------------------------------------------*/
 .level_wrap {position:relative; width:100%;height:100vh;background:url(../images/add/bg_level2.png) no-repeat center top;background-size:cover;background-attachment:fixed;z-index:10;}
 /*.level_wrap {position:relative; width:100%;height:100vh;background:url(../images/add/bg_level.jpg) no-repeat center top;background-size:cover;background-attachment:fixed;z-index:10;}*/
 .level_wrap.step_bg {background-image:url(../images/add/bg_step2.png);}
 /*.level_wrap.step_bg {background-image:url(../images/add/bg_step.jpg);}*/
 .level_wrap.lesson_bg {background-image:url(../images/add/bg_lesson2.png);}
 /*.level_wrap.lesson_bg {background-image:url(../images/add/bg_lesson.jpg);}*/
 .level_wrap .content_tt h2 {font-family:"Noto Sans KR";font-weight:700;color:#111;font-size:4vw;}

 .levelBox_area ul li {float:left;	text-align:center;margin-bottom:13px;width:25%;padding:0 5px;}
 .levelBox_area .item {position:relative;display:table;width:100%;height:15vw;text-align:center;background:url(../images/add/button_red.png) no-repeat center center;
 	background-size:100%;overflow:hidden;}
 
 .levelBox_area .item.red {background-image:url(../images/add/button_red.png);font-size:3.1vw;color:#fff;}
 .levelBox_area .item.yellow {background-image:url(../images/add/button_yellow.png);font-size:2.4vw;color:#111;}
 .levelBox_area .item.orange {background-image:url(../images/add/button_orange.png);font-size:2.2vw;color:#111;}
 .levelBox_area .item.goldyellow {background-image:url(../images/add/button_goldyellow.png);font-size:2.4vw;color:#111;}
 .levelBox_area .item.finishEnd {background-image:url(../images/add/button_white.png);font-size:2.4vw;color:#111;}/* 20201007 */
 .levelBox_area .item.pink {background-image:url(../images/add/button_pink.png);font-size:2.3vw;color:#fff;}
 .levelBox_area .item.green {background-image:url(../images/add/button_green.png);font-size:2.3vw;color:#fff;}

 .levelBox_area.lesson .item.red {background-image:url(../images/add/button_red_lesson.png);font-size:2.4vw;color:#fff;}
 .levelBox_area.lesson .item {height:12vw;}
 .levelBox_area.lesson .item.red {font-size:2.4vw;}
 .levelBox_area.lesson .item dt {margin:0 10% !important;}
 
 .levelBox_area .item dl {width:100%;display:table-cell;vertical-align:middle;}
 .levelBox_area .item dt {	position:relative;font-family:"Noto Sans KR";font-weight:700;display:inline-block;margin-bottom:10px;line-height:1.2;z-index:999;margin:0 25% 0 10%;word-break:break-all;letter-spacing:-0.4px;}
 
 .levelBox_area .item .level_img:before {content:"";position:absolute;right:0;top:0;width:30%;height:100%;background:url(../images/add/1_level1.png) no-repeat center center;background-size:90% auto;}
 .levelBox_area .item .level_img.img1:before {background-image:url(../images/add/1_level1.png);}
 .levelBox_area .item .level_img.img2:before {background-image:url(../images/add/1_level2.png);background-size:85% auto;}
 .levelBox_area .item.pink .level_img.img2:before {background-image:url(../images/add/1_level2_2.svg);background-size:85% auto;background-position: right 60%;}
 .levelBox_area .item .level_img.img3:before {background-image:url(../images/add/1_level3.png);background-size:80% auto;}
 /*.levelBox_area .item.green .level_img:before {background-image:url(../images/add/1_level2_2.svg) !important;background-size:85% auto !important;background-position: right 60%;}*/
 .levelBox_area .item .level_img.img4:before {background-image:url(../images/add/1_level4.png);background-size:45% auto;}
 .levelBox_area .item .level_img.img5:before {background-image:url(../images/add/1_level5.png);background-size:100% auto;}
 .levelBox_area .item .level_img.img6:before {background-image:url(../images/add/1_level6.png);}
 .levelBox_area .item .level_img.img7:before {background-image:url(../images/add/1_level7.png);}
 .levelBox_area .item .level_img.img8:before {background-image:url(../images/add/1_level8.png);background-size:50% auto;}
 
 .levelBox_area .item .level_img.img9:before {background-image:url(../images/add/2_step1.png);background-size:75% auto;}
 .levelBox_area .item .level_img.img10:before {background-image:url(../images/add/2_step2.png);background-size:60% auto;}
 .levelBox_area .item .level_img.img11:before {background-image:url(../images/add/2_step3.png);background-size:75% auto;}
 .levelBox_area .item .level_img.img12:before {background-image:url(../images/add/2_step4.png);background-size:65% auto;}