@charset "euc-kr";

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:400,700,900&display=swap');
@media screen and (min-width:300px) and (max-width:1300px){
	.mob_lesson_video, .mob_lesson_wrap, .mob_lesson_tab, .mob_notice, .mob_plan , .mob_lesson_txt{width: 100%; min-width: 300px; max-width: 1024px; margin: 0 auto; overflow: hidden}

	/* --------------------ºñµð¿À ÄÁÆ®·Ñ ¹öÆ° ½ÃÀÛ-------------------- */

	.v-control{width: 100%;height: 40px; padding: 0 5px; 
	background-color: #000; 
	z-index: 1000;
	}
	.v-control i, .v-control span{width: 100%; display: block;color: #fff;}
	.v-control i{ font-size: 1.2rem}
	.v-control button{width: 35px; height:40px;
		position: relative;
		border: none; background-color: transparent;
		 cursor: pointer;
		 transition: all 0.15s
		}

	.btn_text{padding: 5px 0; display: block; opacity: 0;
		position: absolute; top: -20px; left: 50%;
		color: #fff; font-size: 0.8rem; font-weight: 400; text-align: center;
		background-color: rgba(0,0,0,0.5); border-radius: 10px;
		transition: all 0.15s;
	}
	.prev .btn_text{width: 70px; margin-left: -35px;}
	.play .btn_text{width: 40px; margin-left: -20px;}
	.pause .btn_text{width: 70px; margin-left: -35px;}
	.next .btn_text{width: 80px; margin-left: -40px;}
	.expand .btn_text{width: 70px; margin-left: -35px;}


	.vbtn button:hover{background-color:#68bbfc}
	.vbtn button:hover + .btn_text{opacity: 1; top: -25px}

	.wrap_l{float: left;}
	.vbtn{width: 35px; height:40px; float: left;
		position: relative; z-index: 100;
		 transition: all 0.15s}

	.wrap_r{float: right}
	.wrap_r .expand{float: right; margin-left: 20px;}

	/* --------------------Àç»ý ¼Óµµ ½ÃÀÛ-------------------- */

	.wrap_r>div{float: left; padding: 12.5px 0;
		position: relative;

	}
	.speed_tit{padding: 0; float: left;
		font-size: 1rem; line-height: 15px; color: #fff;

	}
	.speed_tit i{font-size:0.8rem; display: inline; padding-left: 5px;}
	.wrap_r .speed{margin: 0 0 0 -40px; padding: 0;width: 80px; float: left; display: none;
		position: absolute; left:50%; bottom:27.5px;
		z-index: 1000;
	}
	.wrap_r .speed li{list-style: none;width: 100%; display: inline-block;
		line-height: 25px; text-align: center; font-size: 1rem; letter-spacing: 0.2em;
		background-color: rgba(0,0,0,0.5);
		cursor: pointer;
		border-bottom: 1px dashed rgba(255,255,255,0.5);
	}
	.wrap_r .speed li:last-child{border: none}
	.wrap_r .speed li:hover, .wrap_r .speed li:active{background-color: #32a5fe;}

	/* --------------------Àç»ý ¼Óµµ ³¡-------------------- */
    
    .mob_lesson_wrap{height: auto;position: sticky; left: 0;top: 0px;z-index: 100; background-color: #333}
    .mob_lesson_video{height: auto;}
    .mob_lesson_video::after{content: ""; display: table; clear: both}
    .mob_lesson_video video{width: 100%; height: auto;
        }
    .mob_lesson_video video::after{content: ""; display: table; clear: both}
    
    
	.mob_lesson_tab{height: 50px; margin-top: -1px}
    .mob_lesson_tab ul{width: 100%; height: 50px; 
        z-index: 100
    }
	.mob_lesson_tab li{width: 50%; height: 50px; float: left;
		line-height: 50px; text-align: center; font-size: 1.2rem;
        background-color: #3555cc; border-bottom: 1px solid #1031a8;
	}
    .mob_lesson_tab a{width: 100%; display: block; color: #fff}
    
    .mob_lesson_tab .on{background-color: #fff; font-weight: 700;
        border-top: 1px solid #1031a8;border-left: 1px solid #1031a8;border-right: 1px solid #1031a8; border-bottom: 1px solid transparent}
    .mob_lesson_tab .on a{ color: #333}
    
    
    .mob_lesson_txt{}
    .mob_notice{}
    .mob_notice li{padding: 10px 10px 20px}
    .mob_notice li:nth-child(even){background-color: #f1f1f1;}
    .mob_notice_q{font-size: 1.05em; font-weight: 700; color: #0b256f; line-height: 2.2em; margin-bottom: 5px}
    .mob_notice_a{display: block;padding-left: 20px; margin: 0 0 10px 0;
        position: relative;
        font-size: 1.1em; color: #444; line-height: 1.3em
    }
    .mob_notice_a:before{content: "*"; display: block; position: absolute; left: 5px;top: 0; font-size: 1em; font-weight: bold;}
    
    
	.mob_plan{padding: 10px; display: none; }

    .mob_plan_h1{font-size: 2em; margin-bottom: 20px; color: #bf0000; font-weight: bold;}
    .mob_plan_h2{font-size: 1.7em; margin: 20px 0;font-weight: bold;}
    .mob_plan_h3{font-size: 1.15em; margin: 10px 0; font-weight: bold; color: #111; text-decoration: underline;}
    .mob_plan p{color: #232323;font-size: 1.1em; line-height: 1.3em; margin-bottom: 10px;}
}