@import url('./fonts/NotoSansKR/NotoSanskr.css');

/* ----------------------------------------------- */
/* common */
html{font-size:16px; width:100%; height:100%;}
body{width:100%; height:100%;}
*{padding:0; margin:0; font-family:'NotoSansKR', sans-serif; box-sizing:border-box;}
a{text-decoration:none;}
table{border-spacing:0; border-collapse:collapse;}
ul, ol{list-style:none;}
img{max-width:100%; height:auto;}

/* ----------------------------------------------- */
/* admin layout */

/* header */
.admin-header{display:flex; background:#32383d;}
.admin-header .logo{width:210px; text-align:center; line-height:100px; margin:0;}
.admin-header .logo img{}
.admin-header__cont{max-width:1600px; width:100%; flex:1; padding:0 20px 0 0;}
.admin-header__btn{height:50px; display:flex; align-items:center; justify-content:flex-end;}
.admin-header__btn .user{display:inline-block; font-size:13px; color:#b9b9b9; margin:0 15px 0 0;}
.admin-header__btn .user strong{color:#fff; font-weight:normal;}
.admin-header__btn a,
.admin-header__btn button{display:inline-block; font-size:12px; color:#222; text-align:center; width:70px; height:23px; line-height:23px; background:#fff; margin:0 0 0 10px;}
.admin-header__nav{}
.admin-header__nav ul{display:flex; margin:0;}
.admin-header__nav ul li{width:150px;}
.admin-header__nav ul li a{display:block; height:50px; line-height:50px; text-align:center; font-size:18px; color:#fff; font-weight:500;}
.admin-header__nav ul li a.on{background:#fff; color:#222; font-weight:600;}

/* cont */
.admin{display:flex; min-height:calc(100% - 100px);}
.admin__menu{width:210px; background:#f5f5f5; border-bottom:1px solid #e7e7e7; border-right:1px solid #e7e7e7;}
.admin__menu h2{height:145px; border-bottom:1px solid #e7e7e7; line-height:145px; text-align:center; font-size:25px; color:#222; font-weight:500; margin:0;}
.admin__menu > ul{}
.admin__menu > ul > li{}
.admin__menu > ul > li > a{display:block; border-bottom:1px solid #e7e7e7; font-size:14px; color:#2f2f2f; padding:20px; position:relative;}
.admin__menu > ul > li > a::after{content:''; display:block; position:absolute; right:20px; top:50%; transform:translateY(-50%); width:9px; height:6px; background:url('../img/admin_iconpng_07.png') no-repeat 0 0 / 100% auto; transform-origin:3px 1px; transition:all .3s;}
.admin__menu > ul > li > a.on{}
.admin__menu > ul > li > a.on::after{transform:rotate(180deg);}
.admin__menu > ul > li > a.no-depth::after{transform:rotate(-90deg);}

.admin__menu > ul > li > div{display:none; background:#fff;}
.admin__menu > ul > li > div.on{display:block;}

.admin__menu > ul > li > div > ul{padding:20px;}
.admin__menu > ul > li > div > ul > li{}
.admin__menu > ul > li > div > ul > li:not(:last-child){margin:0 0 20px;}
.admin__menu > ul > li > div > ul > li > a{display:block; font-size:13px; color:#666; font-weight:300; text-underline-position:under;}
.admin__menu > ul > li > div > ul > li > a.on{color:#000; text-decoration:underline;}
.admin__menu > ul > li > div > ul > li > ul{padding:5px;}
.admin__menu > ul > li > div > ul > li > ul > li{}
.admin__menu > ul > li > div > ul > li > ul > li > a{display:block; font-size:13px; color:#666; font-weight:300;}
.admin__menu > ul > li > div > ul > li > ul > li > a::before{content:'- '; font-size:inherit; color:inherit; font-weight:inherit;}


.admin__cont{overflow:auto; padding:30px; flex:1;}

/* error 페이지 */
.error{display:flex; flex-wrap:wrap; width:305px; margin:0 auto; justify-content:space-between; position:relative; top:50%; transform:translateY(-50%);}
.error__txt{font-size:17px; color:#333; font-weight:500; width: 100%; margin:0 0 30px; text-align:center;}
.error__txt::before{content:''; display:block; width:130px; height:130px; background:url('/html/common/img/error_icon_03.png') no-repeat 0 0 / 100% auto; margin:0 auto 30px;}
.error__btn{width:145px; height:40px; line-height:40px; text-align:center; display:block; font-size:17px;}
.error__main{color:#fff; background:#333;}
.error__back{color:#333; border:1px solid #333;}

/* input file */
.previewImg{max-width:200px; height:auto; display:block; margin:0 0 10px;}

/* loading */
#loading{display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:9999; animation:loading 1s infinite;}
@keyframes loading{
	from{transform:rotate(0deg)}
	to{transform:rotate(360deg);}
}







