/* Common */
body.login {min-width:auto; background:#1a1a1a;}

/* ----------------------------------------------
LOGIN
------------------------------------------------*/
/* loginBody */
.loginBody {background:#1a1a1a; height:calc(100% - 90px); flex-wrap:wrap;}

/* login only */
.login_wrap {width:320px; text-align:center;}

.login_box {width:100%; background:transparent; text-align:left;}
.login_box h2 {display:block; margin:0px auto; padding:21px 0 10px 0; font-size:24px; color:#eeeeee; border-bottom:1px solid #eeeeee; font-weight:normal;}
.login_box .input_login {text-align:left;}
.login_box .input_login dl { margin-top:20px;}
.login_box .input_login dl dt {color:#FFF; font-size:14px; font-weight:bold; font-style:italic; margin-bottom:7px;}
.login_box .input_login dl dd {color:#FFF; font-size:14px; margin-bottom:21px;}
.login_box .input_login dl dd .select_box_low {width:100%;}
.login_box .input_login dl dd .select_box_low ul {}
.login_box .input_login input[type=checkbox]:checked + label,
.login_box .input_login input[type=checkbox] + label .text {font-size:12px; color:#FFF;}
.login_box .input_login .Required {color:#ff897d; position:relative; margin-top:-2px; margin-bottom:20px;}
.login_box .input_login .guideinfo {font-size:12px; color:#ff897d; position:relative; margin-top:-2px; margin-bottom:20px;}
.input_login input[type=text],
.input_login input[type=password] {color:#2e2e2e; height:35px; line-height:35px; width:100%; border-radius:18px;}

.login_box .input_login span { overflow:hidden;}
.login_box .input_login span label {}
.login_box .input_login span a.btn_login {float:right; display:inline-block; background:#fff; border-radius:18px; color:#686868; font-size: 12px; text-decoration: none; text-align:center; height:30x;line-height:30px; padding:0 20px; font-weight:bold;}
.login_box .licenseBox {width:324px; margin:0 auto;}
.login_box .licenseBox dl {}
.login_box .licenseBox dl dt {display:block; font-size:16px; color:#eee; margin-bottom:6px;}
.login_box .licenseBox dl dd {width:100%; background:#FFF; display:block; margin:0; padding:10px; box-sizing:border-box; border-radius:24px;}
.login_box .licenseBox dl dd input {width:100%;}
.login_box .licenseBox dl dd textarea {width:304px; min-width:304px; max-width:304px; height:150px; min-height:150px; max-height:150px; margin:0; padding:0; border:0;}
.login_wrap .btnWrap {width:324px; margin:0 auto;}

/* configure authentication */
/* .wrap .contents .authCode {background:#000; height:100%; width:100%;} */
.authConfigWrap {background:inherit; width:420px; height:auto;}
.authConfigWrap .authConfigHeader {display:flex; align-items:flex-start; padding-bottom:9px; width:100%; border-bottom:1px solid #fff;}
.authConfigWrap .authConfigHeader h1 {font-size:24px; color:#fff; word-break:break-all;}
.authConfigWrap .authConfigBody {margin:28px 0 44px; display:flex; column-gap:21px;}
.authConfigWrap .authConfigBody .qrcodeWrap {width:auto; height:auto;}
.authConfigWrap .authConfigBody .qrcodeWrap .thumb  {width:149px; height:149px; display:flex; align-items:center; justify-content:center; background:rgb(255, 255, 255);}
.authConfigWrap .authConfigBody .qrcodeWrap .thumb  {width:149px; height:149px; display:flex; align-items:center; justify-content:center; background:rgb(255, 255, 255);}
.authConfigWrap .authConfigBody .qrcodeWrap .thumb img,
.authConfigWrap .authConfigBody .qrcodeWrap .thumb video {max-width:100%; max-height:100%;}
.authConfigWrap .authConfigBody .authConfigInfo {width:calc(100% - 170px);}
.authConfigWrap .authConfigBody .authConfigInfo .desc {height:calc(100% - 36px); color:#ffffff; font-size:14px;}
.authConfigWrap .authConfigBody .authConfigInfo .configKeySection .title {font-weight:bold; font-size:12px; color:#ffffff;}
.authConfigWrap .authConfigBody .authConfigInfo .configKeySection .keyCode {font-size:12px; color:#ffffff; word-break:break-all;}
.authConfigWrap .authConfigFooter .buttonWrap {display:flex; column-gap:10px;}

/* authentication code page */
.authCodeDiv {width:422px; height:auto;}
.authCodeDiv .enterAuthCode {display:flex; align-items:flex-start; padding-bottom:9px; width:100%; border-bottom:1px solid #fff;}
.authCodeDiv .enterAuthCode .authHeader {font-size:24px; color:#fff; word-break:break-all;}
.authCodeDiv .authBody {}
.authCodeDiv .authBody .authText {margin:28px 0;}
.authCodeDiv .authBody .authText p {font-size:14px; color:#fff;}
.authCodeDiv .authBody .authLabel {margin:0 0 44px 0;}
.authCodeDiv .authBody .authLabel label {font-size:14px; color:#fff;}
.authCodeDiv .authBody .authLabel input {margin-top:6px;}
.authCodeDiv .authFooter {}

/* .wrap .contents .authCode .authCodeDiv .authFooter .buttonWrap .button {width: 85px; height: 30px;} */

@media (max-width:768px) {
	.loginBody {height:calc(100% - 45px);}
	.login_box {padding:0 20px; box-sizing:border-box;}

}

/* ----------------------------------------------
ACCOUNT
------------------------------------------------*/
#account_wrap {position:relative; z-index:2;}
#account_wrap .account_box {width:614px; height:556px; background:#fff; padding:20px; margin:10px; box-sizing:border-box;}
#account_wrap .account_box h2 {display:block; padding:0 0 10px 0; font-size:24px; color:#464646; border-bottom:1px solid #5c5c5c; font-weight:normal;}
#account_wrap .account_box .account_content {width:100%; height:calc(100% - 84px); margin:0 auto; text-align:left; overflow-y:auto; overflow-x:hidden;}
#account_wrap .account_box .account_content .guide {text-align:right; padding:10px;}
#account_wrap .account_box .account_content .guide .required {font-size:14px;}
#account_wrap .account_box .account_content .Required {}
#account_wrap .account_box .account_content .account_line {position:relative; margin:10px 2px;}
#account_wrap .account_box .account_content .account_line dl {width:270px; margin-bottom:36px;}
#account_wrap .account_box .account_content .account_line dl dt {color:#464646; font-size:14px; font-weight:bold; font-style:italic; margin-bottom:7px;}
#account_wrap .account_box .account_content .account_line dl dd { margin-bottom:21px; position:relative;}
#account_wrap .account_box .account_content .account_line dl.profile {position:absolute; top:0px; right:10px; width:240px;}
#account_wrap .account_box .account_content .account_line dl dd p.profile {display:block; width:126px;}
#account_wrap .account_box .account_content .account_line dl dd p.profile .ico_ad {display:block; position:absolute; left:10px; top:10px; padding:2px; width:22px; height:22px; border-radius:50%; background:#cf0562; color:#fff; font-size:11px; font-weight:bold; text-align:center; line-height:22px;}
#account_wrap .account_box .account_content .account_line dl dd p.profile img {display:block; width:126px; height:126px; background:#cdcdcd; box-shadow:0 0 0 1px #747474;}
#account_wrap .account_box .account_content .account_line dl dd p.profile .MultiFile-wrap {margin-top:10px;}
#account_wrap .account_box .account_content .account_line dl dd p.profile .MultiFile-wrap input[type=file] {width:calc(100% + 100px);}
#account_wrap .account_box .account_content .account_line dl dd .MultiFile-label {font-size:12px; color:#464646; margin:10px 0 0 0; line-height:24px;}
#account_wrap .account_box .account_content .account_line dl dd .MultiFile-label .MultiFile-remove {display:inline-block; width:24px; height:24px; text-indent:-999em; background:url(/ssw/images/button/btn_close_01_n.png) no-repeat;}
#account_wrap .account_box .account_content .account_line dl dd .MultiFile-label .MultiFile-remove img {background:transparent; opacity:0;}
#account_wrap .account_box .account_content .account_line dl dd .MultiFile-label .MultiFile-remove:hover {background:url(/ssw/images/button/btn_close_01_f.png) no-repeat;}
#account_wrap .account_box .account_content .account_line dl dd .MultiFile-label .MultiFile-remove:active {background:url(/ssw/images/button/btn_close_01_p.png) no-repeat;}
#account_wrap .account_box .account_content .account_line dl dd .MultiFile-label .MultiFile-title  {display:inline-block; vertical-align:top;  width:90px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
#account_wrap .account_box .account_content .account_line dl dd #_sd_pw_reset {white-space:nowrap;}
#account_wrap .account_box .account_content .account_line dl.profile .button_white {margin:0px; position:absolute; bottom:-13px; left:11px;}
#account_wrap .account_box .account_content .account_line_flat {position:relative; padding-top:30px; font-size:0; margin: 0 -10px;}
#account_wrap .account_box .account_content .account_line_flat dl {width:calc(50% - 20px); margin:0 10px 20px; display:inline-block; vertical-align:top;}
#account_wrap .account_box .account_content .account_line_flat dl.workgroup {width:calc(100% - 20px);}
#account_wrap .account_box .account_content .account_line_flat dl:nth-child(even) {}
#account_wrap .account_box .account_content .account_line_flat dl:nth-child(even) .Required {}
#account_wrap .account_box .account_content .account_line_flat dl dt {color:#464646; font-size:14px; font-weight:bold; font-style:italic; margin-bottom:7px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
#account_wrap .account_box .account_content .account_line_flat dl dd { margin-bottom:21px; position:relative;}
#account_wrap .account_box .account_content .account_line_flat dl dd .assigned_workgroup {width:calc(100% - 4px); margin:0 2px;}
#account_wrap .account_box .account_content .account_line_flat dl dd .assigned_workgroup .aw_header {position:relative;}
#account_wrap .account_box .account_content .account_line_flat dl dd .assigned_workgroup .aw_header em {display:block; font-size:14px; color:#464646; font-weight:normal; font-style:normal;}
#account_wrap .account_box .account_content .account_line_flat dl dd .assigned_workgroup .aw_header .button {position:absolute; top:-10px; right:0px;}
#account_wrap .account_box .account_content .account_line_flat dl dd .assigned_workgroup .aw_header .button a {color:#cbcbcb;}
#account_wrap .account_box .account_content .account_line_flat dl dd .assigned_workgroup .aw_header .button a:hover {color:#FFF;}

#account_wrap .account_box .account_content .account_line_flat dl dd .assigned_workgroup .aw_body { margin-bottom:10px;}
#account_wrap .account_box .account_content .account_line_flat dl dd .assigned_workgroup .aw_body ul {}
#account_wrap .account_box .account_content .account_line_flat dl dd .assigned_workgroup .aw_body ul li {display:block; width:100%; margin-top:5px; background:#FFF;}
#account_wrap .account_box .account_content .account_line_flat dl dd .assigned_workgroup .aw_body ul li .add_workgroup {width:100%;}
#account_wrap .account_box .account_content .account_line_flat dl dd .assigned_workgroup .aw_body ul li .add_workgroup a {font-size:14px;}
#account_wrap .account_box .account_content .account_line_flat dl dd .assigned_workgroup .aw_body ul li .drag_object {display:flex; justify-content:flex-start; align-items:center; /* */ display:-webkit-flex; -webkit-justify-content:flex-start; -webkit-align-items:center;/* */ display: -ms-flexbox; -ms-flex-pack:start; -ms-flex-align: center;}
#account_wrap .account_box .account_content .account_line_flat dl dd .assigned_workgroup .aw_body ul li .drag_object .comp_box {position:relative; left:0; width:calc(100% - 0px); overflow:initial; display:flex; justify-content:flex-start; align-items:center; /* */ display:-webkit-flex; -webkit-justify-content:flex-start; -webkit-align-items:center;/* */ display: -ms-flexbox; -ms-flex-pack:start; -ms-flex-align: center;}
#account_wrap .account_box .account_content .account_line_flat dl dd .assigned_workgroup .aw_body ul li .drag_object .comp_box .info {display:block; width:calc(100% - 29px); height:auto;}
#account_wrap .account_box .account_content .account_line_flat dl dd .assigned_workgroup .aw_body ul li .drag_object .comp_box .info strong {width:calc(100% - 50px); height:auto; word-break:break-all; white-space:normal;}
#account_wrap .account_box .account_content .account_line_flat dl dd .assigned_workgroup .aw_body ul li .drag_object .comp_box a {position:relative; top:auto; right:auto; width:32px; margin:0 4px;}
#account_wrap .account_box .account_content .account_line_flat dl dd .assigned_workgroup .aw_body ul li .drag_object .comp_box .btnRemove {position:relative; top:14px; right:auto;}

#account_wrap .account_box .button_white {margin:10px 0px 0px 0px;}
#account_wrap .account_box .account_content .account_line_flat dl dd .assigned_workgroup .Required {position:relative; top:0px; left:0; color:#ff897d; font-size:12px;}
#account_wrap .account_box .account_content .account_line_flat dl dd #roleList.select_box_top {max-width:260px;}

#account_wrap .account_box .account_content .account_line_flat .privacy {clear:both; margin-bottom:20px; padding:10px; border-radius:6px; color:#464646; font-size:14px;}
#account_wrap .account_box .account_content .account_line_flat .privacyAgreement {margin-bottom:20px; clear:both; width:calc(100% - 20px); margin:0 10px; height:auto; white-space: nowrap;}
#account_wrap .account_box .account_content .account_line_flat .privacyAgreement .title {display:block; height:16px; margin-bottom:10px; color:#464646; font-style:italic; font-size:14px; font-weight:bold;}
#account_wrap .account_box .account_content .account_line_flat .privacyAgreement .label {height:30px;display: block;}
#account_wrap .account_box .account_content .account_line_flat .privacyAgreement .label strong {color:#464646;}
#account_wrap .account_box .account_content .account_line_flat .privacyAgreement .label strong a {text-decoration:underline; color:#f4fb51;}
#account_wrap .account_box .account_content .account_line_flat .privacyAgreement .Required {position:relative; top:auto; left:38px;}

#account_wrap .account_box .account_content .account_line_flat .privacyAgreement .opt {margin:2px;}
#account_wrap .account_box .account_content .account_line_flat .privacyAgreement .opt .text {color:#464646; font-size:12px; font-weight:bold; white-space: normal;}
#account_wrap .account_box .account_content .account_line_flat .privacyAgreement .opt .text a {text-decoration:underline;}
#account_wrap .account_box .account_content .account_line_flat .privacyAgreement .opt .text a:after {content:''; display:inline-block; vertical-align:middle; width:14px; height:14px; margin:0 6px; background:url(/ssw/images/svg/icon_open_window.svg) no-repeat; }


/* workgroup_box */
#account_wrap .workgroup_box {width:300px; height:556px; background:#fff; z-index:1; padding:20px; box-sizing:border-box;}
#account_wrap .workgroup_box h2 {display:block; padding:0 0 10px 0; font-size:24px; color:#464646; border-bottom:1px solid #5c5c5c; font-weight:normal;}
#account_wrap .workgroup_box .work_list {height:calc(100% - 82px); margin-top:10px; position:relative;}
#account_wrap .workgroup_box .work_list ul {margin:10px 0 0 0; height:calc(100% - 50px); overflow-y:auto;}
#account_wrap .workgroup_box .work_list ul li { display:block; margin:10px 0; font-size: 0;}
#account_wrap .workgroup_box .work_list ul li .object {display:flex; justify-content:flex-start; align-items:center; vertical-align:middle;}
#account_wrap .workgroup_box .work_list ul li .object a.add {display:inline-block; vertical-align:middle; width:30px; height:30px; background:url(/ssw/images/button/btn_insert_n.png) no-repeat; text-indent:-999em;}
#account_wrap .workgroup_box .work_list ul li .object a.add:hover  {background:url(/ssw/images/button/btn_insert_f.png) no-repeat;}
#account_wrap .workgroup_box .work_list ul li .object a.add:active {background:url(/ssw/images/button/btn_insert_p.png) no-repeat;}
#account_wrap .workgroup_box .work_list ul li .object img {display:inline-block; vertical-align:middle; width:90px; height:50px; padding-left:16px;}
#account_wrap .workgroup_box .work_list ul li .object strong {display:inline-block; vertical-align:middle; font-size:12px; font-weight:normal; padding-left:15px; color:#464646; word-break:break-all;}
#account_wrap .workgroup_box .button_white {}
#account_wrap .workgroup_box .button_gray {text-align:right;}

/* licenseWrap */
.licenseWrap {width:380px; text-align:left; position:absolute; top:50%; left:50%; margin:-110px 0 0 -210px; background:#686868; padding:20px;}
.licenseWrap .licenseBox {}
.licenseWrap .licenseBox h2 {display:block; padding-bottom:10px; margin:0; font-size:24px; color:#eee; border-bottom:1px solid #eee; font-weight:normal;}
.licenseWrap .licenseBox .licenseContainer {margin: 20px 0;}
.licenseWrap .licenseBox .licenseContainer dl {display:block; color:#eee; margin-bottom:4px;}
.licenseWrap .licenseBox .licenseContainer dl dt {margin-bottom: 10px;}
.licenseWrap .licenseBox .licenseContainer dl dd {margin:0;}
.licenseWrap .licenseBox .licenseContainer dl dd input {width:100%; background:#fff; color:#333; padding:6px; box-sizing:border-box; border-radius:2px;}
.licenseWrap .licenseBox .licenseContainer .Required {color:#ff604f; visibility:hidden;}
.licenseWrap .licenseBox .licenseContainer .Required.active {visibility:visible;}


@media (max-width:992px) {
	#account_wrap .account_box {width:calc(100% - 20px); padding:14px; height:auto;}
	#account_wrap .account_box .account_content {overflow:hidden;}
	#account_wrap .account_box .account_content .account_line dl {width:100%;}
	#account_wrap .account_box .account_content .account_line dl.profile {position:relative; top:auto; right:auto; width:auto;}
	#account_wrap .account_box .account_content .account_line_flat dl {width:calc(100% - 20px);}
	
	#account_wrap .workgroup_box {width:calc(100% - 20px); box-shadow: 0px 0px 100px 1000px rgb(0 0 0 / 60%); position:absolute; top:0; height:auto;}
	#account_wrap .workgroup_box .work_list ul {height:auto;}

}