@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; transform:translateY(0);}
#skipNav a:focus {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%; transform:translateY(-50%);padding: 0 20px;}
.header-logo .logo {color:#000; font-size:20px;}
.header-anb {position:absolute; right:0; top:50%; transform:translateY(-50%);}
.header-gnb {position:absolute; right:0; top:25px;}
@media screen and (min-width: 1024px) {
    .header-anb {display:none;}
    .header-gnb {display:block;}
}
@media screen and (max-width: 1023px) {
    .header-anb {display:block;}
    .header-gnb {display:none;}
}
 
/* gnb - Base */
.gnb .node1-list {position:relative;white-space:nowrap;/* margin:0 -10px; */}
.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; transition:left right 0.3s;}
.gnb .node2-wrap {display:none; position:absolute; left:50%; top:100%; padding-top:5px; 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; 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:flex; position:fixed; z-index:1002; left:0; top:0; width:100%; height:100%; padding:20px; justify-content:center; align-items:center; flex-direction:column;}
.popup_wrap .popup {position:relative; z-index:11; width:100%; background-color:#fff; opacity:0; transition:all 0.2s ease;}
.popup_wrap.is_active {visibility:visible;}
.popup_wrap.is_active .popup {opacity:1;}
 
/* Popup Scroll */
.popup {display:flex; flex-direction:column;}
.popup .popup_body {flex:1 1 auto; overflow:auto;}
.popup .popup_head, .popup .popup_foot {flex:none;}
 
/* Transition */
.popup_wrap.type_basic .popup {transform:translate(0, 30px);}
.popup_wrap.type_full {padding:0;}
.popup_wrap.type_full .popup {width:100%; height:100%; min-height:100%; opacity:1; transform:translate(0, 0);}
.popup_wrap.type_select {padding:0; justify-content:flex-end;}
.popup_wrap.type_select .popup {width:100%; transform:translate(0, 100%);}
.popup_wrap.type_alert .popup {transform:translate(0, 30px);}
.popup_wrap.type_confirm .popup {transform:translate(0, 30px);}
.popup_wrap.is_active .popup {transform:translate(0,0);}

/*-------------------------------------------------------------------
    ## animate
-------------------------------------------------------------------*/
.to-animate-sec {opacity:0;}
.to-animate {opacity:0;}
.animate-sec {border:1px solid #ddd; border-radius:10px;}
.animate-sec + .animate-sec {margin-top:50px;}
.animate-head {border-bottom:1px solid #ddd;}
.delay-03 {-webkit-animation-delay: 0.3s; animation-delay: 0.3s;}
.delay-05 {-webkit-animation-delay: 0.5s; animation-delay: 0.5s;}

/*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;}