@charset "utf-8";

#header {width: 100%; min-width: 1400px; background: var(--white); position: fixed; top: 0; z-index: 2000;  transition: .4s}
.header_inner{padding:0 28px;}
.header-top .header_inner{padding-left:0; display: flex; justify-content:space-between;}
.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: 16px; color: var(--black); background: var(--bg-light-gray); padding: 0 30px; display: flex; align-items: center; justify-content: center; transition: .4s; font-weight: bold;}
.header-top .top-link a:hover {background: var(--bg-light-gray-hover)}
.header-top .top-link a.on {color: var(--white); background: var(--green)}
.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.link01 {width: 95px; background: url(/img/lms/com/logo-wintelips.png) no-repeat; background-size: 100%}
.header-top .top-link02 a.link02 {width: 53px; background: url(/img/lms/com/logo-build.svg) no-repeat; background-size: 100%}
.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 4px; position: relative}
.header-top .top-member ul li a.normal,
.header-top .top-member ul li .comment.normal {padding: 0 8px}
.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(--green)}
.header-top .top-member ul li a.home {color: var(--green); 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: 340px; float:left; margin-top: 20px; display: inline-block; position: relative; z-index: 10; display: flex;}
.header-bottom h1.logo a {width: 100%; display: block}
.header-bottom h1.logo img {}
.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: 13%; 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(--green)}

.header-dropdown {width: 100%; background: var(--white); border-bottom: 1px solid var(--light-gray-line); position: absolute; top: -170%; left: 0; transition: .4s}
.header-dropdown .sub-menu-area {display: flex; justify-content: flex-end; position: relative; overflow: hidden}
.header-dropdown .sub-menu-area::before {content: ''; position: absolute; bottom: 0%; left: 12px; width: 20%; height: 100%; background:url(/img/faculty/com/cnu_emblem.svg) 0 100% no-repeat; opacity: .1}
.header-dropdown .sub-menu-area ul.sub-menu-list {width: 13%; 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}

.header-dropdown .sub-menu-area ul.sub-menu-list li a {height: 32px; line-height: 32px; font-size: 16px; font-weight:500; display: inline-block; position: relative; transition: .4s}
.header-dropdown .sub-menu-area ul.sub-menu-list li.sub-menu-list-0702 a {height: 48px; display: inline-flex; align-items: center; justify-content: center; line-height: 1.2;}

.header-dropdown .sub-menu-area ul.sub-menu-list li a::after {width: 0; height: 1px; background-color: var(--green); 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(--green)}
.header-dropdown .sub-menu-area ul.sub-menu-list li a:hover::after {width: 100%}

.header-dropdown .sub-menu-area ul.sub-menu-list li.new-link-icon a::before {width: 16px; height: 16px; background:url(/img/lms/com/new-link-icon-grey.svg) no-repeat;  content: ''; position: absolute; top: 50%; right: -27px; 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/lms/com/new-link-icon-green.svg')}

#header:hover .header-dropdown {top: 100%}
/* .header-dropdown .sub-menu-area ul.sub-menu-list li:hover{color:#007a33;}
 */
 
.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(--green); 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; z-index:11}
.m_nav {display: none; width: 300px; height: 100vh; background: var(--white); position: absolute; top: 0; right: -300px; padding: 60px 0 0 0; z-index:20}

.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(--green)}

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/lms/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/lms/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/lms/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/lms/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/lms/com/m-menu-icon05.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.link06::before {width: 22px; height: 22px; background: url(/img/lms/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(--green); color: var(--white)}
ul.m_nav_list li.m_nav_item a.m_nav_link:focus.link01::before {background: url(/img/lms/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/lms/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/lms/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/lms/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/lms/com/m-menu-icon05-on.svg) 50% 50% no-repeat}
ul.m_nav_list li.m_nav_item a.m_nav_link:focus.link06::before {background: url(/img/lms/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; padding: 0 0 0 34px}
.m_nav .btm-link .link-box01 a {display: block; position: relative}
.m_nav .btm-link .link-box01 a::after {width: 7px; height: 13px; background: url(/img/lms/com/arw-txt-btn.svg) no-repeat; content: ''; position: absolute; top: 50%; right: -20px; transform: translateY(-50%)}
.m_nav .btm-link .link-box01 a.link01 {width: 95px; height: 50px; font-size: 0; text-indent: -9999px; background: url(/img/lms/com/logo-wintelips.png) 50% 50% no-repeat; background-size: 95px; display: block; position: relative; float: left}
.m_nav .btm-link .link-box01 a.link02 {width: 53px; height: 50px; font-size: 0; text-indent: -9999px; background: url(/img/lms/com/logo-build.svg) 50% 50% no-repeat; background-size: 53px; display: block; position: relative; float: left}
.m_nav .btm-link .link-box01 a.right {margin-left: 60px}
.m_nav .btm-link .link-box02 a.link03 {width: 100%; height: 50px; font-size: 14px; font-weight: 600; color: var(--white); background: var(--green); display: flex; align-items: center; justify-content: center}
.m_nav .btm-link .link-box02 .link-box02-01{display: flex; align-items: center; justify-content: center}
.m_nav .btm-link .link-box02 a.link04 {width: 50%; height: 50px; font-size: 14px; color: var(--light-gray); background: var(--bg-light-gray); display: flex; align-items: center; justify-content: center}
.m_nav .btm-link .link-box02 a.link05 {float:left; width: 50%; height: 50px; font-size: 14px; color: var(--light-gray); background: var(--bg-light-gray); display: flex; align-items: center; justify-content: center}
.m_nav .btm-link .link-box02 .link-box02-02{display: flex; align-items: center; justify-content: center}
.m_nav .btm-link .link-box02 a.link06 {width: 50%; height: 50px; font-size: 14px; color: var(--light-gray); background: var(--bg-light-gray); display: flex; align-items: center; justify-content: center}
.m_nav .btm-link .link-box02 a.link07 {float:left; width: 50%; 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: 1740px) {
	.header-top .top-link02 {display: none;}
	.header-top .top-link02 a {margin: 0 15px 0 15px;}
	.header-top .top-link a {font-size: 14px;}
}

@media (max-width: 1610px) {
	.header-top .header_inner .top-link02 {display: none;}
}


@media (max-width: 1440px) {
	
	
	#header {min-width: 100%}
	.header-top .inner {width: 100%}
	.header-top .top-link a {font-size: 12px;}
	.header-bottom {height: 60px;}
	.header-bottom .gnb ul.main-menu li.gnb-item {height: 60px;}
    .header-bottom .inner {width: 100%} 
    .header-bottom h1.logo {width: 268px; margin-top: 12px;}
   
    .header-dropdown .sub-menu-area::before{display:none;}
   	.header-top .top-link a {height: 50px; font-size: 14px; padding: 0 16px;}
    .header-top .top-link02 a{display:none}
	.header-bottom .gnb ul.main-menu li.gnb-item a.gnb-link {font-size: 16px; }
	.header-dropdown .sub-menu-area ul.sub-menu-list li a {height: 32px; line-height: 32px;  font-size: 12px;}
	
	.header-bottom .gnb ul.main-menu li.gnb-item {width: 12%;}
	.header-dropdown .sub-menu-area ul.sub-menu-list {width: 12%;}
	.header-dropdown .sub-menu-area ul.sub-menu-list li.new-link-icon a::before {width: 10px; height: 10px; right: -16px; }
}

@media (max-width: 1280px) {
	.header-top .top-member ul li a, .header-top .top-member ul li .comment {font-size: 12px;}
	.header-top .top-link a {font-size: 12px;}
}




@media (max-width: 1080px) {
	.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{margin-top:20px;}
    .header-bottom h1.logo img{}
    /*.header-bottom h1.logo {margin: 15px 0 0 20px} */
 	.header-dropdown .sub-menu-area::before{display:none;}
 	.header-top .top-link a {height: 50px; font-size: 14px; padding: 0 20px;}
 	.header-bottom .gnb {display: none}
	.header-dropdown {display: none}
	.m_menu {display: grid; align-content: space-around; justify-items: end; float: right}
}
@media (max-width: 768px) {
	.header-top {display: none}
	.header-bottom {height: 60px}
	.header-bottom h1.logo{margin-top:16px;}
	.header-bottom h1.logo img {height:32px}
	/*.header-bottom h1.logo {width: 240px; margin: 12px 0 0 20px}*/
	.header-dropdown .sub-menu-area::before{display:none;}
	.m_menu {top: 18px}
	.m_menu_bg {top: 0px}
	.m_nav {top: 0}
}
@media (max-width: 380px) {
	.header-dropdown .sub-menu-area::before{display:none;}
	.m_menu {top: 18px; right: 16px}
}


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

/* 푸터 */
#footer {background:#071735}
.footer-top {height: 60px; border-bottom:1px solid rgba(255,255,255,.25)}
.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 {text-align:center}
.footer-bottom .footer-logo img {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: 16px; padding: 0 15px 0 22px; margin:0 0 0 10px; }
.footer-bottom ul.footer-info > li:nth-child(3) {background: url('/img/lms/sub/icon-fax.svg') 0 50% no-repeat; background-size: 16px; padding: 0 15px 0 22px; margin:0 0 0 10px; }
.footer-bottom ul.footer-info > li:nth-child(4) {background: url('/img/lms/sub/icon-email.svg') 0 50% no-repeat; background-size: 18px; padding: 0 15px 0 24px; 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 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: 14px; display: inline-block; padding: 0 0 0 22px; }
	.footer-bottom ul.footer-info > li:nth-child(3) {background-size: 14px; display: inline-block; padding: 0 0 0 22px; margin: 0 0 0 10px}
	.footer-bottom ul.footer-info > li:nth-child(4) {background-size: 16px; display: inline-block; padding: 0 0 0 22px; margin: 0 0 0 10px; 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}
}


/* footer */

.fadeIn{
    animation:fadein 2s;
    -moz-animation:fadein 2s; /* Firefox */
    -webkit-animation:fadein 2s; /* Safari and Chrome */
    -o-animation:fadein 2s; /* Opera */
}
@keyframes fadein{
    from{opacity:0}
    to{opacity:1}
}
@-moz-keyframes fadein{ /* Firefox */
    from{opacity:0}
    to{opacity:1}
}
@-webkit-keyframes fadein{ /* Safari and Chrome */
    from{opacity:0}
    to{opacity:1}
}
@-o-keyframes fadein{ /* Opera */
    from{opacity:0}
    to{opacity:1}
}

.fadeInUp{animation:fadeInUp 1s ease backwards}
.fadeInUp1{animation:fadeInUp 1s ease backwards}
.fadeInUp2{animation:fadeInUp 1.2s ease backwards}
.fadeInUp3{animation:fadeInUp 1.4s ease backwards}
.fadeInUp4{animation:fadeInUp 1.6s ease backwards}
.fadeInUp5{animation:fadeInUp 1.8s ease backwards}
.fadeInUp6{animation:fadeInUp 2s ease backwards}

@keyframes fadeInUp{
	0%{transform:translate(0px, 100px);opacity:0}
	100%{transform:translate(0px, 0);opacity:1}
}