@charset "utf-8";

@media all and (max-width: 1180px){
	.about{padding:120px 0 75px}
	.about .title{float: none;margin: 0 auto;text-align: center;}
	.about .links{float: none;margin: 0 auto;}
}

@media all and (max-width: 1024px){
	.main .switch .text{font-size: 30px;}
	.main .program .item{width: 255px;padding: 39px 0 0 110px;}
	.main .program .item p{font-size: 16px;}
}

@media all and (max-width:800px){

/* 공통 구조
**********************************************/
.only_pc { display: none;}
.only_mobile { display: block;margin-left: 20px;}
body.noscroll { overflow: hidden;}
/* Global */
.area { padding: 0 20px;}
/* GNB */
.header { position: absolute; left: 0; top: 0px; padding: 16px 0;background:#1e5df8;}
.header.index{top: 16px;padding:0;background: transparent;}
.header.active { position: absolute; top: inherit; background: transparent;}
.mobile_menu { position: relative; width: 30px; height: 19px; outline: none;}
.mobile_menu span { display: block; position: absolute; left: 0; width: 100%; height: 3px; background-color: #fff; border-radius: 2px; transition: all .3s .4s ease;}
.mobile_menu .t { top: 0;}
.mobile_menu .o { top: 8px;}
.mobile_menu .p { bottom: 0;}
.mobile_menu.active { animation: mobileMenu .5s .2s ease forwards;}
@keyframes mobileMenu {
  0% {
    opacity: 0;
  }
  100% {
    z-index: 101;
    opacity: 1;
  }
}
.mobile_menu.active .t { top: 8px; transform:rotate(-45deg);}
.mobile_menu.active .o { opacity: 0;}
.mobile_menu.active .p { bottom: 8px; transform:rotate(225deg);}
.header .gnb { position: fixed; left: -100%; top: 0; z-index: 100; width: 100%; height: 100%; padding-top: 85px; background-color: #2e333f; transition: all .3s ease;}
.header .gnb li { float: inherit; margin-bottom: 20px; text-align: center;}
.header .gnb li a { display: inline-block;}
.header h1 a { padding-top: 0;}
.header h1 a img { width: 105px;}
.header .nav { padding-top: 4px;}
.header .gnb.active { display: block; left: 0; }

.logo_header{height: 61px;}

/* 푸터 */
.footer { padding: 25px 0;}
.footer .apps { position: inherit; right: inherit; top: inherit; padding-left: 0;}
.footer .links a { font-size: 12px;}
.footer .question { margin-top: 20px; font-size: 14px;}
.footer .adress-group { margin-top: 24px;}
.footer .adress-group p { font-size: 11px;}
.footer .apps a { height: 37px; padding-top:11px;}






/* 공통 STYLE
**********************************************/
/* 공통 텍스트 */
.text_sub { font-size: 12px;}
.text-group ul { text-align: center;}
.text-group ul li { display: inline-block; float: inherit; padding:0 5px; vertical-align: top;}
.text-group ul li figure img { width: 75px; height:auto;}
h3.title { font-size: 33px;}
.text-group { margin-top: 15px;}
.text-group ul li figcaption { margin-top: 0;}









/* Split
**********************************************/
i.split { background-position:0 -100px; background-size: 100px 200px;}
i.program1 { width:52px; height:43px;}
i.program2 { width:53px; height:52px;}
i.program3 { width:38px; height:52px;}
i.program4 { width:47px; height:46px;}
i.comm_width_height { width:45px; height:45px;}









/* 레이어
**********************************************/
.layer .body { left: inherit; top: inherit; width: 100%; height: 100%; margin: 0; padding: 145px 10px 20px;}
.layer h3 { font-size: 33px;}
.layer h3.action .mark i { height: 17px;}
.layer h4 { font-size: 17px;}
.layer .text-group { position: absolute; left: 0; top: 47px; width: 100%;} 
.layer .list-group { height: 100%; margin-top: 0;}
.layer .list-group >ul { overflow-x: hidden; overflow-y: scroll; height: 100%; margin-left: 0; padding: 0 65px;}
.layer .list-group >ul >li { width: 100%; margin: 30px 0 0;}
.layer .list-group >ul >li:first-child { margin-top: 0;}
.layer .list-group >ul >li ul li { padding: 4px 0; font-size: 13px;}
.layer .list-group .color_blue { font-size: 12px;}
.layer .list-group .line { padding-bottom: 10px;}
.layer .list-group >ul >li ul li.height_1,
.layer .list-group >ul >li ul li.height_2,
.layer .list-group >ul >li ul li.height_3,
.layer .list-group >ul >li ul li.height_4 { height: inherit;}
.layer .layer_close img { width: 35px; height: auto;}
#layer_youtube .body { height: auto; padding-top: 70px;}






/* 메인
**********************************************/
.main { /*height: 465px;*/ padding: 10px 0 0;}
.main .box-container { margin-top: 0; padding: 0;}
.main .icons { padding: 10px 15px; border-radius:17px 17px 0 0;}
.main .icons span { width: 6px; height: 6px; margin: 0 3px;}
.main .box { height: inherit; border-radius:17px;}
.main .box-group{padding:0 20px;}
.main .switch { float: inherit; padding: 20px 0; text-align: center;}
.main .switch >p:first-child img { width: 100px; margin: 0 auto; vertical-align: top;}
.main .switch .text { padding-left: 0; font-size: 20px; line-height: 1.2;}
.main .switch .text.first { margin-top: -15px;}
.main .switch .text strong i { height: 10px;}
.apps { margin-top: 15px; padding-left: 0;}
.apps a { display: inline-block; float: inherit; width: 120px; height: 45px; margin:0 4px; padding-top:14px; box-shadow:0 6px 12px rgba(0, 0, 0, .1);}
.apps a img { height: 15px;}
.main .program { float: inherit; width: 100%; padding: 2px 0px 20px;}
.main .program h2 { font-size: 13px; text-align: center;}
.main .program .clearfix { margin-left: -10px;}
.main .program .item { float: left; width: calc(50% - 10px); margin-left: 10px; padding: 10px 0; text-align: center;}
.main .program .item p { margin-top: 7px; font-size: 14px;}
.main .program .item i { position: inherit; margin: 0 auto;}
.main .program .item.i1 { padding-top: 15px;}
.main .program .item.i1 p { margin-top: 9px;}
.main .program .item.i1 i { top: inherit; left: inherit;}
.main .program .item.i2 i { top: inherit; left: inherit;}
.main .program .item.i3 i { top: inherit; left: inherit;}
.main .program .item.i4 { padding-top: 13px;}
.main .program .item.i4 i { top: inherit; left: inherit;}
.main .program .item.i4 p { margin-top: 11px;}
.main .bg_left img { width: 270px; height: auto;}
.main .bg_right img { width: 279px; height: auto;}
.main .blet { display: inline-block;}
.main .mark i { height: 10px;}

section.height_fix{margin-top:0;padding-top:0;}

.about { padding: 120px 0 40px;}
.about .title { float: inherit; width: 100%; text-align: center;}
.about .links { float: inherit; width: 100%; padding-top: 20px;}
.about .links ul { padding-bottom: 20px;}
.about .links li { display: block; margin: 0; padding: 0 15px 6px; text-align: center;}
.about .links li a { padding: 12px 0; font-size: 12px;}
.about h2 { font-size: 15px;}
.about .title p { margin-top: 20px; font-size: 18px; line-height: 30px;}
.about .links li:nth-child(3), .about .links li:nth-child(4) { margin-top: 0;}

.service { padding: 60px 0; text-align: center;}
.service h2 { font-size: 15px;}
.service .float-group .left { float: inherit;}
.service .float-group .right { float: inherit; width: inherit;}
.service .mobile_img { margin-top: 35px;}
.service .mobile_img img { width: 156px; height: auto;}
.service .accept { padding-top: 4px;}
.service .btn_mpay{margin:24px auto 0;}

.lecture { padding: 40px 0; text-align: center;}
.lecture .float-group .left { float: inherit; padding-left: 0;}
.lecture .float-group .right { float: inherit; padding-right: 0;}
.lecture .mobile_img { margin-top: 35px;}
.lecture .mobile_img img { width: 171px; height: auto;}

.attendance { padding: 40px 0; text-align: center;}
.attendance .float-group .left { float: inherit; padding-left: 0;}
.attendance .float-group .right { float: inherit; width: inherit;}
.attendance .mobile_img { margin-top: 35px;}
.attendance .mobile_img img { width: 165px; height: auto;}
.attendance .btns a { margin-right: 10px;}
.attendance .btns a span { width: 40px; height: 40px;}
.attendance .btns a.google span { padding-top: 10px;}
.attendance .btns a.manual span { background-position: 12px 12px;}
.attendance .btns a.manual:hover span { background-position: 12px -52px;}

.sms { padding: 40px 0; text-align: center;}
.sms .float-group .left { float: inherit; width: inherit; padding-left: 0;}
.sms .float-group .right { float: inherit; padding-right: 0;}
.sms .mobile_img { margin-top: 35px;}
.sms .mobile_img img { width: 128px; height: auto;}
.sms .plus { padding-left: 20%; text-align-last: left;}
.sms table td { font-size: 13px;}

.price {text-align: center;}
.price .price_wrap{padding: 55px 0 0;}
.price .price-group { margin-top: 35px;}
.price .price-group >ul >li { width: 100%; margin: 0 0 30px;}
.price .price-group >ul >li .box-group { height:inherit; padding: 30px 20px 80px 20px;}
.price .price-group >ul >li .box-group a { padding:10px 0; font-size:15px; border-radius:23px;}
.price .price-group .data_list { margin-top: 32px;}
.price .price-group .data_list ul li { text-align-last: left;}
.price .price-group .data_list dt { text-align-last: left;}
.price .sub { margin-top: 10px; font-size: 18px;}
.price .mobile_table { margin-top: 30px; border-top: 1px solid rgba(255,255,255,0.5);}
.price .mobile_table tr:first-child td { padding-top: 20px;}
.price .mobile_table td { padding: 4px 0; font-weight: 400; color: #fff; text-align: left;}
.price .config { position:inherit; right:inherit; top:inherit; width: 200px; margin:15px auto 0; padding:8px 0; font-size:15px; border-radius:21px;}



/* 무료체험 신청
**********************************************/
.exp_header { padding: 20px 0;}
.exp_header img { width: 110px; height: auto;vertical-align: middle;}
.exp_header .logoutBtn{padding-left: 22px;width: 92px;height: 42px;margin-top: -21px;}
.exp_header .logoutBtn::before{left: 10px;}
.exp_con { width: 100%; padding: 40px 20px;}
.exp_con .product { font-size: 32px;}
.exp_con h2 { font-size: 32px;}
.exp_con .action .mark i { height: 13px;}
.exp_con .btns a.round { margin-top: 10px;}
.exp_con .bold { font-size: 18px;}
.exp_con .exp_list li.space { padding-right: 90px;}
.exp_con .exp_list li .exp_search { width: 80px; font-size: 14px;}
.exp_con .exp_list li .box.auth { margin-right: -90px;}
.exp_con .check input { width: 22px; height: 22px; margin-right: 5px;}
.exp_con .exp_list li .box >div label { margin-right: 30px; margin-bottom: 8px;}
.exp_con .exp_list li .box >div label:last-child{margin-bottom: 0;}
.exp_con .exp_list li .box .w_shot { width: 60px;}

.file_input_area{flex-direction: column;}
.file_input_area .file_input_btn{text-align: center;}
.file_input_area .file_list_wrap{padding-top: 24px; padding-left: 0;}






/* 교육 영상
**********************************************/
.edu { padding: 60px 0;}
.edu h2 { font-size: 15px; text-align: center;}
.edu .part { margin-top: 15px;}
.edu .part p { font-size:18px; text-align: center; line-height: 30px;}
.edu .part a { position: inherit; right: inherit; top:inherit; width:148px; height:44px; margin:12px auto 0; padding-top:11px; font-size:14px; border-radius:22px;}
.edu .part a img { width:17px;}
.edu .youtube_box { margin-top:30px; padding: 0;}
.edu .youtube_list li a { padding:30px 0 30px 120px;}
.edu .youtube_list li a img { width:90px;}
.edu .youtube_list li a i { display: none;}
.edu .youtube_list li a .title { font-size: 14px;}
.edu .youtube_list li a .subtitle { font-weight: normal;}




/* M 라이브
**********************************************/
.mlive_content{padding-top:61px;background: url(/land/images/mlive_wave_top_bg.png) no-repeat top 58px center;}
.location_wrap{display:none;}
.mlive_introduce_content{display: block;padding: 40px 0 64px;background-size: contain;overflow: hidden;}
.mlive_introduce_content.wave_bg{background-position-x: -120px;}
.mlive_introduce_content .mlive_logo{width:100%;margin-bottom:32px;padding-right:0;}
.mlive_introduce_content .mlive_logo i{float:none;width:151px;height:83px;margin: 0 auto;background: url(/land/images/mlive_logo_mobile_2x.png) no-repeat center;background-size:100%;}
.mlive_introduce_text{width: 100%;margin: 0 auto;padding:0 23px;}
.mlive_introduce_text .text {margin: 4px 0 28px;}
.mlive_introduce_text .text p{display:inline;font-size: 22px;line-height: 120%;}
.mlive_introduce_text .text p:first-child::after{display:inline;content:'.';}

.mlive_content section .title h3{}
.mlive_characteristic_list{display:block;padding: 16px 0 0;}
.mlive_characteristic_list > li{width:100%;margin-bottom:40px;padding:0;}
.mlive_characteristic_list > li:nth-child(1), .mlive_characteristic_list > li:nth-child(2), .mlive_characteristic_list > li:nth-child(3){padding:0;}
.mlive_characteristic_list > li:last-child{margin-bottom:0;}
.mlive_characteristic_list > li i.icon{display: block;margin:0 auto;}
.mlive_characteristic_list > li strong{text-align: center;}
.circle_list li{margin-bottom: 4px;padding-left: 16px;}
.circle_list li i{color: rgba(0, 0, 0, 0.78);}
.circle_list li p{display:inline;}

.mlive_ui .ui_slide{display:block;}
.mlive_ui .ui_slide .ui_service{width:100%;margin:10px auto 24px;padding-top:0px;}
.mlive_ui .ui_slide .ui_service h4{margin-bottom:20px;}
.mlive_ui .ui_slide .ui_service .ui_service_text{display:flex;justify-content: space-between;}
.mlive_ui .ui_slide .ui_service .ui_service_text > li{width: 48%;}
.mlive_ui .ui_slide .ui_service .ui_service_text > li:nth-child(1), .mlive_ui .ui_slide .ui_service .ui_service_text > li:nth-child(2){margin-top:0;}
.mlive_ui .ui_slide .ui_service .ui_service_text .text p{display:inline;line-height: 120%;}
.mlive_ui_slide .swiper-control{bottom:60px;}

.mlive_strength{padding-bottom:46px;}
.mlive_strength .contents{border-top: 1px solid #ddd;}
.mlive_strength_list li{width:100%;margin-bottom:10px;padding-left:0;}
.mlive_strength_list li:last-child{margin-bottom:0px;}
.mlive_strength_list{margin-left:0;padding-top:16px}
.mlive_strength_list li .box{padding:24px;}
.mlive_strength_list li i.icon{top: 24px;left: 24px;}
.mlive_strength_list li .text{padding-left:76px;}
.mlive_strength_list li .text p span{display:inline;}

.mlive_banner{background: #4390fa;}
.mlive_banner .area{padding-right:0;}
.mlive_banner .contents{height: 140px;background:url("/land/images/mlive_wave_banner_bg_mobile_2x.png") no-repeat right bottom;background-size: contain;}
.mlive_banner .text{padding-top:26px;}
.mlive_banner .text strong{font-size:24px;line-height: 120%;}
.mlive_banner .text strong span{display:block;}
.mlive_banner .text strong em{color:#fff;}
.mlive_banner .text > span{margin-top: 20px;}

.wave_wrap{bottom:-6px;}
.wave_wrap svg{width:800px;}

.mlive_edu{background: #315CEF;}
.mlive_edu .area{padding-bottom:75px;background: url(../images/mlive_edu_mobile_bg_2x.png) no-repeat right bottom;background-size:288px 80px;}
.mlive_edu .video_wrap{padding:20px 0 0;}
.mlive_edu .mlive_subscription p{margin-top:22px;}


/* modal */
.modal_wrap .modal_content {width: 94%;max-height: 96%;padding: 16px;}

/* 관리자 로그인 */
.admin_wrap .modal_wrap .modal_content {width: 98%;}


/* M.pay 신청 */
.mpay_apply .exp_con{padding-top: 40px;}
.mpay_apply_center_result{padding: 40px 20px;}
.mpay_apply_center_result .center_info .box{padding: 32px;}
.mpay_apply_center_result .center_info .text div{width: 100%;}

/* 교육기관 선택 */
.mpay_apply_center{padding: 40px 20px;}
.mpay_apply_center .center_list{margin-top: 20px;}



/* mpay 소개 */
.mpay_content{padding-top: 57px;}
.mpay_about_list{flex-direction: column;}
.mpay_about_list li{width: 100%;padding-bottom: 32px;}
.mpay_about_list strong{margin: 16px 0;}
.mpay_document_list{flex-direction: column;}
.mpay_document_list > li{width: 100%;margin-bottom: 10px; padding-left: 0;}
.mpay_document_list > li .box{padding: 32px;}
.mpay_document_list > li .box .icon{top: 32px;left: 32px;}


}