@charset "UTF-8";

/* ::-webkit-scrollbar{
    width: 6px;
}
::-webkit-scrollbar-thumb {
    background-color: #ee7500;
    border-radius: 10px;
    height: 17%;
}
::-webkit-scrollbar-track{
    background-color: rgba(0, 0, 0, 0);
    border-radius: 10px;
} */

/* html {
    scrollbar-face-color: #5500ff;
    scrollbar-track-color: #5500ff;
    scrollbar-arrow-color: none;
    scrollbar-highlight-color: #5500ff;
    scrollbar-3dlight-color: none;
    scrollbar-shadow-color: #5500ff;
    scrollbar-darkshadow-color: none;
} */

/* #pointer { position: fixed; z-index: 1000; background-color: var(--main-color-7); border-radius: 50%; pointer-events: none; border: none; text-align: center; color: var(--white-color-1); transform: translate(25%, 25%); left: 15px; width: 15px; height: 15px; line-height: 15px; font-weight: 700; transition: width 200ms ease-out, height 200ms ease-out, line-height 200ms ease-out, font-size 200ms ease-out; } */


/* 공통 클래스 */
/* ----------------------------------------------------------------------------------------------------------------- */
:root {
    /* gray */
    --gray-color-1  : #f0f0f0;
    --gray-color-2  : #dddddd;
    --gray-color-3  : #cccccc;
    --gray-color-4  : #eeeeee;
    --gray-color-5  : #dcdcdc;
    --gray-color-6  : #959595;
    --gray-color-7  : #f5f5f5;
    --gray-color-8  : #c8c8c8;
    --gray-color-9  : #f6f6f6;
    --gray-color-10 : #f2f2f2;
    --gray-color-11 : #aaaaaa;
    --gray-color-12 : #fbfbfb;
    --gray-color-13 : #dedcd9;
    --gray-color-14 : #fbf9f7;
    --gray-color-15 : #e7e7dd;
    --gray-color-16 : #eceae6;

    /* white */
    --white-color-1 : 255, 255, 255;

    /* black */
    --black-color-0 : #000000;
    --black-color-1 : #111111;
    --black-color-2 : #222222;
    --black-color-3 : #333333;
    --black-color-4 : #444444;
    --black-color-5 : #555555;
    --black-color-6 : #666666;
    --black-color-7 : #777777;
    --black-color-8 : #888888;
    --black-color-9 : #999999;

    /* company color */
    --main-color-1  : #00418e;
}

.flex { display: flex; display: -ms-flexbox; }
.flex_col{display: flex; display: -ms-flexbox; flex-direction: column;}
.flex_ac {display: flex; display: -ms-flexbox; align-items: center;}
.flex_as {display: flex; display: -ms-flexbox; align-items: flex-start;}
.flex_jb{display: flex; display: -ms-flexbox; justify-content: space-between;}
.flex_jc{display: flex; display: -ms-flexbox; justify-content: center;}
.flex_ac_jb {display: flex; display: -ms-flexbox; align-items: center; justify-content: space-between;}
.flex_ac_jc {display: flex; display: -ms-flexbox; align-items: center; justify-content: center;}

.w1400 { max-width: 1280px; margin: 0 auto; }
.w1100 { max-width: 1100px; margin: 0 auto; }

.mo_none{display: block;}
.mo_block{display: none;}
.mo_none8{display: block;}
.mo_block8{display: none;}
.mo_none-in9{display: inline-block !important;}
.mo_block-in9{display: none !important;}
.mo_none10{display: block;}
.mo_block10{display: none;}
.mo_none12{display: block;}
.mo_block12{display: none;}
.mo_none13{display: block;}
.mo_block13{display: none;}
.mo_none14{display: block;}
.mo_block14{display: none;}
.mo-in-none10{display: inline-block;}
.mo-in-block10{display: none;}
.mo_none-flex{display: block;}
.mo_block-flex{display: none;}
.mo_none-flex-box-center-bw{display: flex; display: -ms-flexbox; align-items: center; justify-content: space-between;}
.mo_block-flex-box-center-bw{display: none;}

.ellipsis1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ellipsis2 { width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ellipsis3 { width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

::selection {
    background: var(--main-color-1);
    color: #fff;
}



/* layout */
/* ----------------------------------------------------------------------------------------------------------------- */
#container { max-width: 1920px; margin: 0 auto; }
.main_menu_aside { position: fixed;left: 0;right: 0;top: 0;bottom: 0;background: rgba(0,0,0,.7);display:none;z-index: 20; }
body.body_bg { overflow: hidden !important; }
.body_bg .main_menu_aside { display: block; }
em.br { display: block; }



/* header */
/* ----------------------------------------------------------------------------------------------------------------- */
.skip { padding: 20px 0; color: #fff; font-size: 25px; display: block; text-align: center; position: absolute; background-color: #2274c6; width: 100%; top: -999px; opacity: 0; z-index: 999; }
#header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; transition: 0.3s;}
#header.scroll{
    /* background: rgba(255, 255, 255, 0.8); */
    background: rgba(255, 255, 255, 1);
    border-bottom: 0.0625rem solid rgba(233, 224, 225, 1);
}
#header.scroll .h_dep01 .dep01_li > a{
    color: #000;
}
#header.hover{
    background: #fff;
}

#header .header_box > .flex { height: 80px; padding-left: 70px; }
#header .dep1_li { position: relative; }
#header .dep1_a { display: inline-block; padding: 0 60px; font-size: 18px; /*font-weight: 700;*/ font-weight: 500; line-height: 80px; color: #222; }
#header .dep2 { display: none; background-color: var(--main-color-1); text-align: center; padding: 20px 0; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 100%; min-width: 180px;}
#header .dep2 .dep2_a { display: inline-block; font-size: 16px; color: #fff; padding: 14px 0; transition: all 0.2s; padding-left: 10px; }
#header .dep2 .dep2_a:hover { color: #fff; font-weight: 500; }
#header .dep2 .dep2_li:first-child .dep3{display: none !important;}
#header .dep2 .dep2_li:last-child .dep3{display: none !important;}
#header .dep2 .dep2_li:first-child .hover_arrow.on{visibility: hidden; height: 0; width: 0;}
#header .dep2 .dep2_li:last-child .hover_arrow.on{visibility: hidden; height: 0; width: 0;}
#header .h_nav .dep3{position: absolute; display: none; left: 100%; top: 0; width: 100%; height: 100%; padding: 20px 0;}
#header .h_nav .dep3::before{position: absolute; content: ''; left: 0; right: 0; bottom: 0; top: 0; width: 100%; height: 100%; background: #fff; z-index: -1;}
#header .h_nav .dep3 .dep3_li{background: #fff; padding-bottom: 20px;}
#header .h_nav .dep3 .dep3_li:last-child{padding-bottom: 20px;}
#header .h_nav .dep3 .dep3_li a{color: #666; font-size: 16px;}
#header .h_nav .dep3 .dep3_li a:hover{color: var(--main-color-1);}
#header .hover_arrow{visibility: hidden; height: 0; width: 0; display: inline-block; transition: 0.2s;}
#header .hover_arrow.on{visibility: visible; width: 20px; height: 20px;}

#header .user_box { margin-right: 60px; }
#header .user_box ul li:not(:last-child) { margin-right: 20px; }
#header .user_box ul li span { font-size: 15px; color: #555; }
#header .user_box ul li a img { margin-right: 3px; }
#header .user_box ul li a span { display: inline-block; font-size: 15px; color: #555; }
#header .user_box ul li:hover a img { filter: invert(22%) sepia(49%) saturate(3419%) hue-rotate(198deg) brightness(93%) contrast(96%); }
#header .user_box ul li:hover a span { color: var(--main-color-1); }
.siteMap_btn { width: 100px; height: 100px; position: relative; }
.hamburger { position: absolute; top: 50%; left: 50%; z-index: 10; text-align: right; width: 28px; font-size: 0; transform: translate(-50%, -50%); }
.hamburger .line{ width: 40px; height: 4px; background-color: #000; display: inline-block; font-size: 0; margin: 3.5px auto; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; text-align: right; }
.hamburger:hover{ cursor: pointer; }
/* .hamburger.is_active .line:nth-child(2){ opacity: 0; }
.hamburger.is_active .line:nth-child(1){ -webkit-transform: translateY(12px) rotate(45deg); -ms-transform: translateY(12px) rotate(45deg); -o-transform: translateY(12px) rotate(45deg); transform: translateY(12px) rotate(45deg); }
.hamburger.is_active .line:nth-child(3){ -webkit-transform: translateY(-12px) rotate(-45deg); -ms-transform: translateY(-12px) rotate(-45deg); -o-transform: translateY(-12px) rotate(-45deg); transform: translateY(-12px) rotate(-45deg); } */

/* siteMap */
.siteMap_box { position: fixed; width: 100%; height: 100vh; left: 0; right: 0; top: -100%; bottom: 0; z-index: 200; opacity: 0; visibility: hidden; transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1); background: #fff; z-index: 999; overflow: auto; }
.siteMap_box .sm_wrap { max-width: 1400px; width: 100%; height: auto; padding: 130px 50px 50px; margin: 0 auto; }
.siteMap_box .top_box { margin-bottom: 130px; }
.siteMap_box .top_box h4 { font-size: 50px; font-weight: 700; }
.siteMap_box .top_box .closeBtn { cursor: pointer; transition: all 0.5s; }
.siteMap_box .top_box .closeBtn:hover { transform: rotate(180deg); }
.siteMap_box .bottom_box .sm_dep1 > li { width: 18%; border-right: 1px solid #e8e8e8; }
.siteMap_box .bottom_box .sm_dep1 > li:last-of-type { border-right: 0; }
.siteMap_box .bottom_box .sm_dep1 > li:not(:nth-of-type(5)) { margin-right: 2.5%; }
.siteMap_box .bottom_box .sm_dep1 > li > a { display: block; padding-bottom: 35px; position: relative; }
.siteMap_box .bottom_box .sm_dep1 > li > a span { display: inline-block; font-size: 30px; font-weight: 700; color: #222; }
.siteMap_box .bottom_box .sm_dep1 > li:hover a span { color: var(--main-color-1); }
.siteMap_box .bottom_box .sm_dep2 { padding: 0 0 25px; }
.siteMap_box .bottom_box .sm_dep2 li > a { display: inline-block; padding: 13px 0; font-size: 18px; color: #555; }
.siteMap_box .bottom_box .sm_dep2 li:hover > a { color: var(--main-color-1); font-weight: 700; }
.siteMap_box.active { opacity: 1; visibility: visible; width: 100%; top: 0; z-index: 9999; }
.siteMap_box .bottom_box .sm_dep2 .dep3{padding-left: 10px;}
.scroll_btn{position: absolute; left: 50%; bottom: 35px; transform: translateX(-50%); z-index: 1;}

.header_lang select {background-position:calc(100% - 10px) center;border:none;background-color:transparent;}


/* footer */
/* ----------------------------------------------------------------------------------------------------------------- */
#footer .footer_wrap { background-color: #f5f5f5; border-top: 1px solid #e7ecf4; padding: 40px 0; position: relative; }
#footer .topFooter {width: 100%; }
#footer .topFooter .siteMap ul li { position: relative; padding: 0 25px; color: #132f4f; }
#footer .topFooter .siteMap ul li:first-child { padding-left: 20px; }
#footer .topFooter .siteMap ul li:not(:last-child)::after { content: '·'; font-size: 15px; position: absolute; right: 0; top: 0; }
#footer .topFooter .familySite { max-width: 250px; width: 100%; position: relative; }
#footer .topFooter .familySite > a { font-family: 'arial', sans-serif; font-weight: 700; padding: 0 30px; }
#footer .topFooter .familySite > a img { transition: all 0.2s; }
#footer .topFooter .familySite > a.rotate img { transform: rotate(180deg); }
#footer .topFooter .familySite .familyBox { display: none; position: absolute; bottom: 100%; left: 0; width: 100%; z-index: 2; background-color: #25292c; padding: 30px; }
#footer .topFooter .familySite .familyBox li:not(:last-child) { margin-bottom: 20px; }
#footer .bottomFooter { padding-top: 20px; }
#footer .bottomFooter .addressBox { margin-bottom: 15px; }
#footer .bottomFooter .addressBox li { position: relative; padding: 0 15px; line-height: 1.2; }
#footer .bottomFooter .addressBox li:first-child { padding-left: 0; }
#footer .bottomFooter .addressBox li:not(:last-child)::after { content: ''; width: 1px; height: 12px; position: absolute; top: 42%; right: 0; transform: translateY(-50%); background-color: #777; }
/* #footer .bottomFooter .copyRight { text-transform: uppercase; } */
#footer .topBtn { position: fixed; right: 20px; bottom: 0; z-index: 100; display: none; transition: transform .4s; }
#footer .topBtn a { display: block; width: 99px; height: 99px; overflow: hidden; background: url('/data/skin/default_v01/img/inc/btn-top.png') no-repeat; background-size: contain; transition: background .4s; }
#footer .topBtn:hover a { background-image: url('/data/skin/default_v01/img/inc/btn-top-on.png'); }



/* select custom */
/* ----------------------------------------------------------------------------------------------------------------- */
select {
    border: 1px solid #dfdfdf;
    padding: 8px 10px;

    background-image: url('/data/skin/default_v01/img/sub/icon-select-bg.png');
    background-repeat: no-repeat;
    background-position: calc(100% - 20px) center;
    background-color: #fff;
}








@media screen and (min-width: 1px) and (max-width: 1919px) {
    /* header */
    /* ------------------------------------------------------------------------------------------------------------- */
    #header .dep1_a { padding: 0 2.0844vw; }
    #header .dep2 .dep2_a { word-break: keep-all; }
    #header .user_box { margin-right: 3vw; }
}



@media screen and (min-width:1px) and (max-width:1540px)  {
    .w1400 { max-width: 100%; padding: 0 70px; }
}



@media screen and (max-width: 1200px) {
    .mo_none12 {display: none;}
    .mo_block12 {display: block;}

    .w1400 { padding: 0 40px; }
    .w1100 { max-width: 100%; padding: 0 40px; }



    /* header */
    /* ------------------------------------------------------------------------------------------------------------- */
    #header .h_nav { display: none; }
    /* #header.hover{
        background: transparent;
    } */
    #header .user_box { display: none; }
    #header .header_box > .flex { height: 80px; padding-left: 40px; }
    .siteMap_btn { height: 80px; width: 80px; }
    .siteMap_box { left: auto; top: auto; right: -100%; background-color: #fff; background-image: none; }
    .siteMap_box.active { width: 87%; max-width: 660px; top: 0; right: 0; }
    .siteMap_box .sm_wrap { padding: 45px 40px; height: 100vh; overflow-y: auto; }
    .siteMap_box .top_box { margin-bottom: 35px; }
    .siteMap_box .bottom_box .sm_dep1 > li { width: 100%; margin-bottom: -1px; border-right: none; }
    .siteMap_box .bottom_box .sm_dep1 > li:not(:nth-of-type(5)) { margin-right: 0; }
    .siteMap_box .bottom_box .sm_dep1 > li > a { display: flex; justify-content: space-between; padding-top: 35px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
    .siteMap_box .bottom_box .sm_dep1 > li > a::before,
    .siteMap_box .bottom_box .sm_dep1 > li > a::after { display: none; }
    .siteMap_box .bottom_box .sm_dep1 > li > a span { font-size: 30px; font-weight: 900; color: #222; }
    .siteMap_box .bottom_box .sm_dep2 { display: none;  padding: 25px 0; }
    .siteMap_box .bottom_box .sm_dep2 li { font-size: 20px; padding: 20px 0; color: #555; }
    .siteMap_box .bottom_box .sm_dep2 li a { font-size: 25px; padding: 20px 0; color: #555; }
    .siteMap_box .bottom_box .sm_dep1 > li > a img { transform: rotate(0); transition: all .2s; }
    .siteMap_box .bottom_box .sm_dep1 > li.rotate > a img { transform: rotate(180deg); }
    .siteMap_box .bottom_box .sm_dep2 .dep3{padding-left: 20px;}

    #footer .bottomFooter .mo_block12 p { margin-bottom: 10px; }
}


@media screen and (min-width: 1px) and (max-width: 768px) {
    p, span, b, strong, h1, h2, h3, h4, h5, h6 {
        word-break: break-all;
    }

    /* header */
    /* ------------------------------------------------------------------------------------------------------------- */
    /* mobile header */
    .siteMap_box .top_box div img { width: 160px; }
    .siteMap_box .bottom_box .sm_dep1 > li > a span { font-size: 4.5573vw; }
    .siteMap_box .bottom_box .sm_dep2 li { padding: 0; }
    .siteMap_box .bottom_box .sm_dep2 li a { font-size: 3.9063vw; }


    #visual .textBox img{width: 200px;}

    /* footer */
    /* ------------------------------------------------------------------------------------------------------------- */
    #footer .topFooter { flex-wrap: wrap; }
    #footer .topFooter > div { width: 100%; }
    #footer .topFooter .siteMap ul li:not(:last-child)::after { top: 4px; }
    #footer .topFooter .familySite { max-width: 290px; margin-top: 25px;}
    #footer .topFooter .familySite > a { padding: 0; padding-right: 20px; }
    #footer .topFooter .familySite .familyBox { padding: 50px 20px; width: 108%; }
    #footer .bottomFooter .mo_block12 p { margin-bottom: 5px; }
    #footer .bottomFooter .copyRight { line-height: 1.5; }
    #footer .topFooter .siteMap img{width: 80px;}
    #footer .topFooter .siteMap ul li:first-child{padding-left: 10px;}
}


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

    .w1400 { padding: 0 20px; }
    .w1100 { padding: 0 20px; }


    /* header */
    /* ------------------------------------------------------------------------------------------------------------- */
    #header .header_box > .flex { height: 65px; padding-left: 20px; }
    #header .h_logoBox a img { width: 100px; }
    .siteMap_btn { width: 65px; height: 65px; }
    .siteMap_box .sm_wrap { padding: 23px 20px; }
    .siteMap_box .top_box { margin-bottom: 20px; }
    .siteMap_box .top_box div img { max-width: 100px; width: auto; }
    .siteMap_box .top_box .closeBtn { max-width: 25px; }
    .siteMap_box .bottom_box .sm_dep1 > li > a { padding: 22.5px 0 20px; }
    .siteMap_box .bottom_box .sm_dep1 > li > a span { font-size: 17px; }
    .siteMap_box .bottom_box .sm_dep1 > li > a img { max-width: 13px; }
    .siteMap_box .bottom_box .sm_dep2 { padding: 12.5px 0; }
    .siteMap_box .bottom_box .sm_dep2 li a { font-size: 15px; padding: 12.5px 0; }
    .hamburger { width: 25px; }
    .hamburger.is_active { margin-right: 0; }
    .hamburger .line { width: 25px; height: 2px; margin: 3px 0; }

    #visual .swiper-pagination{bottom: 250px;}


    /* footer */
    /* ------------------------------------------------------------------------------------------------------------- */
    #footer .topFooter .siteMap ul li { padding: 0 15px; }
    #footer .topFooter .familySite { max-width: 160px; }
    #footer .topFooter .familySite > a { padding-right: 10px; }
    #footer .topFooter .familySite > a img { max-width: 9px; }
    #footer .topFooter .familySite .familyBox { padding: 25px 20px;}
    #footer .bottomFooter { padding: 27px 0 0; }
    #footer .bottomFooter .mo_block p { margin-bottom: 3px; }
    #footer .bottomFooter .copyRight { line-height: 1.5; }
    #footer .topBtn { right: 5px; bottom: -20px; }
    #footer .topBtn a { max-width: 65px; }



    /* select custom */
    /* ------------------------------------------------------------------------------------------------------------- */
    select {
        background-size: 7px;
    }
}


@media screen and (max-width: 1023px) {
    .mo_none10{display: none;}
    .mo_block10{display: block;}
}


@media screen and (max-width: 820px) {
    .mo_none8{display: none;}
    .mo_block8{display: block;}
}


@media screen and (max-width: 768px) {
    .mo_none{display: none;}
    .mo_block{display: block;}
}