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


/*서브비주얼*/
#sub_visual { width:100%; height:286px; background:url(../images/sub/sub_visual01.jpg) center top no-repeat; position:relative; overflow:hidden;}
#sub_visual.s_admission { background:url(../images/sub/sub_visual02.jpg) center top no-repeat; }
#sub_visual.s_study { background:url(../images/sub/sub_visual05.jpg) center top no-repeat; }

#sub_visual.s_student { background:url(../images/sub/sub_visual03.jpg) center top no-repeat; }
#sub_visual.s_parents { background:url(../images/sub/sub_visual04.jpg) center top no-repeat; }
#sub_visual.s_open { background:url(../images/sub/sub_visual05.jpg) center top no-repeat; }
#sub_visual.s_education { background:url(../images/sub/sub_visual06.jpg) center top no-repeat; }

#sub_visual .visual_txt { position:absolute; right:0; top:52px; z-index:1;  width:100%; letter-spacing:-1px;  }
.vitxt_box { display:inline-block; position:relative; margin:0 0px 0 484px; opacity:0; }
.vitxt_box:before { content:""; display:block; width:824px; height:633px; background:url(../images/main/txt_bg.png) left top no-repeat; position:absolute; right:0; top:-190px; right:-210px; }
.vitxt_box .vtxt { position:relative; z-index:1; }
.vitxt_box.effect {   opacity:1; -webkit-animation: slide-in-elliptic-left-fwd 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-elliptic-left-fwd 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}

#sub_visual.s_admission .vitxt_box.effect,
#sub_visual.s_parents .vitxt_box.effect,
#sub_visual.s_education .vitxt_box.effect {-webkit-animation: bounce-in-left 1.1s both;
	        animation: bounce-in-left 1.1s both; }

#sub_visual.s_study .vitxt_box.effect,
#sub_visual.s_student .vitxt_box.effect,
#sub_visual.s_open .vitxt_box.effect {-webkit-animation: bounce-in-top 1.1s both;
	        animation: bounce-in-top 1.1s both; }

@-webkit-keyframes slide-in-elliptic-left-fwd {
  0% {
    -webkit-transform: translateX(-800px) rotateY(30deg) scale(0);
            transform: translateX(-800px) rotateY(30deg) scale(0);
    -webkit-transform-origin: -100% 50%;
            transform-origin: -100% 50%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotateY(0) scale(1);
            transform: translateX(0) rotateY(0) scale(1);
    -webkit-transform-origin: 1800px 50%;
            transform-origin: 1800px 50%;
    opacity: 1;
  }
}
@keyframes slide-in-elliptic-left-fwd {
  0% {
    -webkit-transform: translateX(-800px) rotateY(30deg) scale(0);
            transform: translateX(-800px) rotateY(30deg) scale(0);
    -webkit-transform-origin: -100% 50%;
            transform-origin: -100% 50%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotateY(0) scale(1);
            transform: translateX(0) rotateY(0) scale(1);
    -webkit-transform-origin: 1800px 50%;
            transform-origin: 1800px 50%;
    opacity: 1;
  }
}

@-webkit-keyframes bounce-in-left {
  0% {
    -webkit-transform: translateX(-600px);
            transform: translateX(-600px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateX(-68px);
            transform: translateX(-68px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateX(-28px);
            transform: translateX(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-left {
  0% {
    -webkit-transform: translateX(-600px);
            transform: translateX(-600px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateX(-68px);
            transform: translateX(-68px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateX(-28px);
            transform: translateX(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}

@-webkit-keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}


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

.sub_guide { float:left; width:100%;}
.sub_guide li{float:left; color:#777; line-height:50px; font-size:14px; padding:0 20px 0 26px; background:url(../images/sub/guide_dot.png) left 20px no-repeat; }
.sub_guide li.first {padding:0 20px 0 0; background:none; }
.sub_guide li a {color:#3654bc; padding:0 0 0 24px; display:inline-block; font-weight:500; background:url(../images/sub/s_home.png) left 18px no-repeat;}

/*레프트메뉴*/
#left {float:left; width:220px; margin:0 30px 40px 0;}
#left h2 {position:relative; text-align:center; height:119px; box-sizing:border-box; padding:46px 0 0px 0; overflow:hidden; border-radius:20px 0 0 0;  background:#3654bc; color:#fff; font-size:25px; margin-bottom:10px; }
#left h2:before { content:"sahmyook"; display:block; text-transform:uppercase; color:#3654bc; text-shadow:0px 0px 2px rgba(255,255,255,0.8); font-size:34px; position:absolute; left:0; bottom:3px; letter-spacing:-1px; }

ul#leftMenu {width:100%;}
ul#leftMenu li { font-size:15px; letter-spacing:-1px; margin:0 0px 0 0px; }
ul#leftMenu li a {display:block; color:#333; line-height:18px; padding:16px 25px 16px 24px; background:#fff; border:1px solid #dddddd; border-top:0 none;  }
ul#leftMenu li:first-child a { border-top:1px solid #ddd; }
ul#leftMenu li a:hover {font-weight:500; background:#f3f3f3;  }
ul#leftMenu li a.on {font-weight:500; color:#fff; line-height:18px; background:#4d6dda; }

ul#leftMenu li a.depth_view { background:#fff url(../images/sub/left_off.png) 190px 21px no-repeat; padding:16px 45px 16px 24px;}
ul#leftMenu li a.on.depth_view { background:#4d6dda url(../images/sub/left_on.png) 190px 21px no-repeat; }

ul#leftMenu li div {display:none;position:relative; background:#e0e6f5; overflow:hidden; border:1px solid #dddddd; border-top:0 none;}
ul#leftMenu li div.on {display:block;}
ul#leftMenu li div ul { padding:13px 0 13px 0;}
ul#leftMenu li div ul li {font-size:14px; border-bottom:0px;}
ul#leftMenu li div ul li a {display:block; color:#666;padding:0 0 0 35px; position:relative; line-height:30px; background:none; border:0 none !important;}
ul#leftMenu li div ul li a:hover{color:#333; font-weight:500 !important; background:none;}
ul#leftMenu li div ul li.on a{color:#3654bc; font-weight:500 !important; background:none;}

ul#leftMenu li div ul li a:before { content:""; display:block; width:4px; height:4px; border-radius:50%; background:#555555; position:absolute; left:24px; top:14px; }
ul#leftMenu li div ul li.on a:before { background:#3654bc; }


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


/*가이드박스*/
#guideGroup {position:relative;  height:119px; border-bottom:1px dashed #ddd; box-sizing:border-box; }
#guideGroup h3 { font-size:30px; font-weight:500; color:#111; padding:48px 0 0 0; letter-spacing:-1.5px; position:relative;}
#guideGroup h3:before { content:""; display:block; width:35px; height:7px; position:absolute; left:0; top:26px; background: rgb(20,163,84);
background: linear-gradient(90deg, rgba(20,163,84,1) 0%, rgba(54,84,188,1) 100%); }
	


#guideGroup .page_config {position:absolute; top:51px; right:0px;}
#guideGroup .page_config li{float:left; margin-left:28px; }
#guideGroup .page_config li a{display:block; text-indent:-99999px; }
#guideGroup .page_config li.print a {background:url(../images/sub/page_print.png) left top no-repeat; width:21px; height:21px; }
#guideGroup .page_config li.edit a {background:url(../images/sub/page_admin.png) left top no-repeat; width:21px; height:22px; }


/*컨텐츠박스*/
#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; }

.ic_tap { margin-bottom:40px; }
.ic_tap ul { }
.ic_tap ul:after { content:""; display:block; clear:both; }
.ic_tap ul li { margin:0 15px 0 0; float:left; width:130px; }
.ic_tap ul li a { height:80px; position:relative; border-radius:15px; font-size:15px; line-height:24px; padding:10px 8px; box-sizing:border-box; display:block; width:100%; background:#f9f9f9; letter-spacing:-0.5px; font-family: 'S-CoreDream-4Regular'; border:2px solid #ddd; left:0; top:0; }
.ic_tap ul li.on a { background: rgb(109,153,242);
background: linear-gradient(90deg, rgba(109,153,242,1) 0%, rgba(201,182,242,1) 100%); color:#fff; font-family: 'S-CoreDream-5Medium'; border:0 none; top:-5px; box-shadow:0px 3px 6px rgba(0,0,0,0.2); }
.ic_tap ul li a:before { transition:all 0.4s; }
.ic_tap ul li:nth-child(1) a:before { content:""; display:block; width:40px; height:42px; background:url(../images/sub/tic_1.png) left top no-repeat; position:absolute; right:10px; bottom:5px; filter: grayscale(1);}
.ic_tap ul li:nth-child(2) a:before { content:""; display:block; width:42px; height:52px; background:url(../images/sub/tic_3.png) left top no-repeat; position:absolute; right:10px; bottom:5px; filter: grayscale(1);}
.ic_tap ul li:nth-child(3) a:before { content:""; display:block; width:50px; height:46px; background:url(../images/sub/tic_2.png) left top no-repeat; position:absolute; right:5px; bottom:5px; filter: grayscale(1);}
.ic_tap ul li:nth-child(4) a:before { content:""; display:block; width:38px; height:44px; background:url(../images/sub/tic_4.png) left top no-repeat; position:absolute; right:9px; bottom:7px; filter: grayscale(1);}
.ic_tap ul li a:hover { text-decoration:none !important; }
.ic_tap ul li a:hover:before { filter: none !important; -webkit-animation: jello-vertical 0.9s both;
	        animation: jello-vertical 0.9s both;}
.ic_tap ul li.on a:before { filter: none !important; -webkit-animation: jello-vertical 0.9s both;
	        animation: jello-vertical 0.9s both;}

@-webkit-keyframes jello-vertical {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  40% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  50% {
    -webkit-transform: scale3d(0.85, 1.15, 1);
            transform: scale3d(0.85, 1.15, 1);
  }
  65% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  75% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes jello-vertical {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  40% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  50% {
    -webkit-transform: scale3d(0.85, 1.15, 1);
            transform: scale3d(0.85, 1.15, 1);
  }
  65% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  75% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
/*/////////////////////////////////////////////////////////////////////////////////반응형/////////////////////////////////////////////////////////////////////////////////*/

@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%;}

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

/*가이드박스*/
#guideGroup {height:auto; display:none;}
#guideGroup h3 {display:none;}
	
.sub_guide { position:relative; width:calc(100% - 30px); padding:0 15px; overflow:hidden; background:#f8f8f8; border-top:1px #d6d6d6 solid; border-bottom:1px #d6d6d6 solid;}
.sub_guide li{float:left; line-height:35px; padding: 0 13px 0 13px; background:url(../images/sub/guide_dot.png) left 13px no-repeat; }
.sub_guide li.first { background:none; padding: 0 13px 0 0; }
.sub_guide li.first a { background: url(../images/sub/s_home.png) left 11px no-repeat; }
.sub_guide li.this { }
#guideGroup .page_config {display:none;}


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

.ic_tap { margin-bottom:15px; }
.ic_tap ul li { margin:0 1% 15px; float:left; width:48%; }


}