@charset "utf-8";

/********************
 * common
 ********************/

/* 공통컬러 */
.m_title, #page h2
{color:#5d65b6 !important}

.subMenu > #now, .intro_area > div:before, #page .congressperson_list a, .stickmenu, .btn.blue
{background-color:#51568f }


#page h3:before
{border-color:#51568f}

html, body {font-family:'Noto Sans KR'; overflow-x:hidden; font-size:18px; font-weight:300;}


/*컨테이너 사이즈*/
.wrap_container, .content_wrap {width: 1300px; margin: 0 auto;}
#container {padding-top:58px; min-height: 800px;}
#content {background: #eeeef1; padding-bottom:40px}
.sub_content {background:#fff; padding:40px 50px; box-shadow: 3px 3px 10px rgba(0,0,0,0.1);}

h1.logo {position: relative; float: left; padding:20px 10px 0px 5px; margin:0; letter-spacing: -0.03em;}
h1.logo img {float: left; margin-right: 10px;}
h1.logo span {display: block; font-size: 14px;font-weight: 500; color: #777; line-height: 13px; margin-top:5px}
h1.logo strong {display: block; overflow: hidden; text-align: left; font-size: 24px; font-weight: 700;}
h1.logo strong em{font-size: 80%; color: #666;}

.top {height:96px}
.top_nav {float: right; margin-top:28px}
.top_nav > li {background-color:#e5e5e9 !important;}
.top_nav > li > a{color:#000 !important}
.top_nav > li .go_site:after, .top_nav > li .new:after {color:#000 !important}
.top_nav > li > ul {border-color:#bbb !important}
.top_nav.mobile > li {margin-right:1px; margin-bottom:1px; width:49%}

.stickmenu {height: 62px; clear: both; box-shadow: 3px 3px 3px rgba(0,0,0,0.1);}
.stickmenu h1.logo {display: none;}

/* 스크롤시 메뉴 높이 */
header.sticky .localNavi > ul > li > a{line-height:80px; height:80px;}
header.sticky h1.logo {padding:8px 10px; margin:0}
header.sticky .menu_wrap {top:80px}
header.sticky .localNavi > ul > li > ul {top:80px;}
header.sticky {  margin-top: -96px; border-bottom:none}

/* 메뉴영역 */
header {background: #fff; z-index: 999;}
header:before {display:none}
.nav_wrap .localNavi {float:none; width: 100%; margin-right:0px;}
.localNavi > ul > li > a{font-weight:400; font-size: 19px; padding:0; letter-spacing: -0.05em;line-height:62px; height:62px; color:#fff;}
header.sticky .localNavi > ul > li > a{line-height:62px; height:62px;}
.localNavi > ul > li:hover > a{color:#fff0ca !important;}
.localNavi > ul > li:hover:before {background-color: #fff0ca !important;}
.localNavi .new:after {line-height:62px; color:#fff}

.childMenu {border-radius:0px;  overflow: hidden;  border:none;  margin-bottom: 30px !important;}
.childMenu li{background:#fff}

/* 비주얼 영역 */
#subVisual {position: relative; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size: cover; background-position: center; background-image: url(/images/intranet/main/main_visual.jpg); height:300px;}
#subVisual > div {position: absolute; left:0; right:0; bottom:60px; text-align: center;}
#subVisual > div * {animation-name:fadeInUp; display:block}
#subVisual > div span {font-size: 130%; font-weight: 400; -webkit-animation-delay:0.5s; animation-delay:0.5s; color:#fff}
#subVisual > div strong {font-size: 180%; font-weight: 700;  -webkit-animation-delay:1s; animation-delay:1s; color:#ffecb9}


/* 인트로 */
.intro {background-image: url(/images/intranet/main/intro_bg.jpg); background-repeat: repeat-y; background-size: 100% auto; background-color:#eaebed; transition:all 0.3s; }
.intro_wrap {display:flex; flex-wrap:wrap; background:#fff; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);  width:800px; margin:10px auto;  overflow: hidden; margin-top:13%}
.intro_wrap h1 * { color:#fff !important }
.intro_wrap h1.logo {padding:0 !important}
.intro_wrap .left, .intro_wrap .right { }
.intro_wrap .left{display: flex; width: calc(100% - 400px); background:#444665; justify-content: center; align-items:center; }
.intro_wrap .right { width: 400px; }
.login_box { padding:40px}
.login_box input{background:#ebedef; padding:15px; height:50px; width:100%; box-sizing: border-box;}
.login_box input:focus{box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4); }
.login_box .form_group {padding:10px 0}
.login_box .btn{border-radius:0px;border:none; width:100% }

.intro p, .intro footer { font-size: 15px; margin-top:20px}
.intro .footer {background:none; color:#666; font-size: 13px;}




@media only screen and (max-width:1330px){
    .wrap_container, .content_wrap {width:auto; min-width: 300px; margin:0 auto;}
    .main_content .wrap_container, #content .content_wrap  { padding-right:10px; padding-left: 10px;}
    .sub_content.content_wrap {margin:0 0px;}
	#content {   padding-bottom: 0px;}
    html, body {font-size:17px}
}

@media only screen and (max-width: 991px) {

    html, body {font-size:17px}
    #container {    padding-top: 80px;    }
    h1.logo {padding:8px 10px; margin:0; }
    h1.logo span {font-size: 13px; margin-top:10px}
    h1.logo strong {font-size: 20px; letter-spacing:-0.1em}
    #subVisual{ height:145px;}
    #subVisual .visual_txt{ padding-top:25px }
	h1.logo img {  margin-right: 5px;}
    .top{display: block; height: 80px;}
    .stickmenu, .top .top_nav {display:none}
    header.sticky {  margin-top: 0px; border-bottom:1px solid #e9e9e9;}

    #subVisual { height:150px; font-size: 80%;}
    #subVisual > div {bottom:45px; }
    

}

@media only screen and (max-width: 800px) {
    html, body {font-size:15px}
    .intro_wrap {width:90%;margin-top:25%}
    .intro_wrap .left{width: 100%; height:100px}
	.intro_wrap .right { width: 100%; }
	.login_box { padding:20px 30px}
}

@media only screen and (max-width: 750px) {
.intro .footer {font-size: 11px;}
}