@charset "utf-8";


/* ==============================
 * common
 * ============================== */

.wrapper {width:100%; height:100%; min-height:100%;}
.wrapper > form {height:100%;}
#container {position:relative; min-height:100%; padding-top:60px; background:#f5f6fa;}
#container > .inner {height:100%;}

.content {-webkit-box-flex:1;-ms-flex:1;flex:1; position:relative; height:auto; min-height:100%; padding:0 20px 20px 20px;}
.content {padding:0 20px 20px 305px;}
.content.editBtns {padding:0 20px 82px 305px;}
.content:before {content:''; position:absolute; top:0; left:-1px; height:100%;}
.content.editBtns .editBtns {position:fixed; right:0; bottom:0; z-index:2; padding:17px 20px; background:#fff; width:100%; text-align:right; -webkit-box-shadow: 0px -4px 20px 0px rgba(31, 54, 95, 0.15); box-shadow: 0px -4px 20px 0px rgba(31, 54, 95, 0.15);}


/* login */
.flexWrap {position:absolute; top:0; right:0; bottom:0; left:0; width:100%; min-width:1400px; height:100%; text-align:center;background-image:url(https://www.cyberlogitec.com/wp-content/uploads/2019/04/saas-opuslogistics-homebanner-1.jpg);background-position:center bottom;background-repeat: no-repeat;background-size: 95%;}
.flexWrap:before {content:''; display:inline-block; height:100%; vertical-align:middle;}
.flexWrap > form {display:inline-block; vertical-align:middle; text-align:left; background:#fff;}
.flexLayer {display:inline-block; vertical-align:middle; text-align:left;}
.flexLayer > .inner {padding:10px;}
.flexLayer > h1 {text-align:center;}
.flexLayer > h1 + .inner {margin-top:10px; padding:20px 20px; min-height:280px;}

.flexLayer .flexContent {margin-top:10px; padding:20px 20px; border:1px solid #d9d9d9; font-size:0;Background:#fff;border-radius:15px;}
.flexLayer .flexContent > .inner, .flexLayer .flexContent > form .inner {display:inline-block; width:518px; min-height:260px; vertical-align:top;}
.flexLayer .flexContent > .inner > .inpInner, .flexLayer .flexContent > form .inner > .inpInner {padding:0 50px;}
.flexLayer .flexContent > .inner + .inner, .flexLayer .flexContent > form .inner + .inner {padding-top:66px; padding-left:20px; margin-left:20px; border-left:1px solid #d9d9d9; -webkit-box-sizing:content-box; box-sizing:content-box;}

h2.tit {position:relative; padding:7px 0; font-weight:700; font-size:24px; color:#181818; line-height:32px;}
h2.tit.thumb {padding-left:50px;}
h2.tit.thumb > img {position:absolute; top:4px; left:0; width:41px; height:41px; border-radius:50%;}
h2.tit + .inpItem {margin-top:20px;}
h2.tit + h3.tit {margin-top:20px;}

h3.tit {padding-bottom:1px; font-weight:600; font-size:14px; color:#181818; border-bottom:1px solid #d9d9d9;}
h3.tit + .inpItem {margin-top:20px;}
h3.tit + .txtBox {margin-top:20px;}
h3.tit + .itemList2 {margin-top:20px;}
h3.tit + .inpItem2 {margin-top:20px;}
h3.tit + .ibsheetDiv {margin-top:20px;}
h3.tit + .iTxtCont {margin-top:10px;}
h3.tit + .editorWrap {margin-top:10px;}

.inpInner .nTxt {font-size:14px; margin-top:20px;}
.inpInner .nTxt + .inpItem {margin-top:20px;}
.inpInner .nTxt + .list1 {margin-top:20px;}
.inpInner > .itemList1:nth-of-type(1) {margin-top:20px;}

.idArea {margin-top:20px;}
.idArea .inputBox {max-width:none;}
.idArea + .txtBox {margin-top:10px;}
.txtBox + .idArea {margin-top:10px;}
.loginCheck {margin-top:15px;}
.joinBtn {margin-top:25px; overflow:hidden;}
.joinBtn > a {font-size:14px;}
.joinBtn > a + .btns {margin-top:10px;}
.joinBtn > .txt {-webkit-box-flex:1;-ms-flex:1;flex:1; font-size:14px;}
.joinBtn .btns {-webkit-box-flex:1;-ms-flex:1;flex:1; text-align:right; padding-left:10px;}
.joinBtn .btns .btn + .btn {margin-left:7px;}

.link {width:560px; margin:0 auto; margin-top:15px; overflow:hidden; text-align:center;}
.link > a {font-size:12px;}
.link > a:nth-child(1) {float:left;}
.link > a:nth-child(2) {}
.link > a:nth-child(3) {float:right;}


/* inpItem */
.inpItem {position:relative;}
.inpItem:after {content:''; display:block; clear:both;}
.inpItem + .inpItem {margin-top:15px;}
.inpItem + .txtBox {margin-top:10px;}
.inpItem + h3.tit {margin-top:20px;}
.inpItem > dt {width:180px; float:left; padding:4px 10px 0 0; font-size:13px;}
.inpItem > dt + dd {padding:0 0 0 180px;}
.inpItem > dd {font-size:0; min-height:30px;}
.inpItem > dd .totalVal {display:inline-block; width:68px; padding:0 24px 0 0; font-size:14px; line-height:28px; text-align:right;}
.inpItem > dd .totalVal + .inputBox {margin-left:7px;}
.inpItem > dd .inputBox.count .inp {text-align:right;}
.inpItem > dd > .checkbox:first-of-type {margin-top:5px;}

.inpItem2 {}
.inpItem2 > dt {font-size:13px;}
.inpItem2.total > dt {font-weight:600;}
.inpItem2 > dt + dd {margin-top:10px;}
.inpItem2 > dd {font-size:0; min-height:30px;}
.inpItem2 > dd .ele + .ele {margin-top:10px;}
.inpItem2 + .inpItem2 {margin-top:15px;}
.inpItem2 + .inpItem2.total {margin-top:15px; padding-top:11px; border-top:1px solid #d9d9d9;}
.inpItem2 + h3.tit {margin-top:20px;}

.inpItem2Group {font-size:0;}
.inpItem2Group .inpItem2 {display:inline-block; vertical-align:top;}
.inpItem2Group .inpItem2 + .inpItem2 {margin:0 0 0 7px;}
.inpItem2.total + .inpItem2Group {margin-top:15px;}
.inpItem2Group + .inpItem2.total {margin-top:15px; padding-top:11px; border-top:1px solid #d9d9d9;}

.fileList {}
.fileList > li {position:relative; display:none; font-size:0; overflow:hidden;}
.fileList > li + li {margin-top:15px;}
.fileList > li.on {display:block;}
.fileList > li input[type="file"] {position:absolute; top:-25px; right:-100px; font-size:13px;}
.fileList > li:first-child .btn.minus {display:none;}
.fileList > li .pathDp {display:inline-block; width:200px; height:30px; padding:0 10px; border:1px solid blue; font-size:13px; line-height:28px; vertical-align:top;}
.fileList > li .pathDp {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.fileList > li .pathDp + .btns {margin-left:7px;}
.fileList > li .btns {display:inline-block; font-size:0; vertical-align:top;}
.fileList > li .btns .btn {margin-left:7px;}
.fileList > li .inp {padding:0 10px 0 10px; -webkit-transition:0s; transition:0s;}
.fileList > li.add .inp {padding:0 10px 0 30px;}
.fileList > li.add .inp {background:url(../images/common/icon/icon_down.jpg) no-repeat left 5px center; background-size:20px 20px; text-decoration:underline;}


/* txtBox */
.txtBox {max-height:200px; font-size:14px; overflow:auto;}
.txtBox > .inner {}
.txtBox + .inpItem {margin-top:15px;}
.txtBox + .agreeChk {margin-top:15px;}
.txtBox + h3.tit {margin-top:20px;}

.iTxtCont {}
.iTxtCont > .txt {font-size:13px;}
.iTxtCont > .txt + .btnBox {margin-top:15px; text-align:right;}
.iTxtCont + h3.tit {margin-top:20px;}


/* agreeChk */
.agreeChk {position:relative;}
.agreeChk:after { content:''; display:block; clear:both;}
.agreeChk > .txt {display:inline-block; padding:4px 0 0 0; font-size:14px;}
.agreeChk > .checkbox {float:right;}


/* list */
.optionList {}
.optionList > li {text-align:left;}
.optionList > li + li {margin-top:10px;}

.list1 {}
.list1 > li {position:relative; padding-left:10px; font-size:14px;}
.list1 > li + li {margin-top:7px;}
.list1 > li:before {content:''; position:absolute; top:9px; left:0; width:3px; border-bottom:3px solid #d9d9d9; border-radius:50%;}


/* Layout */
.layout {position:relative; padding:20px 20px 20px 20px; background:#fff url(../images/common/bg_layout.png) no-repeat left top; border-radius:0 10px 10px 10px;}
.Layout_Sidebar > .inner {display:table; width:100%; table-layout:fixed;}
.Layout_Sidebar > .inner .lsCont {display:table-cell;}
.Layout_Sidebar > .inner .lsCont.fix {width:370px; padding-left:10px;}

.serviceCode {padding:10px 0;}
.serviceCode > .srvNum {display:inline-block; min-width:200px; font-weight:600; font-size:18px; line-height:28px; vertical-align:top;}
.serviceCode > .srvNum .inputBox.inpNone:nth-of-type(1) {width:120px;}
.serviceCode > .srvNum .inputBox.inpNone:nth-of-type(2) {width:50px;}
.serviceCode > .srvNum .codeLabel {display:inline-block; padding:0 20px 0 0; vertical-align:top; line-height:28px;}
.serviceCode > .actChk {display:inline-block; vertical-align:top;}

.schOptionGroup {position:relative; padding:10px 48px 0px 10px; background:#f7fcff; border-top:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb;}
.schOptionGroup > .btn {position:absolute; top:10px; right:10px;}
.schOptionGroup + h3.tit {margin-top:15px;}
.schOptionGroup .itemList1 > li .inpItem > dt {text-align:center;}

.itemList1 {position:relative;}
.itemList1:after {content:''; display:block; clear:both;}
.itemList1 > li {display:inline-block; width:370px; margin-right:10px; margin-bottom:10px; font-size:0; vertical-align:top;}
.itemList1 > li .inpItem {}
.itemList1 > li .inpItem > dt {width:170px;}
.itemList1 > li .inpItem > dt + dd {padding:0 0 0 170px;}

.itemList2 {position:relative; font-size:0;}
.itemList2:after {content:''; display:block; clear:both;}
.itemList2 > li {float:left; display:inline-block; width:580px; margin-bottom:10px; font-size:0; vertical-align:top;}
.itemList2 > li .inpItem {}
.itemList2 > li .inpItem > dt {width:220px;}
.itemList2 > li .inpItem > dd {min-height:30px;}
.itemList2 > li .inpItem > dt + dd {padding:0 0 0 220px;}
.itemList2 > li .inpItem + .inpItem {margin-top:10px;}
.itemList2 + h3.tit {margin-top:20px;}

.imgAdd {max-width:320px;}
.imgAdd > .imgBox {position:relative; display:inline-block; width:36px; height:36px; font-size:0; background:url(../images/common/icon/icon_company.jpg) no-repeat 100% 100%;}
.imgAdd > .imgBox.on {background:none !important;}
.imgAdd > .imgBox > img {width:36px; height:36px; border-radius:5px;}
.imgAdd > .imgBox.person {background:url(../images/common/icon/icon_person.png) no-repeat 100% 100%;}
.imgAdd > .imgBox.person > img {width:36px; height:36px; border-radius:50%;}
.imgAdd > .imgBox.logo > img {border-radius:5px;}
/* .imgAdd > .imgBox.invoiceLogoImg {width:auto; max-width:320px; height:auto; min-width:320px; min-height:35px; background:url(../images/sample/sample_logo.png) no-repeat; background-size:100% auto;} */
.imgAdd > .imgBox.invoiceLogoImg {width:auto; max-width:320px; height:auto; min-width:320px; min-height:35px; background:url(../images/sample/a.png) no-repeat; background-size:100% auto;}
.imgAdd > .imgBox.invoiceLogoImg.on {min-width:0; min-height:0;}
.imgAdd > .imgBox.invoiceLogoImg > img {width:320px; height:35px; max-width:320px; border-radius:5px;}
.imgAdd > .imgBox .imgRemove {position:absolute; top:-7px; right:-7px; display:none;}
.imgAdd > .changeBtn {text-align:right;}
.imgAdd > .imgBox + .changeBtn {margin-top:10px;}


/* layer Popup */
.layerPopup {position:relative; display:inline-block; width:500px; max-height:700px; overflow:auto; padding:30px; font-size:0; border-radius:10px; background:#fff; -webkit-box-shadow: 3px 4px 20px 0px rgba(35, 75, 149, 0.7); box-shadow: 3px 4px 20px 0px rgba(35, 75, 149, 0.7);}
.layerPopup.wide {width:700px;}
.layerPopup > .inner {}
.layerPopup > .inner .popupTitle {padding:2px 0 19px 0; font-weight:600; font-size:20px; color:#0754d2; border-bottom:2px solid #085ec1;}
.layerPopup > .inner .popupTitle + h3.tit {margin-top:15px;}
.layerPopup .layerContent {padding:15px 0;}
.layerPopup .layerBtns {padding:10px 0 0 0; text-align:right;}
.layerPopup .layerBtns .btn + .btn {margin-left:7px;}
.layerPopup > .btn.close {position:absolute; top:15px; right:11px;}

h3.tit + .detailViewer {margin-top:10px;}
.detailViewer {height:200px; padding:10px; font-size:13px; border:1px solid #d9d9d9; overflow:auto;}


/* etc */
.alertMessage {position:relative; padding-left:25px; font-size:12px; color:#ff0000;}
.alertMessage + .alertMessage {margin-top:5px;}
.alertMessage:before {content:''; position:absolute; top:0px; left:0; width:18px; height:16px; background:url(../images/common/sprite_common.png) no-repeat -126px -100px;}

.lineBasic {position:relative; height:40px;}
.lineBasic:after {content:''; position:absolute; top:19px; left:0; width:100%; border-bottom:1px solid #d9d9d9;}