@charset "euc-kr";
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
/* Common */
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
body,input,textarea,select,button,table{font-family:'Noto Sans KR',Dotum,AppleGothic,sans-serif;font-size:12px}
img,fieldset{border:0}
ul,ol{list-style:none}
em,address{font-style:normal}
a{text-decoration:none;color:#333}
a:hover,a:active,a:focus{text-decoration:none !important; }




/* Layout */
#wrap{width:100%;height:100%}





#header{position: relative;width:100%;height:83px;border-bottom:1px solid #ccc;}
#header .gnb,#header .gnb div{width:1024px;height:86px;margin:0 auto;text-align:center}
#header .lnb{position: relative;width:1024px;margin:0 auto;}
#header .lnb .logo {position: absolute;width:183px;top:19px;left:50%;margin-left:-91px;font-size:0;}

#h_gnb{position: relative;width:100%;height:41px;background:#fff}
#h_gnb .lnb_menu{position: absolute; width:1024px; margin:0 auto;left:38%;}


.top_bn{position: absolute; top:23px; left:0; z-index:100}

.top_nav{position: absolute; height:20px;top:55px;right:0;z-index:100}
.top_nav .nav_menu{font-size:11px;letter-spacing:-1px}
.top_nav .nav_menu span{color:#ccc}
.top_nav .nav_menu a{color:#999}



#container{width:100%;} 
#container_sub{position: relative;overflow:hidden;width:100%;} 
#container_login{width:100%;height:100%;} 
#container:after{display:block;clear:both;content:''} 

#container02{position: relative;width:100%;margin:0 auto;text-align:center;} 
#container02:after{display:block;clear:both;content:''} 

#content{position: relative;width:100%;margin:0 auto;}

.mbanner{position: relative;width:100%;height:578px;}
.mcon01{position: relative;width:1134px;height:156px}
.mcon02{position: relative;padding:40px 0;padding:;font-size:0;}
.mcon03{position: relative;font-size:0;}


/* Layout */

#container03{width:1134px;margin:0 auto}
#container_main{margin:50px 0 20px}
#container_main:after{display:block;clear:both;content:''}
#con02{float:left;width:300px;margin-left:20px;border-right:1px solid #e8e8e8}
.con01{float:left;width:378px;border-right:1px solid #e8e8e8}
.con03{float:right;width:300px}


.section_ul{position:relative;width:300px;font-size:10pt;font-family:'Noto Sans KR',Tahoma, Geneva, sans-serif;letter-spacing:-1;font-weight:400;line-height:normal;*zoom:1}
.section_ul a{color:#333;text-decoration:none}
.section_ul a:hover,
.section_ul a:active,
.section_ul a:focus{text-decoration:underline}
.section_ul em{font-style:normal}
.section_ul h2{margin:0;padding:0 0 8px 0;border-bottom:2px solid #333;font-size:15px;color:#333}
.section_ul h2.tu{margin:0;padding:0 0 23px 0;border-bottom:0;font-size:20px;font-weight:700;color:#333;letter-spacing:-1px}
.section_ul ul{margin:13px 20px 0 0;padding:0;list-style:none}
.section_ul li{position:relative;margin:0 0 6px 0;line-height:25px}
.section_ul li:after{display:block;clear:both;content:""}
.section_ul li .bu{float:left;margin:8 2 0 0;color:#999}
.section_ul li a{float:left;overflow:hidden;width:240px;white-space:nowrap;text-overflow:ellipsis;}
.section_ul li .time{float:right;clear:right;font-size:10pt;color:#333;white-space:nowrap}
.section_ul li.tit{position:relative;margin:0;font-size:17px;font-weight:600}
.section_ul li.tit a{color:#333}
.section_ul li.txt {margin-top:10px;line-height:17px}
.section_ul .more{position:absolute;top:6px;right:0;font:11px Dotum, µ¸¿ò;text-decoration:none !important}
.section_ul .more span{margin:0 2px 0 0;font-size:16px;font-weight:bold;color:#d76ea9;vertical-align:middle}

#tabmenu{ position:relative; width:357px; height:46px; font-size:17px;border:1px solid #e8e8e8 }
#tabmenu ul,#tabmenu ul li{margin:0;padding:0;}
#tabmenu ul li{list-style:none;}
#tabmenu ul li,#tabmenu ul li a{background:#e8e8e8;width:179px;text-align:center}
#tabmenu ul li{float:left;margin-right:-1px;line-height:43px}
#tabmenu ul li a{display:inline-block;padding:2px 0 1px;_padding:3px 0 0;background-position: 100% 0;font-weight:600;color:#333;cursor:pointer;text-decoration:none !important}
#tabmenu ul li a:hover{color:#000}
#tabmenu ul li.on,#tabmenu ul li.on a{background:#fff}
#tabmenu ul li.on a{color:#3376b8}



#container05{width:100%;margin:0 auto;text-align:center;font-size:0} 
#container05:after{display:block;clear:both;content:''} 

#tabcontent1{}

#footer{margin:0 auto}

#footer{overflow:hidden;clear:both;padding:0 0 30px;border-top:2px solid #34384b;color:#595959;background:#ececec;font-family:'notokr-regular',Dotum,AppleGothic,Sans-serif;text-align:center}
#footer a{color:#444;text-decoration:none}
#footer a:visited{color:#666;text-decoration:none}
#footer a:hover{text-decoration:underline}
#footer ul{font-family:'notokr-regular';font-size:1.0em;margin:0 0 5px 120px;}
#footer ul li{display:inline;position:relative;padding:0 5px 0 7px;background:url(http://static.naver.com/common/footer/bu_bar.gif) 0 50% no-repeat;_background-position:0 10%;
font-family:'notokr-regular';font-size:0.75rem;white-space:nowrap;}
#footer ul li a:hover,#footer ul li a:hover strong{color:#438a01}
#footer ul li.first{font-family:'notokr-regular';padding:0 3px 0 0;background:none}
#footer address{font-family:'notokr-regular';font-size:0.75rem;line-height:15px;margin-top:30px;}
#footer address img{vertical-align:middle;}
#footer address a{color:#595959;font-family:tahoma;font-size:9px;font-weight:bold;}
#footer address a:hover{color:#009bc8}
#footer address span{padding-left:2px}
#footer address em{padding-left:6px}
#footer address .logof{display:inline-block;*display:inline;vertical-align:baseline;}

#location { position: relative; top: 9px; text-align: center; height: 12px; font-size: 12px; font-weight: bold; line-height: 0; }
#location ul{margin:0 0 10px;}
#location ul li{display:inline;position:relative;padding:0 5px 0 12px;background:url(http://img.jongroeclass.co.kr/jongro/main2015/bu_bar.gif) 1px 0 no-repeat;font-size:12px;white-space:nowrap;}
#location ul li a:hover,#footer ul li a:hover strong{color:#438a01;}
#location ul li.frst{padding:0 3px 0 0;background:none;}



/* You must delete below style */


#container div,#content{}


h3.tit25 {font-family: 'Noto Sans KR'; font-weight:normal;  font-size:20px; line-height:20px;margin:0; padding:0;letter-spacing:-3.5px; color:#000;}
h3.tit25 span{font-size:40px;}
h3.tit25 span.stit25{font-size:20px;  font-family:'Noto Sans KR'; letter-spacing:-1px; font-weight:600;color:#1B5164;}
h3.tit25 p{font-size:16px; line-height:15px; margin-top:4px; font-family:'Noto Sans KR'; letter-spacing:-1px; font-weight:600;}
h3.02 {font-size:20px}

/* ±âÁ¸ ½ºÅ¸ÀÏ À¯Áö ¹× Ç÷¹ÀÌ ¹öÆ° Ãß°¡ */
.con05_swiper_wrap { position: relative; width: 100%; max-width: 1080px; margin: 20px auto 0; padding: 0 50px; box-sizing: border-box; }
.con05_swiper { overflow: hidden; width: 100%; }
.swiper-wrapper { display: flex; }
.swiper-slide { width: 100%; flex-shrink: 0; box-sizing: border-box; }
.con02_img { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 15px; border: 1px solid #ccc; position: relative; }
.con02_img a { display: block; width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; transition: transform 0.3s; position: relative; }
.con02_img a:hover { transform: scale(1.05); }

/* Ç÷¹ÀÌ ¹öÆ° (°¡¿îµ¥ Èò»ö »ï°¢Çü) */
.con02_img a::before { /*content: ''; position: absolute; top: 50%; left: 49%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: rgba(0, 0, 0, 0.5); border-radius: 50%; z-index: 1; border: 4px solid #fff; */  }
.con02_img a::after { /*content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0; height: 0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 20px solid #fff; z-index: 2; */ }

/* ÅؽºÆ® ¹× È­»ìÇ¥ ½ºÅ¸ÀÏ */
.con02_text_box, .con05_text_box { margin-top: 15px; padding: 0 5px; }
.con05_text01 { font-size: 19px; text-align: center; line-height: 1.4; font-family: 'Noto Sans KR'; color: #333; font-weight: 700; word-break: keep-all; }
.con05_left01 { position: absolute; top: 36%; left: 0; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; z-index: 10; cursor: pointer; background: #fff url(https://img.jongroeclass.co.kr/img23/main_left.png) center/40px no-repeat; border: 1px solid #ccc; }
.con05_right01 { position: absolute; top: 36%; right: 0; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; z-index: 10; cursor: pointer; background: #fff url(https://img.jongroeclass.co.kr/img23/main_right.png) center/40px no-repeat; border: 1px solid #ccc; }
.mg_t50 { margin-top: 50px !important; }


.swiper-controls {display:flex; align-items:center; justify-content:center; gap:4px; }
#playPauseBtn {width:48px; border-radius:10px; font-size:8px; padding:2px 0 1px;  background:#000; color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;margin-top:-6px;}
#playPauseBtn .icon {display:none;}
#playPauseBtn .play {padding:0 0 0 2px;}
#playPauseBtn .pause {padding:0;}
.badgem {position:absolute; top:10px; right:10px; display:inline-block; padding:0 10px; margin-left:10px; background:red; line-height:22px; color:#fff; font-size:12px; font-weight:700; border-radius:10px; animation:blink 2s infinite; vertical-align:middle;font-family: 'notokr-regular';}
@keyframes blink {0%,50%,100%{opacity:1;} 25%,75%{opacity:0;}}

.swiper-pagination {position:relative; display:inline-block !important;}
.swiper-pagination-bullet {width:12px; height:12px; background:#ccc; opacity:1; margin-left:6px;}
.swiper-pagination-bullet-active {background:#000;}

/* swiper-controls¸¦ °¡·Î Á¤·Ä */

/* ¹öÆ° Å©±â ¹× À§Ä¡ */
.swiper-button-prev,.swiper-button-next {  position: static !important; /* Swiper ±âº» À§Ä¡Á¦°Å */  width: 40px;  height: 12px;  background: #000;  color: #fff;  border-radius: 10px;  font-size: 11px;  display: flex;
  align-items: center;  justify-content: center;  cursor: pointer;  padding:1px 0 2px;  margin-top:-6px;}

/* hover ½Ã »ö»ó º¯È­ */
.swiper-button-prev:hover,.swiper-button-next:hover {  background: #444;}