@charset "utf-8";

header, header *, footer, footer *, #mnav, .chatbot, #m_nav, #m_nav * { box-sizing:border-box; }
::-webkit-scrollbar { width:18px; }
::-webkit-scrollbar-thumb {  border:5px solid #fff; border-radius:20px; background:#ccc; }
::-webkit-scrollbar-track { background:rgba(255,255,255,0); }
html { overflow-x:hidden; }
body { font-family:'SUITE', 'Pretendard', sans-serif; font-weight:500; font-size:18px; color:#444; letter-spacing:-0.4px; }
input, select, textarea { border:0; font-family:'SUITE', 'Pretendard', sans-serif; font-weight:400; color:#444; }
a, a:hover, a:visited a:active, a:focus {color:#444; }
.noScroll {overflow:hidden !important;}
@media all and (max-width:480px){
    body {font-size:16px; }
}

/*게시판 관련 */
.bbs_search input, .bbs_search select { border:1px solid #ddd; height:29px !important; box-sizing:border-box; }

/*본문바로가기*/
#skipNavWrap { overflow: hidden; position: relative; width: 100%; z-index: 1000; }
#skipNavWrap a { display: block; font-size: 0; width: 1px; height: 1px; line-height: 0; margin: 0 -1px -1px 0; overflow: hidden; text-align: center; font-weight:300 !important;}
#skipNavWrap a:focus, #skipNavWrap a:hover, #skipNavWrap a:active {width: auto; padding:15px 0; background: #333; color: #fff; font-size: 13px; font-weight: bold;}


/*header*/
header { display:flex; align-items:center; width:calc(100% - 200px); height:120px; margin:0 auto; z-index:10; }
header.on::after { content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:#fff; z-index:-1;}
header h1 { float:left; width:185px; height:50px; background:url('/uni/main/img/layout2024/logo.png') no-repeat center/100% auto; text-indent:-99999px; }
header h1 a {display:block;}
header .member { position:relative; float:left; width:145px; margin:0 0 0 10px; }
header .member li { position:relative; float:left;}
header .member li > a { position:relative; float:left; display:block; font-size:14px; color:#335a9d; text-align:center; padding:35px 0 0; margin:0 0 0 20px; }
header .member li > a::before {content:''; position:absolute; left:50%; top:0; width:30px; height:30px; background:url('/uni/main/img/layout2024/top_icon.png') no-repeat 0 0/200% auto; border:2px solid #335a9d; border-radius:50%; overflow:hidden; transform:translate(-50%, 0); }
header .member .welcome {display:none;}
#lang::before { background-position:100% 0; }
#lang+div { visibility:hidden; position:absolute; left:32px; top:55px; z-index:30; opacity:0; transition:0.3s; }
#lang+div a { display:block; font-size:12px; color:#335a9d; font-weight:900; width:34px; height:34px; line-height:30px; text-align:center; border:2px solid #335a9d; border-radius:50%; margin:5px 0 0; background:#fcf8f8;}
#lang.close+div { visibility:visible; opacity:1; }
header .btn_wrap { float:right; }
header .btn_link { position:relative; float:left; margin:8px 0 0; }
header .btn_link > a {display:none;}
header .btn_link div a { position:relative; display:block; float:left; font-size:15px; margin:0 10px; }
header .btn_link div a::before {content:''; position:absolute; left:-11px; top:50%; width:4px; height:4px; background:#978a8a; border-radius:50%; transform:translate(0, -50%); }
header .btn_link div a:first-of-type { margin-left:0; }
header .btn_link div a:first-of-type::before { display:none; }
header .btn_wrap > a { position:relative; display:block; float:left; width:32px; height:32px; text-indent:-9999px; margin-left:25px;}
header .btn_wrap > a::before {content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:url('/uni/main/img/layout2024/top_icon2.png') no-repeat 50% 0/300% auto;}
/*header fixed*/
header {transition:0.2s;}
header.fixed {position:fixed; top:0; width:100%; height:80px; padding:0 40px; background:#fcf8f8; border-bottom:1px solid #e6e0e0;}
header.fixed.on { border-bottom:1px solid #fff;}
@media all and (max-width:1800px){
    header { width:calc(100% - 100px); }
}
@media all and (max-width:1550px){
    header { width:96%; }
    header h1 { width:140px; }
    header.fixed { padding:0 2%; }
    header .btn_link > a { display:flex; font-size:17px; font-weight:600; gap:10px; color:#335a9d; }
    header .btn_link > a::after { content:''; display:block; width:8px; height:8px; background:linear-gradient(45deg, #335a9d 50%, transparent 50%); transform:rotate(-45deg); margin-top:3px; }
    header .btn_link div { position:absolute; left:50%; top:30px; background:#fff; border-radius:10px; border:1px solid #335a9d; padding:10px 10px 10px 20px; opacity:0; transform:translateX(-50%); transition:0.3s; z-index:10; }
    header .btn_link > a.close+div { visibility:visible; opacity:1; }
    header .btn_link > a.close::after {transform:rotate(135deg); margin-top:8px}
    header .btn_link div a { float:none; margin:5px 0; }
    header .btn_link div a:first-of-type::before { display:block; }
}
@media all and (max-width:1200px){
    header { position:relative; display:block; height:80px; }
    header h1 { margin:17px 0 0; }
    header .member {margin:15px 0 0 10px; }
    header .btn_wrap { margin:25px 0 0;}
     header .btn_link,
     header .sitemap { display:none !important; }
}
@media all and (max-width:768px){
    header .member {width:auto;}
    header .member li:last-of-type {display:none;}
    header .member li a { text-indent:-99999px;}
    header .member li a::before { top:9px; }
}

/*search _ 상하단 같이쓰는 css 수정시 상하단 다체크*/
#search_open::before { background-position:0 0;}
#search_open.close::before { background-position:100% 0; z-index:2; }
#search_open.close::after { content:''; position:absolute; left:50%; top:50%; width:50px; height:50px; border-radius:50%; background:#db6768; z-index:1; transform:translate(-50%, -50%); }
.search_area { text-align:center; padding:0 0 50px; }
.search_area > * {display:inline-block; vertical-align:top; }
.search_area h2 { font-weight:500; padding:0; margin:13px 0 0; color:#fff; }
.search_area h2::before {display:none;}
.search_input { width:400px; max-width:calc(100% - 40px); background:#fff; border-radius:30px; padding:10px; margin:0 30px; overflow:hidden; }
.search_input input { float:left; width:calc(100% - 40px); height:40px; font-size:20px; padding:0 20px; background:transparent;  }
.search_input a { display:block; float:left; width:40px; height:40px; border-radius:50%; background:#385e9f url('/uni/main/img/layout2024/search_icon.png') no-repeat center; text-indent:-99999px; }
.search_area .keywords {margin:20px 0 0;}
.search_area .keywords a { position:relative; display:inline-block; padding:0 8px; }
.search_area .keywords a::before { content:''; position:absolute; left:-1px; top:50%; width:1px; height:10px; background:#fff; opacity:0.2; transform:translateY(-50%);}
.search_area .keywords a:first-of-type::before {display:none; }
header .search_area { display:none; position:absolute; left:-50px; top:120px; width:calc(100% + 100px); background:#fcf8f8; box-shadow:0 10px 10px rgba(0,0,0,0.1);  z-index:10; }
header.fixed .search_area {top:79px !important;}
header .search_area { padding:20px 0 50px; }
header .search_area h2 {color:#444; }
header .search_area h2 strong { color:#db6768; }
header .search_area .keywords a {color:#444;}
header .search_area .keywords a::before {background:#000;}
@media all and (max-width:1200px){
    header .search_area {top:79px; width:108%; left:-4%; }
}
@media all and (max-width:1023px){
    .search_area .keywords {display:none;}
    .search_input {margin:0 0 0 30px;}
}
@media all and (max-width:768px){
    .search_area {padding:0 0 40px;}
    .search_area > * {display:block; }
    .search_input {margin:20px auto 0; }
}

/*pc nav*/
nav { width:calc(100% - 700px); text-align:center; margin-top:8px; }
nav a[target="_blank"] { position:relative; padding-right:20px !important;}
nav a[target="_blank"]::before { content:''; position:absolute; right:0; top:0; width:15px; height:15px; background:url('/uni/main/img/layout2024/blank.png') no-repeat center/cover;}
nav .depth1 {display:inline-block;}
nav .depth1 > li {float:left;}
nav .depth1 > li:last-of-type { display:none;}
nav .depth1 > li > a {font-size:22px; font-weight:600; padding:0 20px; }
nav .depth1 > li::after { visibility:hidden; content:''; position:absolute; left:0; top:120px; width:100%; height:100vh; background:#000; opacity:0; transition:0.3s; z-index:10; }
nav .depth1 > li.on::after { visibility:visible; opacity:0.7; }
nav .depth1 > li.noBg::after { display:none; }
nav .depth2_wrap { visibility:hidden; position:absolute; left:0; top:120px; width:100%; text-align:left; padding:10px 0 30px; box-shadow:0 10px 10px rgba(0,0,0,0.1); background:#fff; z-index:20; }
header.fixed nav .depth2_wrap {top:80px !important;}
nav li.on .depth2_wrap { visibility:visible; }
nav .depth2 > li {overflow:hidden; border-top:1px solid #e6e0e0;}
nav .depth2 > li:first-of-type {border-top:0;}
nav .depth2 > li > a { position:relative; display:block; float:left; width:200px; font-size:20px; padding:10px 35px 10px 0; font-weight:600; }
nav .depth2 > li > a:hover, nav .depth2 > li.on > a {color:#999; }
nav .depth2 > li > a::after {content:''; position:absolute; right:20px; top:17px; width:7px; height:7px; border-top:3px solid #db6768; border-right:3px solid #db6768; transform:rotate(45deg); }
nav .depth2 > li > a[target="_blank"]::after {display:none;}
nav .depth2 > li > a[target="_blank"]::before {top:14px; right:20px;}
nav .depth3 {float:left; width:calc(100% - 200px); padding:7px 0;}
nav .depth3 li { float:left; width:25%; }
nav .depth3 li:nth-of-type(4n+1) {clear:both; }
nav .depth3 li:nth-of-type(4n+1) a::after{ display:none; }
nav .depth3 li a { display:inline-block; position:relative; padding:5px 15px; font-size:16px; }
nav .depth3 li a::after {content:''; position:absolute; left:0; top:9px; width:1px; height:12px; background:#e6e0e0; }
nav .depth3 li a:hover {color:#335a9d;}


@media all and (max-width:1800px){
    nav .depth1 > li > a { font-size:20px; padding:0 15px; }
}
@media all and (max-width:1550px){
    nav { width:calc(100% - 485px); }
}
@media all and (max-width:1300px){
    nav .depth1 > li > a { font-size:18px; padding:0 12px; }
}
@media all and (max-width:1200px){
    nav { display:none; }
}

/*mobile nav*/
#m_nav a[target="_blank"] span { position:relative; display:inline-block; background:url('https://kmu.dnworks.co.kr/uni/main/img/layout2024/blank.png') no-repeat right top;  padding-right:20px; }
#mnav_open {display:none;}
@media all and (max-width:1200px){
    #mnav_open {display:block;}
}
#m_nav { display: none; position: fixed; right: 0; top: 0; width: 100%; height: 100%; z-index: 110;}
#m_nav::before { position: absolute; content: ""; background: rgba(0,0,0,0.5); transition: all 0.3s cubic-bezier(0.43, 0.03, 0.21, 1); z-index: -1; width: 100%; height: 100%; }
#m_nav .m_nav_wrap {position: absolute; right: -375px; width: 100%; max-width: 377px; height: 100%; background: linear-gradient(90deg, #f5f5f5 38%, #fff 38%); z-index: 100; transition: all 0.85s 0.3s cubic-bezier(0.43, 0.03, 0.21, 1); overflow-y:scroll; }
#m_nav .top { padding: 15px 24px; display: flex; align-items: center; background:#fff;  }
#m_nav .top a { position:relative; display:block;; font-weight:500; text-transform:uppercase; font-size:16px; padding-right:20px; }
#m_nav .top a:first-of-type::before {content:''; position:absolute; right:9px; top:5px; width:1px; height:10px; background:#aaa; }
#m_nav .site_link {background: #335a9d; padding: 13px 0; text-align: center;}
#m_nav .site_link a {color: #fff; font-size: 16px; padding: 0 18px; position: relative;}
#m_nav .site_link a::before{ content: ""; position: absolute;  background: #fff; width: 1px; height: 9px; right: 0; top: 50%; transform: translateY(-50%); }
#m_nav .site_link a:last-child::before{display: none;}
#m_nav .depth1 {position: relative; height: 100%; padding: 20px 16px;}
#m_nav .depth1::before {position: absolute; content: ""; top: 0; left: 0; width: 142px; height:calc(100% + 70px); background: #f5f5f5; z-index: -1;}
#m_nav .ul a span{margin-top: 50px; margin-bottom: 5px;}
#m_nav .depth1 > li > a{display: inline-block; width: 134px; padding: 7px 14px; font-weight: 500; margin-bottom: 10px;}
#m_nav .depth1 > li > a.on{ background: #db6768; color: #fff; font-weight: 700; border-radius: 10px 50px 50px 10px; box-shadow: 3px 3px 16px rgba(0, 0, 0, 0.2);}
#m_nav .depth2 {display: none; position: absolute; top: 0; left: 142px; width: calc(100% - 142px); padding: 20px 30px;}
#m_nav a.on + .depth2 {display: block;}
#m_nav .depth2 > li > a{ font-size: 17px; font-weight: 400; position: relative; display: block; padding:10px 0; }
#m_nav .depth2 > li > a::before, 
#m_nav .depth2 > li > a::after { content:''; position:absolute; right:0; top:50%; width:14px; height:3px; background:#aaa; border-radius:2px; transform:translate(0, -50%); }
#m_nav .depth2 > li > a::after { width:3px; height:14px; right:5px; }
#m_nav .depth2 > li > a.non::before,
#m_nav .depth2 > li > a.non::after {display: none;}
#m_nav .depth2 > li > a.on{font-weight: 700;}
#m_nav .depth2 > li > a.on::before { background:#333; }
#m_nav .depth2 > li > a.on::after { display:none; }
#m_nav .depth3 {display: none; margin:5px 0 10px; }
#m_nav .depth3 li a{display: block; color: #666; font-size: 16px; padding:7px 0 7px 20px; position: relative;}
#m_nav .depth3 li a.on, #m_nav .depth3 li a:hover{display: block; font-weight: 700;}
#m_nav .depth3 li a::before {position: absolute; content: ''; width: 5px; height: 5px; left: 0; top: 15px; border-radius: 50px; background: #a8a8a8;}
#m_nav .depth3 li a.on::before, #m_nav .depth3 li a:hover::before{background: #3f4e63;}
#m_nav .depth3 li a span{display: inline-block; position: relative;}
#m_nav .depth3 li a span::before{position: absolute; content: ""; border-bottom: 1px solid #666; width: 100%; height: 1px; left: 0; bottom: 1px; opacity: 0;}

#m_nav .depth3 li a.on span::before, #m_nav .depth3 li a:hover span::before{opacity: 1;}

/*닫기*/
#m_nav .close {display:block; position:absolute; width:20px; height:20px; text-indent:-9999px; top: 24px; right: 20px;}
#m_nav .close::before,
#m_nav .close::after { content:''; position:absolute; top:0; left:0; width:21px; height:3px; background:#222; transform:rotate(45deg);}
#m_nav .close::after {transform:rotate(-45deg);}


/*footer*/
footer { background:#4b4646; color:#bdbbbb;  margin:60px 0 0; font-size:17px; padding:60px 0 0; }
footer a, footer a:hover, footer a:visited, footer a:active, footer a:focus {color:#fff; }
footer .wrap {position:relative; }

.family_site { border:1px solid #5d5959; height:60px; }
.family_site li { position:relative; float:left; width:25%; border-left:1px solid #5d5959; }
.family_site li:first-of-type {border-left:0;}
.family_site li > a { position:relative; display:block; line-height:60px; padding:0 20px; font-size:18px; }
.family_site li > a::before { content:''; position:absolute; right:20px; top:50%; width:30px; height:30px; background:url('/uni/main/img/main2024/controls.png') no-repeat 100% 100%/400% auto; transform:translate(0, -50%); }
.family_site li > a.on {background:#2e2c2c;}
.family_site li > a.on::before { right:27px; background:none; background:#fff; width:16px; height:4px; border-radius:2px; }
.family_site div { visibility:hidden; position:absolute; left:-1px; top:59px; width:calc(100% + 2px); height:200px; overflow-y:auto; border:1px solid #5d5959; border-top:0; padding:10px 20px; background:#2e2c2c; z-index:10; }
.family_site li > a.on+div {visibility:visible;}
.family_site div::-webkit-scrollbar-thumb {  border:5px solid #2e2c2c; border-radius:20px; background:#ccc; }
.family_site div a { display:block; padding:5px 0; font-weight:300; }

footer .link { margin:50px 0 30px; }
footer .link a { display:inline-block; font-size:17px; color:#bdbbbb; padding:0 20px 10px 0; }
footer .link a:first-of-type {padding:0 20px 10px 0; }
footer .link a.point1 { font-weight:500; color:#fff; }
footer .link a.point2 { color:#f5efb0; }

footer .address {margin:0 0 60px; }
footer .address div { overflow:hidden; margin:0 0 10px; }
footer .address dl {position:relative; padding:0 0 0px 75px; margin:0 0 15px; overflow:hidden;  }
footer .address dt { position:absolute; left:0; top:0; font-weight:700; }
footer .address dt::before  { content:''; position:absolute; right:-15px; top:5px; width:1px; height:12px; background:#fff; opacity:0.3; }
footer .address dd { float:left; padding:0 0 5px 30px; }

.copyright { background:#fff; text-align:right; }
.copyright .wrap { position:relative; padding:20px 0;  }
.copyright .wrap p { position:absolute; left:0; top:20px; font-size:13px; color:#444; text-transform:uppercase; line-height:40px; }
.copyright .wrap a { display:inline-block; margin-left:20px; }

#go_top {position:absolute; right:0; top:-90px; background:#383030; color:#fff; width:60px; height:60px; border-radius:50%; text-align:center; font-size:13px; padding-top:28px; letter-spacing:0; }
#go_top::before {content:''; position:absolute; left:50%; top:23px; width:7px; height:7px; border-top:2px solid #fff; border-left:2px solid #fff; transform:rotate(45deg) translate(-60%, 0); }

.chatbot a { position:fixed; right:60px; bottom:60px; width:80px; height:80px; background:#285ebb url('/uni/main/img/layout2024/chat_icon.png') no-repeat center; box-shadow:4px 4px 4px rgba(0,0,0,0.2); border-radius:50%; text-indent:-99999px; z-index:100; }

@media all and (max-width:1800px){
    .chatbot a { right:10px; bottom:10px;}
}
@media all and (min-width:1024px){
    .chatbot .pc { display:block;}
    .chatbot .mobile { display:none;}
}
@media all and (max-width:1023px){
    .chatbot .pc { display:none;}
    .chatbot .mobile { display:block;}
    .chatbot a { width:60px; height:60px; background-size:45% auto; }
}
@media all and (max-width:768px){
    footer {padding:40px 0 0 ; margin:40px 0 0;}
    footer .link {margin:40px 0 20px;}
    footer .address {margin:0 0 40px 0;}
    .family_site { position:relative; height:120px; }
    .family_site::before {content:''; position:absolute; left:0; top:60px; width:100%; height:1px; background:#5d5959; }
    .family_site li { width:50%; }
    .copyright { text-align:center; }
    .copyright .wrap p { position:relative; top:auto; line-height:20px; margin-bottom:20px; }
    .copyright .wrap a { margin:0 10px; }
}
@media all and (max-width:480px){
   .family_site li > a { padding:0 10px; }
   .family_site li > a::before {right:10px;}
   .family_site li > a.on::before {right:17px;}
}