/*
Project:LiveClass
Author:kimjeongju
Date:2020.04.03
*/

/*reset*/
body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,select,table,td,textarea,th,ul{margin:0;padding:0;}
body,button,input,select,table,textarea{font-size:12px;font-family:'Nanum Gothic','나눔고딕',AppleSDGothicNeo,sans-serif,'Dotum';line-height:1.2;}
button,input{border-radius:0}
fieldset,img{border:0}
ol,ul{list-style:none}
address,em{font-style:normal}
a{text-decoration:none}
a:hover{text-decoration:underline}
iframe{overflow:hidden;margin:0;padding:0;border:0}
.blind{position:absolute;overflow:hidden;clip:rect(0 0 0 0);margin:-1px;width:1px;height:1px}


.m_show{display:none;}
.m_hide{display:block;}

.allive_top{background:#e7f3ff; width:100%}
.live_con{position:relative;width:1070px;margin:0 auto;text-align:center;}
.live_con .btn_remote{position:absolute;top:840px;right:52px;}
.live_con .btn_zoom{position:absolute;top:478px;right:52px;}
.live_con .allive_video{margin:20px auto 20px;}
.live_con .allive_video .jp-video-360p{width:710px;}

.line{border-top:2px solid #0e70eb}

/*설치방법*/
.install_area_zoom{margin-top:10px;}


.con01{position:relative; margin-top: 30px;}
.con01 .btn_install{position: absolute;left: 95px; top: 605px; display: inline-block; width: 220px; height: 220px;}
.con01 .btn_install_s{position: absolute; left: 95px; top: 172px; display: inline-block; width: 220px; height: 220px;}
.con01 .btn_info01{position: absolute;left: 730px; top: 840px;display: inline-block; width: 205px; height: 44px;}
.con01 .app{position: absolute; top:32.7%; right: 21.1%; opacity: 0;}
.con01 .google{position: absolute; top:32.7%; right: 6.6%; opacity: 0;}


.con02 .btn_info02{position: absolute; left: 518px; top: 238px; display: inline-block; width: 310px; height: 40px;}

.con02{position:relative; margin-top: 30px;}

.install_area_zoom h3{text-align:left;border-bottom:2px solid #ededed;}
.install_area_zoom h3>img{display:block;margin-left:5%;margin-top:20px;margin-bottom:20px;*display:inline-block;}
.install_area_zoom .contents{width:100%; text-align:center}
.install_area_zoom .lst_install{overflow:hidden;display:inline-block;width:90%;text-align:left;box-sizing:border-box;-webkit-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;}
.install_area_zoom .lst_install>li{float:left;width:50%;*width:49%;padding:30px 0;}
.install_area_zoom .lst_install>li>img{width:100%;}

.install_area_zoom.study .line{border-top:2px solid #00875f}

.logo{display:inline-block;margin:20px 0}


/*! Blue Monday Skin for jPlayer 2.9.2 ~ (c) 2009-2014 Happyworm Ltd ~ MIT License */

.jp-audio :focus, .jp-audio-stream :focus, .jp-video :focus {outline: 0}
*{ margin:0; padding:0; text-align:center}
.jp-audio button::-moz-focus-inner, .jp-audio-stream button::-moz-focus-inner, .jp-video button::-moz-focus-inner {border:0}
.jp-audio, .jp-audio-stream, .jp-video {font-size: 16px; color: #666; background-color:#000; position:relative}
.jp-audio {width: 288px}
.jp-audio-stream {
	width: 182px
}
.jp-video-270p{width:480px}

.jp-video-360p{display:inline-block;width:100%;}
.jp-video-full{
	width: 480px;
	height: 270px;
	position: static!important;
	position: relative
}
.jp-video-full div div {
	z-index: 1000
}
.jp-video-full .jp-jplayer {
	top: 0;
	left: 0;
	position: fixed!important;
	position: relative;
	overflow: hidden
}
.jp-video-full .jp-gui {
	position: fixed!important;
	position: static;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1001
}
.jp-video-full .jp-interface {
	position: absolute!important;
	position: relative;
	bottom: 0;
	left: 0
}

.jp-interface {position:relative; background:#000; opacity:0.8; width:100%; left:0; bottom:0}
.jp-audio .jp-interface, .jp-audio-stream .jp-interface {
	height: 80px
}
.jp-video .jp-interface {}
.jp-controls-holder {clear: both; width: 288px;	margin: 0 auto;	position: relative;	overflow: hidden; top: -8px}
.jp-interface .jp-controls {margin: 0;padding: 0; overflow: hidden}
.jp-audio .jp-controls {
	width: 380px;
	padding: 20px 20px 0
}
.jp-audio-stream .jp-controls {
	position: absolute;
	top: 20px;
	left: 20px;
	width: 142px
}
.jp-video .jp-type-single .jp-controls {width: 78px; margin-left: 120px}
.jp-video .jp-type-playlist .jp-controls {width: 134px;	margin-left: 172px}
.jp-video .jp-controls {
	float: left
}
.jp-controls button {
	display: block;
	float: left;
	overflow: hidden;
	text-indent: -9999px;
	border: none;
	cursor: pointer
}
.jp-play {
	width: 29px;
	height: 29px;
	background: url(../img/video/jplayer.png) no-repeat
}
.jp-play:focus {background: url(../img/video/jplayer.png) -30px 0 no-repeat}
.jp-state-playing .jp-play {background: url(../img/video/jplayer.png) 0 -30px no-repeat}
.jp-state-playing .jp-play:focus {background: url(../img/video/jplayer.png) -30px -30px no-repeat}
.jp-next, .jp-previous, .jp-stop {width: 22px; height:22px;	margin-top: 6px}
.jp-stop {background: url(../img/video/jplayer.png) 0 -60px no-repeat;margin-left: 10px}
.jp-stop:focus {background: url(../img/video/jplayer.png) -23px -60px no-repeat}
.jp-previous {
	background: url(../img/video/jplayer.png) 0 -112px no-repeat
}
.jp-previous:focus {
	background: url(../img/video/jplayer.png) -29px -112px no-repeat
}
.jp-next {
	background: url(../img/video/jplayer.png) 0 -141px no-repeat
}
.jp-next:focus {
	background: url(../img/video/jplayer.png) -29px -141px no-repeat
}
.jp-progress {
	overflow: hidden;
	background-color: #ddd
}
.jp-audio .jp-progress {
	position: absolute;
	top: 32px;
	height: 15px
}
.jp-audio .jp-type-single .jp-progress {
	left: 110px;
	width: 186px
}
.jp-audio .jp-type-playlist .jp-progress {
	left: 166px;
	width: 130px
}
.jp-video .jp-progress {top:50px; left: 0; width: 100%; height:3px}
.jp-seek-bar {background: url(../img/video/jplayer.png) 0 -164px repeat-x; width: 0; height:100%;cursor: pointer}
.jp-play-bar {background: url(../img/video/jplayer.png) 0 -180px repeat-x; width: 0; height:100%; float:left}
.jp-state-no-volume .jp-volume-controls {display: none}
.jp-volume-controls {position: absolute; top: 32px;	left: 308px; width: 200px}
.jp-audio-stream .jp-volume-controls {left:70px}
.jp-video .jp-volume-controls {top: 12px; left:10px
}
.jp-volume-controls button {
	display: block;
	position: absolute;
	overflow: hidden;
	text-indent: -9999px;
	border: none;
	cursor: pointer
}
.jp-mute, .jp-volume-max {width:21px;height: 15px}
.jp-volume-max {left: 74px}
.jp-mute {background: url(../img/video/jplayer.png) 0 -129px no-repeat; left:0}
.jp-mute:focus {background: url(../img/video/jplayer.png) -20px -129px no-repeat}
.jp-state-muted .jp-mute {background: url(../img/video/jplayer.png) -60px -129px no-repeat}
.jp-state-muted .jp-mute:focus {background: url(../img/video/jplayer.png) -78px -129px no-repeat}
.jp-volume-max {background: url(../img/video/jplayer.png) 0 -145px no-repeat}
.jp-volume-max:focus {background: url(../img/video/jplayer.png) -22px -145px no-repeat}
.jp-volume-bar {	position: absolute;	overflow: hidden;	background: url(../img/video/jplayer.png) 0 -197px repeat-x; top: 5px; left: 22px; width: 46px; height: 5px;cursor: pointer}
.jp-volume-bar-value {background: url(../img/video/jplayer.png) 0 -203px repeat-x;width: 0;height: 5px; float:left}
.jp-audio .jp-time-holder {position: absolute; top: 50px}
.jp-audio .jp-type-single .jp-time-holder {left: 110px;	width:186px}
.jp-audio .jp-type-playlist .jp-time-holder {left: 166px;width: 130px}
.jp-current-time, .jp-duration {
	width: 60px;
	font-size: .64em;
	font-style: oblique
}
.jp-current-time {
	float: left;
	display: inline;
	cursor: default
}
.jp-duration {
	float: right;
	display: inline;
	text-align: right;
	cursor: pointer
}
.jp-video .jp-current-time {margin-left:10px}
.jp-video .jp-duration {margin-right:10px}
.jp-details {font-weight: 700; text-align: center; cursor: default}
.jp-details, .jp-playlist {width: 100%}
.jp-type-playlist .jp-details, .jp-type-single .jp-details { border-top: none}
.jp-details .jp-title { display:none}
.jp-playlist ul {
	list-style-type: none;
	margin: 0;
	padding: 0 20px;
	font-size: .72em
}
.jp-playlist li {
	padding: 5px 0 4px 20px;
	border-bottom: 1px solid #eee
}
.jp-playlist li div {
	display: inline
}
div.jp-type-playlist div.jp-playlist li:last-child {
	padding: 5px 0 5px 20px;
	border-bottom: none
}
div.jp-type-playlist div.jp-playlist li.jp-playlist-current {
	list-style-type: square;
	list-style-position: inside;
	padding-left: 7px
}
div.jp-type-playlist div.jp-playlist a {
	color: #333;
	text-decoration: none
}
div.jp-type-playlist div.jp-playlist a.jp-playlist-current, div.jp-type-playlist div.jp-playlist a:hover {
	color: #0d88c1
}
div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove {
	float: right;
	display: inline;
	text-align: right;
	margin-right: 10px;
	font-weight: 700;
	color: #666
}
div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove:hover {
	color: #0d88c1
}
div.jp-type-playlist div.jp-playlist span.jp-free-media {
	float: right;
	display: inline;
	text-align: right;
	margin-right: 10px
}
div.jp-type-playlist div.jp-playlist span.jp-free-media a {
	color: #666
}
div.jp-type-playlist div.jp-playlist span.jp-free-media a:hover {
	color: #0d88c1
}
span.jp-artist {
	font-size: .8em;
	color: #666
}
.jp-video-play {width: 100%;overflow: hidden;cursor: pointer;background-color: transparent}
.jp-video-270p .jp-video-play {
	margin-top: -270px;
	height: 270px
}

.jp-video-full .jp-video-play {height: 100%}

.jp-video-play-icon{position:absolute;top:50%;display:block;width:100%;height:78px;margin-top:-20px;background: url(../img/video/jplayervideo_bk.png) no-repeat center 0; text-indent: -9999px; border: none; cursor: pointer; z-index:2}


.jp-jplayer, .jp-jplayer audio {width: 0; height: 0}
.jp-toggles {padding: 0; margin: 0 auto; overflow: hidden}
.jp-audio .jp-type-single .jp-toggles {width:25px}
.jp-audio .jp-type-playlist .jp-toggles {width: 55px; margin: 0; position: absolute; left: 325px; top: 50px}
.jp-video .jp-toggles {position: absolute; right:8px; margin: 10px 0 0;	width:70px}
.jp-toggles button {
	display: block;
	float: left;
	width: 25px;
	height: 18px;
	text-indent: -9999px;
	line-height: 100%;
	border: none;
	cursor: pointer
}
.jp-full-screen {background: url(../img/video/jplayer.png) 0 -230px no-repeat; margin-left:10px}
.jp-full-screen:focus {	background: url(../img/video/jplayer.png) -24px -230px no-repeat}
.jp-state-full-screen .jp-full-screen {background: url(../img/video/jplayer.png) -60px -230px no-repeat}
.jp-state-full-screen .jp-full-screen:focus {background: url(../img/video/jplayer.png) -85px -230px no-repeat}

.jp-repeat {background: url(../img/video/jplayer.png) 0 -209px no-repeat}
.jp-repeat:focus {background: url(../img/video/jplayer.png) -24px -209px no-repeat}
.jp-state-looped .jp-repeat {background: url(../img/video/jplayer.png) -60px -209px no-repeat}
.jp-state-looped .jp-repeat:focus {background: url(../img/video/jplayer.png) -85px -209px no-repeat
}
.jp-shuffle {
	background: url(../img/video/jplayer.png) 0 -270px no-repeat;
	margin-left: 5px
}
.jp-shuffle:focus {
	background: url(../img/video/jplayer.png) -30px -270px no-repeat
}
.jp-state-shuffled .jp-shuffle {
	background: url(../img/video/jplayer.png) -60px -270px no-repeat
}
.jp-state-shuffled .jp-shuffle:focus {
	background: url(../img/video/jplayer.png) -90px -270px no-repeat
}
.jp-no-solution {
	padding: 5px;
	font-size: .8em;
	background-color: #eee;
	border: 2px solid #009be3;
	color: #000;
	display: none
}
.jp-no-solution a {
	color: #000
}
.jp-no-solution span {
	font-size: 1em;
	display: block;
	text-align: center;
	font-weight: 700
}


@media screen and (max-width:769px){

.m_show{display:block;}
.m_hide{display:none;}
    
img{width:100%;max-width:100%;}    
    
.allive_wrap{width:100%; overflow:hidden}    
.allive_top{background:none;}
.live_con{width:100%;padding-left:4%;padding-right:4%;box-sizing:border-box;-webkit-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;}
.live_con .allive_video{margin:20px auto 20px;}
.live_con .allive_video .jp-video-360p{width:94%;}
    
.jp-video-play-icon{left:50%;width:58px;height:56px;margin-left:-30px;margin-top:-25px;background-size:cover;}    

/*설치*/
.install_area_zoom{width:100%;}
.install_area_zoom h3>img{width:56%;margin-top:4%;margin-bottom:4%}
.install_area_zoom.study h3>img{width:39%;}
    
.install_area_zoom .lst_install{margin-top:3%;}
.install_area_zoom .lst_install>li{width:100%;padding:4% 0}
    
.logo{width:36%;margin:4%}

.con01,
.con02,
.con03,
.con04{ margin-top: 15px;}

    
.con01 .app{position: absolute; top:32.6%; right: 19.7%; width: 14%;}
.con01 .google{position: absolute; top:32.6%; right: 4.6%; width: 14%;}    




}
@media screen and (max-width:641px){
    

    
}
@media screen and (max-width:461px){


}

@media screen and (max-width:442px){


    
}
@media screen and (max-width:376px){
    

}

@media screen and (max-width:320px){
    

}