/* ------------------------------------------
 * Atlas v2.1
 * Author:swkim@atlassoft.co.kr
------------------------------------------ */
/*@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');*/

/*@import url('https://fonts.googleapis.com/css?family=Jua:400'); */

@font-face{
	font-family:'Noto Sans KR';
	font-weight:100;
	src:url('../assets/fonts/NotoSansCJKkr-Thin.eot');
	src:url('../assets/fonts/NotoSansCJKkr-Thin.eot?#iefix') format('embedded-opentype'),
	url('../assets/fonts/NotoSansCJKkr-Thin.woff2') format('woff2'),
	url('../assets/fonts/NotoSansCJKkr-Thin.woff') format('woff'),
	url('../assets/fonts/NotoSansCJKkr-Thin.ttf') format('truetype');
}
@font-face{
    font-family:'Noto Sans KR';
    font-weight:200;
    src:url('../assets/fonts/NotoSansCJKkr-DemiLight.eot');
    src:url('../assets/fonts/NotoSansCJKkr-DemiLight.eot?#iefix') format('embedded-opentype'),
    url('../assets/fonts/NotoSansCJKkr-DemiLight.woff2') format('woff2'),
    url('../assets/fonts/NotoSansCJKkr-DemiLight.woff') format('woff'),
    url('../assets/fonts/NotoSansCJKkr-DemiLight.ttf') format('truetype');
}
@font-face{
    font-family:'Noto Sans KR';
    font-style:light;
    font-weight:300;
    src:url('../assets/fonts/NotoSansCJKkr-Light.eot');
    src:url('../assets/fonts/NotoSansCJKkr-Light.eot?#iefix') format('embedded-opentype'),
    url('../assets/fonts/NotoSansCJKkr-Light.woff2') format('woff2'),
    url('../assets/fonts/NotoSansCJKkr-Light.woff') format('woff'),
    url('../assets/fonts/NotoSansCJKkr-Light.ttf') format('truetype');
}
@font-face{
    font-family:'Noto Sans KR';
    font-style:normal;
    font-weight:400;
    src:url('../assets/fonts/NotoSansCJKkr-Regular.eot');
    src:url('../assets/fonts/NotoSansCJKkr-Regular.eot?#iefix') format('embedded-opentype'),
    url('../assets/fonts/NotoSansCJKkr-Regular.woff2') format('woff2'),
    url('../assets/fonts/NotoSansCJKkr-Regular.woff') format('woff'),
    url('../assets/fonts/NotoSansCJKkr-Regular.ttf') format('truetype');
}
@font-face{
    font-family:'Noto Sans KR';
    font-weight:500;
    src:url('../assets/fonts/NotoSansCJKkr-Medium.eot');
    src:url('../assets/fonts/NotoSansCJKkr-Medium.eot?#iefix') format('embedded-opentype'),
    url('../assets/fonts/NotoSansCJKkr-Medium.woff2') format('woff2'),
    url('../assets/fonts/NotoSansCJKkr-Medium.woff') format('woff'),
    url('../assets/fonts/NotoSansCJKkr-Medium.ttf') format('truetype');
}
@font-face{
    font-family:'Noto Sans KR';
    font-style:bold;
    font-weight:700;
    src:url('../assets/fonts/NotoSansCJKkr-Bold.eot');
    src:url('../assets/fonts/NotoSansCJKkr-Bold.eot?#iefix') format('embedded-opentype'),
    url('../assets/fonts/NotoSansCJKkr-Bold.woff2') format('woff2'),
    url('../assets/fonts/NotoSansCJKkr-Bold.woff') format('woff'),
    url('../assets/fonts/NotoSansCJKkr-Bold.ttf') format('truetype');
}
@font-face{
    font-family:'Noto Sans KR';
    font-style:black;
    font-weight:900;
    src:url('../assets/fonts/NotoSansCJKkr-Black.eot');
    src:url('../assets/fonts/NotoSansCJKkr-Black.eot?#iefix') format('embedded-opentype'),
    url('../assets/fonts/NotoSansCJKkr-Black.woff2') format('woff2'),
    url('../assets/fonts/NotoSansCJKkr-Black.woff') format('woff'),
    url('../assets/fonts/NotoSansCJKkr-Black.ttf') format('truetype');
}

/* ------------------------------------------------------------------------------------------------
Core:General style
-------------------------------------------------------------------------------------------------*/
* { box-sizing: border-box; }
::-webkit-scrollbar { width: 3px; background:transparent; border-radius: 0 5px 5px 0; }
::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.25); }
::-webkit-scrollbar-thumb { background: #0075ed; border-radius: 1px; }



:root{
    --mainBg:#f0eff5;            /* 212121 *//* f9f9f9 */
    --mainTxt:#555555;
    --aTxt:#787878;
    --activeTxt:#333333;

    --navBg:#ffffff;
    --navActiveBg:transparent;
    --navActiveline:#3a53cf;
    --activeNavTxt:#3a53cf;
    --rhoverTxt:#fff;

    --panel:#fff;
    --panelBorder:#d6d6d6;
    --formBack:#fff;

    --btnTxt:#fff;

}

html, body { font-family:'Noto Sans KR', sans-serif; width:100%; background:var(--mainBg); font-size:10px !important; color:var(--mainTxt); -webkit-font-smoothing:antialiased;  overflow-x:hidden; word-wrap:break-word; word-break:keep-all; }

.wrapper { margin:0 0; padding:0; /* transition:all 0.5s ease-in; -webkit-transition:all 0.5s ease-in; -moz-transition:all 0.5s ease-in; -o-transition:all 0.5s ease-in; */ }
.wrapper:before, .wrapper:after { display:table; content:" "; }
.wrapper:after { clear:both; }

section { position:relative; margin:0 0; padding:3rem 0; background:#F9F9F9; overflow:hidden; }
article { position:relative; margin:0; padding:0 0; }

.container { position:relative; width:1180px; padding:0 1rem; margin:0 auto; }

@media screen and (max-width:1200px) {
    .container { position: relative; width: 100%; padding: 0 1rem; margin: 0 auto; }
}

a { text-decoration: none; color:var(--aTxt); }
a:hover, a:active, a:focus { outline:none; text-decoration:none; color:var(--activeTxt); }

h1 { font-size:3.0rem; }
h2 { font-size:2.4rem; }
h3 { font-size:1.8rem; }
h4 { font-size:1.6rem; }
h5 { font-size:1.2rem; }
h6 { font-size:1.0rem; }
h1, h2, h3, h4, h5, h6 { margin:0; font-weight:400; }

.ellipsis { width:100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.img-responsive { width:100% !important; }

@media screen and (max-width:1919px){
    html, body { font-size:8px !important; }
}
@media screen and (max-width:1200px){
    html, body { font-size:7px !important; }
}
@media screen and (max-width:993px){
    html, body { font-size:8px !important; }
}
@media screen and (max-width:768px){
    html, body { font-size:9px !important; }
}
@media screen and (max-width:435px){
    html, body { font-size:7px !important; }
}

/* ------------------------------------------------------------------------------------------------------------
    Header : atop.php
------------------------------------------------------------------------------------------------------------ */
header.navbar { display: flex; justify-content: space-between; align-items: center; position: absolute; top: 0; left: 0; right: 0; z-index: 1000; margin:0; padding:0px 20px; /* 5px 12px; */ /* min-height: 60px; max-height: 60px; */ height:60px; background: #2d4393; box-shadow: none; border: none; }

.navbarHeader { font-size: 2.4rem; color:#3f3f3f; flex-basis:159px; }
.navbarHeader a { color:#fff; }
.navbarHeader a img { max-height:66px; max-width:100%; }
.navbarHeader .hamburger { display:none; }

.navbarMenu { display: flex; list-style: none; padding-left:0; margin:0; flex-basis:calc(100% - 200px - 400px); height:100%; }
.navbarMenu li { display: flex; justify-content: center; align-items: center; padding:0px 0px; height:100%; }
.navbarMenu li a { display: flex; justify-content: center; align-items: center; padding:0px 12px; height:100%; background: transparent; color:#a2b2eb; font-size:1.6rem; font-weight:500; transition: all; transition-duration: 0.1s; cursor: pointer; }
.navbarMenu li.active a, .navbarMenu li a:hover { color: #fff; font-weight:900; border-bottom:3px solid #fff; }
.navbarMenu.mobile { display:none; }

.navbarIcon { display: flex; justify-content: flex-end; align-items: center; list-style: none; color:#fff; width:400px; height:100%; padding-left:0; margin:0; }
.navbarIcon li { display: flex; justify-content: flex-start; align-items: center; flex-flow: row wrap; padding:0px 0px; color:#a2b2eb; font-size:1.4rem; }
.navbarIcon li:first-child { width:250px;}
.navbarIcon li p { width:100%; color:#fff; margin:0 0 5px 0; font-size:1.6rem; }
.navbarIcon li p:last-child { width:50%; margin:0 0 0 10px; font-size:1.4rem; }
.navbarIcon li:last-child { display: flex; justify-content: flex-start; align-items: center; flex-flow: row nowrap; padding:0px 0px; color:#fff; font-size:2.8rem; font-weight:900; }
.navbarIcon li:last-child img { height:60px; }

.navbarIcon li a { display: flex; justify-content: center; align-items: center; padding:0 0; color:#fff; font-size:1.6rem;  }
.navbarIcon li a:hover { color: #42569e; font-weight:900; }
.navbarIcon li a img:hover { scale: 1.2; filter: opacity(0.7) drop-shadow(0 0 0 #a2b2eb); }
.navbarIcon li:last-child { margin:0 0 0 10px; }

@media screen and (max-width:1919px){
    header.navbar { padding:0px 10px; }
    .navbarHeader { flex-basis:178px; }
    .navbarMenu { flex-basis:calc(100% - 200px - 335px); }
    .navbarIcon { width:335px; }
    .navbarIcon li:first-child { width:185px;}
    .navbarIcon li:last-child { font-size:2.0rem; }
}

@media screen and (max-width: 1200px){
    .navbar .txt { display:none; }
    .navbarMenu { flex-basis:calc(100% - 200px - 145px); }
    .navbarIcon { width:145px; }
    .navbarIcon li:first-child { display: none; }
}
@media screen and (max-width: 993px){
    header.navbar { justify-content: center; align-items:center; height:80px; }
    .navbar { flex-flow: column nowrap; }
    .navbarHeader { flex-basis:auto; padding:1.2rem 0; }
    .navbarHeader .hamburger { position:absolute; top:15px; right:12px; display:block; }
    .navbarMenu { display:none; }
    .navbarMenu.mobile { display:flex; flex-flow: row wrap; margin:10px 0 0; }
    .navbarIcon { display: none; }
}
@media screen and (max-width: 768px){
    header.navbar { justify-content: center; align-items:center; flex-flow:row wrap; height:122px; }
    .navbarHeader { display: flex; justify-content: center; align-items:center; flex-basis:100%; padding:1.2rem 0; }
    .navbarHeader .hamburger { position:absolute; top:15px; right:12px; display:block; }
    .navbarMenu { display:none; }
    .navbarMenu.mobile { display:flex; flex-flow: row wrap; flex-basis:100%; margin:10px 0 0; height:60px; }
    .navbarMenu.mobile li { width:calc(100% / 3); height:30px; }
    .navbarIcon { display: none; }
}

/* ------------------------------------------------------------------------------------------------------------
    sideNav
------------------------------------------------------------------------------------------------------------ */
.sideNav { position:absolute; top:0; left:-200px; width:200px; height:100%; padding:60px 0 0; background:var(--navBg); transition: all 1s; border-right:1px solid #d9d9d9;  }
.sideNav.on { left:0px; transition: all 1s; }

.sideNavList { width:100%; padding:0 0; margin:0 0; background:var(--navBg); }
.sideNavList>li { position: relative; display: flex; justify-content: flex-start; align-items: center; min-height:50px; border-bottom:1px solid #d9d9d9; }
.sideNavList>li a { width:100%; padding:0 2rem; font-size: 1.6rem; }
.sideNavList>li a:hover { color:var(--activeNavTxt); font-weight:900; }
.sideNavList>li.active,
.sideNavList>li:hover { display: flex; justify-content: flex-start; align-items: center; flex-flow: row wrap; background:var(--navActiveBg); border-right:5px solid var(--navActiveline); color:var(--activeTxt); }
.sideNavList>li.active a { display: flex; justify-content: flex-start; align-items: center; height:50px; font-weight: 700; color:var(--activeNavTxt); }
.sideNavList>li>a.arrow:after { content:''; width:7px; height:7px; position:absolute; top:20px; right:15px; border-top:2px solid #d9d9d9; border-left:2px solid #d9d9d9; transform:rotate(225deg); transition: all 1s; }
.sideNavList>li>a.arrow.turn:after { top:20px; right:15px; border-top:2px solid var(--activeNavTxt); border-left:2px solid var(--activeNavTxt); transform:rotate(45deg); transition: all 1s; }
.sideNavList>li .subMenu { display:none; width:100%; padding:0 0; margin:0 0; background:#f0f0f0; list-style: none; }
.sideNavList>li.active .subMenu { display:block; }
.sideNavList>li.active .subMenu li { display: flex; justify-content: flex-start; align-items: center; height:40px; border-bottom:1px solid #d9d9d9; }
.sideNavList>li.active .subMenu li:last-child { border:none; }
.sideNavList>li.active .subMenu li a { padding:0 2rem; font-size: 1.4rem; font-weight:500; color:var(--mainTxt); }
.sideNavList>li.active .subMenu li.active,
.sideNavList>li.active .subMenu li:hover { display: flex; justify-content: flex-start; align-items: center; background:var(--activeNavTxt); color:var(--rhoverTxt); }
.sideNavList>li.active .subMenu li.active a,
.sideNavList>li.active .subMenu li:hover a { display: flex; justify-content: flex-start; align-items: center; height:50px; font-weight: 700; color:var(--rhoverTxt); }

.sideNavList.subMenuItem.active { display: block; }
.sideNavList.subMenuItem { display:none; }

@media screen and (max-width: 993px){
    .sideNav { padding:80px 0 0; }
}
@media screen and (max-width: 768px){
    .sideNav { padding:122px 0 0; }
}

/* ------------------------------------------------------------------------------------------------------------
    contentArea
------------------------------------------------------------------------------------------------------------ */
.contentsArea { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; position:relative; left:0px; width:calc(100% - 200px); height:100vh; padding:8rem 2rem 2rem; background:var(--mainBg); transition: all 1s; overflow-y: scroll; }
.contentsArea.on { left:200px; transition: all 1s; }

.summaryTop { display: flex; justify-content:flex-start; align-items: center; flex-flow: row wrap; width:100%; height:100px; margin:0 0 1.0rem; padding:0; background:transparent; }
.contentsTop { display: flex; justify-content: space-between; align-items: center; flex-flow: row wrap; width:100%; height:200px; margin:0 0; padding:2rem; background: var(--panel); border:1px solid var(--panelBorder); border-radius:5px; box-shadow: 1px 1px 5px 1px #00000040; }
.contentsBottom { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: row wrap; width:100%; height:calc(100% - 180px); margin:20px 0 0 0; padding:0 0; background:transparent; border:none; }


.controlPanel { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: row wrap; width:100%; height:100%; margin:0 0 0; padding:0 0; background:transparent; border:none; }


@media screen and (max-width:1200px){
    .contentsArea { padding:10rem 1rem 1rem; }
    .contentsTop { height:160px; }
    .contentsBottom { height:calc(100% - 180px); }
}

@media screen and (max-width: 993px){
    .contentsArea { padding:11rem 1rem 1rem; }
}

@media screen and (max-width:768px){
    .contentsArea { padding:19rem 1rem 2rem; }
    .summaryTop { height:190px; margin:0 0 10px; }
}