/* toplogo */
header { position: relative;width:100%; height:110px; background-color:rgba(255, 255, 255, 0.9); z-index: 800;}
.topmenu {width:100%; height:110px; 
    position: absolute; -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;}
	
.nav-shrink {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  position: fixed;
 background-color:rgba(51, 51, 51, 0.9);color:#fff;
}
.nav-shrink .nav-wrap { margin: 0px auto; }
.nav-shrink .nav-link { color: white;  }

.nav-shrink .nav-link { display:block; width:100%;text-align:center;
  color: #ffffff !important;
  text-decoration: none;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}


.nav-shrink h1 { width:1200px; margin:0 auto;}
.nav-shrink h1 a.top_logo {position:absolute;top:5px; display:block; width:194px; height:91px; text-align:center; padding:0px 10px 0 10px; 
 background-image:url(/images/common/top_logo_en.png); background-position:center center; background-repeat:no-repeat; transition: .2s;z-index:200;}


.nav-wrap {
  width: 1200px; 
  margin: 0px auto;
}
/* top */
.topmenu .top_top { width:100%; padding:6px 0;}
.topmenu .top_top ul {width:1200px; margin:0 auto;text-align:right;}
.topmenu .top_top ul li { display:inline-block;  line-height:1.875em; }
.topmenu .top_top ul li.loginmenu { width: 50px; height: 32px;margin-left: 0.625em;}
.topmenu .top_top ul li.langmenu { width: 50px; height: 32px;}

.topmenu .top_top ul li img { vertical-align:middle;line-height:1.875em;margin-left: 0.125em; margin-right: 0.125em;}
.topmenu .top_top ul li a { display:block; font-size: 14px; width:100%; height:100%;text-align:center;text-transform:uppercase;}
.topmenu .top_top ul li a:hover { color:#0e008c;}

h1 { width:1200px; margin:0 auto;}
h1 a.top_logo {position:absolute;top:5px; display:block; width:194px; height:91px; text-align:center; padding:0px 10px 0 10px;
 background-image:url(/images/common/top_logo_en_m.png); background-position:center center; background-repeat:no-repeat; transition: .2s;z-index:200;}


/* 상단등록버튼 */
.nav-wrap .top_reg {width:100%; margin:0 auto;}
.nav-wrap .top_reg a.topreg_btn { display:block; width:140px; color:#fff; text-align:center; font-weight:700; background-color:#c02f83; padding:3px; margin-left:88%;z-index: 900;}
.nav-wrap .top_reg a:hover { background-color:#624d9d;transition: .3s all ease-out;}


/* topmenu */
.nav-wrap .menu-container{
	width:100%;
	display: none;
	z-index: 300;
	margin: 1% auto 0; 
}
.menu-container:after,
.menu-container:before{
    content: "";
    clear: both;
}
.menu-container:after{
    display: table;
}
.menu-container .manu{
	width:960px;
	display: block;
	position: relative; margin-top:0%; margin-left:22%;
}
.manu ul{
}
.manu ul:before,
.manu ul:after {
    content: "";
    display: table;
}
.manu ul:after {
    clear: both;
}
.manu:before,
.manu:after {
    content: "";
    display: table;
}
.manu:after {
    clear: both;
}
.manu ul li ul:before,
.manu ul li ul:after {
    content: "";
    display: table;
}
.manu ul li ul:after {
    clear: both;
}

.menu-container .manu ul li a.topmenu_btn01 { display:block; width:110px; color:#fff; text-transform:uppercase;  background-color:#0e008c;padding: 5px 25px 5px 35px; margin-top:5px;}
.menu-container .manu ul li a.topmenu_btn01:hover{
	color:#fff;
}
.menu-container .manu ul li a.topmenu_btn02 { display:block; width:110px; color:#fff;  text-transform:uppercase;  background-color:#0e008c;padding: 5px 27px 5px 23px;margin-top:5px;}
.menu-container .manu ul li a.topmenu_btn02:hover{
	color:#fff;
}

.menu-container .manu ul li{
	float: left;margin-left:1px; margin-right:1px; 
}
.menu-container .manu ul li a{
	display: block;
	padding: 11px 30px;  text-align:center;
	font-size: 16px; font-weight:700;
	transition: .2s;
}
.menu-container .manu ul li a span{
	transition: .3s all ease-out;
	line-height: 0px;
}
.menu-container .manu ul li a:hover{
	color:#0e008c;
}
.menu-container .manu ul li a:hover span{
	transform: rotate(180deg);
	padding-right: 5px;
}
.menu-container .manu ul li a:hover{
	border-bottom: 1px solid #fff;
}

span.drop_down_icon{
	padding-left: 10px;
	font-size: 16px;
	position: absolute;
	margin-top: 15px;
}
.menu-container .manu ul li .have_dropdown{
	background-color:transparent;
	position: absolute;
/*	left: 0;*/
	display: none;
/*	width: 100%;*/
}


.menu-container .manu ul li .have_dropdown li{
	width:25%; 
	float:none;
}
.menu-container .manu ul li .have_dropdown_n_style{
	background-color: transparent;
	position: absolute;
	left: 0;
	display: none;
	width: 100%;
}
.menu-container .manu ul li .have_dropdown_n_style li a{
	color: #0076db;
	border-bottom: 1px solid #fff;
}
.menu-container .manu ul li .have_dropdown_n_style li a:hover{
	font-weight: bold;
}
.menu-container .manu ul li .have_dropdown_n_style li ul li a{
	color: #285284;
	border-bottom: none;
}
.menu-container .manu ul li .have_dropdown_n_style li ul li a:hover{
	color: #0076db;
	font-weight: normal;
	background-color: #fafafa;
	text-decoration: underline;
}
.menu-container .manu ul li .have_dropdown_n_style li{
	width:100%;
	float:left;
}
.menu-container .manu ul li .have_dropdown_n_style{
	background-color: #eee;
}
.menu-container .manu ul li .have_dropdown li a{
	width: 200px;
	text-align: center;
	float: left;
	font-size:14px;padding: 10px 0px;
	background-color: #fafafa;
	font-weight: normal;
}
.menu-container .manu ul li .have_dropdown li a:hover{
	background-color: #0e008c;
	color: #fff;
}
.menu-container .manu ul li .have_dropdown li ul li{
	display: none;
}
.menu-container .manu ul li .have_dropdown_n_style li ul li{
	background-color: #202020;
	height: auto;
	float: none;
	display: block;
	width: 100%;
}
.nav_menu_toggler_icon{
	cursor: pointer;
	position: absolute;
	right: 5%;
	top: 2.3%;
	background: none;
	color: #202020;
	font-size: 25px;
	z-index: 300;
	display: none;
	border: none;
}

/* mobilemenu */
@media (max-width: 768px) {
    .m_data{display:block;}
    .pc_data{display:none;}
    
    #menu-container { position: relative;}
    #menu-container .logo_m {width: 100%; height:100px; text-align: left; border-bottom: 1px solid #CECECE;}
    #menu-container .logo_m img { vertical-align: middle;max-width:28%; height: auto;margin: 0.313em 0 0.313em 1.250em;}
    
    #menu-wrapper {
    overflow: hidden; position: absolute; top: 40px; right: 20px;
    max-width: 90%;
    cursor: pointer;
}


#menu-wrapper #hamburger-menu {
    position: relative;
    width: 35px;
    height: 30px; margin-top: 0px;
   
    
}

#menu-wrapper #hamburger-menu span {
    opacity: 1;
    left: 0;
    display: block;
    width: 100%;
    height: 4px;
    color: black;
    background-color: #0e008c;
    position: absolute;
    transform: rotate(0deg);
    transition: .4s ease-in-out;
}

#menu-wrapper #hamburger-menu span:nth-child(1) {
    top: 0;
}
#menu-wrapper #hamburger-menu span:nth-child(2) {
    top: 9px;
}
#menu-wrapper #hamburger-menu span:nth-child(3) {
    top: 18px;
}
#menu-wrapper #hamburger-menu.open span:nth-child(1) {
    transform: translateY(9px) rotate(135deg);
}
#menu-wrapper #hamburger-menu.open span:nth-child(2) {
    opacity: 0;
    transform: translateX(-60px);
}
#menu-wrapper #hamburger-menu.open span:nth-child(3) {
    transform: translateY(-9px) rotate(-135deg);
}

#menu-container .menu-list .menu-submenu {
    padding: 20px;     
}

 #menu-container .menu-list .menu-submenu li a {
     display: block;
    padding: 6px;     
}   
#menu-container .menu-list {
    padding-left: 0;
    display: block;
    position: absolute;
    width: 100%; height: 100vh;
    max-width: 80%;
    background: white;
    z-index: 999;
    overflow-y: auto;
    overflow-x: hidden;
    left: -100%;
}

#menu-container .menu-list li.accordion-toggle{
    font-size: 16px;
    padding: 20px;
    text-transform: uppercase;
    border-top: 1px solid #dbdcd2;
}
    
#menu-container .menu-list li.accordion-toggle_none{
    font-size: 16px;
    padding: 20px;
    text-transform: uppercase;
    border-top: 1px solid #dbdcd2;
}
#menu-container .menu-list li.accordion-toggle_none a { display: block;}   
    
#menu-container .menu-list li:first-of-type {
    border-top: 0;
}

.accordion-toggle, .accordion-content {
    cursor: pointer;
    font-size: 16px;line-height: 2em;
    position: relative;
    letter-spacing: 1px;
}

  .accordion-content {
    display: none;
}
  
.accordion-toggle a:before, .accordion-toggle a:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 30px;
    width: 15px;
    height: 2px;
    margin-top: -1px;
    background-color: #0e008c;
    transform-origin: 50% 50%;
    transition: all 0.3s ease-out;
}

.accordion-toggle a:before {
    transform: rotate(-90deg);
    opacity: 1;
    z-index: 2; 
}

.accordion-toggle.active-tab {
  background: #0e008c; 
  transition: all 0.3s ease;
}
 .accordion-toggle.active-tab a.active { color: #fff; font-weight: 700;}
    
.accordion-toggle a.active:before {
    transform: rotate(0deg);
    background: #fff !important;
}

.accordion-toggle a.active:after {
    transform: rotate(180deg);
    background: #fff !important;
    opacity: 0;
}
    #menu-container .menu-list li.m_sns { height: 100vh; border-top: 1px solid #dbdcd2; text-align: left; padding: 20px;}
    #menu-container .menu-list li.m_sns a { float: left;display: block; width: 10%;text-align: center; margin-left:0.313em;margin-right:0.313em;
    } 
    #menu-container .menu-list li.m_sns img { vertical-align:middle;}
    #menu-container .menu-list li.m_sns a.m_login { float: right;display: block; width: 25%; line-height: 1.6em; text-align: center; color: #fff; background-color:#2d2d2d; padding: 0 0.313em;
        margin-top:0.313em;margin-left:0.125em;margin-right:0.125em;text-transform: uppercase;
    }
    
}
    

@media (max-width: 480px) {
     #menu-container .logo_m {width: 100%; height:70px; text-align: left; border-bottom: 1px solid #CECECE;}
    #menu-wrapper {
    overflow: hidden; position: absolute; top: 25px; right: 20px;
    max-width: 90%;
    cursor: pointer;
}
}


/* top페이지인식 */
#ppf_sub01 header .nav-wrap nav.manu ul li a.tmenu01 {font-weight:700; color:#fff;}

#arch_sub header .nav-wrap nav.manu ul li a.tmenu02 {font-weight:700; color:#fff;}

#ppf20_sub01 header .nav-wrap nav.manu ul li a.tmenu03 {font-weight:700; color:#0e008c;}

#pro_sub01 header .nav-wrap nav.manu ul li a.tmenu04,#pro_sub02 header .nav-wrap nav.manu ul li a.tmenu04,#pro_sub03 header .nav-wrap nav.manu ul li a.tmenu04,
#pro_sub04 header .nav-wrap nav.manu ul li a.tmenu04,#pro_sub05 header .nav-wrap nav.manu ul li a.tmenu04,#pro_sub06 header .nav-wrap nav.manu ul li a.tmenu04 {font-weight:700; color:#0e008c;}

#spk_sub01 header .nav-wrap nav.manu ul li a.tmenu05,#spk_sub02 header .nav-wrap nav.manu ul li a.tmenu05 {font-weight:700; color:#0e008c;}

#reg_sub01 header .nav-wrap nav.manu ul li a.tmenu06,#reg_sub02 header .nav-wrap nav.manu ul li a.tmenu06,#reg_sub03 header .nav-wrap nav.manu ul li a.tmenu06,#reg_sub04 header .nav-wrap nav.manu ul li a.tmenu06 {font-weight:700; color:#0e008c;}

#bod_sub01 header .nav-wrap nav.manu ul li a.tmenu07,#bod_sub02 header .nav-wrap nav.manu ul li a.tmenu07,
#bod_sub03 header .nav-wrap nav.manu ul li a.tmenu07,#bod_sub04 header .nav-wrap nav.manu ul li a.tmenu07{font-weight:700; color:#0e008c;}


