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


/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
@media all and (max-width:1220px){
	.custom-scrollbar-wrapper .scroll-object{max-width:100%;}
}
@media all and (max-width:800px){
	.custom-scrollbar-wrapper{position:relative;margin-right:-15px; cursor:move}
	.custom-scrollbar-wrapper .scroll-object{max-width:none; width:800px; }
	.custom-scrollbar-cover{display:block; position:absolute; top:0px; left:0px; right:0px; bottom:0px; background-color:rgba(0,0,0,0.5)}
	.custom-scrollbar-cover .scroll-cover-txt{position:absolute; top:50%; margin-top: -32.5px; left:0; width:100%; text-align:center; color:#fff; font-weight:300; font-size:15px;}
	.custom-scrollbar-cover .scroll-cover-txt i{font-size:30px; display:block; margin-bottom:20px; }
}

/* -------- 공통 :: 탭 -------- */
@media all and (max-width:1220px){
	.sub-tab-list-style .area{padding:0}
}
@media all and (max-width:1024px){
	/* Tab Fixed Move*/
	.sub-tab-list-style.top-fixed{top:80px;}
}
@media all and ( max-width: 800px ){
	/* Tab 공통 스타일 */
	.sub-tab-wrapper-style{margin-bottom: 25px;}
	.sub-tab-list-style ul{margin: 0 -5px;}
	.sub-tab-list-style ul li {float: left; width: calc(50% - 10px); margin: 0 5px;}
	.sub-tab-list-style ul li:first-child{margin-left: 5px;}
	.sub-tab-wrapper-style, .sub-tab-list-style ul, .sub-tab-list-style ul li a{height:40px;}
	.sub-tab-list-style ul li a em{font-size:13px}
	/* Tab Fixed Move*/
	/* Mobile Tab Drop Menu */
	.sub-drop-menu-style{position:relative; border:1px solid #333; background-color: #fff; -webkit-border-radius: 45px; border-radius: 45px; z-index: 98;  -webkit-transition: all 0.8s; transition: all 0.8s;}
	.sub-drop-open-btn-style{display:block; position:relative; padding:0 15px; height:40px; line-height:40px; font-size:14px; font-weight: 600; box-sizing:border-box; -webkit-border-radius: 45px; border-radius: 45px; text-align: center;}
	.sub-drop-open-btn-style:before {position: absolute; bottom: -3px; left: 30px; display: block; content: ''; width: calc(100% - 60px); height: 5px; -webkit-border-radius: 5px; border-radius: 5px; background-color: #333; opacity: 1; visibility: visible; -webkit-transition: all 0.3s; transition: all 0.3s; transition-delay: 0.3s; z-index: 12;}
	.store-page .sub-drop-open-btn-style {border-radius: 45px; height: 43px;}
	.store-page .sub-drop-open-btn-style {padding: 0 15px; border-radius: 43px; height: 43px; line-height: 43px;}
	.store-page .sub-drop-menu-style.open{height: auto; -webkit-border-radius: 25px; border-radius: 25px;}
	.sub-drop-open-btn-style span{color:#333; font-weight: 600;}
	.sub-drop-open-btn-style .arrow{color:#333; position:absolute; top:50%; right:15px; margin-top:-8.5px; font-size: 17px;}
	.sub-drop-menu-style.open .arrow{transform:rotate(180deg)}
	.sub-drop-menu-style ul{display:none; margin:0; height:auto; width: 100% !important;  z-index:11; box-sizing:border-box;     padding-bottom: 10px;}
	.store-page .sub-drop-menu-style ul{-webkit-border-radius: 25px; border-radius: 25px;}
	.sub-drop-menu-style ul li{position:static; display:block; float:none; width:auto; background-color:transparent}
	.sub-drop-menu-style ul li:first-child{padding-top: 10px;}
	.sub-drop-menu-style ul li a{display:block; width:auto; height:auto; padding: 7px 15px !important; text-align: center;}
	.sub-drop-menu-style ul li a em{font-size:13px; text-align: center;}
	.store-page .sub-tab-list-style ul li a em{text-align: center; font-size: 13px; line-height: 1.5; font-weight: 600; color: #666;}
	.sub-drop-menu-style ul li.selected a{background-color:transparent;}
	.sub-drop-menu-style ul li.selected a em{color:#f57f20; font-weight:600;}
}
@media all and (max-width:480px){
	/* Tab Fixed Move*/	
	.sub-tab-list-style.top-fixed{top:60px;}
}

/* ****************************************
 * 서브공통 
**************************************** */
@media all and ( max-width: 1720px ){
	#rightBar{display: none !important;}
	#widgetCon{position:fixed; bottom:15px; right:15px; z-index:9999; display:block;}
	.share-btn-wrapper2{position:relative; z-index:10; display:inline-block;}
	.share-btn-wrapper2 .share-list-dim{position:fixed; top:0px; left:0px; width:100%; height:100%; display:none; background-color:transparent;}
	.share-btn-wrapper2 i{font-size:24px; line-height:128px;}
	.share-btn-wrapper2 a{display:block; color:#fff; width:128px; height:128px; line-height:128px; text-align:center; -webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%; border-radius:50%}
	.share-btn-wrapper2 .share-open-btn{position:relative; z-index:1}
	.share-btn-wrapper2 .share-open-btn .widget-open-btn{display:block; width:100%; height:100%; background-color:#fec905; font-size:20px; font-weight:300; -webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%}
	.share-btn-wrapper2 .share-open-btn .widget-close-btn{position:absolute; top:0px; left:0px;display:none; width:100%; height:100%;border:1px solid #fff; -webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%}
	.share-btn-wrapper2 .share-open-btn .widget-close-btn img{width:100%; position:relative; top:-2px;}
	.share-btn-wrapper2 .share-sns-list{position:absolute; -webkit-transition:all 0.2s;-moz-transition:all 0.2s;-o-transition:all 0.2s;-ms-transition:all 0.2s;transition:all 0.2s; opacity:0;filter:Alpha(opacity=0); visibility:hidden;}
	.share-btn-wrapper2 .share-sns-list li{position:absolute;  -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s}
	.share-btn-wrapper2 .share-sns-list li img{width:128px}
	.share-btn-wrapper2 .share-sns-list li img.pc-img{display: block;}
	.share-btn-wrapper2 .share-sns-list li img.m-img{display: none;}
	.share-btn-wrapper2 .share-sns-list li .tit{display: none; position:absolute; right:65px; bottom:0px; line-height:128px; color:#fff; font-size:14px; font-weight:300; letter-spacing:-0.5px; white-space:nowrap;}
	.share-btn-wrapper2.open .share-list-dim{display:block;}
	.share-btn-wrapper2.open .share-sns-list{opacity:1.0;filter:Alpha(opacity=100); visibility:visible;}
	.share-btn-wrapper2.open .widget-open-btn{display:none;}
	.share-btn-wrapper2.open .widget-close-btn{display:block; background-color: rgba(0,0,0,0.8);}
	/* 윗쪽으로 뜨게 */
	.share-btn-wrapper2[data-row="top"] .share-sns-list{left:0; bottom:128px;}
	.share-btn-wrapper2[data-row="top"] .share-sns-list li{bottom:0;}
	.share-btn-wrapper2[data-row="top"].open .share-sns-list li:nth-child(1){bottom:5px;}
	.share-btn-wrapper2[data-row="top"].open .share-sns-list li:nth-child(2){bottom:140px;}
	.share-btn-wrapper2[data-row="top"].open .share-sns-list li:nth-child(3){bottom:275px;}
	.share-btn-wrapper2[data-row="top"].open .share-sns-list li:nth-child(4){bottom:410px;}
	.share-btn-wrapper2[data-row="top"].open .share-sns-list li:nth-child(5){bottom:545px;}
	.mobile-top-btn{display: block; position: fixed; bottom:155px; right:60px; z-index: 998;}
}
@media all and ( min-width: 1121px ) and ( max-height: 820px ){
	.share-btn-wrapper2 i{line-height:80px;}
	.share-btn-wrapper2 a{width:80px; height:80px; line-height:80px;}
	.share-btn-wrapper2 .share-sns-list li img{width:80px}
	.share-btn-wrapper2 .share-sns-list li .tit{line-height: 80px;}
	/* 윗쪽으로 뜨게 */
	.share-btn-wrapper2[data-row="top"] .share-sns-list{bottom:80px;}
	.share-btn-wrapper2[data-row="top"].open .share-sns-list li:nth-child(1){bottom:5px;}
	.share-btn-wrapper2[data-row="top"].open .share-sns-list li:nth-child(2){bottom:90px;}
	.share-btn-wrapper2[data-row="top"].open .share-sns-list li:nth-child(3){bottom:175px;}
	.share-btn-wrapper2[data-row="top"].open .share-sns-list li:nth-child(4){bottom:260px;}
	.share-btn-wrapper2[data-row="top"].open .share-sns-list li:nth-child(5){bottom:345px;}
	.mobile-top-btn{bottom:110px; right: 40px;}
}
@media all and ( max-width: 1120px ){
	.share-btn-wrapper2 i{line-height:80px;}
	.share-btn-wrapper2 a{width:80px; height:80px; line-height:80px;}
	.share-btn-wrapper2 .share-sns-list li img{width:80px}
	.share-btn-wrapper2 .share-sns-list li .tit{line-height: 80px;}
	/* 윗쪽으로 뜨게 */
	.share-btn-wrapper2[data-row="top"] .share-sns-list{bottom:80px;}
	.share-btn-wrapper2[data-row="top"].open .share-sns-list li:nth-child(1){bottom:5px;}
	.share-btn-wrapper2[data-row="top"].open .share-sns-list li:nth-child(2){bottom:90px;}
	.share-btn-wrapper2[data-row="top"].open .share-sns-list li:nth-child(3){bottom:175px;}
	.share-btn-wrapper2[data-row="top"].open .share-sns-list li:nth-child(4){bottom:260px;}
	.share-btn-wrapper2[data-row="top"].open .share-sns-list li:nth-child(5){bottom:345px;}
	.mobile-top-btn{bottom:110px; right: 40px;}
}
@media all and ( max-width: 800px ){
	.share-btn-wrapper2 a{width:55px; height:55px; line-height:55px;}
	.share-btn-wrapper2 i{line-height:55px;}
	.share-btn-wrapper2 .share-list-dim{background-color:rgba(0,0,0,0.8);}
	.share-btn-wrapper2 .share-sns-list li .tit{display: block; line-height: 55px;}
	.share-btn-wrapper2 .share-sns-list li img{width:55px}
	.share-btn-wrapper2 .share-sns-list li img.pc-img{display: none;}
	.share-btn-wrapper2 .share-sns-list li img.m-img{display: block;}
	.share-btn-wrapper2 .share-open-btn .widget-open-btn{font-size: 15px;}
	.share-btn-wrapper2.open .widget-close-btn{background-color: transparent;}
	/* 윗쪽으로 뜨게 */
	.share-btn-wrapper2[data-row="top"] .share-sns-list{left:0; bottom:55px;}
	.share-btn-wrapper2[data-row="top"] .share-sns-list li{bottom:0;}
	.share-btn-wrapper2[data-row="top"].open .share-sns-list li:nth-child(1){bottom:10px;}
	.share-btn-wrapper2[data-row="top"].open .share-sns-list li:nth-child(2){bottom:70px;}
	.share-btn-wrapper2[data-row="top"].open .share-sns-list li:nth-child(3){bottom:130px;}
	.share-btn-wrapper2[data-row="top"].open .share-sns-list li:nth-child(4){bottom:190px;}
	.share-btn-wrapper2[data-row="top"].open .share-sns-list li:nth-child(5){bottom:250px;}
	.mobile-top-btn{bottom:80px; right: 25px;}
	/* 서브페이지 영역  */
	.sub-page{margin-top: 0; padding-top: 32px; position: static; padding-bottom: 50px; margin-bottom: 25px; min-height:auto;}
	/* 교재 페이지들 제외한 영역 */
	.no-prd-page{position: static; top: 0;}
}

/* ****************************************
 * Phonics Land :: 공통 비주얼영역  
**************************************** */
@media all and (max-width:1260px){
	.sub-visual-phonics .visual-txt-con,
	.sub-visual-english .visual-txt-con{padding:0}
	.sub-visual-phonics .area,
	.sub-visual-english .area{padding:0;}
	#topMenu03{margin-left: 15px; margin-right: 15px; width: calc(100%  - 30px);}
	/* 꾸밈이미지 */
	.phonics-visual-img01{margin-left: -398px; height: 270px;}
	.phonics-visual-img02{right: 50%; margin-right: -450px; height: 260px;}
	.english-visual-img01{margin-left: -494px; height: 236px;}
	.english-visual-img02{margin-left: -308px; height: 36px;}
	.english-visual-img03{margin-right: -560px; height: 300px;}
}
@media all and (max-width:1024px){
	.sub-visual-phonics .visual-tit img{height: 180px;}
	/* 꾸밈이미지 */
	.phonics-visual-img01{margin-left: -330px; height: 230px;}
	.phonics-visual-img02{margin-right: -380px; height: 220px;}
	.english-visual-img01{margin-left: -454px; height: 190px;}
	.english-visual-img02{margin-left: -268px; height: 36px;}
	.english-visual-img03{margin-right: -520px; height: 240px;}
}
@media all and (max-width:800px){
	.sub-visual-phonics, .sub-visual-english{height: 230px; padding-bottom: 0;}
	.sub-visual-phonics .visual-sub-txt,
	.sub-visual-english .visual-sub-txt{padding-top:20px; font-size:12px;}
	.sub-visual-phonics .visual-tit img{height: 89px;}
	.sub-visual-english .visual-tit img{height: 90px;}
	/* 꾸밈이미지 */
	.phonics-visual-img01{top: 30px; margin-left: -155px; height: 108px;}
	.phonics-visual-img02{top: 30px; margin-right: -180px; height: 100px;}
	.english-visual-img01{top: 55px; margin-left: -250px; height: 120px;}
	.english-visual-img02{top: 15px; margin-left: -150px; height: 20px;}
	.english-visual-img03{bottom: 13px; margin-right: -290px; height: 150px;}
}
@media all and (max-width:640px){
	.sub-visual-english .visual-tit img{height: 70px;}
	.english-visual-img01{top: 40px; margin-left: -210px; height: 100px;}
	.english-visual-img02{top: 25px; margin-left: -112px; height: 15px;}
	.english-visual-img03{bottom: auto; top: 40px; margin-right: -210px; height: 100px;}
}
@media all and (max-width:480px){
	.english-visual-img01{margin-left: -180px; height: 80px;}
	.english-visual-img03{margin-right: -185px; height: 80px;}
}

/* ****************************************
 * Phonics Land :: 03 온라인학습
**************************************** */
@media all and ( max-width: 1790px ){
	.learning-con01-list .slick-prev{left: -60px;}
	.learning-con01-list .slick-next{right: -60px;}
}
@media all and ( max-width: 1360px ){
	.learning-con01{padding-left: 60px; padding-right: 60px;}
}
@media all and ( max-width: 1260px ){
	.learning-con01{padding-left: 60px; padding-right: 60px;}
	.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: -40px;}
	.learning-con01-list .slick-next{right: -40px;}
}
@media all and ( max-width: 800px ){
	.learning-con01, .english-page .learning-con01{padding-left: 50px; padding-right: 50px; padding-bottom: 25px;}
	.learning-con01-list{margin: 0 -10px;}
	.learning-con01-item{width: calc(20% - 20px); margin: 0 10px;}
	.learning-con01-list .slick-arrow{margin-top: -35px;}
	.learning-con01-list .slick-arrow img{height: 35px;}
	.learning-con01-item .img.buy:before{top: 6%; left: 4.8%; width: 39px; height: 40px; background: url("../images/content/icon_buy_finish.png") center/cover no-repeat;}
	.learning-con01-item .tit{margin-top: 12px; font-size: 17px;}
	.learning-con01-item .btn{margin: 10px auto 0; width: 115px; height: 32px; -webkit-border-radius: 6px; border-radius: 6px;}
	.learning-con01-item .btn:before{margin-top: -5px; left: 87px; height: 10px;}
	.learning-con01-item .btn span{padding-left: 11px; font-size: 11px; line-height: 32px;}
	.learning-con01-item .btn i{margin-top: -5px; right: 8px; font-size: 11px;}
}
@media all and ( max-width: 640px ){
	.learning-con01, .english-page .learning-con01{padding-left: 50px; padding-right: 50px;}
	.learning-con01-item .btn{width: 105px;}
	.learning-con01-item .btn:before{left: 82px;}
	.learning-con01-item .btn span{padding-left: 8px;}
	.learning-con01-item .btn i{right: 7px;}
}

@media all and ( max-width: 1260px ){
	/* info */
	.learning-con02-info .thum{width: calc(100% - 840px);}
}
@media all and ( max-width: 1220px ){
	.learning-con02-info .thum{width: 240px; float: none; margin: 0 auto;}
	.learning-con02-info .info{float: none; margin: 30px auto 0;}
}
@media all and ( max-width: 1120px ){
	.learning-con02-item {padding: 30px 40px 45px;}
	.learning-con02-add{position: static; text-align: center; margin-bottom: 30px;}
	.learning-con02-add .txt-group{display: block;}
	.learning-con02-add .txt-group + .txt-group{margin-left: 0;}
}
@media all and ( max-width: 1024px ){
	.learning-info-item .btn-group button .m-br {display: none;}
}
@media all and ( max-width: 920px ){
	.learning-con02-info .thum{width: 240px;}
	.learning-con02-info .info{width: 100%;}
	.learning-info-item{margin-top: 25px; padding-right: 0;}
	.learning-info-item .tit{float: none; line-height: 59px;}
	.learning-info-item .btn-group{margin-top: 12px; width: 100%;}
	.learning-info-item .btn-group > div{margin: 0 -16px;}
	.learning-info-item .btn-group button{width: calc(33.33% - 16px); margin: 0 8px;}
	/* 영어 페이지 추가 css */
	.english-page .learning-info-item .btn-group{width: 100%;}
}
@media all and ( max-width: 800px ){
	.learning-con02:before{padding-top: 30px;}
	/* 하단 리스트 */
	.learning-con02-item{margin-top: 30px; padding: 17px 30px 25px;}
	.learning-con02-tit h5{font-size: 22px;}
	.learning-con02-tit .cir-num{margin-left: 7px; width: 35px; height: 35px; font-size: 17px; line-height: 35px; border: 5px solid #23b0da;}
	.learning-con02-tit img{position: relative; top: -2px; margin-left: 10px; height: 38px;}
	.learning-con02-tit:after{padding-top: 13px;}

	/* info */
	.learning-con02-info{margin-top: 15px;}
	.learning-con02-add{text-align: left; margin-bottom: 20px;}
	/* 시리얼 번호 등록전 */
	.learning-con02-add .input-tit{margin-right: 0; display: block; font-size: 18px; line-height: 40px;}
	.learning-con02-add .input-box{display: block; padding-left: 15px; padding-right: 60px; width: 100%; height: 40px; -webkit-border-radius: 10px; border-radius: 10px;}
	.learning-con02-add .input-box input{font-size: 12px;}
	.learning-con02-add .input-box button{margin-top: -15px; right: 10px; font-size: 13px; width: 40px; height: 30px; -webkit-border-radius: 5px; border-radius: 5px;}
	/* 시리얼 번호 등록완료 */
	.learning-con02-add .txt-group + .txt-group{margin-top: 5px;}
	.learning-con02-add .tit, .learning-con02-add .date, .learning-con02-add .number{display: block; font-size: 13px; line-height: 1;}
	.learning-con02-add .tit{margin-right: 0; font-size: 18px; line-height: 30px;}
	.learning-con02-add .date{line-height: 40px;}
	.learning-con02-add .number{width: 160px; height: 40px; -webkit-border-radius: 10px; border-radius: 10px; line-height: 38px;}
	/* 왼쪽 썸네일 */
	.learning-con02-info .thum{width: 100%;}
	.learning-con02-info .thum .btn{display: none;}
	/* 오른쪽 정보 */
	.learning-con02-info .info{margin: 20px auto 0;}
	.learning-info-item{margin-top: 11px;}
	.learning-info-item .tit{width: 100%; font-size: 18px; line-height: 38px;}
	.learning-info-item .download-btn{width: 38px; height: 38px; -webkit-border-radius: 8px; border-radius: 8px;}
	.learning-info-item .download-btn img{height: 14px;}
	.learning-info-item .btn-group{margin-top: 8px;}
	.learning-info-item .btn-group > div{margin: 0 -10px;}
	.learning-info-item .btn-group button{font-size: 12px; line-height: 1.25; width: calc(33.33% - 10px); margin: 0 5px; height: 45px; -webkit-border-radius: 8px; border-radius: 8px;}
	.learning-info-item .btn-group button{text-indent: 0; text-align: center;}
	.learning-info-item .btn-group button .m-br {display: block;}
	.learning-info-item .btn-group button:before{display: none;}
	/* 영어 페이지 추가 css */
	.english-page .learning-info-item .tit{width: 100%;}
}

/* ****************************************
 * Phonics Land :: 02 교재 미리보기
**************************************** */
@media all and ( max-width: 1260px ){
	.learning-con01-item .preview-btn{width: 155px; padding: 5px 0;}
	.learning-con01-item .preview-btn:before{left: 115px;}
	.learning-con01-item .preview-btn .m-br{display: block;}
}
@media all and ( max-width: 800px ){
	.learning-con01-item .preview-btn{margin: 10px auto 0; width: 115px; -webkit-border-radius: 6px; border-radius: 6px;}
	.learning-con01-item .preview-btn:before{margin-top: -5px; left: 87px; height: 10px;}
	.learning-con01-item .preview-btn span{padding-left: 11px; font-size: 11px; line-height: 16px;}
	.learning-con01-item .preview-btn i{margin-top: -5px; right: 8px; font-size: 11px;}
}
@media all and ( max-width: 640px ){
	.learning-con01-item .preview-btn{width: 100px;}
}

@media all and ( max-width: 1260px ){
	.preview-con03-item .img{width: 100%;}
}
@media all and ( max-width: 1024px ){
	.tit-txt-con strong{display: block; margin-bottom: 5px; margin-right: 0;}
}
@media all and ( max-width: 800px ){
	.preview-con02{padding-top: 40px;}
	.preview-con02-item{margin-top: 25px; padding: 25px 0; -webkit-border-radius: 15px; border-radius: 15px;}
	.preview-con02-item .txt{width: 100%; padding-left: 0; padding: 0 15px;}
	.preview-con02-item .txt h5{font-size: 27px;}
	.preview-con02-item .txt p{margin-top: 15px; font-size: 15px;}
	.preview-con02-item .img{margin-top: 25px; width: 100%; padding: 0;}
	.preview-con02-item .img img{max-width: 50%;}
	.preview-con02 .preview-con02-item:first-child .img img{max-width: 80%;}
	
	.preview-con03{padding-top: 50px;}
	.preview-con03-tit{margin-bottom: 20px; font-size: 25px;}
	.preview-con03-item{margin-top: 30px;}
	.preview-con03-item:before{padding-top: 30px;}
	.preview-con03-item .img{margin-bottom: 25px;}
	.preview-con03-item .img img{max-width: 50%;}
	.preview-con03-item .img.scroll{padding-right: 15px; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden;}
	.preview-con03-item .img.scroll img{max-width: none;}
	.tit-txt-con{padding: 15px 20px; font-size: 14px; line-height: 20px; -webkit-border-radius: 10px; border-radius: 10px;}
	.tit-txt-con strong{font-size: 16px;}
	.preview-con03-item .sub-tit{font-size: 18px;}
	.dot-txt-con{margin-top: 10px; padding: 15px; -webkit-border-radius: 10px; border-radius: 10px;}
	.dot-txt-con p{margin-top: 15px; padding-left: 25px; font-size: 14px;}
	.dot-txt-con p:before{top: 3px; width: 16px; height: 14px; background: url("../images/icon/icon_dot_yellow.png") center/cover no-repeat;}
}
@media all and ( max-width: 480px ){
	.preview-con03-item .img img{max-width: 70%;}
}

/* ****************************************
 * My Page :: 마이페이지
**************************************** */
@media all and ( max-width: 800px ){
	.member-page{min-height: auto;}
	/* 공통 이름+인사말 */
	.mypage-top-con{margin-bottom: 15px; padding: 13px 20px; font-size: 15px; line-height: 30px; -webkit-border-radius: 15px; border-radius: 15px;}
	.mypage-top-con .classify{margin-right: 10px; padding: 0 12px; height: 30px; -webkit-border-radius: 8px; border-radius: 8px; font-size: 14px;}
	/* 시리얼 등록 목록 */
	.mypage-bottom-con{padding-top: 20px;}
	.mypage-bottom-tit{margin-bottom: 20px; font-size: 21px;}
	.serial-list-tb{display: table; width: 100%;}
	.serial-list-item{margin-bottom: 10px; padding: 9px 0 8px; font-size: 14px; -webkit-border-radius: 15px; border-radius: 15px;}
	.serial-list-item-inner .item01{width: 31%;}
	.serial-list-item-inner .item02{width: 20%;}
}

/* ****************************************
 * My Page :: 로그인 인트로
**************************************** */
@media all and ( max-width: 1024px ){
	ul.sub-join01-quick-list li{width: calc(30% - 26px);}
	ul.sub-join01-quick-list li a p{font-size: 28px;}
}
@media all and ( max-width: 980px ){
	/* join intro02 추가 css */
	ul.sub-join01-quick-list li{width: calc(35% - 26px);}
}
@media all and ( max-width: 920px ){
	ul.sub-join01-quick-list li a .bg img{max-width: 30px;}
	ul.sub-join01-quick-list li a .img img{height: 60px;}
	ul.sub-join01-quick-list li a p{bottom: 75px; font-size: 25px;}
	/* join intro02 추가 css */
	ul.sub-join01-quick-list li{width: calc(38% - 26px);}
}
@media all and ( max-width: 800px ){
	ul.sub-join01-quick-list{padding-top: 0; margin: 0 -7px;}
	ul.sub-join01-quick-list li{display: block; float: left; width: calc(33.33% - 14px); margin: 0 7px;}
	ul.sub-join01-quick-list li a .bg{bottom: 20px;}
	ul.sub-join01-quick-list li a .bg img{max-width: 30px;}
	ul.sub-join01-quick-list li a .img{top: 30px;}
	ul.sub-join01-quick-list li a .img img{height: 50px;}
	ul.sub-join01-quick-list li a p{bottom: 65px; font-size: 21px;}
	.sub-join01-txt{margin-top: 75px; font-size: 13px;}
	.sub-join01-txt a.cm-move-link{margin-left: 5px;}
	/* join intro02 추가 css */
	.join-intro02 ul.sub-join01-quick-list li{width: calc(50% - 14px);}
	.join-intro02 ul.sub-join01-quick-list li a .bg{bottom: 40px;}
	.join-intro02 ul.sub-join01-quick-list li a .join-tit{top: 45px;}
	.join-intro02 ul.sub-join01-quick-list li a .join-tit h1{font-size: 20px;}
	.join-intro02 ul.sub-join01-quick-list li a .join-tit h5{margin-top: 15px; font-size: 12px;}
}
@media all and ( max-width: 640px ){
	ul.sub-join01-quick-list{margin: 0;}
	ul.sub-join01-quick-list li{display: block; width: 100%; margin: 0; margin-bottom: 15px;}
	ul.sub-join01-quick-list li a{width: 100%; height: 140px; padding-top: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
	ul.sub-join01-quick-list li a:before{margin-left: -370px; top: -600px; width: 740px; height: 740px;}
	ul.sub-join01-quick-list li a .img,
	ul.sub-join01-quick-list li a .bg,
	ul.sub-join01-quick-list li a p{width: auto; display: inline-block; vertical-align: middle; position: static;}
	ul.sub-join01-quick-list li a .img{width: 90px; text-align: left;}
	ul.sub-join01-quick-list li a p{width: 100px; text-align: left;}
	/* join intro02 추가 css */
	.join-intro02 ul.sub-join01-quick-list li{width: 100%;}
	.join-intro02 ul.sub-join01-quick-list li a .bg{bottom: 25px;}
	.join-intro02 ul.sub-join01-quick-list li a .join-tit{top: 30px;}
}