/* font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@font-face {
    font-family: 'NEXON Lv1 Gothic OTF';
    src: url(/common/font/NEXON_Lv1_Gothic_OTF.woff) format('woff');
    font-weight: 400;
}
@font-face {
    font-family: 'NEXON Lv1 Gothic OTF';
    src: url(/common/font/NEXON_Lv1_Gothic_OTF_Bold.woff) format('woff');
    font-weight: 700;
}
@font-face {
    font-family: 'NEXON Lv1 Gothic OTF';
    src: url(/common/font/NEXON_Lv1_Gothic_OTF_Light.woff) format('woff');
    font-weight: 300;
}
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
.ff-nexon {font-family: 'NEXON Lv1 Gothic OTF', sans-serif;}
.ff-pop {font-family: 'Poppins', sans-serif;}
.ff-preten {font-family: 'Pretendard', sans-serif;}


/**/
:root {
    --color-sky : #20b7e5;
}

/**/
html, body {
    min-height:100vh; word-break:keep-all; position: relative;
    font-family:'NEXON Lv1 Gothic OTF', 'Noto Sans KR', sans-serif;
    letter-spacing: -0.6px;
}

/**/
.fc-sky {color:var(--color-sky);}

/**/
header .tnb-c {overflow:hidden;}
body.navOn header .tnb-c {overflow:unset;}
header {
    position:fixed; width:100%;
    /*box-shadow: 0 1px 10px rgb(0 0 0 / 8%);*/
    z-index:999; transition:all 400ms; top:0;
}
header #site-map-toggle span,
header:hover #site-map-toggle span,
header.in-active #site-map-toggle span{background: #333;}

@media(max-width:768px){
    header #logo a,
    header.in-active #logo a{background-size: contain;}
}

/**/
.wrap {max-width:1500px;}
.inner {max-width:1400px !important; width: 100%; margin: 0 auto; position: relative;}
.wrap-editor {}
.wrap-editor img {width:auto; height:auto; max-width:100%; max-height:100%;}

@media (max-width:1860px){
    .wrap {max-width:94%;}
	.inner {max-width:85% !important;}
}
@media (max-width:768px){
    .wrap {max-width:94%;}
    .inner {max-width:90% !important;}
}

#logo {width: 180px; height: 28px;}
#logo a {
    display: block; background: url(/images/content/layout/logo_b.png) no-repeat center left; height: 100%;
    transition:all 300ms;
}

/**/
.sub-layout {background:linear-gradient(to bottom, #fff 330px, #fff 330px, #fff 816px, #f7f7f7 816px);}

@media(max-width:768px){
    .sub-layout {background:linear-gradient(to bottom, #fff 330px, #fff 330px, #fff 670px, #f7f7f7 670px);}
}


/**
 * layout/exotecth/_main.css 파일에 메인에서만 작동하는 추가 코드가 있음.
 */
#tnb {
    height: 100px; transition:all 300ms; background:transparent; position: relative; z-index: 9999;
    user-select:none;
}
#unb .wrap,
#tnb .wrap {height: 100%; min-width:93%; display: flex; justify-content: space-between;}
#tnb .wrap > div {}
#unb ul.m1,
#tnb ul.m1 {
    display:flex; justify-content: center; align-items: center; flex-wrap: nowrap; height:100%;
    width:100%; margin:auto;
}
/*#unb li.m1,*/
#tnb li.m1 {
    width: 180px; height:100%; text-align: center; position:relative; font-size: 17px; font-weight: 600;
    transition: height 0.5s ease, opacity 0.5s ease;
}
#tnb li.m1:last-child ul.m2{border-right: 1px solid #e5e5e5;}
#tnb a.m1 {
    /*border-bottom:3px solid transparent;*/
    display:flex; justify-content: center; align-items:center;
    color: #333; transition:all 300ms; width:100%; height:100%;
}
#tnb a.m1 span{position: relative;}
#tnb a.m1 span:after{
    position: absolute; content: ''; width: 100%; border-bottom: 3px solid transparent; bottom: -37px; left: 0;
    transition: all 0.3s cubic-bezier(.02,.01,.47,1); transform: scaleX(0);
}
#tnb a.m1:hover {color:#20b7e5;}
#tnb a.m1:hover span:after{border-color:#20b7e5; opacity: 1; transition: all 0.3s cubic-bezier(.02,.01,.47,1); transform: scaleX(1);}
#tnb ul.m2 {
    overflow:hidden;
    position:absolute; top:67px; left:0; min-width:100%; height: 0; text-align:center; display: block;
    transition: height 0.5s ease, opacity 0.5s ease, background 0.3s; opacity: 0; border-left: 1px solid #e5e5e5;
}
#tnb ul.m2:before{position: absolute; content: ''; width: 0; height: 2px; background: #00a384; left: 0; top: 0; transition: width 0.5s ease-out;}
#tnb li.m1:hover ul.m2{background: #f9f9f9;}
#tnb li.m1:hover ul.m2:before{width: 100%;}
body.navOn #tnb ul.m2{height: 339px; opacity: 1;}
#tnb li.m2{font-size: 17px; font-weight: 400; padding: 10px 0;}
#tnb li.m2:nth-child(1){margin-top: 18px;}
#tnb li.m2 a{color: #555; display: block; width: 100%; transition: all 0.3s;}
#tnb li.m2 a:hover{color: #00a384; font-weight: 500;}



/**/
#tnb .wrap > div {}
#tnb .wrap .tnb-l {
    width:200px; height: 100%; display: flex; align-items: center; padding-right:20px;
    z-index:10; position:relative;
}
#tnb .wrap .tnb-c {position:absolute; width:100%; height:100%; padding:0 200px; z-index:1;}
#tnb .wrap .tnb-r {display: flex; align-items: center; width:165px; justify-content: flex-end; z-index:10; position:relative;}
#tnb .wrap .tnb-r > div {margin:0 20px;}
#tnb .wrap .tnb-r > div:last-child {margin-right:0;}
#tnb .wrap .tnb-r a {display:block;}
#tnb .wrap .tnb-r .link {
    width:16px; height:20px; background:url(/images/content/layout/tnb_icon_link_b.png) no-repeat center center;
    transition:all 300ms; position:relative; cursor: pointer;
}
#tnb .wrap .tnb-r .globe {
    width:20px; height:20px; background:url(/images/content/layout/tnb_icon_globe_b.png) no-repeat center center;
    transition:all 300ms; cursor:pointer; position:relative;
}

/**/
.in-active #tnb,
#tnb.active {background:#fff;}
.in-active #tnb a.m1,
#tnb.active a.m1 {color:#333;}
.in-active #tnb #logo a,
#tnb.active #logo a {background-image:url(/images/content/layout/logo_b.png);}
.in-active #tnb .wrap .tnb-r .link{background:url(/images/content/layout/tnb_icon_link_b.png) no-repeat center center;}
.in-active #tnb .wrap .tnb-r .globe{background:url(/images/content/layout/tnb_icon_globe_b.png) no-repeat center center;}

/**/
#tnb .link-modal {
    position:absolute; margin:auto; top:200%; right:auto; bottom:auto; left:50%;
    background:#f2f2f2; padding:25px 30px; border-radius:15px;
    transform:translateX(-50%); display:none; width:auto; height:auto;
}
#tnb .link-modal:before {
    content:''; width:10px; height:10px;
    position:absolute; margin:auto; top:0; right:0; bottom:auto; left:0;
    transform:translateY(-50%) rotate(45deg);
    background:#f2f2f2;
}
#tnb .wrap .link-modal a {
    display:flex; margin-bottom:20px; font-size:15px;font-family: 'Pretendard' , sans-serif;
    color: #a8a8a8; transition: all 0.3s;
}
#tnb .wrap .link-modal a.active{color: #20b7e5; font-weight: 600;}
/*#tnb .wrap .link-modal a:first-child {pointer-events: none;}*/
#tnb .wrap .link-modal a:last-child {margin-bottom:0;}
#tnb .link-modal .icon {margin-right:15px;line-height: 1; width: 20px;}
#tnb .link-modal .name {font-size:15px;}
#tnb .link-modal .name .e {
    color:#000; font-family: 'Poppins', sans-serif; font-weight: 600;line-height: 1; letter-spacing: 0;
    white-space: nowrap;
}
#tnb .link-modal .name .k {color:#a8a8a8;margin-top: 5px; font-family: 'Pretendard' , sans-serif; transition: all 0.3s; line-height: 1.2;}
#tnb .link-modal a:hover .name .k,
#tnb .link-modal a:hover:last-child{color: #333;}

/**/
#tnb .lang {
    width: 80px; height: 31px; line-height: 31px; margin-right: 30px; position: relative;
    text-align: center; background: #d81820; border-radius: 16px;
}
#tnb .lang:after {
    position: absolute; content: ""; width: 1px; height: 12px;
    background: rgba(256,256,256,0.5); top: 10px; left: 41px;
}
#tnb .lang a {font-size: 14px; font-weight: 700; color: #fff; }
#tnb .lang a:nth-child(1){margin-right: 8px;}
#tnb .lang a:nth-child(2){opacity: 0.5;}

@media(max-width:768px){
    #tnb .lang .lang_option .lang_item{font-size: 14px;}
    #tnb .lang .lang_btn{font-size: 14px;}
    #tnb .lang .lang_btn::before{top: 7px;}
}

/**/
#tnb-bg{
    position: absolute; content: ''; width: 100%; height: 0; background: #fff;
    left: 0; top: 100px; display: block; opacity: 0; z-index: 999;
    box-shadow: 0 6px 20px rgb(0 0 0 / 8%); transition: height 0.5s ease, opacity 0.5s ease;
}
body.navOn #tnb-bg{height: 340px; opacity: 1; border-top: 1px solid #e5e5e5;}

/**/
#site-map-toggle {position: relative; right: 0; width: 23px; height: 28px; margin:0;}
#site-map-toggle span {background: #fff; margin: 5px 0;}

@media(max-width:768px){
    #site-map-toggle{width: 20px;}

}

/**/
#snb{
    position: fixed; width: 100%; height: 100vh; background: #f9f9f9;
    top: 0; right: 100%; z-index: 999999; opacity: 0;
    transition:all 0.5s; display:block;
}
#snb .snb-top{width: 100%; height: 100px; border-bottom: 1px solid #f0f0f0;}
#snb .wrap{max-width:85%; min-width:93%; height: 100px; display: flex; justify-content: space-between;}
#snb .wrap .snb-l{height: 100%; display: flex; align-items: center; margin-left:30px;}
#snb .wrap .snb-l #logo a{background: url(/images/content/layout/logo_b.png) no-repeat center left;}
#snb .wrap .snb-r{display: flex; align-items: center;}
#snb button{background: transparent; border: none; padding: 0; outline: 0;}
#snb .close-btn{width: 25px; height: 30px; transition: all 0.4s; cursor: pointer;}
#snb .close-btn span{display: block; width: 100%; height: 3px; background: #333;}
#snb .close-btn span:first-child{transform: rotate(-45deg) translateX(-2px);}
#snb .close-btn span:last-child{transform: rotate(45deg) translateX(-2px);}
#snb .close-btn:hover{transform: rotate(180deg);}
#snb .lang {width: 80px; height: 31px; line-height: 31px; margin-right: 30px; position: relative; text-align: center; background: #d81820; border-radius: 16px;}
#snb .lang:after {position: absolute; content: ""; width: 1px; height: 12px; background: rgba(256,256,256,0.5); top: 10px; left: 41px; }
#snb .lang a {font-size: 14px; font-weight: 700; color: #fff; }
#snb .lang a:nth-child(1){margin-right: 8px;}
#snb .lang a:nth-child(2){opacity: 0.5;}
#snb.active{opacity: 1; right: 0;}
/*#snb-overlay.active{opacity: 1; display: block;}*/

#snb > .inner{padding-top: 100px;}
#snb:after{
    position: absolute; content: ''; background: no-repeat center center;
    right: 0; bottom: 0; width:800px;height:441px;
    z-index: -1;
}
#snb > .inner ul.m1{display: flex; flex-direction: column;}
#snb > .inner li.m1{margin: 13px 0; position: relative; }
#snb > .inner li.m1:after{
    position: absolute; content: ''; width: 0; height: 1px; top: 0; bottom: 0; left: 310px; margin: auto;
    background: #222; transition: all 0.3s;
}
#snb > .inner li.m1:before{
    position: absolute; content: ''; background: no-repeat center; top: 0;
    bottom: 0; left: 440px; margin: auto; width: 21px; height: 21px; transition: all 0.3s; display: none;
}
#snb > .inner li.m1.active:after{width: 140px;}
#snb > .inner li.m1.active:before{display: inline-block;}
#snb > .inner li.m1.active > a{color: #20b7e5;}
#snb > .inner li.m1:first-child{margin-top: 0;}
#snb > .inner li.m1 > a{
    background: transparent; border: none; padding: 0; outline: 0; display: inline-block; width: auto; height: 65px;
    line-height: 65px; font-size: 38px; font-weight: 700; color: #333; text-align: left; cursor:pointer; transition: all 0.3s;
}
#snb > .inner ul.m2{display: none;  transition: all 0.3s;}
#snb > .inner li.m2 {float:left; margin-right:50px;}
#snb > .inner li.m2 > a {display: block; color: #999999; font-size: 17px; font-weight: 400; padding: 9px 0; transition: all 0.3s;}
#snb > .inner li.m2:hover a{color: #20b7e5;}

@media(max-width:1200px){

    #snb .wrap{height: 80px;}
    #snb .snb-top{height: 80px;}
    #snb .wrap .snb-l #logo a{width: 150px; background-size: contain;}
    #snb .wrap .snb-r{margin-right:30px; margin-left: 0;}
}
@media(max-width:768px){
    #snb {padding: 40px 0 0 40px;}
    #snb .close-btn{width: 25px; top: 40px; right: 40px;}
}

/**/
#unb {
    background:#fff; border-top: 1px solid #f0f0f0; display:none;
    border-bottom: 1px solid #f0f0f0;
}
#unb.active {height:89px;}
#unb .wrap {}
#unb .tnb-c {width:100%; padding:45px 200px;}
#unb .tnb-c a.m1 {display:none;}
#unb .tnb-c a.m2 {
    color:#666; padding:0; font-weight:normal;
    position:relative; display:inline-block; transition:all 300ms; font-size: 16px;
}
#unb .tnb-c li.m1 {display:flex;}
#unb .tnb-c ul.m2 {display:flex;}
#unb .tnb-c li.m2 {padding:0 40px; position:relative;}
#unb .tnb-c li.m2:after {
    content:''; width:1px; height:50%; position:absolute; margin:auto;
    top:0; right:0; bottom:0; left:auto; background:#ccc;
}
#unb .tnb-c li.m2:last-child:after {display:none;}
#unb .tnb-c li.m2 a {}
#unb .tnb-c li.m2:last-child a.m2 {margin-bottom:0;}
#unb .tnb-c a.m2:hover {color:#20b7e5;}
#unb .tnb-c ul.m2 {}

/**/
.container-section {min-height:700px;margin-bottom:100px;}

/**/
footer{
    margin-top:100px; background:#111; padding:80px 0; color:#aaa; font-family: 'Pretendard' , sans-serif;
    font-size:15px;
}
footer .wrap {max-width:1760px; display:flex; justify-content: space-between; align-items: flex-start;}
footer .wrap span.line {padding-right:10px; margin-right:4px; position:relative;}
footer .wrap span.line:after {
    content:''; position:absolute; display:block; width:1px; height:70%; background:#6a6f79;
    margin:auto; top:0; right:0; bottom:0; left:auto;
}
footer .sns {display:flex; margin-bottom:20px; justify-content: flex-end;}
footer .sns > a {margin-left:16px; position: relative; width: 45px; height: 45px;}
footer .sns > a span{position: absolute; top: 0; left: 0; color: #fff; border: 1px solid #fff; width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; opacity: 0; visibility: hidden; line-height: 1; transition: 0.3s;}
footer .sns > a:hover span{visibility: visible; opacity: 1;}
footer .sns > a:hover img{display: none;}
footer .sns > a:first-child {margin-left:0;}

@media(max-width:1860px){
    footer .wrap {width:96%;}
}
@media(max-width:1200px){
    footer .logo{width:150px; background-size: contain;}
    footer .sns > a{zoom: 0.8;}
}
@media(max-width:768px){
    footer .wrap {flex-wrap:wrap;}
    footer .wrap > div {width:100%;}
    footer .wrap > div:nth-child(2) {margin-top:20px;}
    footer .wrap .logo {text-align:right;}

}

/**/
#btn-top{position: fixed; content: ''; right: 45px; bottom: 45px; width: 50px; height: 50px; background: #000; text-align: center; display: inline-block; transition: 0.4s; z-index: 9999;}
#btn-top img{transition: transform 0.3s; width: 16px; height: 21px; position: absolute; content: ''; margin: auto; top: 0; left: 0; right: 0; bottom: -28px;}
#btn-top img.mob{display: none;}
#btn-top span{display: block; font-weight: 600;}
#btn-top:hover img{transform: translateY(-12px);}


@media(max-width:768px){

    #logo{width: 100px;}
    #btn-top{width: 50px; right: 20px; bottom: 30px; font-size: 14px;}
    #btn-top img.web{display: none;}
    #btn-top img.mob{display: block; margin: 0 auto;}
    #btn-top span{margin-top: 2px;}
}

/**/
.sub-layout {padding-top:100px;}
.sub-layout #tnb{background: #fff;}
#svb {background-repeat:no-repeat; background-size:auto; background-position:right bottom; position:relative;}
#svb .svb-title {padding-top:60px; color:#fff;}
#svb .svb-title > div {}
#svb .svb-title > div:nth-child(1) {font-weight:600; word-break: break-all; font-size:44px; line-height:46px;}
#svb .svb-title > div:nth-child(2) {margin-top:20px; color:#fff;}
#svb.sub-visual-1 .svb-title, #svb.sub-visual-7 .svb-title {padding-top:80px;}

#svb.sub-visual {height:300px; background:url(/images/content/layout/sub_visual_1.jpg) no-repeat center; background-size: cover;}
#svb.sub-visual-1 {background-image:url(/images/content/layout/sub_visual_1.jpg);}
#svb.menu-visual-9 {background-image:url(/images/content/layout/sub_visual_2.jpg);}
#svb.menu-visual-11 {background-image:url(/images/content/layout/sub_visual_3.jpg);}
#svb.sub-visual-2 {background-image:url(/images/content/layout/sub_visual_4.jpg);}
#svb.sub-visual-3 {background-image:url(/images/content/layout/sub_visual_5.jpg);}
#svb.sub-visual-4 {background-image:url(/images/content/layout/sub_visual_6.jpg);}
#svb.sub-visual-5 {background-image:url(/images/content/layout/sub_visual_7.jpg);}
#svb.sub-visual-6 {background-image:url(/images/content/layout/sub_visual_8.jpg);}
#svb.sub-visual-7 {background-image:url(/images/content/layout/sub_visual_9.jpg);}
#svb.menu-visual-12 {background-image:url(/images/content/layout/sub_visual_10.jpg);}


@media(max-width:1800px){
    #svb {background-position:center bottom;}
}
@media(max-width:768px){
	#svb { height:250px;}
    .sub-layout {padding-top:70px;}
}

/**/
.page-head {margin:80px 0 60px 0;}
.page-head .line {padding-top:40px; margin-top:20px; position:relative;}
.page-head .line:after {
    content:''; width:30px; height:2px; background:#555; position:absolute; margin:auto;
    top:0; right:0; bottom:auto; left:0;
}
.title-mini {text-transform: uppercase; color:#20b7e5; font-weight:bold;}
.title {font-size:44px; font-weight:bold; color:#111; font-family: 'NEXON Lv1 Gothic OTF', sans-serif;}

/**/
#page-tab-menu {padding:0 30px; border-bottom:1px solid #ddd;}
#page-tab-menu .rect {
    /*display:flex; justify-content: space-between; align-items: center;*/
    display:flex; justify-content: flex-start; position:relative;
    overflow-x:auto; overflow-y:hidden; white-space: nowrap;
    margin-top:70px; padding:0;
}
#page-tab-menu .rect::-webkit-scrollbar {display:none;}
#page-tab-menu .rect a {padding:10px 20px; color:#777; position:relative; word-break: keep-all;}
#page-tab-menu .rect a:hover,
#page-tab-menu .rect a.active {color:#20b7e5;}
#page-tab-menu .rect a:hover:after,
#page-tab-menu .rect a.active:after {
    content:''; position:absolute; display:block;
    background:#20b7e5; width:100%; height:5px; border-radius:15px 15px 0 0;
    margin:auto; top:auto; right:0; bottom:-1px; left:0; z-index:10;
}
#page-tab-menu .rect a span {background:#ddd; font-size:15px; padding:2px 5px; color:#777;}
#page-tab-menu .nav {height:0;}
#page-tab-menu .nav .prev,
#page-tab-menu .nav .next {
    position:absolute; width:30px; height:30px; margin:auto; top:0; bottom:0;
    border-radius:100%; color:#000; background:rgba(0,0,0,0.1); cursor:pointer;
}
#page-tab-menu .nav .prev {left:0;}
#page-tab-menu .nav .next {right:0;}
#page-tab-menu .nav i {transform:translateY(0) translateX(-1px);}

/**/
.side-menu {
    position:fixed; margin:auto; top:0; right:1%; bottom:0; left:auto; height:260px; z-index:100;
    opacity:0;
}
.side-menu .box {
    box-shadow:0 0 20px 1px rgba(0,0,0,0.2); border-radius:15px; overflow:hidden;
}
.side-menu a {
    display:flex; justify-content: center; align-items: center; flex-direction: column;
    height:100px; width:90px; font-size:13px;
}
.side-menu .box a:nth-child(1) {background:linear-gradient(110deg,#20b7e6, #54dec9); color:#fff;}
.side-menu .box a:nth-child(2) {background:#fff; border-radius:0 0 10px 0;}
.side-menu a.top {height:60px; padding-top:10px; background:transparent; color: #666; transition: all 0.3s;}
.side-menu .icon {height:35px; display:flex; align-items: center; justify-content: center;}
.side-menu .subject {}
.side-menu a.top:hover{color: #000;}
@media(max-width:1800px){
    .side-menu {display:none;}
}

@media(max-width:1200px){
    .sub-layout {padding-top: 50px;}
    #tnb{height:80px;}
    #tnb ul.m1 {display:none;}
    #logo a{width:150px; background-size:contain;}
}
@media(max-width:768px){
    #tnb{height: 70px;}
    #logo a{width:120px;}
}