@charset "utf-8";

body.open {overflow:hidden;}
.fs16 {transform: skew(-0.1deg);}

#wrap {position:relative;}
.container {width:100%; position:relative; z-index:10; padding-top:0;}
.container.main-container {padding-top:80px;}
.common_banner {position:relative;}
.common_banner .left_bar {position:absolute; left:0;top:0; width:375px; height:400px; background:url("/assets/images/bg_leftbar.jpg") no-repeat top center #f6f5f3; background-size:cover; z-index:10; display:none;}
.con {width:1320px; margin:0 auto;}

/* header */
#header {width:100%; position:fixed; left:0; top:0; z-index:99; background:#fff; /*transition:0.5s ease-out;*/}
#header:after {content:""; display:block; clear:both;}
#header .con {width:100%; max-width:1320px; position:relative;}
#header .bot_header {}
#header .bot_header .con {text-align:right; position:relative;}
#header .bot_header .con:after {content:""; display:block; clear:both;}
#header .gnb {display: inline-block; vertical-align: top;  position:absolute; top:0; right:110px;}
/* #header .gnb .line_bar{display:none; width:100px; height:2px; background:#E4292D; position:absolute; bottom:-1px; z-index:25; left:40px;} */
#header .gnb ul {display: inline-block; font-size:0; vertical-align: top;}
#header .gnb ul li {display: inline-block; text-align:center; position:relative; vertical-align: top; margin:0 32px;}
#header .gnb ul li a {display: inline-block; width:100%; /*transform: skew(-0.1deg);*/}
#header .gnb ul.menu > li > .main-link {position:relative;}
#header .gnb ul.menu > li > .main-link a {font-weight:600; font-size:18px; line-height:80px; color:#444; padding:0 10px; position:relative;}
#header .gnb ul.menu > li > .main-link::after {content:""; position:absolute; left:50%; bottom:0; width:30px; height:3px; transform:translateX(-50%) scaleX(0); transition: .5s; background:#FFCC00;}
/* #header .gnb ul.menu > li:hover > .main-link a {color:#323190;} */
#header .gnb ul.menu > li:hover > .main-link::after {transform:translateX(-50%) scaleX(1);}
/* #header .gnb ul.menu > li.on > .main-link a {color:#323190;} */
#header .gnb ul.menu > li.on > .main-link::after {transform:translateX(-50%) scaleX(1);}

#header .lang {display: inline-block; vertical-align: top; margin-top:30px; margin-left:30px;}
#header .lang:after {content:""; display:block; clear:both;}
#header .lang li {display: inline-block; float:left;}
#header .lang li a {color:#CCCCCC; font-family: 'Poppins',sans-serif; font-weight:600; padding:0 8px; position:relative;}
#header .lang li.on a {color:#3896FF;}
#header .lang li.on a:after {content:""; background:#3896FF; height:2px; width:20px; position:absolute; bottom:-3px; left:8px;}
#header .logo {display: inline-block; vertical-align: top; margin-left:0;  position:absolute; width:144px; left:0; top:50%; transform:translateY(-50%);}
#header .logo a {display: inline-block;}
#header .logo .logo_img {display: inline-block; width:auto;}
#header .logo .logo_img img {max-width:100%; height:auto;}
#header .logo .logo_img.default {}
#header .logo .logo_img.fixed {display:none;}
#header .logo .logo_txt {color:#fff; font-size:16px; font-weight:400; display: inline-block; vertical-align: top; padding-top:7px; word-spacing:5px;}
#header .logo .logo_txt .ll {font-style:italic; color:#fff;}
#header .lang-menu {display: inline-block; vertical-align: top; position:absolute; top:30%; right:0; transform:translateY(-50%); cursor:pointer;}
#header .lang-menu .lang-current {color:#8A89BE; font-size:22px;}
#header .lang-menu ul {}
/*#header .lang-menu ul::before {content:""; position:absolute; left:0; top:0; width: 0px; height: 0px; border-bottom: 360px solid #666666; border-left: 180px solid transparent; border-right: 180px solid transparent;}*/
#header .lang-menu ul li {float:right; text-align:center; font-size:14px; font-weight:600; color:#CCCCCC; margin-left:25px; position:relative; cursor:pointer;}
#header .lang-menu ul li:last-child {margin-left:0;}
#header .lang-menu ul li:last-child::after {content:none;}
#header .lang-menu ul li.on {color:#3896FF;}
#header .lang-menu ul li.on::after {content:""; width:100%; height:2px; background:#3896FF; position:absolute; left:50%; top:100%; transform:translateX(-50%); margin-top:5px; }

#header .bot_header {}
#header .bot_header .con {height:80px; position:relative; display:flex; align-items:center; align-content: center; justify-content: center;}

/* 투명헤더 */
/* #header.sub_header {background:none;}
#header.sub_header .gnb ul.menu > li > .main-link a {color:#fff;}
#header.sub_header .lang-menu .lang-current {color:#fff;}
#header.sub_header .gnb ul.menu > li.on > .main-link::after {content:none;}
#header.sub_header .logo .logo_img.default {display:none;}
#header.sub_header .logo .logo_img.fixed {display:inline;}

#header.sub_header:hover {background:#fff;}
#header.sub_header:hover .gnb ul.menu > li > .main-link a {color:#444;}
#header.sub_header:hover .lang-menu .lang-current {color:#8A89BE;}
#header.sub_header:hover .logo .logo_img.default {display:inline;}
#header.sub_header:hover .logo .logo_img.fixed {display:none;} */

#header.fixed {background:#fff;}
#header.fixed .gnb ul.menu > li > .main-link a {color:#444;}
#header.fixed .lang-menu .lang-current {color:#8A89BE;}
#header.fixed .logo .logo_img.default {display:inline;}
#header.fixed .logo .logo_img.fixed {display:none;}

/* 서브헤더 */
#sub_header {display:none;}
#sub_header .sub-menu {display:none; display:block;}
#sub_header .sub-menu .depth-1 {background:#FBFBFB;}
#sub_header .sub-menu .depth-1 dl {min-height:90px; display: flex; align-items: center; flex-wrap:wrap; position:relative; padding:33px 0;}
#sub_header .sub-menu .depth-1 dl::after {content:""; display:block; clear:both;}
#sub_header .sub-menu .depth-1 dl dt {color:#444444; font-size:16px; font-weight:700; position:relative; float:left; padding-right:25px; margin-right:30px; position:absolute; left:0; top:42px;}
#sub_header .sub-menu .depth-1 dl dt::after {content:""; background:url("/assets/images/sub-menu-arr.png") no-repeat; width:6px; height:10px; background-size:contain; position:absolute; right:0; top:50%; transform:translateY(-50%);}
#sub_header .sub-menu .depth-1 dl dd {float:left; position:relative;}
#sub_header .sub-menu .depth-1 dl dd::after {content:""; width:5px; height:5px; background:#CCCCCC; border-radius:50%; position:absolute; right:0; top:50%; transform:translateY(-50%);}
#sub_header .sub-menu .depth-1 dl dd:last-child::after {content:none;}
#sub_header .sub-menu .depth-1 dl dd a {color:#666666; font-size:16px; font-weight:500; margin:0 35px;}
#sub_header .sub-menu .depth-1 dl dd a.on, #sub_header .sub-menu .depth-1 dl dd a:hover {color:#254C78;}
#sub_header .sub-menu .depth-1 dl dt, #sub_header .sub-menu .depth-1 dl dd a { display: flex; align-items: center; white-space:nowrap;}
#sub_header .sub-menu .depth-2 {background:#F6F6F6; border-top:1px solid #EEEEEE; display:none;}
#sub_header .sub-menu .depth-2 .con {padding-left:146px;}
#sub_header .sub-menu .depth-2 .depth-2-box {padding-left:20px; position:relative;}
#sub_header .sub-menu .depth-2 .depth-2-box::before {content:""; background:url("/assets/images/sub-menu-depth.png") no-repeat; background-size:contain; position:absolute; left:0; top:36px; width:13px; height:14px;}
#sub_header .sub-menu .depth-2 .depth-2-box ul {padding-top:42px; padding-bottom:12px;}
#sub_header .sub-menu .depth-2 .depth-2-box ul::after {content:""; display:block; clear:both;}
#sub_header .sub-menu .depth-2 .depth-2-box ul li {float:left;}
#sub_header .sub-menu .depth-2 .depth-2-box ul li a {color:#666666; font-size:16px; font-weight:500; margin:0 35px 28px; display:inline-block;}
#sub_header .sub-menu .depth-2 .depth-2-box ul li a.on, #sub_header .sub-menu .depth-2 .depth-2-box ul li a:hover {text-decoration:underline; color:#323190;}
#sub_header .sub-menu[data-submenu="1"] dl {margin-left:345px;}
#sub_header .sub-menu[data-submenu="2"] dl {margin-left:350px;}
#sub_header .sub-menu[data-submenu="3"] dl {margin-left:600px;}
#sub_header .sub-menu[data-submenu="5"] dl {margin-left:930px;}

#header.hover {background:#fff; border-bottom:1px solid #CCCCCC;}
#header.hover .gnb ul.menu > li > a, #header.hover .lang-menu .lang-current {color:#444444;}
#header.hover .logo .logo_img.default {display:none;}
#header.hover .logo .logo_img.fixed {display:inline;}
#header.hover .bot_header {border-bottom:1px solid #CCCCCC;}

/* #header.fixed .gnb ul.menu > li > a, #header.fixed .lang-menu .lang-current {color:#444444;} */
/* #header.fixed .logo .logo_img.default {display:none;} */
/* #header.fixed .logo .logo_img.fixed {display:inline;} */
/*#header.fixed .bot_header {border-bottom:1px solid #CCCCCC;}*/

#header.fixed {position:fixed; /* background:#fff;  *//*box-shadow: rgb(0 0 0 / 0.5) 2px 2px 20px 2px;*/}

/*#header.fixed .logo .logo_img.default {display:none;}*/
/*#header.fixed .logo .logo_img.fixed {display:inline-block;}*/
/*#header.fixed .gnb ul li a {color:#7b7b7b;}*/
/*#header.fixed .gnb ul.menu > li:hover a {color:#2c2e76;}*/
/*#header.fixed .gnb ul.menu > li ul.sub_menu li a {color:#7b7b7b;}*/
/*#header.fixed .gnb ul.sub_menu li a:hover {color:#fff !important; background:#2c2e76;}*/
/*#header.fixed .top_header {background:#000;}*/
/*#header.fixed .bot_header {padding-bottom:15px;}*/
#header.sub {background:#fff; border-bottom:1px solid #cccccc; position:fixed;}
#header.sub .logo .logo_img.default {display:none;}
#header.sub .logo .logo_img.fixed {display:inline-block;}
#header.sub .gnb ul.menu > li > a {color:#2C3141;}
#header.sub .lang-menu .lang-current {color:#2C3141;}
#header.sub .search-menu {}
#header.sub .search-menu svg path {stroke:#2C3141;}

.scrolltop {position:fixed; right:40px; bottom:40px; display:none; z-index:9999; cursor:pointer; font-size:20px;}



/* 네비 */
/* #navi {border-bottom:1px solid #EEEEEE; position:sticky; top:0; background:#fff; z-index:100;} */
#navi {border-bottom:1px solid #EEEEEE;  background:#fff; z-index:100;}
.tab-fog { background: -webkit-linear-gradient(0deg,rgba(255,255,255,0),#fff); height: 40px; position: absolute; pointer-events: none; right: 0; top: 0; width: 24px; z-index: 2;  display:none;}
.navi-box {}
.navi-box ul {display:flex; justify-content: space-around; align-items: center;}
.navi-box ul li {display:flex; position:relative; display:flex; align-items: center; height: 80px;}
.navi-box ul li a {display: block;  font-size:16px; font-weight:600; color:#666666;  padding:0 20px;}
.navi-box ul li a::after {content:""; background:#DDDDDD; width:1px; height:15px; position:absolute; right:0; top:50%; transform: translateY(-50%);}
.navi-box ul li:last-child a::after {display:none;}
.navi-box ul li.on a {color:#254C78;}
/* .navi-box ul li.on::after {content:""; background:#254C78; height:1px; width:100%; position:absolute; left:0; bottom:0;} */
.navi-box ul li.on{border-bottom: 1px solid #254C78; box-sizing: border-box;}

.navi-box[data-depth1="1"] ul li {width:25%; text-align:center; justify-content: center;}
.navi-box[data-depth1="2"] ul li {width:25%; text-align:center; justify-content: center;}
.navi-box[data-depth1="3"] ul li {width:25%; text-align:center; justify-content: center;}
.navi-box[data-depth1="5"] ul li {width:50%; text-align:center; justify-content: center;}

/* mo_header */
nav.moheader { display:none; position: fixed; top: 0; left: 0; width: 100%; height: 60px; background-color: none; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index:1000; background:url("/assets/images/mo-bg-color.jpg") no-repeat top center; background-size:cover;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f1e4dc+0,f1e6e0+6,efe6df+10,f2e9e2+10,f2e9e2+12,f3eae5+12,f3eae3+14,f3ece6+14,f4ede7+17,f1ece6+17,f5f2ed+24,f6f5f1+34,f5f6f0+100 */
    background: #f1e4dc; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #f1e4dc 0%, #f1e6e0 6%, #efe6df 10%, #f2e9e2 10%, #f2e9e2 12%, #f3eae5 12%, #f3eae3 14%, #f3ece6 14%, #f4ede7 17%, #f1ece6 17%, #f5f2ed 24%, #f6f5f1 34%, #f5f6f0 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  #f1e4dc 0%,#f1e6e0 6%,#efe6df 10%,#f2e9e2 10%,#f2e9e2 12%,#f3eae5 12%,#f3eae3 14%,#f3ece6 14%,#f4ede7 17%,#f1ece6 17%,#f5f2ed 24%,#f6f5f1 34%,#f5f6f0 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  #f1e4dc 0%,#f1e6e0 6%,#efe6df 10%,#f2e9e2 10%,#f2e9e2 12%,#f3eae5 12%,#f3eae3 14%,#f3ece6 14%,#f4ede7 17%,#f1ece6 17%,#f5f2ed 24%,#f6f5f1 34%,#f5f6f0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e4dc', endColorstr='#f5f6f0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    background:#fff; box-shadow: rgb(0 0 0 / 20%) 3px 3px 10px;
    }
    nav.moheader.on {background:#fff;}
    nav.on .logo img.blue {display:inline;}
    nav.on .logo img.white {display:none;}
    nav.on .lang-dropbox .lang-dropbox-name {color:#000;}
    nav.on .toggle span, nav.on .toggle span:before, nav.on .toggle span:after {background:#000;}
    nav.on.is-visible .toggle span, nav.on.is-visible .toggle span:before, nav.on.is-visible .toggle span:after {background:#fff;}
    nav.on.is-visible .toggle span {background-color:transparent;}
    
    nav.moheader.is-visible {background:#fff;}
    nav.moheader.is-visible .logo .white {display:none;}
    nav.moheader.is-visible .logo .blue {display:inline;}
    
    .menu-container { position: relative; -webkit-transform: translateX(0); transform: translateX(0); transition: -webkit-transform 0.25s ease-out; transition: transform 0.25s ease-out; transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out; }
    .view-submenu .menu-container { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
    
    .mo-close {display:none; position:absolute; right:10px; top:65px; z-index:99; padding:10px; cursor:pointer;}
    .is-visible .mo-close {display:block; display:none;}
    
    nav > div > ul{backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
    nav ul { position: absolute; top: 60px; padding: 6px; width: 100%; height: 508px; height:100vh; color: #ededed; background-color: #313131; background: transparent; /* Note: currently only Safari supports backdrop-filter 27px 0.2 */ background-color: rgba(255, 255, 255, 0.7); /*padding-right:100px;*/}
    nav ul.menu .submenu{backdrop-filter: none;}
    nav ul li a { opacity: 0; display: block; padding: 16px 12px; position: relative; cursor: pointer; text-decoration: none; color: #474645; font-size:15px; font-weight:500; border-radius: 3px; -webkit-transform: translateY(12px); transform: translateY(12px); transition: opacity 0.15s 0.1s ease-out, -webkit-transform 0.15s 0.1s ease-out; transition: opacity 0.15s 0.1s ease-out, transform 0.15s 0.1s ease-out; transition: opacity 0.15s 0.1s ease-out, transform 0.15s 0.1s ease-out, -webkit-transform 0.15s 0.1s ease-out; }
    nav ul li.has-children:first-child {margin-top:10px;}
    nav ul li.has-children span { position: absolute; top: 0; right: 0; bottom: 0; margin: auto; padding: 12px 16px; text-indent: -9999px; }
    nav ul li.has-children span:after { content: ""; position: absolute; top: 0; right: 12px; bottom: 0; margin: auto; padding: 4px; width: 0px; height: 0px; cursor: pointer; font-size: 0; border-bottom: 2px solid #474645; border-right: 2px solid #474645; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
    nav ul li.has-children span:hover:after { border-color: #474645; }
    
    nav .menu { opacity: 0; transition: background-color 0.25s ease-out, opacity 0.15s ease-out; }
    nav .menu.is-visible { opacity: 1; }
    nav .menu.is-visible li a { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
    nav .menu.is-visible li a.on {    color: #546ef2;}
    nav .view-submenu .menu { background-color: #3e3e3e; }
    nav .view-submenu .menu > li > a { opacity: 0; transition: opacity 0.15s ease-out; }
    
    .submenu { position: absolute; top: 0; left: 100%; background-color: rgb(255 255 255 / 98%); height:100%; overflow-y:scroll;}
    .submenu li { margin-left: 60px; margin-left:10px;}
    .submenu .tit {z-index:10; font-size: 15px; color: #474645; display: block; padding: 10px 12px; position: relative; font-weight:500; display: flex; align-items: center; height:50px; padding-left:65px;}
    
    .hide-submenu { position: absolute; top: 0; top:30px; left: 0; width: 60px; height: 100vh; height:auto; cursor: pointer; background-color: #313131; transition: background-color 0.25s ease-out; z-index:20; }
    .hide-submenu:before {
        opacity: 0;
        content: "";
        position: absolute;
        top: 0;
        right: 12px;
        bottom: 0;
        margin: auto;
        padding: 4px;
        width: 6px;
        height: 6px;
        cursor: pointer;
        font-size: 0;
        border-bottom: 2px solid #25316d;
        border-right: 2px solid #25316d;
        -webkit-transform: rotate(135deg);
                transform: rotate(135deg);
        left: 0;
        right: -6px;
        transition: opacity 0.1s ease-out;
    }
    .view-submenu .hide-submenu { background-color: #fff; }
    .view-submenu .hide-submenu:before { opacity: 1; transition: opacity 0.15s 0.3s ease-out; }
    
    .toggle { position: absolute; display: flex; align-items: center; top: 0; right: 0px; bottom: 0; margin: auto; cursor: pointer; padding:0 20px;}
    .toggle span { position: relative; align-self: center; font-size: 0; width: 26px; height: 2px; background-color: #000; border-radius: 100px; transition: background-color 0.2s ease-out; }
    .toggle span:before, .toggle span:after { content: ""; position: absolute; width: 100%; height: 100%; background-color: #000; border-radius: 100px; transition: -webkit-transform .2s ease-out; transition: transform .2s ease-out; transition: transform .2s ease-out, -webkit-transform .2s ease-out; }
    .toggle span:before { bottom: calc(100% + 6px); }
    .toggle span:after { top: calc(100% + 6px); }
    .is-visible .toggle {background:#25316d;}
    .is-visible .toggle span { background-color: transparent; }
    .is-visible .toggle span:before {bottom: auto; -webkit-transform: rotate(45deg); transform: rotate(45deg); background:#fff;}
    .is-visible .toggle span:after { top: auto; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); background:#fff;}
    nav.is-visible .util {display:block}
    
    .visually-hidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
    
    
    nav .logo {position:absolute; left:20px; top:50%; transform:translate(0,-50%); width:auto; height:50px;}
    nav .logo img {max-width:100%; max-height:100%;}
    nav .logo img.blue {display:inline;}
    nav .logo img.white {display:none;}
    nav .util {position:absolute; right:76px; top:15px; display:none;}
    nav .profile-dropbox {position:relative; cursor:pointer; display: inline-block; vertical-align: top; z-index:1001;}
    nav .profile-dropbox .profile-dropbox-name {font-size:14px; color:#6D3625; height:33px; line-height:33px; padding-left:14px; background:none; position:relative; padding-right:20px; display:flex; align-items: center; justify-content: center; align-content: center;}
    nav .profile-dropbox .profile-dropbox-name img {max-width:100%;}
    nav .profile-dropbox .profile-dropbox-name:after {content:"\f0dd"; font-family: 'Font Awesome 5 Pro'; font-weight:900; position:absolute; right:5px; top:6px; line-height:1; font-size:14px; display: inline-block; /*transform:translateY(-50%);*/}
    nav .profile-dropbox.on .profile-dropbox-name:after {content:"\f0de"; top:11px;}
    nav .profile-dropbox .profile-dropbox-value {display:none; position:absolute; right:0; top:45px; width:100%; min-width:110px; /*border:1px solid #465B82;*/ border-radius:5px; background:#6D3625; overflow:hidden;}
    nav .profile-dropbox .profile-dropbox-value .value {width:100%;}
    nav .profile-dropbox .profile-dropbox-value .value a {font-size:14px; color:#fff; line-height:33px; width:100%; display: inline-block; /*padding:0 !important; padding-left:14px !important;*/ text-align:center;}
    nav .profile-dropbox .profile-dropbox-value .value a:hover {background:#4c1212;}
    nav .profile-dropbox .profile-dropbox-value .value a:after {content:none !Important;}
    
    nav .lang-dropbox {position:relative; cursor:pointer; display: inline-block; vertical-align: top; z-index:1001;}
    nav .lang-dropbox .lang-dropbox-name {font-size:14px; color:#fff; height:33px; line-height:33px;  padding-left:14px; padding-right:20px; background:none; position:relative;}
    nav .lang-dropbox .lang-dropbox-name:after {content:"\f0dd"; font-family: 'Font Awesome 5 Pro'; font-weight:900; position:absolute; right:5px; top:6px; line-height:1; font-size:14px; display: inline-block; /*transform:translateY(-50%);*/}
    nav .lang-dropbox.on .lang-dropbox-name:after {content:"\f0de"; top:11px;}
    nav .lang-dropbox .lang-dropbox-value {display:none; position:absolute; right:0; top:45px; width:100%; min-width:80px; /*border:1px solid #465B82;*/ border-radius:5px; background:#25316d; overflow:hidden;}
    nav .lang-dropbox .lang-dropbox-value .value {width:100%;}
    nav .lang-dropbox .lang-dropbox-value .value a {font-size:14px; color:#fff; line-height:33px; width:100%; display: inline-block; /*padding:0 !important; padding-left:14px !important;*/ text-align:center;}
    nav .lang-dropbox .lang-dropbox-value .value a:hover {background:#000;}
    nav .lang-dropbox .lang-dropbox-value .value a:after {content:none !Important;}
    
    .has-children dl {display:none; margin-top:0;}
    .has-children dl dd {text-align:left; margin-bottom:0;}
    .has-children dl dd:last-child {margin-bottom:0;}
    .has-children dl dd > a {color:#999999; font-size:14px; line-height:20px; font-weight:500; padding: 10px 12px 10px 25px;}
    .has-children ul.lang li > a {color:#ccc; font-weight:600;}
    .has-children ul.lang li > a.on {color:#FF9900;}
    .has-children ul li[data-sub="on"] > a {position:relative;}
    .has-children ul li[data-sub="on"] > a::after {content:"\f13a"; font-family: "Font Awesome 6 Pro"; font-weight:900; font-size:16px; color:#CCCCCC; transition:0.5s; margin-left:10px; position:relative; display:inline-block; display: none;}
    .has-children ul li[data-sub="on"].on > a::after {transform: rotate(180deg);}
    .has-children ul li[data-sub="link"] > a::after {content:"\f08e"; font-family: "Font Awesome 6 Pro"; font-weight: 300; font-size:16px; color:#CCCCCC; margin-left:10px;}
    
    
    nav.is-visible .lang-dropbox .lang-dropbox-name {color:#25316d;}


/* footer */
.footer-contact {height:100px; background:#F9F9F9; margin-top:150px;}
.footer-contact.pg5-1 {display:none;}
.footer-contact .fc-flex {display:flex; height:100px;     justify-content: space-between; align-items: center;}
.footer-contact .left {display:flex; align-items: center;}
.footer-contact .left svg {fill:#254C78; stroke:#254C78; margin-right:15px;}
.footer-contact .right {}
.footer-contact .right button {background:#254C78; border-radius:23px; height:46px; width:186px; text-align:Center; cursor:pointer; outline:none; font-size:16px; font-weight:700; color:#fff;}
footer {}
footer.pg5-1 {border-top:1px solid #EEEEEE;}
footer .con {position:relative;}
/* footer .con::before {content:""; height:10px; width:200px; background:red; position:absolute; left:0; top:-10px;} */
footer .con::after {content:""; display:block; clear:both;}
footer .left {position:relative; padding-left:270px;}
footer .left .flogo {width:170px; position:absolute; left:0; top:0;}
footer .left .bot-list {margin-top:35px;}
footer .left .bot-list ul {text-align:left; margin:0 -20px;}
footer .left .bot-list ul li {display:inline-block; margin:0 20px; text-align:center; font-size:15px; line-height:20px; color:#666666; position:relative; margin-bottom:10px; font-weight:500;}
footer .left .bot-list ul li::after {content:""; position:absolute; right:-20px; top:50%; transform:translateY(-50%); width:1px; height:12px; background:#ddd;}
footer .left .bot-list ul li:nth-child(5)::after {content:none;}
footer .left .bot-list ul li:last-child::after {content:none;}
footer .copyright {color:#999999; font-size:14px; line-height:20px; margin-top:15px; padding-bottom:35px;}
footer .f-link-box {display:flex; justify-content: flex-start; align-items: center; align-content: center; margin-bottom:20px; margin-top:10px;} 
footer .f-link-box:after {content:""; display:block; clear:both;}
footer .f-link-box div {float:left; display:flex; justify-content: center; align-items: center; align-content: center;}
footer .f-link-box div + div {margin-left:5px;}
footer .right {position:absolute; right:0; bottom:0; background:#FBFBFB; width: 315px;}
footer .right .link-list {padding:24px 0 18px;}
footer .right .link-list ul {}
footer .right .link-list ul li {}
footer .right .link-list ul li a {font-size:16px; font-weight:600; line-height:20px; display:flex; position:relative; padding:16px 60px 16px 36px; cursor:pointer;}
footer .right .link-list ul li a::after {content:""; background:url("/assets/images/footer-link-arr.png") no-repeat center center; width:6px; height: 11px; background-size:contain; position:absolute; right:35px; top:50%; transform: translateY(-50%);}
footer .right .link-list ul li a:hover {background:rgb(0 0 0 / 3%);}
footer .right .link-list ul li.red a {color:#DC0000;}
footer br.mo {display:none;}

/* 추가 */
#wrap.black {background:#212121;}
#wrap.black .sub-page-wrap {padding-top:0;}
#wrap.black .rnb {border-bottom-color:#444444;}
#wrap.black .rnb dt {border-top-color:#444444; border-bottom-color:#333333; color:#FFFFFF;}
#wrap.black .rnb dd {background:#212121;}
#wrap.black .rnb dd a {color:#BBBBBB;}
#wrap.black .rnb dd.on a{color:#D5D5D5;}

#footer.sub-black {border-top:1px solid #414141; margin-top:40px;}

#footer.sub {background:#fff; margin-top:0;}
#footer.sub .companyinfo .col {color:#555555;}
#footer.sub .companyinfo .col span {color:#555555;}
#footer.sub .fsitemap dl dt a {color:#666666;}
#footer.sub .fbot {border-color:#E4E4E4;}
#footer.sub .ftop .flogo {opacity:0.25;}

.footer-contact.main {display:none;}
.olny-main-footer {display:none; background:#FBFBFB; border-bottom:1px solid #EEEEEE;}
.olny-main-footer.main {display:block;}
.olny-main-footer .con {padding-left:180px; position:relative;}
.olny-main-footer .left {background:#254C78; position:absolute; left:0; top:0; width:180px; height:100px; display:inline-flex; align-items: center; z-index:1;}
.olny-main-footer .left::before {content:""; position:absolute; right:0; top:0; height:100px; width:9999px; background:#254C78; z-index:-1;}
.olny-main-footer .left .btn {color:#FFFFFF; font-size:18px; font-weight:600;}
.olny-main-footer .left .btn img {width:18px; margin-right:12px;}
.olny-main-footer .right {}
.olny-main-footer .right ul {display:flex; height:100px;     justify-content: flex-end; align-items: center;}
.olny-main-footer .right ul li {margin-right:108px;}
.olny-main-footer .right ul li:last-child {margin-right:0;}

.footer-contact .left{line-height: 24px;}


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

    
    .sub-page-wrap .con{width: 100%;padding: 0 5%; box-sizing: border-box;}
    #navi .con{width: 100%;}

    
  /* 핵심가치 */
  .vision .cre-flex dl,
  .vision .sus-flex dl{width: 48%;}

}


@media screen and (max-width: 1280px){
    /* .navi-box ul{height: 60px;} */

    .olny-main-footer .left,
    .olny-main-footer .left::before{height: 35px; width: 100%;}
    .container.main-container{padding-top: 60px;}


    /* .container.main-container{padding-top: 60px;} */
}




@media screen and (max-width: 768px){
    #navi{border-bottom: none;}
    .navi-box ul{flex-wrap: wrap;}
    .navi-box[data-depth1="1"] ul li,
    .navi-box[data-depth1="2"] ul li,
    .navi-box[data-depth1="3"] ul li{width: 50%;}
    
    .navi-box ul li {height: 50px;}
    .navi-box ul li a{padding: 0; font-size: 14px;}
    

    
    .navi-box ul li:nth-child(odd){border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;}
    .navi-box ul li:nth-child(even){border-bottom: 1px solid #ddd;}
    /* .navi-box ul li{border: 1px solid #ddd;} */
    .navi-box ul li a::after{display: none;}
    .navi-box ul li.on{background-color: #254C78;}
    .navi-box ul li.on a{color: #fff;}

    .olny-main-footer.main{margin-top: 50px;}

    .footer-contact{padding: 20px 0; height: auto; margin-top: 100px;}
    .footer-contact .fc-flex{flex-wrap: wrap;}
    .footer-contact .left,
    .footer-contact .right{margin: 0 auto;}

    .footer-contact .right button{height: 35px; width: 150px;}
    
}