@charset "utf-8";
/* CSS Document */
.box0{ width:94%; margin:0 auto; max-width:1920px}
.box0L{ width:97%; margin-left:auto}
.box1{ width:1400px; margin:0 auto}

.PC { display:block;}
.PHONE { display:none;}

html:not(.pop) body{ display:flex; flex-direction:column;}
html:not(.pop) body{ min-height:100vh; min-height:calc(var(--vh, 1vh) * 100); overflow: hidden;}
#footer{ margin-top:auto}

.gnb li.m_hide{ display:none}
.gnb .layer{ display:none}
.hiddenBtn{ display:none}
.gnb li.nOpen .arrow:before{content:"\e980" !important}

.bgObj{ opacity:.05; position: absolute; width:40vw}
.bgObj.red{ right:80%; top:0; transform:rotate(60deg) scale(.7)}
.bgObj.blue{ left:75%; bottom:5%}
.bgObj.red.s1{ transform:rotate(60deg) scale(.6) translate(-40%, 10%)}
.bgObj.blue.s1{transform:translateY(30%) scale(.6)}
.bgObj .in{ padding-bottom:71.9225%; background-repeat:no-repeat; background-size:contain;}
.bgObj.red .in{ background-image:url(../images/inc/bg_red.svg)}
.bgObj.blue .in{ background-image:url(../images/inc/bg_blue.svg)}

/**/
#skipNav{position: relative; z-index:1001}
#skipNav a{ position: fixed; left:0; width: 100%; background:#002144; color:#fff; text-align:center; top:0; transform:translateY(-100%); line-height:3em}
#skipNav a:focus, 
#skipNav a:active{transform:translateY(0)}

#header{ position: fixed; left:0; top:0; width:100%; z-index:1000}
.scroll #header{ box-shadow:0 1em 1em rgba(0,0,0,.1)}
#header .site_wrap{ background:#0060ae; color:#fff; position:relative; z-index:10}
#header .site_wrap > .flex{ gap:0 1em}
#header .site_wrap .wrapH{ height:3em}
#header .site_wrap .site{ position:relative; height:100%; margin-right:3em}
#header .site_wrap .site:before{ content:""; position:absolute; right:100%; height:100%; width:100vw; background:#ec1a3b; transform:skewX(-30deg) translateX(1px)}
#header .site_wrap .site .list{ display:flex; height:100%}
#header .site_wrap .site .list > li{ flex:1 1 1%; max-width:12em; position:relative; height:100%}
#header .site_wrap .site .list > li.on{ order:-1; z-index:1}
#header .site_wrap .site .list > li.on:after{ content:""; position: absolute; width:1em; height:.5em; transform:translateX(0%); right:0; bottom:0; background:url(../images/inc/tab_round_R.svg) no-repeat; background-size:100% auto}
#header .site_wrap .site .list > li > a{ text-align:center; position:relative; height:100%}
#header .site_wrap .site .list > li > a:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; border-right:1px solid rgba(255,255,255,.3); transform:skewX(-30deg); border-top-right-radius:.75em; transition:.3s}
#header .site_wrap .site .list > li > a:after{ content:"\e980"; font-family:xeicon; position:absolute; right:.375em; top:.375em; font-size:.75em; border-radius:50%; display:none}
#header .site_wrap .site .list > li > a .t1{ width:100%; font-size:.938em; position:relative; z-index:1}
#header .site_wrap .site .list > li > a:hover:before,
#header .site_wrap .site .list > li > a:focus:before{ background:rgba(0,0,0,.1)}
#header .site_wrap .site .list > li > a:hover:after,
#header .site_wrap .site .list > li > a:focus:after{ display:block}
#header .site_wrap .site .list > li.on > a{ color:#fff; font-weight:500}
#header .site_wrap .site .list > li.on > a:before{ background:#ec1a3b }
#header .site_wrap .site .list > li.on > a:after{ content:"\eb0d"; display:block; transform:scale(.625)}
#header .site_wrap .etc{ gap:0 1em}
#header .site_wrap .etc > li > a{ opacity:.7}
#header .site_wrap .etc > li > a .t1{ font-size:.875em}
#header .site_wrap .etc > li > a .ico{ font-size:1em; margin-left:.25em}
#header .site_wrap .etc > li > a:focus,
#header .site_wrap .etc > li > a:hover{ opacity:1}
#header .site_wrap .etc .member_btn { font-size:1.25em; padding:0 1.25em !important;}
#header .site_wrap .lang .langBtn{ padding:0 1em}
#header .site_wrap .lang .langBtn .ico{ font-size:1.125em; margin-right:.25em}
#header .site_wrap .lang .langBtn .t1{ font-size:.813em}
#header .site_wrap .lang .langBtn .t2{ font-size:.875em; font-weight:700; margin-left:.25em}
#header .site_wrap .lang .langBtn .arrow{ font-size:1em; margin-left:.5em; transition:.3s}
#header .site_wrap .lang .list{ position:absolute; left:50%; transform:translateX(-50%); top:100%; width:100%; padding:.5em; background:#fff; box-sizing:border-box; border-radius:0 0 1em 1em; box-shadow:0 .75em 1em rgba(0,0,0,.1); opacity:0; visibility:hidden; color:#999; transition:.3s}
#header .site_wrap .lang .list > li > a{ display:block; padding:.25em .5em; position:relative; overflow:hidden}
#header .site_wrap .lang .list > li > a .t1{ font-size:.813em; transition:.3s}
#header .site_wrap .etc .lang .list > li > a .t1 { font-size:.913em; transition:.3s;}
#header .site_wrap .lang .list > li > a .ico{ opacity:0; margin-right:.25em}
#header .site_wrap .lang .list > li > a .arrow{ font-size:.75em; position:absolute; right:-2em; top:50%; transform:translateY(-50%); transition:.3s}
#header .site_wrap .lang .list > li > a.on .t1{ color:#111; font-weight:500}
#header .site_wrap .lang .list > li > a:focus,
#header .site_wrap .lang .list > li > a:hover .t1{ color:#111}
#header .site_wrap .lang .list > li > a.on .ico{ opacity:1}
#header .site_wrap .lang .list > li > a:not(.on):focus .arrow,
#header .site_wrap .lang .list > li > a:not(.on):hover .arrow{ right:1em;}
#header .site_wrap .lang_wrap.act .langBtn,
#header.langOn .site_wrap .lang .langBtn{ background:#fff; color:#0060ae}
#header .site_wrap .lang_wrap.act .langBtn .arrow,
#header.langOn  .site_wrap .lang .langBtn .arrow{ transform:rotate(180deg)}
#header .site_wrap .lang_wrap.act .list,
#header.langOn  .site_wrap .lang .list{ opacity:1; visibility:visible}

#header .top_wrap{ background:#fff; position:relative}
#header .top_wrap > .flex{ gap:0 3em}
#header .top_wrap .wrapH,
#header .top_wrap .gnb_wrap .gnb > li .dp1,
#header .top_wrap .gnb_wrap2 .gnb > li .dp1{ height:5em }
#header .top_wrap .logo > a{ height:2.5em; overflow:hidden}
#header .top_wrap .logo .in{ display:block; height:100%; transition:.3s}
#header .top_wrap .logo img{ display:block; height:100%}
#header .top_wrap .gnb_wrap{ position:absolute; top:0; left:50%; width:100%; padding:0 15em 0 25em; box-sizing:border-box; transform:translateX(-50%); z-index:1}
#header .top_wrap .gnb_wrap .gnb{ position:relative; justify-content:center}
#header .top_wrap .gnb_wrap .gnb:before{ content:""; position: absolute; left:0; top:5em; transform:translateX(-50%); width:200vw; height:0; background:#fff; z-index:-1; border-top:1px solid transparent; box-sizing:border-box; box-shadow:0 3em 3em rgba(0,0,0,.2)}
#header .top_wrap .gnb_wrap .gnb > li{ position:relative; flex-direction:column; width:10.25em; transition:.3s}
#header .top_wrap .gnb_wrap .gnb > li:not(.m_hide){display:flex;}
#header .top_wrap .gnb_wrap .gnb > li a{ line-height:1.1}
#header .top_wrap .gnb_wrap .gnb > li .dp1:not(.layer){ width:100%; box-sizing:border-box; position:relative; display:flex; align-items:center; justify-content:center}
#header .top_wrap .gnb_wrap .gnb > li .dp1:after{ content:""; position:absolute; left:1px; bottom:-1px; width:calc(100% - 2px); height:.25em; background:#3490e5; transform:scaleX(0); transition:.3s}
#header .top_wrap .gnb_wrap .gnb > li.act .dp1,
#header .top_wrap .gnb_wrap .gnb > li.on .dp1{ color:#0060ae}
#header .top_wrap .gnb_wrap .gnb > li.act .dp1:after,
#header .top_wrap .gnb_wrap .gnb > li.on .dp1:after{ transform:scaleX(1)}
#header .top_wrap .gnb_wrap .gnb > li .dp1 .va{ font-size:1.25em; font-weight:500}
#header .top_wrap .gnb_wrap .gnb > li.on .dp1{ color:#0060ae}
#header .top_wrap .gnb_wrap .gnb > li .dp2{ width:100%; flex:1 1 0%; min-height:0; box-sizing:border-box; display:block; padding:1em 0 1.5em; opacity:0; visibility:hidden; border-left:1px solid transparent; border-right:1px solid #eee; position:absolute}
#header .top_wrap .gnb_wrap .gnb > li:first-child .dp2{ border-left-color:#eee}
#header .top_wrap .gnb_wrap .gnb > li .dp2:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; transition:.3s}
#header .top_wrap .gnb_wrap .gnb > li.act .dp2{ color:#fff; border-left-color:transparent}
#header .top_wrap .gnb_wrap .gnb > li.act .dp2:before{ background:#0060ae;}
#header .top_wrap .gnb_wrap .gnb > li .dp2 > li{ position:relative}
#header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a{ position:relative; padding:.5em; text-align:left}
#header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a:before{ content:""; position:absolute; left:-.25em; top:0; width:100%; height:100%; transition:.3s}
#header .top_wrap .gnb_wrap .gnb > li .dp2 > li.act > a:before{ background:#002144}
#header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a .va{ position:relative; font-size:.938em}
#header .top_wrap .gnb_wrap .gnb > li .dp3{ display:none}
#header .top_wrap .gnb_wrap.act .gnb:before{ border-top-color:#eee; height:calc(100% - 5em); transition:height .3s; transition-timing-function:ease-in-out; transition-delay:.2s}
#header .top_wrap .gnb_wrap.act .gnb > li .dp2{ position:relative; opacity:1; visibility:visible; transition:opacity .3s; transition-delay:.4s}

#header .top_wrap .gnb_wrap2{ flex:1 1 0%; min-width:0; box-sizing:border-box; max-width:60em}
#header .top_wrap .gnb_wrap2 .gnb{ justify-content:center; width:100%}
#header .top_wrap .gnb_wrap2 .gnb > li{ flex:1 1 auto; box-sizing:border-box}
#header .top_wrap .gnb_wrap2 .gnb > li:not(.m_hide){display:flex; justify-content:center;}
#header .top_wrap .gnb_wrap2 .gnb > li a{ line-height:1.1}
#header .top_wrap .gnb_wrap2 .gnb > li .dp1:not(.layer){ width:100%; box-sizing:border-box; position:relative; display:flex; align-items:center; justify-content:center}
#header .top_wrap .gnb_wrap2 .gnb > li .dp1:after{ content:""; position:absolute; left:1px; bottom:-1px; width:calc(100% - 2px); height:.25em; background:#3490e5; transform:scaleX(0); transition:.3s}
#header .top_wrap .gnb_wrap2 .gnb > li.act .dp1,
#header .top_wrap .gnb_wrap2 .gnb > li.on .dp1{ color:#0060ae}
#header .top_wrap .gnb_wrap2 .gnb > li.act .dp1:after,
#header .top_wrap .gnb_wrap2 .gnb > li.on .dp1:after{ transform:scaleX(1)}
#header .top_wrap .gnb_wrap2 .gnb > li .dp1 .va{ font-size:1.25em; font-weight:500}
#header .top_wrap .gnb_wrap2 .gnb > li.on .dp1{ color:#0060ae}
#header .top_wrap .gnb_wrap2 .gnb > li .dp2{ box-sizing:border-box; display:flex; gap:1em .5em; flex-wrap:wrap; padding:2em 5% 2em 34em; opacity:0; visibility:hidden; position:absolute; left:50%; width:100vw; transform:translateX(-50%); top:100%; min-height:16em}
#header .top_wrap .gnb_wrap2 .gnb > li .dp2:before{ content:""; position:absolute; left:0; top:0; width:100%; height:0; background:#fff; box-sizing:border-box; box-shadow:0 3em 3em rgba(0,0,0,.2); transition:.3s;}
#header .top_wrap .gnb_wrap2 .gnb > li .dp2:after{ content: attr(data-tit); position:absolute; width:14em; background:url(../images/inc/bg_blue.svg) no-repeat right 1em; background-size:.5em auto; height:0; top:0; left:2%; box-sizing:border-box; padding:1.25em .75em; font-size:1.55em; font-weight:700; text-align:right; opacity:0; transition:.3s}
#header .top_wrap .gnb_wrap2 .gnb > li .dp2 > li{ position:relative; width:15em; flex:0 0 auto; opacity:0; min-height:6em}
#header .top_wrap .gnb_wrap2 .gnb > li .dp2 > li > a{ position:relative; padding:.5em; text-align:left; box-sizing:border-box; padding:.75em; border:1px solid #eee; border-radius:.5em; transition:.3s}
#header .top_wrap .gnb_wrap2 .gnb > li .dp2 > li.act > a{ background:#002144; color:#fff; border-color:transparent}
#header .top_wrap .gnb_wrap2 .gnb > li .dp2 > li > a .va{ position:relative; font-size:1em; font-weight:500}
#header .top_wrap .gnb_wrap2 .gnb > li .dp3{ padding:.75em 0; display:block}
#header .top_wrap .gnb_wrap2 .gnb > li .dp3 > li > a{ text-align:left; padding:.5em .75em; padding-left:1em; position:relative; color:#666; transition:.3s}
#header .top_wrap .gnb_wrap2 .gnb > li .dp3 > li > a .va{ display:flex; gap:0 .5em; align-items:center;}
#header .top_wrap .gnb_wrap2 .gnb > li .dp3 > li > a .arrow{ font-size:1em}
#header .top_wrap .gnb_wrap2 .gnb > li .dp3 > li > a:before{ content:""; position:absolute; left:.25em; top:1em; width:.25em; height:.25em; background:#ddd}
#header .top_wrap .gnb_wrap2 .gnb > li .dp3 > li > a:hover,
#header .top_wrap .gnb_wrap2 .gnb > li .dp3 > li > a:focus{ color:#0060ae}
#header .top_wrap .gnb_wrap2 .gnb > li .dp3 > li > a:hover:before,
#header .top_wrap .gnb_wrap2 .gnb > li .dp3 > li > a:focus:before{ background:#0060ae}
#header .top_wrap .gnb_wrap2 .gnb > li .dp4{ display:none}
#header .top_wrap .gnb_wrap2 .gnb > li.act .dp2{ opacity:1; visibility:visible; transition:opacity .3s}
#header .top_wrap .gnb_wrap2 .gnb > li.act .dp2:before,
#header .top_wrap .gnb_wrap2 .gnb > li.act .dp2:after{ height:100%; opacity:1; transition:.3s; transition-timing-function:ease-in-out; transition-delay:.1s}
#header .top_wrap .gnb_wrap2 .gnb > li.act .dp2 > li{ opacity:1; transition:.3s; transition-delay:.2s}

#header .top_wrap .gnb_wrap2 .gnb > li.m_about .dp2 > li > a {min-height: 4em;}
#header .top_wrap .gnb_wrap2 .gnb > li.m_business .dp2 > li > a {min-height: 4em;}

#header .top_wrap .util > li > a{ width:4em}
#header .top_wrap .util > li > a .xi{ font-size:2em}
#header .top_wrap .util > li.search > a .xi{ font-size:1.625em}
#header .top_wrap .util > li.search .wrap_in{ position:absolute; width:30em; right:0; top:100%; background:#fff; box-sizing:border-box; padding:3em; padding-bottom:5em; box-shadow:-1em 1em 1em rgba(0,0,0,.1); opacity:0; transform:translateX(100%); visibility:hidden}
#header .top_wrap .util > li.search.on .wrap_in{ opacity:1; transform:translateX(0); visibility:visible; transition:.3s}
#header .top_wrap .util > li.search .searchBtn .xi:before{content:"\e97a"}
#header .top_wrap .util > li.search.on .searchBtn .xi:before{content:"\e9af"}
#header .top_wrap .util > li.search.on .searchBtn .hideT.close{ display:block}
#header .top_wrap .util > li.search.on .searchBtn .hideT.open{ display:none}
#header .top_wrap .util > li.search .wrap_in .wrap_tit{ font-weight:700; font-size:2.25em}
#header .top_wrap .util > li.search .wrap_in .wrap_tt{ color:#666}
#header .top_wrap .util > li.search .wrap_in .wrap_inp{ margin:2em 0 4em 0; position:relative; border-bottom:2px solid #000}
#header .top_wrap .util > li.search .wrap_in .wrap_inp label{ display:block}
#header .top_wrap .util > li.search .wrap_in .wrap_inp .inp{ width:100%; box-sizing:border-box; padding:1em .5em; border:none; font-size:1.063em}
#header .top_wrap .util > li.search .wrap_in .wrap_inp .inp:focus ~ .line{ width:100%}
#header .top_wrap .util > li.search .wrap_in .wrap_inp .btn{ width:3em; text-align:center; border:none; background:none}
#header .top_wrap .util > li.search .wrap_in .wrap_inp .btn .xi{ font-size:1.75em}
#header .top_wrap .util > li.search .wrap_in .keyword .tit{ font-weight:700; font-size:1.125em; color:#0060ae; margin-bottom:1em}
.keywordList{ gap:1em 2em}
.keywordList > li > a:before{ content:"#"}
.keywordList > li > a:hover,
.keywordList > li > a:focus{ text-decoration:underline}

#header .all_wrap .all{ position:fixed; right:0; top:0; width:100%; height:100vh; opacity:0; visibility:hidden; z-index:1; color:#333; flex-direction:column; background:rgba(0,0,0,.7);}
#header .all_wrap .all .wrap_bg{ position:relative; opacity:0}
#header .all_wrap .all .wrap_bg .btn{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:3em; line-height:3em; background:#fff; border-radius:50%; color:#1a4e87; text-align:center}
#header .all_wrap .all .wrap_con{ height:calc(100% - 5em); max-width:94%; min-width:90%; padding:2em 0 0 0; box-sizing:border-box; margin:0 auto; background:#fff; border-radius:2em 2em 0 0; transform:translateY(5em)}
#header .all_wrap .all .wrap_con .wrap_in{ height:100%; box-sizing:border-box; padding:0 2em}
#header .all_wrap .all .top{ padding:1em 0}
#header .all_wrap .all .top .logo{ gap:0 1.5em;}
#header .all_wrap .all .top .logo img{ height:2em;}
#header .all_wrap .all .top .logo .tt{ font-size:1.375em; color:#000; font-weight:700;}
#header .all_wrap .all .top .lang{ gap:0 2em}
#header .all_wrap .all .top .lang > li > a{ font-weight:700; font-size:1.125em; color:#999; padding:.25em}
#header .all_wrap .all .top .lang > li > a.on{ color:#0060ae; position:relative}
#header .all_wrap .all .top .lang > li > a.on:before{ content:""; position:absolute; left:0; bottom:0; width:100%; height:.25em; background:#0060ae; opacity:.2; z-index:-1}
#header .all_wrap .all .top .lang:hover{ opacity:1}
#header .all_wrap .all .bottom{ padding:1.5em 0; box-sizing:border-box}
#header .all_wrap .all .bottom .link{ gap:0 2em}
#header .all_wrap .all .bottom .link > li > a{ font-size:.938em; color:#666}
#header .all_wrap .all .bottom .link > li > a.point{ font-weight:500; color:#0060ae}
#header .all_wrap .all .bottom .link > li > a .xi{ font-size:1em; vertical-align:middle}
#header .all_wrap .all .bottom .link > li > a .t1{ font-weight:500}
#header .all_wrap .all .bottom .link > li > a:hover,
#header .all_wrap .all .bottom .link > li > a:focus{ text-decoration:underline}
#header .all_wrap .all .bottom .etc{ margin-top:2em}
#header .all_wrap .all .bottom .etc > li > a{ font-size:.938em; color:#777}
#header .all_wrap .all .menu{ position:relative}
#header .all_wrap .all .menu:before{ content:""; position:absolute; left:0; top:0; width:calc(100% - 1px); height:100%; z-index:-1; box-sizing:border-box; border:1px solid #eee; border-bottom-color:#ddd}
#header .all_wrap .all .gnb{ height:100%; position:relative}
#header .all_wrap .all .gnb ul{ display:block}
#header .all_wrap .all .gnb a{ text-align:left; position:relative; line-height:1.2}
#header .all_wrap .all .gnb li{ position:relative; flex:1 1 1%}
#header .all_wrap .all .gnb a .arrow{ position:absolute; right:.5em; opacity:.5; transition:.3s; font-size:1em}
#header .all_wrap .all .gnb a .arrow:before{ content:"\e907"; font-size:.75em}
#header .all_wrap .all .gnb li.more > a .arrow:before{ content:"\e943"; font-size:1em}
#header .all_wrap .all .gnb > li:not(.m_hide){ display:flex; flex-direction:column}
#header .all_wrap .all .gnb > li .dp1{ padding:0 1em; height:4em; background:#0060ae; box-sizing:border-box; border-right:1px solid rgba(255,255,255,.2); color:#fff}
#header .all_wrap .all .gnb > li .dp1 .va{ font-size:1.25em; font-weight:700}
#header .all_wrap .all .gnb > li .dp1 .arrow{ top:50%; transform:translateY(-50%)}
#header .all_wrap .all .gnb > li .dp2{ flex:1 1 0%; min-height:0; border-left:1px solid transparent; border-right:1px solid #eee; border-bottom:1px solid #eee; padding:1em 0}
#header .all_wrap .all .gnb > li .dp2 > li > a{ padding:.5em 1em; padding-right:2em; font-weight:500; transition:.3s}
#header .all_wrap .all .gnb > li .dp2 > li > a .arrow{ right:.75em; top:.5em}
#header .all_wrap .all .gnb > li .dp2 > li.more > a .arrow:before{ content:"\e942"}
#header .all_wrap .all .gnb > li .dp2 > li.act > a .arrow{ opacity:1}
#header .all_wrap .all .gnb > li .dp2 > li.act > a .va .tt{ text-decoration:underline}
#header .all_wrap .all .gnb > li .dp3{ background:#f5f5f5; margin:0 .5em; border-radius:.5em; padding:.5em; margin-bottom:.5em}
#header .all_wrap .all .gnb > li .dp3 > li > a{ padding:.188em .5em; padding-left:.75em; color:#666; display:flex}
#header .all_wrap .all .gnb > li .dp3 > li > a:before{ content:"-"; position:absolute; left:0; top:.125em; width:auto; height:auto}
#header .all_wrap .all .gnb > li .dp3 > li > a .arrow{ display:none}
#header .all_wrap .all .gnb > li .dp3 > li > a .va{ font-size:.938em}
#header .all_wrap .all .gnb > li .dp3 > li.act > a{ color:#0060ae; font-weight:500}
#header .all_wrap .all .gnb > li.act .dp1{ background:#002144}

.allGnbOn{ overflow-y: hidden}
.allGnbOn body{ overflow-y: scroll}
.allGnbOn #header .top_wrap{ z-index:11}
.allGnbOn #header .all_wrap .all{ opacity:1; visibility:visible}
.allGnbOn #header .all_wrap .all .wrap_bg{ opacity:1; transition:.3s; transition-delay:.2s}
.allGnbOn #header .all_wrap .all .wrap_con{ transform:translateY(0); transition:.3s}

.headerT{ padding-top:7.5em}
.wrapHide{ height:7.5em}
.stickyT{ position:sticky; top:calc(7.5em + 1px); z-index:1}

#footer{ padding-top:8em; z-index:1}
#footer .siteSlider_wrap{ border-top:1px solid #ddd; background:#fff}
#footer .siteSlider_wrap .wrapH{ height:5em}
#footer .siteSlider_wrap .wrap_in{ gap:0 2em}
#footer .siteSlider_wrap .site_tit .t1{ font-weight:700; font-size:1.25em}
#footer .siteSlider .el{ width:auto}
#footer .siteSlider .el .con{ position:relative; padding:1em 2em}
#footer .siteSlider .el .con:before{ content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:1em; background:#ddd}
#footer .siteSlider .el .con .tt{ font-weight:500; color:#666; font-size:1.063em}
#footer .siteSlider .el .con .tt > a{ position:relative}
#footer .siteSlider .el .con .tt > a:after{ content:"\e980"; font-family:xeicon; position:absolute; right:-1.25em; top:-.5em; font-size:.75em; opacity:0}
#footer .siteSlider .el .con .tt > a:focus,
#footer .siteSlider .el .con .tt > a:hover{ color:#111;}
#footer .siteSlider .el .con .tt > a:focus:after,
#footer .siteSlider .el .con .tt > a:hover:after{ opacity:1}
#footer .menu_wrap{ border-top:1px solid #ddd; background:#f5f5f5}
#footer .menu_wrap .wrapH{ height:5em}
#footer .menu_wrap .menu{ gap:0 3em}
#footer .menu_wrap .menu > li > a{ font-size:1.063em; position:relative; font-weight:500; color:#333}
#footer .menu_wrap .menu > li > a:after{ content:"·"; position:absolute; right:-1.5em; top:0}
#footer .menu_wrap .menu > li:last-child > a:after{ display:none}
#footer .menu_wrap .menu > li > a:focus .t1,
#footer .menu_wrap .menu > li > a:hover .t1{ text-decoration:underline}
#footer .menu_wrap .menu > li > a.point{ color:#000; font-weight:700}
#footer .menu_wrap .etc{ margin-left:auto; gap:0 .5em}
#footer .goTop{ width:3em; height:3em; background:#0060ae; color:#fff; box-sizing:border-box; border:2px solid transparent}
#footer .goTop:focus,
#footer .goTop:hover{ background:#fff; border-color:#0060ae; color:#0060ae}
#footer .family{ position:relative; z-index:1}
#footer .family .familyBtn{ height:3em; background:#fff; border:1px solid #ddd; box-sizing:border-box; width:12em; padding:0 1em}
#footer .family .familyBtn .tt{ font-weight:500}
#footer .family .familyBtn .xi{ margin-left:auto; transition:.3s}
#footer .family.on .familyBtn,
#footer .family .familyBtn:focus,
#footer .family .familyBtn:hover{ background:#002144; color:#fff; border-color:transparent}
#footer .family.on .familyBtn .xi{ transform:rotate(135deg)}
#footer .family.on .familyBtn .close{ display:block}
#footer .family.on .familyBtn .open{ display:none}
#footer .family .list{ position:absolute; bottom:100%; left:0; width:100%; padding:1em .5em; box-sizing:border-box; background:#002144; border-bottom:1px solid rgba(255,255,255,.2); color:#fff; opacity:0; visibility:hidden}
#footer .family.on .list{ opacity:1; visibility:visible}
#footer .family.on .list > li.on{ display:none}
#footer .family.on .list > li > a{ position:relative; font-size:.875em; padding:.5em; padding-right:2em; display:block; border-radius:.25em; overflow:hidden}
#footer .family.on .list > li > a:after{ content:"\e980"; font-family:xeicon; position:absolute; right:.5em; top:.625em; opacity:0; transition:.3s}
#footer .family.on .list > li > a:focus,
#footer .family.on .list > li > a:hover{ background:#0060ae}
#footer .family.on .list > li > a:focus:after,
#footer .family.on .list > li > a:hover:after{ opacity:1}
#footer .logo_wrap{ gap:4em}
#footer .logo_wrap .logo{ transform:translateY(-.125em)}
/*#footer .logo_wrap .logo img{ height:2.75em; filter:grayscale(1); opacity:.6}*/
#footer .logo_wrap .logo img{ height:2.75em;}
#footer .info_wrap{ padding:3em 0 4em 0; border-top:1px solid #ddd; background:#fff}
#footer .info_wrap .info > li{ float:left; margin-right:2.5em; margin-bottom:.25em; color:#666}
#footer .info_wrap .info > li.point{ color:#111; font-weight:700}
#footer .info_wrap .info > li.br{ clear:left}
#footer .info_wrap .info > li.copyright{ font-size:.875em; color:#777; text-transform:uppercase; margin-top:1em}
#footer .info_wrap .info:after{ content:""; display:block; clear:both}
.sns .list{ gap:1em}
.sns .list > li > a{ width:2.5em; height:2.5em; background:#f5f5f5; border:1px solid #ddd; border-radius:50%; filter:grayscale(1)}
.sns .list > li > a .icon img{ display:block; width:1em}
.sns .list > li.fb > a{ color:#395498}
.sns .list > li.yt > a{ color:#f70000}
.sns .list > li.ch > a{ color:#f7e409}
.sns .list > li > a:focus,
.sns .list > li > a:hover{ border-color:transparent; color:#fff; filter:grayscale(0)}
.sns .list > li.fb > a:focus,
.sns .list > li.fb > a:hover{ background:#395498;}
.sns .list > li.yt > a:focus,
.sns .list > li.yt > a:hover{ background:#f70000}
.sns .list > li.ch > a:focus,
.sns .list > li.ch > a:hover{ background:#f7e409}
.sns.st1 .list > li > a{ font-size:1.125em; background: #fff; border-color:transparent; box-shadow:0 0 .5em rgba(0,0,0,.1); filter:grayscale(0)}

#footer .gotop.st2{ position:fixed; right:4em; bottom:3em; width:4em; line-height:4em; background:#002144; text-align:center; color:#fff; transition:.3s; border-radius:3em; z-index: 99; opacity:0;transform: translateY(7em);}
.scroll #footer .gotop.st2 {transform: translateY(0); opacity: 1;}
#footer .gotop.st2 .xi{ font-size:1.5em}
#footer .gotop.st2:hover{ background-color:#fff; border: 1px solid #002144; color:#002144;}

#contents .sub_visual{ position:relative}
#contents .sub_visual .wrap_bg{ position:absolute; left:0; top:0; width:100%; height:100%}
#contents .sub_visual .wrap_con{ position:relative; box-sizing:border-box; height:25em;}
#contents .sub_visual .wrap_con .slogan_wrap{ color:#fff; text-align:center}
#contents .sub_visual .wrap_con .slogan_wrap .t1{ font-size:2.25em; font-weight:700; opacity:0; transform: translateY(-1em); transition:1s}
#contents .sub_visual .wrap_con .slogan_wrap .t2{ font-size:1.125em; margin-top:.5em; opacity:0; transform: translateY(1em); transition:2s}
.load #contents .sub_visual .wrap_con .slogan_wrap .t1,
.load #contents .sub_visual .wrap_con .slogan_wrap .t2{ opacity:1; transform: translateY(0)}
#contents .sub_visual .wrap_con .nav_wrap .wrap_in{ position:relative}
#contents .sub_visual .wrap_con .nav_wrap .wrap_in:before{ content:""; position:absolute; right:0; width:100vw; height:100%; background:#fff}
#contents .sub_visual .wrap_con .nav_wrap .wrap_in > *{ position:relative}
#contents .sub_visual .wrap_con .nav_wrap .sub_nav{ gap:0 2em}
#contents .sub_visual .wrap_con .nav_wrap .sub_nav > li{ font-size:1.063em; position:relative}
#contents .sub_visual .wrap_con .nav_wrap .sub_nav > li.home > a{ width:1.5em; height:1.5em; border-radius:50%; background:#0060ae; text-align:center; color:#fff}
#contents .sub_visual .wrap_con .nav_wrap .sub_nav > li.home .xi{ font-size:1em}
#contents .sub_visual .wrap_con .nav_wrap .sub_nav > li:not(.home):before{ content:"\e940"; font-family:xeicon; position:absolute; left:-1.5em; top:50%; transform:translateY(-50%) scale(.8)}
#contents .sub_visual .wrap_con .nav_wrap .sub_nav > li:last-child .tt{ font-weight:500; text-decoration:underline}
#contents .sub_visual .wrap_con .nav_wrap .etc > li > a{ display:flex; align-items:center; justify-content:center; border:1px solid rgba(0,0,0,.1); background:#f5f5f5; width:3.5em; height:3.5em}
#contents .sub_con_wrap{ margin-top:.5em; align-items:flex-start}
#contents .sub_con_wrap .sub_lnb{ width:14em; margin-right:4em}
#contents .sub_con_wrap .sub_lnb .tit{ height:8em; background:#002144; color:#fff; position:relative; overflow:hidden; text-align:center;}
#contents .sub_con_wrap .sub_lnb .tit:before{ content:""; position:absolute; left:-.5em; top:0; width:100%; height:100%; background:url(../images/inc/logoR.svg) no-repeat top center; background-size:100% auto; filter: brightness(60%)}
#contents .sub_con_wrap .sub_lnb .tit .t1{ font-weight:500; font-size:1.5em; position:relative}
#contents .sub_con_wrap .sub_lnb .gnb > li{ width:100%}
#contents .sub_con_wrap .sub_lnb .gnb .dp2{ display:block}
#contents .sub_con_wrap .sub_lnb .gnb .dp2 a{ text-align:left; line-height:1.2}
#contents .sub_con_wrap .sub_lnb .gnb .dp2 > li{ position:relative}
#contents .sub_con_wrap .sub_lnb .gnb .dp2 > li > a{ position:relative; border-bottom:1px solid #ddd}
#contents .sub_con_wrap .sub_lnb .gnb .dp2 > li.more > a.link{ display:none}
#contents .sub_con_wrap .sub_lnb .gnb .dp2 > li.on > a,
#contents .sub_con_wrap .sub_lnb .gnb .dp2 > li.act > a{ color:#0063ae}
#contents .sub_con_wrap .sub_lnb .gnb .dp2 > li > a:before{ display:none}
#contents .sub_con_wrap .sub_lnb .gnb .dp2 > li a:before{ display:none}
#contents .sub_con_wrap .sub_lnb .gnb .dp2 > li .va{ display:flex}
#contents .sub_con_wrap .sub_lnb .gnb .dp2 > li .arrow{ width:1.5em;  padding-top:.125em; margin-left:auto; text-align:center; font-size:.875em; opacity:.5}
#contents .sub_con_wrap .sub_lnb .gnb .dp2 > li > a .va{ padding:1em .25em}
#contents .sub_con_wrap .sub_lnb .gnb .dp2 > li > a .tt{flex:1 1 0%; min-width:0}
#contents .sub_con_wrap .sub_lnb .gnb .dp2 > li.more > .layer{ display:block}
#contents .sub_con_wrap .sub_lnb .gnb .dp2 > li.more > a .arrow:before{ content:"\e913"}
#contents .sub_con_wrap .sub_lnb .gnb .dp2 > li.on > a .arrow:before{content:"\e93f"}
#contents .sub_con_wrap .sub_lnb .gnb .dp2 > li.on.more > a .arrow:before{content:"\e941"}
#contents .sub_con_wrap .sub_lnb .gnb .dp2 > li > a.layer .close{ display:none}
#contents .sub_con_wrap .sub_lnb .gnb .dp2 > li.on > a.layer .open{ display:none}
#contents .sub_con_wrap .sub_lnb .gnb .dp2 > li.on > a.layer .close{ display:inline-block}
#contents .sub_con_wrap .sub_lnb .gnb .dp2 li.act > a .arrow,
#contents .sub_con_wrap .sub_lnb .gnb .dp2 li.on > a .arrow{ opacity:1}
#contents .sub_con_wrap .sub_lnb .gnb .dp2 > li .dp3{ display:none; background:#f5f5f5; border-bottom:1px solid #ddd; padding:1em 0}
#contents .sub_con_wrap .sub_lnb .gnb .dp2 > li .dp3 > li > a{ color:#555}
#contents .sub_con_wrap .sub_lnb .gnb .dp2 > li .dp3 > li.act > a,
#contents .sub_con_wrap .sub_lnb .gnb .dp2 > li .dp3 > li.on > a{ color:#111; font-weight:500}
#contents .sub_con_wrap .sub_lnb .gnb .dp2 > li .dp3 > li.act > a .tt,
#contents .sub_con_wrap .sub_lnb .gnb .dp2 > li .dp3 > li.on > a .tt{ text-decoration:underline}
#contents .sub_con_wrap .sub_lnb .gnb .dp2 > li .dp3 > li > a .va{ padding:.375em 1em; padding-right:.5em}
#contents .sub_con_wrap .sub_lnb .gnb .dp2 > li .dp3 > li.on > a .arrow:before{ content:"\e907"}
#contents .sub_con_wrap .sub_lnb .gnb .dp2 > li.on .dp3{ display:block !important}
#contents .sub_con_wrap .sub_lnb .gnb .dp2 > li > a .va{ font-weight:500; font-size:1.125em}
#contents .sub_tit{ border-bottom:1px solid #ddd; margin-bottom:3em; padding:.5em 0 1.5em 0}
#contents .sub_tit .t1{ font-weight:700; font-size:2.125em}

.dp1on .gnb .dp2{ display:none!important}
.dp2on .gnb > li,
.dp2on .gnb > li .dp1{ display:none!important}
.dp2on .gnb > li.on{ display:block!important}
.dp3on .gnb > li,
.dp3on .gnb > li .dp1,
.dp3on .gnb > li .dp2 > li,
.dp3on .gnb > li .dp2 > li > a{ display:none!important}
.dp3on .gnb > li.on,
.dp3on .gnb > li .dp2 > li.on{ display:block!important}

/**/
.visualSlider_wrap{ position:relative; overflow:hidden;} 
.visualSlider .el{ position:relative; overflow:hidden; height:100vh; background:#fff}
.visualSlider .el .bg{ position:absolute; left:0; top:0; width:100%; height:100%; transform:scale(1.3)}
.visualSlider .el.swiper-slide-active .bg,
.visualSlider .el.swiper-slide-duplicate-active .bg{ transition:7s; transform:scale(1) rotate(.001deg)}
.viewSliderSlogan_wrap{ position:absolute; left:10%; width:50%; top:50%; transform:translateY(-50%); z-index:9}
.viewSliderSlogan .slogan{ color:#fff}
.viewSliderSlogan .slogan .t1{ font-size:.938em; letter-spacing:.25em; margin-left:.25em;  transform:translateX(15em); opacity:0}
.viewSliderSlogan .slogan .t2{ font-size:3.5em; font-weight:300; line-height:1.1; margin:.5em 0; transform:translateX(5em); opacity:0}
.viewSliderSlogan .slogan .t2 .point{ font-weight:800; vertical-align:baseline}
.viewSliderSlogan .slogan .t3{ font-size:1.5em; margin-left:.063em; transform:translate(10em); opacity:0}
.viewSliderSlogan .el.swiper-slide-active .slogan .t1{ transform:translateX(0); opacity:1; transition:2.5s}
.viewSliderSlogan .el.swiper-slide-active .slogan .t2{ transform:translateX(0); opacity:1; transition:2.5s; transition-delay:.3s}
.viewSliderSlogan .el.swiper-slide-active .slogan .t3{ transform:translateX(0); opacity:1; transition:2.5s; transition-delay:.6s}
.visualSlider_control{ margin-top:5em}
.visualSlider_control .paging{color:#fff; width:auto; display:flex}
.visualSlider_control .paging span{ position:relative; background:rgba(255,255,255,.5); opacity:1; width:0; height:3px;border-radius:0; position:relative; transition:.3s; height:2px; counter-increment: vIndex; display:block; margin:0 1.5em}
.visualSlider_control .paging span:before{content:counter(vIndex); position:absolute; right:100%; top:50%; width:1.5em; transform:translateY(-50%)}
.visualSlider_control .paging span:nth-child(-n+10):before{ content:"0" counter(vIndex)}
.visualSlider_control .swiperBtn{ margin-right:.5em}
.visualSlider_control .paging{ margin-left:1.5em}
.visualSlider_control .paging > span:after{ content:""; position:absolute; left:0; top:0; width:0; height:100%; background:#fff}
.visualSlider_control .paging > span.swiper-pagination-bullet-active{ width:10em}
.visualSlider_control .paging > span.swiper-pagination-bullet-active:after{ width:100%; transition:7s}

.mainScroll{ position:absolute; left:0; bottom:100%; z-index:100; color:#fff}
.mainScroll .line{ position:relative; display:block; height:5em; overflow:hidden}
.mainScroll .line:before{ content:""; position:absolute; left:50%; top:0; height:100%; width:1px; background:#fff;}
.mainScroll .dot{ position:absolute; left:50%; transform:translateX(-50%); top:0; width:.5em; height:.5em; background:#fff; border-radius:50%}
.mainScroll .tt{ display:block; transform:rotate(90deg); font-size:.75em; margin:0 0 2.5em 0; white-space:nowrap}
.mainScroll .tt .xi{ font-size:1.5em; margin-right:.25em}

.main_eInfo{ position:absolute; left:0; bottom:0; z-index:9; background:rgba(0,0,0,.2); backdrop-filter:blur(1px); transition:1s; transform:translateY(50%); opacity:0; width: 50em;}
.load .main_eInfo{ transform:translateY(0); opacity:1}

.main_pop_wrap,
.main_pop_all .popList > li{ width:37.5em}
.main_pop_wrap{ position: absolute; z-index:2; right:0; bottom:0; z-index:10; transition:1s; transform:translateX(100%); opacity:0}
.load .main_pop_wrap{ transform:translateX(0); opacity:1}
.main_pop_wrap .wrapBtn{ position:absolute; width:3em; z-index:1; right:100%; bottom:0; display:flex; align-items:center; justify-content:center; color:#fff}
.main_pop_wrap .wrapBtn .twrap{ transform: translateY(50%) rotate(90deg); position: absolute; right: 50%; bottom: 0; transform-origin: 100% 50%; display:flex; font-size:1.063em; background-color: rgba(0,0,0,.7); padding: 0.8em;min-width: 5.5em;}
.main_pop_wrap .wrapBtn:hover .twrap {background-color: rgba(0,0,0,1);}
.main_pop_wrap .wrapBtn .tt{ letter-spacing:.063em; font-weight:500}
.main_pop_wrap .wrapBtn .tt:before{ content:"CLOSE"}
.main_pop_wrap .wrapBtn .xi{ font-size:1em; margin-left:1em; transition:.3s}
.main_pop_wrap .wrapBtn .xi:before{ content:"\e944"}
.main_pop_wrap.on .wrapBtn .tt:before{ content:"OPEN"}
.main_pop_wrap.on .wrapBtn .xi{ transform:rotate(180deg)}
.main_pop_wrap .wrap_tit{ width:100%; max-width:10em; position:absolute; left:0; top:0; transform:rotate(90deg); transform-origin:left top; justify-content:center; position:absolute; left:0; top:0; transform:rotate(90deg); transform-origin:left top;}
.main_pop_wrap .wrap_tit > a {color:#fff; display:flex; align-items:center; justify-content:center;width: 100%;height:3em; background:#002144;}
.main_pop_wrap .wrap_tit > a:hover {color:#002144; background-color:#fff;}
.main_pop_wrap .wrap_tit.c1 > a { background:#0060ae}
.main_pop_wrap .wrap_tit.c1 > a:hover { color:#0060ae; background-color:#fff;}
.main_pop_wrap .wrap_tit .tt{ font-size:.875em; font-weight:700; letter-spacing:.063em; word-spacing:.25em}
.main_pop_wrap .wrap_con{ position:relative}
.main_pop_wrap .toggleCon{ transition:1s; transform:translateX(100%); opacity:0}
.load .main_pop_wrap .toggleCon{ transform:translateX(0); opacity:1}
.main_pop_wrap .toggleCon.on{ transform:translateX(100%)}
.main_pop_wrap.on .toggleCon.on{ transform:translateX(0);}
.main_pop_wrap.on .toggleCon:not(.on){ transform:translateX(-100%)}

.main_pop_wrap.on{ transform:translateX(100%)}

/*기존팝업*/

/*.main_pop_wrap,
.main_pop_all .popList > li{ width:37.5em}
.main_pop_wrap{ position: absolute; right:0; bottom:0; z-index:10; transition:1s; transform:translateX(100%); opacity:0}
.load .main_pop_wrap{ transform:translateX(0); opacity:1}
.main_pop_wrap .wrapBtn{ position:absolute; width:3em; height:100%; z-index:1; right:100%; top:0; display:flex; align-items:center; justify-content:center; color:#fff}
.main_pop_wrap .wrapBtn .twrap{ transform: translateY(-50%) rotate(90deg); position: absolute; right: 50%; bottom: 0; transform-origin: 100% 50%; display:flex; font-size:1.063em}
.main_pop_wrap .wrapBtn .tt{ letter-spacing:.063em; font-weight:500}
.main_pop_wrap .wrapBtn .tt:before{ content:"CLOSE"}
.main_pop_wrap .wrapBtn .xi{ font-size:1em; margin-left:1em; transition:.3s}
.main_pop_wrap .wrapBtn .xi:before{ content:"\e944"}
.main_pop_wrap.on .wrapBtn .tt:before{ content:"OPEN"}
.main_pop_wrap.on .wrapBtn .xi{ transform:rotate(180deg)}
.main_pop_wrap .wrap_tit{ width:100%; max-width:10em; height:3em; color:#fff; display:flex; align-items:center; justify-content:center; position:absolute; left:0; top:0; transform:rotate(90deg); transform-origin:left top; background:#002144; justify-content:center; position:absolute; left:0; top:0; transform:rotate(90deg); transform-origin:left top}
.main_pop_wrap .wrap_tit.c1{ background:#0060ae}
.main_pop_wrap .wrap_tit .tt{ font-size:.875em; font-weight:700; letter-spacing:.063em; word-spacing:.25em}
.main_pop_wrap .wrap_con{ position:relative}
.main_pop_wrap.on{ transform:translateX(100%)}*/
/**/

.popSlider_control{ position:absolute; right:0; bottom:0; z-index:10; width:100%}
.popBtnAll{ margin-right:auto; background:#0060ae; border:1px solid rgba(255,255,255,.2); padding:.5em 1.5em; font-weight:500; color:#fff; border-top-right-radius:.5em; transition:.3s}
.popBtnAll .xi{ margin-right:.125em}
.popBtnAll:hover{ padding:.75em 2em}

.main_pop_all{ position:fixed; z-index:1001; background:rgba(0,0,0,.7); width:100%; height:100vh; left:0; top:0; display:flex; flex-direction:column; box-sizing:border-box; display:none}
.main_pop_all .wrap_tit{ width:100%; height:4em; display:flex; align-items:center; justify-content:center; left:0; top:0; background:#111; color:#fff; z-index:1}
.main_pop_all .wrap_tit .closeBtn{ font-size:1.25em; font-weight:500}
.main_pop_all .wrap_tit .closeBtn .xi{ margin-right:.25em; transition:.3s}
.main_pop_all .wrap_tit .closeBtn:hover .xi{ transform:rotate(90deg)}
.main_pop_all .wrap_con{ flex:1 1 0%; min-height:0; padding:2em; display:flex; align-items:center; justify-content:center}
.main_pop_all .popList{ height:100%; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:1em}
.popOn .main_pop_all{ display:flex}

.main_pop .popSlider {border-top:1px solid rgba(255,255,255, .5);}
.main_pop .wrap_tit { border-left:1px solid rgba(255,255,255, .5);}

.main_quick .menu{ display:flex}
.main_quick .menu > li{ flex:1 1 1%}
.main_quick .menu > li > a{ height:10em; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(255,255,255,.8); border-left:1px solid rgba(255,255,255,.6); border-right:1px solid rgba(0,0,0,.1); transition:.3s}
.main_quick .menu > li:last-child > a{ border-right:none}
.main_quick .menu > li > a .ico{ height:3em; margin-bottom:1.5em}
.main_quick .menu > li > a .t1{ font-weight:700; font-size:1.188em}
.main_quick .menu > li > a:hover,
.main_quick .menu > li > a:focus{ background:#fff; color:#0060ae}

.main_box{ padding:3em 0 4em 0; position:relative}
.main_flex_wrap{ display:flex; flex-wrap:wrap; margin:-4em; position:relative}
.main_flex_wrap > li{ width:50%}
.main_flex_wrap > li .wrap_in{ margin:4em; height:calc(100% - 8em)}
.main_flex_wrap > li.w1{ width:62%}
.main_flex_wrap > li.w2{ width:38%}
.main_flex_wrap > li.w3{ width:30%}
.main_flex_wrap > li.col{ display:flex; flex-direction:column}
.main_flex_wrap > li.col .wrap_in{ height:auto}
.main_flex_wrap > li.col .wrap_in:first-child{ margin-bottom:-4em}
.main_flex_wrap > li.col .wrap_in:last-child{ margin-top:auto}
.main_flex_wrap.m1{ margin:-1em}
.main_flex_wrap.m1 > li .wrap_in{ margin:1em; height:calc(100% - 2em)}

.main_flex_wrap .main_box_st{ box-sizing:border-box; padding:2em; box-shadow:0 1.5em 2.5em rgba(0,0,0,.1); border-radius:1em; border:1px solid #eee; background:#fff}
.main_flex_wrap .main_box_st .wrap_tit{ display:flex; align-items:center; border-bottom:1px dashed #ddd; padding-bottom:1em; margin-bottom:1em}
.main_flex_wrap .main_box_st .wrap_tit .tit{ flex:1 1 0%; min-width:0;}
.main_flex_wrap .main_box_st .wrap_tit .t0{ color:#777; margin-top:.5em}
.main_flex_wrap .main_box_st .wrap_tit .t1{ font-size:1.5em; font-weight:700}
.main_flex_wrap .main_box_st .wrap_tit .ico{ height:3em; margin-left:1em}
.main_flex_wrap .main_box_st .wrap_tit .ico img{ height:100%}
.main_flex_wrap .main_box_st .wrap_con{ padding:1em}
.main_flex_wrap .main_box_st .menu_list{ display:flex; flex-wrap:wrap; flex-direction:column; height:7.5em; gap:1.5em 1em}
.main_flex_wrap .main_box_st .menu_list > li{ min-width:50%}
.main_flex_wrap .main_box_st .menu_list > li > a{ display:flex; line-height:1.1; height:1.5em; box-sizing:border-box; border-radius:.5em}
.main_flex_wrap .main_box_st .menu_list > li > a .tt{ flex:1 1 0%; min-width:0; font-weight:500; font-size:1.063em}
.main_flex_wrap .main_box_st .menu_list > li > a .ico{ margin-right:.375em; font-size:1.188em}
.main_flex_wrap .main_box_st .menu_list > li > a .ico:before{content:"\e980"}
.main_flex_wrap .main_box_st .menu_list > li > a:hover,
.main_flex_wrap .main_box_st .menu_list > li > a:focus{ color:#0060ae}
.main_flex_wrap .main_box_st.s1{ padding:2.5em}
.main_flex_wrap .main_box_st.s1 .wrap_tit .t1{ font-size:1.75em}
.main_flex_wrap .main_box_st.s1 .wrap_tit .ico{ height:4em}

.main_data .main_flex_wrap{ align-items:flex-end}

.main_board_tab{ display:flex; gap:0 3em; position:relative; border-bottom:1px solid #ddd; margin-bottom:2em}
.main_board_tab > li .btn{ font-size:1.25em; font-weight:700; color:#777; position:relative; padding:.5em 0 1em 0}
.main_board_tab > li .more{ visibility:hidden; position:absolute; right:0; top:.5em}
.main_board_tab > li.on .btn{ color:#002144}
.main_board_tab > li.on .btn:after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:4px; background:#002144; transform:translateY(50%)}
.main_board_tab > li.on .more{ visibility:visible}

.main_board_con{ display:flex; gap:0 1.5em}
.main_board_con .el{ border-radius:.5em; box-shadow:0 0 1em rgba(0,0,0,.1); box-sizing:border-box; width:calc(33.33% - 1.3333%); padding:1.5em; padding-top:3.5em; position:relative; display:flex; flex-direction:column}
.main_board_con .el .cate{ position:absolute; right:0; top:0; padding:.25em 1.5em .25em 2.5em; color:#fff; overflow:hidden}
.main_board_con .el .cate:before{ content:""; position:absolute; left:1em; top:0; width:100%; height:100%; background:#0060ae; transform:skew(-30deg)}
.main_board_con .el .cate .in{ position:relative; font-size:.938em; font-weight:500}
.main_board_con .el .tit{ width:100%; font-size:1.063em; font-weight:500; line-height:1.5em; min-height:4.5em}
.main_board_con .el .date{ width:100%; margin-top:auto; color:#777}
.main_board_con .el:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; box-sizing:border-box; border:1px solid #002144; opacity:0; border-radius:.5em}
.main_board_con .el:focus:before,
.main_board_con .el:hover:before{ opacity:1}
.main_board_con .nocon{ width:100%}

.main_data .main_board_con .el,
.main_data .main_board_con .nocon{ height:15em; box-sizing:border-box}
.main_data .main_link{ height:17em; box-sizing:border-box}

.main_link{ display:flex; flex-wrap:wrap; gap:1em}
.main_link > li{ width:calc(50% - .5em); height:calc(50% - .5em)}
.main_link > li .in{ width:100%; height:100%; box-sizing:border-box; display:flex; align-items:center; justify-content:center; flex-direction:column; position:relative}
.main_link > li .in:before{ content:""; border:1px solid #ddd; position:absolute; left:0; top:0; width:100%; height:100%; border-radius:.5em; z-index:-1}
.main_link > li .in .ico img{ height:3em; margin:.5em 0}
.main_link > li .in .t1{ font-weight:500; font-size:1.125em}
.main_link > li .in:focus:before,
.main_link > li .in:hover:before{ border:1px solid #0060ae; background:#f5fbff}

.main_tit_wrap{ display:flex; align-items:center; gap:0 1.5em; margin-bottom:1em}
.main_tit_wrap.space{ justify-content:space-between}
.main_tit_wrap .page_tit{ margin-bottom:0}

.main_more{ width:2em; height:2em; border-radius:50%; border:1px solid #ddd; display:flex; align-items:center; justify-content:center}
.main_more .xi{ font-size:1.25em}
.main_more .xi:before{content:"\e913"}
.main_more:hover{ background:#0060ae; border-color:transparent; color:#fff}

.main_vod{}
.vod_st{ border-radius:.5em; position:relative; overflow:hidden}
.vod_st .tit{ position:absolute; left:0; top:0; width:100%; height:4em; background: linear-gradient(0deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.5) 100%); box-sizing:border-box; padding:0 1em; display:flex; align-items:center; color:#fff}
.vod_st .tit .t1{ font-weight:500; font-size:1.125em}
.vod_st .btn{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:2em; height:2em; border-radius:50%; background:#0060ae; color:#fff; font-size:2em; display:flex; align-items:center; justify-content:center; opacity:0; transition:.3s}
.vod_st .btn.play:before{content:"\ea3e"}
.vod_st:focus .btn,
.vod_st:hover .btn{ opacity:1}

.main_menu{ background:#f2f7fb}
.main_menu .list{ display:flex; flex-wrap:wrap; justify-content:center; gap:1em}
.main_menu .list > li{ flex:1 1 1%; max-width:10em}
.main_menu .list > li > a{ display:block; text-align:center; border-radius:1em; box-sizing:border-box; padding:1.5em 1em; border:1px solid #0060ae;}
.main_menu .list > li > a .ico{ display:block; margin:0 0 1em 0}
.main_menu .list > li > a .ico img{ height:4em}
.main_menu .list > li > a .t1{ font-size:1.125em; font-weight:700}
.main_menu .list > li > a:hover,
.main_menu .list > li > a:focus{ border-color:#0060ae; box-shadow:0 0 1em rgba(0,0,0,.1)}

.main_data_list > li > .in{ display:flex; gap:0 2em; padding:1em; border-bottom:1px solid #eee}
.main_data_list > li:first-child > .in{ border-top:1px solid #eee}
.main_data_list > li > .in .tit{ flex:1 1 0%; min-width:0; display:flex; align-items:center}
.main_data_list > li > .in .tit .ico{ color:#0060ae; transform:scale(2); margin-right:.75em}
.main_data_list > li > .in .tit .ico:before{ content:"·"}
.main_data_list > li > .in .tit .tt{ flex:1 1 0%; min-width:0; font-size:1.125em}
.main_data_list > li > .in .date{ color:#777}
.main_data_list > li > .in:hover,
.main_data_list > li > .in:focus{ background:#f5fbff}
.main_data_list > li > .in:hover .tit .tt,
.main_data_list > li > .in:focus .tit .tt{ text-decoration:underline}
.main_data_list > li.big > .in{ display:flex; padding:2.5em 1em; gap:0 3em}
.main_data_list > li.big > .in .img{ width:18em; border-radius:1em; overflow:hidden; box-shadow:0 0 .5em rgba(0,0,0,.1)}
.main_data_list > li.big > .in .img .bgfix{ background-position:center top}
.main_data_list > li.big > .in .con{ flex:1 1 0%; min-width:0; display:flex; flex-direction:column; gap:.75em 0; padding:.5em 0}
.main_data_list > li.big > .in .con .tit .tt{ font-weight:500; font-size:1.313em}
.main_data_list > li.big > .in .con .t1{ font-size:1.063em; line-height:1.5}
.main_data_list > li.big > .in .con .date{ margin-top:auto}

.main_book{ display:flex; margin:-1.5em}
.main_book > li{ width:50%}
.main_book > li > a{ margin:1.5em; display:flex; flex-direction:column; gap:1em 0}
.main_book > li > a .img{ border-radius:.5em; overflow:hidden; box-sizing:border-box; border:1px solid #eee}
.main_book > li > a .con{ display:flex; flex-direction:column; gap:.5em 0}
.main_book > li > a .con .t1{ display:block; font-weight:500; color:#0060ae; font-size:1.125em}
.main_book > li > a .con .t2{ display:block; font-weight:500; font-size:1.063em}
.main_book > li > a:hover .img,
.main_book > li > a:focus .img{ border-color:transparent; box-shadow:0 0 1em rgba(0,0,0,.1)}
.main_book > li > a:hover .con .t2,
.main_book > li > a:focus .con .t2{ text-decoration:underline}


/**/
.login_wrap{ width:540px; max-width:90%; margin:0 auto}
.login_wrap.w1{ width:620px}
.login_wrap.w2{ width:1000px}
.login_wrap .wrap_tit .t1{ font-size:2.5em; font-weight:700; margin-bottom:.5em}
.login_wrap .wrap_tit .t2{ font-size:2em; font-weight:700; margin-bottom:.5em; text-align:center}
.login_wrap .join_sec{ display:flex; justify-content:space-between; flex-wrap:wrap}
.login_wrap .join_sec > li{ width:48%}
.login_wrap .join_sec > li.w100{ width:100%}

.login_tab{ display:flex; padding:0 1px 0 0}
.login_tab > li{ flex:1 1 1%;}
.login_tab > li > a{ display:flex; align-items:center; justify-content:center; box-sizing:border-box; position:relative; height:4.5em; border:1px solid rgba(0,0,0,.1); color:rgba(0,0,0,.7); background:#f5fbff; margin:0 -1px -1px 0}
.login_tab > li:first-child > a{ border-top-left-radius:1em}
.login_tab > li:last-child > a{ border-top-right-radius:1em}
.login_tab > li > a .t1{ font-weight:500; font-size:1.25em}
.login_tab > li > a.on{ background:#002144; border-color:transparent; color:#fff}
.login_tab > li > a.on:after{ content:""; position:absolute; left:50%; transform:translate(-50%, 50%) rotate(45deg); bottom:-1px; width:.75em; height:.75em; background:#fff}

.layer_inp{ display:block; position:relative}
.layer_inp .inp:focus{ z-index:1}
.layer_inp .inp{ border:1px solid #ddd; margin-bottom:-1px; padding:1em; padding-left:4em; height:3.75em; box-sizing:border-box; width:100%; position:relative; font-weight:500; font-size:1.188em}
.layer_inp select.inp{ padding-left:3.75em}
.layer_inp select.inp optgroup,
.layer_inp select.inp option{ font-weight:400; font-size:.938em}
.layer_inp:first-child .inp{ border-top-left-radius:.5em; border-top-right-radius:.5em}
.layer_inp:last-child .inp{ border-bottom-left-radius:.5em; border-bottom-right-radius:.5em}
.layer_inp .tt{ position:absolute; left:4.25em; top:0; width:100%; height:100%; display:flex; align-items:center; box-sizing:border-box; padding:0 .5em; z-index:2; color:#666; font-weight:500}
.layer_inp .tt > i{ font-size:1.188em}
.layer_inp .ico{ font-size:1em; position:absolute; left:0; top:0; width:4.5em; height:100%; display:flex; align-items:center; justify-content:center; z-index:2}
.layer_inp .ico:before{ font-size:1.5em}
.layer_inp .inp:focus{ border-color:#0060ae; outline:none}
.layer_inp .inp:valid ~ .tt,
.layer_inp .inp:focus ~ .tt{ width:auto; height:1em; transform:translateY(-50%); backdrop-filter:blur(1em); color:#0060ae}
.layer_inp .inp:valid ~ .tt > i,
.layer_inp .inp:focus ~ .tt > i{ font-size:.875em}

.login_wrap .login{ border:1px solid #ddd; padding:2em; border-radius:1em; display:flex; flex-direction:column}
.login_tab + .login{ border-radius:0 0 1em 1em}
.login_wrap .login > *{ width:100%; box-sizing:border-box}
.login_wrap .btn{ height:3.5em; border-radius:.5em; border:1px solid transparent; font-weight:500; font-size:1.188em}
.login_wrap .btn .xi{ font-size:1em; margin-right:.25em}
.login_wrap .btn.c1{ background:#0060ae; color:#fff}
.login_wrap .btn.c2{ background:#333; color:#fff}
.login_wrap .btn.s1{ font-size:1.063em}
.login_wrap .check_wrap{ padding:1.5em}
.login_wrap .page_btn{ margin-top:2em}
.login_wrap .inp_flex{ display:flex}
.login_wrap .inp_flex .inp_wrap{ flex:1 1 0%; min-width:0; margin-right:1em}
.login_wrap .inp_flex .page_btn{ width:8em; margin-top:0}
.login_wrap .inp_flex .page_btn .btn{ height:100%}
.login_wrap .link_wrap{ padding:1em; gap:0 2em}
.login_wrap .link_wrap a{ font-weight:500; color:#666; position:relative}
.login_wrap .link_wrap a:after{ content:"\e93f"; font-family:xeicon}
.login_wrap .link_wrap a.point{ font-size:1.063em; color:#111}
.login_wrap .link_wrap a:hover:before,
.login_wrap .link_wrap a:focus:before{ content:""; position:absolute; left:0; top:100%; width:calc(100% - 1em); height:1px; background:#aaa}
.login_wrap.st1 .login{ border:none; padding:2.5em 0 0 0; border-radius:0}
.login_wrap.st1 .link_wrap{ padding:1em 1.5em; background:#f5f5f5; border-radius:0 0 1em 1em; border-top:1px solid #ddd}
.login_wrap.st1 .login_tab > li:first-child > a{ border-bottom-left-radius:1em}
.login_wrap.st1 .login_tab > li:last-child > a{ border-bottom-right-radius:1em}

.bgLogin { position:fixed; width:14vw; left:75%; bottom:25%}
.bgLogin .in{ padding-bottom:141.014%; background:url(../images/sub/login.svg) no-repeat; background-size:contain}

.agree_box{ border-radius:.5em; border:1px solid #ddd; padding:1.5em}
.agree_box.tt1{ color:#666; font-size:.938em; line-height:1.4}
.agree_box.h1{ height:12em; overflow-y: auto; }

.fin_box{ border-radius:.5em; border:1px solid #ddd; padding:3em}
.fin_box .tit{ font-size:1.75em; font-weight:500; margin-bottom:1em; color:#111; text-align:center}
.fin_box .tit.s1{ font-size:1.375em}
.fin_box .tt1{ line-height:1.5; font-size:1.063em; color:#666; text-align:center}
.fin_box .fs:not(:last-child):after{ content:","}
.fin_box.bg1{ background:#f5f5f5; border:none}

.join_family .list{ display:flex; flex-wrap:wrap; margin:-.25em}
.join_family .list > li{ width:33.33%}
.join_family .list > li.on{ display:none}
.join_family .list > li > a{ border:1px solid #ddd; padding:1em; border-radius:.5em; margin:.25em}
.join_family .list > li > a:focus,
.join_family .list > li > a:hover{ box-shadow:0 0 1em rgba(0,0,0,.1); font-weight:500; color:#0060ae}
.join_family.st1 .list > li{ position:relative}
.join_family.st1 .list > li:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%}
.join_family.st1 .list > li.on{ display:block}
.join_family.st1 .list > li > a{ padding:.75em; background:#f5f5f5}
.join_family.st1 .list > li > a .t1{ font-size:.938em; font-weight:500; color:#666}

.btn_vf{ padding:2em; border:1px solid #ddd; border-radius:.5em; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; min-height:8em; transition:.3s}
.btn_vf .ico{ width:8em; height:8em; background:#f5f5f5; border-radius:50%; display:flex; flex-direction:column; justify-content:center; margin-bottom:1em}
.btn_vf .ico img{ height:50%}
.btn_vf .t1{ font-weight:700; font-size:1.25em}
.btn_vf .t2{ color:#666; margin-top:.5em}
.btn_vf .st{ background:#333; color:#fff; padding:.75em; border-radius:2em; width:100%; max-width:12em; box-sizing:border-box; font-size:1.063em; font-weight:500; margin-top:1.5em}
.btn_vf:hover,
.btn_vf:focus{ border-color:#0060ae; box-shadow:0 0 1em rgba(0,0,0,.1)}

.step_st{ display:flex; justify-content:center; gap:0 5em; margin:2em 0}
.step_st > li .ico{ position:relative}
.step_st > li:not(:last-child) .ico:before{ content:""; position:absolute; left:100%; top:50%; width:5em; height:1px; background:#ddd}
.step_st > li .ico .xi{ font-size:1em; width:1.5em; height:1.5em; margin:0 auto; display:flex; align-items:center; justify-content:center; color:#fff; background:#ccc; border-radius:50%}
.step_st > li .tt{ margin-top:.5em; text-align:center; color:#666}
.step_st > li.on .tt{ font-weight:500; color:#111}
.step_st > li.on .ico .xi,
.step_st > li.on .ico:before{ background:#0060ae}
.step_st > li.on .ico .xi:before{content:"\e928"}
.step_st > li:not(.on) .ico .xi{ transform:scale(.5)}

.doc { padding:0 0 5em;}

/**/
.page_twrap:not(:first-child){ margin-top:5em}
.page_twrap .wrap_box{ border:1px solid #ddd; padding:3em 3.5em; border-radius:.5em}
.page_twrap.bor { position:relative;}
.page_twrap.bor:before { position:absolute; top:-5.5%; left:0; content:''; width:100%; height:1px; background-color:#0060ae;}

.page_twrap2{ display:flex}
.page_twrap2:not(:first-child){ margin-top:4em}
.page_twrap2 .wrap_tit{ border-top:1px solid #111; padding:1em 0; box-sizing:border-box; width:16em; margin-right:5em}
.page_twrap2 .wrap_tit .t1{ font-weight:700; font-size:1.375em}
.page_twrap2 .wrap_con{ flex:1 1 0%; min-width:0; padding:1.25em 0; box-sizing:border-box}

.search_list > li .wrap_in{ display:flex; flex-direction:column; gap:.5em; padding:1.25em; border-bottom:1px dashed #ddd}
.search_list > li:first-child .wrap_in{ border-top:1px dashed #ddd}
.search_list > li .wrap_in .t1{ color:#0060ae}
.search_list > li .wrap_in .t2{ font-size:1.125em; font-weight:500}
.search_list > li .wrap_in .t3{ color:#666}
.search_list > li .wrap_in a:hover,
.search_list > li .wrap_in a:focus,
.search_list > li .wrap_in a:hover *,
.search_list > li .wrap_in a:focus *{ text-decoration:underline}
.search_list > li .wrap_in .point{ vertical-align:top; font-weight:500; color:#F00}

.page_twrap_img{ position:relative; padding-bottom:7em}
.page_twrap_img .wrap_con{ width:70%; background:#fff; position:relative;  z-index:1; box-sizing:border-box; padding:3em; padding-bottom:4em}
.page_twrap_img .wrap_con:before{ content:""; position:absolute; left:0; top:0; width:2em; height:2em; border:.25em solid #0060ae; border-right:none; border-bottom:none}
.page_twrap_img .wrap_img{ position:absolute; left:0; bottom:0; width:100%; height:70%}
.page_twrap_img .wrap_img .img{ height:100%}
.page_twrap_img.st1{ padding-bottom:5em}
.page_twrap_img.st1 .wrap_con{ width:80%; margin:0 auto; text-align:center; padding:3em; border-top:1px solid #111}
.page_twrap_img.st1 .wrap_con:before{ display:none}
.page_twrap_img.st1 .wrap_img{ height:80%}

.page_tit{ font-size:1.5em; font-weight:700; margin-bottom:.5em}
.page_tit.s1{ font-size:1.688em}
.page_tit.s2{ font-size:1.813em}
.page_tit.s3{ font-size:2em}
.page_tit.s4 { font-size:1.250em;}

.tit_ico1{ position:relative}
.tit_ico1 > *{ position:relative}
.tit_ico1:before{ content:""; position:absolute; width:.75em; height:.75em; border-radius:100%; background:#0060ae; transform:translate(-50%, -10%); opacity:.2}

.tit_ico2{ position:relative; padding-bottom:1em; margin-bottom:1.5em}
.tit_ico2:before,
.tit_ico2:after{ content:""; position:absolute; left:0; bottom:0; width:1em; height:1px; background:#999}
.tit_ico2:after{ left:1em; background:#0060ae}
.tit_ico2.ac:before{ left:auto; right:50%}
.tit_ico2.ac:after{ left:50%;}

.page_tt_point .in{ display:inline-block; position:relative; padding:1em 0}
.page_tt_point .in:before,
.page_tt_point .in:after{ content:""; position:absolute; width:3em; height:100%; right:100%; top:50%; transform:translateY(-50%); background:url(../images/sub/page_tt_point.svg) no-repeat left center; background-size: auto 100%}
.page_tt_point .in:before{ right:auto; left:100%; transform:translateY(-50%) rotate(180deg)}

.page_arrow{ padding-bottom:7%; background:url(../images/sub/page_arrow.svg) no-repeat; background-size:100% 100%; margin:3em 0 2em 0}
.page_arrow2{ padding-bottom:4%; background:url(../images/sub/vision_line.png) no-repeat; background-size:100% 100%; margin:1em 0 0em;}

.text_box{ padding:1.5em; border-top:1px solid #0060ae; box-shadow:0 .5em .5em rgba(0,0,0,.1); border-radius:0 0 1em 1em; color:#555}
.text_box.h1{ max-height:10em; overflow-y:auto}

.line1{ height:.5em; background: repeating-linear-gradient(-45deg, #ddd, #ddd 2px, rgba(255,255,255,0) 0, rgba(255,255,255,0) 4px);}

.sub_in{ padding:0 4em}

.sub_list{ display:flex; flex-wrap:wrap}
.sub_list > li{ flex:1 1 1%;}
.sub_list > li{ counter-increment: subListIdx}
.sub_list > li .wrap_in .no:before{content:counter(subListIdx)}
.sub_list.st1{ padding:0 2em; gap:0 2em}
.sub_list.st1 .wrap_in .ico{ padding-bottom:100%; position:relative}
.sub_list.st1 .wrap_in .ico .in{ position:absolute; left:0; top:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center; background:#fff; border:2px dotted #0060ae; color:#0060ae; border-radius:50%}
.sub_list.st1 > li:not(:last-child) .wrap_in .ico .in:before{ content:""; position:absolute; left:100%; width:2em; border-top:1px solid #0060ae; top:50%}
.sub_list.st1 .wrap_in .ico .xi{ font-size:2.5em}
.sub_list.st1 .wrap_in .con{ text-align:center; padding:1.5em .5em}

.sub_list.st2{ border-radius:10em; background:#fff; border:2px solid #0060ae; padding:2.5em 5em; gap:0 2em}
.sub_list.st2 .wrap_in{ text-align:center; position:relative}
.sub_list.st2 .wrap_in .ico{ font-size:2.5em; line-height:1; margin-bottom:.25em; color:#0060ae}
.sub_list.st2 > li:not(:last-child) .wrap_in:before{ content:""; position:absolute; right:-1em; width:1px; height:100%; background:#ddd}

.sub_list.st3{ gap:0 .5em}
.sub_list.st3 .wrap_in{ box-sizing:border-box; height:100%; border:2px solid #0060ae; border-radius:.5em; text-align:center}
.sub_list.st3 .wrap_in .no{ display:flex; align-items:center; justify-content:center; height:4em; background:#0060ae; color:#fff; margin:0 auto}
.sub_list.st3 .wrap_in .no:before{ font-weight:700; font-size:1.25em}
.sub_list.st3 .wrap_in .con{ padding:1.5em .5em}
.sub_list.st3 .wrap_in .con .ico{ font-size:1.75em; margin-bottom:.5em; line-height:1}

.sub_list.st4{}
.sub_list.st4 .wrap_in{ padding:3em 2em; text-align:center; color:#fff; box-sizing:border-box; height:100%; position:relative; min-height:22em; display:flex; flex-direction:column; justify-content:center}
.sub_list.st4 .wrap_in.bgfix:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:.4}
.sub_list.st4 .wrap_in .con{ position:relative; width:100%}
.sub_list.st4 .wrap_in .step{ position:absolute; left:0; top:0; width:100%; height:100%}
.sub_list.st4 .wrap_in .step:before{ content:""; position:absolute; right:-1px; top:100%; width:1px; height:2em; background:#0060ae}
.sub_list.st4 > li:last-child .wrap_in .step:before{ right:0}
.sub_list.st4 .wrap_in .step:after{ content:attr(data-tit); position:absolute; right:0; top:100%; color:#0060ae; padding:.5em; font-weight:700}

.sub_greetings{ position:relative; overflow:hidden; background:rgba(0,96,174,.1); border-radius:0 0 1em 0}
.sub_greetings .bg{ position:absolute; left:0; top:0; width:100%; height:100%; border-radius:0 0 100em 0; overflow:hidden}
.sub_greetings .wrap_in{ padding:4em ; position:relative; color:#fff; z-index:1}
.sub_greetings .dot{ position:absolute; border-radius:50%; width:8%; padding-bottom:8%}
.sub_greetings .dot.d1{ right:3%; bottom:8%; background:#0060ae; opacity:1}
.sub_greetings .dot.d2{ right:6%; bottom:24%; border:.25em dashed #fff; transform:scale(.5)}

.history_wrap{ display:flex; align-items:flex-start; position:relative; padding:4em 0 1em 0}
.history_wrap:before{ content:""; position:absolute; top:0; width:1px; height:calc(100% - 3em); background:#ddd}
.history_wrap:before,
.history_wrap .tabLink{ left:27em}
.history_wrap .wrap_tab{ width:27em; padding:1em 0; padding:0 6em 0 3em; box-sizing:border-box}
.history_wrap .wrap_tab > li > a{ margin:2em 0; color:#111; position:relative; filter:grayscale(1); transition:.3s}
.history_wrap .wrap_tab > li > a:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(255,255,255,.5)}
.history_wrap .wrap_tab > li > a .t1{ font-weight:700; font-size:1.75em}
.history_wrap .wrap_tab > li.on > a,
.history_wrap .wrap_tab > li > a:hover,
.history_wrap .wrap_tab > li > a:focus{ filter:grayscale(0); color:#fff}
.history_wrap .wrap_tab > li.on > a:before,
.history_wrap .wrap_tab > li > a:hover:before,
.history_wrap .wrap_tab > li > a:focus:before{ width:100%; height:100%; background:rgba(0,0,0,.2)}
.history_wrap .wrap_tab > li.on > a{ border-color:#111; box-shadow:0 0 .5em rgba(0,0,0,.1)}
.history_wrap .wrap_tab > li.on > a:after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; height:100%; border:.25em solid #0063ae}
.history_wrap .wrap_con{ flex:1 1 0%; min-width:0; box-sizing:border-box; padding:2em 0; padding-right:6em}
.history_wrap .tabLink{ width:5em; height:3em; position:absolute; bottom:0; transform:translatex(-50%)}
.fadeAni{ animation-name: fadeAni; animation-duration: 2s; animation-iteration-count: infinite}
.history_wrap .tabLink .xi{ font-size:3em; position:absolute; left:0; top:0; width:100%; text-align:center;color:#ddd; margin-left:1px; animation-duration: 3s; animation-iteration-count: infinite}
.history_wrap .tabLink .xi:before{content:"\e943"}
.history_wrap .tabLink.tab1 .xi:before{content:"\e946"}
.history_wrap .tabLink .xi:nth-child(1){ transform:translateY(-.188em) scale(.6); animation-name: angleAni1}
.history_wrap .tabLink .xi:nth-child(2){ transform:scale(.8); animation-name: angleAni2}
.history_wrap .tabLink .xi:nth-child(3){ transform:translateY(.188em); animation-name: angleAni3}
.history_wrap .tabLink.tab1 .xi:nth-child(1) { transform:translateY(-.188em) scale(1); animation-name: angleAni3}
.history_wrap .tabLink.tab1 .xi:nth-child(3) { transform:translateY(.188em) scale(.6); animation-name: angleAni1}
.history_wrap .tabLink:hover .xi,
.history_wrap .tabLink:focus .xi{animation-name: none; color:#0060ae}
@keyframes angleAni1{
	0% {color: #ddd}
	10% {color: #0063ba}
	20% {color: #ddd}
}
@keyframes angleAni2{
	10% {color: #ddd}
	20% {color: #0063ba}
	30% {color: #ddd}
}
@keyframes angleAni3{
	20% {color: #ddd}
	30% {color: #0063ba}
	40% {color: #ddd}
}
.history > li{ padding:0 0 4em 4em; position:relative}
.history > li:before{ content:""; position:absolute; left:0; top:1.25em; width:3em; height:1px; background:#ddd}
.history > li .dot{ position:absolute; left:0; top:1.25em; transform:translate(-50%,-50%); width:1.5em; height:1.5em}
.history > li .dot:before,
.history > li .dot:after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; height:100%; border-radius:50%}
.history > li .dot:before{ background:none; }
.history > li .dot:after{ background:#ccc; width:40%; height:40%}
.history > li .year .t1{ font-weight:700; font-size:1.75em; letter-spacing:-.063em}
.history > li .list{ padding:1em 0}
.history > li .list > li{ display:flex; padding:.5em .125em}
.history > li .list > li .month{ width:4em; margin-right:2em}
.history > li .list > li .con{ flex:1 1 0%; min-width:0; padding:.125em 0; color:#666}
.history > li .list > li .con .t1{ font-size:1.063em}
.history > li .month .t1{ font-weight:500; font-size:1.125em;}
.history > li.on .year,
.history > li.on .list > li .month{ color:#0060ae}
.history > li.on .list > li .con{ color:#111; font-weight:500}
.history > li.on .dot:before{ background:#0060ae; opacity:.4;  animation-name: scaleAni; animation-duration: 2s; animation-iteration-count: infinite}
.history > li.on .dot:after{ background:#0060ae}
@keyframes scaleAni{
	100% { opacity:0; width:150%; height:150%}
}

.sub_org{ display:flex; justify-content:center; position:relative}
.sub_org:before{ content:""; position:absolute; left:50%; bottom:100%; width:1px; height:2em; background:#ccc; transform:translateY(-100%)}
.sub_org.d1{ flex-direction:column; align-items:center; gap:4em 0}
.sub_org li{ flex:1 1 auto; min-width:0; max-width:100%; position:relative}
.sub_org li:before{ content:""; position:absolute; left:50%; bottom:100%; width:1px; height:2em; background:#ccc}
.sub_org li:after{ top:100%}
.sub_org .in{ box-sizing:border-box; padding:.5em; border:1px solid #ccc; position:relative; text-align:center; display:flex; align-items:center; justify-content:center; height:4em; border-radius:.5em}
.sub_org .in:before,
.sub_org .in:after{ content:""; position:absolute; left:50%; bottom:calc(100% + 2em); width:calc(50% + 1em); height:1px; background:#ccc}
.sub_org .in:before{ left:auto; right:50%}
.sub_org .in .tt{ line-height:1.1}
.sub_org li.a1{ width:100%}
.sub_org li.a1 .in{ position:absolute; right:0; left:50%; top:0; transform:translate(100%, -50%)}
.sub_org li.a1 .in:before{ content:""; position:absolute; right:calc(100% + 1px); top:50%; width:calc(100% + 1px); height:1px; background:#ccc; display:block !important}
.sub_org.d2{ gap:0 1em}
.sub_org.d2 > li{ display:flex; flex-direction:column; gap:4em 0}
.sub_org.d3{ gap:0 .5em}
.sub_org.d3 > li{ display:flex; flex-direction:column; gap:.5em 0}
.sub_org.d3 > li .in{ width:10em; max-width:100%;}
.sub_org.d4{ display:flex; flex-direction:column; gap:.5em 0}
.sub_org.d1 > li:before{ height:4em}
.sub_org.d4 > li:before{ height:.5em}
.sub_org.d1:before,
.sub_org.d1 > li:first-child:before,
.sub_org.d1 > li:last-child:before,
.sub_org li:first-child > .in:before,
.sub_org li:last-child > .in:after,
.sub_org.d3 > li:after,
.sub_org.d4:before,
.sub_org.d1 > li > .in:before,
.sub_org.d1 > li > .in:after,
.sub_org.d4 > li > .in:before,
.sub_org.d4 > li > .in:after{ display:none}
.sub_org .in.w1{ width:14em}
.sub_org .in.w2{ width:10em}
.sub_org .in.h1{ height:5em}
.sub_org .in.h2{ height:3em}
.sub_org .in.c1{ background:#002144; color:#fff; border-color:transparnet}
.sub_org .in.c1.re{ border-color:#002144; background:#fff; color:#002144}
.sub_org .in.c2{ background:#0060ae; color:#fff; border-color:transparent}
.sub_org .in.c2.re{ border-color:#0060ae; background:#fff; color:#0060ae}
.sub_org .in.c3{ background:#999; color:#fff}
.sub_org .in.c3.re{ background:#fff; color:#666; border-color:#999;}
.sub_org .in .t1{ font-weight:700; font-size:1.25em}
.sub_org .in .t2{ font-weight:700; font-size:1.188em}
.sub_org .in .t3{ font-weight:500; font-size:1.063em}
.sub_org .in .t4{ font-weight:500}
.sub_org a.in .tt:after{ content:"\e97a"; font-family:xeicon; font-size:.875em; position:absolute; right:.5em; top:.5em; opacity:0; transition:.3s}
.sub_org a.in:focus .tt:after,
.sub_org a.in:hover .tt:after{ opacity:1}

.prod_list{ display:flex; flex-wrap:wrap; margin:-1.5em}
.prod_list > li{ width:20%}
.prod_list > li .prod_st{ margin:1.5em; position:relative}
.prod_st .img_wrap{ box-sizing:border-box; border-radius:.5em .5em 0 0; overflow:hidden; border:1px solid #ddd}
.prod_st .btn_wrap{ display:flex; align-items:center; justify-content:space-between; border-radius:0 0 .5em .5em; border:1px solid #ddd; border-top:none; background:#f5f5f5; padding:.5em 1em}
.prod_st .btn_wrap .cart{ color:#666}
.prod_st .btn_wrap .cart .xi:before{content:"\e9fb"}
.prod_st .btn_wrap .cart input{zoom:1.8}
.prod_st .btn_wrap .buy{ width:1.75em; line-height:1.75em; text-align:center; border-radius:50%; color:#002144}
.prod_st .btn_wrap .buy .xi:before{content:"\e9fe"}
.prod_st .btn_wrap .buy:hover{ background:#002144; color:#fff}
.prod_st .con_wrap{ padding:1em .25em; display:flex; flex-direction:column; gap:.75em}
.prod_st .prod_tit{ font-size:1.125em; font-weight:500; line-height:1.2}
.prod_st .prod_tit a:hover,
.prod_st .prod_tit a:focus{ text-decoration:underline}
.prod_st .prod_info{ font-size:.938em}
.prod_st .prod_info > li{ display:flex; align-items:center}
.prod_st .prod_info > li:not(:first-child){ margin-top:.25em}
.prod_st .prod_info > li .tit{ width:4em; margin-right:1em; color:#777; position:relative}
.prod_st .prod_info > li .tit:after{ content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:70%; background:#ddd}
.prod_st .prod_info > li .tt{ flex:1 1 0%; min-width:0}
.prod_st .prod_info.flex{ flex-wrap:wrap; gap:1em 4em}

.listOn .prod_list{ display:block; margin:0; border-top:1px solid #111}
.listOn .prod_list > li{ width:100%}
.listOn .prod_list > li .prod_st{ margin:0; padding:1.5em 0; display:flex; align-items:center; flex-wrap:wrap; gap:1em 3em; padding-left:2.5em; border-bottom:1px dashed #ddd}
.listOn .prod_list > li .prod_st.p1{ padding-left:0}
.listOn .prod_st .img_wrap{ width:8em; border-radius:.5em}
.listOn .prod_st .img_wrap:hover{ border-color:#0060ae}
.listOn .prod_st .img_wrap.w1{ width:6em}
.listOn .prod_st .btn_wrap{ order:2; flex-direaction:column; border:none; background:none}
.listOn .prod_st .btn_wrap .cart{ position:absolute; left:0; top:1.5em}
.listOn .prod_st .btn_wrap .cart .xi{ display:none}
.listOn .prod_st .btn_wrap .buy{ width:auto; padding:.5em 1em; border-radius:.5em; border:1px solid #0060ae; font-weight:500; display:flex; align-items:center; color:#0060ae; gap:0 .25em}
.listOn .prod_st .btn_wrap .buy:hover{ border-color:transparent; color:#fff}
.listOn .prod_st .btn_wrap .buy:after{ content:"바로구매"}
.listOn .prod_st .btn_wrap .delete .xi:before{ content:"\e96f"}
.listOn .prod_st .con_wrap{ flex:1 1 0%; min-width:0; padding:0}

.orderListW .prod_list .prodL .prod_st:not(:first-child){ display:none}
.orderListW .prod_list > li{ padding:.5em; box-sizing:border-box}
.orderListW .prod_list > li .prod_st:last-child,
.orderListW .prod_list:not(.on) > li .prod_st{ border-bottom:none}
.orderListW .prod_list .wrapBtn .ico{ font-size:1em}
.orderListW .prod_list .wrapBtn .ttClose{ display:none}
.orderListW .prod_list .wrapBtn .ico:before{content:"\e941"}
.orderListW .prod_list.on .wrapBtn .ico{ transform:rotate(180deg)}
.orderListW .prod_list.on .wrapBtn .ttOpen{ display:none}
.orderListW .prod_list.on .wrapBtn .ttClose{ display:inline-block}
.orderListW .prod_list.on .prodL .prod_st{ display:flex}

.order_infoW{ padding:1em 0 0 0; gap:.5em 1.5em}
.order_infoW .xi{ font-size:1em}
.order_btnW{ margin-bottom:3em}

.volW{ display:flex; align-items:center; gap:0 1em}
.volW .st{ display:flex; align-items:center; justify-content:center; height:3em; box-sizing:border-box; border:1px solid #ddd; background:#fff}
.volW .st.ctr{ width:3em}
.volW .st.ctr .xi{ font-size:1em}
.volW .st.ctr.plus .xi:before{content:"\e913"}
.volW .st.ctr.minus .xi:before{content:"\e91a"}
.volW .st.ctr:hover,
.volW .st.ctr:focus{ background:#f5f5f5}
.volW .st.inp{ width:5em; text-align:center}
.volW .st.btn{ border-radius:.5em; padding:0 1em; border-color:transparent; background:#333; color:#fff}
.volW.s1{ font-size:.813em}
.volW .vol_tt{ font-weight:500; color:#666; font-size:1.188em}
.vol{ display:flex; padding-right:1px;}
.vol .st{ margin-right:-1px}
.vol .st:first-child{ border-radius:.5em 0 0 .5em}
.vol .st:last-child{ border-radius:.0 .5em .5em 0}

.btnView{ display:flex; align-items:center; padding-right:1px}
.btnView .btn{ width:2.5em; line-height:2.5em; border:1px solid #ddd; margin-right:-1px; background:#f5f5f5; text-align:center; color:#666}
.btnView .btn:first-child{ border-top-left-radius:.5em; border-bottom-left-radius:.5em}
.btnView .btn:last-child{ border-top-right-radius:.5em; border-bottom-right-radius:.5em}
.btnView .btnList .xi:before{ content:"\e95f"}
.btnView .btnThumb .xi:before{ content:"\e987"}

.btnViewWrap.listOn .btnList,
.btnViewWrap:not(.listOn) .btnThumb{ background:#0060ae; border-color:transparent; color:#fff}

.price_total{ border:2px solid #0060ae; border-radius:.5em; padding:1em; display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:1em 3em}
.price_total .in{ display:flex; gap:0 .5em; align-items:center;}
.price_total .t1{ font-weight:700}
.price_total .t2{ font-size:1.125em}
.price_total .t3{ font-size:1.25em}
.price_total .mark{ font-size:2em; font-weight:700; color:#aaa; line-height:1; transform:translateY(-.063em)}
.price_total .mark.plus:before{content:"+"}
.price_total .mark.minus:before{content:"-"}
.price_total .mark.equal:before{content:"="}
.price_total.ac{ justify-content:center}
.price_total.p1{ padding:2em}
.price_total.st1{ padding:0; border:none}

.prod_view_top{ display:flex; flex-wrap:wrap; padding:4em; background:#f5f5f5; border-radius:2em; box-sizing:border-box}
.prod_view_top .wrap_img{ width:36%; margin-right:4em}
.prod_view_top .wrap_img .big{ }
.prod_view_top .wrap_img .big .resize{ box-shadow:0 0 1em rgba(0,0,0,.1)}
.prod_view_top .wrap_img .thumb{ margin-top:1em}
.prod_view_top .wrap_img .thumb .list{ display:flex; margin:-.25em}
.prod_view_top .wrap_img .thumb .list > li{ width:20%}
.prod_view_top .wrap_img .thumb .list > li > a{ margin:.25em; display:block; position:relative}
.prod_view_top .wrap_img .thumb .list > li > a:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; box-sizing:border-box; border:2px solid #eee}
.prod_view_top .wrap_img .thumb .list > li > a:hover:after,
.prod_view_top .wrap_img .thumb .list > li.on > a:after{ border-color:#0060ae}
.prod_view_top .wrap_con{ flex:1 1 0%; min-width:0; box-sizing:border-box; padding:1.25em 0 0 0; display:flex; flex-direction:column; gap:1.5em}
.prodV_tit{ font-weight:700; font-size:1.625em; line-height:1.2}
.prodV_option{ background:#fff; border:1px solid #ddd; display:flex; flex-direction:column; border-radius:.5em}
.prodV_option > li .in{ display:flex; flex-direction:column; gap:1em; padding:1.5em; box-sizing:border-box}
.prodV_option > li:not(:first-child) .in{ border-top:1px dashed #ddd}
.prodV_option .tit{ font-weight:500; font-size:1.063em}
.prodV_option .volW{ margin-left:auto}
.prodV_btn{ margin-top:auto}

.prod_view_con{ padding:4em; border:2px solid #f5f5f5; border-radius:2em; margin-top:4em}
.prod_view_con .wrap_con{ padding:2em 0}

/**/
.simple .box0,
.simple .box1{ width:94%; margin:0 auto}
.simple #header{ position:relative; font-size:.813em; box-shadow:none !important}
.simple #skipNav,
.simple #header .site_wrap,
.simple #header .top_wrap .gnb_wrap,
.simple #header .top_wrap .gnb_wrap2,
.simple #header .top_wrap .util,
.simple #contents .sub_visual .wrap_bg,
.simple #contents .sub_visual .slogan_wrap,
.simple #contents .sub_visual .nav_wrap,
.simple #contents .sub_con_wrap .sub_lnb,
.simple #footer .siteSlider_wrap,
.simple #footer .menu_wrap,
.simple #footer .logo_wrap .logo,
.simple #footer .sns{ display:none}
.simple #footer{ padding-top:4em}
.simple #footer .logo_wrap{ width:100%}
.simple #footer .info_wrap{ padding:1.5em; font-size:.938em}
.simple #footer .info{ display:flex; justify-content:center; flex-wrap:wrap}
.simple #footer .info > li.copyright{ width:100%; text-align:center; margin-top:.5em}
.simple #contents{ padding:3em 0; flex:1 1 0%; min-height:0; display:flex; align-items:center}
.simple #contents .sub_visual .wrap_con{ height:auto; padding-top:0}
.simple #contents .sub_tit{ display:none}
.simple #contents .sub_con_wrap{ margin-top:0}

.simple2 #contents .sub_lnb{ display:none}
.simple3 #contents .sub_lnb,
.simple3 #contents .sub_visual .wrap_con .nav_wrap{ display:none}
.simple3 #contents .sub_tit{ padding:3em 0 0 0; border-bottom:none; justify-content:center; margin-bottom:2em}

/*검색*/
.page_search_wrap{ align-items:stretch; margin-bottom:1.8em; padding:1em 0; background:linear-gradient(-180deg, #fff 0%, #fff 50%, #ecf0f4 100%); border:1px solid #72727d; border-radius:.5em; box-shadow:.2em .2em 0 rgba(0,0,0,.1); font-size:.938em;}
.page_search_wrap .con_wrap{ flex:7.5; flex-wrap:wrap;}
.page_search_wrap .btn_wrap{ flex:1; border-left:1px dashed #ddd; text-align:center;}
.page_search_wrap .btn_wrap.w2{ flex:1 0 10.5em; max-width:15em;}
.page_search_wrap .inner{ display:flex; align-items:center; padding:0 1.5em;}
.page_search_wrap .in{ flex:1; align-items:center;}
.page_search_wrap .inp_row{ flex:1 1 100%; padding:.3em 0;}
.page_search_wrap .inp_row .tit{ min-width:8em;}
.page_search_wrap .inp_row .tit .icon{ position:relative; display:inline-block; padding-left:1em;}
.page_search_wrap .inp_row .tit .icon:before{ content:""; position:absolute; left:0; top:.4em; width:.4em; height:.4em; background:#d82744; border-radius:50%;}
.page_search_wrap .inp_row .inp{ flex:1;}
.page_search_wrap .inp_row .inp .label_st.st2{ margin:.1em 0;}
.page_search_wrap .btn_wrap .input_st{ margin:.1em 0; width:100%;}
.page_search_wrap .btn_wrap.w2 .input_st{ padding-left:.25em; padding-right:.25em;}

.page_search_wrap.st2{ padding:1em 1.5em;}
.page_search_wrap.st2 .inp_row{ align-items:center;}


@media print {
#skipNav,
#header .site_wrap,
#header .top_wrap .gnb_wrap,
#header .top_wrap .gnb_wrap2,
#header .top_wrap .util,
#contents .sub_visual .wrap_bg,
#contents .sub_visual .slogan_wrap,
#contents .sub_visual .nav_wrap .etc,
#contents .sub_con_wrap .sub_lnb,
#footer .siteSlider_wrap,
#footer .menu_wrap,
#footer .sns,
#footer .logo_wrap .logo,
.page_btn{ display:none}
.box0,
.box1{ width:100%; padding:0}
#header{ box-shadow:none !important; z-index:inherit}
#header .top_wrap .wrapH{ height:3em}
#header .logo{ margin-left:auto}
#contents{ margin-top:3em}
#contents .sub_visual .wrap_con{ height:auto; padding-top:0}
#contents .sub_tit{ border-bottom:none; margin-bottom:0; font-size:.875em; padding:.5em 0}
}