@charset "UTF-8";
/*-------------------------------------------------------------------
    파일정의 : 레이아웃 스타일
    참고사항 : 레이아웃, 상세스타일, 메뉴스타일 분류
    분류순서 : Wrapper > Header > Content > Footer > Navigation
    속성순서 : 표시 > 위치 > 넘침/흐름 > 크기/간격 > 박스모양 > 폰트/정렬 > 기타
-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
    ## Wrapper
-------------------------------------------------------------------*/
/* SkipNav */
#skipNav {position:absolute; left:0; top:0; width:100%; height:0;}
#skipNav a {display:block; position:absolute; left:0; bottom:0; width:100%; line-height:30px; background-color:#000; color:#fff; text-align:center; -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0);}
#skipNav a:focus {-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);}

/*right_menu*/
.right_menu{
    opacity: 1;
    position: absolute;
    display: block;
    width: 70px;
    height: 110px;
    right: 4%;
    top: calc(50% - 210px);
    z-index: 10;
}

.right_res{
    opacity: 1;
    position: absolute;
    display: block;
    width: 70px;
    height: 110px;
    right: 4%;
    top: calc(50% - 80px);
    z-index: 10;
}

.right_notice{
    opacity: 1;
    position: absolute;
    display: block;
    width: 70px;
    height: 110px;
    right: 4%;
    top: calc(50% + 60px);
    z-index: 15;
}
.right_btn span{display: block;text-align: center;top: 18px;color: #a9a9a9;}
.right_btn:after{
    content: '';
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: rgba(0, 40, 140, 0.85);
}
@media (max-width:1600px){
    .right_menu, .right_res, .right_notice{right: 2%;}
}
.ico-menu{display: block;width: 32px;height: 32px;margin: 0 auto 30px;background-image: url('../images/common/ico_menu-02.png');background-position: center;}
.ico-res {width: 32px;height: 32px; margin: 0 auto 30px; background-image: url('../images/common/ico_res.png');}
.ico-notice{width: 32px;height: 32px;margin: 0 auto 30px;background-image: url('../images/common/ico_notice.png');}
.right_area{
    display: inline-block;
    position: fixed;
    top: 50%;
    right: 3%;
    z-index: 10;
}

 
/* Wrapper Layout */
html, body, #wrapper {min-width: 1263px;max-width: 100%;height:100%;}
#asideMenu {display:none; position:fixed; z-index:1001; left:0; right:0; width:100%; height:100%; padding:20px; background-color:#fff;}
#header {position:absolute; z-index:103; top:0; left:0; width:100%; height:80px; background-color:#fff; border-bottom:1px solid #ddd;}
#container {min-height:100%; padding:80px 0;}
#footer {position: relative;z-index:102;height:80px;background-color:#fff;color:#000;border-top:1px solid #ddd;}
 
/* Common Layout */
.out-sec {position:relative; min-width:1200px;}
.in-sec {position:relative;max-width: 100%;margin:auto;}
@media screen and (max-width: 1319px) {
    .out-sec {min-width:320px;}
    .in-sec {margin-right:20px; margin-left:20px;}
}
a {cursor:pointer;}
 
/*-------------------------------------------------------------------
    ## Allmenu
-------------------------------------------------------------------*/
.aside-menu .btn-anb {position:absolute; right:20px; top:18px;}
 
/*-------------------------------------------------------------------
    ## Header
-------------------------------------------------------------------*/
/* Header Layout */
.header-inner {height:100%;}
.header-logo {position:absolute;left:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);padding: 0 20px;z-index: 105;}
.header-logo .logo {color:#000; font-size:20px;}
.header-anb {position:absolute;width: 100%;right:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}
.header-gnb {position:absolute; right:0; top:25px;}
.header_bg{display: none;}
.header-utilMenu{position: absolute;width: auto;right: 0;top: 22px;display: block;padding:10px;z-index: 10;}
.header-utilMenu:after{content:'';position: absolute;display:block;width:100%;height: 30px;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index:1;border-radius: 5rem;}
.header-utilMenu ul{position: relative;display: inline-block;z-index: 999;left: 50%;transform: translateX(-50%);}
.header-utilMenu ul > li {display:inline-block;}
.header-utilMenu ul > li:after{content:'';position: relative;display:inline-block;top: 3px;width:1px;height: 15px;margin: 0 6px;}
.header-utilMenu ul > li:last-child{margin-right:0;}
.header-utilMenu ul > li > a{color: #575757;font-size: 14px;}
 
/* gnb - Base */
.gnb .node1-list {position: absolute;width: auto;white-space:nowrap;left: 50%;-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%);}
.gnb .node1-item {display:inline-table; position:relative; padding:0 10px;}
.gnb .node1-link {display:block; position:relative; padding:0 15px; line-height:30px; color:#555;}
.gnb .node1-link:after {content:''; position:absolute; bottom:0; left:50%; right:50%; height:2px; background-color:#000; -webkit-transition:left right 0.3s; -o-transition:left right 0.3s; transition:left right 0.3s;}
.gnb .node2-menu{opacity:0;}
.gnb .node2-wrap {display:none; position:absolute; left:50%; top:100%; padding-top:5px; -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%);  transform:translateX(-50%);}
.gnb .node2-list {padding:10px 5px; background-color:#fff; border:1px solid #ddd; border-radius:3px;}
.gnb .node2-link {display:block; padding:0 15px; line-height:24px; font-size:12px; color:#333;}
.gnb-fullsize > .logo{display: none;}
/* gnb - Active */
.gnb .node1-link:focus,
.gnb .node1-link:hover,
.gnb .node1-link:active,
.gnb .is-active > .node1-link,
.gnb .is-current > .node1-link {color:#000;}
.gnb .is-current > .node1-link:after {left:15px; right:15px;}
.gnb .node2-link:focus,
.gnb .node2-link:hover,
.gnb .node2-link:active,
.gnb .is-active > .node2-link,
.gnb .is-current > .node2-link {color:#000;}
.gnb .is-active > .node2-wrap {display:block;}

/* side-menu */
.side-menu{position: fixed;width: 100px;height: 200px;display: block;right: 0;bottom: 0;z-index: 104;}
.side-menu .node1-list {
    position: relative;
    white-space: nowrap;
    margin: 0 -10px;
}

.side-menu .node1-item {
    display: block;
    position: relative;
    padding: 0 10px;
    color: #555;
}

.side-menu .node1-link {
    display: block;
    position: relative;
    padding: 0 15px;
    line-height: 30px;
    color: inherit;
}

.side-menu .node1-item.is-selected {
    color: #ffcc00;
}
 
/*-------------------------------------------------------------------
    ## Footer
-------------------------------------------------------------------*/
.footer-inner {padding:20px 0;}
 
/*-------------------------------------------------------------------
    ## Buttons
-------------------------------------------------------------------*/
.btn-anb {display:inline-block; position:relative; width:44px; height:44px; padding:10px 0;}
.btn-anb:before, .btn-anb:after {content:'';}
.btn-anb span, .btn-anb:before, .btn-anb:after {display:inline-block; position:absolute; left:10px; top:50%; width:24px; height:2px; background:#000; vertical-align:top; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%);}
.btn-anb:before {margin-top:-8px;}
.btn-anb span {width:16px; text-indent:-999px; overflow:hidden; white-space:nowrap;}
.btn-anb:after {margin-top:8px;}

/*-------------------------------------------------------------------
    ## Content
-------------------------------------------------------------------*/

/* Section */

.section {
    /* margin-top: 50px; */
}

.section-inner {
    background-color: #fff;
    border: 1px solid #ddd;
}

.section-head {
    padding: 20px;
    /* border-bottom: 1px solid #ddd; */
}

.section-body {
    padding: 20px;
    min-height: 400px;
}

/*-------------------------------------------------------------------
    @Popup
-------------------------------------------------------------------*/
/* Popup Layout */
.popup_wrap {visibility:hidden; display:-webkit-box; display:-ms-flexbox; display:flex; position:fixed; z-index:1002; left:0; top:0; width:100%; height:100%; padding:20px; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;}
.popup_wrap .popup {position:relative; z-index:11; width:100%; background-color:#fff; opacity:0; -webkit-transition:all 0.2s ease; -o-transition:all 0.2s ease; transition:all 0.2s ease;}
.popup_wrap.is_active {visibility:visible;}
.popup_wrap.is_active .popup {opacity:1;}
 
/* Popup Scroll */
.popup {display:-webkit-box;display:-ms-flexbox;display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;}
.popup .popup_body {-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto; overflow:auto;}
.popup .popup_head, .popup .popup_foot {-webkit-box-flex:0;-ms-flex:none;flex:none;}
 
/* Transition */
.popup_wrap.type_basic .popup {-webkit-transform:translate(0, 30px);-ms-transform:translate(0, 30px);transform:translate(0, 30px);}
.popup_wrap.type_full {padding:0;}
.popup_wrap.type_full .popup {width:100%; height:100%; min-height:100%; opacity:1; -webkit-transform:translate(0, 0); -ms-transform:translate(0, 0); transform:translate(0, 0);}
.popup_wrap.type_select {padding:0; -webkit-box-pack:end; -ms-flex-pack:end; justify-content:flex-end;}
.popup_wrap.type_select .popup {width:100%; -webkit-transform:translate(0, 100%); -ms-transform:translate(0, 100%); transform:translate(0, 100%);}
.popup_wrap.type_alert .popup {-webkit-transform:translate(0, 30px);-ms-transform:translate(0, 30px);transform:translate(0, 30px);}
.popup_wrap.type_confirm .popup {-webkit-transform:translate(0, 30px);-ms-transform:translate(0, 30px);transform:translate(0, 30px);}
.popup_wrap.is_active .popup {-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0);}

/*-------------------------------------------------------------------
    ## animate
-------------------------------------------------------------------*/
.delay-03 {-webkit-animation-delay: 0.3s; animation-delay: 0.3s;}
.delay-05 {-webkit-animation-delay: 0.5s; animation-delay: 0.5s;}
.delay-06 {-webkit-animation-delay: 0.6s; animation-delay: 0.6s;}
.delay-09 {-webkit-animation-delay: 0.9s; animation-delay: 0.9s;}
.dur-1{-webkit-animation-duration: 1s;animation-duration: 1s;}
.dur-13{-webkit-animation-duration: 1.3s;animation-duration: 1.3s;}
.dur-16{-webkit-animation-duration: 1.6s;animation-duration: 1.6s;}
.dur-19{-webkit-animation-duration: 1.9s;animation-duration: 1.9s;}

/*ie_chk_area*/
.ie_chk_area{position: fixed;width: 550px;height: 550px;bottom: 0px;right: 0px;display: block;background: #fff;padding: 25px;z-index: 999;border:1px solid #ccc;}
.ie_chk_area .con .tit img {display: block;margin: 20px auto 10px;}
.ie_chk_area .con .tit{display: block;margin: auto;font-size: 1.8rem;font-weight: 400;text-align: center; color: #00455a;}
.ie_chk_area .con strong{font-weight: 900;}
.ie_chk_area .con strong.color-01{color: #009c39;}
.ie_chk_area .blind{display: none;}
.ie_chk_area .btn-close{ position: absolute; display: block; width: 40px; height: 40px; top: 0px; right: 0px; float: right; background: url('/static/pc/images/common/ico_close-01') center no-repeat; border: 0;}
.ie_chk_area .btxt{color: #00455a;text-align: center;font-weight: 600;padding-bottom: 2rem;margin-bottom: 2rem;border-bottom: 1px solid;}
.ie_chk_area .txt{color: #575757;text-align: center;}
.ie_chk_area .con span{position: relative;width: 480px;height: 285px;margin: 20px auto;background: #f4f4f4;display: block;padding: 30px;}
.ie_chk_area .btn-upgrade{position:relative;display:block;margin: 20px auto;width: 256px;text-align: center;padding: 10px 0;background: #00455a;border-radius: 5rem;font-size: 16px;color: #fff;}
.ie_chk_area .chk-uclose{position: absolute;bottom: 0;padding: 0.5rem 0;background: white;width: 540px;left: 0;text-align: center;}