@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
* {margin: 0; padding: 0; box-sizing: border-box; list-style-type: none;}
html {height: 100%; font-size: 0.625em;}
body {position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; font-family: 'Open Sans', 'Noto Sans KR', sans-serif; overflow-x: hidden;}
a {text-decoration: none; color: #333; cursor: pointer;}
button {border: none; background-color: transparent;}
:focus {outline: none;}
/*
a:focus {outline: 2px dotted #000;}
*/
a.using-mouse:focus {outline: none;}
button:focus {outline: 2px dotted #000;}
button.using-mouse:focus {outline: none;}
i {font-style: normal;}

.clear:after {content: ""; display: block; clear: both;}
.left {float: left;}
.right {float: right;}
.float-none {float: none !important;}
.blind {position: absolute; top: -9999px; left: -9999px;}

.cursor-pointer {cursor: pointer;}
.cursor-none {cursor: none;}
.cursor-default {cursor: default;}

.pos-r {position: relative;}
.pos-a {position: absolute;}
.pos-f {position: fixed;}
.pos-s {position: static;}


/* header */

.pc {display: none;}
.header {position: relative; z-index: 101;}
.top-bar {position: fixed; top: 0; left: 0; width: 100%; height: 80px; background: #fff; box-shadow: 1px 1px 10px 1px rgba(0,0,0,0.1); z-index: 1;}
.logo {position: absolute; top: 50%; left: 5%; width: 120px; height: 65px; transform: translateY(-50%);}
.logo a {display: block; width: 100%; height: 100%; background: url(/eng/img/main/logo.png) no-repeat center/contain; text-indent: -9999px;}
.snb-btn {position: fixed; top: 30px; right: 5%; width: 20px; height: 20px; background: url(/portal/img/main/icon-menu.svg) no-repeat center/contain; z-index: 3;}
.snb {display: none; position: absolute; top: 0; left: 0; width: 100%; z-index: 2;}
.snb-bg {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.5); z-index: 1;}
.snb-group {position: fixed; right: 0; width: 95%; height: 100vh; background: #fff; z-index: 4;}
.snb-group .inner {position: relative; height: 100%; padding-bottom: 50px; background: #fff; overflow-y: scroll;}
.lang-group {position: fixed; top: 0; right: 0; width: 95%; padding: 0 10px; height: 80px; background: #fff; box-shadow: 1px 1px 10px 1px rgba(0,0,0,0.1); font-size: 1.6rem; line-height: 80px; z-index: 2;}
.lang li {position: relative; display: inline-block; text-transform: uppercase;}
.lang li:after {content: ""; position: absolute; top: 50%; right: 7px; transform: translateY(-50%); width: 1px; height: 15px; background: #bababa;}
.lang li:last-child:after {content: none;}
.lang .lang-ko {padding: 0 20px 0 40px; width: 20px; height: 20px; background: url(/portal/img/main/lang.svg) no-repeat 0 100%/contain;}
.lang .lang-ko:after {content:"kor"; color: #777; font-weight: 100;}
.lang .lang-en:after {content:"eng"; color: #000; font-weight: 600;}

.snb-btn-close {position: absolute; top: 30px; right: 15px; width: 20px; height: 20px; background: url(/portal/img/main/icon-close.svg) no-repeat center/contain;}
.depth01 {position: relative; width: 100%; padding-top: 80px; background: #fff;}
.depth01 a {display: block;}
.depth01-link {position: relative; padding: 0 15px; font-size: 1.6rem; font-weight: 500; line-height: 65px;}
.depth01-link:after {content: ""; position: absolute; top: 50%; right: 15px; width: 14px; height: 8px; background: url(/portal/img/main/lnb_arrow_down.png) no-repeat center; transform: translateY(-50%);}
.depth02-list {background: #f7f7f7;}
.depth02-link {position: relative; padding: 0 25px; font-size: 1.4rem; line-height: 50px;}
.depth01 .plus {position: absolute; display: inline-block; top: 50%; right: 25px; width: 15px; height: 15px; transform: translateY(-50%);}
.depth01 .plus:before, .depth01 .plus:after {content: ""; position: absolute; width: 100%; height: 1px; background: #999;}
.depth01 .plus:before {top: 50%; transform: translateY(-50%);}
.depth01 .plus:after {top: 50%; transform: translateY(-50%) rotate(-90deg);}
.depth03 {padding: 10px 0;}
.depth03-list {padding: 0 0; margin: 0 30px; background: #e5e5e5;}
.depth03-link {position: relative; padding: 0 20px; margin: 0 15px; border-bottom: 1px solid #d5d5d5; line-height: 50px; font-size: 1.4rem;}
.depth03-link:after {content: ""; position: absolute; top: 50%; left: 10px; width: 4px; height: 4px; border-radius: 50%; background: #555;}
.depth03-list:last-child .depth03-link {border-bottom: none;}
.btn-top {display: inline-block; position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; border-radius: 15px; background: #fdb813 url(/portal/img/main/top-arrow.svg) no-repeat center/30px; box-shadow: 1px 1px 10px 1px rgba(0,0,0,0.2); cursor: pointer;}
@media screen and (min-width: 500px){
    .logo {width: 180px;}
}
@media screen and (min-width: 768px){
    .logo {width: 200px;}
    .logo a {background-size: auto;}
    .header .pc {display: none;}
    .lang-group {width: 50%;}
    .snb-group {width: 50%;}
}
@media screen and (min-width:1280px){
    .snb-group .inner {width: 100%;}
}
@media screen and (min-width: 1400px){
    .pc {display: block;}
    .header .pc {display: block;}
    .top-bar {height: 120px;background: rgba(255, 255, 255, .85);box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.05);-webkit-backdrop-filter: blur(20px);backdrop-filter: blur(20px);}
    .snb-btn {top: 73px; right: calc(50% - 600px);}
    .snb {overflow-y: auto;}
    .snb .inner {width: 1200px; margin: 0 auto;}
    .snb-bg {display: none;}
    .snb-group {width: 100%; background: #09202f;}
    .lang {display: none;}
    .lang li:after {height: 10px;}
    .lang .lang-ko {padding: 0 20px 0 27px;}
    .lang .lang-en:before {content: ""; position: absolute; bottom: -4px; left: 0; width: 29px; height: 2px; background: #111;}
    
    .lang-group {width: 100%; box-shadow: none; background: none;}
    .snb-btn-close {top: 75px; right: calc(50% - 700px); background-image: url(/portal/img/main/icon-close-w.svg);}
    .snb .depth01 {background: #09202f;}
    .depth01 {background-color: transparent;}
    .depth01-link {border-bottom: 1px solid rgba(255,255,255,0.3); font-size: 3.0rem; color: #39abf5;}
    .depth01-link:after {content: none;}
    .depth02 {width: 80%; margin-left: 20%;} 
    .depth02:after {content: ""; display: block; clear: both;}
    .depth02-list {float: left; width: 25%; margin-top: 20px; background: none;}
    .depth02-link {color: #fff; font-size: 1.8rem; line-height: 1.5;}
    .depth02-list:nth-child(5) {clear: both;}
    .depth02-list:nth-child(9) {clear: both;}
    .depth02-list:nth-child(13) {clear: both;}
    .depth02-list:nth-child(17) {clear: both;}
    .depth03 {padding: 5px 0;}
    .depth03-list {margin: 0 25px; background: none;}
    .depth03-link {padding: 0 10px; margin: 0; border-bottom: none; color: #8f9498; line-height: 2.0;}
    .depth03-link:after {left: 0; width: 2px; height: 2px;}
    .snb .depth02 {display: block!important;}
    .snb .depth03 {display: block!important;}
    .snb-group {position: fixed; height: 100vh; padding-bottom: 100px; overflow-y: auto;}
    .snb-group .inner {height: auto; padding-bottom: 0; overflow-y: initial;}
    .header .logo {width: 240px;height: 100px; left: 0;}
    .header-top {position: fixed;top: 0; left: 0; width: 100%; height: 120px; z-index: 2;}
    .header-top .inner {position: relative; width: 1200px; height: 120px; margin: 0 auto;}
    .cyber-nav {position: absolute; bottom: 0; right: 35px; width: 925px; height: 50px; text-align: right;}
    .cyber-nav li {display: inline-block;}
    .cyber-nav a {display: block; padding: 0 30px 0 26px; font-size: 1.8rem; font-weight: 600;}
    .header .nav-shadow {display: none; position: fixed; top: 120px; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.3);} 
    .header .nav {display: none; position: fixed; top: 120px; left: 0; width: 100%; height: 500px; background: #fff; box-shadow: inset 2px 2px 7px 2px rgba(0,0,0,0.1);}
    .header .nav-bg {
        position: absolute; top: 0; left: 0; width: 20%; height: 100%; 
        background-color: #f1f1f1;
        background-image: url(/portal/img/main/gnb-eng.png), url(/portal/img/main/gnb-bg.png);  
        background-repeat: no-repeat; 
        background-position: 100% 100%, center;
        background-size: 250px, cover; 
    }
    .header .nav-bg-text {position: absolute; top: 40px; right: 0; width: 90%;}
    .header .nav-bg-text .p1 {margin-bottom: 10px; font-size: 1.6rem; font-weight: 700; color: #118ad9;}
    .header .nav-bg-text .p2 {margin-bottom: 40px; font-size: 1.8rem; font-weight: 500;}
    .header .nav-bg-text .h1 {font-size: 2.4rem; font-weight: 700;}
    .header .dp01 {position: absolute; top: 0; left: 20%; display: flex; flex-wrap: wrap; width: 1140px; height: 93%; margin: 45px 45px 0 45px;} 
    .header .dp01 a {display: block;}
    .header .dp01-list {flex: 0 0 190px; max-width: 190px; margin-right: 35px;}
    .header .dp01-list:last-child {margin-right: 0;}
    .header .dp01-link {padding: 8px 0; margin-bottom: 10px; border-bottom: 1px solid #006aaf; font-size: 1.8rem; font-weight: 600; color: #006aaf;}
    .header .dp02-link {position: relative; padding: 5px 10px; font-size: 1.6rem; }
    .header .dp02-link:before {content: ""; position: absolute; top: 50%; left: 0; width: 3px; height: 3px; border-radius: 50%; background: #333; transform: translateY(-50%)}
    .info-bar {position: absolute; top: 15px; right: calc(50% - 600px); text-align: right; z-index: 10;}
    .info-bar ul {display: inline-block; position: relative;}
    .info-bar .font {margin-right: 45px;}
    .info-bar .font li {display: inline-block; padding: 3px; vertical-align: middle; font-size: 1.4rem; font-weight: 500;}
    .info-bar .font .size {position: relative; display: inline-block; width: 30px; height: 30px; border-radius: 5px; background: #e5e5e5;}
    .info-bar .font .size:after {content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; background: url(/portal/img/main/plus.svg) no-repeat center; transform: translate(-50%, -50%);}
    .info-bar .font .btn-plus:after {background-image: url(/portal/img/main/plus.svg);}
    .info-bar .font .btn-minus:after {background-image: url(/portal/img/main/minus.svg);}
    .info-bar .lang li {display: inline-block; font-size: 1.4rem; color: #000;}
    .info-bar .lang-ko {font-weight: 700;}
    .info-bar .info-site {padding-left: 40px;}
    .info-bar .info-title {position: relative; display: block; padding: 0 20px 0 30px; background: url(/portal/img/main/info-site.png) no-repeat left/contain; font-weight: 500; font-size: 1.4rem;}
    .info-bar .info-title:after {content: ""; position: absolute; top: 50%; right: 0; width: 8px; height: 8px; background: url(/portal/img/main/up-arrow-black.svg) no-repeat center; transform: translateY(-50%) rotate(180deg); transition: 0.4s;}
    .info-bar .info-title.on:after {transform: translateY(-50%);}
    .info-bar .info-title.on + .info-site-link {display: block;}
    .info-bar .info-site-link {display: none; position: absolute; top: 35px; left: 22px; width: 100%; padding: 15px 25px 20px; border-radius: 20px; background: #fff; box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.1);}
    .info-bar .info-site-link a {position: relative; display: block; padding: 10px 0 10px 15px; text-align: left; font-size: 1.6rem; font-weight: 500;}
    .info-bar .info-site-link a:hover, .info-bar .info-site-link a:active, .info-bar .info-site-link a:focus {color: #118ad9;}
    .info-bar .info-site-link a:before {content: ""; position: absolute; top: 50%; left: 0; width: 4px; height: 4px; background: #118ad9; transform: translateY(-50%);}
    .info-bar .info-site-link a:after {content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: url(/portal/img/main/info-site-line.png) no-repeat center/cover;}
    .btn-top {bottom: 60px; right: calc(50% - 600px);}
    .header .sns-group {position: absolute; top: 480px; right: calc(50% - 600px); transform: translateY(-50%);}
    .header .sns-ul a {display: inline-block; width: 50px; height: 50px; margin-bottom: 20px; border-radius: 15px; background: #1877f2 url(/portal/img/main/facebook.svg) no-repeat center/30px; box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.13);}
    .header .sns-ul .band {background-color: #00cb49; background-image: url(/portal/img/main/blog.svg);}
    .header .sns-ul .youtube {background-color: #ff0101; background-image: url(/portal/img/main/youtube.svg);}
    .header .sns-ul .insta {background-color: transparent; background-image: url(/portal/img/main/insta.svg), url(/portal/img/main/insta-bg.png); background-size: 35px, cover;}
}
@media screen and (min-width: 1400px){
    .info-bar {right: calc(50% - 640px);}
    .header-top .inner {width: 1280px;}
    .header .nav .depth01 {right: calc(50% - 560px);}
    .snb-btn {right: calc(50% - 640px);}
    .snb .inner {width: 1280px; margin: 0 auto;}
    .header .sns-group {right: calc(50% - 640px);}
    .btn-top {right: calc(50% - 640px);}
    .depth01-link {padding: 0 30px 0 26px;}
}
@media screen and (min-width: 1500px){
    .info-bar {right: calc(50% - 700px);}
    .header-top .inner {width: 1400px;}
    .header .nav .depth01 {right: calc(50% - 655px);}
    .snb-btn {width: 16px; height: 16px; right: calc(50% - 700px);}
    .snb .inner {width: 1400px; margin: 0 auto;}
    .header .sns-group {right: calc(50% - 760px);}
    .btn-top {right: calc(50% - 760px);}
    
    .header .nav-bg {width: 20%;}
    .header .nav-bg-text {width: 75%;}
}
@media screen and (min-width: 1600px){
    .header .nav-bg {width: 25%;}
    .header .nav-bg-text {width: 60%;}
    .header .dp01 {left: 25%;}
}
@media screen and (min-width: 1700px){
    .header .nav-bg {width: 25%;}
    .header .nav-bg-text {width: 60%;}
    .header .dp01 {left: 25%;}
}
@media screen and (min-width: 1800px){
    .header .sns-group {right: calc(50% - 860px);}
    .btn-top {right: calc(50% - 860px);}
}
/* footer */
.footer {padding-top: 40px; background: #292929; color: #fff;}
.footer a {color: #767676;}
.footer .inner {width: 90%; margin: 0 auto;}
.footer-logo {height: 40px; margin-bottom: 20px; background: url(/portal/img/main/footer-logo.svg) no-repeat center/contain; text-align: center;}
.eng .footer-logo {background-image: url(/eng/img/main/footer-logo.png);}
.footer .nav {text-align: center;}
.footer .nav li {display: inline-block;}
.footer .nav li a {display: block; padding: 5px 10px; font-size: 1.4rem;}
.footer .nav li.on a {color: #2aa7f9;}
.footer .address {padding: 20px; margin: 20px 0; background: #222;}
.footer .address .top {margin-bottom: 20px;}
.footer .address-p1 {font-size: 1.8rem; line-height: 1.8;}
.footer .address-p2 {font-size: 1.3rem; line-height: 1.8;}
.footer .address-p3 {font-size: 1.3rem; color: #898989; line-height: 1.8;}
.footer .site-1depth a {display: block; font-size: 1.4rem;}
.footer .site-1depth > li {position: relative; margin-bottom: 10px; border: 1px solid #767676;}
.footer .site-1depth > li:after {content: ""; position: absolute; top: 50%; right: 20px; width: 15px; height: 15px; background: url(/portal/img/main/up-arrow-grey.svg) no-repeat center/contain; transform: translateY(-50%);}
.footer .site-1depth > li > a {padding: 25px;} 
.footer .site-2depth {display: none; position: absolute; bottom: 105%; left: 0; width: 100%; padding: 10px 0; background: #000;}
.footer .site-2depth a {padding: 12px 18px; transition: 0.4s;}
.footer .site-2depth li:hover a, .footer .site-2depth li:focus a, .footer .site-2depth li:active a   {color: #fff;}
.footer .copyright {padding-bottom: 50px; text-align: center; text-transform: uppercase;}


@media screen and (min-width: 500px){
    .footer .site-1depth > li > a {padding: 15px;}
}
@media screen and (min-width: 600px){
    .footer .site-1depth > li > a {padding: 15px;}
    .footer .site-1depth {display: flex;}
    .footer .site-1depth > li {flex: 0 0 50%; max-width: 49%;}
    .footer .site-1depth > li:first-of-type {margin-right: 2%;}
}
@media screen and (min-width: 768px){
    .footer .nav {display: block;}
}
@media screen and (min-width: 1024px){
    .footer {position: relative; height: 290px; padding-bottom: 40px;}
    .footer .inner {position: relative; height: 100%;}
    .footer-logo {background-position: 0 0;}
    .footer .nav {display: block; text-align: left;}
    .footer .nav li {position: relative;}
    .footer .nav li:first-child a {padding-left: 0;}
    .footer .nav li a:after {content: ""; width: 1px; height: 13px; background: #555; position: absolute; top: 50%; right: 0;transform: translateY(-50%);}
    .footer .nav li:last-child a:after { content: none; }
    .footer .address {position: absolute; top: 50%; right: 0; margin: 0; transform: translateY(-50%);}
    .footer .family-site {position: absolute; top: 50%; left: 0; width: 50%;}
    .footer .copyright {position: absolute; bottom: 0; left: 0; padding-bottom: 0; text-align: left;}
}
@media screen and (min-width: 1280px){
    .footer {height: 360px; padding: 0;}
    .footer-link {padding-top: 60px;}
    .footer .inner {width: 1200px;}
    .footer-logo {height: 55px;}
    .footer .nav li a {padding: 5px 23px 5px 20px; font-size: 1.6rem;}
    .footer .nav li.on a {padding-left: 0;}
    .footer .nav li:last-child a {padding-right: 0;}
    .footer .site-1depth a {font-size: 1.6rem;}
    .footer .family-site {top: 50%; width: 40%;}
    .footer .address {top: 0; height: 100%; padding: 60px 40px; transform: translateY(0);}
    .footer .address-p1 {font-size: 3.0rem; font-weight: 600; line-height: 1.4;}
    .footer .address-p2 {font-size: 1.6rem; line-height: 1.4;}
    .footer .address-p3 {font-size: 1.4rem;}
    .footer .address .top {margin-bottom: 0;}
    .footer .address .middle {margin-bottom: 60px; margin-top: 5px;}
    .eng .footer .address {width: 450px; padding-top: 90px;}
    .eng .footer .address .bottom {position: absolute; bottom: 90px;}
    .footer .copyright {bottom: 40px;}
    .footer .copyright .ad {padding-bottom: 60px;}
}
@media screen and (min-width: 1600px){
    .footer .inner {width: 1340px;}
}

/* 21-12-13 nanan */
.header .nav .dp01 a:hover, .header .nav .dp01 a:focus, .header .nav .dp01 a:active {text-decoration:none; color: #118ad9;}
.depth01-link:hover, .depth01-link:focus, .depth01-link:active {text-decoration:none; color: #118ad9;}

.footer .address {padding: 20px;}
@media screen and (min-width: 768px){
	.footer .address {padding: 40px;}
}
@media screen and (min-width: 1280px){
	.footer {height: 340px;}
	.footer-link {padding-top: 80px;}
	.eng .footer .address {padding-top: 80px;}
	.eng .footer .address .bottom {bottom: 80px;}
	.footer .copyright {bottom: 80px;}
}

/* 21-12-03 nanan */
.btn-top {box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.13); transition: 0.4s;}
.btn-top:hover {background-color: #00397f; box-shadow: 3px 3px 10px 3px rgba(0,0,0,0.2);}
.footer a {color: rgba(255,255,255, .6);}
.footer a:hover, .footer .nav li a:hover {color: rgba(255,255,255, .8)}
.footer .nav li.on a:hover {color: #118ad9;}
.footer .site-2depth {background: #111; z-index: 10;}
@media screen and (min-width: 1280px){
    .header .sns-ul li {display: block; width: 50px; height: 50px; margin-bottom: 20px; border-radius: 15px;}
    .header .sns-ul li:nth-child(1) {background-color: #1877f2;}
    .header .sns-ul li:nth-child(2) {background-color: #00cb49;}
    .header .sns-ul li:nth-child(3) {background-color: #ff0101;}
    .header .sns-ul li:nth-child(4) {background: linear-gradient(45deg, #f2b260, #db5b66, #a33ab5);}
    .header .sns-ul li a {transition: .4s;}
    .header .sns-ul .insta {background-image: url(/portal/img/main/insta.svg);}
    .header .sns-ul li a:hover, .header .sns-ul li a:active, .header .sns-ul li a:focus {background-color: #fff;}
    .header .sns-ul li a.facebook:hover, .header .sns-ul li a.facebook:active, .header .sns-ul li a.facebook:focus {background-image: url(/portal/img/main/facebook_on.svg);}
    .header .sns-ul li a.band:hover, .header .sns-ul li a.band:active, .header .sns-ul li a.band:focus {background-image: url(/portal/img/main/blog_on.svg);}
    .header .sns-ul li a.youtube:hover, .header .sns-ul li a.youtube:active, .header .sns-ul li a.youtube:focus {background-image: url(/portal/img/main/youtube_on.svg);}
    .header .sns-ul li a.insta:hover, .header .sns-ul li a.insta:active, .header .sns-ul li a.insta:focus {background-image: url(/portal/img/main/insta_on.svg);}
    .header .nav .depth01-link:hover, .header .nav .depth01-link:active, .header .nav .depth01-link:focus {color: #006aaf;}
}
/* 21-12-13 nanan */
.depth01-link:hover {text-decoration:none;}
.depth02-link:hover {text-decoration:none;}
.depth03-link:hover {text-decoration:none; color:#006aaf;}


/* 21-12-16 nanan */
.footer .address {padding: 20px;}
@media screen and (min-width: 768px){
	.footer .address {padding: 40px;}
}
@media screen and (min-width: 1024px) {
	.footer {height: 240px; padding-top: 0; padding-bottom: 0;}
	.footer-link {padding-top: 60px;}
	.footer .copyright {bottom: 60px;}
	.eng .footer .address {padding-top: 60px; width: 48%; height: 100%;}
	.footer .address .top {margin-bottom: 60px;}
	.eng .footer .address .bottom {bottom:60px;}
	.footer .address-p2 {display: inline; color: #898989; padding-right: 5px;}
	.footer .address-p3 {display: inline;}
}
@media screen and (min-width: 1280px){
	.footer {height: 260px;}
}

/* 220119 sy */
.logo a {background:url(/eng/img/main/logo.svg) no-repeat center/contain;}
.header .logo {width: 200px;}
@media screen and (min-width: 768px){
	.header .logo {width: 250px;}
}
@media screen and (min-width: 1400px){
	.header .logo {width: 300px;}
}