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

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

:root{
    --mainTxt:#c4c4c4;           /* c4c4c4 *//* 212121 */
    --mainBg:#212121;            /* 212121 *//* f9f9f9 */
    --rmainTxt:#212121;          /* 212121 *//* c4c4c4 */
    --rmainBg:#f9f9f9;           /* f9f9f9 *//* 212121 */
    --bgTxt:#fff;
    --aTxt:#c4c4c4;              /* c4c4c4 *//* 212121 */
    --activeTxt:#ffbd1b;         /* ffbd1b *//* a181f8 */
    --hoverTxt:#ffbd1b;          /* ffbd1b *//* a181f8 */
    --raTxt:#212121;             /* c4c4c4 *//* 212121 */
    --ractiveTxt:#a181f8;        /* ffbd1b *//* a181f8 */
    --rhoverTxt:#fff;            /* ffbd1b *//* a181f8 */
    --navActiveBg:transparent;   /* transparent *//* a181f8 */
    --navActiveline:#ffbd1b;     /* ffbd1b *//* a181f8 */

    --contentBg:#efefef;         /* efefef *//* fff */
    --tabTxt:#c4c4c4;            /* c4c4c4 *//* 212121 */
    --activeTabTxt:#fff;
    --accordionTxt:#c4c4c4;      /* c4c4c4 *//* 212121 */
    --activeAccordionTxt:#fff;
    --listTxt:#c4c4c4;           /* c4c4c4 *//* 212121 */
    --listActiveTxt:#ffbd1b;     /* ffbd1b *//* a181f8 */

    --bgAtlas:#a181f8;           /* Atlas */
    --bgDefault:#dbdbdb;         /* Default */
    --bgPrimary:#3457d5;         /* Byzantine Blue */
    --bgSuccess:#138808;         /*India Green */
    --bgWarning:#FEBE10;         /* Real Madrid Gold */
    --bgDanger:#BA0021;          /* Angels Red */
    --bgInfo:#00BFFF;            /* Capri */
}

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:1200px){
    html, body { font-size:9px !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:414px){
    html, body { font-size:8px !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:5px 12px; min-height: 66px; max-height: 66px; background: url(../assets/images/patterns01.png) repeat; box-shadow: none; border: none; border-bottom: 1px solid #c4c4c4; border-radius: 0; }

.navbarHeader { font-size: 2.4rem; color:#3f3f3f; flex-basis:228px; }
.navbarHeader a { color:#3f3f3f; }
.navbarHeader a img { max-height:66px; max-width:100%; }
.navbarHeader .hamburger { display:none; }
.navbarMenu { display: flex; list-style: none; padding-left:0; flex-basis:calc(100% - 228px - 385px); }
.navbarMenu li { padding: 8px 12px; }
.navbarMenu li a { position: relative; background-color:#e0e0e0; color:#3f3f3f; font-size:1.2rem;
    float: none; line-height: 18px; padding: 8px 10px; background-image: linear-gradient(to bottom, #fafafa 0%, #dcdcdc 100%); background-repeat: repeat-x; box-shadow: inset 0 0 1px white; border: 1px solid; border-color: #CCC #CCC #AAA; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; text-shadow: 0 1px 0 white; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffafafa', endColorstr='#ffdcdcdc', GradientType=0); transition: all; transition-duration: 0.4s; }
.navbarMenu li a.darkTheme { background:#000; }
.navbarMenu li a.darkTheme:hover { background:#000; }
.navbarMenu li a.darkTheme:hover .leftWrap {transform:translateX(-240px); background:#93CC8D; }
.navbarMenu li a:hover { color: #3f3f3f; background-image: linear-gradient(to bottom, #e8e8e8 0%, #f9f9f9 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff9f9f9', GradientType=0); text-decoration: none; border-color: #aaaaaa #aaaaaa #999999; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 3px #ffffff inset; }
.navbarMenu li.hasSub { position: relative; }
.navbarMenu .navbarSub { position: absolute; top:34px; left:12px; width:150px; height:auto; padding:0; margin:0; border:1px solid #d9d9d9; background:#fff; box-shadow:2px 2px 4px 1px rgba(0,0,0,0.3);  list-style: none; opacity: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; visibility: hidden; }
.navbarMenu .navbarSub.on { opacity:1; 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; }
.navbarMenu .navbarSub li { border-bottom: 1px solid #d9d9d9; padding:1rem 0.5rem; font-size: 1.2rem; }
.navbarMenu .navbarSub li:last-child { border-bottom:none; }

.navbarIcon { display: flex; list-style: none; color:#fff; padding-left:0; flex-basis:385px; }
.navbarIcon li { padding: 8px 12px; }
.navbarIcon li a { position: relative; background-color:#e0e0e0; color:#3f3f3f; font-size:1.2rem;
    float: none; line-height: 18px; padding: 8px 10px; background-image: linear-gradient(to bottom, #fafafa 0%, #dcdcdc 100%); background-repeat: repeat-x; box-shadow: inset 0 0 1px white; border: 1px solid; border-color: #CCC #CCC #AAA; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; text-shadow: 0 1px 0 white; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffafafa', endColorstr='#ffdcdcdc', GradientType=0); transition: all; transition-duration: 0.4s; }
.navbarIcon li a:hover { color: #3f3f3f; background-image: linear-gradient(to bottom, #e8e8e8 0%, #f9f9f9 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff9f9f9', GradientType=0); text-decoration: none; border-color: #aaaaaa #aaaaaa #999999; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 3px #ffffff inset; }
.navbarIcon li a.avatar { padding:8px 12px 8px 44px; }
.navbarIcon li a.avatar .image { position: absolute; top:1px; left:1px; width: 32px; height: 32px; }

@media screen and (max-width: 993px){
    .navbar .txt { display:none; }
    .navbarHeader { flex-basis:228px; }
    .navbarMenu { flex-basis:calc(100% - 228px - 210px); }
    .navbarIcon { flex-basis:210px; }
}
@media screen and (max-width: 768px){
    .navbar { flex-direction: column; align-items: flex-start; }
    .navbarHeader { flex-basis:100%; padding:1.2rem 0; }
    .navbarHeader .hamburger { position:absolute; top:15px; right:12px; display:block; }
    .navbarMenu { display: none; }
    .navbarIcon { display: none; }
}

/* ------------------------------------------------------------------------------------------------------------
    sideNav
------------------------------------------------------------------------------------------------------------ */
.sideNav { position:absolute; top:0; left:-240px; width:240px; height:100%; padding:66px 0 0; background:transparent; 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(--mainBg); }
.sideNavList>li { position: relative; display: flex; justify-content: flex-start; align-items: center; min-height:40px; border-bottom:1px solid #d9d9d9; }
.sideNavList>li a { width:100%; padding:0 2rem; font-size: 1.2rem; }
.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:40px; font-weight: 700; color:var(--activeNavTxt); }
.sideNavList>li>a.arrow:after { content:''; width:7px; height:7px; position:absolute; top:12px; 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:17px; right:10px; border-top:2px solid #ffffff; border-left:2px solid #ffffff; transform:rotate(45deg); transition: all 1s; }
.sideNavList>li .subMenu { display:none; width:100%; padding:0 0; margin:0 0; background:#ffffff; 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.2rem; 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: #bfbfff; }
.sideNavList>li.active .subMenu li.active a,
.sideNavList>li.active .subMenu li:hover a { display: flex; justify-content: flex-start; align-items: center; height:40px; font-weight: 700; color:var(--rhoverTxt); }

/* ------------------------------------------------------------------------------------------------------------
    contentArea
------------------------------------------------------------------------------------------------------------ */
.contentsArea { position:relative; left:0; width:calc(100% - 240px); height:100vh; padding:66px 2rem 2rem; background:var(--mainBg); transition: all 1s; overflow-y: scroll; }
.contentsArea.on { left:240px; transition: all 1s; }

@media screen and (max-width:768px){
    .contentsArea { padding:66px 1rem 2rem; }
}