@import url('/resource/css/basic.css'); 
@import url('/resource/css/dgedu/layout.css'); /* default */

#wrap { position:relative; overflow:hidden; }
.container { position:relative; width:100%; max-width:70rem; margin:0 auto; }
.container:after { content:""; display:block; clear:both; }

/* slick slide common */
.slick-slider { -webkit-transition:all ease-in-out .3s; transition:all ease-in-out .3s; -webkit-box-sizing:border-box; box-sizing:border-box; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; -ms-touch-action:pan-y; touch-action:pan-y; -webkit-tap-highlight-color:transparent; }
.slick-slide { display:none; height:100%; min-height:1px; vertical-align:middle; }
.slick-list { overflow:hidden; }
.slick-list.dragging { cursor:pointer; }
.slick-initialized .slick-slide { display:inline-block; }
.slick-arrow.slick-hidden { display:none; }
.slick-current { opacity:1; display:block; }
.slick-track { position:relative; left:0; top:0; display:block; margin-left:auto; margin-right:auto; }
/* slick arrow show */
.arwShow .slick-arrow.slick-hidden { display:inline-block; }


#wrap { position:relative; overflow:hidden; } 

body.menuOpen { overflow:hidden; }
 
#contents { height:auto; overflow:hidden; }
#cntntsView { overflow:visible; }

/* header */
#header { position:relative; background:#fff; color:#000; opacity:0; -webkit-transform:translateY(-10%); transform:translateY(-10%); -webkit-transition:0.9s 1s; transition:0.9s 1s; font-family:"SCDream"; z-index:99; }
.start #header { opacity:1; -webkit-transform:none; transform:none; }
#header:after { content:""; display:block; clear:both; }
#header .logo { position:absolute; left:calc(50% - 700px); font-size:0; margin-top:1.2rem; z-index:30; }
#header .logo img { display:inline-block; vertical-align:middle; } 

/* header nav */
#header .header_wrap { position:relative; height:4.5rem; z-index:0; }

/* web navigation */
/* gnb common */
#nav { position:relative; width:100%; }
#gnb { position:relative; z-index:2; }
#gnb li a { position:relative; display:block; font-weight:400; line-height:1.4; }
#gnb li a span { position:relative; display:inline-block; word-break:break-all; z-index:0; }
#gnb .depth01 { width:100%; max-width:70rem; margin:0 auto; padding-left:25rem; z-index:1; }
#gnb .depth01 > ul { display:flex; justify-content:space-around; text-align:center; width:100%; font-size:0; line-height:0; }
#gnb .depth01 > ul > li { display:inline-block; vertical-align:top; font-size:.8rem; line-height:1.6; }
#gnb .depth01 > ul > li.on > a { color:#327c2e; }
#gnb .depth01 > ul > li > a { display:flex; width:100%; height:100%; line-height:4.5rem; padding-bottom:.5rem; justify-content:center; align-items:center; font-size:1rem; color:#37312f; font-weight:600;  z-index:2; overflow:hidden; }
#gnb .depth01 > ul > li > a:before,
#gnb .depth01 > ul > li > a:after { content:""; position:absolute; border-radius:50%; transform:scale(0); -webkit-transform:scale(0); ; transition:transform .2s; -webkit-transition:transform .2s; } 
#gnb .depth01 > ul > li > a:before { left:calc(50% - 5px); bottom:.2rem; width:10px; height:10px; background:#006c3a; }
#gnb .depth01 > ul > li > a:after { left:calc(50% - 9px); bottom:0; width:18px; height:18px; background:#006c3a; opacity:.4; }
#gnb .depth01 > ul > li > a > span { display:inline-block; }
#gnb .depth01 > ul > li > a[target='_blank'] > span:after { content:"\e980"; display:inline-block; padding-left:.25rem; font-family:'xeicon'; font-size:.9rem; }
#gnb .depth02 { width:100%; height:auto; text-align:left; }
#gnb .depth02 .titBox { display:none; }
#gnb .depth02 > ul { padding:.75rem 0; }
#gnb .depth02 > ul > li > a span { padding:0 .2rem; }
#gnb .depth02 > ul > li.dep:hover:before { color:#fff; }
#gnb .depth02 > ul > li.dep > a { padding-right:2.25rem !important; }
#gnb .depth02 > ul > li.dep > a:before { content:'\e913'; position:absolute; right:0.5rem; top:0.2rem; width:1.4rem; height:1.4rem; line-height:1.4rem; text-align:center; border-radius:5px; font-family:'xeicon'; color:#006c3a; font-size:0.8rem; font-weight:bold; }
#gnb .depth02 > ul > li > a { color:#37312f; font-weight:400; padding:.65rem .7rem; font-size:.75rem; outline:none; }
#gnb .depth02 > ul > li > a[target='_blank'] > span:after { content:"\e980"; display:inline-block; padding-left:.25rem; font-family:'xeicon'; vertical-align:middle; font-size:.8rem; }
#gnb .depth03 { position:relative; display:none; }
#gnb .depth03 > ul > li + li { margin-top:.4rem; }
#gnb .depth03 > ul > li > a { font-size:.75rem; padding-left:.5rem; color:#000; }
#gnb .depth03 > ul > li > a:before { content:""; position:absolute; left:0; top:.5rem; width:4px; height:4px; border-radius:50%; background:#006c3a; }
#gnb .depth03 > ul > li > a[target='_blank'] > span:after { content:"\e980"; display:inline-block; padding-left:.15rem; font-family:'xeicon'; vertical-align:middle; font-size:.7rem; }
#gnb .depth03 > ul > li > a:hover,
#gnb .depth03 > ul > li > a:focus { color:#006c3a; font-weight:600; }
#gnb .active > .depth03 { display:block; }
#gnb .depth04 { display:none; visibility:hidden; } 
#gnb:before, #nav a, #gnb li > a:before, #gnb li > a:after, #gnb li > a > span:before { transition:all .1s; -webkit-transition:all .1s; }
/* gnb : active  */
#gnb .depth01 > ul > li.on > a:before,
#gnb .depth01 > ul > li.on > a:after { transform:scale(1); -webkit-transform:scale(1); }
#gnb .depth02 > ul > li > a:hover,
#gnb .depth02 > ul > li > a:focus { color:#006c3a; font-weight:600; }
#gnb .depth02 > ul > li.dep.active > a { background:#006c3a; color:#fabd00; }
#gnb .depth02 > ul > li.dep > a:hover:before,
#gnb .depth02 > ul > li.dep > a:focus:before { color:#006c3a; }
#gnb .depth02 > ul > li.dep.active > a:before { content:'\e91a'; color:#fabd00; }

/* gnb : fullDown */
#nav.fullDown #gnb:after { content:''; position:absolute; top:4.5rem; left:50%; width:100%; height:0; border-top:3px solid #006c3a; background:#fabd00; box-shadow:0 5px 5px 0 rgb(0,0,0,0.1); -webkit-transform:translateX(-50%); transform:translateX(-50%); opacity:0; }

#nav.fullDown ul,
#nav.fullDown li { height:100%; }
#nav.fullDown .depth01 { position:relative; height:4.5rem;  overflow:hidden; }
#nav.fullDown .depth01 > ul { display:table; table-layout:fixed; }
#nav.fullDown .depth01 > ul > li { position:relative; display:table-cell; }
#nav.fullDown .depth01 > ul > li + li:before { content:""; position:absolute; left:-1px; top:calc(4.5rem + 3px); height:calc(100% - 3rem - 3px); border-left:1px solid rgba(0,0,0,.2); z-index:1; }
#nav.fullDown .depth01 > ul > li > a { height:5rem; }
#nav.fullDown .depth02 { position:relative; left:auto; top:-10px;  opacity:0; visibility:hidden; transition-delay:.0s; z-index:1; }
#nav.fullDown .depth02 > ul > li > a { padding:.35rem .5rem; }
#nav.fullDown .depth02 > ul > li > a > span:before { content:""; position:absolute; left:0; bottom:0; height:10px; width:0; background:#006c3a; z-index:-1; opacity:0; }
#nav.fullDown .depth03 { background:#e9f0ed; padding:.5rem; border-top:2px solid #006c3a; }
/** fullDown : active **/
#nav.fullDown #gnb.active { height:auto; }
#nav.fullDown #gnb.active:after { height:calc(100% - 4.5rem); opacity:1; }
#nav.fullDown .active .depth01 { height:auto; }
#nav.fullDown .active .depth01 > ul > li + li:after { opacity:1; }
#nav.fullDown .active .depth02 { opacity:1; visibility:visible; }
#nav.fullDown .depth02 > ul > li > a:hover > span:before,
#nav.fullDown .depth02 > ul > li > a:focus > span:before,
#nav.fullDown .depth02 > ul > li.dep.active > a > span:before { width:100%; opacity:.2; }

/* gnb :oneDown */
#nav.oneDown ul,
#nav.oneDown li { height:100%; }
#nav.oneDown .depth01 { position:relative; }
#nav.oneDown .depth01 > ul > li { position:relative; }
#nav.oneDown .depth02 { position:absolute; width:14rem; left:calc(50% - 7rem); top:4.5rem; overflow:hidden; opacity:0; visibility:hidden; transition-delay:.0s; text-align:left; box-shadow:2px 2px 5px rgba(0,0,0,0.3); }
#nav.oneDown .dep .depth02 { border-top:3px solid #006c3a;  }
#nav.oneDown .depth02 > ul { padding:.75rem 0; background:#fabd00; }
#nav.oneDown .depth02 > ul > li > a { padding:.35rem .7rem; }
#nav.oneDown .depth02 > ul > li > a > span:before { content:""; position:absolute; left:0; bottom:0; height:10px; width:0; background:#006c3a; z-index:-1; opacity:0; }
#nav.oneDown .depth03 { background:#e9f0ed;  padding:.5rem 1rem; border-top:2px solid #006c3a; }
/** oneDown : active **/
#nav.oneDown .depth01 > ul > li.on > .depth02 { display:block; opacity:1; visibility:visible; }
#nav.oneDown .depth01 > ul > li.on > .depth02:before { height:100%; opacity:1; }
#nav.oneDown .depth02 > ul > li > a:hover > span:before,
#nav.oneDown .depth02 > ul > li > a:focus > span:before,
#nav.oneDown .depth02 > ul > li.dep.active > a > span:before { width:100%; opacity:.2; }

/* gnb :oneFull */
#nav.oneFull ul,
#nav.oneFull li { height:100%; }
#nav.oneFull .depth01 > ul { width:100%; text-align:center; font-size:0; line-height:0; }
#nav.oneFull .depth01 > ul > li { display:inline-block; float:none; vertical-align:top; font-size:.8rem; line-height:1.6; }
#nav.oneFull .depth02 { position:absolute; left:0; top:4.5rem; min-height:18rem; opacity:0; visibility:hidden; transition-delay:.0s; text-align:left; background:#fff; border-top:3px solid #006c3a; box-shadow:0 5px 5px rgba(0,0,0,.3); }
#nav.oneFull .depth02 .titBox { display:block; position:absolute; left:calc(50% - 35rem); top:0; width:14.5rem; height:100%; padding:1.5rem 2rem 0 0; color:#fff; z-index:0; }
#nav.oneFull .depth02 .titBox:before { content:""; position:absolute; right:0; top:0; width:300%; height:100%; border-radius:0 0 2rem 0; background:#006c3a; z-index:-1; }
#nav.oneFull .depth02 .titBox strong { position:relative; display:block; font-size:1.25rem; font-weight:700; padding-bottom:1rem; margin-bottom:1rem; }
#nav.oneFull .depth02 .titBox strong:before { content:""; position:absolute; left:0; bottom:0; width:calc(100% - 10px); border-top:1px solid rgba(255,255,255,0.5); }
#nav.oneFull .depth02 .titBox strong:after { content:""; position:absolute; right:0; bottom:-2px; width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,0.5); }
#nav.oneFull .depth02 .titBox p { line-height:1.5rem; font-size:.75rem; }
#nav.oneFull .depth02 .titBox span { position:absolute; left:-1rem; bottom:1rem; width:200px; height:175px; padding-left:45px; padding-top:70px; background:url('/resource/images/dgedu/layout/bg_gnb_ico.png') no-repeat center; }
#nav.oneFull .depth02 .titBox span img { max-width:80px; max-height:80px; }
#nav.oneFull .depth02 > ul { display:flex; width:100%; max-width:70rem; margin:0 auto; font-size:0; line-height:0; padding-left:16rem; flex-wrap:wrap; }
#nav.oneFull .depth02 > ul > li { width:31%; vertical-align:top; padding:.5rem 0; line-height:1.6; }
#nav.oneFull .depth02 > ul > li > a { border-radius:.5rem; font-size:.8rem; box-shadow:0 0 8px rgba(0,0,0,0.15); z-index:1; border:1px solid transparent; }
#nav.oneFull .depth02 > ul > li > a[target='_blank']:before { content:"\e980"; position:absolute; right:0.5rem; top:0.5rem; width:1.4rem; height:1.4rem; line-height:1.4rem; text-align:center; border-radius:5px; font-family:'xeicon'; color:#006c3a; font-size:0.8rem; font-weight:bold; background:#dbf4e8; } 
#nav.oneFull .depth02 > ul > li > a[target='_blank'] > span:after { display:none; }
#nav.oneFull .depth02 > ul > li.dep > a:before { top:.5rem; }
#nav.oneFull .depth03 { opacity:0; padding:.5rem 1rem; background:#e9f0ed; border-radius:.5rem; }
/** oneFull : active **/
#nav.oneFull #gnb.active { height:auto; }
#nav.oneFull .depth01 > ul > li.dep.on > .depth02 { opacity:1; visibility:visible; }
#nav.oneFull .depth01 > ul > li.dep.on > .depth02:before { height:100%; opacity:1; transition-delay:0s; -webkit-transition-delay:0s; }
#nav.oneFull .depth02 > ul > li.dep.active .depth03 { opacity:1; display:block; }
#nav.oneFull .depth02 > ul > li > a:hover,
#nav.oneFull .depth02 > ul > li > a:focus,
#nav.oneFull .depth02 > ul > li.dep.active > a { border-color:#006c3a; box-shadow:0 0 8px rgba(0,108,58,.3); }

/* gnb shadow */
#gnbblind { display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.3); z-index:98; }

/* mobile button */
.mNav { display:none; }

/* mobile navigation  */
#mNav { position:fixed; right:-100%; top:0; width:100%; height:100%; background:#fff url('/images/dgedu/template/TC33/main/bg_ptrn.png'); z-index:999; overflow:auto; transition:all .2s; -webkit-transition:all .2s; visibility:hidden; }
#mNav.active { right:0; visibility:visible; }
#mNav .inner { padding:1rem 1rem 2rem; }
#mNav .snb { display:block; overflow:hidden; margin-right:2rem; }
#mNav .logo { max-width:calc(100% - 1.5rem);  }
#mNav .logo a { display:block; }
#mNav .logo a img { display:block; width:15rem; max-width:100%; }
#mNav #mNavClose { position:absolute; right:0; top:0; width:3rem; height:3rem; line-height:3rem; font-size:1.5rem; text-align:center; display:block; color:#fabd00; background:#37312f; }
/* mgnb */
#mgnb { margin-top:1rem; }
#mgnb li, 
#mgnb li a { display:block; position:relative; }
#mgnb li a[target='_blank']:after { display:inline-block; padding-left:.25rem; font-family:'xeicon'; font-weight:400; content:'\e980'; }
#mgnb li a { color:#333; font-weight:600; word-break:break-all; }
#mgnb .depth01 > ul > li > a { position:relative; padding:1rem 0; font-size:1rem; font-weight:600; color:#222; border-bottom:1px solid #37312f; }
#mgnb .depth01 > ul > li > a:after { content:""; position:absolute; left:0; bottom:-1px; width:0; height:2px; background:#006c3a; -webkit-transition:width 0.3s; transition:width 0.3s; }
#mgnb .depth02 { display:none; padding:1rem; background:#006c3a; }
#mgnb .depth02 > ul > li + li { margin-top:.5rem; }
#mgnb .depth02 > ul > li > a { font-size:.9rem; color:#99d6ba; font-weight:400; }
#mgnb .depth03 { display:none; margin-top:.5rem; padding:1rem; background:#99d6ba; }
#mgnb .depth03 > ul > li:before { content:""; position:absolute; left:0; top:.45rem; width:4px; height:4px; border-radius:50%; background:#222; }
#mgnb .depth03 > ul > li + li { margin-top:.5rem; }
#mgnb .depth03 > ul > li > a { padding-left:12px; color:#222; font-size:.8rem; }
#mgnb .depth04 { display:none; margin-top:.5rem; padding:.65rem; border:1px solid #1f6abb; background:#fff; }
#mgnb .depth04 > ul > li + li { margin-top:.35rem; }
#mgnb .depth04 > ul > li:before { content:""; position:absolute; left:0; top:.55rem; width:5px; height:2px; background:#646464; }
#mgnb .depth04 > ul > li > a { padding-left:12px; color:#666; font-size:.8rem; font-weight:400; }
/* mgnb :depth, _blank icon */
#mgnb .depth01 > ul > li.dep > a { padding-right:2.75rem; }
#mgnb .depth02 > ul > li.dep > a { padding-right:1rem; }
#mgnb .depth03 > ul > li.dep > a { padding-right:1rem; }
#mgnb li.dep > a:before { position:absolute; font-family:'xeicon'; font-size:1rem; }
#mgnb .depth01 > ul > li.dep > a:before { content:"\e943"; position:absolute; right:0; top:0.9rem; width:1.5rem; height:1.5rem; line-height:1.5rem; text-align:center; font-family:"xeicon"; font-size:0.8rem; color:#000; background:#fabd00; }
#mgnb .depth02 > ul > li.dep > a:before { content:'\e942'; top:.1rem; right:0; }
#mgnb .depth03 > ul > li.dep > a:before { content:'\e913'; top:.1rem; right:0; font-size:.8rem; }
/* mgnb : active */
#mgnb .depth01 > ul > li > a:hover { color:#006c3a; }
#mgnb .depth01 > ul > li > a:hover:after { width:100%; }
#mgnb .depth01 > ul > li.dep.active > a,
#mgnb .depth01 > ul > li.dep.active > a { background:#fff; border-color:#006c3a; }
#mgnb .depth02 > ul > li.dep > a:hover,
#mgnb .depth02 > ul > li.dep > a:focus { color:#fff; }
#mgnb li.dep.active > div { display:block; }
#mgnb .depth01 > ul > li.dep.active > a:before { content:"\e946"; }
#mgnb .depth02 > ul > li.dep.active > a:before { content:'\e945'; }
#mgnb .depth03 > ul > li.dep.active > a:before { content:'\e9c1'; }

/* 상단 검색 */
#header .search { position:absolute; z-index:2; top:0; right:0; }
#header .search > a { position:absolute; right:0; top:0; z-index:1; display:block; width:4.5rem; height:4.5rem; line-height:4.5rem; text-align:center; background:#37312f; color:#fabd00; font-size:1.5rem; }
#header .search .searchBg { display:none; position:absolute; left:0; top:0; width:100%; height:500vh; background:#000; opacity:0.4; z-index:40; }
#header .search .searchBox { display:none; position:absolute; top:0; left:0; width:100%; height:4.5rem; background:#fabd00; z-index:40; }
#header .search .searchBox > div { position:relative; width:90%; max-width:30.5rem; height:3rem; border-radius:3rem; border:3px solid #37312f; margin:0.7rem auto 0; padding:0 3rem 0 1.5rem; }
#header .search .searchBox input { background:transparent; border:none; color:#37312f; font-family:"NotoSans"; font-size:1.2rem; width:100%; height:2.7rem; }
#header .search .searchBox input::placeholder { color:#37312f; font-family:"SCDream"; }
#header .search .searchBox button { position:absolute; right:0.5rem; top:0; font-size:1.5rem; color:#37312f; line-height:2.6rem; } 
#header .search .searchBox .btnClose { position:absolute; right:0; top:0; width:4.5rem; height:4.5rem; background:#37312f; color:#fabd00; font-size:1.5rem; text-align:center; line-height:4.5rem; }
/* 상단 검색 : active */
.search_active #header .search { z-index:99; width:100%; }
.search_active #header .mNav { display:none; } 
.mobileMenu { display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:20; } 
 
/* footer */
#footer { position:relative; background:#1e2432; text-align:center; color:#a6b1c0; padding-bottom:2rem; font-family:"SCDream"; z-index:3; overflow:hidden; }
#footer:before { content:""; position:absolute; left:0; top:6rem; width:100%; height:1px; background:#353a47}
#footer .footerWrap { position:relative; display:flex; height:6rem; align-items:center; justify-content:space-between; margin-bottom:2rem; } 
#footer .f_logo { display:inline-block; } 
#footer .footerWrap ul { margin:-.25rem -1rem; }
#footer .footerWrap ul > li { display:inline-block; padding:.25rem 1rem; }
#footer .footerWrap ul > li a { font-size:1rem; font-weight:600; text-transform:uppercase; } 
#footer .footerWrap .f_link { display:block; text-align:center; border:1px solid #4b505b; width:13rem; line-height:3rem; text-align:center; }
#footer .footerWrap .f_link i { margin-left:1rem; } 
#footer .sns { position:absolute; right:0; bottom:0; }
#footer .sns > li { display:inline-block; font-size:1.4rem; margin-left:1rem; } 
#footer a { -webkit-transition:color 0.3s; transition:color 0.3s; }
#footer a:hover,
#footer a:focus { color:#fff; }

/* sub layout */
.sub #header { opacity:1; -webkit-transform:none; transform:none; -webkit-transition:0s; transition:0s; }
#sub_container { position:relative; margin:0 auto; } 
#sub_container:after { content:""; display:block; clear:both; } 
.subContent { min-height:35rem; padding:4.5rem 0; }

/* subHeader */
.subHeader { position:relative; padding:3.6rem 2rem; text-align:center; word-break:keep-all; }
.subHeader:before { content:""; position:absolute; left:0; top:0; width:calc(100% - 4.5rem); height:100%; background:url('/images/dgedu/template/TC33/sub/sub_bg1.png') no-repeat left bottom, url('/images/dgedu/template/TC33/sub/sub_bg2.png') no-repeat right bottom 3.5rem, #fabd00;  } 

 /* subHeader : location */
.subLocation { position:relative; opacity:0; -webkit-transition:0.5s 0.2s; transition:0.5s 0.2s; font-weight:600; }
.subLocation li { display:inline-block; vertical-align:top; line-height:1.5rem; color:#222; font-size:.8rem; font-weight:600; }
.subLocation li i { margin-right:.25rem; }
.subLocation li + li:before { content:"\e93f"; display:inline-block; font-family:'xeicon'; margin:0 .25rem; font-weight:400; color:#222; }
.subLocation li:last-child { color:#327c2e; }
.start .subLocation { opacity:1; }

/* subHeader : pageTitle */
#pageTitle { position:relative; margin:1.5rem 0; font-size:2.8rem; line-height:1.3; font-weight:700; color:#37312f; overflow:hidden; }
#pageTitle span { position:relative; opacity:0; bottom:-3rem; -webkit-transition:0.3s; transition:0.3s; }
.start #pageTitle span { opacity:1; bottom:0; }

/* subHeader : sns */ 
.snsBox  { position:relative; opacity:0; -webkit-transition:0.5s 0.2s; transition:0.5s 0.2s; font-weight:600; }
.snsBox button { position:relative; display:inline-block; width:1.8rem; height:1.8rem; vertical-align:middle; line-height:1.8rem; font-size:.8rem; color:#fabd00; overflow:hidden; padding:0; border-radius:50%; background:#3d352e; z-index:2; transition:all .2s; -webkit-transition:all .2s; }
.snsBox button + button { margin-left:.5rem; } 
.snsBox .snsMore { position:absolute; left:calc(50% + 0.5rem); top:0; opacity:0;  visibility:hidden; }
.snsBox .snsMore p { position:relative; display:inline-block; height:1.8rem; padding:0 1rem 0 2rem; opacity:0; visibility:hidden; border-radius:0.9rem; background:#fff; overflow:hidden; -webkit-transition:all .15s; transition:all .15s; } 
.snsBox .snsMore a { position:relative; display:inline-block; width:1.5rem; height:1.8rem; line-height:1.8rem; color:#3d352e; font-size:1rem; vertical-align:middle; -webkit-transition:all .15s; transition:all .15s; }
.snsBox .snsMore a.close { position:absolute; top:0; left:-.15rem; width:1.8rem; height:1.8rem; z-index:2; border-radius:50%; background:#327c1e; color:#fabd00; font-size:.8rem; }
.start .snsBox { opacity:1; }
/* subHeader : sns : active */ 
.snsBox .snsMore.active { opacity:1; visibility:visible; }
.snsBox .snsMore.active p { opacity:1; visibility:visible; }
.snsBox button.active,
.snsBox button:hover,
.snsBox button:focus { background-color:#327c2e; }
.snsBox .snsMore a.snsF:hover,
.snsBox .snsMore a.snsF:focus { color:#4769a9; }
.snsBox .snsMore a.snsT:hover,
.snsBox .snsMore a.snsT:focus { color:#1da1f4; }
.snsBox .snsMore a.snsK:hover,
.snsBox .snsMore a.snsK:focus { color:#fae100; }
.snsBox .snsMore a.snsB:hover,
.snsBox .snsMore a.snsB:focus { color:#03c75a; } 

/* media query mobile */ 
@media (max-width:1680px) { 
    /* web navigation */
    #gnb { margin-right:0; }
    #gnb .depth01 { width:100%; padding:0 4.5rem 0 24rem; }

}
@media (max-width:1440px) { 
    .container { width:96%; } 

    /* header */
    #header .logo { left:2%; }
    
    /* web navigation */
	#gnb { padding:0 1rem; }
	#gnb .depth01 { padding-right:3.5rem; }
	/* oneFull */
	#nav.oneFull .depth02 .titBox { left:0; width:13rem; padding-left:1rem; }
	#nav.oneFull .depth02 .titBox span { left:.5rem; }
	#nav.oneFull .depth02 > ul { padding-left:14rem; padding-right:1rem; }
	/* fullDown */
	#nav.fullDown #gnb { padding:0; }
	
	/* sub layout : subHeader */
	.subHeader { background:#fabd00; }
    .subHeader:before { width:100%; opacity:0.5; background-size:auto 50%; background-position:left bottom, right top; }
}
@media (max-width:1240px) { 
    /* header */
	#header, #header .mBtn, #header h1 { -webkit-transition:all 0s; transition:all 0s; }
    #header { position:fixed; width:100%; opacity:1; -webkit-transform:none; transform:none; background:#fff url('/images/dgedu/template/TC33/main/bg_ptrn.png'); }
    #header .header_wrap { height:3rem; }
    #header .logo { margin-top:0.5rem; -webkit-transform:scale(0.8); transform:scale(0.8); -webkit-transform-origin:left; transform-origin:left; }
    
    /* web navigation */
    #nav { display:none; }
    
    /* 상단 검색 */
    #header .search > a { right:3rem; width:3rem; height:3rem; line-height:3rem; } 
    #header .search .searchBox { height:8rem; }
    #header .search .searchBox input { font-size:1rem; }
    #header .search .searchBox .btnClose { width:3rem; height:3rem; line-height:3rem; }
    #header .search .searchBox > div { max-width:95%; margin-top:4rem; padding-left:0.8rem; }
   
   /* mobile navigation  */
    #header .mNav { position:relative; float:right; z-index:30; }
    #header .mNav { display:block; width:3rem; height:3rem; background:#fabd00; color:#37312f; text-align:center; font-size:1.5rem; line-height:3rem; }

    /* footer */
    #footer:before { display:none; }
    #footer .footerWrap { display:block; height:auto; margin-bottom:1rem; }
    #footer .f_logo { display:none; }
    #footer .footerWrap > ul { padding:.75rem 0; border-bottom:1px solid #353a47; } 
    #footer .footerWrap ul > li a { font-size:0.9rem; }
    #footer .footerWrap .f_link { margin:1.5rem auto 0; line-height:2.5rem; }
    #footer .sns { position:relative; right:auto; top:auto; margin-top:1rem; }
    
    /* sub layout */
	#sub_container { padding-top:3rem; }
	
	/* sub layout : subHeader */
	.subHeader { padding:2rem 1rem; }
	
	/* subHeader : pageTitle */
	#pageTitle { font-size:2.5rem; }
}

@media (max-width:1024px) { 
	/* sub layout */
	.subContent { min-height:inherit; padding:2.5rem 0; }
	
	/* subHeader : pageTitle */
	#pageTitle { font-size:2rem; }
}

@media (max-width:768px) { 
	
	 /* footer */ 
	 #footer .footerWrap > ul { margin:.25rem -.25rem; }
	 #footer .footerWrap ul > li { padding:.25rem; }
     #footer .footerWrap ul > li a { font-size:.85rem; }
	
	/* subHeader : sns */ 
	.snsBox button.btnPrint { display:none; }
	.snsBox .snsMore { position:relative; display:inline-block; left:auto; top:auto; vertical-align:middle; }
	.snsBox .snsMore p { display:inline-block; vertical-align:middle; width:0; height:0; padding:0; -webkit-transition:all .15s; transition:all .15s; }
	.snsBox .snsMore.active p { width:auto; height:auto; padding:0 .75rem; }
	.snsBox .snsMore a.close { left:-2rem; }
}
@media (max-width:420px) { 

    /* header */
    #header .logo { -webkit-transform:scale(0.6); transform:scale(0.6); overflow:hidden; } 
    
    /* 상단 검색 */
    #header .search .searchBox > div { width:95%; }
    
	 /* footer */ 
     #footer .footerWrap ul > li a { font-size:.8rem; }
    
	/* sub layout : subHeader */
	.subHeader { padding:1.5rem 1rem; }
	
	/* subHeader : pageTitle */
	#pageTitle { margin:1rem 0; font-size:1.5rem; }
}

@media (max-width:360px) { 
     /* header */
     #header .logo { -webkit-transform:scale(0.5); transform:scale(0.5); overflow:hidden; } 
}

@media (max-width:320px) { 
    /* header */
    #header .logo { -webkit-transform:scale(0.45); transform:scale(0.45); overflow:hidden; } 
}