.fr { float: right !important; }
.fl { float: left !important; }
.fn { float: none !important; }



/* 마진 */
.ml04 { margin-left: 0px !important }

.ml4 { margin-left: 4px !important }

.ml7 { margin-left: 7px !important }

.ml5 { margin-left: 5px !important }

.ml10 { margin-left: 10px !important }

.ml15 { margin-left: 15px !important }

.ml20 { margin-left: 20px !important }

.ml25 { margin-left: 25px !important }

.ml26 { margin-left: 26px !important }

.ml30 { margin-left: 30px !important }

.ml35 { margin-left: 35px !important }

.ml40 { margin-left: 40px !important }

.ml50 { margin-left: 50px !important }

.ml60 { margin-left: 60px !important }

.ml100 { margin-left: 100px !important }

.mr0 { margin-right: 0px !important }

.mr5 { margin-right: 5px !important }

.mr10 { margin-right: 10px !important }

.mr15 { margin-right: 15px !important }

.mr20 { margin-right: 20px !important }

.mr25 { margin-right: 25px !important }

.mr30 { margin-right: 30px !important }

.mr35 { margin-right: 35px !important }

.mr40 { margin-right: 40px !important }

.mr45 { margin-right: 45px !important }

.mr50 { margin-right: 50px !important }

.mt0 { margin-top: 0px !important }

.mt5 { margin-top: 5px !important }

.mt7 { margin-top: 7px !important }

.mt10 { margin-top: 10px !important }

.mt15 { margin-top: 15px !important }

.mt20 { margin-top: 20px !important }

.mt25 { margin-top: 25px !important }

.mt30 { margin-top: 30px !important }

.mt35 { margin-top: 35px !important }

.mt40 { margin-top: 40px !important }

.mt45 { margin-top: 45px !important }

.mt50 { margin-top: 50px !important }

.mt55 { margin-top: 55px !important }

.mt60 { margin-top: 60px !important }

.mt65 { margin-top: 65px !important }

.mt70 { margin-top: 70px !important }

.mt75 { margin-top: 75px !important }

.mt80 { margin-top: 80px !important }

.mt90 { margin-top: 90px !important }

.mt100 { margin-top: 100px !important }

.mt110 { margin-top: 110px !important }

.mb10 { margin-bottom: 10px !important }

.mb15 { margin-bottom: 15px !important }

.mb20 { margin-bottom: 20px !important }

.mb25 { margin-bottom: 25px !important }

.mb30 { margin-bottom: 30px !important }

.mb35 { margin-bottom: 35px !important }

.mb40 { margin-bottom: 40px !important }

.mb45 { margin-bottom: 45px !important }

.mb50 { margin-bottom: 50px !important }

.mb55 { margin-bottom: 55px !important }

.mb65 { margin-bottom: 65px !important }

.mb70 { margin-bottom: 70px !important }

.mb75 { margin-bottom: 75px !important }

.mb85 { margin-bottom: 85px !important }

.mtb10 { margin: 10px 0 !important }

.mtb15 { margin: 10px 0 !important }

.mtb20 { margin: 20px 0 !important }

.mtb50 { margin: 50px 0 !important }

.mtb60 { margin: 60px 0 !important }

.mauto { margin-left: auto !important; margin-right: auto !important }

/* 패딩 */
.p20 { padding: 20px!important ; }
.pr0 { padding-right: 0 !important }

.pr5 { padding-right: 5px !important }

.pr7 { padding-right: 7px !important }

.pr10 { padding-right: 10px !important }

.pr20 { padding-right: 20px !important }

.pl0 { padding-left: 0 !important }

.pl5 { padding-left: 5px !important }

.pl10 { padding-left: 10px !important }

.pl20 { padding-left: 20px !important }

.pl12 { padding-left: 13px !important }

.pt0 { padding-top: 0 !important }

.pt5 { padding-top: 5px !important }

.pt10 { padding-top: 10px !important }

.pt45 { padding-top: 45px !important }

.pt50 { padding-top: 50px !important }

.pt60 { padding-top: 60px !important }

.pt65 { padding-top: 65px !important }

.pt70 { padding-top: 70px !important }

.pt80 { padding-top: 80px !important }

.pt90 { padding-top: 90px !important }

.pb3 { padding-bottom: 3px !important }

.pb5 { padding-bottom: 5px !important }

.pb10 { padding-bottom: 10px !important }

.pb15 { padding-bottom: 15px !important }

.pb20 { padding-bottom: 20px !important }

.pb25 { padding-bottom: 25px !important }

.pb30 { padding-bottom: 30px !important }

.pb35 { padding-bottom: 35px !important }

.pb40 { padding-bottom: 40px !important }

.pb45 { padding-bottom: 45px !important }

.pb50 { padding-bottom: 50px !important }

.pb80 { padding-bottom: 80px !important }

/* 박스 사이즈 퍼벤트 */
.w5p { width: 5% !important }

.w10p { width: 10% !important }

.w15p { width: 15% !important }

.w20p { width: 20% !important }

.w25p { width: 25% !important }

.w30p { width: 30% !important }

.w35p { width: 35% !important }

.w40p { width: 40% !important }

.w45p { width: 45% !important }

.w50p { width: 50% !important }

.w55p { width: 55% !important }

.w60p { width: 60% !important }

.w65p { width: 65% !important }

.w70p { width: 70% !important }

.w75p { width: 75% !important }

.w80p { width: 80% !important }

.w85p { width: 85% !important }

.w90p { width: 90% !important }

.w95p { width: 95% !important }




/* 헤더 탑바 */

#header{
   width: 100%;
   height: 110px;
   box-sizing: border-box;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 80;
   line-height:60px;
   background:#fff;
   border-bottom: 1px solid #efefef;
   box-shadow: 0 3px 7px rgba(0, 0, 0, .1);
/*   border-bottom:1px solid #eee;
   -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.24);
   box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.07);*/
}


#gnb{
   position:relative;
   height:100%;
}

#gnb .logo{
   float:left;
   margin-left: 10px;
   margin-top: 17px;
   line-height: normal;
   height: auto;
   display: flex;
   align-items: center;
   gap: 8px;
}

#gnb .logo a{
   display:block;
}

#gnb .menu{
   float:right;
}

#gnb .menu li{
   float:left;
   margin-right:60px;
}

#gnb .menu li:last-child{
   margin-right:0
}

#gnb .menu li a{
   display:block;
   font-size:18px
}

#gnb #nav{
   position:relative;
}

#gnb #nav ul.navmenu{
   width:100%;
   margin:0;
   padding:0;
   position: absolute;
   z-index:1000;
   width:100%;
   top: 110px;
   background: #313862;
   display:none;
}

#gnb #nav ul.navmenu > li{
   background: #3FB9AE;
   border-bottom: 1px solid #efefef;
}

#gnb #nav ul.navmenu.ai > li{
   background: #5092E1;
   border-bottom: 1px solid #efefef;
}

#gnb #nav ul.navmenu > li > a{
   display:inline-block;
   font-size:20px;
   color:#fff;
   padding-left: 25px;
}

#gnb #nav ul.navmenu > li > a > span{
   color:#fff;
}

#gnb #nav ul.navmenu li .sub > li{
  border-bottom: 1px solid #efefef;
}

#gnb #nav ul.navmenu li .sub > li > a{
   display:block;
   background:#fff;
   color: #444;
   font-size:18px;
   line-height: 55px;
}


#gnb .navbtn a{
   display:inline-block;
   margin-right:10px;
}

#gnb .navbtn a:last-child{
   margin-right:0;
}

#gnb .navbtn img{
   height:20px;
}

#gnb #nav{display:block;}
#gnb .navbtn{display:block; height: 20px}
#gnb .menu{display:none}

#gnb .logo img{max-width:265px;}
#gnb .navbtn{display:block; line-height:normal; position: absolute; top:18px; right:20px;}



/* #gnb #nav ul.navmenu .icon_01{background: url(/m/images/icon_01.svg) 0 50% no-repeat;background-size: 19px }
#gnb #nav ul.navmenu .icon_02{background: url(/m/images/icon_02.svg) 0 50% no-repeat;background-size: 15px }
#gnb #nav ul.navmenu .icon_03{background: url(/m/images/icon_03.svg) 0 50% no-repeat;background-size: 20px }
#gnb #nav ul.navmenu .icon_04{background: url(/m/images/icon_04.svg) 0 47% no-repeat; background-size: 13px }
#gnb #nav ul.navmenu .icon_05{background: url(/m/images/icon_05.svg) 0 52% no-repeat;} */
#gnb #nav ul.navmenu .icon_01{background: url(/m/images/icon_01.svg) 0 50% no-repeat;background-size: 19px }
#gnb #nav ul.navmenu .icon_02{background: url(/m/images/icon_02.svg) 0 50% no-repeat;background-size: 15px }
#gnb #nav ul.navmenu .icon_03{background: url(/m/images/icon_03.svg) 0 43% no-repeat;background-size: 20px }
#gnb #nav ul.navmenu .icon_04{background: url(/m/images/icon_05.svg) 0 47% no-repeat;}
#gnb #nav ul.navmenu .icon_05{background: url(/m/images/icon_05.svg) 0 52% no-repeat;}
#gnb #nav ul.navmenu .icon_06{background: url(/m/images/icon_04.svg) 0 52% no-repeat;}



.nav_tab{display: inline-block; width: 100%; text-align: center;  }   
.nav_tab li{display: inline-block;}
.nav_tab li a{display: block; font-size: 15px; padding: 0 20px;  height: 38px; line-height: 39px; border: 1px solid #efefef; border-radius: 100px}

.nav_tab li.m_on a.on,
.nav_tab li.m_on a:hover{color: #fff; background: #3FB9AE}

.nav_tab li.ai_on a.on,
.nav_tab li.ai_on a:hover{color: #fff; background: #5092E1}

.nav_tab li.oy_on a.on,
.nav_tab li.oy_on a:hover{color: #fff; background: #f4a148e3}


#gnb .navUser{
   display:block; 
   line-height:normal; 
   position: absolute; 
   top:18px; 
   right: 84px;
   height: 20px
}
#gnb .logout, 
#gnb .login{
   display:block; 
   line-height:normal; 
   position: absolute; 
   top:18px; 
   right:53px;
   height: 20px
}


#gnb .navUser a, 
#gnb .logout a, 
#gnb .login a{
   display:inline-block;
   height: 20px;

}

#gnb .navUser img{
   height:20px;
}

.blue{ color: #3d5ea0 !important;}
.red{ color: #c30000 !important;}

/*로그인*/
.login-wrap{padding: 0 15px}
.login-wrap h2{width: 100%; text-align: center; font-size: 20px;}
.loginForm .mem_info{text-align: left;}
.icon_info {
    position: relative;
    padding-left: 23px;
    font-size: 15px;
    line-height: 1.2;
    text-align: left;
    color: #777;
}

.icon_info:before {
    position: absolute;
    display: inline-block;
    content: "";
    left: 0;
    top: 0px;
    width: 20px;
    height: 20px;
    margin-right: 3px;
    background: url(/m/images/info.png) no-repeat 0 0;
}


.login-box{ margin-top: 30px; padding: 20px; background: #e7e7e7}
.loginForm input.input_id { width: 100%; text-align: left; font-size: 15px; height: 40px; margin-bottom: 10px;}
.login-box ul{margin-top: 10px}

.login-box .login_btn{ display:inline-block; width:100%; border-radius: 3px; line-height: 50px; color: #fff; background: #3FB9AE; }
.btn_mberSch{display:inline-block; margin-top: 30px; width:100%; font-size: 14px; border-radius: 3px; color: #888; line-height: 40px; border:1px solid #ddd;}

.btn_wrap li{margin-bottom: 10px}
.btn_ok{display: block; padding: 15px 50px; border-radius:4px; font-size: 17px; text-align: center; color: #fff; background: #007b70}
.btn_gray{display: block; padding: 15px 50px; border-radius:4px; font-size: 17px; text-align: center; color: #fff; text-align: center; background: #787878}
.btn_gray_01{display: inline-block; padding: 0 10px; border-radius:4px; font-size: 15px; line-height: 40px; height: 40px; 
             text-align: center; color: #fff; text-align: center; background: #787878}

.btn_small{
   display: inline-block;
   color: #fff;
    font-size: 14px;
    padding: 0 15px;
    height: 34px;
    line-height: 34px;
    border-radius: 3px;
    text-align: center;
    background: #292f38;
    vertical-align: middle;
 }

.btn_add{
    display: inline-block;
   color: #fff;
    font-size: 14px;
    padding: 0 10px 0 25px;
    height: 34px;
    line-height: 37px;
    border-radius: 3px;
    text-align: center;
    color: #4179bd;
    background: url(/m/images/ic_add.png) 10px 50% no-repeat;
    border: 1px solid #5e96d9;
    vertical-align: middle;

}

.star{display: inline-block; width: 10px; height: 15px; vertical-align: middle; text-indent: -9999px; overflow: hidden; 
     background: url(/m/images/star.png) 0 0 no-repeat;}


/* table_col*/
.div_scroll{overflow-x: auto; padding-bottom: 10px}
.table_col {width: 100%; border-top:1px solid #292f38;}
.table_col thead > tr, .table_col tbody > tr{border-bottom: 1px solid #ddd;}    
.table_col thead > tr > th, 
.ngram_tb tbody > tr th {padding: 0 20px; font-weight: 500; text-align: center; line-height: 50px; height: 50px; background: #f6f6f6; color: #111;    white-space: pre;}
.table_col tbody > tr > td {padding: 0 20px; text-align: center; line-height: 1.2; padding: 10px}
.ngram_tb tbody > tr td{
	line-height: 28px;	
}
.table_col tbody > tr.tr-total{background: #696d73;}
.table_col tbody > tr.tr-total > td{ color: #fff;  }


/* table_row*/
.table_row {border-top: 2px solid #333; width:100%}
.table_row > tbody > tr > th{ background:#f8f8f8; border-bottom:1px solid #e1e1e1; padding:15px 10px; text-align:left;     word-break: keep-all; font-size:14px;    vertical-align: middle;  font-weight: 600;}
.table_row > tbody > tr > td{ background:#fff; padding:7px; font-size:15px; line-height:21px; text-align:left;  color:#444; border-bottom:1px solid #e1e1e1;   vertical-align:middle;
   text-align:left;}
.table_row > tbody > tr > td li{margin-bottom: 10px}
.table_row input,.table_row select,.table_row textarea{width: 100%; height: 40px; line-height: 40px; border-radius: 4px; border: 1px solid #bbb;}
.table_row input[type=radio], .ngram_tb input[type=radio] {width: 17px; height: 17px; vertical-align: middle;}
.table_row input::placeholder,.table_row select::placeholder{color: #999}

.table_row li{margin-bottom: 5px}
.table_row li:last-child{margin-bottom: 0}



.table_wrap_noti{border-top: 2px solid #333; width:100%}
.table_wrap_noti li{padding: 15px}
.table_wrap_noti li:nth-child(odd){background: #f3f3f3}
.table_row_noti{width: 100%;   table-layout:fixed ; }
.table_row_noti > tbody > tr > th{  padding:5px; text-align:left; line-height:1.2; word-break: keep-all; font-size:14px; color: #666;  vertical-align: middle; }
.table_row_noti > tbody > tr > td{padding:5px; font-size:14px; line-height:1.2; font-weight: 500; text-align:left;  color:#000;    vertical-align:middle;
     text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}

.table_wrap .small{font-size: 14px; line-height: 1.3; text-align: left; color: #777}

a.download { position: relative; padding-left: 27px; display: block;}
a.download:before {
    position: absolute;
    display: inline-block;
    content: "";
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    margin-right: 3px;
    background: url(/m/images/icon_down.png) no-repeat 0 0;
}



/*팝업*/
.mainLayerPop {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, .2);
    z-index: 999;
    width: 95%;
}

.mainLayerPop h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    background-color: #292f38;
    font-size: 1.1em;
    font-weight: 500;
    color: #fff;
}

.mainLayerPop .popcont {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    box-sizing: border-box;
}

.mainLayerPop h3 a {
    display: block;
    width: 50px;
    height: 50px;
    background: url(/m/images/ic_close.png) no-repeat center;
    text-indent: -9999em;
}

.mainLayerPop h3 span {
    margin-left: 15px;
    color: #fff;
}

.dim {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    z-index: 200;
}



/* paging */

#paging{
   display:inline-block;
   margin:30px auto 0px;
   	width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

#paging ul{
   float:left;
   padding:0px 12px;
}

#paging li{
   float:left;
   font-size: 14px;
   margin-right:12px
}

#paging li:last-child{
   margin-right:0
}

#paging li img{
   height:9px
}

#paging li a{
   display:block;
   color:#999;
}

#paging li.on a{
   color:#007b70;
   text-decoration: underline;
   font-weight:bold;
}

/* PAGING */
.paging_area {
	margin-top: 40px;
	text-align: center;
}
.paging_area span {
	display: inline-block;
	vertical-align: middle;
    line-height: 30px;
    border-radius: 3px;
    width: 30px;
    height: 30px;
}
.paging_area a {
	display: inline-block;
}
.paging_area .btn_first a,
.paging_area .btn_last a,
.paging_area .btn_prev a,
.paging_area .btn_next a {
	padding: 7px;
	text-indent: -999em;
	font-size: 0;
	line-height: 0;
	overflow: hidden;
	vertical-align: -1px;
}
/*.paging_area .btn_prev {
	margin-left: 10px;
	margin-right: 30px;
}
.paging_area .btn_next {
	margin-left: 30px;
	margin-right: 10px;
}*/
.paging_area .btn_first a:before {
	display: inline-block;
	content: "";
	width: 15px;
	height: 13px;
	background: url(/m/images/icon.png) no-repeat -70px -35px;
}
.paging_area .btn_last a:before {
	display: inline-block;
	content: "";
	width: 15px;
	height: 13px;
	background: url(/m/images/icon.png) no-repeat -150px -35px;
}
.paging_area .btn_prev a:before {
	display: inline-block;
	content: "";
	width: 7px;
	height: 13px;
	background: url(/m/images/icon.png) no-repeat -70px -35px;
}
.paging_area .btn_next a:before {
	display: inline-block;
	content: "";
	width: 7px;
	height: 13px;
	background: url(/m/images/icon.png) no-repeat -130px -35px;
}
/* .paging_area .paging_num a {
	width: 35px;
	height: 35px;
	text-align: center;
	color: #666;
	line-height: 33px;
} */
.paging_area .paging_num.on a {
	position: relative;
	font-weight: 700;
	color: #007b70;
}
.paging_area .paging_num_ai.on a{
	color: #235ca0;
}

.img_home{text-align: center; padding: 150px 0}
.img_home img{width: 80%}
.img_home p{font-size: 26px; color: #000; letter-spacing: -0.07em}
.img_home .b{margin-top: 30px; font-weight: 600;}
.img_home .s{margin-top: 5px;font-weight: 300;}
.btn_home{
   margin-top: 30px;
   display: inline-block; 
   padding: 0 40px; 
   font-size: 22px; 
   font-weight: 500;
   line-height: 48px;
   height: 48px;
   color: #fff; 
   background: #5094de;
   border-radius: 100px;
 }
/* -----------------------------240909 calendar css-------------------------------*/

.calendar-top{margin-top:70px; text-align:center}
.calendar-top .year{position: relative; display: inline-block; }
.calendar-top #year{line-height: 40px;  font-size: 36px; font-weight: 500;  color: #000;  display: inline-block;  vertical-align: bottom;}
.year_prev{    
  display:inline-block;
  margin-right:32px;
    width: 40px;
    height: 40px; 
    background: url(/m/images/btn_prev.svg) no-repeat center center;
    background-size: .45rem;
    border: 1px solid #D9D9D9;
    border-radius: 5px;
    text-indent: -9999px;}
    
 .year_next{    
  display:inline-block;
  margin-left:32px;
    width: 40px;
    height: 40px; 
    background: url(/m/images/btn_next.svg) no-repeat center center;
    background-size: .45rem;
    border: 1px solid #D9D9D9;
    border-radius: 5px;
    text-indent: -9999px;}   
  .month-list{margin-top:30px;}  
  .month-list ul:after{ content:""; display:block; clear:both} 
 .month-list li{float:left; width:25%;}  
  .month-list li a{display:block; line-height:50px;  font-size:17px; color:#444; font-weight:500;  text-align:center; border-bottom:1px solid #d9d9d9;}
  .month-list li a.on{color:#000; line-height: 47px; border-bottom:4px solid #007B70; }
  
  .calendar-wrap {
  }
.calendar-box{margin-top:50px; border: 1px solid #D7D7D7;}
.calendar-box.on{border:4px solid #007B70;}
.calendar-box:after{ content:""; display:block; clear:both}
 .month-box{ float: left; padding-bottom: 20px; width: 30%; border-right: 1px solid #D7D7D7;  box-sizing: border-box;}
 .calendar-box .month { padding: 20px 0 6px 0;  color: #000;  font-size: 19px;  font-weight: 500;  text-align: center;}
 .tbl_calendar th { height: 2.5rem;   color: #777; font-size: 14px;  font-weight: normal;  line-height: 2.5rem;  text-align: center;}
 .tbl_calendar td { position: relative;  padding: .5rem 0;  color: #000;  font-size: 15px;  font-weight: 500;  text-align: center;}
 .tbl_calendar .day_sun,
 .tbl_calendar .day_sun a{color: #db2a01;}
.cal-mk{width: 5px; height: 5px; background: #D30000; border-radius: 100px; position: absolute;  top: 6px;  right: 10px;}
 
 
 .calendar-detail{ width: 100%;   box-sizing: border-box; float: left;  }    
 .calendar-detail ul li {padding: 20px;}
  .calendar-detail ul li span {
                              display: block;
                              width: 100%;
                              text-align: left;
                              
  }
  .calendar-detail ul li .date {  width:  100%; color: #777;  font-size: 14px;  font-weight: 400;     padding-bottom: 8px; }
  .calendar-detail ul li .txt {color: #000;  vertical-align: middle; font-size: 16px;  font-weight: 500; overflow: hidden; 
                                 text-overflow:ellipsis;  word-wrap:normal;}

 
/* 241111 */

 /* 말평 아레나 과제 수정
 */
 .updown {
 	    display: flex;
    	align-items: center;
 }
 .updown svg {
		 width: 25px;
		 height: 25px
 }
 table td.updown_wrap {
 	display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 42px;
}

.arena_progress {
	width: 90%;
    display: flex;
    margin: 0 auto;
}