:root {
--text-color: #212121;
--base-color: #ffffff;
--point-color: #7C7C7C;
--box-color: #f3f1ee;
--btn-color: #292929;
}

img {
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
}




body,
.txt-default { color: #212121; }
a,
.txt-point { color: #7C7C7C; }


@media all and (min-width: 1001px) {

#gnb,
#gnb *:not(script) {
display:inline-block;
}

#header { margin-left: calc(50% - 570px); margin-top: 20px;
background-repeat: no-repeat;
background-size: contain;
background-attachment: fixed;
}

#gnb_wrapper {
}

#gnb_control_box { display: none; }
}

@media all and (max-width: 1000px) {
body .#log_list .item. item-inner .ui-pic {
width: 100% !important;
max-width: 100% !important;
}
body #log_list .item .item-inner .ui-comment {
width: 100% !important;
margin: 0px !important;
}
body #log_list .item {
width:100% !important;
height: auto !important;
}
body #log_list {
display: block !important;
}
#header {
}

#gnb_wrapper {
}

#gnb_control_box {
display: block;
pointer-events: all;
}
}

#gnb_wrapper{
position:relative;
z-index:99;
text-align:center;
pointer-events: all;
}


#footer { height:0 !important;padding:0 !important;display: none !important; }

#body { margin-left: 65px; }
#header {
position: fixed;
top: 0;
left: 0;
bottom: 0;
overflow-y: auto;
width: 65px;
z-index:99;
pointer-events:none;

}
#logo {
padding:20px 0;
text-align: center;
}
#gnb #no_design_gnb li {
display:block;
margin-bottom: 15px;
text-align:center;
}

#footer{margin-left:65px;}


#gnb p {display:block;}
#gnb a {
color : #4C4C4C;
font-size: 10px;
}
#gnb a:hover {
color: #4C4C4C;
font-size: 10px;
}
#logo a {
color: #4C4C4C;
font-size: 13px;
}
#logo a:hover {
color: #4C4C4C;
font-size: 13px;
}

#footer{
padding:10px;
box-sizing:border-box;
}



@media all and (min-width: 1001px) {
html {
background-image: url('https://ar4mt4ku.ivyro.net:443/ar4mt4ku/data/site/design_background.png');
background-color: #F2F2F2;
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
background-attachment: fixed;
}
}

@media all and (max-width: 1000px) {
html {
background-image: none;
background-color: #fff;
background-repeat: no-repeat;
background-attachment: fixed;
}

#footer {margin-left:0;}
}




*::-webkit-scrollbar-track { background-color: ; }
*::-webkit-scrollbar-thumb { background: #7C7C7C; }

* { outline-color: #ffffff00; }
::selection { background:#7C7C7C; }
::-moz-selection { background:#7C7C7C; }
::-webkit-selection { background:#7C7C7C; }

::selection { color:#ffffff; }
::-moz-selection { color:#ffffff; }
::-webkit-selection { color:#ffffff; }


.highlight {
display:inline-block;
padding:0 5px;
margin-bottom:5px;
line-height:18px;
font-family:'dotum',sans-serif;
color:#ffffff;
background:#7C7C7C;
}


.ui-btn {
color: #292929;
background: #ffffff;
border-color: ;
}
.ui-btn:hover {
color: #292929;
background: #ffffff;
border-color: ;
}

.ui-btn.point {
color: #292929;
background: #ffffff;
border-color: ;
}
.ui-btn.point:hover {
color: #292929;
background: #ffffff;
border-color: ;
}

.ui-btn.etc {
color: #292929;
background: #ffffff;
border-color: ;
}
.ui-btn.etc:hover {
color: #292929;
background: #ffffff;
border-color: ;
}


.pg_wrap .pg_page {
color: #292929;
background: #ffffff;
border-color: ;
}
.pg_wrap .pg_page:hover {
color: #292929;
background: #ffffff;
border-color: ;
}

.pg_wrap .pg_current,
.pg_wrap .pg_current:hover {
color: #292929;
background: #ffffff;
border-color: ;
}




.bar-equalizer{display:none !important;}
.bgm-player ul {margin-left:0 !important;}
.bar-equalizer i {
background: #ffffff;
-webkit-box-shadow: 0px 0px 3px 0px #000000;
-moz-box-shadow: 0px 0px 3px 0px #000000;
box-shadow: 0px 0px 3px 0px #000000;
}



hr.line {
background: #7C7C7C;
}




.form-input,
input[type="file"],
input[type="text"],
input[type="password"],
textarea,
select {
color: #292929;
background: #ffffff;
border-color: ;
}

::-webkit-input-placeholder {
color: #292929;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #292929;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #292929;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #292929;
}


input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
background-color: #ffffff !important;
color: #292929;
}


.theme-box {
background-color: #f3f1ee;
color: #292929;
}
.theme-box.no-link a {
color: #292929;
}


.theme-list,
.theme-form {
background-color: ;
color: ;
}

/*** Form Area ***/
.theme-form th {
background-color: #000000;
color: #ffffff;
}
.theme-form td {
background-color: rgba(255, 255, 255, .1);
color: #ffffff;
border-top-color: #333333;
border-top-style: solid;
border-top-width: 1px;
border-bottom-color: #333333;
border-bottom-style: solid;
border-bottom-width: 1px;
}

/*** List Area ***/
.theme-list th {
background-color: #000000;
color: #ffffff;
border-top-color: #333333;
border-top-style: double;
border-top-width: 1px;
border-bottom-color: #333333;
border-bottom-style: double;
border-bottom-width: 1px;
}
.theme-list td {
background-color: ;
color: #ffffff;
}




#tab_list { border-color: ; }


#load_log_board {
}

.board-notice {
color: #292929;
}

#log_list {
color: #292929;
}
#log_list .item {
color: #292929;
border-top-color: ;
border-top-style: ;
border-top-width: px;
border-bottom-color: ;
border-bottom-style: ;
border-bottom-width: px;
border-left-color: ;
border-left-style: ;
border-left-width: px;
border-right-color: ;
border-right-style: ;
border-right-width: px;

}

#log_list .item .item-inner .ui-pic {
color: #292929;
border-top-color: ;
border-top-style: ;
border-top-width: 10px;
border-bottom-color: ;
border-bottom-style: ;
border-bottom-width: 10px;
border-left-color: ;
border-left-style: ;
border-left-width: 10px;
border-right-color: ;
border-right-style: ;
border-right-width: 10px;
}


#log_list .item .item-inner .item-comment {
color: #292929;
margin-bottom: 10px !important;
}

#log_list .item .item-inner .item-comment.parent,
#log_list .item .item-inner .item-comment.item-reply {
margin-bottom:1px !important;
}
#log_list .item .item-inner .item-comment.item-reply {opacity:0.8;}
#log_list .item .item-inner .item-comment.item-reply.last{
margin-bottom: 10px !important;
}
#log_list .item .item-inner .item-comment.item-reply .co-header:before {
color: #a9a9a9;
}

#log_list .item .item-inner .ui-comment {
color: #292929;
border-left-color: ;
border-left-style: ;
border-left-width: 10px;
border-right-color: ;
border-right-style: ;
border-right-width: 10px;

padding-left: 15px;
padding-right: 15px;
}


#log_list .item .item-inner .co-header p,
#log_list .item .item-inner .co-header p a {
color: #292929;
font-size: 11px;
}

#log_list .item .item-inner .co-header p.owner,
#log_list .item .item-inner .co-header p.owner a {
color: #ffffff00;
}

#log_list .item .item-inner .co-footer .date {
color: #a9a9a9;
font-size: 8px;
}
#log_list .item .item-inner .co-content .other-site-link {
color: #ffb8ca;
}

@font-face {
font-family: 'GongGothicLight';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicLight.woff') format('woff');
font-weight: normal;
font-style: normal;
}

.link_hash_tag {

font-family: 'GongGothicLight';
font-size:11px;
position: relative;
font-weight:bold;
margin-left: 7px;
padding: 0px 5px;
color: #000;
background-color: #ec9fff;
border-radius: 0px 3px 3px 0px;
filter:drop-shadow(0px 0px 1px rgba(0,0,0,0.3));
transition-duration: 0.2s;
}

.link_hash_tag:after {

content: "";
position: absolute;
left: -5px;
top: 0;
width: 0;
height: 0;
border-right: 5px solid #ec9fff;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
transition-duration: 0.2s;
}

.link_hash_tag:hover:after {

border-right-color: #000;

}

.link_hash_tag:before {

content: "";
width: 4px;
position: absolute;
height: 4px;
left: -2px;
top: 4px;
background: #000;
color: #000;
border-radius: 50%;
z-index: 2;

}

.link_hash_tag:hover {

color: #ec9fff;

background-color: #000;

}
#log_list .item .item-inner .co-content .log_link_tag {
color: #292929;
}
#log_list .item .item-inner .co-content .member_call {
color: #29c7c9;
}



#bo_gall .bo_tit.on {
background-color: #f3f1ee;
}


::-webkit-scrollbar{width:16px}
	::-webkit-scrollbar:horizontal{height:17px}
	::-webkit-scrollbar-corner{background: #f3f1ee}
	::-webkit-scrollbar-track {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width='2'%20height='2'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M1%200H0v1h1v1h1V1H1V0z'%20fill='rgb(243,241,238)'/%3E%3Cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2%200H1v1H0v1h1V1h1V0z'%20fill='%23fff'/%3E%3C/svg%3E");
}


::-webkit-scrollbar-thumb {
    background-color:  #f3f1ee;
    box-shadow: inset -1px -1px #bbb0a5, inset 1px 1px #fff, inset -2px -2px #a5a5a5, inset 2px 2px  #f3f1ee;
}

::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement {
    display: block;
}

::-webkit-scrollbar-button:vertical:start {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D'16'%20height%3D'17'%20fill%3D'none'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20fill-rule%3D'evenodd'%20clip-rule%3D'evenodd'%20d%3D'M15%200H0v16h1V1h14V0z'%20fill%3D'%23DFDFDF'%2F%3E%3Cpath%20fill-rule%3D'evenodd'%20clip-rule%3D'evenodd'%20d%3D'M2%201H1v14h1V2h12V1H2z'%20fill%3D'%23fff'%2F%3E%3Cpath%20fill-rule%3D'evenodd'%20clip-rule%3D'evenodd'%20d%3D'M16%2017H0v-1h15V0h1v17z'%20fill%3D'rgb(187%2C165%2C178)'%2F%3E%3Cpath%20fill-rule%3D'evenodd'%20clip-rule%3D'evenodd'%20d%3D'M15%201h-1v14H1v1h14V1z'%20fill%3D'rgb(165%2C165%2C165)'%2F%3E%3Cpath%20fill%3D'rgb(243%2C241%2C238)'%20d%3D'M2%202h12v13H2z'%2F%3E%3Cpath%20fill-rule%3D'evenodd'%20clip-rule%3D'evenodd'%20d%3D'M8%206H7v1H6v1H5v1H4v1h7V9h-1V8H9V7H8V6z'%20fill%3D'rgb(187%2C176%2C165)'%2F%3E%3C%2Fsvg%3E");
    height: 17px;
}

::-webkit-scrollbar-button:vertical:end {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='rgb(187,176,165)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='rgb(165,165,165)'/%3E%3Cpath fill='rgb(243,241,238)' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='rgb(187,176,165)'/%3E%3C/svg%3E");
    height: 17px;
}

::-webkit-scrollbar-button:horizontal:start {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='rgb(187,176,165)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='rgb(165,165,165)'/%3E%3Cpath fill='rgb(243,241,238)' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 4H8v1H7v1H6v1H5v1h1v1h1v1h1v1h1V4z' fill='rgb(187,176,165)'/%3E%3C/svg%3E");
    width: 16px;
}

::-webkit-scrollbar-button:horizontal:end {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='rgb(187,176,165)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='rgb(165,165,165)'/%3E%3Cpath fill='rgb(243,241,238)' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 4H6v7h1v-1h1V9h1V8h1V7H9V6H8V5H7V4z' fill='rgb(187,176,165)'/%3E%3C/svg%3E");
    width: 16px;
}

.window_div {
position: absolute !important;
padding: 4px 4px 15px 4px;
background-color:  #f3f1ee;
box-sizing: border-box;
box-shadow: inset -1px -1px #9b9084, inset 1px 1px #d1cbc2, inset -2px -2px #bbbbbb, inset 2px 2px #fff;
height: 750px;
overflow: hidden;
z-index: 100;
min-width: 320px;
}

.window_div .main_content {
padding: 4px 4px 4px 1px;
overflow:hidden;
height: calc(100% - 97px);
}

.window_div .main_content p {
	padding: 0px 18px;
  top: 19px;
  position: relative;
  font-size: 11px;
}

.window_div.win_table .main_content {
	height: calc(100% - 150px);
}

.main_content iframe {
    border: 2px groove transparent;
    border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5'%3E%3Cpath fill='%23cdcdcd' d='M0 0h4v1H0z'/%3E%3Cpath fill='%23cdcdcd' d='M0 0h1v4H0z'/%3E%3Cpath fill='%239b9084' d='M1 1h2v1H1z'/%3E%3Cpath fill='%239b9084' d='M1 1h1v2H1z'/%3E%3Cpath fill='%23fff' d='M0 4h5v1H0z'/%3E%3Cpath fill='%23fff' d='M0 4h1v5H0z'/%3E%3Cpath fill='%23dfdfdf' d='M3 3h1v3H3z'/%3E%3Cpath fill='%23dfdfdf' d='M1 3h3v1H1z'/%3E%3C/svg%3E") 2;
	background: #ffffff;
}


.status_bar {
position: relative;
height: 21px;
padding: 0 3px;
background: linear-gradient(to right, #c3bcaf, #f9e8e4);
display: block;
margin-bottom: 2px;
}

.status_bar_bottom {
height: 23px;
background:  #f3f1ee;
display: flex;
text-align: left;
font-family: 'Galmuri9';
font-size: 10px;
margin-bottom: 1.5px;
align-items: center;
}

.status_bar_bottom:before
{ content: '';
display: inline-block;
width: 1px;
height: 16px;
position: relative;
background:  #f3f1ee;
margin: 2px;
border-color: #fff #9b9084 #9b9084 #fff;
border-width: 1px;
border-style: solid;
float: left;
}

.status_bar_bottom span{ 
	display: inline-block;
	padding: 1px 7px;
	box-sizing: border-box;
	border: 1px solid;
	border-color: #ffffff00;}

.status_bar_bottom span:hover{
	display: inline-block;
	padding: 1px 7px;
	box-sizing: border-box;
	background-color:  #f3f1ee;
	border: 1px solid;
	border-top-color: #fff;
	border-left-color: #fff;
	border-right-color: #9b9084;
	border-bottom-color: #9b9084;}

.status_bar_bottom span:active{
	display: inline-block;
	padding: 1px 7px;
	box-sizing: border-box;
	background-color: #e5e2db;
	border: 1px solid;
	border-top-color: #9b9084;
	border-left-color: #9b9084;
	border-bottom-color: #fff;
	border-right-color: #fff;}


.staus_bar_botton1 {
width: 20px;
height: 19px;
overflow: hidden;
text-indent: -999px;
margin-left: 10px;
color: black;
transform:rotate(0deg);
float:right;
margin: 1px 0px 0px 0px;
font-weight:900; background-color:  #f3f1ee;
}

.staus_bar_botton1:active {
color:black;
transition-duration:0s;
transform: translateX(1px)
translateY(1px);
background-color:  #f3f1ee;
}

.staus_bar_botton1:before {
content: '×';
display: block;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
box-shadow: inset -1px -1px #9b9084, inset 1px 1px #fff, inset -2px -2px #bbbbbb, inset 2px 2px #dfdfdf;
line-height: 19px;
text-indent: 0;
text-align: center;
font-size: 14px;
font-weight:700;
font-family: gulim;
background-color:  #f3f1ee;}

.staus_bar_botton1:active:before {box-shadow: inset -1px -1px #fff, inset 1px 1px #9b9084, inset -2px -2px #dfdfdf,
inset 2px 2px #bbbbbb;}


.staus_bar_botton2 {
width: 20px;
height: 19px;
overflow: hidden;
text-indent: -999px;
margin-left: 10px;
color: black;
transform:rotate(0deg);
float:right;
margin: 1px 0px 0px 0px;
font-weight:700;
background-color:  #f3f1ee;
}

.staus_bar_botton2:active {
color:black;
transition-duration:0s;
transform: translateX(1px) translateY(1px);
background-color:  #f3f1ee;
}

.staus_bar_botton2:before {
content: '?';
display: block;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
box-shadow: inset -1px -1px #9b9084, inset 1px 1px #fff, inset -2px -2px #bbbbbb, inset 2px 2px #dfdfdf;
line-height: 19px;
text-indent: 0;
text-align: center;
font-size: 13px;
font-weight:900;
font-family: gulim;
background-color:  #f3f1ee;
}
.staus_bar_botton2.expandbtn:before {
	background-image:url(data:image/svg+xml;charset=utf-8,<svg width='9' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M9 0H0v9h9V0zM8 2H1v6h7V2z' fill='%23000'/></svg>);
}
.staus_bar_botton2.reductbtn:before {
	content: '_';
}
.staus_bar_botton2:active:before {box-shadow: inset -1px -1px #fff, inset 1px 1px #9b9084, inset -2px -2px #dfdfdf,
inset 2px 2px #bbbbbb;}

.status_bar span {
color:#fff;
position: relative;
max-height: 32px;
margin: 0 0 auto;
line-height: 21px;
padding-left: 5px;
font-family: 'Galmuri9';
font-size: 11px;
}

.window_navi {
background:  #f3f1ee;
display: flex;
text-align: left;
font-family: 'Galmuri9';
font-size: 10px;
margin-bottom: 1.5px;
align-items: center;
}

.window_navi li, 
        .window_navi .basic1 span{
            display: inline-block;
            padding: 1px 7px;
            box-sizing: border-box;
            border: 1px solid;
            border-color: #ffffff00;
        }

        .window_navi li:hover, 
        .window_navi .basic1 span:hover {
            background-color:  #f3f1ee;
            border-top-color: #fff;
            border-left-color: #fff;
            border-right-color: #9b9084;
            border-bottom-color: #9b9084;
        }

        .window_navi li:active, 
        .window_navi .basic1 span:active {
            background-color: #e5e2db;
            border-top-color: #9b9084;
            border-left-color: #9b9084;
            border-bottom-color: #fff;
            border-right-color: #fff;
        }

        .window_navi li:focus, 
        .window_navi .basic1 span:focus {
            outline: 1px dotted #000;
            outline-offset: -4px;
        }

.window_navi .highlight4 a {
color: black;
}

.window_navi:before {
content: '';
display: inline-block;
width: 1px;
height: 16px;
background:  #f3f1ee;
border-color: #fff #bbb0a5 #bbb0a5 #fff;
border-width: 1px;
border-style: solid;
margin: 2px;
float: left;
}



.all_toolbar_box {
box-sizing: border-box;
border: 1px solid #bbb0a5;
box-shadow: inset 1px 1px #fff;
}

.frame-top-2 {
width: 100%;
height: 23px;
margin: auto;
background:  #f3f1ee;
border-top: 1px solid #fff;
box-shadow: 0px -1px 0px #bbb0a5;
text-align: left;
}

.ui-mmb-button {
	text-align: left;
	height: 46px;
	width: 100%;
	margin: auto;
	background:  #f3f1ee;
	border-top: 1px solid #fff;
	box-shadow: 0px -1px 0px #9b9084;
}

.ui-mmb-button:before {
	content: '';
	display: inline-block;
	width: 1px;
	height: 40px;
	left: -6px;
	background:  #f3f1ee;
	border-color: #fff #bbb0a5 #bbb0a5 #fff;
	border-width: 1px;
	border-style: solid;
	margin: 2px;
	float: left;
}

.ui-btn-toolbar {
	display: flex;
	padding: 2px 15px 1px 15px;
	box-sizing: border-box;
	border: 1px solid;
	border-color: #ffffff00;
	float: left;
	align-items: center;
	flex-direction: column;
	color: black;
}

.ui-btn-toolbar:hover {
	background-color:  #f3f1ee;
	border: 1px solid;
	border-top-color: #fff;
	border-left-color: #fff;
	border-right-color: #9b9084;
	border-bottom-color: #9b9084;
}

.ui-btn-toolbar:active {
	background-color: #e5e2db;
	border: 1px solid;
	border-top-color: #9b9084;
	border-left-color: #9b9084;
	border-bottom-color: #fff;
	border-right-color: #fff;
}

.ui-btn-toolbar:focus {
    outline: 1px dotted #000;
    outline-offset: -4px;
}


.top-toolbar {
	display: flex;
	flex-direction: row;
	align-items: center;
	overflow: hidden;
	position: relative;
	border-top: 1px solid #fff;
	box-shadow: 0px -1px 0px #bbb0a5;
	margin-top: 2px;
}


.address-hotkey:before {
	content: '';
    display: inline-block;
    width: 1px;
    position: relative;
    height: 18px;
    background:  #f3f1ee;
    border-color: #fff #bbb0a5 #bbb0a5 #fff;
    border-width: 1px;
    border-style: solid;
    margin: 2px 8px 0px 2px;
    top: -2px;
}

.address-hotkey {
	color: rgb(0, 0, 0);
	display: flex;
	align-items: center;
}


.address-input {
	background-color: #fff;
	box-shadow: inset -1px -1px #fff, inset 1px 1px #bbbbbb, inset -2px -2px #dfdfdf, inset 2px 2px #9b9084;
	box-sizing: border-box;
	padding: 3px 4px;
	flex: 1;
	margin-left: 10px;
	word-break: break-all;
	overflow: hidden;
	white-space: nowrap;
}

.status-bar-down {
    gap: 1px;
    display: flex;
    margin: 0px 1px;
}

    .status-bar-field {
    box-shadow: inset -1px -1px #ffffff, inset 1px 1px #bbb0a5;
    flex-grow: 1;
    margin: 0;
    padding: 2px 3px;
    color: #9b9084;
}



.button_area {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  position: relative;
  top: 33px;
  right: 8px;
}

.ui-btn-login {
  padding: 0 25px;
  margin: 0px 3px;
  box-shadow: inset -1px -1px #9b9084, inset 1px 1px #fff, inset -2px -2px #bbbbbb, inset 2px 2px #dfdfdf;
  border: 1px;
  background-color: #f3f1ee;
  word-break: keep-all;
  min-height: 23px;
  min-width: 75px;
  padding: 0 12px;
}

.ui-btn-login:focus {
  outline: 1px dotted #000;
  outline-offset: -4px;
}

.ui-btn-login:active {
  box-shadow: inset -1px -1px #fff, inset 1px 1px #9b9084, inset -2px -2px #dfdfdf, inset 2px 2px #bbbbbb;
  transition-duration: 0s;
  transform: translateX(1px) translateY(1px);
}
.window_div.on {
	display: flex !important;
}
@media only screen and (max-width:720px){
    #view_area {width:95%;}
    #view_area .theme-box {
        width:95%;
        margin: auto;
    }
    .bo_v_nb { width: 100%; }
}

#view_area {width: 100%;}
#view_area .theme-box {width: 100%; margin: auto; padding: 0px; height: 100%;} 

.button_area {
        align-items: center;
        display: flex;
        justify-content: flex-end;
        position: relative;
        top: 33px;
        right: 8px;
    }

    .status-bar-down {
    gap: 1px;
    display: flex;
    margin: 0 1px;
	height: 20px;
	overflow: hidden;}

    .status-bar-field {
    box-shadow: inset -1px -1px #ffffff, inset 1px 1px #9b9084;
    flex-grow: 1;
    margin: 0;
    padding: 2px 3px;
    color: #9b9084;

    }
    .header-btns{
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 23px;
    }
    .header-btn{
    display: inline-flex;
    flex-direction: row;
    padding: 1px 7px;
    box-sizing: border-box;
	border: 1px solid;
	border-color: #ffffff00;
    }

    .header-btn:hover{
        padding: 1px 7px;
        box-sizing: border-box;
        background-color:  #f3f1ee;
        border: 1px solid;
        border-top-color: #fff;
        border-left-color: #fff;
        border-right-color: #9b9084;
        border-bottom-color: #9b9084;}

    .header-btn:active {
	padding: 1px 7px;
	box-sizing: border-box;
	background-color: #e5e2db;
	border: 1px solid;
	border-top-color: #9b9084;
	border-left-color: #9b9084;
	border-bottom-color: #fff;
	border-right-color: #fff;
    }

    .header-first{
    text-decoration-line: underline;
    }
    .middle_box {
    display: flex;
    flex-direction: row;
    position: relative;
    margin-bottom: 3px;
    box-shadow: 0px 1px 0px #fff;
    }
    .middle_btns_wrapper{
    position: relative;
    border-top: 2px solid #fff;
    border-bottom: 1px solid #c7c7c7;
    box-shadow: 0px -1px 0px #9b9084;
    margin: 2px 0px 1px 0px;
}
	
	.middle_btns {
	display: inline-flex;
	flex-wrap: wrap;
	position: relative;
	width: 60px;
	padding: 0px 2px;
	box-sizing: border-box;
	justify-content: center;
	align-items: flex-start;
	}
	.middle_btns .status_bar_btn {
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;}
	
	.middle_style {
	height: 60px;
	box-shadow: inset -1px -1px #fff, inset 1px 1px #bbbbbb, inset -2px -2px #dfdfdf, inset 2px 2px #bbb0a5;
	margin: 8px;
	}

	.bottom_btns {
	height: 60px;
	display: flex;
	flex-direction: row;
	}
	.colorpicker{
	width: 100%;
	background: url(http://ar4mt4ku.ivyro.net/ar4mt4ku/img/017.png);
	height: 100%;
	background-repeat: no-repeat;
	margin: 5px 0px;
	display: inline-block;
	}
	.status-bar-down{
	margin-top: 4px;
	}
	.nav_wrapper {
	display: flex;
	width: 50%;
	position: relative;
	justify-content: center;
	align-items: flex-start;
	}
	.bo_v_nb {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	justify-content: flex-end;
	} 
	.bo_v_nb .prev, .bo_v_nb .next {
	width: 60px;
	height: 40px;
	display: flex;
	margin: 2px;
	box-shadow: inset -1px -1px #fff, inset 1px 1px #bbbbbb, inset -2px -2px #dfdfdf, inset 2px 2px #bbb0a5;
	align-items: center;
	justify-content: center;
	}

	.status_bar_bottom {
		height: 20px;
		padding: 0 7px;
		background:  #f3f1ee;
		display: flex;
		text-align: left;
		font-family: 'Galmuri9';
		font-size: 10px;
		border: 1px solid #b9aab3;
		box-shadow: inset 1px 1px #fff;
		margin-bottom: 1.5px;
		align-items: center;
	}

	.status_bar_bottom:before
	{   content: '';
			display: inline-block;
			width: 1px;
			height: 14px;
			left: -6px;
			position: relative;
			background:  #f3f1ee;
			margin: 1px;
			border-color: #fff #9b9084 #9b9084 #fff;
			border-width: 1px;
			border-style: solid;
			margin: 1px;
			float: left;
	} 

	.status_bar_btn {
	width: 20px; 
	height: 19px; 
	overflow: hidden; 
	text-indent: -999px; 
	margin-left: 10px;
	color: black;
	transform:rotate(0deg);
	float:right;
	margin: 1px 0px -1px 0px;
	font-weight:900; background-color:  #f3f1ee
	}

	.status_bar_btn:active {
	color:black;
	transition-duration:0s;
	transform: translateX(1px)
	translateY(1px);
			background-color:  #f3f1ee
	}

	.status_bar_btn:before { 
			content: ''; 
			display: block; 
			position: absolute; 
			top: 0; left: 0; right: 0; bottom: 0; 
			box-shadow: inset -1px -1px #9b9084, inset 1px 1px #fff, inset -2px -2px #bbbbbb, inset 2px 2px #dfdfdf;
			line-height: 19px; 
			text-indent: 0; 
			text-align: center; 
			font-size: 14px; 
			font-weight:700; 
			font-family: gulim; } 

	.status_bar_btn:active:before {box-shadow: inset -1px -1px #fff, inset 1px 1px #9b9084, inset -2px -2px #dfdfdf, inset 2px 2px #bbbbbb;} 

	.status_bar_btn.mod:before {
			content:'_';
	}
	.status_bar_btn.del:before {
			content:'x';
	}
	.status_bar span {
			color:#fff; 
			position:  relative;  
			max-height: 32px; 
			margin: 0 0 auto; 
			line-height: 21px; 
			padding-left: 5px;
			font-family: 'Galmuri9';
			font-size: 10px;
	}

	#view_area .status-bar-down {
		left: -1px;
    bottom: -13px;
    position: absolute;
    width: calc(100% - 2px);
    background:  #f3f1ee;
    padding: 1px 4px 3px 1px;
    border-top: 2px solid white;
    box-shadow: 0px -1px 0px #c7c7c7;
	}

	#window_view{

	}