@charset "utf-8";

/* 상단 레이아웃 */
#hd {}
#hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}

/* 본문 바로가기 */
#skip_to_container a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skip_to_container a:focus, #skip_to_container a:active {width:100%;height:75px;background:#21272e;color:#fff;font-size:2em;font-weight:bold;text-align:center;text-decoration:none;line-height:3.3em}

/* button top */
#top_btn {display:block;position:fixed;right:10px;bottom:10px;width:40px;height:40px;overflow:hidden;text-align:center;background:#fff;border:solid 1px #ccc;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#top_btn i {color:#222;font-size:32px;line-height:38px;}
#top_btn:hover {background:#f63941;}
#top_btn:hover i {color:#fff;}



#container_wrap {position:relative;width:auto;min-width:320px;min-height:100%;margin-left:300px;background:#fff;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

#header_wrap {display:block;position:fixed;left:0;top:0;right:0;width:100%;background:#fff;border-bottom:solid 1px #eee;z-index:999;}
#header_wrap:after {display:block;visibility:hidden;clear:both;content:""}

#gnb_wrap {display:block;position:relative;width:100%;background:#f6f6f6;}
#gnb_wrap:after {display:block;visibility:hidden;clear:both;content:""}

#body_wrap {display:block;position:relative;width:100%;margin:0 auto;padding:120px 0 40px 0;}
#body_wrap:after {display:block;visibility:hidden;clear:both;content:""}

#footer_wrap {display:block;position:relative;width:auto;margin:0 auto;background:#f6f6f6;}
#footer_wrap:after {display:block;visibility:hidden;clear:both;content:""}


.side_nav {position:fixed;left:0;top:0;width:300px;height:100%;overflow-y:auto;padding:140px 20px 40px 20px;background:#f6f6f6;border-right:solid 1px #ddd;z-index:9;transform: translate(0,0);}
.side_nav a.btn_upload {display:block;margin:0 0 20px 0;color:#fff;font-size:14px;text-align:center;font-weight:400;line-height:50px;background:#ff7700;border-radius:5px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.side_nav a.btn_upload i {margin:0 12px 0 0;font-size:24px;}
.side_nav a.btn_upload:hover {color:#ff7700;background:#666;}

.side_nav ul.gnb_mobile {margin:0 0 18px 0;padding:0 0 18px 0;border-bottom:solid 1px #ddd;}
.side_nav ul.gnb_mobile li {position:relative;cursor:pointer}
.side_nav ul.gnb_mobile li a {display:block;font-size:14px;line-height:50px;font-weight:500;text-indent:10px;border-radius:5px;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.side_nav ul.gnb_mobile li a i {margin:0 8px 0 0;font-size:24px;vertical-align:middle;}
.side_nav ul.gnb_mobile li a:hover {color:#ff7700;background:#666;}
.side_nav ul.gnb_mobile li ul {display:block;overflow:hidden;}
.side_nav ul.gnb_mobile li.on > ul {max-height:1000px;}
.side_nav ul.gnb_mobile li ul {display:none;margin:0;}
.side_nav ul.gnb_mobile li ul li {border-bottom:none}
.side_nav ul.gnb_mobile li ul li:last-child {margin:0 0 10px 0;}
.side_nav ul.gnb_mobile li ul li a {color:#666;font-size:13px;line-height:28px;font-weight:400;text-indent:50px;}
.side_nav ul.gnb_mobile li ul li a:hover {color:#ff7700;background:none;}
.side_nav ul.gnb_mobile li ul li ul {display:block}
.side_nav ul.gnb_mobile li ul li ul li {display:block;}
.side_nav ul.gnb_mobile li ul li ul li a {display:block;color:#999;font-size:12px;line-height:24px;text-indent:30px;}

.side_nav ul.gnb_mobile li.on a {color:#ff7700}
.side_nav ul.gnb_mobile li.on ul {display:block;}
.side_nav ul.gnb_mobile li.on ul li a {color:#666;}
.side_nav ul.gnb_mobile li.on ul li a:hover {color:#ff7700;}

.side_nav ul.gnb_mobile .active {color:#ff7700 !important;}

.cross {display:block;position:absolute;right:0px;top:0;width:40px;height:50px;text-align:center;/*padding:11px 0 0 30px;text-align:left;*/z-index:9;}
.cross i {color:#999;font-size:16px;line-height:50px;}
.cross .bar_b1, .cross .bar_b2 {display:block;width:15px;height:1px;background:#444;cursor:pointer;transition: all 0.3s ease-in-out;}
.cross .bar_b1 {margin:9px 0 0 0;}
.cross .bar_b2 {margin:-1px 0 0 0;transform-origin:50% 50%;transform:rotate(90deg);} 

.side_nav ul li.on .bar_b1 {background-color:transparent;}
.side_nav ul li.on .bar_b2 {background-color:#ff7700;transform-origin:50% 50%;transform:rotate(180deg);} 
.side_nav ul li.on .cross i {color:#ff7700;transform:rotate(180deg);}


.side_nav ul.customer {}
.side_nav ul.customer li {position:relative;cursor:pointer}
.side_nav ul.customer li a {display:block;font-size:14px;line-height:50px;font-weight:500;text-indent:10px;border-radius:5px;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.side_nav ul.customer li a i {margin:0 8px 0 0;font-size:24px;vertical-align:middle;}
.side_nav ul.customer li a:hover {color:#ff7700;background:#666;}

.cross,
.cross i,
.cross .bar_b1, 
.cross .bar_b2 {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}


.gnb_side {display:block;position:fixed;left:0;top:0;height:100%;width:80px;padding:140px 0 0 0;background:#f6f6f6;border-right:solid 1px #ddd;z-index:1}
.gnb_side .user {margin:0 0 36px 0;font-size:12px;text-align:center;}
.gnb_side .user .profile_img {display:block;position:relative;width:50px;margin:0 auto;}
.gnb_side .user .profile_img img {width:100%;height:auto;border-radius:50%;}
.gnb_side .user .profile_img a.btn_edit {display:block;position:absolute;right:0;bottom:0;width:24px;height:24px;text-align:center;line-height:24px;background:#999;border-radius:50%;}
.gnb_side .user .profile_img a.btn_edit i {color:#fff;font-size:16px;}
.gnb_side .user p {margin:6px 0 0 0;font-size:12px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis; 
-o-text-overflow:ellipsis;
-moz-binding: url('ellipsis.xml#ellipsis');
}
.gnb_side .user p strong {font-weight:400;}
.gnb_side ul {}
.gnb_side ul li {display:block;margin:0 0 36px 0;}
.gnb_side ul li:last-child {margin:0;}
.gnb_side ul li a {display:block;font-size:12px;text-align:center;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.gnb_side ul li a i {margin:0 0 6px 0;font-size:28px;}
.gnb_side ul li a.on {color:#ff7700;}


/* header */
#header {display:block;position:relative;width:100%;height:119px;padding:0 40px;}
#header:after {display:block;visibility:hidden;clear:both;content:""}

#header #logo {float:left;padding:30px 0 0 0;}
#header #logo:after {display:block;visibility:hidden;clear:both;content:""}
#header #logo a.btn_nav {display:block;float:left;position:relative;margin:18px 8px 0 0;z-index:1}
#header #logo a.btn_nav i {font-size:32px;line-height:32px;}
#header #logo .title {float:left;}
#header #logo .schoolname {margin:0 8px 0 0;font-size:24px;font-weight:700;letter-spacing:-1px;}

#header #logo i,
#header #logo a,
#header #logo div,
#header #logo span,
#header #logo img {vertical-align:bottom;}


ul.tnb {float:right;padding:40px 0 0 0;}
ul.tnb:after {display:block;visibility:hidden;clear:both;content:""}
ul.tnb li {display:block;float:left;margin:0 5px 0 0;}
ul.tnb li:last-child {margin:0;}
ul.tnb li a {display:block;padding:0 12px;line-height:40px;background:#fff;border:solid 1px #ddd;border-radius:5px;}
ul.tnb li a:hover {color:#fff;background:#ff7700;}
ul.tnb li a.on {color:#fff;background:#ff7700;border:solid 1px #ff7700;}

ul.tnb,
ul.tnb li,
ul.tnb li a {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

.tnb_mobile {display:none;position:relative;float:right;padding:20px 0 0 0;z-index:9;}
.tnb_mobile a {display:block;padding:0 6px;font-size:12px;line-height:40px;border:solid 1px #ddd;border-radius:5px;cursor:pointer;}
.tnb_mobile a i {color:#999;font-size:12px;}
.tnb_mobile ul {display:none;position:absolute;left:0;top:60px;width:100%;background:#fff;border:solid 1px #ddd;border-radius:5px;z-index:9;}
.tnb_mobile ul li {display:block;}
.tnb_mobile ul li a {display:block;text-align:center;line-height:30px;border:none;}


.hd_sch_wr {display:block;position:absolute;left:50%;top:50%;width:36%;
-webkit-transform:translate(-25%,-50%);
-moz-transform:translate(-25%,-50%);
-ms-transform:translate(-25%,-50%);
-o-transform:translate(-25%,-50%);
transform:translate(-25%,-50%);
}
#hd_sch {position:relative;width:100%;}
#hd_sch #sch_stx {display:block;width:100%;height:50px;padding:0 60px 0 0;font-size:16px;line-height:48px;text-indent:30px;background:#f6f6f6;border:solid 1px #ddd;border-radius:40px;}
#hd_sch #sch_submit {display:block;position:absolute;right:10px;top:0;width:50px;height:50px;text-align:center;line-height:50px;background:none;border:none;}
#hd_sch #sch_submit i {font-size:24px;}

.hd_sch_wr,
#hd_sch #sch_stx,
#hd_sch #sch_submit,
#hd_sch #sch_submit i {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}


/* gnb */
.gnb {display:block;position:relative;width:100%;border-bottom:solid 1px #ddd;}
.gnb:after {display:block;visibility:hidden;clear:both;content:""}
.gnb h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.gnb ul {}
.gnb ul:after {display:block;visibility:hidden;clear:both;content:""}
.gnb ul li {display:block;float:left;position:relative;width:180px;border-right:solid 1px #ddd;}
.gnb ul li a {display:block;position:relative;height:50px;color:#999;font-size:14px;font-weight:500;text-align:center;line-height:47px;letter-spacing:-1px;background:#f6f6f6;}
.gnb ul li a:hover {color:#ff7700;background:#fff;}
.gnb ul li a .hover_line {display:block;width:1%;height:3px;margin:0 auto;background:#ff7700;
filter:alpha(opacity=0);
opacity: 0;
}
.gnb ul li a:hover .hover_line {display:block;width:100%;
filter:alpha(opacity=100);
opacity: 1;
}
.gnb ul li span.arrow {display:none;}
.gnb ul li a.on {height:51px;margin:0 0 -1px 0;color:#ff7700;line-height:47px;background:#fff;z-index:3;}
.gnb ul li a.on .hover_line {display:block;width:100%;
filter:alpha(opacity=100);
opacity: 1;
}

.gnb ul li ul {display:none;position:absolute;left:50%;width:160px;margin:0 0 0 -80px;border-left:solid 1px #ddd;border-top:solid 1px #ddd;box-shadow:0 3px 5px 1px rgba(0,0,0,0.1);z-index:3}
.gnb ul li ul li {display:block;width:100%;margin:0;padding:0;background:none;border-right:solid 1px #ddd;border-bottom:solid 1px #ddd;}
.gnb ul li ul li a {display:block;height:40px;color:#222;font-size:12px;font-weight:300;line-height:40px;background:#fff;}
.gnb ul li ul li a:hover {color:#f63941;background:#f6f6f6;}
.gnb ul li ul li ul {display:block;position:absolute;left:160px;top:0;width:140px;margin:0;}

.gnb ul li a,
.gnb ul li a .hover_line,
.gnb .gnb_side a {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

.event_banner {margin:40px 0 48px 40px;}

.main_quick {width:100%;max-width:1200px;margin:0 auto 60px auto;}
.main_quick ul {}
.main_quick ul:after {display:block;visibility:hidden;clear:both;content:""}
.main_quick ul li {display:block;float:left;width:20%;}
.main_quick ul li:after {display:block;visibility:hidden;clear:both;content:""}
.main_quick ul li .icon {float:left;position:relative;margin:0 12px 0 0;}
.main_quick ul li .icon img {display:block;position:absolute;left:0;top:0;width:80px;height:auto;}
.main_quick ul li .icon .circle {display:block;width:60px;height:60px;margin:10px;background:rgba(246,57,65,0.1);border-radius:50%;}
.main_quick ul li p {font-size:14px;font-weight:500;line-height:80px;}

.main_quick,
.main_quick ul li,
.main_quick ul li .icon,
.main_quick ul li .icon img,
.main_quick ul li .icon .circle,
.main_quick ul li p {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}



#footer {display:block;position:relative;width:100%;max-width:1200px;margin:0 auto;padding:80px 0}
#footer:after {display:block;visibility:hidden;clear:both;content:""}

#footer .logo {float:left;width:30%;}
#footer .copy {float:left;width:50%;}
#footer .copy strong {display:block;margin:0 0 4px 0;font-size:16px;font-weight:500;}
#footer .copy ul.bnb {margin:0 0 24px 0;}
#footer .copy ul.bnb:after {display:block;visibility:hidden;clear:both;content:""}
#footer .copy ul.bnb li {display:block;float:left;margin:0 8px 0 0;padding:0 8px 0 0;background:url(../img/var.gif) no-repeat right 50%;}
#footer .copy ul.bnb li:last-child {margin:0;padding:0;background:none;}
#footer .copy ul.bnb li a {display:block;color:#666;line-height:24px;}
#footer .copy p {color:#666;line-height:24px;word-break:keep-all;}
#footer .copy p .copyright {color:#999;}
#footer .customer {position:absolute;right:20px;top:80px;width:20%;}
#footer .customer strong {display:block;margin:0 0 4px 0;font-size:16px;font-weight:500;}
#footer .customer p {margin:0 0 8px 0;color:#999;word-break:keep-all;}
#footer .customer .tel {font-family:'Lato';color:#444;font-size:30px;font-weight:700;}


#footer,
#footer .logo,
#footer .copy,
#footer .copy strong,
#footer .copy ul.bnb li,
#footer .copy p,
#footer .customer,
#footer .customer strong,
#footer .customer p,
#footer .customer .tel {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

h2#container_title {width:100%;max-width:1200px;margin:0 auto;padding:24px 0;font-size:24px;font-weight:500;letter-spacing:-1px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}


#list_class {width:100%;max-width:1200px;margin:0 auto 36px auto;}
#list_class h2 {display:block;margin:0 0 12px 0;font-size:16px;font-weight:500;}
#list_class h2 strong {color:#ff7700;font-weight:500;}
#list_class ul {}
#list_class ul:after {display:block;visibility:hidden;clear:both;content:""}
#list_class ul li {display:block;float:left;width:24%;margin:0 1.33% 24px 0;}
#list_class ul li:nth-child(4n) {margin:0 0 24px 0;}
#list_class ul li:after {display:block;visibility:hidden;clear:both;content:""}
#list_class ul li .img {float:left;width:90px;overflow:hidden;border:solid 1px #ddd;border-radius:5px;}
#list_class ul li .img img {width:100%;height:auto;}
#list_class ul li .con {margin:0 0 0 100px;line-height:0;}
#list_class ul li .con .dot {display:inline-block;width:5px;height:5px;margin:0 3px 0 0;background:#ff7700;border-radius:50%;}
#list_class ul li .con .sub_title {margin:4px 0 0 0;color:#999;font-weight:500;line-height:16px;letter-spacing:-1px;}
#list_class ul li .con .title {font-size:16px;font-weight:500;line-height:20px;letter-spacing:-1px;}

#keyword {width:100%;margin:0 auto 36px auto;padding:0 0 18px 0;background:#f6f6f6;}
#keyword .back {margin:0 0 18px 0;padding:0 20px;border-bottom:solid 1px #ddd;}
#keyword .back a {display:block;width:100%;max-width:1200px;margin:0 auto;font-size:14px;font-weight:500;line-height:40px;cursor:pointer;}
#keyword .back a i {margin:0 4px 0 0;font-size:16px;}

#keyword h2 {display:block;max-width:1200px;margin:0 auto 12px auto;padding:18px 0 0 0;font-size:24px;font-weight:500;}
#keyword h3 {display:block;max-width:1200px;margin:0 auto 12px auto;font-size:16px;font-weight:500;}
#keyword ul {width:100%;max-width:1200px;margin:0 auto;}
#keyword ul:after {display:block;visibility:hidden;clear:both;content:""}
#keyword ul li {display:block;float:left;margin:0 4px 6px 0;}
#keyword ul li:last-child {margin:0 0 6px 0;}
#keyword ul li a {display:block;padding:0 12px;color:#666;font-size:12px;line-height:30px;background:#fff;border:solid 1px #ddd;border-radius:50px;}
#keyword ul li a.keypoint {color:#fff;background:#ff7700;border:solid 1px #ff7700;}
#keyword ul li a.keypoint2 {color:#ff7700;background:#ffe9d6;}
#keyword ul li a.more {background:#f6f6f6;}
#keyword ul li a.more i {color:#999;font-size:12px;}

#category {width:100%;max-width:1200px;margin:0 auto 36px auto;}
#category ul {border-top:solid 1px #ddd;border-left:solid 1px #ddd;}
#category ul:after {display:block;visibility:hidden;clear:both;content:""}
#category ul li {display:block;float:left;width:20%;border-bottom:solid 1px #ddd;border-right:solid 1px #ddd;}
#category ul li a {display:block;height:40px;text-align:center;line-height:40px;}
#category ul li a.on,
#category ul li a:hover {color:#fff;background:#ff7700;}

#category ul li,
#category ul li a {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}


#new {width:100%;max-width:1200px;margin:0 auto 36px auto;}


#series {width:100%;margin:0 auto 36px auto;padding:0 0 18px 0;background:#f6f6f6;}
#series .back {margin:0 0 18px 0;padding:0 20px;border-bottom:solid 1px #ddd;}
#series .back a {display:block;width:100%;max-width:1200px;margin:0 auto;font-size:14px;font-weight:500;line-height:40px;cursor:pointer;}
#series .back a i {margin:0 4px 0 0;font-size:16px;}

#series h2 {display:block;max-width:1200px;margin:0 auto 12px auto;font-size:16px;font-weight:500;}
#series h2 .img {display:inline-block;}
#series h2 .img img {width:60px;height:auto;border-radius:50%;}
#series h2 strong {color:#ff7700;font-weight:500;}
#series ul {width:100%;max-width:1200px;margin:0 auto;}
#series ul:after {display:block;visibility:hidden;clear:both;content:""}
#series ul li {display:block;float:left;margin:0 4px 10px 0;}
#series ul li:last-child {margin:0 0 10px 0;}
#series ul li a {display:block;padding:0 12px;line-height:40px;background:#fff;border:solid 1px #ddd;border-radius:5px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#series ul li a.on,
#series ul li a:hover {color:#ff7700;border:solid 1px #ff7700;}


#rank {width:100%;max-width:1200px;margin:0 auto;}
#rank ul {}
#rank ul li {display:block;position:relative;margin:0 0 8px 0;padding:10px 20px;border:solid 1px #ddd;border-radius:5px;cursor:pointer;}
#rank ul li:after {display:block;visibility:hidden;clear:both;content:""}

#rank ul li div.left {float:left;}
#rank ul li div.left:after {display:block;visibility:hidden;clear:both;content:""}
#rank ul li div.right {position:absolute;right:20px;top:10px;line-height:60px;}
#rank ul li div.right:after {display:block;visibility:hidden;clear:both;content:""}

#rank ul li .num {float:left;width:40px;margin:0 40px 0 0;color:#336ebe;text-align:center;}
#rank ul li .num .number {font-weight:500;line-height:60px;}
#rank ul li .num img {width:40px;height:auto;margin:0 0 4px 0;border-radius:50%;}
#rank ul li .num p {font-weight:500;}
#rank ul li .profile {float:left;margin:0 40px 0 0;text-align:center;}
#rank ul li .profile img {width:60px;height:auto;border:solid 1px #ddd;border-radius:50%;}
#rank ul li .chanel {position:relative;height:60px;padding:12px 0 0 0;}
#rank ul li .chanel strong {display:block;font-size:14px;font-weight:500;}

#rank ul li .subscriber {float:left;margin:0 40px 0 0;}
#rank ul li .view {float:left;margin:0 40px 0 0;}
#rank ul li .tag {float:left}
#rank ul li .tag1 {display:inline-block;padding:0 6px;color:#fff;font-size:12px;line-height:24px;background:#ff7700;border-radius:3px;}
#rank ul li .tag2 {display:inline-block;padding:0 6px;color:#fff;font-size:12px;line-height:24px;background:#336ebe;border-radius:3px;}

.intro {display:block;width:100%;max-width:1200px;margin:0 auto 40px auto;padding:20px;background:#f6f6f6;border:solid 1px #eee;border-radius:5px;}
.intro h2 {display:block;margin:0 0 6px 0;font-size:18px;font-weight:500;letter-spacing:-1px;word-break:keep-all;}
.intro p {margin:0 0 24px 0;font-size:14px;word-break:keep-all;}
.intro .warning {padding:20px;background:#fff;border-radius:5px;}
.intro .warning h3 {display:block;margin:0 0 6px 0;color:#ff7700;font-size:14px;font-weight:500;letter-spacing:-1px;word-break:keep-all;}
.intro .warning ul {}
.intro .warning ul li {display:block;margin:0 0 4px 0;padding:0 0 0 10px;background:url(../../../theme/basic/img/bullet.png) no-repeat 0 8px;}
.intro .warning ul li:last-child {margin:0;}
.intro .tel {font-size:16px;font-weight:500;}
.intro .tel strong {font-family:'Lato';color:#ff7700;font-size:24px;font-weight:700;}
.intro a {display:inline-block;padding:0 12px;color:#fff;line-height:30px;background:#ff7700;border-radius:3px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.intro a:hover {color:#ff7700;background:#666;}





@media screen and (max-width:1240px) {
#container_wrap {margin-left:80px;}
#container_wrap.off {margin:0 !important;}

.side_nav {left:-300px;}

.event_banner {margin:40px 20px 36px 20px;}

.main_quick {margin:0 20px 48px 20px;}

#footer {width:auto;padding:60px 20px}

h2#container_title {width:auto;padding:24px 20px;}


#list_class {padding:0 20px;}
#list_class ul li {width:32%;margin:0 2% 24px 0;}
#list_class ul li:nth-child(4n) {margin:0 2% 24px 0;}
#list_class ul li:nth-child(3n) {margin:0 0 24px 0;}

#keyword {padding:0 20px 18px 20px;}
#keyword .back {padding:0;}

#category {padding:0 20px;}

#series {padding:0 20px 18px 20px;}
#series .back {padding:0;}

#rank {padding:0 20px;}
}






@media screen and (max-width:1024px) {
#container_wrap {margin-left:0px;}

#body_wrap {padding:130px 0 40px 0;}

/* header */
#header {height:129px;padding:0 20px;}

#header #logo {padding:10px 0;}
#header #logo a.btn_nav {margin:14px 8px 0 0;}
#header #logo .schoolname {display:block;margin:0;font-size:18px;}
#header #logo a.logo {display:block;margin:-20px 0 0 0;}

ul.tnb {float:right;padding:20px 0 0 0;}
ul.tnb li {margin:0 4px 0 0;}
ul.tnb li a {padding:0 8px;}

.hd_sch_wr {position:relative;left:0;top:0;width:100%;
-webkit-transform:translate(0,0);
-moz-transform:translate(0,0);
-ms-transform:translate(0,0);
-o-transform:translate(0,0);
transform:translate(0,0);
}
#hd_sch #sch_stx {height:40px;padding:0 40px 0 0;font-size:14px;line-height:38px;text-indent:10px;border-radius:5px;}
#hd_sch #sch_submit {right:0px;width:40px;height:40px;line-height:40px;}
#hd_sch #sch_submit i {font-size:20px;}


.gnb ul li {width:160px;}

.gnb_side {display:none;}

.event_banner {margin:40px 20px 36px 20px;}


.main_quick {width:auto;margin:0 20px 48px 20px;}
.main_quick ul li {width:33.33%;}


#footer .logo {float:none;width:auto;margin:0 0 36px 0;}
#footer .copy {float:none;width:auto;}
#footer .copy ul.bnb li {margin:0 18px 0 0;padding:0;background:none;}
#footer .customer {top:60px;width:auto;}


#list_class {width:auto;margin:0 20px 36px 20px;padding:0;}

#category {width:auto;margin:0 20px 36px 20px;padding:0;}
#category ul li {width:25%;}


#rank {width:auto;margin:0 20px;padding:0;}

#rank ul li .num {margin:0 20px 0 0;}
#rank ul li .profile {margin:0 20px 0 0;}

#rank ul li .subscriber {margin:0 20px 0 0;}
#rank ul li .view {margin:0 20px 0 0;}

.intro h2 {font-size:16px;line-height:20px;}
.intro p {font-size:13px;}
.intro .warning {padding:20px 10px;}
.intro .tel {font-size:14px;}
.intro .tel strong {font-size:20px;}
}





@media screen and (max-width:768px) {

ul.tnb {display:none;}

.tnb_mobile {display:block;}

.gnb ul li {width:25%;}
.gnb ul li:last-child {border-right:none;}
.gnb ul li a {font-size:13px;}

.event_banner {margin:20px 20px 36px 20px;}


.main_quick {margin:0 20px 36px 20px;}
.main_quick ul li {width:50%;}
.main_quick ul li .icon {margin:0 8px 0 0;}
.main_quick ul li .icon img {width:50px;height:auto;}
.main_quick ul li .icon .circle {width:40px;height:40px;margin:5px;}
.main_quick ul li p {font-size:13px;line-height:50px;}


#footer .copy {margin:0 0 36px 0;}
#footer .customer {position:relative;left:0;right:auto;top:0px;width:auto;}

h2#container_title {margin:0 0 24px 0;padding:12px 20px;font-size:18px;border-bottom:solid 1px #eee;}


#list_class ul li {width:49%;margin:0 2% 24px 0;}
#list_class ul li:nth-child(4n) {margin:0 2% 24px 0;}
#list_class ul li:nth-child(3n) {margin:0 2% 24px 0;}
#list_class ul li:nth-child(2n) {margin:0 0 24px 0;}

#keyword {margin:-24px 0 36px 0;}
#keyword h2 {font-size:18px;}
#keyword h3 {font-size:14px;}

#category ul li {width:33.33%;}
#category ul li a {font-size:12px;}

#series {margin:-24px 0 36px 0;}


#rank ul li div.right {clear:both;position:relative;left:0;right:auto;top:0;margin:6px 0 0 0;padding:6px 0 0 0;line-height:24px;border-top:solid 1px #eee;}

#rank ul li .num {margin:0 8px 0 0;}
#rank ul li .profile {margin:0 8px 0 0;}
#rank ul li .chanel {padding:0;}

#rank ul li .subscriber {margin:0 8px 0 0;}
#rank ul li .view {margin:0 8px 0 0;}
}





@media screen and (max-width:480px) {


#list_class ul li {width:100%;margin:0;padding:12px 0;border-bottom:solid 1px #eee;}
#list_class ul li:nth-child(4n) {margin:0;}
#list_class ul li:nth-child(3n) {margin:0;}
#list_class ul li:nth-child(2n) {margin:0;}
#list_class ul li:last-child {border-bottom:none;}
#list_class ul li .img {width:80px;}
#list_class ul li .con {margin:0 0 0 90px;}
#list_class ul li .con .sub_title {line-height:16px;}
#list_class ul li .con .title {font-size:16px;line-height:20px;}

#category ul li {width:50%;}
}