@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;}
.main body{ background:#f5f5f5;}
#footer{}

.gnb li.m_hide{ display:none}
.gnb .layer{ display:none}
.hiddenBtn{ display:none}

.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 3em}
#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 2em}
#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 .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 .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:2em; overflow:hidden}
#header .top_wrap .logo > a .tt{ position:relative; margin-left:.5em; padding-left:.5em; font-size:1.375em; font-weight:700; /*letter-spacing:-.063em;*/}
#header .top_wrap .logo > a .tt:before{ content:""; position:absolute; top:0; left:0; width:1px; height:100%; background:#000; opacity:.2;}
#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 30vw; 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:25vw; background:url(../images/inc/bg_blue.svg) no-repeat right 1em; background-size:.5em auto; height:0; top:0; left:0; box-sizing:border-box; padding:1.25em .75em; font-size:1.75em; 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:1.125em; 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:1.5em; position:relative; color:#666; transition:.3s}
#header .top_wrap .gnb_wrap2 .gnb > li .dp3 > li > a:before{ content:""; position:absolute; left:.75em; 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 .util > .linkBtn{ height:3em; padding:0 1.75em; gap:0 .5em; border:1px solid #0060ae; border-radius:20em; color:#0c4da2;}
#header .top_wrap .util > .linkBtn .img{}
#header .top_wrap .util > .linkBtn .img img{ display:block; width:3.75em;}
#header .top_wrap .util > .linkBtn .tt{ font-weight:500;}
#header .top_wrap .util > .linkBtn .xi{ font-size:1em; transition:.2s;}
#header .top_wrap .util > .linkBtn:hover{ box-shadow:0 2px .375em rgba(0,0,0,.2); transition:.2s;}
#header .top_wrap .util > .linkBtn:hover .xi{ transform:translateX(.25em);}

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

#footer{ z-index:1}
#footer .info_wrap{ text-align:center; background:#fff}
#footer .info_wrap .info > li{ margin-bottom:.25em; color:#666}
#footer .info_wrap .info > li.point{ font-size:1.125em; 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}
#footer .sns .list{ gap:0 .5em}
#footer .sns .list > li > a{ width:2.5em; height:2.5em; background:#f5f5f5; border:1px solid #ddd; border-radius:50%; color:#666}
#footer .sns .list > li.fb > a:focus,
#footer .sns .list > li.fb > a:hover{ color:#395498;}
#footer .sns .list > li.yt > a:focus,
#footer .sns .list > li.yt > a:hover{ color:#f70000}

.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}

/*quick*/
#quick{ position:fixed; right:0; top:20%; z-index:1001; width:18.5em; max-height:96vh; transform:translateX(100%); transition:.3s}
#quick .quickBtn{ position:absolute; z-index:-1; width:3.5em; height: 3em; line-height: 3em; left:0; top:32%; margin-top:-2.5em; border:1px solid transparent; background: rgba(218,53,88,1); overflow:hidden; text-align:center; color:#fff; margin-right:-.5em; transform: rotate(90deg); transform-origin: left top; padding: 0 1em;}
#quick .quickBtn:hover {background: rgba(218,53,88,1);}
#quick .quickBtn:after{ content:""; position:absolute; z-index:1; right:0; top:0; width:1px; height:100%}
#quick .quickBtn .tt{ width:100%; text-transform:uppercase; font-weight: 700; letter-spacing: .063em;}
/* .scroll #quick {top:30%; transition:.5s;} */

/*#quick .quickBtn .xi{ width:100%; line-height:4em;}
#quick .quickBtn .xi:before{content:"\e93e"}*/
.on#quick{ right:.5em; transform:translateX(0);}
.on#quick .quickBtn{margin-right:-1px; height: 5em; width: 1em; transform:translateX(-3em); right: -6em; line-height:5em;}
.on#quick .quickBtn .tt{ display:none}
.on#quick .quickBtn .xi:before{content:"\e93e"}
.on#quick .quick_menu{ box-shadow:0 .25em .75em rgba(27,60,111,.15);}

#quick .quick_menu .list { background-color:#fff; overflow: hidden; border-radius: 1em;}
#quick .quick_menu .list li a { padding:2em 1em; text-align:center;}
#quick .quick_menu .list li a:hover,
#quick .quick_menu .list li a:focus {background-color:#d8dae4;}
#quick .quick_menu .list li a .t1 { font-size:1em; margin-right: 1em; min-width: 8em; text-align: left; font-weight:700;}
#quick .quick_menu .list li a .icon { width: 2.5em; height: 2.5em; margin-right: 1.5em; margin-left: 1.5em;}
#quick .quick_menu .list li:nth-child(1) a .icon { background:url(../images/main/icon/m_quick01.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;}
#quick .quick_menu .list li:nth-child(2) a .icon {background:url(../images/main/icon/m_quick02.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;}
#quick .quick_menu .list li:nth-child(3) a .icon {background:url(../images/main/icon/m_quick03.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;}
#quick .quick_menu .list li:nth-child(4) a .icon {background:url(../images/main/icon/m_quick04.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;}
#quick .quick_menu .list li:nth-child(5) a .icon {background:url(../images/main/icon/m_quick05.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;}
#quick .quick_menu .list li:nth-child(6) a .icon {background:url(../images/main/icon/m_quick06.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;}

/**/
.visualSlider_wrap{ position:relative; overflow:hidden;} 
.visualSlider_wrap{ position:absolute; top:0; left:0; width:100%;}
.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:0; width:100%; 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:4em}
.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}

.mainCon{ position:relative; z-index:2;}

.mainScroll{ position:absolute; left:0; bottom:0; 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}
.load .main_eInfo{ transform:translateY(0); opacity:1}

.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}

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

.agree_box{ border-radius:.5em; border:1px solid #ddd; padding:1.5em; color:#666; font-size:.938em; line-height:1.4}
.agree_box.h1{ height:8em; 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)}

.eic_main_box {width: 73.5%; z-index: 9; margin:10em auto 5em;}
.main_tt.t1 { font-size:1.113em;letter-spacing: 1.1px;padding-bottom: 0.9em;}
.main_tt.t2 { font-size:1.875em;}
.main_tt.t3 { font-size:1.250em;}
.main_tt.t4 { font-size:1.440em;}
.main_tt.t5 { font-size:1.113em;}
.main_tt.t6 { font-size:2em;}
.main_tt.t7 { font-size:1.6em;}

.main_tt.we1 { font-weight:500;}
.main_tt.we2 { font-weight:600;}
.main_tt.we3 { font-weight:900;}
.main_tt.we4 { font-weight:300;}

.main_contents .conIdx.idx1 { display:none;}
.main_contents .conIdx.idx1.on { display:block;}
.tab_idx .list { position:relative;}
.tab_idx .list:before { position:absolute; top:28%; left:28%; content:''; background-color:#0060ae; border-radius:50%; width:.5em; height:.5em; display:none;}
.tab_idx .list.on:before { display:block;}

.mainCon .main_sec1 { padding-top:2em;}
.mainCon .search_wrap { width:45%; margin-bottom:2.5em;}
.mainCon .search_wrap .main_search {width: 100%; border: 2px solid #0060ae; border-top-left-radius: 1em; border-bottom-left-radius: 1em; padding: 1em 1.5em; font-size: 1.250em;}
.mainCon .search_wrap .main_btn {background-color: #0060ae; font-size: 1.470em; color: #fff; padding: 0.7em; border: 2px solid #0060ae; border-top-right-radius: 0.5em; border-bottom-right-radius: 0.5em;}

.mainCon .tab_wrap { background-color:#0060ae; border-top-right-radius: 0.5em; border-top-left-radius: 0.5em; overflow:hidden; height: 4.6em; margin-top:2.2em;}
.mainCon .tab_wrap .list {}
.mainCon .tab_wrap .list > a {padding: 1em 4em; font-size: 1.440em; font-weight: 500; color:#fff;}
.mainCon .tab_wrap .list.on { background-color:#fff;}
.mainCon .tab_wrap .list.on > a {color:#0060ae;}

.main_contents {}
/*.main_contents .main_box { position:relative;}
.main_contents .main_box:after { position:absolute; top:0; left:0; content:''; background-color:#ddd; width:100%; height:10em;}
.main_contents .main_box .box_inner {z-index:1;}*/
.main_contents .main_box {background-color:#fff; border-radius:1em; position:relative; z-index:2;box-shadow: 0 14px 30px rgba(51,51,51,0.1); border-top-right-radius: 0;}
.main_contents .main_box .bg {background-color:#f5f5f5; position:absolute; top:6%; left:0; width:100%; height:25em; z-index:-1;}
.main_contents .main_box .box_inner { padding-top:5em;}
.main_contents .main_box .box_inner .btn { border: 1px solid #0060ae; border-radius:.5em; color:#0060ae; padding:.8em 2em; margin-top:6.5em; transition:.3s;}
.main_contents .main_box .box_inner .btn:focus,
.main_contents .main_box .box_inner .btn:hover { background-color:#0060ae; color:#fff;}
.main_contents .main_box .book_img { position:relative; margin-top: 4em;box-shadow: 0 14px 20px rgba(51,51,51,0.1); width:24%;}
.main_contents .main_box .book_img:before { position:absolute; top:-9%; left:-8%; content:'NEW'; color:#fff; background-color:#ec1a3b; width:4.3em; height:4.3em; border-radius:50%; line-height:4.3em; text-align:center; font-size:1.063em; font-weight:600;}

.box_bottom { margin-top:7em;padding:0 4em 7em;}
.box_bottom .bott_inner { }
.book_tab ul { border:1px solid #ddd; border-radius:3em; background-color:#fff; margin-right:1em; overflow:hidden;}
.book_tab ul li a { font-size:1.250em; color:#808080; padding:1em 2em; font-weight:500;}
.book_tab ul li.on a { color:#fff; background-color:#0060ae;}
.book_wrap { margin:-.5em}
.book_wrap li {width:16.66%}
.book_wrap li > a{ display:block; border:1px solid #ddd; margin:.5em}
.book_wrap li:nth-child(6),
.book_wrap li:nth-child(12) { margin-right:0;}
/*.book_tab .last_year { font-size:1.3em; color:#aaa; background-color:#ddd;}*/

.book_img {margin:0 auto;}
.tx_inner {width: 53.5%;padding-top: 5em;}

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

@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}
}