#wrap {position:relative;width:100%;min-width: 1303px;overflow:hidden; }

/*header*/
body.page-main #header {position:absolute; background: transparent; width:100%; height:100px; border-bottom:1px solid rgba(255,255,255,.3);z-index:1; font-size:18px;}
body.page-main #header .logo a{display: inline-block; width: 161px; height:43px; background-repeat: no-repeat;background-image: url('../../images/layout/header_logo.png');}
body.page-main #header .header_wrap:after {content:""; display:block; clear:both;}
body.page-main #header .header_wrap{width:1303px; margin:0 auto;}
body.page-main #header .header_wrap h1 {display: inline-block;margin: 30px 0 0 0;position:relative;}
body.page-main #header .header_wrap h1.logo a {display:block;}
body.page-main #header .header_wrap .header_in {float:right;width:1103px;}
body.page-main #header .header_wrap .header_in .gnb { margin-left: 140px;}
body.page-main #header .header_wrap .header_in .gnb .depth {float:left; width:22%;}
body.page-main #header .header_wrap .header_in .gnb .depth li {display: inline-block; width:100%; text-align:center; }
body.page-main #header .header_wrap .header_in .gnb .depth li:first-child {margin-left:0;}
body.page-main #header .header_wrap .header_in .gnb .depth li a{display: block;font-size:18px;  width: 100%; color:#333;line-height: 100px; color:#fff;}

#header .logo .site-selector-btn {position: absolute; top: 32px; right: 15px; display: inline-block; width: 32px; height: 32px; line-height: 32px; text-align: center; border-radius: 100%; vertical-align: middle; color: #444; box-sizing: border-box; transition: 0.2s; background: #fff; border: 1px solid #fff; }
#header .logo:hover .site-selector-btn {border-color: #444;}

#header .header_wrap .header_in .gnb .depth li .con {background:#f5f7fa; padding:20px 0;}
#header .header_wrap .header_in .gnb .depth li .con li a{font-weight:300;line-height: normal;padding: 8px 0; background:none;}
#header .header_wrap .header_in .gnb .depth li .con li a:hover {text-decoration:underline; color:#3182f6;}

#header .header_wrap .header_in .top_menu {position: relative;float:right;background:#fff;margin-top: 30px;;}
#header .header_wrap .header_in .top_menu ul li {display:inline-block;font-size:14px;width: 135px;}
#header .header_wrap .header_in .top_menu ul li.user {border-right:1px solid #444;}
#header .header_wrap .header_in .top_menu ul li a {display:block;color:#333;font-weight:500;padding: 10px;text-align: center;}
#header .header_wrap .header_in .top_menu ul li a:hover {text-decoration:underline;}
#header .header_wrap .header_in .top_menu ul li a img {margin-left: 10px;vertical-align: 2px;}

#header .header_wrap .header_in .top_menu .top_wrap {position:absolute;top:39px;left:-1px;width: 49%;background: #fff;border:1px solid #444; border-bottom: 0; z-index: 2;}
#header .header_wrap .header_in .top_menu .top_wrap ul li {width:100%; background: none; margin-right: 0;display: block; border-bottom: 1px solid #444;}
#header .header_wrap .header_in .top_menu .top_wrap ul li a{display:block;text-align: center; }

#header .overlay_header { display: none; }


/*header on*/
body.page-main #header.on {background:#fff; /*transition:.5s;*/}
body.page-main #header.on .logo a {background-image: url('../../images/layout/headeron_logo.png');}
body.page-main #header.on .header_wrap .header_in .gnb .depth li a{display: block;font-size:18px;  width: 100%; color:#333;line-height: 100px;  box-sizing:border-box; -webkit-transform:perspective(1px) translateZ(0);-moz-transform:perspective(1px) translateZ(0);-ms-transform:perspective(1px) translateZ(0);-o-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);}
body.page-main #header.on .header_wrap .header_in .gnb .depth li a:hover {color:#00448d;}
body.page-main #header.on .header_wrap .header_in .gnb .depth li a:after {content:'';position:absolute;left:50%;right:50%;bottom:0;height:3px;background-color:#3182f6;z-index:-1;-webkit-transition-property:left,right;transition-property:left,right;-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;-ms-transition-duration:0.3s;-o-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-ms-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;}
body.page-main #header.on .header_wrap .header_in .gnb .depth> li > a:hover:after { left:35%; right:35%; }
body.page-main #header.on .header_wrap .header_in .gnb .depth li.on > a {color:#00448d;}
body.page-main #header.on .header_wrap .header_in .gnb .depth li.on > a:after  {left:35%; right:35%; }

#header.on .overlay_header {display: block;position: absolute;width:100%;background: #f5f7fa;padding: 30px 0 25px;border-top: 1px solid #dde7f5;}
#header.on .overlay_header .header_wrap {position: relative;width: 1303px;min-height:100%;}
#header.on .overlay_header .header_wrap:after {content:""; display:block; clear:both;}

#header.on .overlay_header .header_wrap .con {width:100%; box-sizing:border-box;margin-left: 390px;}
#header.on .overlay_header .header_wrap .con.con6 {margin-left: 209px;}
#header.on .overlay_header .header_wrap .con .menu li.depth {display: inline-block;margin-right: 15px;margin-bottom: 10px; }
/*#header.on .overlay_header .header_wrap .con .menu li.depth:first-child {margin-left:0;}*/
#header.on .overlay_header .header_wrap .con .menu li.depth a {display:block;font-size:18px; padding: 10px 30px;border:1px solid #dde7f5;background: #fff;border-radius: 30px;}
#header.on .overlay_header .header_wrap .con .menu li.depth a:hover {text-decoration:underline; color:#3182f6; border:1px solid #3182f6; /*transition:.5s;*/}
#header.on .overlay_header .header_wrap .con .menu_group { display: block; margin-bottom: 10px; }
#header.on .overlay_header .header_wrap .con .menu_group:last-child { margin-bottom: 0; }
#header.on .overlay_header .header_wrap .con .menu_group h4 { display: inline-block; width: 8%; font-weight: 500; font-size: 20px; margin-right: 30px; background: url('../../images/layout/headeron_bullet.png') right no-repeat; vertical-align: top; line-height: 49px;}
#header.on .overlay_header .header_wrap .con .menu_group .menu { display: inline-block; max-width: 970px; }


/*footer*/
#footer {position:relative; width:100%;min-width: 1303px; background:#2e3138;min-height: 230px; font-size:18px;}
#footer .policy {width:100%;background:#272b34;border-bottom: 1px solid #43464c;}
#footer .policy:after {content:""; display:block; clear:both;}
#footer .policy .policy_wrap {width:1303px; margin:0 auto;}
#footer .policy .policy_wrap:after {content:""; display:block; clear:both;}
#footer .policy .policy_wrap .con {float:left;padding: 15px 0;}
#footer .policy .policy_wrap .con li {display:inline-block;background:url("../../images/layout/footer_bullet.png")left center no-repeat;padding-left: 20px;margin-left: 20px;}
#footer .policy .policy_wrap .con li:first-child {margin-left:0; background:url("../../images/layout/footer_go.png")left center no-repeat; padding-left:35px;}
#footer .policy .policy_wrap .con li a {display:block; color:#fff; font-size:14px;}
#footer .policy .policy_wrap .con li:first-child a {color:#00d6ff;}
#footer .policy .policy_wrap .con li a:hover {text-decoration:underline;}

#footer .copy {position: relative;width:1303px;margin:0 auto;padding: 30px 0;}
#footer .copy:after {content:""; display:block; clear:both;}
#footer .copy .icon {float:right;  margin:20px 15px 0 0 ; line-height:0;}
#footer .copy .icon a {display:inline-block;margin-left: 10px;border-radius:100%;vertical-align: top;}
#footer .copy .icon a:first-child {margin-left:0;}

#footer .copy a.up {float: right;display: inline-block;/* margin-top: 20px; */background:#fff;padding: 15px 15px;border-radius:100%;font-size: 0;}
#footer .copy a.up:hover {background-color:#f3f3f3;}
#footer .copy a.up img {margin:3px 0px;}

#footer .copy h1 {display:inline-block;}
#footer .copy ul {display:inline-block; margin-left:62px; vertical-align:bottom;}
#footer .copy ul li {display:inline-block; margin-left:15px; color:#a7a8a6; font-size:14px;}
#footer .copy ul li:first-child {margin-left:0;}
#footer .copy ul li:last-child {display:block; color:#747474; margin:10px 0 0 0;}
#footer .copy ul li span {font-weight:bold; margin-right:7px;}


/*sidebar*/
#sidebar { position: relative; background: #333; width: 260px; font-size: 15px; }
#sidebar .logo {position:relative; padding: 30px 15px; border-bottom: 1px solid #484848;}
#sidebar .logo:after {content: ""; display:block; clear: both;}
#sidebar .logo .site-selector-btn {position: absolute; top: 32px; right: 15px; display: inline-block; width: 32px; height: 32px; line-height: 32px; text-align: center; border-radius: 100%; vertical-align: middle; color: #ccc; box-sizing: border-box;transition: 0.2s; background: #333}
#sidebar .logo:hover .site-selector-btn {background:#fff; color: #444;}
#sidebar .logo a {display:block;}

/*logo_open*/
#sidebar .logo_open { position: absolute;top: 0;left: 0;background:#fff; padding:30px 5px 20px 5px;width: 100%;box-shadow: 0 4px 10px 0 rgb(0 0 0 / 20%); border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; box-sizing: border-box; font-size: 16px; font-weight: bold; z-index: 1; }
#sidebar .logo_open > a { display: inline-block; background-repeat: no-repeat; width: 161px; height:43px; }
#sidebar .logo_open ul {margin-top:30px; padding-top:24px; border-top:1px solid #ddd;}
#sidebar .logo_open ul li {padding: 0 8px 8px 8px;}
#sidebar .logo_open ul li:last-child {padding-bottom: 0;}
#sidebar .logo_open ul li a {display:inline-block; font-size:16px; font-weight:300;}
#sidebar .logo_open ul li a:hover {text-decoration: underline;}
#sidebar .logo_open ul li a i{width: 28px; height: 28px;  display: inline-block; background:#9bbb67;  border-radius: 100%; color:#fff; margin-right: 8px; text-align: center; line-height: 24px; vertical-align:middle;}
#sidebar .logo_open ul li:first-child  a i{background: #333;}
#sidebar .logo_open ul li:nth-child(2) a i{background:#002d99;}
#sidebar .logo_open ul li:last-child a i {background:#e6bd06;}
#sidebar .logo_open ul li a i img {display:block; margin:5px auto;}
#sidebar .logo_open .site-selector-btn {border: 1px solid #ddd; line-height: 30px; background: #fff; color: #444;}
#sidebar .logo_open:hover .site-selector-btn {background:#444; color: #fff;}

#sidebar_toggle { position: absolute; top: 100px; left: 260px; z-index: 1; width: 16px; height: 64px; background: #333; color: #999; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border: 1px solid #666; border-left: none; }
#sidebar_toggle:hover { color: #fff; }
#sidebar_toggle .sidebar_toggle__open { display: none; }
#sidebar_toggle .sidebar_toggle__close { display: block; }

body.sidebar--close #sidebar { display: none; }
body.sidebar--close #page-content { margin-left: 0; }
body.sidebar--close #sidebar_toggle { left: 0; }
body.sidebar--close #sidebar_toggle .sidebar_toggle__open { display: block; }
body.sidebar--close #sidebar_toggle .sidebar_toggle__close { display: none; }

#sidebar .top_menu,
#sidebar .sidebar_in { padding: 15px; }
#sidebar .top_menu:after {content: ""; display:block; clear: both;}
#sidebar .top_menu p {font-size:15px; color:#fff; text-align: center; margin:15px 0;}
#sidebar .top_menu ul li {float: left; width:50%;}
#sidebar .top_menu ul li.full {float: none; width: 100%;}
#sidebar .top_menu ul li a {display: block; text-align: center; padding:10px 5px; background:#adadad; color:#fff; font-size:14px;}
#sidebar .top_menu ul li a:hover {background:#999;}
#sidebar .top_menu ul li:first-child a {background:#f66262;}
#sidebar .top_menu ul li:first-child a:hover {background:#ed5d5d;}

#sidebar .gnb ul {border-bottom:1px solid #39c8ff;}
#sidebar .gnb ul:last-child {border-bottom:0;}
#sidebar .gnb ul li header a {display:block; background:#02b9ff; color:#fff; padding:15px; font-size:16px;}
#sidebar .gnb ul li header a i {float:right;}
#sidebar .gnb ul li .con {background:#444; padding:10px 15px;}
#sidebar .gnb ul li .con > ul > li { display: block; font-size:14px; color:#c4c4c4; font-weight: 300; line-height: normal; padding: 6px 0; }
#sidebar .gnb ul li .con > ul > li:before {content: "\f309"; font-family: bootstrap-icons !important; font-style: normal; font-weight: normal !important; font-variant: normal; text-transform: none; line-height: 1; vertical-align: -0.125em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-right: 4px; text-decoration: none;}
#sidebar .gnb ul li .con > ul > li a {color:#c4c4c4;}
#sidebar .gnb ul li .con > ul > li a:hover,
#sidebar .gnb ul li .con > ul > li a.on,
#sidebar .gnb ul li .con > ul > li.on a {color:#fff;}

#sidebar .top_menu.login-user-visible ul.user {margin:10px 0 20px 0; text-align: center;}
#sidebar .top_menu.login-user-visible ul.user li {display:block; color:#fff; float:none; width:100%;font-size:14px; margin:3px 0 0 0; color:#ccc; font-weight:300;}
#sidebar .top_menu.login-user-visible ul.user li p {display:inline-block; margin:0 3px; }
#sidebar .top_menu.login-user-visible ul.user li:first-child {font-size:16px; margin: 0; color:#fff; font-weight:300;}
#sidebar .top_menu.login-user-visible ul.user li:first-child p {display:inline-block; margin:0;}

#sidebar .simple-tab { background: #fff; border: 1px solid #0072ff; }
#sidebar .simple-tab__tab { width: 33%; }
#sidebar .simple-tab__tab:last-child { width: 34%; }
#sidebar .simple-tab__tab a { background: #0072ff; border: none; color: #fff; padding-left: 0; padding-right: 0; }
#sidebar .simple-tab__tab.active a { background: #fff; color: #0072ff; }
#sidebar .simple-tab__page { border: none; }

#sidebar .stats-tab { background: #fff; }
#sidebar .stats-tab h3 { background: #02b9ff; color: #fff; font-size: 16px; padding: 15px; }

#sidebar .refer { text-align: right; font-size: 12px; padding: 10px; padding-bottom: 0; }
#sidebar .refer > span { border-radius: 10px; padding: 2px 5px; border: 1px solid #333; display: inline-block; }
#sidebar .refer > span.red { border-color: red; color: red; }
#sidebar .refer > span.blue { border-color: #1c82e1; color: #1c82e1; }
#sidebar .refer > span.green { border-color: lightseagreen; color: lightseagreen; }
#sidebar .process-list { padding: 5px; padding-bottom: 4px; }
#sidebar .process-list:after { content: ""; display: block; clear: both; }
#sidebar .process-list li { padding: 2px 5px; }
#sidebar .process-list li:hover {background: #d1f2ff; }
#sidebar .process-list li.on { background: #d1f2ff; }
#sidebar .process-list li.on a {color:#007bff;}
#sidebar .process-list li.list_right {padding-left:20px;}
#sidebar .process-list li.label { margin-top: 16px; }
#sidebar .process-list li.label:first-child { margin-top: 0; }
#sidebar .process-list li.label:hover { background: inherit; }
#sidebar .process-list li > a { display: block; }
#sidebar .process-list h4 {display: inline-block;  font-size: 15px; font-weight:normal;}
#sidebar .process-list p { float: right; display: inline; }
#sidebar .process-list li p span {display: inline-block; color: #bbb; font-size: 1px;vertical-align: baseline;}
#sidebar .process-list .red,
#sidebar .process-list .blue,
#sidebar .process-list .green {font-size:14px;}
#sidebar .process-list .red { color: red; padding: 0 4px; }
#sidebar .process-list .blue { color: #1c82e1; padding: 0 4px; }
#sidebar .process-list .green { color: lightseagreen; padding: 0 4px; }
#sidebar .process-list p .on .red,
#sidebar .process-list p .on .blue,
#sidebar .process-list p .on .green{display: inline-block; text-decoration: underline;}
#sidebar .process-list p a:hover {text-decoration: underline;}
/*#sidebar .process-list p .on .red {text-decoration: underline;}*/
/*#sidebar .process-list p .on .blue { background: #1c82e1; }*/
/*#sidebar .process-list p .on .green { background: lightseagreen; }*/

#sidebar .login-user-visible { display: none; }
#sidebar .login-user-hidden { }
#sidebar.is-login-user .login-user-visible { display: block; }
#sidebar.is-login-user .login-user-hidden { display: none; }

#sidebar .loading-visible { display: none; }
#sidebar .loading-hidden { }
#sidebar.is-loading .loading-visible { display: block; }
#sidebar.is-loading .loading-hidden { display: none; }