*{-webkit-font-smoothing:antialiased;} html,body,body div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video,details,summary{margin:0;padding:0;border:0;vertical-align:baseline;background:transparent; /*overflow: hidden; width: fit-content;*/} html{ /*overflow: auto;*/ } body { position: relative; } article,aside,figure,footer,header,hgroup,nav,section,details,summary{display:block; /*width: fit-content;*/ }object,embed{max-width:100%}img{-ms-interpolation-mode:bicubic;vertical-align:top}ul,li { margin: 0px; padding: 0px; list-style: none; }h1,h2,h3,h4,h5,h6{font-weight:normal !important;line-height:inherit !important;margin:0px;padding:0px}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none;cursor: pointer;}p{margin:0px 0px 0px 0px}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help}table{border-collapse:collapse;border-spacing:0}th{font-weight:bold;vertical-align:bottom}td{font-weight:normal;vertical-align:top}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}pre{white-space:pre;white-space:pre-wrap;white-space:pre-line;word-wrap:break-word}input[type="radio"]{vertical-align:text-bottom}input[type="checkbox"]{vertical-align:bottom} select,input,textarea{font:99% sans-serif}table{font-size:inherit;font:100%}small{font-size:85%}strong{font-weight:bold}td,td img{vertical-align:top}sub,sup{font-size:75%;line-height:0;position:relative}sup{top:-0.5em}sub{bottom:-0.25em}pre,code,kbd,samp{font-family:monospace, sans-serif}.clickable,label,input[type=button],input[type=submit],input[type=file],button{cursor:pointer}button,input,,option,textarea{padding:0px;margin:0px}button{width:auto;overflow:visible;height:auto; background: transparent; border: none;}.clearfix:before,.clearfix:after{content:".";display:block;height:0;overflow:hidden}.clearfix:after{clear:both}.clearfix{zoom:1}html,body{margin:0px;padding:0px}.left{float:left}.right{float:right}.both{clear:both} body button:focus, body input:focus, body textarea:focus { outline: none; } .prevent-select { -webkit-user-select: none; -ms-user-select: none; user-select: none; }



@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i&display=swap'); /*font-family: 'Playfair Display', serif;*/
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');



::-webkit-scrollbar { width: 8px; height: 0; }
::-webkit-scrollbar-track { background: #eeeeee;}
::-webkit-scrollbar-thumb { background: #AAAAAA; }

body { color: #000000; font-size: 12px; line-height: 20px; font-family: 'Roboto', sans-serif; font-weight: 400; letter-spacing: 1px !important; overflow: hidden; overflow-y: hidden !important; overflow-x: auto; }
body > .wrap { white-space: nowrap; /*margin-left: 40px; display: table; overflow-y: hidden !important; overflow-x: auto;*/ }

input,textarea,button,select,table, tr, td { font-size: 12px; line-height: 20px; font-family: 'Roboto', sans-serif; font-weight: 400 !important; letter-spacing: 1px !important; background:transparent; margin:0; border:0; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; }
input:focus,select:focus,textarea:focus,button:focus { outline:none; }
select { padding: 8px; text-align: left; }
video { background: #ddd url(../_media/bg_video.png) center center no-repeat; }

/* ::-webkit-scrollbar { width:0!important; height:0!important; }*/
::-moz-selection { background: #0066ff; color: #ffffff; text-shadow:none; }
::selection {	background: #0066ff; color: #ffffff; }

.mce-widget.mce-tooltip { display:none!important; }

.alert { position:fixed; top:0; left:0; width:100%; height:100%; background: #0066ff; opacity:.9; filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=90); -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=90); color: #ffffff; z-index:9999; }
.alert .txt { position:absolute; top:50%; width:100%; text-align:center; }

a.byraul { font-size: 10px; font-weight: 700; opacity: 0; }
a.byraul font { font-size: 8px; font-weight: 300; }
a.byraul:hover { text-decoration: underline;  opacity: 1; }



pre[data-copy],
code[data-copy], 
input[data-copy] { width: 0px; height: 0px; font-size: 0; letter-spacing: 0; line-height: 0; opacity: 0; display: inline-block; }

section { /*display: table-cell;*/ display: inline-block; position: relative; padding: 0px 0px 0px 16px; white-space: normal; -ms-overflow-style: none; overflow: -moz-scrollbars-none; width: calc(414px - 40px - 16px); /*min-width: calc(414px - 40px - 16px);*/ }

section > .navigation { position: sticky; float: left; width: 0px; }
section > .navigation > button { margin-top: 1px; width: 40px; height: 120px; position: relative; font-size: 10px; overflow: hidden; }
section > .navigation > button:hover { background: #DDDDDD; }
section > .navigation > button .value { position: absolute; height: 120px; top: 0px; left: 8px; width: 120px; letter-spacing: 2px; transform: rotate(-90deg); -webkit-transform: rotate(-90deg); }

section > .wrap { padding: 0px 16px 32px 41px; /*width: 305px; width: -webkit-fill-available;*/ background: #eeeeee; overflow: inherit; overflow-x: hidden; overflow-y: auto !important; }

section > .wrap > .section_title { font-weight: 700; padding: 8px 0px; font-size: 24px; line-height: 32px; }

section > .wrap > .section_subtitle { font-weight: 700; padding: 8px 0px; font-size: 12px; line-height: 16px; }

section > .wrap > [data-group-title] { cursor: pointer; border-top: 1px solid #eeeeee; }
section > .wrap > [data-group-title]::before { content:'+ '; }
section > .wrap > [data-group-title].active::before { content:'– '; }
section > .wrap > [data-group-content] { position: absolute; top: -50000px; left: 0px; }
section > .wrap > [data-group-content].active { position: inherit; top: auto; left: auto; }

section > .wrap > .section_space { height: 32px; }

section > .wrap > .section_space_small { height: 16px; }

section > .wrap > .section_info { /*padding: 8px 16px;*/ font-size: 12px; line-height: 18px; }

section > .wrap > .section_action { font-size: 0; line-height: 0px; padding:0; letter-spacing: 0; }
section > .wrap > .section_action button,
section > .wrap > .section_action select,
section > .wrap > .section_action input { background: #dddddd; margin: 0px 1px 1px 0px; padding: 0px 16px; height: 40px; text-align:left; cursor:pointer; vertical-align: bottom; }
section > .wrap > .section_action button:hover { background: #4F92F0; color: #ffffff; }
section > .wrap > .section_action input[name="filter"] { background: transparent; border-bottom: 1px solid #CCCCCC; width: 100%; padding: 0px 0px; }

section > .wrap > .section_action.clearfix > article { padding: 16px 16px; float: left; background: #dddddd; margin: 0px 1px 1px 0px; }
section > .wrap > .section_action.clearfix > article .label { font-weight: 700; font-size: 12px; line-height: 16px; margin-bottom: 8px; }
section > .wrap > .section_action.clearfix > article .value {  }
section > .wrap > .section_action.clearfix > article .value button,
section > .wrap > .section_action.clearfix > article .value select,
section > .wrap > .section_action.clearfix > article .value input { padding: 0px 0px; }

section > .wrap > .section_language { font-size: 0; padding: 0; }
section > .wrap > .section_language button { background: #dddddd; margin: 0px 1px 1px 0px;  padding: 0px 16px; height: 40px; text-align:left; cursor:pointer; }
section > .wrap > .section_language button:hover { background: #4F92F0; color: #ffffff; }
section > .wrap > .section_language button.active { background: #0066ff; color: #ffffff; }

section > .wrap > button { background: transparent; border: none; height: 100%; width: 100%; padding: 8px 16px; min-height: 40px; text-align:left; cursor:pointer; display:block; border-bottom:1px solid #ffffff; }
section > .wrap > button:hover { background: #4F92F0; color: #ffffff; }
section > .wrap > button.active { background: #0066ff; color: #ffffff; }

section > .wrap > ul { /*border-top: 1px solid #ffffff;*/ }
section > .wrap > ul > li { border-bottom: 1px solid #AAAAAA; position:relative; display:block; }
section > .wrap > ul > li > button { background:transparent; border:none; height:100%; width:100%; padding: 16px 16px; min-height: 40px; font-size: 14px; line-height: 20px; text-align:left; cursor:pointer; display:block; }
section > .wrap > ul > li > button:hover { background: #4F92F0; color: #ffffff; }
section > .wrap > ul > li > button.active { background: #0066ff; color: #ffffff; }
section > .wrap > ul > li > article { padding: 16px 0px; display:block; overflow: hidden; }
section > .wrap > ul > li > article .label { font-weight: 700; font-size: 12px; line-height: 16px; margin-bottom: 8px; }
section > .wrap > ul > li > article .label .info { font-size: 12px; line-height: 16px; font-style:italic; }

section > .wrap > ul > li > article .help { font-size: 12px; line-height: 16px; margin-bottom:8px; font-style:italic; }
section > .wrap > ul > li > article .value { white-space: nowrap; }
section > .wrap > ul > li > article .value img { margin-right:10px; }
section > .wrap > ul > li > article .value input { border:none; width: calc(100% - 16px); background: #ffffff; padding: 8px; }
section > .wrap > ul > li > article .value input[type="checkbox"] { width: auto ; }
section > .wrap > ul > li > article .value textarea { resize:none; resize:vertical; border:none; padding: 8px; width: calc(100% - 16px); height:269px; background: #ffffff; }
section > .wrap > ul > li > article .value .mce-tinymce.mce-container.mce-panel { border: none !important; }


section > .wrap > ul > li > article .value .dropbox {
	position:relative;
	overflow:hidden;
	text-align:center;
	background:url(../Image/bg_W50.png) repeat center center;
}

section > .wrap > ul > li > article .value .dropbox .progress {
	background:red;
	height:4px;
	width:0;
}

section > .wrap > ul > li > article .value .dropbox .message {
	padding:20px 0;
}

section > .wrap > ul > li > article .value .dropbox.over {
	background: #4F92F0;
	color: #ffffff;
}





section > .wrap > ul > li > article .action {
	position:absolute;
	top:0;
	right:0;
	height:100%;
	font-size: 0;
}

section > .wrap > ul > li > article .action button,
section > .wrap > ul > li > article .action select {
	background: #efefef;
	border:none;
	height:100%;
	padding: 0px 16px;
	text-align:left;
	cursor:pointer;
	border-left:1px solid #AAAAAA;
	vertical-align: top;
	text-align: center;
}

section > .wrap > ul > li > article .action button:hover {
	background: #4F92F0;
	color: #ffffff;
}

section > .wrap > ul > li > article .action button.active {
	background: #4F92F0;
	color: #ffffff;
}

section > .wrap > ul > li > article .action button.sortable {
	cursor:move;
}



section > .wrap > ul > li.clearfix article { float:left; /*border-left:1px solid #ffffff;*/ }

section > .wrap > ul > li.clearfix > article { margin: 0 16px 0 0; padding: 16px 16px 16px 0; border-right: 1px solid #AAAAAA;  }

section > .wrap > ul > li.clearfix article input {
	width:auto;
}

section > .wrap > ul > li.clearfix article:first-child {
	border-left:none;
}

section > .wrap > ul > li.clearfix button,
section > .wrap > ul > li.clearfix select,
section > .wrap > ul > li.clearfix input {
	float:left;
	border-left:1px solid #ffffff;
	width:inherit;
}

section > .wrap > ul > li.clearfix button:first-child,
section > .wrap > ul > li.clearfix select:first-child {
	border-left:none;
}

section > .wrap > ul > li.clearfix:first-child { /*border-top: 1px solid #ffffff;*/ }




section > .wrap > ul > li.clearfix {  }
section > .wrap > ul > li.clearfix .left { float: left; width: calc(33.33% - 32px); margin: 16px 0px; }
section > .wrap > ul > li.clearfix .left .surlabel { font-weight:300; font-size: 9px; line-height:15px; font-style: italic; }
section > .wrap > ul > li.clearfix .left .label { font-weight:700; font-size: 12px; line-height: 16px; margin-bottom: 8px; }
section > .wrap > ul > li.clearfix .left .sublabel { font-weight:300; font-size: 9px; line-height:15px; font-style: italic; margin-bottom: 16px; }
section > .wrap > ul > li.clearfix .left .dropzone { border: 1px solid #eee; width: 100%; min-height: 100px; padding: 0px; }
section > .wrap > ul > li.clearfix .left .dropzone .dropbox { position: relative; text-align: center; height: 100px; }
section > .wrap > ul > li.clearfix .left .dropzone .dropbox.over { background: #0031CD; }
section > .wrap > ul > li.clearfix .left .dropzone .dz-preview,
section > .wrap > ul > li.clearfix .left .dropzone-previews .dz-preview { background: #fff; }
section > .wrap > ul > li.clearfix .left .dropzone .dz-preview .dz-details,
section > .wrap > ul > li.clearfix .left .dropzone-previews .dz-preview .dz-details { width: auto; height: 24px; margin: 0px; padding: 0px; }
section > .wrap > ul > li.clearfix .left .dropzone .dz-preview .dz-details {  }
section > .wrap > ul > li.clearfix .left .dropzone .dz-preview .dz-details .dz-filename {  }
section > .wrap > ul > li.clearfix .left .dropzone .dz-preview .dz-details .dz-size {  }
section > .wrap > ul > li.clearfix .left .dropzone .dz-preview .dz-progress,
section > .wrap > ul > li.clearfix .left .dropzone-previews .dz-preview .dz-progress { top: 10px; left: 10px; right: 70px; height: 4px; background: #eee; }
section > .wrap > ul > li.clearfix .left .dropzone .dz-preview .dz-progress .dz-upload,
section > .wrap > ul > li.clearfix .left .dropzone-previews .dz-preview .dz-progress .dz-upload { background-color: #0031CD; }
section > .wrap > ul > li.clearfix .left .dropzone .dz-preview.dz-processing .dz-remove { right: 20px; height: 24px; background: none; font-size: 12px; line-height: 24px; color: #000; text-align: right; }
section > .wrap > ul > li.clearfix .left .dropzone .dz-preview.dz-processing .dz-remove:before { content: "remove"; }
section > .wrap > ul > li.clearfix .left .space { height: 20px; }
section > .wrap > ul > li.clearfix .left form#embed_url_video input { width: 232px; padding: 4px; background: #fff; }
section > .wrap > ul > li.clearfix .right { float: right; width: 66.66%; margin: 16px 0px 32px 0px; overflow: hidden; }
section > .wrap > ul > li.clearfix .right > ul { /*border-top: 1px solid #ffffff;*/ }
section > .wrap > ul > li.clearfix .right > ul > li { border-bottom: 1px solid #DDDDDD; position: relative; display: block; height: 40px; overflow: hidden; }
section > .wrap > ul > li.clearfix .right > ul > li > article { padding: 0px; display:block; overflow: hidden; border-right: none; }
section > .wrap > ul > li.clearfix .right > ul > li > article .value { white-space: nowrap; font-size: 10px; line-height: 16px; }
section > .wrap > ul > li.clearfix .right > ul > li > article .value iframe,
section > .wrap > ul > li.clearfix .right > ul > li > article .value .video,
section > .wrap > ul > li.clearfix .right > ul > li > article .value video,
section > .wrap > ul > li.clearfix .right > ul > li > article .value img { vertical-align: middle; margin-right: 10px; height: 40px; background: #ffffff; }
section > .wrap > ul > li.clearfix .right > ul > li > article .action { position: absolute; top: 0px; right: 0px; height: 100%; font-size: 0; line-height: 0px; }
section > .wrap > ul > li.clearfix .right > ul > li > article .action button { background: #efefef; border: none; height: 100%; padding: 10px; text-align: left; cursor: pointer; border-left: 1px solid #DDDDDD; }
section > .wrap > ul > li.clearfix .right > ul > li > article .action button:hover { background: #333; color: #fff; opacity: 1; }
section > .wrap > ul > li.clearfix .right > ul > li > article .action button.active { background: #333; color: #fff; opacity: 1; }
section > .wrap > ul > li.clearfix .right > ul > li > article .action button.sortable { cursor: move; }
section > .wrap > ul > li.clearfix .right > .action { position: relative; top: inherit; left: inherit; right: inherit; bottom: inherit; margin-top: 16px; background: #ffffff; }
section > .wrap > ul > li.clearfix .right > .action > button { padding: 4px 8px; background: #ffffff; }


section > .wrap > ul > li article .action button { opacity: .4; }
section > .wrap > ul > li:hover article .action button { opacity: 1; }

section[data-position="0"] > .navigation { display: none; }
section[data-position="1"] > .navigation button.back { display: none; }
section[data-position="1"] { margin-left:40px; }
section { opacity: .2; }
section:last-of-type { opacity: 1; }
section:first-of-type { opacity: 1; }
section:hover { opacity: 1; }






[data-filter] { display: none !important; }

section.width_375 > .wrap { width: calc(375px - 40px - 24px); }
section.width_414 > .wrap { width: calc(414px - 40px - 24px); }
section.width_667 > .wrap { width: calc(667px - 40px - 24px); }
section.width_768 > .wrap { width: calc(768px - 40px - 24px); }
section.width_1024 > .wrap { width: calc(1024px - 40px - 24px); }




#background_action {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background: #ffffff;
	color: #0066ff;
	/*opacity:.9;
	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
	-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=90);*/
	z-index:999999;
}

#background_action .content {
	position:absolute;
	top:50%;
	width:100%;
	text-align:center;
	margin-top: -40px;
}

#background_action .content .logo font { font-size: 80px; font-weight: 900; }
#background_action .content .logo img { height: 40px; margin-bottom: 8px; }
#background_action .content .text { -webkit-animation: pulsate 2s ease-out;
    -webkit-animation-iteration-count: infinite;
    opacity: 0.2;
}



@-webkit-keyframes pulsate {
    0% {
        opacity: 0.2;
    }
    50% {
        opacity: 1.0;
    }
    100% {
        opacity: 0.2;
    }
}



@media screen and (max-width: 1024px) {

}

@media screen and (max-width: 768px) {

}

@media screen and (max-width: 667px) {
	section {  width: calc(414px - 40px - 16px); max-width: calc(414px - 40px - 16px); }
	section > .wrap > ul > li.clearfix .left { float: none; width: 100%; }
	section > .wrap > ul > li.clearfix .right { float: none; width: 100%; }

}

@media screen and (max-width: 414px) {

}

@media screen and (max-width: 375px) {

}



#loader {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	width: 120px;
	height: 120px;
	margin: -76px 0 0 -76px;
	border: 16px solid #f3f3f3;
	border-radius: 50%;
	border-top: 16px solid #0066ff;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
  }

  @-webkit-keyframes spin {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
  }

  @keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
  }

  /* Add animation to "page content" */
  .animate-bottom {
	position: relative;
	-webkit-animation-name: animatebottom;
	-webkit-animation-duration: 1s;
	animation-name: animatebottom;
	animation-duration: 1s
  }

  @-webkit-keyframes animatebottom {
	from { bottom:-100px; opacity:0 }
	to { bottom:0px; opacity:1 }
  }

  @keyframes animatebottom {
	from{ bottom:-100px; opacity:0 }
	to{ bottom:0; opacity:1 }
  }