@import url('/resource/css/basic.css'); @import url('/resource/css/dgedu/layout.css'); /* common */ #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:top; } .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; } /* header */ #header { position:relative; width:100%; height:7rem; background:#fff; border-bottom:1px solid #ccc; z-index:999; transition: top .2s linear; -webkit-transition: top .2s linear;} #header h1.logo{ position:absolute; left:calc(50% - 42.5rem); top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); z-index: 999;} #header h1.logo a { display:block; position: relative; height: 1.75rem; line-height: 1.75rem; font-size: 1.15rem; font-weight: 700; color: #000; letter-spacing: -0.1rem;} #header h1.logo .type2:before{ display: inline-block; width: 11.5rem; height: 1.75rem; vertical-align: top; background: url(/images/dgedu/template/TC01/main/logo.png) no-repeat left top / auto 100%; content: "";} h1.logo a img { vertical-align: middle; image-rendering:-webkit-optimize-contrast;} /* header Link : mNav 공통 */ .hdt_link{ position:relative; width:100%; height:2.5rem; font-weight: 400; border-bottom:1px solid #e5e5e5; z-index: 100;} .hdt_link .container{ max-width: 85rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; } .hdt_link .container:after{ display:none;} .hdt_link::after{content:''; display: block; clear: both; } .hdt_link a{ display:inline-block; font-size:15px; text-transform: uppercase;} .hdt_link a.dgHome{background: #1a4ab9; color: #fff; padding: 0 1rem; display: block; width: fit-content; float: left; } .hdt_link a.dgHome i {font-size:1rem;} .hdt_link .util{ line-height:2.5rem;} .hdt_link .util a + a{ margin-left:.5rem;} .hdt_link .util .krSymbol{ padding-left:2.15rem; background:url('/images/dgedu/template/TC01/layout/ico_kr.png') no-repeat left center;} .hdt_link .util .covid{ padding-left:1rem; color:#f00; font-weight:600; background:url('/images/dgedu/template/TC01/layout/ico_attr.png') no-repeat left center;} .hdt_link .link > ul{ font-size:0; height:2.5rem; display:flex; align-items:center;} .hdt_link .link > ul > li{ position:relative; font-size:15px; display:inline-block;} .hdt_link .link > ul > li ~ li{ padding-left:.75rem; margin-left:.75rem;} .hdt_link .link > ul > li ~ li:before{ content:""; position:absolute; left:0; top:calc(50% - 5px); height:10px; border-left:1px solid #ddd;} .hdt_link .link li.login > strong{ margin-right:10px;} .hdt_link .link li.login a + a:before{ content:""; display:inline-block; width:3px; height:3px; margin:0 5px; vertical-align: middle; background:#ccc;} .hdt_link .link li.login a.logout{ margin-left:10px;} .hdt_link .link li.lang .langList{ display:none; position:absolute; left:0; top:1.6rem; width:calc(100% + 1rem); height:auto; background:#0077d1; border:1px solid #ccc; box-shadow:0 0 5px rgba(0,0,0,0.3); text-align:center; z-index: 98;} .hdt_link .link li.lang .langList li + li{ border-top:1px solid rgba(255,255,255,0.5);} .hdt_link .link li.lang .langList a{ display:block; color:#fff; padding:.6rem .25rem; font-family: 'NotoSans'; font-weight:200;} .hdt_link .link li.lang .langList a:hover, .hdt_link .link li.lang .langList a:focus{ background:#003eae;} .hdt_link .link li.screenSize strong { font-weight: 700; color:#000;} .hdt_link .link li.screenSize p{ display:inline-block; height:1.5rem; padding:0 .25rem; border-radius:1rem; background:#f6f6f6; font-size:0;} .hdt_link .link li.screenSize a{ position:relative; display:inline-block; width:1.5rem; height:1.5rem; line-height:1.5rem; text-align:center; color:#000; font-size:0.9rem; } .hdt_link .link li.screenSize a + a:before{ content:""; position:absolute; left:0; top:calc(50% - 4px); height:8px; border-left:1px solid #aaa;} /* header Link :active */ .hdt_link a{ transition:all .2s; -webkit-transition:all .2s;} .hdt_link a:hover, .hdt_link a:focus{ text-decoration:underline;} /* header nav */ #header .header_wrap{ position:relative; height:4.5rem; } /* web navigation */ /* gnb common */ #nav{ position:relative; width:100%; z-index:99;} #gnb{ position:relative; height:4.5rem; z-index:2; } /* #gnb:before{ content:''; position:absolute; left:0; top:3.25rem; width:100%; height:3px; background:#004794;} */ #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:85rem; margin:0 auto; z-index:1; padding:0 4rem 0 1rem;} #gnb .depth01 > ul{ width:100%; font-size:0; line-height:0; text-align:right;} #gnb .depth01 > ul > li{ display:inline-block; vertical-align:top; font-size:.8rem; text-align:left; line-height:1.6; } #gnb .depth01 > ul > li ~ li{ margin-left:3rem;} #gnb .depth01 > ul > li.on > a{ color:#014598; } #gnb .depth01 > ul > li > a{ display:flex; width:100%; height:4.5rem; padding:0 .4rem; line-height:1.2; justify-content:center; align-items:center; font-size:1.1rem; color:#333; font-weight:600; z-index:2; overflow:hidden;} #gnb .depth01 > ul > li > a > span{ display:inline-block; } #gnb .depth01 > ul > li > a > span:before{content:""; position:absolute; right:-.4rem; top:-.4rem; width:.4rem; height:.4rem; border-radius:50%; background:#1a4ab6; transform:scale(0); -webkit-transform:scale(0);; transition:transform .2s; -webkit-transition:transform .2s;} #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 > 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; font-family:'xeicon'; font-size:0.9rem;} #gnb .depth02 > ul > li > a{ color:#111; font-weight:400; padding:.65rem .7rem; font-size:.8rem; 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:12px; color:#000; } #gnb .depth03 > ul > li > a:before{content:""; position:absolute; left:0; top:.45rem; width:4px; height:4px; border-radius:50%; background:#676767;} #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:#1c79e0; } #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 li > a:hover, #gnb li > a:focus, #gnb li.on > a{ color:#1a4ab6;} #gnb .depth01 > ul > li.on > a > span:before, #gnb .depth01 > ul > li.on > a > span:after{transform:scale(1); -webkit-transform:scale(1); } #gnb .depth02 > ul > li > a:hover, #gnb .depth02 > ul > li > a:focus, #gnb .depth02 > ul > li.dep.active > a{ color:#000; } #gnb .depth02 > ul > li.dep.active > a:before{ content:'\e91a';} #gnb .depth03 > ul > li > a:hover:before, #gnb .depth03 > ul > li > a:focus:before{background:#1a48b8;} /* gnb :fullDown */ #nav.fullDown ul, #nav.fullDown li{ height:100%; } #nav.fullDown .topGnb{ max-width:85rem; margin:0 auto; padding:0 4rem 0 1rem;} #nav.fullDown .topGnb > ul{ width:100%; font-size:0; line-height:0; text-align:right;} #nav.fullDown .topGnb > ul > li{ display:inline-block; vertical-align:top; font-size:.8rem; text-align:left; line-height:1.6; } #nav.fullDown .topGnb > ul > li ~ li{ margin-left:3rem;} #nav.fullDown .topGnb > ul > li.on > a{ color:#014598; } #nav.fullDown .topGnb > ul > li > a{ display:flex; width:100%; height:4.5rem; padding:0 .4rem; line-height:1.2; justify-content:center; align-items:center; font-size:1.1rem; color:#333; font-weight:600; z-index:2; overflow:hidden;} #nav.fullDown .topGnb > ul > li > a > span{ display:inline-block; } #nav.fullDown .topGnb > ul > li > a > span:before{content:""; position:absolute; right:-.4rem; top:-.4rem; width:.4rem; height:.4rem; border-radius:50%; background:#1a4ab6; transform:scale(0); -webkit-transform:scale(0);; transition:transform .2s; -webkit-transition:transform .2s;} #nav.fullDown .topGnb > ul > li > a[target='_blank'] > span:after{ content:"\e980"; display:inline-block; padding-left:.25rem; font-family:'xeicon'; font-size:.9rem; } #nav.fullDown .depth01{ position:absolute; left:0; top:4.5rem; width:100%; height:auto; max-width:100%; padding:2rem; opacity:0; visibility:hidden; transition-delay:.0s; text-align:left; background:#fff;} #nav.fullDown .depth01 > ul{ display:flex;} #nav.fullDown .depth01 > ul > li{ flex:1; margin:0 .75rem;} #nav.fullDown .depth01 > ul > li ~ li{ margin-left:.75rem;} #nav.fullDown .depth01 > ul > li > a{ display:block; height:auto; padding:.75rem 1.75rem .75rem 1rem; font-size:.9rem; border:1px solid #1a4ab9; border-radius:.5rem; background:#f3f7ff;} #nav.fullDown .depth01 > ul > li > a > span:before{ display:none;} #nav.fullDown .depth01 > ul > li.dep > a:before{ content:'\e941'; position:absolute; right:.75rem; top:.85rem; font-family: 'xeicon'; color:#555; font-size:.8rem;} #nav.fullDown .depth02{ position:relative; min-height:18rem; padding:.75rem 0; } #nav.fullDown .depth02 > ul > li + li{ margin-top:.5rem;} #nav.fullDown .depth02 > ul > li > a{ border-radius:.5rem; border:1px solid #ccc; padding:.5rem 1rem; z-index: 1; background:#fff;} #nav.fullDown .depth02 > ul > li > a > span{ display:block;} #nav.fullDown .depth02 > ul > li.dep > a:before{ top:.35rem;} #nav.fullDown .depth02 > ul > li > a[target='_blank']:before{ content:"\e980"; position:absolute; right:1rem; top:.5rem; font-family:'xeicon'; font-size:.9rem; } #nav.fullDown .depth02 > ul > li > a[target='_blank'] > span:after{ display:none;} #nav.fullDown .depth03{ border-radius:.5rem; margin-top:-.75rem; padding:1.5rem 1rem 1rem; background:#f6f6f6; } /** fullDown:active **/ #nav.fullDown #gnb.active{ height:auto; } #nav.fullDown #gnb.active:after{ height:100%; opacity:1; } #nav.fullDown #gnb.active .depth01 {height:auto; } #nav.fullDown #gnb.active .depth01, #nav.fullDown #gnb.active .depth02{ opacity:1; visibility:visible; } #nav.fullDown #gnb.active .depth01 > ul > li.on > a, #nav.fullDown #gnb.active .depth01 > ul > li > a:hover, #nav.fullDown #gnb.active .depth01 > ul > li > a:focus{background:#1a4ab6; color:#fff;} #nav.fullDown #gnb.active .depth01 > ul > li.on > a:before, #nav.fullDown #gnb.active .depth01 > ul > li > a:hover:before, #nav.fullDown #gnb.active .depth01 > ul > li > a:focus:before{color:#fff;} #nav.fullDown #gnb.active .depth02 > ul > li.active > a, #nav.fullDown #gnb.active .depth02 > ul > li > a:hover, #nav.fullDown #gnb.active .depth02 > ul > li > a:focus{border-color:#1a4ab6; color:#1a4ab6;} /* 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;} #nav.oneDown .depth02 > ul{ margin-top:.5rem; border-radius:1rem; background:#fff; overflow:hidden;} #nav.oneDown .depth02 > ul > li + li{ border-top:1px solid #ccc;} #nav.oneDown .depth02 > ul > li > a{padding:.75rem 1rem;} #nav.oneDown .depth02 > ul > li.dep > a:before{ top:.6rem;} #nav.oneDown .depth03{padding:.5rem 1rem; border-top:1px solid #ccc; background:#f6f6f6;} /** oneDown :active **/ #nav.oneDown .depth01 > ul > li.on > .depth02{ opacity:1; visibility:visible; display:block; } #nav.oneDown .depth01 > ul > li.on > .depth02:before{ height:100%; opacity:1; } #nav.oneDown .depth02 > ul > li > a:hover, #nav.oneDown .depth02 > ul > li > a:focus{ color:#1c4aba; background:#e7eeff;} #nav.oneDown .depth02 > ul > li.dep.active > a > span:before{width:100%; opacity:1;} /* gnb :oneFull */ #nav.oneFull ul, #nav.oneFull li{ height:100%; } #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; padding:1.5rem 0; opacity:0; visibility:hidden; transition-delay:.0s; text-align:left; background:#fff; } #nav.oneFull .depth02 .titBox{ display:block; position:absolute; left:0; top:0; width:22%; height:100%; padding:2rem 2rem 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 2.5rem 0; background-repeat: repeat, no-repeat; background-position:center, right bottom; background-color:#1a4ab8; background-image:url('/images/dgedu/template/TC01/layout/gnb_pttn_slide.png'), url('/images/dgedu/template/TC01/layout/bg_gnb.png'); z-index:-1;} #nav.oneFull .depth02 .titBox span{ display:block; font-size:.85rem;} #nav.oneFull .depth02 .titBox span em{ font-weight: 700;} #nav.oneFull .depth02 .titBox p{ line-height:1.5rem; font-size:1.2rem; font-weight: 700; } #nav.oneFull .depth02 .titBox p:before{ content:"\e94a"; display:block; margin:.5rem 0; font-size:1rem; font-family: 'xeicon';} #nav.oneFull .depth02 > ul{ display:flex; width:78%; margin-left:auto; font-size:0; line-height:0; padding:0 1.5rem; flex-wrap:wrap; } #nav.oneFull .depth02 > ul > li{ width:20%; vertical-align:top; padding:.5rem; line-height:1.6; } #nav.oneFull .depth02 > ul > li > a{ border-radius:.5rem; font-size:.8rem; border:1px solid #ccc; z-index:1;} #nav.oneFull .depth02 > ul > li > a span{ word-break: keep-all;} #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'; font-size:0.8rem;} #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:#f8f8f8; border-radius:0 0 .5rem .5rem;} /** oneFull:active **/ #nav.oneFull #gnb.active{ height:auto; } #nav.oneFull .depth01 > ul > li.on > .depth02{ opacity:1; visibility:visible; } #nav.oneFull .depth01 > ul > li.on > .depth02:before{ height:100%; opacity:1; transition-delay:0s; -webkit-transition-delay:0s; } #nav.oneFull .depth02 > ul > li.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:#006abe;} /* 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;} /* 검색 */ .siteSearchForm{position: absolute; top: 50%; right: calc(50% - 42.5rem); transform: translateY(-50%); font-size: 1.4rem; z-index: 999;} .siteSearchForm a{ display: block; border-radius: 50%; width: 2.5rem; height: 2.5rem; line-height: 2.5rem; text-align: center; color: #fff; background: #1a4ab9;} .totalSearch {display: none; position:absolute; right:50%; transform: translateX(42.85rem); width: fit-content; border: 7px solid #1a4ab9; visibility: hidden; transition:all .2s; -webkit-transition:all .2s; z-index: 999;} .totalSearch.active{display: block; visibility: visible;} .totalSearch .logo{display: none;} .totalSearch button em{display: none;} .totalSearch .wrap{position: relative;} .totalSearch .inner{ background: #fff;} .totalSearch .inner input{background:#fff; border:0; padding: 0.85rem; width: 15.5rem; } .totalSearch .inner button{ font-size: 1.3rem; color: #1a4ab9; vertical-align: middle;} .totalSearch .btnClose{ position: absolute; display: block; font-size: 1.4rem; right: 0; top:-3.85rem; border-radius: 50%; width: 2.5rem; height: 2.5rem; line-height: 2.5rem; text-align: center; color: #fff; background: #1a4ab9; z-index: 99;} /* mobile button */ .mBtn{ display:none;} /* mobile navigation */ #mNav { position:fixed; right:-100%; top:0; width:100%; height:100%; background:#fff; z-index:999; overflow:auto; transition:all .2s; -webkit-transition:all .2s; visibility:hidden;} #mNav.active{ right:0; visibility:visible;} #mNav .snb { display:block;} #mNav .snb .logo{ height:3.5rem; padding:.5rem 1rem;} #mNav .snb .logo a{display: block; position: relative; height: 1.75rem; line-height: 1.75rem; font-size: 1.15rem; font-weight: 700; color: #000; letter-spacing: -0.1rem;} #mNav .snb .logo a:before { display: inline-block; width: 11.5rem; height: 1.75rem; vertical-align: top; background: url(/images/dgedu/template/TC01/main/logo.png) no-repeat left top / auto 100%; content: "";} #mNav .hdt_link{ height:auto; border-top:1px solid #ccc; background:#f6f6f6;} #mNav #mNavClose { position:absolute; right:1rem; top:.5rem; width:2.5rem; height:2.5rem; line-height:2.5rem; text-align:center; font-size:1.35rem; border-radius:.25rem; border:1px solid #1a47bc; color:#1a47bc; font-weight:600;} /* mgnb */ #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 { padding:1rem 1.25rem; font-size:.9rem; color:#000; border-bottom:1px solid #ccc; background:#fff;} #mgnb .depth02{ display:none; padding:.5rem;} #mgnb .depth02 > ul > li > a { padding:.65rem 1rem; font-size:.85rem; border-radius:.5rem;} #mgnb .depth03 {display:none; padding:1rem; background:#f6f6f6; border-radius:0 0 .5rem .5rem;} #mgnb .depth03 > ul > li:before{content:""; position:absolute; left:0; top:.45rem; width:4px; height:4px; border-radius:50%; background:#777; } #mgnb .depth03 > ul > li + li { margin-top:.75rem;} #mgnb .depth03 > ul > li > a { padding-left:12px; color:#444; font-size:.8rem;} #mgnb .depth04 {display:none; margin-top:.5rem; padding:.65rem; border-radius:.5rem; 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:#444; 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:2rem;} #mgnb .depth03 > ul > li.dep > a{ padding-right:1rem;} #mgnb li.dep > a:before{ position:absolute; font-family:'xeicon'; font-size:1rem; font-weight: 400;} #mgnb .depth01 > ul > li.dep > a:before{content:'\e941'; top:1.1rem; right:1rem; font-family:'xeicon'; } #mgnb .depth02 > ul > li.dep > a:before{content:'\e913'; top:.75rem; right:.75rem; } #mgnb .depth03 > ul > li.dep > a:before{content:'\e913'; top:.1rem; right:0; font-size:.8rem; } /* mgnb :active */ #mgnb .depth01 > ul > li.dep.active > a{ background:#1a4ab9; color:#fff; } #mgnb .depth02 > ul > li.dep.active > a{ background:#153c99; color:#fff; } #mgnb .depth03 > ul > li.dep.active > a, #mgnb .depth03 > ul > li.dep.active > a:before{ color:#153c99; font-weight:600;} #mgnb li.dep.active > div{display:block;} #mgnb .depth01 > ul > li.dep.active > a:before{content:'\e944'; } #mgnb .depth02 > ul > li.dep.active > a:before{content:'\e9c1'; } #mgnb .depth03 > ul > li.dep.active > a:before{content:'\e9c1'; } /* footer */ #footer { position:relative; padding:0 0 3rem; border-top:1px solid #d8dde3; } #footer .container { display:flex; max-width:85rem; padding-top:2.2rem; } #footer .logo { width:14rem; } #footer .ftWrap { width:calc(100% - 14rem); padding-right:4rem; } .ftLink ul { overflow:hidden; padding:0 0 .85rem; } .ftLink li { position:relative; float:left; margin-right:0.9rem; line-height:1.5rem; } .ftLink li:not(:last-child):before { content:""; position:absolute; right:0; top:0.3rem; width:1px; height:0.75rem; background:#d8dde3; } .ftLink li a { display:block; margin-right:0.9rem; letter-spacing:-0.025em } .ftLink li:first-child a { margin-left:0; } .ftLink li a:hover, .ftLink li a:focus { text-decoration:underline; } .ftLink li a strong { color:#1a4ab9; font-weight:600; } .ftBox address span { display:inline-block; margin-right:.75rem; color:#4c4c4c; } .ftBox .copyright { color:#787878; font-size:0.75rem; margin-top:0.5rem; } #footer .btn_top { display:block; overflow:hidden; position:fixed; right:1rem; bottom:1rem; width:3rem; height:3rem; text-align:center; letter-spacing:0; font-size:14px; line-height:1.1; color:#fff; padding:.5rem 0 0; z-index:100; border-radius:50%; background:#305cc0; transition: all .2s; -webkit-transition: all .2s;} #footer .btn_top i{ font-size:1rem;} #footer .btn_top:hover, #footer .btn_top:focus{ background:#00b6bd; } /* footer :site link */ .siteLink{ border-bottom:1px solid #d8dde3; } .siteLink .inner { max-width:85rem; display:flex; margin:0 auto; border-right:1px solid #d8dde3; } .siteLink .wrap{ position:relative; flex:1; border-left:1px solid #d8dde3; } .siteLink .wrap button{ position:relative; display:block; width:100%; height:3.2rem; text-align:left; font-size:.8rem; border:0; line-height:3.25rem; padding:0 1.5rem 0 1rem;} .siteLink .wrap button:before{ content:"\e938"; position:absolute; right:1rem; font-family:"xeicon"; color:#838b95; font-size:1.1rem; } .siteLink .wrap .lst{ display:none; position:absolute; left:0; bottom:3.2rem; width:100%; padding:.75rem; background:rgba(19,43,67,0.75); z-index:10;} .siteLink .wrap .lst ul{ max-height:11rem; padding-right:5px; overflow-y:auto; } .siteLink .wrap .lst a{ display:block; padding:.25rem 0; line-height:1.1rem; color:#fff;} .siteLink :before, .siteLink a, .siteLink button{ transition:all .2s; -webkit-transition:all .2s;} /* footer :site link :active */ .siteLink .wrap button:hover, .siteLink .wrap button:focus, .siteLink .wrap button.active{ background:#32465a; color:#fff;} .siteLink .wrap button:hover:before, .siteLink .wrap button:focus:before, .siteLink .wrap button.active:before{color:#fff;} .siteLink .wrap button.active:before{ transform:rotate(180deg); -webkit-transform:rotate(180deg);} .siteLink .lst a:hover, .siteLink .lst a:focus{text-decoration:underline;} /* sub layout */ #sub_container { position:relative; max-width:72rem; padding:0 1rem; margin:2rem auto 0;} #sub_container:after { content:""; display:block; clear:both; } .subCntBody{ position:relative; width:calc(100% - 14.5rem); float:right; } .subCntBody > .container{ width:auto; margin-left:2rem; padding:0;} .subContent{min-height:30rem; font-weight:400; line-height:1.6; font-size:.75rem; padding:2rem 0;} /* lnb */ #lnb { width:14.5rem; float:left; display:block;} #lnb h2{ position:relative; width:100%; height:6rem; display:flex; align-items:center; justify-content: center; font-weight:700; font-size:1.3rem; color:#fff; z-index:0; border-radius:.5rem; background:#1f6abb url('/resource/images/dgedu/layout/bg_lnb.png') no-repeat right bottom;} #lnb nav{ margin:.5rem 0 2rem;} #lnb li, #lnb li a{display:block; position:relative;} #lnb li a[target='_blank']:after{display:inline-block; padding-left:.25rem; font-family:'xeicon'; font-weight:400; content:'\e980'; } #lnb li a{color:#333; font-weight:600; word-break:break-all;} #lnb .dep01 > li + li{ margin-top:.5rem;} #lnb .dep01 > li > a { padding:.75rem 1rem; font-size:16px; border:1px solid transparent; border-radius:0.5rem; background:#f6f6f6;} #lnb .dep02{ display:none; padding:1rem;} #lnb .dep02 > li:before{ content:""; position:absolute; left:0; top:.55rem; width:8px; height:3px; border-radius:3px; background:#1f6abb;} #lnb .dep02 > li + li{ margin-top:.5rem;} #lnb .dep02 > li > a { padding-left:15px; font-size:14px;} #lnb .dep03 {display:none; margin-top:.5rem; padding:1rem; border-top:2px solid #006abe; background:#fff; border-radius:0 0 1rem 1rem; } #lnb .dep03 > li:before{content:""; position:absolute; left:0; top:.45rem; width:4px; height:4px; border-radius:50%; background:#9a9b9f; } #lnb .dep03 > li + li { margin-top:.5rem;} #lnb .dep03 > li > a { padding-left:12px; color:#444; font-size:14px;} /* lnb :depth, _blank icon */ #lnb .dep01 > li.dep > a{ padding-right:2.75rem;} #lnb .dep02 > li.dep > a{ padding-right:1rem;} #lnb .dep03 > li.dep > a{ padding-right:1rem;} #lnb li.dep > a:before{ position:absolute; font-family:'xeicon'; } #lnb .dep01 > li.dep > a:before{content:'\e936'; top:0.65rem; right:1rem; width:1.5rem; height:1.5rem; line-height:1.5rem; text-align:center; border-radius:.25rem; background:#fff; color:#666; box-shadow:0 0 3px rgba(0,0,0,0.3);} #lnb .dep02 > li.dep > a:before{content:'\e913'; top:.15rem; right:0; } /* lnb :active */ #lnb li a, #lnb li a > span{transition: all .2s; -webkit-transition: all .2s;} #lnb li.active > ul{display:block;} #lnb li > a:hover, #lnb li > a:focus{color:#1f6abb;} #lnb li.dep.active > div{display:block;} #lnb .dep01 > li.active{ background:#f5f9fc; border-radius:0 0 .5rem .5rem;} #lnb .dep01 > li.active > a{ background:#fff; border-color:#afceef; box-shadow:0 0 10px rgba(1, 142, 230, 0.25);} #lnb .dep02 > li.active > a, #lnb .dep03 > li.active > a{color:#1f6abb;} #lnb .dep03 > li.active > a > span{ box-shadow:0px -10px 0px 0px inset rgba(170, 231, 255, 0.3); } #lnb .dep01 > li.dep.active > a:before{content:'\e930'; background:#1f6abb; color:#fff; box-shadow:none;} #lnb .dep02 > li.dep.active > a:before{content:'\e9c1'; } /* location */ .subLocation { position:relative; padding:.5rem 0 0 2rem; z-index: 0;} .subLocation li{display:inline-block; vertical-align:middle; line-height:1.5rem; color:#666; font-size:14px; font-weight:400;} .subLocation li i{display:inline-block; line-height:1.5rem; color:#666; font-size:1rem;} .subLocation li + li:before{content:"\e93f"; display:inline-block; font-family:'xeicon'; margin:0 5px; font-weight: 400;} .subLocation li:last-child{ font-weight: 600; color:#006abe;} /* subHeader */ .subHeader{ display:flex; justify-content: space-between; align-items: center; padding:.5rem 0 1rem; border-bottom:1px solid #ccc;} #pageTitle { flex:1; margin-right:auto; padding-right:1rem; font-size:1.3rem; font-weight:700; overflow:hidden; } /* subHeader :sns */ .snsBox { position:relative; margin-top:auto; overflow:hidden; font-size:0;} .snsBox button { position:relative; display:inline-block; width:2.25rem; height:2.25rem; line-height:2.25rem; font-size:1rem; color:#111; overflow:hidden; padding:0; border-radius:.5rem; background:#f2f2f2; z-index:2; transition:all .2s; -webkit-transition:all .2s;} .snsBox button + button{ margin-left:.25rem;} .snsBox .snsMore{ position:relative; width:0; opacity:0; float:left; height:2.25rem; line-height:2.25rem; margin-right:-.5rem; border-radius:.5rem; font-size:1rem; z-index:1; overflow:hidden; visibility: hidden; transition:width,height,opacity .2s; -webkit-transition:width,height,opacity .2s; -ms-transition:width,height,opacity .2s; background:#f7f7f7;} .snsBox .snsMore p{margin:0 1.5rem 0 1rem; } .snsBox .snsMore a{position:relative; float:left; } .snsBox .snsMore a + a{padding-left:12px; margin-left:10px;} .snsBox .snsMore a + a:before{content:""; position:absolute; left:-2px; top:calc(50% - 2px); width:4px; height:4px; border-radius:50%; background:#aaa;} .snsBox .snsMore a.snsT{color:#59acee;} .snsBox .snsMore a.snsK{color:#ffc20d;} .snsBox .snsMore a.snsF{color:#3c5899;} .snsBox .snsMore a.snsIn{color:#d63497;} .snsBox .snsMore a.snsN{color:#28c517;} .snsBox .snsMore a.snsUrl{width:1.75rem; height:2.25rem; background:url('/resource/images/dgedu/layout/ico_sns_url.svg') no-repeat center right; } /* subHeader :sns :active */ .snsBox .snsMore.active{width:auto; opacity:1; visibility: visible;} .snsBox button.active, .snsBox button:hover, .snsBox button:focus{background-color:#1f6abb; color:#fff;} .snsBox .snsMore a.snsT:hover, .snsBox .snsMore a.snsT:focus{color:#257fc9;} .snsBox .snsMore a.snsK:hover, .snsBox .snsMore a.snsK:focus{color:#d36e10;} .snsBox .snsMore a.snsF:hover, .snsBox .snsMore a.snsF:focus{color:#183372;} .snsBox .snsMore a.snsIn:hover, .snsBox .snsMore a.snsIn:focus{color:#af1c4d;} .snsBox .snsMore a.snsN:hover, .snsBox .snsMore a.snsN:focus{color:#129703;} /* media query mobile */ @media screen and (max-width:1750px){ .hdt_link .container { padding:0 1rem; } #header h1.logo{ left:1rem; } /* oneFull */ #nav.oneFull .depth02 > ul{ padding-right:0;} #nav.oneFull .depth02 > ul > li{ width:25%;} .siteSearchForm{right: 1rem;} .siteSearchInput .searchInput_wrap{padding-right: 1rem;} .totalSearch{transform: none; right: 0.65rem;} } @media screen and (max-width:1600px){ /* oneDown */ #nav.oneDown .depth02{ width:11rem; left:calc(50% - 5.5rem);} #nav.oneDown .depth01 li:first-child .depth02{left:-1rem; transform:none; -webkit-transform:none;} #gnb .depth01 > ul > li ~ li{margin-left: 1rem;} /* fullDown */ #nav.fullDown .topGnb > ul > li ~ li {margin-left: 1rem;} /* footer */ #footer .container { padding-left:1rem; } } @media screen and (max-width:1440px){ .container { padding:0 1rem;} /* header */ #header .t_link .container{ padding:0;} /* web navigation */ /* gnb common */ #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-right:1rem;} /* fullDown */ #nav.fullDown #gnb{ padding:0; } #nav.fullDown .topGnb {padding-right:4.5rem; } /* sitemap */ #header .sitemap{ right:1rem;} } @media screen and (max-width:1360px){ #gnb .depth01 > ul > li > a, #nav.fullDown .topGnb > ul > li > a{font-size: 1rem;} } @media screen and (max-width:1240px){ /* hidden */ #header .login, #header .service .screenSize, #nav{ display:none;} /* header */ #header { position:fixed; left:0; top:0; width:100%; height:auto; z-index:101; border-bottom:1px solid #ddd; } #header .t_util{ height:3.5rem;} #header .service{ margin-left:0; margin-right:auto;} #header .service ul{ margin:0; } #header .header_wrap{height: 3.5rem;} #header .hdt_link, .hdt_link .link > ul > li.screenSize, .hdt_link .link > ul > li.mobhid{display: none;} /* container*/ .hldy #container, .hldy.upPop #container{ padding-top:calc(2rem + 3.5rem); } .open.upPop #container{ padding-top:calc(6.5rem + 3.5rem); } .open.hldy.upPop #container{ padding-top:calc(8.5rem + 3.5rem); } /* 검색 */ .siteSearchForm{ right: 3rem;} .siteSearchForm a{ background: none; color: #00306b; } .totalSearch {display: block; position:fixed; top:0; left: 100%; width:100%; height:100%; border-radius:0; border:0; background:rgba(0,0,0,0.7); visibility: hidden; z-index:999; transition:all .2s; -webkit-transition:all .2s; z-index: 999;} .totalSearch.active{left: 0; right:auto; visibility: visible;} .totalSearch .inner{ position:relative; width:20rem; height:2.6rem; padding-right:2.6rem; border:2px solid #0079ff; border-radius:1.5rem; overflow:hidden; } .totalSearch input { padding:0 .75rem; width:100%; height:2.5rem; line-height:2.4rem; font-size:0.75rem; border:none; font-family:'NotoSans'; } .totalSearch button { position:absolute; top:-2px; right:-2px; padding:0; width:2.6rem; height:2.6rem; line-height:2.6rem; color:#fff; background:#0079ff url('/resource/images/dgedu/layout/bg_totalsrch.png') no-repeat center/cover; border:none; border-radius:50%; font-size:1.1rem; } .totalSearch input::-webkit-input-placeholder { color:#555; } .totalSearch input::placeholder { color:#555; } .totalSearch .mob{ display:block;} .totalSearch .wrap{ position:relative; background:#fff; padding:1.25rem 1rem 0; overflow:hidden;} .totalSearch .wrap .logo{ display:flex; align-items:center; min-height:2.5rem; padding-bottom:1rem; padding-right:3rem; border-bottom:1px solid #ddd;} .totalSearch .wrap .logo a{ line-height:0; display:block;} .totalSearch .wrap .logo a:first-child{display: none;} .totalSearch .inner button{color: #fff; } /* 타입추가 SY,CHo 20220706 */ .totalSearch .wrap .logo a.type2 {position: relative; height: 1.75rem; line-height: 1.75rem; font-size: 1.15rem; font-weight: 700; color: #000; letter-spacing: -0.1rem;} .totalSearch .wrap .logo a.type2:before {display: inline-block; width: 11.5rem; height: 1.75rem; vertical-align: top; background: url('/images/dgedu/template/TC01/main/logo.png') no-repeat left top / auto 100%; content: "";} .totalSearch .inner{ width:100%; margin:1.5rem 0; } .totalSearch .btnClose{ position:absolute; right:1rem; top:.65rem; width:2.5rem; height:2.5rem; line-height:2.5rem; border-radius:.5rem; color:#636f7b; font-size:1.15rem; text-align:center; background:#cfe7ff;} /* 모바일 버튼 */ .mBtn{ display:block; position:absolute; right:1rem; top:0; } .mBtn > a{ width:3rem; height:3.5rem; line-height:3.5rem; text-align:center; font-size:1.6rem; color:#00306b; font-weight:600;} .mBtn > a + a{ margin-left:10px;} #mSearch{display:none;} /* footer */ .siteLink .inner { border-right:none; } #footer .container { display:block; padding-top:1.5rem; } #footer .logo { width:100%; margin-bottom:0.5rem; } #footer .ftWrap { width:100%; } /* 서브레이아웃 */ #sub_container { margin:3.5rem auto 0; padding:0;} .subCntBody{ width:100%; float:none;} .subCntBody > .container{ padding:0 1rem; margin:0;} .subLocation{ padding:.5rem 1rem;} .subLocation li{ font-size:13px; line-height:1.6;} .subLocation li i{font-size:.9rem; line-height:1.3;} .subLocation li + li:before{ margin:0 2px;} #pageTitle { font-size:1.2rem; } .subHeader{ padding:.5rem 0;} /* lnb */ #lnb{width:100%; float:none;} #lnb h2{ display:block; height:auto; padding:.75rem 2.5rem .75rem 1.25rem; font-size:1.1rem; background:#1f6abb; border-radius:0;} #lnb h2:after{content:"\e941"; position:absolute; right:1rem; top:1.1rem; font-family:'xeicon'; font-size:.9rem;} #lnb h2:before{ display:none;} #lnb h2.active:after{transform:rotate(180deg); -webkit-transform:rotate(180deg); -ms-transform:rotate(180deg);} #lnb nav{ position:relative; display:none; margin:0; padding:1rem .5rem; background:#f6f6f6; border-bottom:1px solid #ddd; box-shadow:0 5px 5px rgba(0,0,0,0.1); z-index:1;} #lnb .dep01 > li + li{ margin-top:.25rem;} #lnb .dep01 > li > a{ font-size:.8rem; padding:.5rem .75rem; background:#fff;} #lnb .dep01 > li.dep > a:before{ right:.5rem; top:.35rem; background:#f1f1f1;} #lnb .dep02 > li:before{ width:6px; height:2px;} #lnb .dep02{ padding:.75rem .25rem .5rem;} #lnb .dep02 > li > a{ font-size:.75rem;} #lnb .dep03{ padding:.75rem;} #lnb .dep03 > li > a{ font-size:.7rem;} /* location :snsBox */ .snsBox{width:auto; height:auto; line-height:0; background:none; border:none; overflow:initial; } .snsBox button.btnPrint{display:none;} .snsBox .snsMore{ position:absolute; left:0; top:2rem; width:100%; height:0px; line-height:0; float:none; text-align:center;} .snsBox .snsMore p{margin:1.5rem 0 1rem;} .snsBox .snsMore a{ float:none; display:block;} .snsBox .snsMore a:before{ display:none !important;} .snsBox .snsMore a + a{padding-left:0; margin-left:0; margin-top:.5rem;} .snsBox .snsMore.active{ width:100%; height:auto; top:1.5rem; } .snsBox .snsMore a.snsUrl{ background-position:center; margin:.5rem auto 0;} } @media screen and (max-width:1024px){ /* 방문자수 */ .visitant { position:relative; top:0; right:0; width:50%; margin-top:0.5rem; } /* footer */ #footer:before { display:none; } #footer address{ padding-right:0; margin:0.5rem 0; } .footer_link { padding-top:1rem; } /*맨위로가기*/ .btn_top{ bottom:2.5%; right:2.5%; } } @media (max-width:768px) { .subContent{ padding:1.5rem 0; } .hdt_link .util { line-height: 2.5rem; border-bottom: 1px solid #ddd; width: 100%;} .hdt_link .link { padding: 0 1rem; } /* footer */ #footer .logo img { height:1.8rem; } .siteLink .inner { display:block;} .siteLink .wrap { border-left:none; } .siteLink .wrap + .wrap { border-top:1px solid #d8dde3; } .siteLink .wrap button { height:2.5rem; line-height:2.5rem; } .siteLink .wrap .lst { bottom:2.5rem; } #footer .ftWrap { padding-right:0; } .ftLink li { margin-right:0; } .ftLink li:not(:last-child):before { display:none; } #footer .btn_top { width:2rem; height:2rem; font-size:0; } } @media screen and (max-width:540px){ /* container*/ .hldy #container, .hldy.upPop #container{ padding-top:calc(1.5rem + 3.5rem); } .open.upPop #container{ padding-top:calc(6rem + 3.5rem); } .open.hldy.upPop #container{ padding-top:calc(7.5rem + 3.5rem); } } @media screen and (max-width:460px){ /* header */ #header h1.logo .type2:before {width: 2.3rem;} /* mobile navigation */ #mNav .inner{padding:0rem 0 1rem 0;} #mNav .snb .logo a:before{width: 2.3rem;} #mNav .snb .login li{ width:50%;} #mNav .snb .login li:nth-of-type(3n+1):before{ display:block; } #mNav .snb .login li:nth-of-type(odd):before{ display:none; } #mgnb .depth01 > ul > li > a{ font-size:.85rem;} #mgnb .depth02 > ul > li > a{ font-size:.8rem;} /* 타입추가 SY,CHo 20220706 */ .totalSearch .wrap .logo a.type2:before {width: 2.3rem;} #footer, .ftBox address span, .ftBox .tel span{ font-size:.7rem;} } @media (max-width:340px) { /* container*/ .hldy #container, .open.upPop #container{ padding-top:calc(6.75rem + 3.5rem); } .open.hldy.upPop #container{ padding-top:calc(8.25rem + 3.5rem); } } @media (max-width:310px) { #header h1.logo a{font-size: 1rem; } .hdt_link .util .covid{background: none; padding-left: 0;} .hdt_link .link > ul > li i{ display: none; } .hdt_link a i { display: none; } }