html {overflow:auto;height:100%; min-width:1280px;  }
body {margin:0;padding:0;font-size:0.75em; height:100%;font-family: "Pretendard", serif;   -webkit-font-smoothing: antialiased;overflow:auto; -moz-osx-font-smoothing: grayscale;  position: relative; width: 100%; min-width:1280px;margin:0 auto; background:url('../img/main_bg.jpg')no-repeat center; background-size:cover;} 
html, h1, h2, h3, h4, h5, h6, form, fieldset, img { margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family: "Pretendard", serif;  }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
legend {position:absolute;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle; font-family: "Pretendard", serif;  }
input, button {margin:0;padding:0;font-size:1em;font-family: "Pretendard", serif;  ;}
button {cursor:pointer}
input[type=text], input[type=password], input[type=submit], input[type=image], button {font-size:1em; -webkit-appearance:none}
textarea, select {font-size:1em;font-family: "Pretendard", serif;  }
textarea {border-radius:0;-webkit-appearance:none;font-family: "Pretendard", serif;  ;}
select {margin:0;background:none;font-family: "Pretendard", serif;  }
p {margin:0;padding:0;word-break:break-all; font-family: "Pretendard", serif;  }
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none; font-weight:400; font-family: "Pretendard", serif;   !important;}
ul,li,dl,dt,dd {padding:0;margin:0; font-family: "Pretendard", serif;  }
ul {list-style:none}
*,:after,:before {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
input[type="text"]:focus {outline: none;}
input[type="password"]:focus {outline: none;}
textarea:focus {outline: none;}
input[type="text"]::placeholder {color:#98958F;  letter-spacing: 0px;}
input[type="password"]::placeholder {color:#98958F;  letter-spacing: 0px;}
textarea::placeholder {color:#98958F;  letter-spacing: 0px;}



.logo {display: inline-block; width:100%; height:75px; padding:22px 30px; background:#fff;}
.logo img { }

.bor_1 {position: absolute; left:0; top:0; z-index: 1;}
.bor_2 {position: absolute; right:0; top:0; z-index: 1;}
.bor_3 {position: absolute; right:0; bottom:0; z-index: 1;}
.bor_4 {position: absolute; left:0; bottom:0; z-index: 1;}

nav {position: fixed; left:10px; top:75px; height:calc(100vh - 85px);  width:280px; z-index: 21;border-radius:15px;}
nav:after {content:''; position: absolute; left:-10px; top:0; width:10px; height:100vh; background:#fff;}
nav:before {content:''; position: absolute; right:-10px; width:10px; height:100vh; background:#fff; top:0;}
nav .scroll {height:calc(100% - 247px); width:100%; overflow-x: hidden;  overflow-y: scroll; padding:0 25px; }
nav .scroll::-webkit-scrollbar {display: none;}
/*nav::-webkit-scrollbar {
    width: 6px;
 }
nav::-webkit-scrollbar-thumb {
    background-color: #eee;
    border-radius: 10px;
 }
nav::-webkit-scrollbar-track {
    background-color: #fafafa;
    border-radius: 10px;
 }*/
nav ul.menu {margin-top:30px;}
nav ul.menu li {margin-top:3px; display: inline-block; width:100%; margin-bottom:15px;}
nav ul.menu li>a {color:#7B7B7B; font-weight:400; display: inline-block; width:100%; font-size:16px;}
nav ul.menu li>a img {margin:-2px 11px 0 0; filter:grayscale(100); width:25px;}
nav ul.menu li .s_link {padding-left:34px; margin-top:8px; max-height:0; overflow: hidden; position: relative; opacity: 0;
  transition:  max-height .8s ease, opacity .8s ease;}
nav ul.menu li.on .s_link {max-height: 300px; opacity: 1;}
nav ul.menu li.on .s_link:after {content:''; position: absolute; left:10px; top:0; width:3px; height:100%; background:#ebebeb}
nav ul.menu li .s_link a {display: inline-block; width:100%; padding:8px 15px 9px 15px; color:#777; font-size:14px; border-radius:6px; transition: .5s;}
nav ul.menu li .s_link a:hover {color:#333;}

nav ul.menu li.on {margin-bottom:35px; margin-top:5px;}
nav ul.menu li:first-child.on {margin-top:0;}
nav ul.menu li.on>a {color:#444; font-weight:500;}
nav ul.menu li.on>a img {filter:initial;}
nav ul.menu li .s_link a.on {color:#CEB086; background:rgba(191,191,191,.17); font-weight:500; margin:2px 0;}

nav .profile {padding:15px; border-bottom:3px solid #fff;}
nav .profile .box {}
nav .profile .box:after {content:''; clear:both; display: table;}
nav .profile .box .img {float:left; width:45px; height:45px; border-radius:50%; background:url('../img/profile.jpg')no-repeat center; background-size:cover;}
nav .profile .box .img.c {background:url('../img/chaebi_profile.png')no-repeat center; background-size:cover;}
nav .profile .box .txt {float:right; width:calc(100% - 55px); position: relative;}
nav .profile .box .txt p {font-size:14px; color:#222; font-weight:500; margin-top:5px;}
nav .profile .box .txt span {font-size:12px; color:#999; display: inline-block; width:100%; margin-top:4px; font-weight:300;}
nav .profile .box .txt button {position: absolute; right:0; top:8px; border:none; background:none; width:30px; height:30px;}

nav .profile .dash_bt {width:100%; height:34px; font-size:14px; color:#fff; background: linear-gradient(to right, #B48765, #F2ECB6); border:none; border-radius:8px; position: relative; margin-top:13px; font-weight:500; padding-bottom:1px;}
nav .profile .dash_bt img {position: absolute; left:11px; top:9px; width:15px;}

nav .banner {padding:12px; border-radius:14px; }
nav .banner .box {width:100%;background:url('../img/banner_img.jpg')no-repeat center; background-size:cover; height:100px; border-radius:12px; padding:0 20px; filter:grayscale(100) opacity(.9);}
nav .banner span {display: inline-block; width:100%; font-size:11px; color:#fff; margin-top:29px; font-weight:300; pacing: .3px; padding-left:1px;}
nav .banner p {font-size:17px; color:#fff; font-weight:400; margin-top:4px; letter-spacing: .5px; line-height:1.1em;}

.bg_col { width:100vw; height:100vh; position: relative;}
.bg_col:after {content:''; position: fixed; left:0; width:100vw; bottom:0; height:10px; background:#fff;}


.hd {position: absolute; right:0px; width:calc(100% - 300px); top:0;}
.hd:after {content:''; clear:bothl; display: table;}
.hd h2 {display: inline-block; font-size:20px; color:#222 ;font-weight:600; margin:25px 0 0 15px;}
.hd h2 span {display: inline-block; margin-left:3px; font-weight:400; font-size:15px; color:#bfbfbf;}
.hd .nav_close {border:none; background:#f6f6f6; border-radius:13px;margin-top:-4px;}
.hd .right {float:right; margin-top:15px; margin-right:20px;}
.hd .right button {float : right; border:none; border-radius:10px; height:44px; padding:0 23px; background: linear-gradient(to right, #B48765, #e7ddb6); font-size:15px; color:#fff; font-weight:400; letter-spacing: .4px;}
.hd .right button img {margin:-2px 7px 0 0;}

.share_pop {position: fixed; left:0; top:0; display:none;  height:100%; width:100%; background:rgba(0,0,0,0.5); z-index: 101;}
.share_pop.on {display: block;}
.share_pop .view {position: absolute; left:50%; top:50%; width:90%; max-width:470px; padding:30px; background:#fff; border-radius:20px; text-align: left; box-shadow: -3px -3px 30px rgba(0,0,0,.10); transform: translate(-50%,-50%)}
.share_pop .view .share_close {position: absolute; right:20px; top:20px; border:none; background:none; z-index: 1;}
.share_pop .view h2 {font-size:18px; color:#222; font-weight:700; margin-top:0;}
.share_pop .view .sns {margin:18px 0 20px 0; text-align: center;}
.share_pop .view .sns button {border:none; background:none; font-size:14px; color:#444; margin:0 20px; font-weight:500;}
.share_pop .view .sns button img {margin-bottom:6px; width:50px;}
.share_pop .view .link {margin-top:30px; position: relative; border-top:1px solid #eee; padding-top:30px;}
.share_pop .view .link p {font-size:15px; color:#222; font-weight:600;}
.share_pop .view .link input[type="text"] {width:100%; border-radius:6px; height:40px; font-size:14px; border:none;padding:0 15px; margin-top:9px;}
.share_pop .view .link input[type="text"]:disabled {background:#f4f4f4; color:#aaa; }
.share_pop .view .link button {position: absolute; right:0; bottom:0; width:40px; height:40px; background:#f4f4f4; border:none; border-radius:6px; }
.share_pop .view .link button img {width:17px;}


.ctrl_box {position: absolute; left:30px; bottom:14px;}
.ctrl_box .select {cursor: pointer; float:left; width:105px; height:30px;  position: relative; z-index: 10;}
.ctrl_box .select .label {width:100%; text-align:left; border:none; height:30px; padding-left: 12px; background: none; cursor: pointer; font-size:13px; color:#747474; background:url('../img/sel_arrow.svg')no-repeat center right 11px #e3e2e1; border-radius:6px;font-weight:400; background-size:10px;}
.ctrl_box .select .optionList {position: absolute; bottom:37px; left: 0px; width: 100%;  max-height: 0; transition: .3s ease-in;   z-index: 1;   overflow:hidden; border-radius:6px; font-weight:400; }
.ctrl_box .select.active .optionList {max-height: 170px;overflow:auto; background:#e3e2e1; }
.ctrl_box .select .optionItem { padding:6px 17px 6px 12px; font-size:13px; color:#747474; font-weight:400;}
.ctrl_box .select .optionItem:first-child {padding-top:14px;}
.ctrl_box .select .optionItem:last-child {padding-bottom:14px;}
.ctrl_box .select .optionList::-webkit-scrollbar {width: 6px;}
.ctrl_box .select .optionList::-webkit-scrollbar-thumb {background:  none; border-radius: 45px;} 
.ctrl_box .ctrl_bt {float:left; margin-left:4px; height:30px; padding:0 8px; font-size:13px; color:#fff; background:#333; border-radius:6px; border:none; }


.content {width:calc(100% - 310px); left:300px; height:calc(100vh - 85px);  float:left; position: relative; transition: .3s;  border-radius:15px; }
.content:after {content:''; clear:both; display: table; }
.content:before {content:''; position: absolute; right:-10px; top:0; height:100%; width:10px; background:#fff}