@charset "utf-8";

#header {width: 100%; min-width: 1400px; height:130px; background: var(--white); position: fixed; top: 0; z-index: 2000;  transition: .4s;}
.header_inner{padding:0 50px;}
.header-top .header_inner{padding-left:0;}
.header-top {height: 50px; background: var(--white); border-bottom: 1px solid var(--light-gray-line); position: relative; z-index: 10;}
.header-top .top-link {display: flex; float: left}
.header-top .top-link a {height: 50px; font-size: 14px; color: var(--light-gray); background: var(--bg-light-gray); padding: 0 50px; display: flex; align-items: center; justify-content: center; transition: .4s}
.header-top .top-link a:hover {background: var(--bg-light-gray-hover)}
.header-top .top-link a.on {color: var(--white); background: var(--blue);}
.header-top .top-link02 {height: 50px; display: flex; float: left; align-items: center}
.header-top .top-link02 a {height: 20px; font-size: 0; text-indent: -9999px; transition: .4s; margin: 0 0 0 30px; opacity: .7}
.header-top .top-link02 a:hover {opacity: 1}
.header-top .top-member {float: right; position: relative}
.header-top .top-member::after {content: ''; display: block; clear: both}
.header-top .top-member ul {display: none}
.header-top .top-member ul.on {display: flex}
.header-top .top-member ul li a,
.header-top .top-member ul li .comment {height: 50px; font-size: 14px; font-weight: 500; display: flex; align-items: center; padding: 0 10px; position: relative}
.header-top .top-member ul li a::after {width: 0; height: 1px; background: var(--black); content: ''; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); transition: .4s}
.header-top .top-member ul li a:hover::after {width: calc(100% - 20px)}
.header-top .top-member ul li .comment span {color: var(--blue)}
.header-top .top-member ul li a.home {color: var(--blue); letter-spacing: 0}
.header-bottom {height: 80px; background: var(--white); border-bottom: 1px solid var(--light-gray-line); position: relative; z-index: 10}
.header-bottom h1.logo {width: 500px; padding:28px 0; float: left; align-items: center; display: inline-block; position: relative; z-index: 10}
.header-bottom h1.logo a {display: block}
.header-bottom h1.logo img {width: 100%}
.header-bottom .gnb {width: 100%; position: absolute; right: 0}
.header-bottom .gnb::after {content: ''; display: block; clear: both}
.header-bottom .gnb ul.main-menu {display: flex; justify-content: flex-end}
.header-bottom .gnb ul.main-menu li.gnb-item {width: 12%; height: 80px}
.header-bottom .gnb ul.main-menu li.gnb-item a.gnb-link {width: 100%; height: 100%; font-size: 22px; font-weight:500; color: var(--black); display: flex; align-items: center; justify-content: center; transition: .4s}
.header-bottom .gnb ul.main-menu li.gnb-item a.gnb-link:hover {color: var(--blue);}

.header-dropdown {width: 100%;  border-bottom: 1px solid var(--light-gray-line); position: absolute; top: -170%; left: 0; transition: .4s; border-bottom:1px solid var(--light-gray-line);}
.header-dropdown .sub-menu-area {background: #f3f3f3; display: flex; justify-content: flex-end; position: relative; overflow: hidden}
.header-dropdown .sub-menu-area::before {content: ''; position: absolute; bottom: -37px; left: 3%; width: 357px; height: 350px; background: url(/img/graduate/com/cnu_emblem.svg) 0 100% no-repeat; opacity: .05}
.header-dropdown .sub-menu-area ul.sub-menu-list {width: 12%; background: var(--white); display: block; border-right: 1px solid var(--light-gray-line); padding: 10px 0; transition: .4s}
.header-dropdown .sub-menu-area ul.sub-menu-list:hover {background-color: var(--bg-light-gray)}
.header-dropdown .sub-menu-area ul.sub-menu-list:first-child {border-left: 1px solid var(--light-gray-line)}
.header-dropdown .sub-menu-area ul.sub-menu-list li {text-align: center; font-weight:500;}
.header-dropdown .sub-menu-area ul.sub-menu-list li a {height: 32px; line-height: 32px; font-size: 16px; display: inline-block; position: relative; transition: .4s}
.header-dropdown .sub-menu-area ul.sub-menu-list li a::after {width: 0; height: 1px; background-color: var(--blue); content: ''; position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); transition: .4s }
.header-dropdown .sub-menu-area ul.sub-menu-list li a:hover {color: var(--blue); font-weight:500;}
.header-dropdown .sub-menu-area ul.sub-menu-list li a:hover::after {width: 100%}
#header:hover .header-dropdown {top: 100%}

.header-dropdown .sub-menu-area ul.sub-menu-list li.new-link-icon a::before {width: 16px; height: 16px; background:url(/img/graduate/com/new-link-icon-grey.svg) no-repeat;  content: ''; position: absolute; top: 50%; right: -24px; transform: translateY(-58%); transition: .4s}
.header-dropdown .sub-menu-area ul.sub-menu-list li.new-link-icon a:hover::before {background-image: url('/img/graduate/com/new-link-icon-blue.svg')}

.m_menu {width: 30px; height: 24px; display: none; font-size: 0; position: absolute; top: 22px; right: 20px; text-align: right}
.m_menu i {width: 100%; height: 3px; background: var(--blue); display: grid}
.m_menu i:nth-child(2) {width: 80%}
.m_menu i:nth-child(3) {width: 60%}
.m_menu_bg {width: 100%; height: 100vh; background: rgba(0,0,0,0.7); position: absolute; top: 0; display: none;}
.m_nav {display: none; width: 300px; height: 100vh; background: var(--white); position: absolute; top: 0; right: -300px; padding: 60px 0 0 0}

.btn_closed {width: 24px; height: 24px; position: absolute; top: 20px; right: 20px}
.btn_closed i {width: 24px; height: 2px; background: var(--black); position: absolute; top: 50%; transform: rotate(45deg)}
.btn_closed i:nth-child(2) {transform: rotate(-45deg)}
.m_nav .top {width: 100%; height: 60px; display: flex; align-items: center; padding: 0 0 0 30px}
.m_nav .top a {display: block; position: relative}
.m_nav .top a::after {width: 7px; height: 13px; background: url(/img/lms/com/arw-black.svg) no-repeat; content: ''; position: absolute; top: 50%; right: -15px; transform: translateY(-50%)}
.m_nav .top a.right {margin-left: 80px}
.m_nav .top .comment {}
.m_nav .top .comment span {font-weight: 600; color: var(--blue)}

ul.m_nav_list {list-style: none; padding: 0 16px; height: calc(100vh - 320px); overflow-y: auto;}
ul.m_nav_list li.m_nav_item {}
ul.m_nav_list li.m_nav_item a.m_nav_link {width: 100%; height: 50px; font-size: 18px; font-weight: 600; display: flex; align-items: center; padding-left: 60px; transition: 0.4s; position: relative}
ul.m_nav_list li.m_nav_item a.m_nav_link.link01::before {width: 22px; height: 22px; background: url(/img/graduate/com/m-menu-icon01.svg) 50% 50% no-repeat; content: ''; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); transition: 0.4s}
ul.m_nav_list li.m_nav_item a.m_nav_link.link02::before {width: 22px; height: 22px; background: url(/img/graduate/com/m-menu-icon02.svg) 50% 50% no-repeat; content: ''; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); transition: 0.4s}
ul.m_nav_list li.m_nav_item a.m_nav_link.link03::before {width: 22px; height: 22px; background: url(/img/graduate/com/m-menu-icon03.svg) 50% 50% no-repeat; content: ''; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); transition: 0.4s}
ul.m_nav_list li.m_nav_item a.m_nav_link.link04::before {width: 22px; height: 22px; background: url(/img/graduate/com/m-menu-icon04.svg) 50% 50% no-repeat; content: ''; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); transition: 0.4s}
ul.m_nav_list li.m_nav_item a.m_nav_link.link05::before {width: 22px; height: 22px; background: url(/img/graduate/com/m-menu-icon06.svg) 50% 50% no-repeat; content: ''; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); transition: 0.4s}
ul.m_nav_list li.m_nav_item a.m_nav_link:focus {background: var(--blue); color: var(--white)}
ul.m_nav_list li.m_nav_item a.m_nav_link:focus.link01::before {background: url(/img/graduate/com/m-menu-icon01-on.svg) 50% 50% no-repeat}
ul.m_nav_list li.m_nav_item a.m_nav_link:focus.link02::before {background: url(/img/graduate/com/m-menu-icon02-on.svg) 50% 50% no-repeat}
ul.m_nav_list li.m_nav_item a.m_nav_link:focus.link03::before {background: url(/img/graduate/com/m-menu-icon03-on.svg) 50% 50% no-repeat}
ul.m_nav_list li.m_nav_item a.m_nav_link:focus.link04::before {background: url(/img/graduate/com/m-menu-icon04-on.svg) 50% 50% no-repeat}
ul.m_nav_list li.m_nav_item a.m_nav_link:focus.link05::before {background: url(/img/graduate/com/m-menu-icon06-on.svg) 50% 50% no-repeat}
ul.m_nav_list li.m_nav_item ul.m_sub_list {width: 100%; margin-top: 6px}
ul.m_nav_list li.m_nav_item ul.m_sub_list li.m_sub_item a.m_sub_link {width: 100%; height: 36px; font-size: 14px; color: #4b4b4b; display: flex; align-items: center; padding-left: 44px; position: relative}
ul.m_nav_list li.m_nav_item ul.m_sub_list li.m_sub_item a.m_sub_link::before {width: 8px; height: 1px; background: #4b4b4b; content: ''; position: absolute; top: 50%; left: 25px}
.m_nav .btm-link {width: 100%; position: absolute; bottom: 0; left: 0}
.m_nav .btm-link .link-box01 {width: 100%; display: flex; align-items: center;}
.m_nav .btm-link .link-box01 a {width:100%}
.m_nav .btm-link .link-box01 a.link01 {width: 100%; height: 50px; font-size: 14px; color: var(--light-gray); background: var(--bg-light-gray); display: flex; align-items: center; justify-content: center; position: relative; float: left}
.m_nav .btm-link .link-box01 a.link02 {width: 100%; height: 50px; font-size: 14px; color: var(--light-gray); background: var(--bg-light-gray); display: flex; align-items: center; justify-content: center; position: relative; float: left}
.m_nav .btm-link .link-box02 a.link03 {width: 100%; height: 50px; font-size: 14px; font-weight: 600; color: var(--white); background: var(--blue); display: flex; align-items: center; justify-content: center; }
.m_nav .btm-link .link-box02 a.link04 {width: 100%; height: 50px; font-size: 14px; color: var(--light-gray); background: var(--bg-light-gray); display: flex; align-items: center; justify-content: center; }



@media (max-width: 1440px) {
	#header {min-width: 100%}
	.header-top .inner {width: 100%}
    .header-bottom .inner {width: 100%} 
	.header-bottom h1.logo {width: 350px;}
	.header-bottom .gnb ul.main-menu li.gnb-item a.gnb-link {font-size: 18px}
	.header-dropdown .sub-menu-area ul.sub-menu-list li a {height: 32px; line-height: 32px}
	.header-bottom .gnb ul.main-menu li.gnb-item {width: 13%;}
	.header-dropdown .sub-menu-area ul.sub-menu-list {width: 13%;}
	.header-dropdown .sub-menu-area ul.sub-menu-list li a {height: 32px; line-height: 32px; font-size: 14px;}
	.header-dropdown .sub-menu-area ul.sub-menu-list li.new-link-icon a::before {width: 12px; height: 12px;right: -16px;}
}
@media (max-width: 1080px) {
	#header{height:70px;}
	.header_inner {padding: 0 20px;}
	.header-top {display: none}
    .header-top .top-member ul li a,
    .header-top .top-member ul li .comment {height: 40px}
	.header-bottom {height: 70px}
    .header-bottom h1.logo {z-index:-10;}
	.header-bottom .gnb {display: none}
	.header-dropdown {display: none}
	.m_menu {display: grid; align-content: space-around; justify-items: end; float: right}
	.header-bottom h1.logo {padding:20px 0;}
}
@media (max-width: 768px) {
	#header{height:60px;}
	.header-top {display: none}
	.header-bottom {height: 60px}
	.header-bottom h1.logo {width: 300px; padding: 18px 0;}
	.m_menu {top: 18px}
	.m_menu_bg {top: 0px}
	.m_nav {top: 0; z-index:10;}
}

@media (max-width: 380px) {
	.header-bottom h1.logo {width: 230px;}
	.m_menu {top: 18px; right: 16px}
}

.bodyWrap {position: relative; min-height: 70vh}

/* 푸터 */
#footer {background: #333}
.footer-top {height: 60px; border-bottom: 1px solid #484848}
.footer-top ul.footer-link {width: 100%; display: flex; justify-content: center}
.footer-top ul.footer-link > li > a {height: 60px; color: var(--white); opacity: .7; position: relative; display: flex; align-items: center; justify-content: center; padding: 0 20px 0 15px; transition: .4s}
.footer-top ul.footer-link > li > a::after {content: ''; width: 4px; height: 4px; background: var(--white); border-radius: 50%; opacity: .7; position: absolute; top: 50%; right: 0; transform: translateY(-50%)}
.footer-top ul.footer-link > li:last-child > a::after {content: none}
.footer-top ul.footer-link > li > a:hover {opacity: 1}
.footer-bottom {width: 100%; font-size: 14px; display: inline-block; padding: 30px 0}
.footer-bottom .footer-logo {width: 350px; margin: 0 auto}
.footer-bottom .footer-logo img {width: 100%; opacity: .5}
.footer-bottom ul.footer-info {width: 100%; display: flex; justify-content: center; margin-top: 15px} 
.footer-bottom ul.footer-info > li {font-size: inherit; color: var(--white); opacity: .7; position: relative; padding: 0 15px 0 10px}
.footer-bottom ul.footer-info > li:nth-child(2) {background: url('/img/lms/sub/icon-contact.svg') 0 50% no-repeat; background-size: 13px; padding: 0 15px 0 18px; margin: 0 0 0 10px}
.footer-bottom ul.footer-info > li:nth-child(3) {background: url('/img/lms/sub/icon-email.svg') 0 50% no-repeat; background-size: 16px; padding: 0 15px 0 22px; margin: 0 0 0 10px}
.footer-bottom ul.footer-info > li::after {content: ''; width: 4px; height: 4px; background: var(--white); border-radius: 50%; opacity: .7; position: absolute; top: 50%; right: 0; transform: translateY(-50%)}
.footer-bottom ul.footer-info > li:last-child::after {content: none}
.footer-bottom .copyright {font-size: inherit; font-weight: 200; color: var(--white); opacity: .4; letter-spacing: 0; clear: both; display: flex; justify-content: center; margin-top: 15px; text-align: center}
.footer-bottom select {width: auto; height: 50px; font-size: inherit; color: #999; background: url('/img/lms/com/arw-white-btm.svg') 90% 50% no-repeat; background-size: 11px; border: 1px solid #484848; display: block; margin: 20px auto 0}

@media (max-width: 1080px) {
	.footer-top {height: 50px}
	.footer-top ul.footer-link > li > a {height: 50px; font-size: 14px; padding: 0 15px 0 10px}
	.footer-bottom {padding: 25px 20px}
	.footer-bottom .footer-logo {width: 240px; margin: 0 auto}
	.footer-bottom ul.footer-info {display: block; text-align: center; margin-top: 15px}
	.footer-bottom ul.footer-info > li {font-size: 14px; margin: 0 0 5px 0}
	.footer-bottom ul.footer-info > li:nth-child(2) {background-size: 13px; display: inline-block; padding: 0 0 0 18px; margin: 0 0 5px 0}
	.footer-bottom ul.footer-info > li:nth-child(3) {background-size: 16px; display: inline-block; padding: 0 0 0 22px; margin: 0 0 0 10px}
	.footer-bottom ul.footer-info > li:last-child {margin-bottom: 0}
	.footer-bottom ul.footer-info > li::after {content: none}
	.footer-bottom ul.footer-info > li {font-size: 12px}
	.footer-bottom .copyright {font-size: 12px}
	.footer-bottom select.family-site {width: 160px; height: 40px; font-size: 12px; margin: 15px auto 0}
}
@media (max-width: 768px) {
	.footer-top {height: 40px}
	.footer-top ul.footer-link > li > a {height: 40px; font-size: 12px; padding: 0 15px 0 10px}
	.footer-bottom ul.footer-info > li {font-size: 12px}
}