html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { background: transparent; border: 0; margin: 0; padding: 0; vertical-align: middle; }

/*--------------------------------------------------*/
/*공통요소*/

html, body { height: 100%; }
body { margin: 0; font-family: 'Noto Sans Kr', sans-serif; font-size: .875rem; font-weight: 400; line-height: 1.5; color: #888; text-align: left; background-color: #f3f3f3; }
/*select { word-wrap: normal; text-transform: none; width: auto; height: calc(1.5em + .75rem + 2px); padding: .375rem 1.75rem .375rem .75rem; color: #555; border: 1px solid #ddd; border-radius: .125rem; cursor: pointer; }*/
a { text-decoration: none; color: inherit; cursor: pointer; color: #000; }
a:hover, a:focus { color: #e7380c !important; text-decoration: none; }
a:focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }
a.material-icons:hover { color: #e7380c; }
ul { list-style: none; }
li { display: block; width: 100%; }
label { font-weight: normal; display: inline-block; line-height: 22px; margin-top: 10px; color: #e7380c; }
table { border-collapse: collapse; display: table; box-sizing: border-box; border-spacing: 2px; border-color: grey; }
/*input[type="radio"], input[type="checkbox"] { box-sizing: border-box; padding: 0; display: none; width: 20px; height: 20px;}
input[type="radio"] {vertical-align:-8px;}*/
input[type="text"], input[type="password"], input[type="file"], input[type="date"] { line-height: 34px; min-height: 36px; min-width: 40px; border: 1px solid #ddd; padding: 0 0 0 10px; font-size: 16px; color: #000; }
input[readonly="readonly"], input[readonly], select[readonly="readonly"], select[readonly], textarea[readonly="readonly"], textarea[readonly] { background: #F8F8F8; color: #999; }
input.txt { border: 0; padding: 0; text-align: left; }
select { line-height: 34px; height: 36px; min-width: 100px; border: 1px solid #ddd; padding: 0 0 0 5px; font-size: 16px; }
textarea { font-size: 16px; border: 1px solid #ddd; line-height: 22px; padding: 5px; font-family: 'Noto Sans Kr', sans-serif; resize: none; color: #000; }
input[type="text"]:focus, input[type="password"]:focus { border-color: #e7380c; }
textarea { padding: 10px; }

:focus { outline: none !important; }
div { box-sizing: border-box; }
span { display: inline-block; }
.pointer { cursor: pointer; }
.borderSolid { border: 1px solid #ddd; }
.borderNone { border: none; }
.borderLeft { border-left: 1px solid #ddd; }
.vjs { opacity: 0; }
.vjs.bind { opacity: 1; }

/*--------------------------------------------------*/
/*레이아웃*/
#layout-wrapper { min-height: calc(100vh); }
.disInlineBlock { display: inline-block !important; }
.disBlock { display: block !important; }
.disFlex { display: flex !important; }
.flexAlign { justify-content: center; align-items: center; }
.padding0 { padding: 0 !important; }
.mAuto { margin: auto !important; }
.floatRight { float: right; }
.floatRight::after { content: ''; display: block; clear: both; }
.M12 { margin: 0 -12px; }
.M4 { margin-left: -4px !important; }
.titleMb { margin-bottom: 0; }
.headMb { margin-bottom: 3rem; }
.smallMb { margin-bottom: .5rem; }
.leftM { margin-left: 1.5rem; }
.rightM { margin-right: 1.5rem; }
.H100 { height: 100%; }
.W100 { width: 100%; }
.W888 { width: calc(80% - 3px); margin: 0; display: inline-block; }
.W666 { width: calc(66.66666% - 3px); margin: 0; display: inline-block; }
.W555 { width: calc(50% - 3px); margin: 0; display: inline-block; }
.W333 { width: calc(33.33333% - 3px); margin: 0; display: inline-block; }
.W222 { width: calc(20% - 3px); margin: 0; display: inline-block; }
/*--------------------------------------------------*/
/*타이포*/
.fontEn { font-family: 'Noto Sans', sans-serif !important; }
.material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; }
.material-icons.del { font-size: 12px !important; border: 1px solid #ccc; padding: 3px; cursor: pointer; background: #fff; color: #ccc !important; }
.material-icons.del:hover { background: #e7380c; color: #fff !important; border-color: #e7380c; }
.material-icons.sem { padding: 0; font-size: 14px !important; color: #e7380c; margin: 0; }

h1, h2, h3, h4, h5, h6 { font-weight: 500; line-height: 1.2; color: #555; }
h2 { font-size: 1.75rem; }
h5 { margin-bottom: .75rem; font-size: 1rem; position: relative; }
h6 { font-size: 15px; font-weight: 400; }

.font12 { font-size: 12px; line-height: 16px; }
.font14 { font-size: 14px; }
.font16 { font-size: 16px; }
.font18 { font-size: 18px; line-height: 20px; }
.font20 { font-size: 20px; line-height: 24px; }
.font22 { font-size: 22px; line-height: 26px; }
.font24 { font-size: 24px; line-height: 28px; }
.font26 { font-size: 26px; line-height: 30px; }
.font400 { font-weight: 400 !important; }
.f500, .font500 { font-weight: 500 !important; }
.font700 { font-weight: 700 !important; line-height: 1.6; }
.bbold { font-weight: bold; }
.textCenter { text-align: center; }
.alignRight { text-align: right; }

.spanbg { padding: 2px 4px; }
.spanP { padding: 4px 8px; }

.text-muted { font-size: 14px !important; color: #999; line-height: 1.9rem; }

/*--------------------------------------------------*/
/*컬러*/

:root { --red: #e7380c; }
.red, .textRed { color: #e7380c !important; }
.textBlack, .black { color: #000; }
.textBlue { color: #3281f2 !important; }
.textGray { color: #999; }
.textLgray { color: #aaa; }
.textDGray { color: #555; }
.bgGray { background-color: #ddd; }
.bgLGray { background-color: #f3f3f3; }
.hand { cursor: pointer; }

/*--------------------------------------------------*/
/*버튼*/

.btnlist { margin: 20px 0; }
.navbar-header button { text-align: center; height: 100%; margin: 0; background-color: transparent; color: #fff; border: none; padding: 0 12px; cursor: pointer; }
/*.grayBtn { text-align: center !important; vertical-align: middle; line-height: 1.3; margin: 0; padding: .375rem .75rem; background-color: #888; color: #fff; font-size: .875rem;  border: 1px solid #888 !important; border-radius: .125rem; box-sizing: border-box; cursor: pointer; }*/
.stdbtn { height: 30px; line-height: 28px; border: 1px solid #ccc; color: #999; background: #fff; font-size: 14px; padding: 0 15px; }
.midbtn { font-size: 16px; color: #999; line-height: 34px; padding: 0 20px; border: 1px solid #999; background: #fff; }
.bbtn { height: 44px; line-height: 42px; border: 1px solid #ccc; padding: 0 30px; font-size: 16px; color: #fff; font-weight: 500; background: #ccc; }
.grayBtn { background: #888; border-color: #888; color: #fff; }
.redBtn { background: #e7380c; border-color: #e7380c; color: #fff; }
.blueBtn { background: #3281f2f2; border-color: #3281f2; color: #fff; }
.blackBtn { background: #000; border-color: #000; color: #fff; }
.lgBut { height: 2.6rem; padding: .5rem 1rem; font-size: 1.2rem; line-height: 1.5; border-radius: .3rem; font-weight: 400; cursor: pointer; }
.btnGroup { display: inline-block; border: 1px solid #ddd; border-radius: .125rem; }
.btnGroup button { display: inline-block; border: none; border-left: 1px solid #ddd; margin-left: -4px; }
.btnGroup button:first-child { border-left: none; margin: 0; }

/*--------------------------------------------------*/
/*탑메뉴*/

#page-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1002; height: 70px; }
.navbar-header { height: 70px; margin: 0 auto; padding: 0 12px; background-color: #e7380c; box-shadow: 0 5px 5px -3px rgba(0,0,0,0.15); }
.navLeft { display: inline-block; position: relative; float: left; vertical-align: middle; line-height: 60px; }
.logo { display: inline-block; height: 24px; padding: 0 12px; }
.logo.center { display: block !important; height: 24px; padding: 0 12px; margin: 0 auto; }
.navIcon { height: 70px; vertical-align: middle; color: #fff; }
.navProfile { height: 36px; width: 36px; display: inline-block; background-color: green; }



#leftMenu { margin: 10px 0 30px 0; }
#leftMenu ul li { line-height: 34px; }
#leftMenu ul li a { display: block; padding: 0 18px; position: relative; font-size: 14.5px; line-height: 1.5; color: #999; line-height: 40px; font-weight: 500; }
#leftMenu ul li a i { display: inline-block; min-width: 1.75rem; font-size: 1.3rem; line-height: 100%; }
#leftMenu ul li a:hover { color: red; }
#leftMenu ul li ul.subMenu li a { position: relative; padding: 2px 50px; font-size: 15px; line-height: 1.5; color: #000; font-weight: normal; }
#leftMenu ul li ul.subMenu li a .alarm { position: absolute; right: 20px; top: 8px; color: #fff; padding: 0 10px; line-height: 18px; height: 18px; font-size: 10px; background: #e7380c; letter-spacing: -1px; font-family: Verdana; text-align: center; min-width: 30px; }
#leftMenu .hasArrow:after { content: "add"; font-family: 'Material Icons'; font-weight: normal; font-style: normal; display: block; position: absolute; right: 20px; top: 0; font-size: 20px; vertical-align: middle; }
#leftMenu .hasArrow .mmActive:after { content: "remove"; -webkit-transform: rotate(-180deg); transform: rotate(-180deg); padding-top: 0; padding-bottom: 2px; }
#leftMenu ul li .badge { margin-top: 14px; padding-right: .6em; padding-left: .6em; border-radius: 10rem; line-height: 14px; }

.verticalMenu { width: 240px; height: calc(100% - 70px); position: fixed; top: 70px; left: 0; bottom: 0; margin: 0; box-shadow: 0 1px 2px rgba(0,0,0,0.075); background-color: #fff; overflow-y: auto; overflow-x: hidden; z-index: 9; }
.simplebarWrapper { width: inherit; height: inherit; }
.menu-title { padding: 12px 20px !important; letter-spacing: .05em; pointer-events: none; cursor: default; font-size: 11px; text-transform: uppercase; color: #888; font-weight: 700; }
.mmActive .active { color: #e7380c !important; }
.mmActive .active:before { content: ""; position: absolute; top: .5rem; bottom: .5rem; left: 0; right: auto; border-left: 2px solid #e7380c; border-bottom: 0; box-sizing: border-box; }
.mmActive .subMenu { padding: 0; display: block; }
.mmActive.open .subMenu { display: block; }


.badge { display: inline-block; padding: .25em .4em; font-size: 75%; font-weight: 600; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; }
.badgeRed { color: #fff; background-color: #e7380c; }

ul.list { display: block; padding: 25px 0; }
/*ul.list li:nth-child(2n+1) {background:#F4F4F4;}*/
.whitebox { width: 100%; padding: 20px; background: #fff; border-radius: 0.375rem; box-shadow: 0px 0px 13px 0px rgba(82, 63, 105, 0.05); }
.whitebox.list { min-height: calc(100vh - 500px); position: relative; padding-bottom: 80px; }
.wbox { width: 100%; margin: 0 auto; min-height: 50px; }
.fbox { width: 1000px; margin: 0 auto; color: #666; margin-top: 400px; transform: translateY(-50%) }

.regadd { position: fixed; bottom: 80px; right: 40px; z-index: 888; }
.regadd .regbtn { display: block; background: #e7380c; width: 60px; height: 60px; line-height: 40px; border: 0; border-radius: 50%; box-shadow: 0 0 20px -6px rgba(0,0,0,0.5); overflow: hidden; margin-top: 14px; }
.regadd .regbtn:hover { background: #000; }
.regadd .regbtn .material-icons { color: #fff; }
.rcontent { position: absolute; right: 0; top: 0; text-align: right; }
.listBar { position: relative; border-bottom: 1px solid #f0f0f0; font-size: 14px; padding: 4px 0; }
.listBar span { display: inline-block; margin-left: 15px; line-height: 40px; min-width: 100px; vertical-align: middle; }
.listBar .bg_thumb { position: relative; width: 50px; height: 50px; background: #f0f0f0; min-width: inherit; min-width: initial; display: inline-block; }
.listBar .thumb { width: 100%; height: 100%; background: url('/Common/images/demo03.jpg') no-repeat; background-size: cover; min-width: inherit; min-width: initial; }
.listBar.th { border-bottom: 1px solid #f8f8f8; background: #f4f4f4; padding: 0; border-radius: 0.375rem; }
.listBar.th span { color: #666; font-size: 13px; font-weight: 500; }
.listBar.th span:first-child { padding-left: 10px; }
.listBar span:first-child, .listBar.th span:first-child { margin-left: 0; }
.listBar .boxmsg, .listBar .level { font-size: 12px; line-height: 28px; font-size: 12px; color: #999; background: #fff; border: 1.5px solid #999; min-width: 70px !important; text-align: center; border-radius: 3px; vertical-align: 0; }
.listBar .boxmsg.red { color: #fff; background: #e7380c; }
.listBar .boxmsg.c010010 { border-color: #e7380c; color: #e7380c; border-style: dashed; }
.listBar .boxmsg.c010020 { border-color: #e7380c; background-color: #e7380c; color: #fff; }
.listBar .boxmsg.c010030 { border-color: #2196F3; color: #2196F3; border-style: dashed; }
.listBar .boxmsg.c010040 { border-color: #2196F3; background-color: #2196F3; color: #fff; }
.listBar .boxmsg.c010050 { border-color: #bbb; color: #bbb; }
.listBar .boxmsg.c020011 { border-color: green; background-color: green; color: #fff; }
.listBar .level { min-width: 40px; }


.listBar .level { min-width: 30px; background: #555; color: #fff; border-color: #555; font-size: 12px; font-family: Verdana; }
.listBar .rcontent { top: 4px; right: 10px; margin: 0; min-width: inherit; }
.listBar.th .rcontent { top: 0; }
.listBar .rcontent button { margin-top: 0; }
.listBar .rcontent i.material-icons { font-size: 24px; }
.listBar .date, .listBar .pcode, .listBar .email { font-size: 13px; }
.listBar .email { min-width: 180px; }
.listBar .pcode { font-size: 13px; text-align: center; }
.listBar .optnm { font-size: 14px; color: #000; line-height: 14px; padding: 0; margin: 2px 0 0 0 !important; text-align: left !important; }
.listBar .prodnm { font-size: 14px; color: #999; font-weight: 500; line-height: 14px; margin: 0; }
.listBar .corpnm { font-size: 12px; min-width: 180px; max-width: 180px; height: 40px; overflow: hidden; }
.listBar a:hover > * { color: #e7380c !important; }
.listBar:not(.pp):not(.th) .rcontent { top: 4px; right: 10px; }
.listBar .mline { line-height: 16px; }

.layoutPP .listBar:not(.th) { padding: 4px 0; font-size: 14px; transition: all 0.3s ease-in; }
.layoutPP .listBar:not(.th):hover::after { content: ""; position: absolute; top: 10px; bottom: 10px; left: -20px; right: auto; border-left: 10px solid #e7380c; border-bottom: 0; box-sizing: border-box; }
.layoutPP .listBar.th { border-radius: 0; line-height: 16px; padding: 0; background: #fff; }
.layoutPP .listBar.th span { color: #000; font-weight: 500; }
.layoutPP .listBar .boxmsg { line-height: 20px; font-size: 12px; }
.layoutPP .listBar:not(.th) .rcontent { top: 4px; right: 4px; }
.layoutPP .listBar .rcontent .stdbtn:hover { background: #e7380c; border-color: #e7380c; color: #fff; }
.layoutPP .listBar.partner_pp { line-height: 20px; }
.layoutPP .listBar.partner_pp label { margin-top: 0; }
.layoutPP .list li.used .listBar { }
.layoutPP .list li.used .listBar span { opacity: 0.5; }
.layoutPP .list li.used .stdbtn { opacity: 0.05; }

.salechannel .cinfo { }
.salechannel .cinfo span { background: #2196F3; color: #fff; margin: 10px 0 2px 2px; padding: 0 10px; border-radius: 4px; font-size: 12px; }
.salechannel .cinfo span:first-child { margin-left: 0; }
.salechannel .cinfo span.a01 { background: #659DAF; }
.salechannel .cinfo span.a02 { background: #000; }
.salechannel .cinfo span.a03 { background: #999; }

.searchbox, .linebox { position: relative; width: 100%; padding: 0; margin-bottom: 15px; text-align: left; background: #fff; padding: 20px; border-radius: 0.375rem; box-shadow: 0px 0px 13px 0px rgba(82, 63, 105, 0.05); }
.searchbox:before { content: ""; position: absolute; top: 25px; bottom: 5px; left: 0; right: auto; border-left: 5px solid #aaa; border-bottom: 0; margin: 0 0 20px 0px; }
.searchbox .onsearch { position: relative; left: 0; border-radius: 0; height: 34px; line-height: 34px; text-align: center; cursor: pointer; display: inline-block; vertical-align: top; }
.searchbox .onsearch .material-icons { position: absolute; right: 5px; top: 6px; color: #666; font-size: 24px; vertical-align: -6px; }
.searchbox span, .searchbox input { vertical-align: middle; }
.searchbox label { color: #000; }
.searchbox input, .searchbox select { background: none; border-color: #eee; font-size: 14px; width: 340px; height: 36px; line-height: 34px; background: #fff; box-shadow: inset 0 3px 3px -3px rgba(0,0,0,0.05); vertical-align: top; }
.searchbox select { width: auto; }
.searchbox input::placeholder { color: #000; display: inline-block; opacity: 0.3; }
.searchbox input:focus, .searchbox select:focus { border: 2px solid #e7380c; background: #fff; }
.searchbox .material-icons { color: #000; font-size: 30px; }
.searchbox label { display: inline-block; margin-right: 5px; }
.searchbox .btnset { position: absolute; right: 20px; top: 20px }
.searchbox .btnset button { font-size: 16px; background: #000; color: #fff; border: 0; line-height: 34px; padding: 0 15px; }
.searchbox .btnset button .material-icons { font-size: 18px; color: #fff; vertical-align: -4px; }

.searchinput { position: relative; }
.searchinput input { padding-right: 80px; }
.searchinput .clickicon { position: absolute; right: 5px; min-width: 10px; margin: 0; }
.inputicon { margin: -6px 0 0 -30px; }

.pagenation { position: absolute; bottom: 10px; width: 100%; text-align: center; line-height: 50px; }
.pagenation span, .pagenation a { margin: 0 3px; border: 1px solid #f0f0f0; line-height: 30px; text-align: center; min-width: 30px; display: inline-block; color: #999; }
.pagenation span, .pagenation a .material-icons { font-size: 18px; vertical-align: -4px; }
.pagenation span:hover { cursor: pointer; border-color: #e7380c; color: #e7380c; }
.pagenation a.paginate_active { background: #e7380c; color: #fff; border-color: #e7380c; }
.pagenation a .material-icons:hover { color: #e7380c; }
.pagenation span.current { color: #e7380c; border-color: #e7380c; }

div.column { display: inline-block; margin-right: 5px; }
.linebox .rcontent { right: 15px; top: 15px; }
.nothing { text-align: center; height: 300px; padding-top: 150px; font-size: 16px; font-weight: 500; }

/*--------------------------------------------------*/
/*우측 내용*/

.page-content { box-sizing: border-box; padding: 25px; }
.page-content.reg { padding: 0; }
.container { display: block; margin: 0 auto; min-width: 1000px; min-height: calc(100vh - 119px); }
.container .centerform { position: relative; margin: 20px auto; width: 1000px; padding: 100px 70px 70px 70px; min-height: calc(100vh - 120px); background: #fff; border-radius: 0.375rem; box-shadow: 0px 0px 13px 0px rgba(82, 63, 105, 0.05); }
.container .centerform .cardTitle:before { border: 0; }
.container .centerform label { margin: 5px 0 2px 0; }
.container .centerform div.font18 { line-height: 40px; min-height: 46px; }
.container .centerform input, .container .centerform select { margin: 4px 0; font-size: 16px; color: #000; }
.container .centerform .cardBody { padding: 20px 0; }
.container .centerform .pageTitleBox { position: absolute; left: 30px; top: 20px; font-size: 22px; color: #000; font-weight: 500; }
.container .centerform .pageTitleBox:before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 0; right: auto; border-left: 5px solid #e7380c; border-bottom: 0; margin-left: -30px; }
.container .centerform h5 { color: #000; }
/*.container .centerform::after { content: "close"; font-family: 'Material Icons'; font-weight: normal; font-style: normal; display: block; position: absolute; right: 20px; top: 0; font-size: 40px; vertical-align: middle; cursor: pointer; color: #ddd; }*/
.container .centerform .goback { position: absolute; right: 15px; top: 15px; cursor: pointer; opacity: 0.3; }
.container .centerform .goback:hover { opacity: 1; }
.container .centerform .goback .material-icons { font-size: 34px; color: #000; }


.container .centerform .midtitle { font-size: 22px; line-height: 40px; margin: 35px 0 5px 0; }
.container-fluid { width: 100%; margin: 0 auto; box-sizing: border-box; }
.pageTitleBox { margin: 0 0 10px 0; padding-bottom: 24px; align-items: center; }
.bigtitle { margin: 100px 0 40px 0; font-size: 28px; font-weight: 500; color: #000; }
.card { margin-bottom: 24px; position: relative; display: block; min-width: 0; word-wrap: break-word; background-clip: border-box; border: 0 solid #ddd; }
.card .inner { background-color: #fff; border-radius: 0.375rem; box-shadow: 0px 0px 13px 0px rgba(82, 63, 105, 0.05); }
.cardBody { display: block; padding: 1.25rem; }
.formBody { display: block; padding: 3rem; }
.modal { display: none; position: fixed; z-index: 1003; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.5); }
.smallThumb { display: inline-block; width: 48px; height: 48px; background-color: #ddd; margin-right: 12px; }
.withSThumb { display: inline-block; }
.cardTitle { margin-bottom: .45rem; font-size: 20px; position: relative; color: #000; font-weight: 500; border-bottom: 1px solid #f0f0f0; padding-bottom: 20px; }
.cardTitle:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: auto; border-left: 5px solid #e7380c; border-bottom: 0; margin: 0 0 20px -20px; }
.cardBadge { color: #e7380c; background-color: rgba(231,56,12,0.2); font-weight: 700; padding-right: 0.4em; padding-left: 0.4em; border-radius: 0.1rem; }
.cardSubT { margin-top: -.375rem; font-size: 13px; color: #999; }

.progress { display: block; height: 1rem; width: 100%; font-size: .65625rem; background-color: #eee; border-radius: .125rem; }
.progressBar { background-color: #e7380c; }
.tableResponsive { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table, .table2 { width: 100%; color: #777; vertical-align: middle }
.table-striped tbody tr:nth-of-type(odd) { background-color: #eee; }
.table th, .table td { padding: .75rem; vertical-align: middle; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.table2 th, .table2 td { padding: .75rem; vertical-align: middle; border: none; }
.table-nowrap th, .table-nowrap td { white-space: nowrap !important; }

.dbox li { display: inline-block; width: auto; margin-right: 15px; }
.dtitle { color: #999; font-size: 12px; line-height: 24px; }
.dvalue { color: #000; font-size: 14px; font-weight: 500; padding: 0 10px; }

.profileCircle { width: 2rem; height: 2rem; border-radius: 50%; margin-right: 0 !important; background-color: #fff; font-size: 2rem; color: gray; }
.formGroup { margin-bottom: 1rem; }
.formControl { display: block; width: calc(100% - 1.5rem - 2px); padding: .375rem .75rem; border: 1px solid #ddd; border-radius: 4px; font-size: .875rem; font-weight: 400; line-height: 1.5; color: #555; border-radius: 3px; vertical-align: middle; }
.formControlInline { display: inline-block; margin-right: 1rem; }
.formControlSelect { display: inline; margin-right: 1.3125rem; }

.SInput { width: 170px; }
.MInput { width: 198px; }
.SSelect { padding: .375rem .5rem; }

.bgpopup { }
.popup { position: absolute; left: 10px; top: 100px; width: 300px; height: calc((300px - 20px) + (300px - 24px ) * 0.7); background: #eaeaea; margin-top: 40px; box-shadow: 0 0 5px 0 rgba(0,0,0,0.2); z-index: 888; }
.popup.step2 { left: 420px; }
.popup.step3 { left: 830px; }
.popup .close { position: absolute; width: 30px; height: 30px; right: 10px; top: 10px; z-index: 2; }
.popup .close .material-icons { color: #fff; text-shadow: 0 2px #000; }
.popup .banner { width: 100%; height: calc((300px - 20px) + (300px - 90px ) * 0.7); background: #eaeaea url('') no-repeat center center; background-size: contain; }
.popup .expire { position: relative; background: #fff; padding: 10px 0; height: 44px; }
.popup .expire .brcheck { left: 10px; top: 0; width: 100%; font-size: 14px; line-height: 22px; background: transparent; }
.popup .expire .brcheck .checkmark { border: 1px solid #000; }


.textInputBox { border: 1px solid #ddd; border-top: none; height: 300px; }
.textInputBox input { padding: 1.25rem; width: calc(100% - 2.5rem); min-height: calc(100% - 2.5rem); }
.customCheck { display: inline-block; position: relative; width: 1rem; height: 1rem; margin-left: 0; background-color: #fff; border: #ced4da solid 1px; border-radius: .125rem; cursor: pointer; }
.customCheck.checked { color: #fff; border-color: #3281f2; background-color: #3281f2; background-image: url(../Images/icons/done_white.png); background-size: cover; }
.customRadio { display: inline-block; position: relative; width: 1rem; height: 1rem; margin-left: 0; background-color: #fff; border: #ced4da solid 1px; border-radius: 50%; cursor: pointer; vertical-align: -8px; }
.customRadio.checked { color: #fff; border-color: #3281f2; background-color: #3281f2; background-image: url(../Images/icons/radio_white.png); background-size: 80%; background-position: center; }
.radioBox li { display: inline-block; width: auto; }
.customLabel { display: inline-block; position: relative; margin-bottom: 0; vertical-align: middle; font-weight: 500; padding-left: .5rem; line-height: 1.5rem; }

#textOption button { color: #555; padding: 0 3px; }
#textOption .redActive i { color: #e7380c; }

.withBtn { position: relative; display: inline-block; width: auto; border-radius: .125rem; border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0 !important; }
.inputRightBtn { position: relative; display: inline-block; width: auto; border-radius: 0 .125rem .125rem 0; color: #fff; background-color: #888; border-color: #888; font-size: .875rem; line-height: 1.5; margin-left: -4px; }
.order input[type=text] { max-width: calc(100% - 24px); padding: 0 4px 0 0; text-align: right; }
.order .agreement { height: 150px; overflow: hidden; overflow-y: auto; }
.order .agreement ul { padding: .5rem; font-size: 14px; color: #666; }

.aligncenter { text-align: center; }


.tabmenu { line-height: 40px; margin-bottom: 50px; }
.tabmenu div { position: relative; display: inline-block; min-width: 200px; text-align: center; padding: 0 15px; background: #f0f0f0; color: #333; margin-left: -4px; border: 1px solid #aaa; box-shadow: inset 0 5px 5px -3px rgba(0,0,0,0.15); font-weight: 500; cursor: pointer; z-index: 1; }
.tabmenu div:first-child { margin: 0; }
.tabmenu div.current { background: #e7380c; color: #fff; box-shadow: none; border-color: #BE2E0A; z-index: 2; }
.tabbody { min-height: 500px; }

.btnmenu { line-height: 34px; font-size: 14px; }
.btnmenu div { position: relative; display: inline-block; min-width: 100px; text-align: center; padding: 0 10px; background: #fff; color: #999; margin-left: -5px; border: 1px solid #ccc; font-weight: 500; cursor: pointer; z-index: 1; }
.btnmenu div:first-child { margin: 0; }
.btnmenu div.current { background: #e7380c; color: #fff; box-shadow: none; border-color: #BE2E0A; z-index: 2; }


.layoutPP { box-sizing: border-box; }
.layoutPP input.psearch { line-height: 44px; width: 100%; padding: 0 80px 0 15px; border: 2px solid #000; }
.layoutPP .searchfiled { position: relative; }
.layoutPP .searchfiled .stdbtn { padding: 0 20px; line-height: 34px; height: 36px; font-size: 18px; background: #000; color: #fff; border-color: #000; width: 80px; }
.layoutPP .searchfiled .rcontent button { margin: 6px 6px 0 0; }
.layoutPP .pptitle { position: relative; color: #e7380c; font-size: 22px; margin: -24px 0 26px 0; font-weight: 500; }

.layoutPP .whitebox { padding: 15px 0; box-shadow: none; }
.layoutPP .pagenation { bottom: 0; }

.bgthumb { position: relative; display: inline-block; background: #F8F8F8 url('/Common/images/whiteLogo.png') center center no-repeat; background-size: 50%; width: 50px; height: 50px; }
.thumb { position: relative; width: 100%; height: 100%; background: url() center center no-repeat; background-size: contain; cursor: pointer; }
.textcut { overflow: hidden; max-width: 200px; max-height: 20px; }
.textcut a { width: 100%; height: 100%; overflow: hidden; vertical-align: top; line-height: 20px }

.brcheck { display: inline-block; position: relative; padding-left: 35px; margin: 2px 0 12px 0 !important; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #000; font-size: 16px; }
.brcheck input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.brcheck .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #f8f8f8; min-width: 10px !important; margin: 0 !important; }
.brcheck:hover input ~ .checkmark { background-color: #eee; }
.brcheck input:checked ~ .checkmark { background-color: #2196F3; }
.brcheck:after { content: ""; position: absolute; display: none; }
.brcheck input:checked ~ .checkmark:after { display: block; }
.brcheck .checkmark:after { left: 9px; top: 5px; width: 7px; height: 12px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); content: ""; }
.brcheck .checkmark:after { content: ""; position: absolute; display: none; }

.brswitch { position: relative; display: inline-block; width: 58px; height: 26px; }
.brswitch input { opacity: 0; width: 0; height: 0; }
.brswitch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ddd; -webkit-transition: .2s; transition: .2s; }
.brswitch .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 4px; background-color: #fff; -webkit-transition: .2s; transition: .2s; }
.brswitch input:checked + .slider { background-color: #2196F3; }
/*.brswitch  input:focus + .slider { box-shadow: 0 0 1px #2196F3; }*/
.brswitch input:checked + .slider:before { -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); }
.brswitch .slider.round { border-radius: 20px; }
.brswitch .slider.round:before { border-radius: 50%; }

.brradio { display: inline-block; position: relative; padding-left: 32px; margin: 12px 20px 12px 0 !important; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 16px; line-height: 22px; color: #000; }
.brradio input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.brradio .checkmark { position: absolute; top: 0; left: 0; height: 24px; width: 24px; background-color: #eee; border-radius: 50%; min-width: 10px !important; }
.brradio:hover input ~ .checkmark { background-color: #ccc; }
.brradio input:checked ~ .checkmark { background-color: #2196F3; }
.brradio input:checked ~ .checkmark:after { display: block; }
.brradio .checkmark:after { content: ""; position: absolute; display: none; }
.brradio .checkmark:after { top: 6px; left: 6px; width: 12px; height: 12px; border-radius: 50%; background: white; }

.spinner { margin: 0 auto; width: 40px; height: 40px; text-align: center; font-size: 10px; display: inline-block; }
.spinner > span, .spinner > div { background-color: #fff; height: 100%; width: 6px; margin-right: 2px; display: inline-block; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; }
.spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }
.spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; }
.spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }
.spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }


.cancelcode { position: absolute; bottom: 30px; left: 0; width: 400px; min-height: 300px; padding: 20px; border: 1px solid #ccc; background: #fff; box-shadow: 0 0 5px 0 rgba(0,0,0,0.2); }
.cancelcode .material-icons { position: absolute; right: 10px; top: 10px; }
.cancelcode li { line-height: 34px; }
.cancelcode .brradio { margin: 0 10px 24px 0 !important; }
.cancelcode .btnlist { margin-top: 30px; }
.cancelcode .title { color: #000; font-weight: 500; }
.cancelcode.hide { display: none; }

.besticon { width: 18px; height: 18px; text-align: center; border-radius:6px; font-size: 10px; color: #fff; display: inline-block; line-height: 16px; margin: 0 0 0 3px; font-weight: bold; background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient 2s ease infinite; }
.besticon:first-child { margin-left: 10px; }

@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}



@-webkit-keyframes sk-stretchdelay {
    0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
    20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
    0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); }
    20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); }
}