@charset "utf-8";
@import url("./default.css"); 
@import url("../../../css/content.css?240423");

#header .util {  height:490px; }
.side_tep li.qt2 { margin: 29px 0; }
#header .util ul.info { bottom:15px; }
#side_cont { border-radius:0 0 100px 0; }
#side_cont .side_arrow { top:200px; }


/*서브비주얼*/
#sub_visual { width:100%; height:490px; background:url(../images/sub/sub_visual01.jpg) center top no-repeat; position:relative; overflow:hidden;  margin-top:-100px;}
#sub_visual.s_student { background:url(../images/sub/sub_visual08.jpg) center top no-repeat; }
#sub_visual.s_teacher { background:url(../images/sub/sub_visual06.jpg) center top no-repeat; }
#sub_visual.s_business { background:url(../images/sub/sub_visual04.jpg) center top no-repeat; }
#sub_visual.s_jinhak { background:url(../images/sub/sub_visual05.jpg) center top no-repeat; }
#sub_visual.s_administrator { background:url(../images/sub/sub_visual03.jpg) center top no-repeat; }
#sub_visual.s_open { background:url(../images/sub/sub_visual07.jpg) center top no-repeat }

.visual_txt { position:absolute; z-index:10; right:260px; letter-spacing:-0.5px; top:175px; transition:all 0.4s; color:#fff; text-align:right;  }
.visual_txt .vis_t1 { position:relative;  }
.visual_txt .vis_t1 p { font-size:24px; display:none;   }
.visual_txt .vis_t1 svg { filter: drop-shadow(0px 0px 8px rgb(0 0 0 / 0.85)); }
.visual_txt .vis_t1 svg text { font-size:24px; color:#fff;  fill:transparent;
            stroke-dasharray: 326px;
			stroke:transparent;
                stroke-width: 2px;
             }

.visual_txt .vis_t1.effect svg text {animation: stroke 4s linear;
			animation-iteration-count: 1;
            animation-fill-mode: forwards; }
	


.visual_txt .vis_t2 { position:relative;  display:block; font-weight:700; }
.visual_txt .vis_t2 p { font-size:40px; display:none;  }
.visual_txt .vis_t2 svg { background:rgba(39,54,140,0.5);   filter: drop-shadow(0px 2px 4px rgb(0 0 0 / 0.45));}
.visual_txt .vis_t2 svg text {  font-size:40px; color:#fff;  fill:transparent;
            stroke-dasharray: 326px;
			stroke:transparent;
                stroke-width: 2px; letter-spacing:-1px;}
.visual_txt .vis_t2.effect svg text {animation: stroke 4s linear;
			animation-iteration-count: 1;
            animation-fill-mode: forwards; }


.visual_txt .vis_t3 { position:relative;   display:block; font-weight:bold; margin-top:-3px;}
.visual_txt .vis_t3 p { font-size:40px; display:none;  }
.visual_txt .vis_t3 svg { background:rgba(75,80,191,0.5); filter: drop-shadow(0px 2px 4px rgb(0 0 0 / 0.45));}
.visual_txt .vis_t3 svg text {  font-size:32px; color:#fff; font-family: 'BMJUA'; font-weight:300;  fill:transparent;
            stroke-dasharray: 326px;
			stroke:transparent;
                stroke-width: 2px; }
.visual_txt .vis_t3.effect svg text {animation: stroke 4s linear;
			animation-iteration-count: 1;
            animation-fill-mode: forwards; }

	

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.visual_txt .vis_t1 svg text {  fill:#fff; }
.visual_txt .vis_t2 svg text {  fill:#fff; }
.visual_txt .vis_t3 svg text {  fill:#fff; }
}
@keyframes stroke {
            0%   {
				
                stroke:#fff;
                stroke-width: 2px;
                stroke-dashoffset: 326px;
            }
            70% {
                fill: transparent;
            }
            98% {
                stroke:#fff;
                stroke-width: 2px;
            }
            100% {
                fill: #fff;
                stroke-dashoffset: 0px;
            }
}


#container {margin:0 auto; width:1400px;  }

/*레프트메뉴*/
#left {float:left; width:230px; margin:0 30px 40px 0;}
#left h2 {position:relative; text-align:center; height:134px; padding:52px 0 0px 0; box-sizing:border-box;  background:url(../images/sub/h2_title.jpg) left bottom no-repeat; color:#fff; font-size:26px;}

ul#leftMenu {width:100%;}
ul#leftMenu li { font-size:15px; letter-spacing:-0.5px; }
ul#leftMenu li a {display:block; color:#555; line-height:18px; padding:15px 0 15px 30px; background:url(../images/sub/left_off.png) 13px 22px no-repeat; border-bottom:1px #d1d1d1 solid; position:relative; }
ul#leftMenu li a:hover {font-weight:bold; background:#f3f3f3 url(../images/sub/left_off.png) 13px 22px no-repeat;  }
ul#leftMenu li a.on {font-weight:bold; color:#fff; line-height:18px; background:#27368c; border-bottom:0 none;}

ul#leftMenu li a.depth_view { padding:15px 30px 15px 30px;  }
ul#leftMenu li a.depth_view:before { content:""; display:block; width:12px; height:2px; background:#555; position:absolute; right:10px; top:calc(50% - 1px); }
ul#leftMenu li a.depth_view:after { content:""; display:block; width:2px; height:12px; background:#555; position:absolute; right:15px; top:calc(50% - 6px); }

ul#leftMenu li a.on.depth_view:before { background:#fff; }
ul#leftMenu li a.on.depth_view:after { display:none; }


ul#leftMenu li div {display:none;position:relative; background:#f6f4f2; overflow:hidden;}
ul#leftMenu li div.on {display:block;}
ul#leftMenu li div ul { padding:10px 0 10px 0;}
ul#leftMenu li div ul li {font-size:14px; border-bottom:0px;}
ul#leftMenu li div ul li a {display:block; color:#777;padding:6px 0 6px 35px; line-height:23px; background:url(../images/sub/leftMenu_depth_off.jpg) 22px 17px no-repeat; border-bottom:0 none;}
ul#leftMenu li div ul li.on a{color:#4b50bf; font-weight:normal !important; background:url(../images/sub/leftMenu_depth_on.jpg) 22px 17px no-repeat;}
ul#leftMenu li div ul li a:hover{color:#4b50bf; font-weight:normal !important; background:url(../images/sub/leftMenu_depth_on.jpg) 22px 17px no-repeat;}



#contentGroup { padding:0px 0 0 0; float:right; width:calc(100% - 260px); }


/*가이드박스*/
#guideGroup {position:relative;  height:134px; box-sizing:border-box; border-bottom:1px #d1d1d1 solid; padding-top:64px;}
#guideGroup h3 { font-size:30px; color:#333333; padding:13px 0 0 0; font-weight:500; letter-spacing:-1.5px; position:relative;}
#guideGroup h3:before { content:""; display:block; width:24px; height:5px; position:absolute; left:0; top:-5px; background: rgb(109,153,242);
background: linear-gradient(90deg, rgba(109,153,242,1) 0%, rgba(201,182,242,1) 100%); }
	
#guideGroup .guide { position:absolute; top:15px; left:0px;}
#guideGroup .guide li{float:left;color:#777;line-height:23px; font-size:14px; padding:0 15px 0 20px;background:url(../images/sub/guide_dot.jpg) left 6px no-repeat; }
#guideGroup .guide li.first {padding:2px 12px 0 0;background:none; }
#guideGroup .guide li a { display:inline-block; width:20px; height:20px; vertical-align:top; text-indent:-99999px; background:url(../images/sub/s_home.png) left top no-repeat;}


#guideGroup .page_config {position:absolute; top:73px; right:0px;}
#guideGroup .page_config li{float:left; margin-left:10px; }
#guideGroup .page_config li a{display:block; text-indent:-99999px; width:39px; height:39px; border-radius:50%; box-sizing:border-box; border:1px solid #ddd; }
#guideGroup .page_config li.print a {background:url(../images/sub/page_print.png) center center no-repeat; }
#guideGroup .page_config li.edit a {background:url(../images/sub/page_admin.png) center center no-repeat; }


/*컨텐츠박스*/
#content { position:relative; min-height:500px; margin:30px 0 40px 0; }
#content:after { content:""; display:block; clear:both; }




/* 내용없음 */
.cm_no_conts {text-align:center; overflow:hidden; padding:50px 0 70px 0; margin:50px 0;}
.cm_no_conts .no_icon {background:transparent url(../images/common/no_conts_page.png) center center no-repeat; height:100px;}
.cm_no_conts .gtxt {color:#999 !important; font-size:13px; letter-spacing:-1px;}

/* 페이지네이트*/
.page_on {border:1px #248a2b solid; background:#31b049;}


.tapMenu { }
.tapMenu ul { }
.tapMenu ul:after { content:""; display:block; clear:both; }
.tapMenu ul li { float:left; margin:0 15px 15px 0; }
.tapMenu ul li a { display:block; padding:15px 20px; border-radius:10px; font-weight:500; color:#7298d5; font-size:15px; background:#eaf2ff; border:2px solid #cbddfa; box-sizing:border-box; }
.tapMenu ul li.on a { color:#fff; border-color:#568de8; background:#568de8; }


/*/////////////////////////////////////////////////////////////////////////////////반응형/////////////////////////////////////////////////////////////////////////////////*/

@media all and (max-width:1024px) {


/*서브비주얼*/
#sub_visual {display:none;}

#container {margin:0px; width:100%; overflow:hidden; background:none; }


/*레프트메뉴*/
#left {display:none;}

#contentGroup {overflow:hidden; padding:0px; width:100%; float:none;}

#content {width:94%; clear:both; margin:30px auto;}

/*가이드박스*/
#guideGroup {height:auto; padding:0 0 0 0; border-bottom:0 none;}
#guideGroup h3 {display:none;}
	
#guideGroup .guide { position:relative; width:100%; overflow:hidden; background:#f8f8f8; border-bottom:1px #d6d6d6 solid; border-top:1px #d6d6d6 solid; padding:0 13px; box-sizing:border-box; top:0;}
#guideGroup .guide li{float:left; line-height:35px; box-sizing:border-box; padding: 0 13px 0 13px; background:url(../images/sub/guide_dot_m.png) left 13px no-repeat; }
#guideGroup .guide li.first {padding:0px 13px 0 0px;background:none; }
#guideGroup .guide li.first a { margin-top:7px; }
#guideGroup .guide li.this {color:#666666;}
#guideGroup .page_config {display:none;}


/* 컨텐츠 공통 스타일 */
.tablebox { width:100%; overflow:auto; }
.tablebox table.cStyle { width:100%; min-width:580px; }

}