@charset "utf-8";
/* wv.v.1.0 2019-04 */

/* common */
html,body { font-size:14px; color:#666; line-height:1.4; word-break:keep-all; margin:0px; font-family: 'NanumBarunGothic', sans-serif;letter-spacing: -0.5px;}

img {border:0px; vertical-align:middle;}
select { float: right;padding: 0 5px; margin-top: 16px; padding-right: 15px; height: 26px; line-height: 26px; vertical-align: middle;color: #858585;
-webkit-appearance: none;-moz-appearance: none; appearance: none;border-radius: 0; -webkit-appearance: none;
 -moz-appearance: none;appearance: none;border-radius: 5px;    border-color: #D7D7D7; background: url(/assets/about/images/ic_selectDown.png) no-repeat 90% 50%;}

button {border:0px; background:none; margin:0px; padding:0px; cursor:pointer; font-family: 'NanumBarunGothic', sans-serif;}
ul,ol,dl,dd {list-style:none; margin:0px; padding:0px;}
li {list-style:none; padding:0px;}
a {text-decoration:none; color:#666;}
a:hover {text-decoration:none;}
fieldset {font-size:0; border:0; margin:0; padding:0}

.ac {text-align:center !important;}
.al {text-align:left !important;}
.ar {text-align:right !important;}
.skip {font-size:0; width:0; height:0; text-indent:1000px; line-height:0; overflow:hidden;}
caption {font-size:0; text-indent:-9999px; overflow:hidden; height:0;}
.block{display:block;}
.red{color:#D31F21;}
.bold {font-weight:600;}
.black{color:#000;}
.blue{color:#19468E;}
.textC{text-align:center;}
.teachName, .classTime{padding:0 5px;}
.border-bg {   position: relative;     border-bottom: 7px solid #EBEBEB;}
.border-bg:after { position: absolute;content: "";left: 0;bottom: 0px;width: 100%;height: 1px;background-color: #D1D1D1;}
.topArea {width: 100%; height: 61px;} 
p.text {  margin-top: 15px; font-size:15px;    text-align: justify;} 
.ellipsis {width:100px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.ellipsis2{overflow: hidden;word-break: break-word;text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical;} 


/*button*/
.moreBtn {    padding: 0;height: 42px;margin-bottom: 24px;border: 1px solid #BABABA; text-align: center;font-size: 14px;color: #000;}
.linkBtn {    display: block;padding: 0 10px;color: #fff;}
.searchOutBtn {    position: absolute;right: 0; top: 33px;width: 48px;}
.searchOutBtn img {    width: 100%;}
#skipnavigation a {position:absolute; left:-3000%;}
#skipnavigation a:focus { display:block; left:0; top:0; z-index:10000000000; width:100%; height:30px; line-height:30px; background:#039; color:#fff; text-align:center;}

/* 임시 guide :: 활용방안 끝나면 모두 삭제 */


/* header layout */
.topBannerBox {width:1080px; margin:0 auto;}
.topBannerBox.full {width:100%;}

.topLayout {height:175px; border-bottom:1px solid #ccc; position: relative;}
	
		.topLayoutTopIn {width:1080px; margin:0 auto;}
		.topLayoutTopIn ul li {width:140px; float:left; height:45px;}
		.topLayoutTopIn ul li a {display:block; font-size:9px; text-align:center; line-height:45px; color:#9b9b9b;}
		.topLayoutTopIn ul li a span {font-size:14px; color:#686868;}
		.topLayoutTopIn ul li.on a {color:#111; background-color:#fff;}
		.topLayoutTopIn ul li.on a span {color:#d52021;}
	.topBuBox {position:relative; width:1080px; margin:0 auto; height:70px;}
	.topBuBox > ul {float:right; margin:20px 0 0px 0px;}
	.topBuBox > ul > li {float:left;}
	.topBuBox > ul > li > a {display:block; padding-left:10px; font-size:13px; color:#858585; line-height:30px;}
		.topBuBoxTopR {position:absolute; right:0px; top:20px; width:170px; height:30px; border:1px solid #d7d7d7; border-radius:15px; font-size:13px; color:#000; line-height:32px;}
	.topBuBox ul.topBuBoxTopIn li a{display:inline-block; padding:0 10px; font-weight: 400;}
	.topBuBox ul.topBuBoxTopIn li span.gray {color:#D7D7D7;}
	.topBuBox ul.topBuBoxTopIn li:first-child {position: relative;}
		.topBuBox ul.topBuBoxTopIn li:first-child::before{display:block; content:''; position: absolute; right:0; top:11px; background-color:#D7D7D7; width:1px; height:8px;}
	.topMenuBox {position:relative; width:1080px; margin:0 auto;}
	.topMenuBox h1 {position:absolute; left:0px; top:0px; margin:0px;}
	.topMenuBox > ul {margin:0px 0px 0px 160px;}
	.topMenuBox > ul > li {float:left; position: relative;}
	.topMenuBox > ul > li > a {display:block; line-height:50px; padding:0px 20px;color:#272937; font-size:17px; font-weight:bold; letter-spacing:-0.5px;}
		.topMenuBox > ul > li > a span.icon-k-down {vertical-align: middle; padding-left: 5px; font-size:13px; font-weight:bold;}
		.eventIcon{position: absolute; left:0; top:-31px; background-image: url('/assets/user/images/navi_newBg.png'); background-repeat: no-repeat; width:32px; height:34px; color:#fff; font-size:11px; font-weight: bold; line-height:34px; text-align: center;}
	.topLayoutGnbR {position:absolute; right:0px; top:6px;}
		.topMenuSubMenu{ display:none; z-index:2; position: absolute; left:0; top:60px; width:100%; height:454px; background-color:#fff;}
    .topLayoutGnbRIn{overflow:hidden; }
    .topLayoutGnbRleftBox{text-align: right;}
    .topLayoutGnbRIn div.topLayoutGnbRleftBox span.icon{color:#222; font-size:20px;}
	.topLayoutGnbRleftBox, .topLayoutGnbRrightBox{float:left;line-height:30px;}
	.topLayoutGnbRleftBox span.icon, .topLayoutGnbRrightBox span.icon{vertical-align: middle;}
    .topLayoutGnbRrightBox{padding-left:22px;}
    



.topNav {height:50px;}
.topNav.red {background-color:#d31f21;}
.topNav.white {background-color:#fff;}

		.topNavL {float:left; color:#fff; line-height:70px; font-size:15px;}
		.topNavL h2 {display:inline-block; font-size:27px; margin:0px;}
		.topNavR {float:right;} 

		 .alignment { position: relative; height: 25px;;  margin-bottom: 16px;  }
		 .alignment ul li {float: left;padding-left: 10px;}
		 .alignment ul li:first-child { padding-left: 0px; padding-right: 10px;background: url('/assets/m-user/images/line.png') no-repeat right 3px;}
		
		 .alignment a { font-size: 16px;color: #9C9C9C; }
		 .alignment li.on a{ color: #000;}
		 .alignment li a span {    padding: 0 5px; font-size: 15px; color: #9C9C9C;}
		 .alignment li.on a span { color: #D31F21;}


/* content layout */
.wrap {position: relative;width:100%; margin:0 auto;}
.contentBoxIn {  margin: 0 auto; margin-top: 30px;overflow: hidden;  padding: 0 16px;   padding-bottom: 0px;}



	.contentBox {position: relative;margin:0 auto;margin-top: 60px;}
		.conTopBannerBox {margin-top:0px;}
		.conCmsBox {margin-top:0px;border: 1px solid #000;}
		.conSystemBox {margin-top:0px;}

	.quickBox {position:absolute; top:0px; right:10px;}
	.bottonBnr {text-align: center;background-color:#eaeaef;}
	
	
.textList {    margin-top: 30px;}
.textList li {    margin-bottom: 30px;}
.textList li p {     position: relative;    padding-left: 8px; color: #000;font-weight: 600;margin-bottom: 10px;}
.textList li p:before {position:absolute; content:""; top:9px; left:0; width:3px; height: 3px;     border-radius: 50px;background-color:#000;}
.textList li span {     line-height: 22px;   font-size: 14px;}


.grayContBox { padding: 20px;background-color:#F6F6F6;}
.grayContBox .imgTextBox {margin-bottom:0;padding-top: 15px;}
.grayContBox p.contTitleB {    font-size: 20px;    line-height: 30px;}


/*tab*/
/* .tabLayoutWrap {padding: 0 16px;} */
.tabLayout {position: relative; padding: 0 16px; overflow: hidden;border-bottom: 1px solid #E9E9E9;}

.tabLayout li { float: left;position: relative;width: 20%;text-align: center;height: 40px;line-height: 50px;font-size: 15px;cursor: pointer;}
.tabLayout li a {display: block;}
/* .tabLayout li.on {border-bottom: 3px solid #D31F21;}   */
.tabLayout li.on a { font-weight: 600; color: #D31F21; }  
.tabLayout li:after {position: absolute;left: 0%;bottom: 0px;content: '';width: 0%;height: 3px; background-color: #D31F21;transition: .35s;transform: translateX(0%); }  
.tabLayout li.on:after {width: 100%;}



.tabLayout.list2 li{width:50%;}
.tabLayout.list3 li{width:33.3%;}
.tabLayout.list4 li{width:25%;}
/* .tabLayout.list5 li{}
.tabLayout.list6 li{} */

.swipeWrap { border-bottom: 1px solid #E9E9E9;}

.tabSwipe { width: 100%;   overflow: hidden; overflow-x: scroll;}
.tabSwipe .tabLayout {    width: 550px;padding: 0; border-bottom: none;}
.tabSwipe .tabLayout li {    width: auto;}
.tabSwipe .tabLayout li a {padding: 0 19px;}


/*searchBox*/

.searchBox { position: relative; width: 100%; margin: 0px auto 20px; }
.searchBox input[type="text"] { width: 96%;  border-right: 1px solid #e1e1e1; }
.searchBox button {position: absolute; bottom: 0; right: 0;    width: 36px;  height: 36px; line-height: 32px;    font-size: 20px;}
.searchBox button span { display: inline-block; margin-top: 7px;}
.searchBox select.styleSelect {margin-bottom: 10px;}

	
/*board*/


/*리스트형 게시판 모바일*/
.postListBox {margin: 20px 0;}
.postListBox .postList {}
.postListBox .postList a {padding: 0;}

.postListBox .postList .list_gBox .listTitle { padding-left: 0px; padding-top: 0; border-top: none;    text-overflow: ellipsis;-o-text-overflow: ellipsis;overflow: hidden;white-space: nowrap; }
.postListBox .postList .list_gBox .listTitle:before { display: none; }
.postList li:nth-child(odd) {background-color: #F6F6F6;}
.postList .list_gBox {margin: 0; padding: 10px 16px;border: none;}
	.list_gBox .listTitle {margin: 0;font-size:15px; font-weight:600;}
	.list_gBox .listDate { margin-top: 8px;margin-bottom: 0;padding-left: 0px;font-size:13px;}


/*갤러리형 게시판(공통)*/
.galleryList { margin-bottom: 20px;}
.galleryListIn { margin: 0px;}
.galleryListIn li { float: none; width: 100%;  margin: 0px 0px 20px 0px;}
.galleryListIn li:first-child {margin-left:0px;}
.galleryListIn li img {width:100%;}
.galleryListIn .listText {  padding: 20px; border: 1px solid #D7D7D7;}
.galleryListIn .listText .subTag { display: inline-block; margin-top:10px;  font-size: 16px;color: #666666;}
.galleryListIn .listText .topDate { font-size: 16px;font-weight: 600;color: #131313;}
.galleryListIn .listText .title {  margin-top: 0px;overflow: hidden;
    word-break: break-word;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;font-size: 18px; color: #131313;}
.galleryListIn .listText .title a {color: #131313;}    

/*게시판 pageNavigation*/
.pageNavigation {margin-bottom:27px;}
.pageNavigationIn {text-align: center;}
.pageNavigation li{display:inline-block; padding:0 5px;}
.pageNavigation a{color:#B2B2B2; font-size:24px; font-weight:400; }
.pageNavigationIn li.arrow a{font-size:15px;}
.pageNavigation li.on a{color:#000;}
.pageNavigation .dot{display: inline-block; width:3px; height:3px; background-color:#B2B2B2; border-radius: 2px; margin-left:2px;}


/*게시판 상세 내용 영역*/
.detailCont {}
.detailCont .titleBox { padding: 10px;background-color: #F6F6F6;}
.detailCont .titleBox p.contTitle { font-size: 18px;font-weight: 600;letter-spacing: 0px;}
.detailCont .dateList {overflow: hidden;}
.detailCont .dateList li {position: relative; float:left; margin-left: 15px;padding-left: 15px; font-size: 13px;}
.detailCont .dateList li:after {position: absolute;content: "";top: 2px;  left: 0;width: 2px; height: 13px;border-radius: 50px;background-color: #D8D8D8;}
.detailCont .dateList li:first-child {margin-left: 0px;padding-left: 0px;}
.detailCont .dateList li:first-child:after {display:none;}
.detailCont .dateList li.view { font-weight: 600; color: #000;}
.detailCont .dateList li .icView { width:18px;}

.detailContIn {margin-bottom: 30px; padding: 20px 0;  text-align: justify;}
.detailContIn img {width:100%;}
.detailContIn p.contTitle {font-size:18px;}
.detailContIn p { margin-bottom: 20px;}


/*게시판 이전,다음 목록*/
.boardListBox {margin-top: 50px;border-top: 1px solid #E1E1E1;border-bottom: 1px solid #E1E1E1;}
.boardList {}
.boardList li {padding: 17px 0 17px 10px;border-top: 1px solid #ddd;}
.boardList li:first-child {border-top:none;}
.boardList li a {display: block;}
.boardList li img { margin-right: 20px;}
.boardList li span.control {margin-right: 30px;font-size: 16px;}
.boardList li p {display: inline-block;font-weight: 600;}


/*이미지+텍스트 레이아웃*/

.imgTextBox { margin-bottom: 30px;    padding-top: 30px; overflow: hidden;  }
.imgTextBox:first-child {padding-top:0;}
.imgTextBox .imgCont {    float: none; margin-bottom: 20px;}
.imgTextBox .imgCont img {width:100%;}
.imgTextBox .imgCont.inHeight {    height: 200px;} 
.imgTextBox .rinkBox { height: 35px;background-color: #F6F6F6;text-align: center;font-size: 13px;line-height: 35px;}
.textCont p.title {font-size:20px; color: #000;}

.imgTextBoxLine { margin-bottom: 20px; padding-top: 0px; overflow: hidden;  border: 1px solid #D7D7D7; }
.imgTextBoxLine .textCont { float: none; padding: 20px;text-align: left;}
.imgTextBoxLine .imgCont { float: none;}
.imgTextBoxLine .imgCont img {width:100%;}
.imgTextBoxLine .rinkBox {height: 35px;background-color: #F6F6F6;text-align: center;font-size: 13px;line-height: 35px;}
.imgTextBoxLine .textCont p.title {font-size:20px;font-weight: 600; color: #000;}

.textBox {margin-bottom: 30px; padding-top: 30px; }

.floatImgBox.imgCont {overflow: hidden;}
.floatImgBox.imgCont img {width:100%;}
.floatImgBox.imgCont .floatL {float:left;}
.floatImgBox.imgCont .floatR {float:right;}
	
	
/*tab*/

.tabBoxIn.twoTab li {width: 50%;}

.tabBoxIn{overflow:hidden;}
	.tabBoxIn ul{margin-bottom:30px; overflow: hidden;}
	.tabBoxIn li {float:left;}
	.tabBoxIn li:first-child{margin-left:0;}
	.tabBoxIn li a {transition: all .4s ease; position:relative; display:block; color:#666;  font-size:15px; font-weight:400; transition:all .4s ease;border:1px solid #DBDBDB; border-bottom:1px solid #333; text-align:center; border-left:0; padding:10px 0; }
	.tabBoxIn li:first-child a {border-left:1px solid #DBDBDB;}
	.tabBoxIn li a:before{ border: 0 solid transparent; box-sizing: border-box; content: '';display:block; position: absolute;width: 0;height: 0; top: 0;left: 0; z-index:1;}
		.tabBoxIn li a:after{ z-index:2;top: 0;right: 0;  border: 0 solid transparent; box-sizing: border-box; content: '';display:block; position: absolute;width: 0;height: 0; }
		.tabBoxIn li a:before { border-top-width: 1px; border-left-width: 1px; }
		.tabBoxIn li a:after { border-right-width: 1px;} 
		.tabBoxIn li.on a:before{ border-color: #000; transition: border-color 0s, width .3s, height .2s; width: 100%; height: 100%;}
		.tabBoxIn li.on a:after { transition: border-color 0s, width 0.3s, height .4s; width: 100%; height: 100%;border-color: #000;}
		.tabBoxIn li.on a:before {transition-delay: 0s, .2s, 0s;}
		.tabBoxIn li.on a:after {transition-delay: 0s, 0s, .4s;}
	.tabBoxIn li.on a { border-bottom:none; color:#000; font-weight:600;}
	
.tabContent .tabCont {display:none;}	
.tabContent .tabCont:first-child {display:block;}	
.tabContent .tabCont .textCont {margin-top:30px;    padding-bottom: 30px;}
.tabContent .tabCont img {width:100%;}
	


/* footer layout */

.footerLayout {position: relative;background-color: #E6E6ED;}
.footerBottomBox { clear: both;padding: 26px 16px;}
.footerbBoxIn {position: relative;width: 100%; margin: 0 auto; overflow: hidden;}
.footerBottomL { position: absolute;left: 0; top: 0;}
.footersnsLink {overflow: hidden;position: absolute;left: 0; bottom: 0;}
.footersnsLink li {float: left;}
.footersnsLink li a {display: block;padding: 0 7px;color: #000;}
.footersnsLink li:first-child a {padding-left: 0}
.footerBottomR {padding-left: 159px;}
.footerAddress {margin-bottom: 23px;}
.footerAddress strong {margin-bottom: 8px;color: #333;font-size: 16px;letter-spacing: -0.5px;font-weight: 600;}
.footerAddress address { color: #666;font-style: normal;line-height: 21px;}    
.copyRight {font-size: 12px;font-weight: 400;color: #888;}    



    
select.styleSelect {    float: left;width: 200px; height: 36px;  margin: 0;  font-size: 12px;    color: #858585;
    border: 1px solid #e1e1e1;    border-right: none;    border-radius: 0px;
    padding: 0 5px;background: url(/assets/m-user/images/selectDown3.png) no-repeat 100% 50%;}
select.styleSelect::-ms-expand{ display:none ; }
select.selectL { float:none; width:100%; margin-top: 30px;padding-right: 40px;}