@charset "utf-8";

*:not(input):not(textarea) {
  -webkit-user-select: none; /* disable selection/Copy of UIWebView */
  -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
} 

button{color:inherit;text-decoration:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);border:0;outline:0;}
.button{text-align: center; font-size: 14px;}
.relative { position : relative;}


.margin-top-10 { margin-top : 10px }
.margin-top-20 { margin-top : 20px }
.margin-top-30 { margin-top : 30px }
.margin-top-40 { margin-top : 40px }
.margin-top-50 { margin-top : 50px }
.margin-top-60 { margin-top : 60px }
.margin-top-70 { margin-top : 70px }
.margin-top-80 { margin-top : 80px }
.margin-top-90 { margin-top : 90px }
.margin-top-100 { margin-top : 100px }
.margin-bottom-20{margin-bottom: 20px }
.margin-bottom-30{margin-bottom: 30px }
.margin-bottom-40{margin-bottom: 40px }
.is {display: inline-block; width:90%;}
.specialCode {color:#333b4b;}
.latelyAtive{color:#ff6a13;  font-weight: bold;}
.newVersion{color:#FF6A13; font-weight: bold;}
.important{position : relative !important;}

/* 아이디 입력 및 비밀번호 입력 안내 문구*/
.input_span{  position: absolute;bottom: -30px;left: 10px; }

.text-center { text-align : center !important }
.text-right { text-align : right !important }
.text-left { text-align : left !important }
.text-justify {text-align: justify;}
.text-crop { text-overflow : ellipsis; overflow : hidden; white-space : nowrap }
.normal { font-weight : normal }
.bold { font-weight : bold }

.responsive-img img { width : 100%; height : auto !important }
.responsive-img { width : 100%; height : auto !important }
.responsive-img-max img { max-width : 100%; height : auto !important }
.responsive-img-max { max-width : 100%; height : auto !important }

.isListend0 { background : url('/design/img/sub/video-ic0.png') no-repeat center center; }
.isListend1 { background : url('/design/img/sub/video-ic1.png') no-repeat center center; }

#container { /*min-width : 340px;*/ height : 85% }
.mainFont{font-size:16px; color:#FF6A13; display:inline;}
.listenFont{font-size:15px; color:#FF6A13; display:inline; font-weight: bold; letter-spacing :0px;}

.scrollable {
	position: absolute;
	margin: 0;
	padding: 0;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}


.textScroll
{

  -webkit-animation:textScrolling ease 10s infinite;
  -moz-animation:textScrolling ease 10s infinite;
  -ms-animation:textScrolling ease 10s infinite;
  animation:textScrolling 10s ease infinite;
}
@-webkit-keyframes textScrolling 
{
  from { -webkit-transform:translateX(0%);}
  to { -webkit-transform:translateX(-50%);}
}
@-moz-keyframes textScrolling 
{
  from { -moz-transform:translateX(0%);}
  to { -moz-transform:translateX(-50%);}
}
@-ms-keyframes textScrolling 
{
  from { -ms-transform:translateX(0%);}
  to { -ms-transform:translateX(-50%);}
}
@keyframes textScrolling 
{
  from { transform:translateX(0%);}
  to { transform:translateX(-50%);}
}

/* layer_popup */
.layer_text{text-align: center; line-height: 1.4em;}

/* Player */
.fa-pause:before {
	display: inline-block;
	width:20px;
	height:20px;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-style: normal;
	content:"||";
}
.fa-play:before {
	display: inline-block;
	width:20px;
	height:20px;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-style: normal;
	content: "▶";
}

/* main */
header { background : #333b4b; height : 100px }
header .top-btn { position : absolute; top : 10px; right : 11px }
header .top-btn2 { position : absolute; top : 10px; left : -3px }
header h1.logo { padding : 15px 0; text-align : center }
header h1.logo img { max-width : 165px; height : auto !important  }
header .top-btn2 button.home-btn img { width : 18px; height : auto !important; }
header .top-btn button.search-btn img { width : 18px; height : auto !important; }
header .top-btn button.menu-btn img { width : 5px; height : auto !important }
header nav ul { padding : 0 15px; overflow : hidden }
header nav ul li { float : left; width : 16.6% }
header nav ul li a { display : block; padding : 10.3px 0; border-bottom : 3px solid transparent; font-size : 14px; color : #7f8ca7; font-weight : bold; text-align : center; transition : all .3s ease }
header nav ul li a:hover, header nav ul li.active a { color : #fff; border-bottom : 3px solid #ff6a13 }
.login-toggle { display : none; position : absolute; top : 60px; padding : 10px 20px 10px 15px; right : 0; background : #fff; box-shadow : 0px 0px 10px #000; z-index: 2 }
.login-toggle ul li a { display : block; padding : 10px 0  }
.login-toggle ul li a span{ position : absolute;  font-weight: bold; background : #f00; color : #fff; margin: 0 0 0 3px; font-size : 10px; padding : 0px 2px; /*border-radius : 100%*/   }

.main-photo { padding : 24px 16px; position : relative;}
.main-photo p{color : #fff; text-shadow : 2px 2px 5px #000; font-weight : bold; font-size:20px;}
.main-photo .main_remainDays{position : absolute; bottom : 30px; left : 0; width : 100%; text-align : right; padding-right:30px;}

h1.sub-title { position : relative }
h1.sub-title span { position : absolute; top : 0; right : 0; color : #6c778d; font-size:10px; font-weight: normal }

section.main-list { border-top : 2px solid #f6f6f7 }
section.main-list ul li { border-bottom : 2px solid #f6f6f7; padding : 16px }
section.main-list ul li p a { display : block; padding : 8px 20px 0 20px; }
section.main-list ul li.jb-news1 img { max-width : 60px }
section.main-list ul li.jb-news2 img { max-width : 70px }

section.main-video-list { padding : 25px 0 75px 16px }
section.main-video-list h1 img { max-width : 60px }
section.main-video-list h1 span { right : 16px }
section.main-video-list .main-video { margin-top : 18px }
section.main-video-list .main-video li { position : relative; display : block; margin-bottom : 10px; transition : background .3s ease }
/*section.main-video-list .main-video li.active, section.main-video-list .main-video li:hover { background : #e2e3e6 }*/
section.main-video-list .main-video li div.video-thumb { position : absolute; top : 0; left : 0; width : 62px; height : 62px }
section.main-video-list .main-video li div.video-thumb a { position : absolute; display : block; width : 62px; height : 62px; top : 0; left : 0; background-size : 42px 42px  }
section.main-video-list .main-video li div.video-thumb img { width : 100%; height : auto !important }
section.main-video-list .main-video li div.video-txt { margin-left : 70px; border-bottom : 1px solid #e7e7e7 }
section.main-video-list .main-video li div.video-txt .inner { padding : 15px 16px 11px }
section.main-video-list .main-video li div.video-txt .inner span { position : absolute; top : 0; right : 0; }
section.main-video-list .main-video li div.video-txt .inner p .heart-ic {background : url('/design/img/sub/heart-ic.png') no-repeat left center; background-size : 10px 10px; padding-left : 15px}
section.main-video-list .main-video li div.video-txt .inner a { display : block; width : 75% }
section.foot-video-wrap { position : fixed; bottom : 0; left : 0; width : 100%; padding : 10px 16px; background : #e2e3e6; height : 55px; z-index: 9 }
section.foot-video-wrap .foot-video-thumb { position : absolute; top : -4px; left : 0; width : 42px; height : 42px }
section.foot-video-wrap .foot-video-thumb img { width : 100% }
section.foot-video-wrap .foot-video-txt { margin-left : 50px; position : relative }
section.foot-video-wrap .foot-video-txt { height : 40px; line-height : 40px; border-top : 2px solid #fff; margin-right : 15%  }
section.foot-video-wrap .foot-video-txt b { display : block; width : 100%; font-weight : normal }
section.foot-video-wrap .foot-video-txt span { position : absolute; top : -2px; left : 0; width : 20%; height : 2px; background : #ff6a13 }
section.foot-video-wrap .video-icon { position : absolute; top : 10px; right : 0 }

.play-btn { padding : 19px 16px; text-align : right }
.play-btn img { width : 50px }

section.main-video-list2 { padding : 25px 0 0 16px; border-bottom : 2px solid #f6f6f7; }
section.main-video-list2 h1 img { max-width : 60px }
section.main-video-list2 h1 span { right : 16px }
section.main-video-list2 .main-video2 { margin-top : 18px }
section.main-video-list2 .main-video2 li { position : relative; display : block; margin-bottom : 10px; transition : background .3s ease }
/*section.main-video-list .main-video li.active, section.main-video-list .main-video li:hover { background : #e2e3e6 }*/
section.main-video-list2 .main-video2 li div.video-thumb { position : absolute; top : 0; left : 0; width : 62px; height : 62px }
section.main-video-list2 .main-video2 li div.video-thumb a { position : absolute; display : block; width : 62px; height : 62px; top : 0; left : 0; background-size : 42px 42px  }
section.main-video-list2 .main-video2 li div.video-thumb img { width : 100%; height : auto !important }
section.main-video-list2 .main-video2 li div.video-txt { margin-left : 70px }
section.main-video-list2 .main-video2 li div.video-txt .inner { padding : 15px 16px 11px }
section.main-video-list2 .main-video2 li div.video-txt .inner span { position : absolute; top : 0; right : 0; }
section.main-video-list2 .main-video2 li div.video-txt .inner p .heart-ic {background : url('/design/img/sub/heart-ic.png') no-repeat left center; background-size : 10px 10px; padding-left : 15px}
section.main-video-list2 .main-video2 li div.video-txt .inner a { display : block; width : 75% }


/* 최근 *** 2016 04 27 변경( 관련 해당 html 마크업도 변경됨 ) ***/
section.sub-video-list { padding : 0px}
section.sub-video-list h1 img { max-width : 60px }
section.sub-video-list h1 span { right : 16px }
section.sub-video-list .sub-video li { position : relative; display : block; margin-bottom : 10px }
section.sub-video-list .sub-video li div.video-thumb { position : absolute; top : 0; left : 0; width : 62px; height : 62px }
section.sub-video-list .sub-video li div.video-thumb a { position : absolute; display : block; width : 62px; height : 62px; top : 0; left : 0; background-size : 42px 42px  }
section.sub-video-list .sub-video li div.video-thumb img { width : 100%; height : auto !important }
section.sub-video-list .sub-video li:first-child div.video-txt { border-top : 1px solid #e7e7e7 }
section.sub-video-list .sub-video li:first-child div.video-txt .inner  { padding : 13px 16px 12px 16px }
section.sub-video-list .sub-video li div.video-txt { margin-left : 70px; border-bottom : 1px solid #e7e7e7 }
section.sub-video-list .sub-video li div.video-txt .inner { padding : 8px 16px 18px }
section.sub-video-list .sub-video li div.video-txt .inner span { position : absolute; top : 0; right : 0; }
section.sub-video-list .sub-video li div.video-txt .inner p .heart-ic { background : url('/design/img/sub/heart-ic.png') no-repeat left center; background-size : 10px 10px; padding-left : 15px}
section.sub-video-list .sub-video li div.video-txt .inner a { display : block; width : 75% }

button.more-btn { position : relative; font-size : 14px; padding : 10px 0; width : 200px; border-bottom : 1px solid #facdb3 }
button.more-btn b { margin-left : 10px; display : inline-block; width : 18px; height : 10px; background : url('/design/img/sub/more-arrow-ic.png') no-repeat center center; background-size : cover }
button.more-btn:before { content : ''; display : block; position : absolute; left : 0; width : 1px; height : 10px; background : #facdb3; bottom : 0 }
button.more-btn:after { content : ''; display : block; position : absolute; right : 0; width : 1px; height : 10px; background : #facdb3; bottom : 0 }

button.ok-btn { display : block; position : relative; font-size : 14px; padding : 10px 0; width : 150px; margin : 30px auto; border-bottom : 1px solid #c9cbcf; color :#6c778d }
button.ok-btn:before { content : ''; display : block; position : absolute; left : 0; width : 1px; height : 10px; background : #c9cbcf; bottom : 0 }
button.ok-btn:after { content : ''; display : block; position : absolute; right : 0; width : 1px; height : 10px; background : #c9cbcf; bottom : 0 }

.lately_select{float:left; padding: 2px 0 0 2px;}
.lately_select a{padding-right: 7px; font-size: 12px;}


/* 순차 */
section.sub4 ul li { float : left; width : 50%; padding : 15px 15px; text-align : center }
section.sub4 ul li a { display : block; width : 120px; height : 120px; margin : 0 auto; overflow : hidden }
section.sub4 ul li a p { padding : 50px 20px 0 0; line-height : 100%; text-align : right; font-weight : bold }
section.sub4 ul li img { max-width : 100% }

/* 테마 */                                       
section.sub5-thema .thema-table { display : table; width : 100% }
section.sub5-thema .thema-table .group { display : table-row }
section.sub5-thema .thema-table .group .cell { display : table-cell; width : 33.3%; text-align : center; vertical-align : top;  }
section.sub5-thema .thema-table .group .cell a { position : relative; display : block; margin : 20px auto; width : 100px; height : 100px; border-radius : 100%; padding : 20px }

/* 특강 */
section.sub6 .sub6-table { display : table; width : 100% }
section.sub6 .sub6-table .group { display : table-row }
section.sub6 .sub6-table .group .cell { display : table-cell; width : 33.3%; text-align : center; vertical-align : top;  }
section.sub6 .sub6-table .group .cell a { position : relative; display : block; margin : 20px auto; width : 100px; height : 100px; border-radius : 100%; padding : 20px }


.video-slide { display : none; background : #333b4b; margin-top:-1px}
.video-slide ul { padding : 0 15px; overflow : hidden }
/* */
section.pop-head { padding : 0 20px; background : #333b4b; color : #fff }
section.pop-head h1 { padding : 20px 0;  text-align : center; color : #fff; font-size : 16px; position : relative }
section.pop-head h1 a { position : absolute; top : 18px; right : 0; }
section.pop-head h1 a img { max-width : 20px }
section.pop-head ul { overflow-x : hidden; text-align: center }
section.pop-head ul li { display:inline-block; padding: 0 6px}
section.pop-head ul li a { width: 20px; display : block; padding : 0 0 8px 0; text-align :center; color : #919fbd; font-size : 13px; border-bottom : 3px solid transparent; transition : all .3s ease }
section.pop-head ul li.active a { color : #fff; border-bottom : 3px solid #ff6a13 } 
section.pop-head ul li a:hover { }

section.pop-page { padding : 0px }
section.pop-page01 ul li .inner { position : relative; margin : 15px 20px }
section.pop-page01 ul li .inner .video-thumb { position : absolute; top : 0; left : 0; width : 128px; height : 128px; border-radius : 100%; overflow : hidden  }
section.pop-page01 ul li .inner .video-thumb > img { display : block; width : 100%; height : auto !important }
section.pop-page01 ul li .inner .video-thumb a { position : absolute; top : 0; left : 0; width : 100%; height : 128px; line-height : 128px; text-align : center; z-index : 2 }
section.pop-page01 ul li .inner .video-thumb a img { width : 35px; height : 35px; }
section.pop-page01 ul li .inner p { height : 128px; line-height : 128px;  padding-left : 170px }
section.pop-page01 ul li .inner p a { display : block; font-size : 13px; color : #333b4b; font-weight : bold }


/* 듣기 / 질문보기 */
.video-slide li { float : left; width : 16.6% }
.video-slide li a { display : block; border-bottom : 3px solid transparent; font-size : 14px; color : #7f8ca7; font-weight : bold; text-align : center; height : 45px; transition : all .3s ease }
.video-slide li a:hover, .video-slide ul li.active a { color : #fff; border-bottom : 3px solid #ff6a13 }
.video-wrap { position : relative; height : 100%; min-height : 100%; }
.video-wrap .video-head { position : absolute; top : 0; left: 0; width : 100%; height : 55px; line-height : 55px; background : #333b4b; z-index: 1}
.video-wrap .video-head h1 { position : relative; font-size : 15px; text-align : center; color : #fff }
.video-wrap .video-head h1 a { position : absolute; top : 0px; right : 10px }
.video-wrap .video-head h1 a img { width : 20px }
.video-wrap .video-body { position : relative; height : 100%; min-height : 100%; padding : 55px 0 70px 0; background : url('/design/img/lecture/player/00.png') no-repeat center center; background-size : cover }
.video-wrap .video-body .video-play { position : absolute; bottom : 70px; left : 0; width : 100%; padding : 20px; background : rgba(51,59,75, 0.8); color : #fff }
.video-wrap .video-body .video-play > p { text-align : center; font-size : 14px }
.video-wrap .video-body .video-play > div p { margin : 15px 0; height : 3px; background : #fff; position : relative }
.video-wrap .video-body .video-play > div p span { position : absolute; top : 0; left : 0; height : 3px; background : #ff6a13;}
.video-wrap .video-body .video-play > div p span button,
.video-wrap .video-body .video-play > div p span em { display:block; position : absolute; width : 36px; height : 36px; background-size : 25px 25px; background-image : url('/design/img/sub/playPoint.png'); background-repeat : no-repeat; background-position : center center;  border-radius : 100%; position : absolute; top : -17px; right:-16px}
.video-wrap .video-body .video-play > a { position : absolute; bottom : 10px; right : 20px; color : #e2e2e2; background : url('/design/img/sub/video-heart.png') no-repeat left center; background-size : 15px 15px; padding-left : 20px ; transition : all .3s ease }

.video-wrap .video-play2 { position : relative; height : 100%; min-height : 100%; padding : 55px 0 70px 0; background : rgba(0, 0, 0, 0.7); padding : 40px 20px 50px 20px; color : #fff }
.video-wrap .video-play2 > h1 { font-size : 15px; font-weight: normal }
.video-wrap .video-play2 > h1 b { color : #ffea00 }
.video-wrap .video-play2 > div h1 { margin : 20px 0 15px 0; font-size : 20px; color : #cfd7e1 }
.video-wrap .video-play2 > div p { line-height : 180%; padding:0 5px }

.video-wrap .video-foot { position : absolute; bottom : 0; left: 0; width : 100%; background : #333b4b; height : 70px }
.video-wrap .video-foot div.video-play-btn { position : absolute; top : 20px; left : 10px; overflow : hidden }
.video-wrap .video-foot div.video-play-btn .vp-prev { width : 37px }
.video-wrap .video-foot div.video-play-btn .vp-play { width : 50px; margin : 0 15px }
.video-wrap .video-foot div.video-play-btn .vp-next { width : 37px }
.video-wrap .video-foot div.video-play-btn img { width : 100%; height : auto !important }
.video-wrap .video-foot p { padding : 25px 0 0 0; text-align : right }
.video-wrap .video-foot p button { width : 45px; margin : 0 5px }
.video-wrap .video-foot p img { width:100% }

/*  modal css  */
.layer1 { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1010;  }
.layer1 .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.7; filter:alpha(opacity=50);}
.layer1 .pop-layer { display: block;}
.layer2 { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1010;  }
.layer2 .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.7; filter:alpha(opacity=50);}
.layer2 .pop-layer { display: block;}
.pop-layer { display: none; position: absolute; top: 50%; left:12.5%; width: 75%; height: auto; background: #fff;  z-index: 1000; /*box-shadow : 2px 2px 5px #ccc*/ }
.pop-layer .pop-container { padding: 20px 25px 0 }
.pop-layer .pop-container .pop-conts { padding : 30px 0 0 0 }
.pop-layer .pop-container .pop-conts h1 { font-size : 16px }
.pop-layer .pop-container .pop-conts .layer_button span{ display : inline-block; padding : 5px 0; color : #fff; background : #ef6a1c;  width : 85px; margin : 20px auto; text-align : center  }
.pop-layer .btn-r { position : absolute; top : 10px; left : 0;  width: 100%; padding : 0 10px; text-align: right }
.pop-layer .btn-r img { width : 12px; height : auto !important }

/* 20160329 : likearts */
html, body { width:100%; height:100%; overflow:hidden }
.content-area { position:relative; overflow-y:auto; }
.video-wrap .video-play2 > div p { overflow-y:auto; }

.video-icon .play i { display:inline-block; padding-top:3px }
.video-icon .play .fa-pause { display:none }
.video-icon .play.pause .fa-play { display:none }
.video-icon .play.pause .fa-pause { display:inline-block }

.player-full {
	position:absolute; 
	left:0;
	top:0; 
	width:100%;
	height:100%;
	z-index:50;
	
	-webkit-transition:-webkit-transform ease .4s;
	-moz-transition:-moz-transform ease .4s;
	-ms-transition:-ms-transform ease .4s;
	transition:transform ease .4s;
	
	-webkit-transform:translateY(100%);
	-moz-transform:translateY(100%);
	-ms-transform:translateY(100%);
	transform:translateY(100%);
}
.player-full.active {
	-webkit-transform:translateY(0px);
	-moz-transform:translateY(0px);
	-ms-transform:translateY(0px);
	transform:translateY(0px);
}

.controll-btn .img { display:inline-block }
.controll-btn .play { display:none }
.controll-btn.pause .play { display:inline-block }
.controll-btn.pause .stop { display:none }

.video-play2 { position:relative; display:none }
.touharea { position:absolute; width:100%; height:100%; left:0; top:0 }

.video-body.active { }
.video-body .video-play2 { display:none }
.video-body.active .video-play2 { display:block }
.video-body.active .video-play { display:none }

section.main-video-list { padding:25px 0 0 0 }

.layer-page { 
	position:absolute; 
	width:100%; 
	height:100%;
	left:0; 
	top:0; 
	z-index:5;
	background:#fff;
	
	-webkit-transition:-webkit-transform ease .4s;
	-moz-transition:-moz-transform ease .4s;
	-ms-transition:-ms-transform ease .4s;
	transition:transform ease .4s;
	
	-webkit-transform:translateX(100%);
	-moz-transform:translateX(100%);
	-ms-transform:translateX(100%);
	transform:translateX(100%);
}
.layer-page.active { 
	-webkit-transform:translateX(0%);
	-moz-transform:translateX(0%);
	-ms-transform:translateX(0%);
	transform:translateX(0%); 
}

section.main-video-list .main-video li { padding:0 5px 0 16px }
section.main-video-list .main-video li div.video-thumb { left:16px }
.main-video-list h1.sub-title { padding:0 16px }

section.sub-video-list .sub-video li { padding:0 5px 0 16px }
section.sub-video-list .sub-video li div.video-thumb { left:16px }
.sub-video-list h1.sub-title { padding:0 16px }

.video-wrap .video-foot p button.loop { position:relative }
.video-wrap .video-foot p button.loop span { left:0; top:0; line-height:20px; text-align:center; position:absolute; color:#fff; width:100%; height:100%; }

.video-wrap .video-body .video-play > div p span.transition,
section.foot-video-wrap .foot-video-txt span.transition { 
	-webkit-transition:width linear .4s;
	-moz-transition:width linear .4s;
	-ms-transition:width linear .4s;
	transition:width linear .4s;
}

/* fixed */
#container .fixed {position: fixed; width: 100%; top:0;}
.owl-pagination {position:fixed; /*left:3.125%;*/ top:50px; width: 100%; text-align: center;}



/* 나의정법 (추가 2016.04.25~ )*/

.orange-btn { display : block; width : 90%; margin : 30px auto; color : #fff; background : #ff6a13; padding : 15px 0 }
.gray-btn { display : block; width : 90%; margin : 10px auto 0; color : #333b4b; background : #efeff0; padding : 15px 0; border : 1px solid #333b4b }

section#myjb{padding:0;}
section#myjb .myjb-vs { position : relative; padding : 20px; background : url('/design/img/sub/myjb/myjb-bg.jpg') no-repeat center center; background-size : cover; height : 270px }
section#myjb .myjb-vs p { color : #fff; text-shadow : 2px 2px 5px #000; font-weight : bold }
section#myjb .myjb-vs p.my-use-no { position : absolute; bottom : 30px; left : 0; width : 100%; text-align : center }
section#myjb .myjb-vs p.my-use-yes { position : absolute; bottom : 30px; left : 0; width : 100%; text-align : right; padding : 0 20px; font-size : 20px }
section#myjb .myjb-vs p.my-use-yes b { font-size : 90px }

section#myjb .myjb-list { padding : 20px }
section#myjb .myjb-list li a { position : relative; display : block; padding : 20px 45px }
section#myjb .myjb-list li a span { position : absolute; top : 0; left : 0; width : 30px; height : 100% }
section#myjb .myjb-list li:first-child a span { background : url('/design/img/sub/myjb/ic-my-01.png') no-repeat left center; background-size : 30px 30px } 
section#myjb .myjb-list li:nth-child(2) a span { background : url('/design/img/sub/myjb/ic-my-02.png') no-repeat left center; background-size : 30px 30px } 
section#myjb .myjb-list li:nth-child(3) a span { background : url('/design/img/sub/myjb/ic-my-03.png') no-repeat left center; background-size : 30px 30px } 
section#myjb .myjb-list li:nth-child(4) a span { background : url('/design/img/sub/myjb/ic-my-04.png') no-repeat left center; background-size : 30px 30px } 
section#myjb .myjb-list li:nth-child(5) a span { background : url('/design/img/sub/myjb/ic-my-05.png') no-repeat left center; background-size : 30px 22px } 
section#myjb .myjb-list li:nth-child(6) a span { background : url('/design/img/sub/myjb/ic-my-06.png') no-repeat left center; background-size : 30px 30px } 
section#myjb .myjb-list li a span b { position : absolute; min-width : 18px; text-align : center; bottom : 5px; right : -10px; background : #f00; color : #fff; font-size : 11px; padding : 0 4px; border-radius : 10px   }


/* 1촌 */
section#my-family .myjb-vs { position : relative; padding : 20px; background : url('/design/img/sub/myjb/myjb-bg.jpg') no-repeat center center; background-size : cover; height : 270px }
section#my-family .myjb-vs p { color : #fff; text-shadow : 2px 2px 5px #000; font-weight : bold }
section#my-family .myjb-vs p.my-use-no { position : absolute; bottom : 30px; left : 0; width : 100%; text-align : center }
section#my-family .myjb-vs p.my-use-yes { position : absolute; bottom : 30px; left : 0; width : 100%; text-align : right; padding : 0 20px; font-size : 20px }
section#my-family .myjb-vs p.my-use-yes b { font-size : 90px }

section#my-family .family-list { padding : 20px }
section#my-family .family-list .inner { padding : 20px 20px 10px 50px; background : url('/design/img/sub/myjb/ic-my-05.png') no-repeat left top 20px; background-size : 30px 22px; border-bottom : 1px solid #b7b7b7; color : #7e869f }
section#my-family .family-list .inner h2 { font-size : 16px; color : #333b4b; margin : 0 0 10px 0 ; overflow : hidden }
section#my-family .family-list .inner h2 b { float : right; color : #7e869f; font-weight : normal; font-size : 14px }


/* 나의 강의 */
section.myLec_head ul li a {width: 71px; display: block; padding: 0 0 8px 0; text-align: center; color: #919fbd; font-size: 13px; border-bottom: 3px solid transparent; transition: all .3s ease;}

/* 나의정보 */

section#my-info .myinfo-edit-check { background : #efeff0; padding : 10px 20px }
section#my-info .myinfo-edit-check li { padding : 10px 0; font-size : 13px }



/* 받은 선물함 */
section#myjb .gift-table-wrap { padding : 30px 0 }
section#myjb .gift-table-wrap .gift-table { width : 100%; display : table } 
section#myjb .gift-table-wrap .gift-table.active, section#myjb .gift-table-wrap .gift-table:hover { background : #e2e3e6 }
section#myjb .gift-table-wrap .gift-table .cell { display : table-cell; vertical-align : top; font-weight : bold; text-align : center; font-size : 14px; border-bottom : 1px solid #b7b7b7; padding : 20px 5px 10px 5px !important }
section#myjb .gift-table-wrap .gift-table .cell span { display : block; margin-top : 6px; color :#7e869f; font-size : 14px  }
section#myjb .gift-table-wrap .gift-table .cell:nth-child(1) { width : 30px; color : #7e869f}
section#myjb .gift-table-wrap .gift-table .cell:nth-child(2) { width : 60px; color : #ff6a13 }
section#myjb .gift-table-wrap .gift-table .cell:nth-child(3) { text-align : left }
section#myjb .gift-table-wrap .gift-table .cell:nth-child(4) { width : 110px; color : #7e869f; font-size : 12px }


/* 아이디 / 비밀번호 찾기 */
section#findinfo h2.title { background : url('/design/img/sub/myjb/ic-cscenter.png') no-repeat left 20px center; padding : 10px 10px 10px 45px; margin : 0 0 -30px 0 }


/* 회원가입 */
section#join { margin-top : -40px }
section#join .input-txt { margin-top : -20px }
section#join .input-txt ul li { margin-bottom : 30px }
section#join .input-txt ul li span { position : absolute; margin-top:10px; left : 10px }
section#join .input-txt ul li span.color-orange { color : #ff6a13 }
section#join .join-gray-bar { overflow : hidden; padding : 12px 30px 12px 50px; background : #efeff0 url('/design/img/sub/myjb/ic-phone.png') no-repeat left 20px center }
section#join .join-gray-bar b { float : right; color : #6c778d }
section#join .input-txt2 > ul > li { padding : 0 10px; margin-bottom : 20px }
section#join .join-check { background : #efeff0; padding : 15px 30px }
section#join .join-check .agree{width:100%}
section#join .join-check .agree label { position : relative; display : inline-block; padding : 10px 0; width:80%; }
/*section#join .join-check label:after { content : '>'; position : absolute; right : 0 }*/
section#join p.join-check-all { padding : 10px 30px }
section#join .korea-check { display : block; height : 30px; line-height : 30px }
section#join .korea-check-slide { display : none; position : absolute; top : 35px; left : 0; z-index: 2; background : #efeff0; width : 100%; height : 150px; overflow : auto }
section#join .korea-check-slide p { padding : 10px }
section#join .korea-check-slide p:hover { background : #ccccdc; padding : 10px }
section#join .mCSB_inside > .mCSB_container { margin-right : 0 }

.check-k, .check-a { display : none }




/* 이용권 구매 */
section#usebuy h2 { padding : 15px 20px 15px 45px; background : url('/design/img/sub/myjb/ic-cscenter.png') no-repeat left  20px center; font-size : 16px  }
section#usebuy .input-txt { padding : 0 }
section#usebuy .input-txt li { padding : 10px 20px 0 20px }
section#usebuy .input-txt li button { color : #ef6a1c }


/* 마일리지 */
section#mileage .open-list ul li.no-bg a { background : transparent !important }
section#mileage .open-list ul li a { background : url('/design/img/sub/myjb/accor-down.png') no-repeat left 110px center; background-size : 10px 6px }
section#mileage .open-list ul li.active a { background : url('/design/img/sub/myjb/accor-up.png') no-repeat left 110px center; background-size : 10px 6px }
section#mileage .open-list ul li a span { position : absolute; bottom : 10px; right : 10px; padding-right : 25px; font-size : 14px }
section#mileage .open-list ul li a span b { color: #fff; font-size : 11px; background : #ef6a1c; border-radius : 100%; padding : 0 4px; position : absolute; top : 0; right : 0 }
section#mileage .open-list ul li a span b.gray { color: #fe6a13; font-size : 11px; background : #eeeef0; border-radius : 100%; padding : 0 5px; position : absolute; top : 0; right : 0 }
section#mileage .open-list div.m-table { display : table; width : 100% }
section#mileage .open-list div.m-table .group { display : table-row }
section#mileage .open-list div.m-table .group .cell { position : relative; display : table-cell; text-align : center; font-size : 14px; padding : 5px 5px   }
section#mileage .open-list div.m-table .group .cell:nth-child(1) { width : 60px }
section#mileage .open-list div.m-table .group .cell:nth-child(2) { text-align : left }
section#mileage .open-list div.m-table .group .cell:nth-child(3) { width : 60px }
section#mileage .open-list div.m-table .group .cell b { background : #efeff1; width : 18px; height : 18px; border-radius : 100%; color : #fe8743; display : inline-block; line-height : 18px; font-size : 12px; margin-left : 4px  }


/* 검색 */
section#search h2 { padding : 0 20px 10px 20px; border-bottom : 1px solid #ebebeb; color : #848da4 }
section#search h2 span { color : #fa7931 }
section#search .search-input { padding : 30px 20px }
section#search .search-input p { position : relative; border-bottom : 1px solid #fe6a13 }
section#search .search-input p:before { content : ''; width : 1px; height : 10px; background : #fe6a13; position : absolute; bottom : 0; left : 0 }
section#search .search-input p:after { content : ''; width : 1px; height : 10px; background : #fe6a13; position : absolute; bottom : 0; right : 0 }
section#search .search-input p input[type="search"] { width : 90%; display : block; height : 35px; line-height : 35px; border : transparent; text-indent : 15px }
section#search .search-input p input[type="image"] { width : 15px; height: 15px; position : absolute; bottom : 10px; right : 10px; color:inherit;text-decoration:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);border:0;outline:0; }


/* 강의일정 */
section#calendar .cal-top { position : relative; height : 50px; line-height : 50px; width:100%;}
section#calendar .cal-top .cal-top-select{width:23.3%; display: inline-block;}
section#calendar .cal-top .cal-top-title {width:51.5%; display: inline-block;}
section#calendar .cal-top .cal-top-title h1 { text-align : center; color : #f36a22; font-size : 16px;}
/*section#calendar .cal-top .cal-top-select a { position : absolute; top : 0 }*/
.month_next { padding-right: 10px ; text-align: right;}
.month_prev { padding-left: 10px}

section#calendar .cal-body table { width : 100% }
section#calendar .cal-body table thead tr th { border-top : 1px solid #dadada; border-bottom : 1px solid #ebebeb; padding : 10px; font-size : 14px }
section#calendar .cal-body table tbody tr td { position : relative; border-bottom : 1px solid #ebebeb; padding : 10px; text-align : center; vertical-align : top; height : 70px; font-size : 14px }
section#calendar .cal-body table tbody tr td span.o-border { border : 1px solid #ff6a13; padding : 1.5px 3px; display : inline-block; border-radius : 100% }
section#calendar .cal-body table tbody tr td span.o-border2 { border : 1px solid #ff6a13; padding : 2px 7px; display : inline-block; border-radius : 100% }
section#calendar .cal-body table tbody tr td span.today { color : #ff6a13 }
section#calendar .cal-body table tbody tr td b { position : absolute; display : block; left : 0; bottom : 10px; width : 100%; text-align : center; font-size : 11px; color : #ff6a13 }
section#calendar .cal-body table tbody tr td a { position : absolute; display : block; left : 0; bottom : 10px; width : 100%; text-align : center }
section#calendar .cal-title { padding : 10px 0; text-align : center; background : #efeff0; font-size : 15px; font-weight : bold  }
.padding0 { padding : 0 !important }
section#calendar .cal-txt { padding : 30px 20px }
section#calendar .cal-txt p { margin : 10px 0 }
button.join-btn { display : block; width : 95%; height : 50px; line-height : 50px; text-align : center; background : #ff6a13; color : #fff; font-size : 16px; margin : 50px auto 0 }
button.join-btn b { display : inline-block; margin-right : 5px }

.cal-modal { text-align : center }
.cal-modal p { border-bottom : 1px solid #e8e8e8; padding : 10px 0  }
.cal-modal p.cal-m-top { color : #6c778d }
.cal-modal p input { border : transparent; background : transparent; height : 35px; line-height : 35px; font-size : 18px }
.cal-modal p input[type="text"] { width : 100px; text-align : center; font-weight : bold  }
.cal-modal > div { padding : 20px 0 ; overflow : hidden }
.cal-modal > div button { float : left; display : block; width : 46%; margin : 0 2%; border-bottom : 1px solid #f9c3a4; position : relative; height : 30px }
.cal-modal > div button:before { content : ''; width : 1px; height : 10px; background : #f9c3a4; position : absolute; bottom : 0; left : 0  }
.cal-modal > div button:after { content : ''; width : 1px; height : 10px; background : #f9c3a4; position : absolute; right : 0; bottom : 0 }
.cal-modal > div button.close { border-bottom : 1px solid #adb1b7 }
.cal-modal > div button.close:before { background : #adb1b7 }
.cal-modal > div button.close:after { background : #adb1b7 }
.schedule_listen{display:none;}

.ic-alram { padding : 0 20px 0px 30px }
.ic-alram p { background : url('/design/img/sub/myjb/ic-alram.png') no-repeat left center; background-size : 18px 20px; padding : 5px 0 5px 30px; color : #6c778d }

.cscenter-bg { background : #efeff0 url('/design/img/sub/myjb/ic-cscenter.png') no-repeat left 30px center; padding : 10px 30px 10px 60px; font-weight : bold; overflow : hidden }
.cscenter-bg b { float : right; color : #6c778d }

.cscenter-nobg { background : url('/design/img/sub/myjb/ic-cscenter.png') no-repeat left 30px center; padding : 10px 30px 10px 60px; font-weight : bold; overflow : hidden }
.cscenter-nobg .cs_phone { float : right; padding : 0 25px; color : #6c778d; background : url('/design/img/sub/myjb/ic-phone.png') no-repeat right center }



/* input-txt */
.input-txt { padding : 40px 20px }
.input-txt li { position : relative; padding : 30px 10px 0 10px; border-bottom : 1px solid #333b4b;}
.input-txt li.noborder { overflow : hidden; border-bottom : transparent; padding : 0 !important }
.input-txt li.noborder:before { display : none }
.input-txt li.noborder:after { display : none }
.input-txt li.noborder ul { overflow : hidden }
.input-txt li .half { float : left; width : 49%; margin : 0 0 0 1% !important; padding : 0 10px }
.input-txt li .half:nth-child(odd) {  margin : 0 1% 0 0 !important }
.input-txt li:before { content : ''; width : 1px; height : 10px; background : #333b4b; position : absolute; bottom : 0; left : 0 }
.input-txt li:after { content : ''; width : 1px; height : 10px; background : #333b4b; position : absolute; bottom : 0; right : 0 }
.input-txt li.active { position : relative; padding : 30px 10px 0 10px; border-bottom : 1px solid #ef6a1c }
.input-txt li.noborder .half.active { padding : 0 10px !important }
.input-txt li.active:before { content : ''; width : 1px; height : 10px; background : #ef6a1c; position : absolute; bottom : 0; left : 0 }
.input-txt li.active:after { content : ''; width : 1px; height : 10px; background : #ef6a1c; position : absolute; bottom : 0; right : 0 }
.input-txt li input[type="text"],
.input-txt li input[type="password"],
.input-txt li select, .input-txt li input[type="tel" ] { width : 100%; display : block; border : transparent; color : #333b4b; background : transparent; height : 30px }
.input-txt li.has-btn input[type="text"], .input-txt li.has-btn input[type="password"], .input-txt li.has-btn input[type="tel" ]{ width : 70% }
.input-txt:after { content : ''; display : block; clear : both }
.input-txt li.has-btn button.check-btn { position : absolute; bottom : 0; right : 0; padding : 10px 20px; color : #6c778d; font-weight : bold }

.input-txt2 li { color : #6c778d; font-weight : bold  }
.input-txt2 li button.check-btn { position : absolute; bottom : 0; right : 0; padding : 10px 20px; font-weight : bold }

.cardnumber { height : 30px }

/* normal-txt */
.normal-txt-list { padding : 40px 20px }
.normal-txt-list li { position : relative; padding : 30px 10px 10px 80px; border-bottom : 1px solid #333b4b; text-align : right; color : #6c778d }
.normal-txt-list li span { position : absolute; top : 30px; left : 10px; color : #333b4b; font-weight: bold;}
.normal-txt-list li:before { content : ''; width : 1px; height : 10px; position : absolute; left :0; bottom : 0; background : #333b4b }
.normal-txt-list li:after { content : ''; width : 1px; height : 10px; position : absolute; right :0; bottom : 0; background : #333b4b }
.normal-txt-list li.active { position : relative; padding : 30px 10px 10px 10px; border-bottom : 1px solid #ef6a1c }
.normal-txt-list li.active:before { content : ''; width : 1px; height : 10px; position : absolute; left :0; bottom : 0; background : #ef6a1c }
.normal-txt-list li.active:after { content : ''; width : 1px; height : 10px; position : absolute; right :0; bottom : 0; background : #ef6a1c }
.normal-txt-list li select { padding : 5px 10px; border : transparent; background : transparent }
.normal-txt-list li input { padding : 5px 10px; border : transparent; background : transparent; width : 50%; text-align : right }


/* accordion */
.open-list { padding : 30px 20px }
.open-list > ul > li { margin-bottom : 25px }
.open-list > ul > li > a { display : block; position : relative; padding : 10px 40px 10px 10px; border-bottom : 1px solid #333b4b; color : #000; background : url('/design/img/sub/myjb/accor-down.png') no-repeat right 10px center; background-size : 10px 6px; transition : all .3s ease  }
.open-list > ul > li > a:before { content : ''; width : 1px; height : 10px; background : #333b4b; position : absolute; bottom : 0; left : 0 }
.open-list > ul > li a:after { content :''; width : 1px; height : 10px; background : #333b4b; position : absolute; bottom : 0; right : 0 }
.open-list > ul > li.active a { background : url('/design/img/sub/myjb/accor-up.png') no-repeat right 10px center; background-size : 10px 6px; border-bottom : 1px solid #f36a22 }
.open-list > ul > li.active a:before { content : ''; width : 1px; height : 10px; background : #f36a22; position : absolute; bottom : 0; left : 0 }
.open-list > ul > li.active a:after { content :''; width : 1px; height : 10px; background : #f36a22; position : absolute; bottom : 0; right : 0 }
.open-list > ul > li > div { display : none; padding : 10px; color : #626d88 }
.open-list > ul > li > div.gray-bg { background : #efeff0 }
.open-list > ul > li > div img { display : block; width : 100%; height : auto !important }

.open-list2 { padding : 0 20px }
.open-list2 > ul > li > a { text-align : right }
.open-list2 > ul > li > a span { position : absolute; top : 10px; left : 10px }
.open-list2 > ul > li > div { overflow : hidden; padding : 10px }
.open-list2 > ul > li button.ok-btn { float : right; width : 100px; border-bottom : 1px solid #333b4b; position : relative; font-size : 13px; margin : 0 }
.open-list2 > ul > li button.ok-btn:before { content : ''; width : 1px; height : 10px; position : absolute; bottom : 0; left : 0; background : #333b4b }
.open-list2 > ul > li button.ok-btn:after { content : ''; width : 1px; height: 10px; position : absolute; bottom : 0; right : 0; background : #333b4b}

.open-list3 { padding : 30px 20px }
.open-list3 > ul > li { margin-bottom : 25px }
.open-list3 > ul > li > a { display : block; position : relative; padding : 10px 40px 10px 10px; border-bottom : 1px solid #333b4b; color : #000; background : url('/design/img/sub/myjb/accor-down.png') no-repeat right 10px center; background-size : 10px 6px; transition : all .3s ease  }
.open-list3 > ul > li > a:before { content : ''; width : 1px; height : 10px; background : #333b4b; position : absolute; bottom : 0; left : 0 }
.open-list3 > ul > li a:after { content :''; width : 1px; height : 10px; background : #333b4b; position : absolute; bottom : 0; right : 0 }


@media ( max-width : 450px) {
	section#magazine ul li { width : 50% }
}