body{ overflow-x: hidden; margin:0 auto; background-color:#f2f2f2; color:#3e4146; font-family: Arial, Helvetica, NanumGothic, Dotum, "돋움", "Apple SD Gothic Neo"; }
.wrapper{ width:1200px; padding-top:15px; padding-left:40px; padding-right:40px;}

.boxTitle{ padding:10px; border-bottom: 1px solid #ebebeb; font-size: 18px; font-weight: bold; letter-spacing: -0.3px; line-height: 50px; padding-left:20px; font-family:Arial, Helvetica, NanumGothicBold, NanumGothic, Dotum, "Apple SD Gothic Neo";}
.plus{height:25px; vertical-align: top;}
.buttonTitle{ font-size:14px; margin-left: -5px; padding-right:7px; font-family:Arial, Helvetica, NanumGothicBold, NanumGothic, Dotum, "Apple SD Gothic Neo"; }
.thumbnailTitle{ font-size:14px; font-family:Arial, Helvetica, NanumGothicBold, NanumGothic, Dotum, "Apple SD Gothic Neo";}
.pointColorA{ color:#3e4146; }

.dib{ display:inline-block; }
.db{ display:block; }
.vat{ vertical-align:top; }
.vam{ vertical-align:middle; }
.vab{ vertical-align: baseline; }
.bannerType{ background-color:#fff; border:1px solid #dadde5; margin-bottom:15px; }
.bannerType .thumbnailBox{ width:375px; height:80px; background-color:#f5f7f9; border:1px solid #dadde5; }
.bannerType .thumbnailBox img{ width:100%; }
.bannerLayout{ display:flex; justify-content: center; margin-bottom: 6px;}
.bannerGroup{ margin:0px 8px 10px 8px; transition:0.3s ease-in-out; cursor:pointer;}
.bannerInfo{ display:inline-block; background-color:#fff; width:590px; border:1px solid #dadde5; }
.bannerInfoWrapper{ padding-left: 10px; margin-bottom:20px; }

.imageRatioText{ font-size:14px; }
.m1{margin-left:10px;}
.m2{margin-left:20px;}
.m3{margin-left:30px;}
.mt1{margin-top:10px;}

.imageInputTitle{ color:#3e4146; width:130px; display:inline-block; font-size:15px; font-family:Arial, Helvetica, NanumGothicBold, NanumGothic, Dotum, "Apple SD Gothic Neo";}
.imageInput1{ display:none; background-color:#fff; }
.imageInput2{ display:none; margin-left:180px; background-color:#fff; }
.imageType1{ display:none; margin-bottom: 30px;}
.imageType2{ display:none; margin-bottom: 30px;}

.textInputTitle{ width:130px; display:inline-block; font-size:15px; font-family:Arial, Helvetica, NanumGothicBold, NanumGothic, Dotum, "Apple SD Gothic Neo";}
.textInputTitle2{ width:130px; display:inline-block; margin: 0px; padding-bottom:10px; font-size:14px; }

textarea::placeholder { font-size:15px; color: #b9b9b9;}
#textInput1{margin-bottom:10px;}
#textInput2{margin-bottom:5px;}

.textInput{ padding:0 13px; width: 350px; display:inline-block; font-size:15px; line-height:37px; height:40px; resize: none; vertical-align:text-top; border:1px solid #dadde2; margin-top: -11px; font-family:Arial, Helvetica, NanumGothic, Dotum, "Apple SD Gothic Neo";}
.textInput2{ padding:0 13px; width: 350px; height:40px; resize: none; border:1px solid #dadde2; line-height:37px; font-family:Arial, Helvetica, NanumGothic, Dotum, "Apple SD Gothic Neo";}
.textGuide{ line-height:0; margin-right:28px; font-size:12px; color:#999; text-align:right; opacity:0;}
.textGuide2{ line-height:0; margin-right:0px; font-size:13px; color:#80868e; text-align:right; margin-top:7px; opacity:1; font-family:Arial, Helvetica, NanumGothic, Dotum, "Apple SD Gothic Neo";}
.textGuide2 span{ color:#3e4146; }

.bannerEditor{ display:inline-block; margin-left:12px; background-color:#fff; width:590px; vertical-align:top; border:1px solid #dadde2; }
.bannerSpace{ width:492px; height:104px; background-color:#F5F7F9; margin:0 auto; overflow:hidden; border: 1px solid #dadde2; }

.positionCheck{ margin-left: 48px; }
.positionOption{ width:120px; display:inline-block; font-size:14px; }

.layerGroup{ margin:0 auto; width:495px; margin-bottom:10px; border:1px solid #dadde2; transition:0.3s ease-in-out; }
.layerButton{ margin:0 auto; width:495px; height:40px; margin-bottom:10px; border:1px solid #dadde2; }
.layerTab{ height:40px; border-bottom:1px solid #fff; transition:0.3s ease-in-out; }
.layerTabLast{ height:40px; border-bottom:1px solid #dadde2; }
.layerTitle{ display:inline-block; margin-left:5px; margin-top:12px; vertical-align: top; font-size:14px; }
.layerImageTitle{ display:inline-block; margin-left:40px; margin-top:12px; vertical-align: top; font-size:14px; }
.thumbnail{ position: absolute; margin-top: 10px; margin-left: 5px; width: 27px; height: 19px; background-color: #f5f7f9; border: 1px solid #dadde2; }

.firstIcon{ margin-top:10px; height:20px; margin-left:10px; }
.subIcon{ margin-top:10px; height:20px; float:right; margin-right:5px;  cursor:pointer; transition:0.2s ease-in-out; }

.openBox{ width:100%; height:0px; background-color:#F5F7F9; overflow:hidden; transition:0.3s ease-in-out; }

.fontBox{ width: fit-content; margin: 0 auto; }
.fontTitle{ display:inline-block; margin:0 auto; padding-top:14px; font-size:14px; }
.fontSelect{ display:inline-block; width:198px; margin-top: 11px; height:25px; vertical-align: top; }
.fontSizeSelect{ display:inline-block; width:60px; margin-top: 2px; height:25px; vertical-align: top; }

.styleBox{ width: fit-content; margin: 0 auto; margin-top: 10px; }
.sizeTitle{ display:inline-block; margin:0 auto; padding-top:5px; margin-left:0px; padding-bottom:10px; font-size:14px; }
.sizeIcon1{ line-height:20px; text-align:center; vertical-align: text-top; display:inline-block; font-size:8px; width:20px; height:20px; border:1px solid #000; opacity:0.3; user-select:none; cursor: pointer; }
.sizeIcon2{ line-height:20px; text-align:center; vertical-align: text-top; display:inline-block; font-size:12px; width:20px; height:20px; border:1px solid #000; opacity:0.3; user-select:none; cursor: pointer; }
.sizeIcon3{ line-height:20px; text-align:center; vertical-align: text-top; display:inline-block; font-size:16px; width:20px; height:20px; border:1px solid #000; opacity:0.3; user-select:none; cursor: pointer; }

.colorTitle{ vertical-align:middle; display:inline-block; margin:0 auto; margin-left:15px; font-size:14px;}
.colorIcon1{ vertical-align:middle; display:inline-block; background-color:#666666; width:18px; height:18px; border:2px solid #666666; user-select:none; color:#fff; }
.colorIcon2{ vertical-align:middle; display:inline-block; background-color:#333333; width:18px; height:18px; border:2px solid #333333; user-select:none; color:#fff; }
.colorCheck{ margin-left: 2px; margin-top: 2px; width: 15px; height: 15px; }

.fontSpaceTitle{ font-size:14px; }

#renderingMessage{ position: relative; top:-164px; width:492px; height:106px; background-color:#fff; display:none;}
#renderingMessage p{ position:absolute; width:100%; top:28px; top:28px; text-align:center; color:#43a0fa; font-family:Arial, Helvetica, NanumGothicBold, NanumGothic, Dotum, "Apple SD Gothic Neo";}

.fadeIn{ -webkit-animation-duration:0.5s; -webkit-animation-name:fadeIn; animation-name:fadeIn; animation-duration: 0.5s; animation-fill-mode:both; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fadeOut{ -webkit-animation-duration:0.5s; -webkit-animation-name:fadeOut; animation-fill-mode:both; }
@keyframes fadeOut { from { opacity:1; } to { opacity:0; } }

.buttonWrapper{ height: 60px; margin-left: 307px; padding-top: 10px; }
.downloadButton{  font-size:14px; margin-left: 10px; display:inline-block; cursor:pointer; height:40px; width:110px; background-color:#43a0fa; border: 1px solid rgba(0, 0, 0, 0.08); color:#fff; font-family:Arial, Helvetica, NanumGothicBold, NanumGothic, Dotum, "Apple SD Gothic Neo";}
.resetButton{ font-size:14px; display:inline-block; cursor:pointer; height:40px; width:110px; background-color:#43a0fa; border: 1px solid rgba(0, 0, 0, 0.08); color:#fff; font-family:Arial, Helvetica, NanumGothicBold, NanumGothic, Dotum, "Apple SD Gothic Neo";}

.checkIconOn{ width: 11px; vertical-align: unset; opacity: 1; padding-left: 10px; padding-right: 4px; }
.checkIconOff{ width:25px; vertical-align:sub; opacity:0; }

.file_button_label{ display:inline-block; text-align:center; padding:5px; background-color:#fff; border:1px solid #dadde5; cursor:pointer;}
.file_button_label p{ font-size:14px; }

.imageInput2g{ display:block; margin-left:164px; margin-top:-43px;}

.buttonTextSelect{ display:none; height:25px; margin-top: -3px; }

.buttonTextInputg{ display:none; }
.buttonTextInputg textarea{ line-height:37px; }

.editorWrapper{ opacity:0; transition:0.3s ease-in-out; width:1201px; }

.file_button_label p{ line-height:0px; }
.fileIcon{ width:20px; vertical-align:top; margin-top: 4px; padding-right:5px; opacity:1; display:none; }

.imageMoveButtonWrapper{ position:relative; top:0px; left:40px; }
.imageMoveButton{ position:absolute; width:20px; height:20px; top:0px; left:0px; border:1px solid #ccc; border-radius:5px; text-align:center; user-select:none; cursor:pointer; color:#9b9b9b; background-color:#fff; font-size:12px; }

.cTitle{font-size: 14px; display: inline-block;}
.imageMoveButtonWrapper .top{ display: inline-block; top:10px; left:65px; line-height: 20px; }
.imageMoveButtonWrapper .down{ display: inline-block; top:10px; left:94px; line-height: 20px; }
.imageMoveButtonWrapper .left{ display: inline-block; top:10px; left:123px; line-height: 20px; }
.imageMoveButtonWrapper .right{ display: inline-block; top:10px; left:152px; line-height: 20px; }

.arrowLeft{ position: absolute; top: 4px; left: 3px; width: 12px; height: 12px; transform: rotate(-180deg); background-image: url("../icon/arrowSmall2.svg"); }
.arrowTop{ position: absolute; top: 4px; left: 4px; width: 12px; height: 12px; transform: rotate(-90deg); background-image: url("../icon/arrowSmall2.svg"); }
.arrowRight{ position: absolute; top: 4px; left: 5px; width: 12px; height: 12px; transform: rotate(0deg); background-image: url("../icon/arrowSmall2.svg"); }
.arrowDown{ position: absolute; top: 4px; left: 4px; width: 12px; height: 12px; transform: rotate(90deg); background-image: url("../icon/arrowSmall2.svg"); }

.imageZoomButtonWrapper{ position:relative; top:-8px; left:40px;}
.imageZoomOutButton{ display:inline-block;  margin-left:4px; width:50px; height:22px; border:1px solid #ccc; border-radius:5px; text-align:center; user-select:none; cursor:pointer; color:#3e4146; background-color:#fff; font-size:12px; line-height: 23px; font-size:13px;}
.imageZoomInButton{ display:inline-block;  width:50px; height:22px; border:1px solid #ccc; border-radius:5px; text-align:center; user-select:none; cursor:pointer; color:#3e4146; background-color:#fff; font-size:12px; line-height: 23px; font-size:13px;}
.zoomSlide{ width:240px; vertical-align:sub; }

.imageMoveButton:hover{ border:1px solid #43a0fa; }
.imageMoveButton:active{ border:1px solid #0f77dc; }

.imageZoomInButton:hover{ border:1px solid #43a0fa; }
.imageZoomInButton:active{ border:1px solid #0f77dc; }

.imageZoomOutButton:hover{ border:1px solid #43a0fa; }
.imageZoomOutButton:active{ border:1px solid #0f77dc; }

.line3{ margin-left:163px; margin-top: 0px; padding:9px 13px; line-height: 20px;}
.paddingSlide{ width:184px; vertical-align:sub; }

.infoTypeTitle{ font-size:14px; }

.buttonTypes{ vertical-align: text-top; }

.buttonTextInputg{ margin-top:5px; }

input[type=checkbox] { display:none; }
input[type=checkbox] + label {display: inline-block; vertical-align: sub; cursor: pointer; width: 18px; height: 18px; margin-right:5px; background-image: url('../icon/checkBoxOff.svg'); background-size:cover;}
input[type=checkbox]:checked + label {background-image: url('../icon/checkBoxOn.svg'); background-size:cover; }

.custom-select { display:inline-block; position: relative; font-size:13px; width:121px; border: 1px solid #dadde5; }
.custom-select select { display: none }
.select-selected { background-color: #fff; }

.select-selected:after { content: ''; position: absolute; top:6px; right:7px; width:13px; height:13px; transform:rotate(90deg); background-image: url("../icon/arrowSmall.svg"); }
.select-selected.select-arrow-active:after { transform: rotate(-90deg);}

.select-items div,.select-selected { color: #000; padding-left: 5px; padding-top: 4px; padding-bottom: 4px; border: 1px solid transparent; cursor: pointer; }
.select-items { border: 1px solid #dadde5; position: absolute; background-color: #fff; top: 100%; left: -1px; right: 0; width:100%; z-index: 99; }
.select-hide { display: none; }
.select-items .same-as-selected { background-color: #fff; color:#43a0fa;; }
.select-items-default{ color:#43a0fa; }
.select-items div:hover{ background-color: #f9fafc; }

.fontSlider{ width: fit-content; margin: 0 auto; }
.customizing{ display: inline-block; vertical-align: text-bottom; margin-left:3px; }
.customizing input[type=range] { -webkit-appearance: none; }
.customizing  input[type=range]:focus { outline: none; }
.customizing input[type=range]::-webkit-slider-runnable-track { width: 210px; height: 10px; cursor: pointer; animate: 0.2s; background: #43a0fa; border-radius:10px 10px 10px 10px; }
.customizing input[type=range]::-webkit-slider-thumb { border: 2px solid #43a0fa; height: 15px; width: 15px; background: #ffffff; cursor: pointer; -webkit-appearance: none; margin-top: -3px; border-radius:10px 10px 10px 10px; }
.customizing input[type=range]:focus::-webkit-slider-runnable-track { background: #43a0fa; }

#outputWrapper{ position:fixed; top:0px; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.6); display:none;}
.outputBg{ position:absolute; top:100px; left:0px; right:0px; bottom:0px; margin:0 auto; width:800px; height:460px; background-color:#fff; border: 1px solid #dadde5; }
.outputBg .closeButton{ position:absolute; top:18px; right:10px; width:40px; height:40px; cursor:pointer;}
.outputBg .closeButton .ico{ margin-left: 12px; margin-top: 12px; width: 14px; }
.outputTitle{ width: 100%; text-align: center; margin-top: 50px; font-size:27px; font-family:Arial, Helvetica, NanumGothicBold, NanumGothic, Dotum, "Apple SD Gothic Neo"; }
.ot1{ color:#3e4146; }
.ot2{ color:#43a0fa; }
.outputImage{ border: 1px solid #dbdde2; width:750px; height:160px; background-color:#f5f7f9; margin: 0 auto; margin-top: 50px; }
.outputByte{ width:750px; text-align:right; margin:auto; margin-top:5px; }
.outputButtonSpace{ width:100%; border-top:1px solid #dbdde2; margin-top: 25px; }
.outputDownload{ cursor:pointer; width:140px; height:44px; margin:0 auto; margin-top: 25px; background-color:#43a0fa; border: 1px solid rgba(0, 0, 0, 0.08); }
.outputDownload img{ width: 25px; padding: 9px; margin-left: 10px; }
.outputDownload span{ display: inline-block; color:#fff; vertical-align: top; margin-top: 13px; font-family:Arial, Helvetica, NanumGothicBold, NanumGothic, Dotum, "Apple SD Gothic Neo"; }
.outputByte{  }
.kb{ color:#43a0fa; font-family:Arial, Helvetica, NanumGothicBold, NanumGothic, Dotum, "Apple SD Gothic Neo"; }

#messageBoxWrapper{ position:fixed; top:0px; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.6); display:none; opacity:0; transition:1s ease-in-out; }
.messageBox{ position:absolute; top:100px; left:0px; right:0px; bottom:0px; margin:0 auto; width:fit-content; height:fit-content; padding:20px; background-color:#fff; border:1px solid #dadde5;}
.message1{ line-height: 30px; width: 100%; text-align: center; font-size:17px; font-family:Arial, Helvetica, NanumGothicBold, NanumGothic, Dotum, "Apple SD Gothic Neo";}
.message2{ width: 100%; text-align: center; font-size:17px; font-family:Arial, Helvetica, NanumGothicBold, NanumGothic, Dotum, "Apple SD Gothic Neo";  display:none;}
.buttons{margin: 0 auto; width:fit-content; padding-top:15px;}
.cancle{ margin-left: 10px; display: inline-block; cursor: pointer; height: 40px; width: 110px; background-color: #7f7f7f; border: 1px solid rgba(0, 0, 0, 0.08); color: #fff; font-family: Arial, Helvetica, NanumGothicBold, NanumGothic, Dotum, "Apple SD Gothic Neo"; }
.confirm{ margin-left: 10px; display: inline-block; cursor: pointer; height: 40px; width: 110px; background-color: #00b050; border: 1px solid rgba(0, 0, 0, 0.08); color: #fff; font-family: Arial, Helvetica, NanumGothicBold, NanumGothic, Dotum, "Apple SD Gothic Neo"; }

.inputInfo{ font-size: 12px; margin-top: 5px; margin-left: 163px; color:#b9b9b9; }
.dragInfo{ margin-left:50px; padding-bottom:5px; color:#b9b9b9; font-size:12px; }

#tooltip{position:absolute; display:none;}
.tooltipShadow1{ position:absolute; width:50px; height:30px; background-color:#00000070; border-radius:5px; filter: blur(3px); }
.tooltipShadow2{ position:absolute; left:20px; top:25px; width:10px; height:10px; background-color:#00000070; transform:rotate(45deg); filter: blur(3px); }
.tooltipShadowBg1{ position:absolute; width:50px; height:30px; background-color:#fff; border-radius:5px; }
.tooltipShadowBg2{ position:absolute; left:20px; top:25px; width:10px; height:10px; background-color:#fff; transform:rotate(45deg); }
.tooltipText{ position:absolute; left:0px; top:7px; width:50px; text-align:center; font-size:14px; font-family:Arial, Helvetica, NanumGothicBold, NanumGothic, Dotum, "Apple SD Gothic Neo";}
.tooltipFadeIn{ -webkit-animation-duration:0.3s; -webkit-animation-name:tooltipFadeIn; animation-fill-mode:both; animation-delay:0.6s;}
@keyframes tooltipFadeIn { from { opacity:0; } to { opacity:1; } }

.bannerGroup label{ pointer-events:none; }
.downloadFolderInfo{ text-align: right; padding: 20px; padding-top:15px; padding-right:23px; color:#a0a0a0; font-size: 13px; font-family: Arial, Helvetica, NanumGothicBold, NanumGothic, Dotum, "Apple SD Gothic Neo";}

#browserSelect{ position:fixed; top:0px; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.6); display:none; opacity:0; transition:1s ease-in-out; }

#browserSelect .messageBox{ padding:100px; position:absolute; top:100px; left:0px; right:0px; bottom:0px; margin:0 auto; width:500px; height:165px; padding:30px 50px; padding-top:20px; background-color:#fff; border:1px solid #dadde5;}
#browserSelect p{ color:#828282; text-align:center; font-size: 15px; }
#browserSelect .t{ color:#828282; font-family: Arial, Helvetica, NanumGothic, Dotum, "Apple SD Gothic Neo"; }
#browserSelect .b{ color:#3e4146; font-family: Arial, Helvetica, NanumGothicBold, Dotum, "Apple SD Gothic Neo"; }

.browserButtonWrap{ text-align: center; width: 100%; padding-top: 15px;}
.browserButton{ margin-left:5px; margin-right:5px; font-size:14px; display:inline-block; cursor:pointer; height:40px; width:230px; background-color:#fff; border: 1px solid rgba(0, 0, 0, 0.08); color:#3e4146; font-family:Arial, Helvetica, NanumGothicBold, NanumGothic, Dotum, "Apple SD Gothic Neo";}
.browserButton span{ vertical-align:top; margin-top:6px; display: inline-block; }
.browserButton img{ width: 30px; vertical-align:top; margin-left:-6px; margin-right: 5px; }