@charset "utf-8";
/* *******************************************************
 * filename : content.css
 * description : 서브페이지 컨텐츠 CSS
 * date : 2020-11-25
******************************************************** */

/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
.custom-scrollbar-cover{display:none;}

/* -------- 공통 :: 탭 -------- */
/* Tab 공통 스타일 */
.sub-tab-wrapper-style{margin-bottom: 50px;}
.sub-tab-list-style ul{text-align: center;}
.sub-tab-list-style ul:after{display:none}
.sub-tab-list-style ul li{display: inline-block; width: 355px; margin-left: 20px;}
.sub-tab-list-style ul li:first-child{margin-left: 0;}
.sub-tab-list-style ul li a{display:table; height: 75px; width:100%; background-color: #222; -webkit-border-radius: 75px; border-radius: 75px; -webkit-transition: background-color 0.3s; transition: background-color 0.3s;}
.sub-tab-list-style ul li a em{display:table-cell; vertical-align:middle; color:#fff; font-size:20px; font-weight: 600; letter-spacing:-0.25px; text-align:center;}
.sub-tab-list-style ul li.selected{z-index:1;}
.sub-tab-list-style ul li.selected a{background-color:#ffae00;}
/* Tab Fixed Move*/
.sub-tab-list-style.top-fixed{position:fixed; top:70px; left:0; width:100%; height:60px;}
/* Mobile Tab Drop Menu */
.sub-drop-open-btn-style{display:none}

@media all and (min-width:1025px){
	/* Tab Fixed Background */
	.sub-tab-list-style:before{position:absolute; top:0px; bottom:0px; left:50%; width:0; content:""; background-color:#fff; border-bottom:1px solid #e5e5e5; transition:all 0.5s}
	.sub-tab-list-style.top-fixed:before{width:100%; margin-left:-50%}
}

/* ****************************************
 * 서브공통 
**************************************** */
/* 공통 컬러 */
.font-color-pink{color: #f75296;}
.font-color-blue{color: #17aad0;}
.font-color-orange{color: #f58934;}
.font-color-green{color: #77be4e;}
.font-color-purple{color: #8c7ad2;}
/* 서브페이지 영역  */
.sub-page{margin-top: 65px; padding-top: 15px; position: relative; padding-bottom: 100px; margin-bottom: 50px; min-height: 700px;}
/* 교재 페이지들 제외한 영역 */
.no-prd-page{position: relative; top: -135px; margin-top: 0;}
/* 오른쪽 퀵메뉴  */
#rightBar{position:absolute; top:15px; right:40px; z-index:99;}
.no-prd-page #rightBar{/* top: 235px; */ top: 150px;}
#rightBar.fixed{position:fixed;}
.no-prd-page #rightBar.fixed{top: 15px;}
#rightBar.absolute{position:fixed; top: 15px;/* top: auto; bottom: 0; */}
#rightBar > ul {}
#rightBar > ul > li{margin-top: 10px; text-align: center;}
#rightBar > ul > li:first-child{margin-top: 0;}
#rightBar > ul > li > a{display: flex; flex-direction: column; align-items: center; justify-content: center;
 width:128px; height:128px; background-color:#8572d1; text-align:center; color:#fff; -webkit-border-radius: 100%; border-radius: 100%;}
#rightBar > ul > li:nth-child(2) > a{background-color: #ffae00;}
#rightBar > ul > li:nth-child(3) > a{background-color: #9bcf08;}
#rightBar > ul > li:nth-child(4) > a{background-color: #11bcbf;}
#rightBar > ul > li:nth-child(5) > a{background-color: #ef599d;}
#rightBar > ul > li > a img{display: block; margin: 0 auto;}
#rightBar > ul > li > a span{margin-top: 9px; display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.25px; color: #fff;}
#rightBar > ul > li:nth-child(5) > a span{font-size: 14px; line-height: 16px;}
/* TOP버튼 */
.to-top-btn{margin: 30px auto 0; display:block; width: 35px; height: 36px;}
.mobile-top-btn{display: none;}
#widgetCon{display:none;}

/* ****************************************
 * Phonics Land :: 공통 비주얼영역  
**************************************** */
.sub-visual-phonics, .sub-visual-english{position:relative; overflow:hidden; width:100%; height:560px; padding-bottom: 40px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.sub-visual-english:before{position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; background: url("../images/layout/sub_visual_english_cover.png") no-repeat 50% 0%; z-index: 2; background-size: cover !important;}
/* 배경 이미지 */
.sub-visual-phonics .visual-img-con,
.sub-visual-english .visual-img-con{
	position:absolute; 
	top:0px; 
	left:0px; 
	width:100%;
	height:100%;
	background-size:cover !important;
}
/* 꾸밈이미지 */
.sub-visual-phonics .area,
.sub-visual-english .area{position: relative;}
.phonics-visual-img01{position: absolute; top: 94px; left: 50%; margin-left: -498px;}
.phonics-visual-img02{position: absolute; top: 80px; right: 0;}
.english-visual-img01{position: absolute; top: 110px; left: 50%; margin-left: -594px;}
.english-visual-img02{position: absolute; top: 55px; left: 50%; margin-left: -308px;}
.english-visual-img03{position: absolute; bottom: -26px; right: 50%; margin-right: -740px;}
/* 중앙 텍스트 */
.sub-visual-phonics .visual-txt-con,
.sub-visual-english .visual-txt-con{position:relative; z-index:1; text-align:center; display:table; width:100%; height:100%; letter-spacing:-0.5px; color:#fff;}
.sub-visual-phonics .visual-txt-container,
.sub-visual-english .visual-txt-container{position:relative; width:100%;}
.sub-visual-phonics .visual-sub-txt,
.sub-visual-english .visual-sub-txt{padding-top:30px; font-size:22px; line-height: 1.36; color: #3c2f2b;}
.sub-visual-english .visual-sub-txt{color: #fff;}
/* SUB LAYOUT :: 서브메뉴(스타일3) */
#topMenu03{margin-top: -80px; position:relative; width:100%; height:80px; z-index: 3;}
#topMenu03 .side-menu-inner{text-align:center; width:100%; height:80px;}
#topMenu03 .side-menu-inner ul{display:table; width:100%; height:100%; table-layout:fixed; border:1px solid #ddd; background-color: #fff; -webkit-border-radius: 30px; border-radius: 30px; -webkit-box-sizing: border-box; box-sizing: border-box;}
#topMenu03 .side-menu-inner ul li{
	display:table-cell;
	vertical-align:middle;
}
#topMenu03 .side-menu-inner ul li > a{
	display:block; 
	display:table; 
	position:relative;
	width: calc(100% - 60px); height:78px;
	margin: 0 30px; -webkit-box-sizing: border-box; box-sizing: border-box;
	font-size:20px;  line-height:1.2; color:#111; word-break:keep-all;
	-webkit-transition:color 0.3s; transition:color 0.3s;
}
#topMenu03 .side-menu-inner ul li > a:before{
	position:absolute;
	bottom:-3px; left:50%;
	content:""; width:0; height:6px; background-color:#ffaa05; -webkit-border-radius: 6px; border-radius: 6px;
	-webkit-transition:all 0.3s; transition:all 0.3s;
}
#topMenu03 .side-menu-inner ul li > a > span{display:table-cell; vertical-align:middle;}
#topMenu03 .side-menu-inner ul li > a:hover:before, 
#topMenu03 .side-menu-inner ul li.on > a:before{width:100%; margin-left:-50%;}
#topMenu03 .side-menu-inner ul li:hover > a, 
#topMenu03 .side-menu-inner ul li.on > a{color:#ffaa05; font-weight: 600;}
#topMenu03.english-page .side-menu-inner ul li > a:before{background-color: #7dc501;}
#topMenu03.english-page .side-menu-inner ul li:hover > a, 
#topMenu03.english-page .side-menu-inner ul li.on > a{color: #7dc501;}

/* ****************************************
 * Phonics Land :: 03 온라인학습
**************************************** */
.learning-con01{padding-bottom: 52px;}
.learning-con01-list{margin: 0 -18px;}
.learning-con01-item{float: left; width: calc(20% - 36px); margin: 0 18px;}
.learning-con01-item .img{position: relative; width: 100%; height: 0; padding-top: 129.1%; overflow: hidden; border: 1px solid #e5e5e5; -webkit-box-sizing: border-box; box-sizing: border-box;}
.learning-con01-item .img.buy:before{position: absolute; top: 6%; left: 4.8%; display: block; content: ''; width: 73px; height: 74px; background: url("../images/content/icon_buy_finish.png") 0 0 no-repeat; z-index: 1;}
.learning-con01-item .img span{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; -webkit-transition: all 0.3s; transition: all 0.3s;}
.learning-con01-item .tit{margin-top: 20px; font-size: 24px; line-height: 1.2; font-weight: 600; color: #111; text-align: center;}
.learning-con01-item .btn{position: relative; margin: 20px auto 0; display: block; width: 155px; height: 35px; border: 1px solid #ebebeb; -webkit-border-radius: 6px; border-radius: 6px; color: rgba(17,17,17,0.5); -webkit-transition: all 0.3s; transition: all 0.3s;}
.learning-con01-item .btn:before{position: absolute; top: 50%; margin-top: -6px; left: 115px; display: block; content: ''; width: 1px; height: 12px; background-color: #b2b2b2;}
.learning-con01-item .btn span{padding-left: 14px; display: inline-block; font-size: 14px; line-height: 35px;}
.learning-con01-item .btn i{position: absolute; top: 50%; margin-top: -7.5px; right: 10px; font-size: 15px;}
@media all and ( min-width: 801px ){
	.learning-con01-item a:hover .img span{-webkit-transform: scale(1.05); transform: scale(1.05);}
	.learning-con01-item .btn:hover{color: #111; border-color: #111;}
}
/* slick arrow */
.learning-con01-list .slick-arrow{position: absolute; top: 50%; margin-top: -40px;}
.learning-con01-list .slick-arrow img{height: 40px;}
.learning-con01-list .slick-prev{left: -100px;}
.learning-con01-list .slick-next{right: -100px;}

.learning-con02{}
.learning-con02:before{padding-top: 59px; display: block; content: ''; width: 100%; height: 5px; background: url("../images/content/line_bg.png") 0 0 repeat-x;}
/* 하단 리스트 */
.learning-con02-item{margin-top: 60px; padding: 30px 5.3% 45px; background-color: #f5f5f5; -webkit-border-radius: 40px; border-radius: 40px;}
.learning-con02 .learning-con02-item:first-child{margin-top: 0;}
.learning-con02-tit{}
.learning-con02-tit h5{font-size: 44px; font-weight: 600; color: #111;}
.learning-con02-tit .cir-num{position: relative; top: -2px; margin-left: 17px; width: 50px; height: 50px; font-size: 25px; font-weight: 600; letter-spacing: -0.25px; text-align: center; line-height: 50px; border: 8px solid #23b0da; display: inline-block; vertical-align: middle; background-color: #fff; -webkit-border-radius: 100%; border-radius: 100%;}
.learning-con02-tit img{margin-left: 20px; height: 76px; display: inline-block; vertical-align: middle;}
.learning-con02-tit:after{padding-top: 25px; display: block; content: ''; width: 100%; height: 5px; background: url("../images/content/line_bg.png") 0 bottom repeat-x;}
/* info */
.learning-con02-info{margin-top: 40px; position: relative;}
.learning-con02-add{position: absolute; right: 0; top: -142px;}
/* 시리얼 번호 등록전 */
.learning-con02-add .input-tit{margin-right: 20px; display: inline-block; vertical-align: middle; font-size: 16px; line-height: 70px; color: #111; opacity: 0.9;}
.learning-con02-add .input-box{display: inline-block; vertical-align: middle; position: relative; padding-left: 35px; padding-right: 106px; width: 445px; height: 70px; border: 1px solid #ddd; background-color: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 17px; border-radius: 17px;}
.learning-con02-add .input-box input{font-size: 15px; letter-spacing: -0.25px; color: #111; width: 100%; height: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-border-radius: 0; border: none;}
.learning-con02-add .input-box input::-ms-clear {display: none;}
.learning-con02-add .input-box input:focus{outline:none;}
.learning-con02-add .input-box input::placeholder{color: rgba(17,17,17,0.5);}
.learning-con02-add .input-box button{position: absolute; top: 50%; margin-top: -20.5px; right: 15px; font-size: 16px; letter-spacing: -0.25px; color: #fff; width: 76px; height: 41px; -webkit-border-radius: 8px; border-radius: 8px; background-color: #1c1c1c; text-align: center;}
/* 시리얼 번호 등록완료 */
.learning-con02-add .tit, .learning-con02-add .date, .learning-con02-add .number{display: inline-block; vertical-align: middle; font-size: 16px; line-height: 60px; color: #111; opacity: 0.9;}
.learning-con02-add .txt-group{display: inline-block;}
.learning-con02-add .txt-group + .txt-group{margin-left: 20px;}
.learning-con02-add .tit{margin-right: 20px; font-weight: 600;}
.learning-con02-add .date{opacity: 0.5;}
.learning-con02-add .number{width: 198px; height: 58px; border: 1px solid #e7e7e7; -webkit-border-radius: 15px; border-radius: 15px; background-color: #fafafa; color: rgba(17,17,17,0.5); font-weight: 600; text-align: center; line-height: 58px;}
/* 왼쪽 썸네일 */
.learning-con02-info .thum{width: 240px;}
.learning-con02-info .thum .img{position: relative; width: 100%; height: 0; padding-top: 129.1%;}
.learning-con02-info .thum .img span{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;}
.learning-con02-info .thum .btn{margin: 15px auto 0; position: relative; display: block; width: 155px; height: 35px; color: rgba(17,17,17,0.5); -webkit-transition: all 0.3s; transition: all 0.3s;}
.learning-con02-info .thum .btn:before{position: absolute; top: 50%; margin-top: -6px; left: 115px; display: block; content: ''; width: 1px; height: 12px; background-color: #b2b2b2;}
.learning-con02-info .thum .btn span{padding-left: 14px; display: inline-block; font-size: 14px; line-height: 35px;}
.learning-con02-info .thum .btn i{position: absolute; top: 50%; margin-top: -7.5px; right: 10px; font-size: 15px;}
@media all and ( min-width: 801px ){
	.learning-con02-info .thum .btn:hover{color: #111; border-color: #111;}
}
/* 오른쪽 정보 */
.learning-con02-info .info{width: 800px;}
.learning-info-list{}
.learning-info-item{margin-top: 20px; position: relative; /* padding-right: 59px; */}
.learning-info-list .learning-info-item:first-child{margin-top: 0;}
.learning-info-item .tit{width: 95px; font-size: 18px; line-height: 59px; font-weight: 600; color: #111;}
.learning-info-item .download-btn{position: absolute; top: 0; right: 0; display: block; width: 59px; height: 59px; background-color: #bbb; -webkit-border-radius: 8px; border-radius: 8px;}
.learning-info-item .download-btn img{position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;}
.learning-info-item .btn-group{width: calc(100% - 95px);}
.learning-info-item .btn-group > div{margin: 0 -10px;}
.learning-info-item .btn-group button{position: relative; width: calc(33.33% - 20px); margin: 0 10px; height: 59px; float: left; border: 1px solid #ddd; -webkit-border-radius: 8px; border-radius: 8px; background-color: #fff; font-size: 16px; color: #111; letter-spacing: -0.25px; text-indent: 22px; text-align: left; -webkit-transition: all 0.2s; transition: all 0.2s;}
.learning-info-item .btn-group button:before{position: absolute; top: 50%; margin-top: -9.5px; right: 22px; content: ''; width: 26px; height: 19px; background: url("../images/icon/icon_btn.png") 0 0 no-repeat; -webkit-transition: all 0.2s; transition: all 0.2s;}
/* 영어 페이지 추가 css */
.english-page .learning-info-item .tit{width: 110px;}
.english-page .learning-info-item .btn-group{width: calc(100% - 110px);}

@media all and ( min-width: 801px ){
	.learning-info-item .btn-group button:nth-child(1):hover{border-color: #ffaa05; background-color: #ffaa05; color: #fff;}
	.learning-info-item .btn-group button:nth-child(2):hover{border-color: #7dc501; background-color: #7dc501; color: #fff;}
	.learning-info-item .btn-group button:nth-child(3):hover{border-color: #11bcbf; background-color: #11bcbf; color: #fff;}
	.learning-info-item .btn-group button:hover:before{background: url("../images/icon/icon_btn_wh.png") 0 0 no-repeat;}
}

/* ****************************************
 * Phonics Land :: 02 교재 미리보기
**************************************** */
.learning-con01.preview-con01{padding-bottom: 0;}
.learning-con01-item .preview-btn{position: relative; margin: 20px auto 0; display: block; width: 200px; padding: 9px 0; border: 1px solid rgba(17,17,17,0.7); -webkit-border-radius: 6px; border-radius: 6px; color: #111; -webkit-transition: all 0.3s; transition: all 0.3s;}
.learning-con01-item .preview-btn + .preview-btn{margin-top: 10px;}
.learning-con01-item .preview-btn:before{position: absolute; top: 50%; margin-top: -6px; left: 160px; display: block; content: ''; width: 1px; height: 12px; background-color: #b2b2b2; -webkit-transition: all 0.3s; transition: all 0.3s;}
.learning-con01-item .preview-btn span{padding-left: 14px; display: inline-block; font-size: 14px; line-height: 20px;}
.learning-con01-item .preview-btn i{position: absolute; top: 50%; margin-top: -7.5px; right: 10px; font-size: 15px; -webkit-transition: all 0.3s; transition: all 0.3s;}

@media all and ( min-width: 801px ){
	.learning-con01-item .preview-btn:hover{border-color: #ffaa05; background-color: #ffaa05; color: #fff;}
	.learning-con01-item .preview-btn:hover:before{background-color: #fff;}
	.learning-con01-item .preview-btn:hover i{color: #fff;}
	.learning-con01-item .preview-btn + .preview-btn:hover{border-color: #7dc501; background-color: #7dc501; color: #fff;}
	.learning-con01-item .preview-btn + .preview-btn:hover:before{background-color: #fff;}
	.learning-con01-item .preview-btn + .preview-btn:hover i{color: #fff;}
}

.preview-con02{padding-top: 110px;}
.preview-con02-item{margin-top: 50px; background-color: #11bcbf; padding: 50px 0; display: flex; flex-wrap: wrap; align-items: center; -webkit-border-radius: 15px; border-radius: 15px;}
.preview-con02 .preview-con02-item:first-child{margin-top: 0;}
.preview-con02 .preview-con02-item:nth-child(2){background-color: #ffad00;}
.preview-con02 .preview-con02-item:nth-child(3){background-color: #9bcf08;}
.preview-con02 .preview-con02-item:nth-child(4){background-color: #ef599d;}
.preview-con02-item .txt{width: 50%; padding-left: 7%; -webkit-box-sizing: border-box; box-sizing: border-box;}
.preview-con02-item .txt h5{font-size: 44px; line-height: 1.1; font-weight: 600; letter-spacing: -0.25px; color: #fff;}
.preview-con02-item .txt p{margin-top: 35px; font-size: 20px; line-height: 1.7; letter-spacing: -0.25px; color: #fff;}
.preview-con02-item .img{text-align: center; width: 50%; padding: 0 4.1% 0 15px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.preview-con02-item .img img{display: inline-block; max-width: 100%;}

.preview-con03{padding-top: 100px;}
.preview-con03-tit{margin-bottom: 40px; font-size: 40px; font-weight: 600; letter-spacing: -0.5px; color: #000; text-align: center;}
.preview-con03-item{margin-top: 65px;}
.preview-con03-tit + .preview-con03-item{margin-top: 0;}
.preview-con03-item:before{padding-top: 55px; display: block; content: ''; width: 100%; height: 5px; background: url("../images/content/line_bg.png") 0 top repeat-x;}
.preview-con03-item .img{margin-bottom: 45px; width: 1206px; text-align: center;}
.preview-con03-item .img img{display: inline-block;}
.tit-txt-con{padding: 25px 40px; font-size: 18px; line-height: 24px; color: rgba(17,17,17,0.9); background-color: #f5f5f5; -webkit-border-radius: 20px; border-radius: 20px;}
.tit-txt-con strong{margin-right: 35px; display: inline-block; font-size: 22px; font-weight: 600; color: #11bcbf;}
.preview-con03-item .sub-tit{font-size: 26px; line-height: 1.6; letter-spacing: -0.75px; font-weight: 600; color: #000;}
.dot-txt-con{margin-top: 15px; padding: 30px; background-color: #f5f5f5; -webkit-border-radius: 20px; border-radius: 20px;}
.dot-txt-con p{margin-top: 20px; position: relative; padding-left: 30px; font-size: 18px; line-height: 1.6; letter-spacing: -0.75px; color: #000;}
.dot-txt-con p:first-child{margin-top: 0;}
.dot-txt-con p:before{position: absolute; top: 4px; left: 0; display: block; content: ''; width: 20px; height: 18px; background: url("../images/icon/icon_dot_yellow.png") 0 0 no-repeat;}

/* ****************************************
 * English Town :: 02 교재 미리보기
**************************************** */
/* 공통탭에 작성 */

/* ****************************************
 * My Page :: 마이페이지
**************************************** */
.member-page{min-height: 700px;}
/* 공통 탭 */
#topMenu01{width:100%; margin-bottom: 65px;}
#topMenu01 .side-menu-inner{width:100%; height:60px;}
#topMenu01 .side-menu-inner ul{font-size: 0; text-align: center;}
#topMenu01 .side-menu-inner ul li{margin-left: 10px; display: inline-block; width: 200px; border: 1px solid #525252; background-color: #fff; -webkit-border-radius: 60px; border-radius: 60px; -webkit-transition: all 0.3s; transition: all 0.3s;}
#topMenu01 .side-menu-inner ul li:first-child{margin-left: 0;}
#topMenu01 .side-menu-inner ul li > a{
	display:table; position:relative;
	width:100%; height:60px; 
	font-size:18px; line-height:1.2; letter-spacing:-0.5px; color:#222; font-weight:400; word-break:keep-all;
	-webkit-transition:color 0.3s; transition:color 0.3s;
}
#topMenu01 .side-menu-inner ul li > a > span{display:table-cell; vertical-align:middle; padding:0 10px;}
#topMenu01 .side-menu-inner ul li:hover,
#topMenu01 .side-menu-inner ul li.on{background-color: #111; border-color: #111;}
#topMenu01 .side-menu-inner ul li:hover > a, 
#topMenu01 .side-menu-inner ul li.on > a{color:#fff;}
/* 공통 이름+인사말 */
.mypage-top-con{margin-bottom: 25px; padding: 26px 39px; font-size: 20px; line-height: 40px; letter-spacing: -0.5px; color: #222; border: 1px solid #ddd; -webkit-border-radius: 25px; border-radius: 25px;}
.mypage-top-con .classify{margin-right: 15px; display: inline-block; padding: 0 17px; height: 40px; background-color: #8572d1; -webkit-border-radius: 10px; border-radius: 10px; font-size: 18px; font-weight: 600; color: #fff;}
.mypage-top-con .classify.teacher{background-color: #8572d1;}
.mypage-top-con b{font-weight: 600;}
/* 시리얼 등록 목록 */
.mypage-bottom-con{padding-top: 40px;}
.mypage-bottom-tit{margin-bottom: 35px; font-size: 32px; font-weight: 600; letter-spacing: -0.5px; color: #222; text-align: center;}
.serial-list-tb{display: table; width: 100%;}
.serial-list-item{margin-bottom: 15px; padding: 18px 0 16px; font-size: 18px; line-height: 1.4; letter-spacing: -0.5px; color: #222; display: table; width: 100%; table-layout: fixed; background-color: #f7f7f7; border: 1px solid #e5e5e5; -webkit-border-radius: 15px; border-radius: 15px; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center;}
.serial-list-item.tit-item{background-color: #959595; border-color: #959595; color: #fff;}
.serial-list-item-inner{display: table-row;}
.serial-list-item-inner > div{display: table-cell; vertical-align: middle; padding: 0 5px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.serial-list-item-inner .item01{width: 38%;}
.serial-list-item-inner .item02{width: 13%;}
.serial-list-item-inner .item03{width: 24%;}
.serial-list-item-inner .item04{width: 25%;}

/* ****************************************
 * My Page :: 로그인 인트로
**************************************** */
ul.sub-join01-quick-list{padding-top: 50px; text-align: center;}
ul.sub-join01-quick-list li{display: inline-block; width: 274px; margin: 0 13px;}
ul.sub-join01-quick-list li a{display: block; position: relative; width: 100%; height: 0; padding-top: 100%; -webkit-border-radius: 10px; border-radius: 10px; overflow: hidden;}
ul.sub-join01-quick-list li a:before{position: absolute; left: 50%; margin-left: -188px; top: -246px; display: block; content: ''; width: 376px; height: 376px; -webkit-border-radius: 100%; border-radius: 100%; background-color: #fff; opacity: 0.1; -webkit-transition: all 0.3s; transition: all 0.3s;}
ul.sub-join01-quick-list li a .bg{position: absolute; bottom: 30px; left: 0; width: 100%; text-align: center; display: block; z-index: 1;}
ul.sub-join01-quick-list li a .bg img{max-width: 35px; display: inline-block; -webkit-transition: all 0.3s; transition: all 0.3s;}
ul.sub-join01-quick-list li a .img{position: absolute; top: 30px; left: 0; z-index: 1; display: block; width: 100%; text-align: center;}
ul.sub-join01-quick-list li a .img img{display: inline-block; max-width: 100%;}
ul.sub-join01-quick-list li:nth-child(1) a{background-color: #fdb419;}
ul.sub-join01-quick-list li:nth-child(2) a{background-color: #99c913;}
ul.sub-join01-quick-list li:nth-child(3) a{background-color: #28b9ce;}
ul.sub-join01-quick-list li:nth-child(4) a{background-color: #de59a0;}
ul.sub-join01-quick-list li a p{position: absolute; width: 100%; left: 0; bottom: 83px; font-size: 32px; font-weight: 600; letter-spacing: -0.25px; color: #fff; text-align: center;}
.sub-join01-txt{margin-top: 75px; font-size: 15px; letter-spacing: -0.5px; font-weight: 400; color: #000; text-align: center;}
.sub-join01-txt a.cm-move-link{display: inline-block; margin-left: 5px;}
/* join intro02 추가 css */
.join-intro02 ul.sub-join01-quick-list li a .bg{bottom: 40px;}
.join-intro02 ul.sub-join01-quick-list li a .join-tit{position: absolute; top: 35px; left: 15px; right: 15px; text-align: center; letter-spacing: -0.25px; color: #fff;}
.join-intro02 ul.sub-join01-quick-list li a .join-tit h1{font-size: 28px; line-height: 1.2;}
.join-intro02 ul.sub-join01-quick-list li a .join-tit h5{margin-top: 20px; font-size: 14px; line-height: 1.6; font-weight: 400;}

@media all and ( min-width: 801px ){
	ul.sub-join01-quick-list li a:hover:before{top: -50px;}
	ul.sub-join01-quick-list li a:hover .bg img{-webkit-transform: translateX(5px); transform: translateX(5px);}
}

/* ****************************************
 * 큐알코드 리스트
**************************************** */
.qr-wrap{position: relative; background-color: #ffcb05; display: table; table-layout: fixed; width: 100%; height: 100vh;}
.qr-list-page{display: table-cell; vertical-align: middle; /* min-height: calc(100vh - 40px);*/}
.qr-list-bg{width: calc(100% - 40px); margin: 20px; padding: 30px 25px; background-color: #fff; -webkit-border-radius: 15px; border-radius: 15px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.qr-list-tit{padding-bottom: 15px; font-size: 15px; line-height: 1.4; font-weight: 600; letter-spacing: -0.25px; color: #111;}
.qr-list-tb{display: table; width: 100%;}
.qr-list-item{position: relative; padding: 19px 0 13px; font-size: 13px; line-height: 1.4; letter-spacing: -0.25px; color: #111; text-align: left; display: block; width: 100%; /* table-layout: fixed; */}
.qr-list-item:before{position: absolute; top: 0; left: 0; display: block; content: ''; width: 100%; height: 5px; background: url("../images/content/line_bg.png") 0 top repeat-x;}
.qr-list-tb .qr-list-item:first-child:before{background: url("../images/content/line_bg_yellow.png") 0 top repeat-x;}
.qr-list-item-inner{display: block;}
.qr-list-item-inner > div{display: inline-block; vertical-align: middle;}
.qr-list-item-inner .item01{margin-bottom: 10px; display: block; width: 100%; font-size: 14px;/* width: calc(100% - 155px); padding-right: 10px; */}
.qr-list-item-inner .item02{width: 85px; width: 49%; color: rgba(17,17,17,0.8);}
.qr-list-item-inner .item03{width: 60px; width: 49%; color: rgba(17,17,17,0.8);}
.qr-list-item-inner span{margin-right: 6px; display: inline-block; vertical-align: middle; width: 26px; height: 26px;}
.qr-list-item-inner span.video{background: url("../images/icon/icon_video.png") center/cover no-repeat;}
.qr-list-item-inner span.audio{background: url("../images/icon/icon_audio.png") center/cover no-repeat;}

@media all and (max-width:359px){
	.qr-list-tit{font-size: 14px;}
	.qr-list-item{font-size: 12px;}
	.qr-list-item-inner .item01{font-size: 12px;}
}

/* ****************************************
 * 회원가입하기 추가 css
**************************************** */
.mTypeBox {margin-top: 50px; background:#fff; border:1px solid #ececec; color:#666; -webkit-border-radius: 15px; border-radius: 15px;}
.mTypeBox p.agreeTitle {font-size: 15px; background:#f1f1f1; padding:20px; color:#333; font-weight:600; -webkit-border-radius: 15px 15px 0 0; border-radius: 15px 15px 0 0;}
.mTypeBox span {display: block; padding: 20px; font-size: 14px; line-height: 1.6; color: #333;}
.add-form-tbl .agree-txt{padding: 5px 0;}
.join-form-tbl tr:not(.fieldset-tr) th, .join-form-tbl tr:not(.fieldset-tr) td{padding-top: 15px; padding-bottom: 15px;}
.join-form-tbl .fieldset-tr fieldset {padding: 5px 0;}
.join-form-tbl .fieldset-tr .custom-check-item{margin: 5px 0 3px;}
.join-form-tbl .fieldset-tr .custom-check-item label{line-height: 1.4;}
.join-form-tbl .fieldset-tr .custom-check-item label::before{top: -3px;}

@media all and (max-width:800px){
	.mTypeBox {margin-top: 25px; -webkit-border-radius: 15px; border-radius: 15px;}
	.mTypeBox p.agreeTitle {font-size: 13px; padding:15px; -webkit-border-radius: 15px 15px 0 0; border-radius: 15px 15px 0 0;}
	.mTypeBox span {padding: 15px; font-size: 12px;}
	.join-form-tbl tr:not(.fieldset-tr) th, .join-form-tbl tr:not(.fieldset-tr) td{padding-top: 10px; padding-bottom: 10px;}
}



/* 색상추가 */
.learning-con02-tit .cir-num.bgc-1{border-color: #23b0da; color: #23b0da;}
.learning-con02-tit .cir-num.bgc-2{border-color: #71bf44; color: #71bf44;}
.learning-con02-tit .cir-num.bgc-3{border-color: #f89c1c; color: #f89c1c;}
.learning-con02-tit .cir-num.bgc-4{border-color: #f05954; color: #f05954;}
.learning-con02-tit .cir-num.bgc-5{border-color: #7768ae; color: #7768ae;}
.learning-con02-tit .cir-num.bgc-6{border-color: #f75296; color: #f75296;}
/* // */
/* 색상추가 */
.learning-info-item .tit .font-color-1{color: #23b0da;}
.learning-info-item .tit .font-color-2{color: #71bf44;}
.learning-info-item .tit .font-color-3{color: #f89c1c;}
.learning-info-item .tit .font-color-4{color: #f05954;}
.learning-info-item .tit .font-color-5{color: #7768ae;}
.learning-info-item .tit .font-color-6{color: #f75296;}
/* // */