@charset "utf-8";
/*@latest 2022.04.29 OSY */

 /********** Site Mngr **********/
.siteWrap {position:relative; width:100%; height:100%; background:#f8f8f8; overflow:hidden;}
.siteWrap::before {position:absolute; left:-25%; top:-50%; content:''; width:150%; height:100%; background-image:linear-gradient(to right, #124274 , #1d5793); border-radius:50%;}
.siteWrap .siteLogin {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.siteWrap .siteLogin div.siteLoginbar {text-align:center; font-size:16px; color:#fff;}
.siteWrap .siteLogin div.siteloginbox {position:relative; width:auto; min-width:430px; padding:50px; margin-top:25px; background:#fff; border-radius:30px; box-shadow:5px 5px 30px 0px rgba(126, 126, 126, 0.2); box-sizing:border-box;}
.siteWrap .siteLogin h1 {text-align:center;}
.siteWrap .siteLogin h1 img {width:auto; max-width:260px; height:auto; max-height:65px;}

.siteWrap .siteLogin div.siteLoginctn {margin-top:30px;}
.siteWrap .siteLogin div.siteLoginctn ul {width:100%; margin-bottom:10px;}
.siteWrap .siteLogin div.siteLoginctn ul li {width:100%;}
.siteWrap .siteLogin div.siteLoginctn ul li:not(:first-child) {margin-top:20px;}
.siteWrap .siteLogin div.siteLoginctn ul li > input {display:block; width:100%; font-size:13px; padding:18px 30px; background:#fff; border:1px solid #c8c8c8; outline:1px solid #fff; border-radius:30px; box-sizing:border-box; appearance:none; -webkit-appearance:none;} 
.siteWrap .siteLogin div.siteLoginctn ul li > input::placeholder {color:#a3a3a3;}
.siteWrap .siteLogin div.siteLoginctn ul li > input:focus {border-color:#1c4f82; outline-color:#1c4f82;}
.siteWrap .siteLogin div.siteLoginctn > a.siteLoginbtn {display:block; width:100%; padding:18px 20px; margin-top:20px; background:#083778; text-align:center; font-size:16px; color:#fff; border-radius:30px; box-sizing:border-box;}
.siteWrap .siteLogin div.siteLoginctn > a.siteLoginbtn:hover {background:#102542; box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2) inset;}
.siteWrap .siteLogin .copywrap {margin-top:30px; text-align:center; font-size:13px; color:#191e26; word-break:keep-all;}

/* ID save check */
.siteWrap .siteLogin div.siteLoginctn .info_check {display:inline-block; margin-top:20px; margin-left:20px; font-size:15px; font-weight:600;}
.siteWrap .siteLogin div.siteLoginctn .info_check input {position:relative; width:20px; height:20px !important; border-radius:50%; cursor:pointer; appearance:none; vertical-align:-4px; border:1px solid rgba(0,0,0,0.2); background:#f9f9f9 !important; box-sizing:border-box;}
.siteWrap .siteLogin div.siteLoginctn .info_check input em {color:#666;}
.siteWrap .siteLogin div.siteLoginctn .info_check input::before {position:absolute; left:-1px; top:-1px; z-index:1; content:''; width:20px; height:20px; background:url(/images/wzwg/cmm/mber/sbscrb/chcek_arrow.png) no-repeat;}
.siteWrap .siteLogin div.siteLoginctn .info_check input[type="checkbox"]:checked {background:#083778 !important; border-color:#083778;}
.siteWrap .siteLogin div.siteLoginctn .info_check input[type="checkbox"]:checked em {color:#083778; font-weight:600;}
.siteWrap .siteLogin div.siteLoginctn .info_check label {cursor:pointer;}

	@media all and (max-width:599px) {
		.siteWrap::before {top:0; height:30%; border-radius:0;}
		.siteWrap .siteLogin {width:80%; left:50%; top:30px; transform:translate(-50%, 0);}
		.siteWrap .siteLogin div.siteloginbox {min-width:auto; padding:60px 20px 20px; margin-top:60px; border-radius:20px;}
		.siteWrap .siteLogin div.siteloginbox::before {top:-40px; width:80px; height:80px; background-size:55px;}
		.siteWrap .siteLogin div.siteLoginctn ul li > input,
		.siteWrap .siteLogin div.siteLoginctn > a.siteLoginbtn {padding:10px 20px;}
		.siteWrap .siteLogin div.siteLoginctn ul li:not(:first-child),
		.siteWrap .siteLogin div.siteLoginctn .info_check {margin-top:10px;}	
		.siteWrap .siteLogin div.siteLoginctn .info_check {margin-left:10px; font-size:13px;}
		.siteWrap .siteLogin .copywrap {margin-top:20px;}
	}



 /********** System Mngr **********/
.sysWrap {background:#f1f1f1; width:100%; float:left; height:100%; position:relative; overflow:hidden;}
.sysWrap::before {position:absolute; left:-25%; top:-50%; content:''; width:150%; height:100%; background-image:linear-gradient(to right, #222 , #666); border-radius:50%;}
.sysWrap .sysLogin {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.sysWrap .sysLogin div.sysLoginbar {text-align:center; font-size:16px; color:#fff;}
.sysWrap .sysLogin div.sysloginbox {position:relative; width:auto; min-width:430px; padding:50px; margin-top:25px; background:#fff; border-radius:30px; box-shadow:5px 5px 30px 0px rgba(126, 126, 126, 0.2); box-sizing:border-box;}
.sysWrap .sysLogin div.sysloginbox::before {display:none; position:absolute; top:-50px; left:50%; transform:translateX(-50%); z-index:10; content:''; width:100px; height:100px; border-radius:100%; background:#fff url('/images/wzwg/site/mngr/mngr_syslogin.png') 50% 55% no-repeat; background-size:60px; border:1px solid #333; box-sizing:border-box;}
.sysWrap .sysLogin h1 {text-align:center;}
.sysWrap .sysLogin h1 img {width:auto; max-width:260px; height:auto; max-height:65px;}

.sysWrap .sysLogin div.sysLoginctn {margin-top:30px;}
.sysWrap .sysLogin div.sysLoginctn ul {width:100%; margin-bottom:10px;}
.sysWrap .sysLogin div.sysLoginctn ul li {width:100%;}
.sysWrap .sysLogin div.sysLoginctn ul li:not(:first-child) {margin-top:20px;}
.sysWrap .sysLogin div.sysLoginctn ul li > input {display:block; width:100%; font-size:13px; padding:18px 30px; background:#fff; border:1px solid #c8c8c8; outline:1px solid #fff; border-radius:30px; box-sizing:border-box; appearance:none; -webkit-appearance:none;} 
.sysWrap .sysLogin div.sysLoginctn ul li > input::placeholder {color:#a3a3a3;}
.sysWrap .sysLogin div.sysLoginctn ul li > input:focus {border-color:#222; outline-color:#222;}
.sysWrap .sysLogin div.sysLoginctn > a.sysLoginbtn {display:block; width:100%; padding:18px 20px; margin-top:20px; background:#333; text-align:center; font-size:16px; color:#fff; border-radius:30px; box-sizing:border-box;}
.sysWrap .sysLogin div.sysLoginctn > a.sysLoginbtn:hover {background:#121212; box-shadow:2px 2px 3px 0px rgba(0,0,0,0.8) inset;}
.sysWrap .sysLogin .copywrap {margin-top:30px; text-align:center; font-size:13px; color:#191e26; word-break:keep-all;}

/* ID save check */
.sysWrap .sysLogin div.sysLoginctn .info_check {display:inline-block; margin-top:20px; margin-left:20px; font-size:15px; font-weight:600;}
.sysWrap .sysLogin div.sysLoginctn .info_check input {position:relative; width:20px; height:20px !important; border-radius:50%; cursor:pointer; appearance:none; vertical-align:-4px; border:1px solid rgba(0,0,0,0.2); background:#f9f9f9 !important; box-sizing:border-box;}
.sysWrap .sysLogin div.sysLoginctn .info_check input em {color:#666;}
.sysWrap .sysLogin div.sysLoginctn .info_check input::before {position:absolute; left:-1px; top:-1px; z-index:1; content:''; width:20px; height:20px; background:url(/images/wzwg/cmm/mber/sbscrb/chcek_arrow.png) no-repeat;}
.sysWrap .sysLogin div.sysLoginctn .info_check input[type="checkbox"]:checked {background:#333 !important; border-color:#333;}
.sysWrap .sysLogin div.sysLoginctn .info_check input[type="checkbox"]:checked em {color:#333; font-weight:600;}
.sysWrap .sysLogin div.sysLoginctn .info_check label {cursor:pointer;}

	@media all and (max-width:599px) {
		.sysWrap::before {top:0; height:30%; border-radius:0;}
		.sysWrap .sysLogin {width:80%; left:50%; top:30px; transform:translate(-50%, 0);}
		.sysWrap .sysLogin div.sysloginbox {min-width:auto; padding:60px 20px 20px; margin-top:60px; border-radius:20px;}
		.sysWrap .sysLogin div.sysloginbox::before {top:-40px; width:80px; height:80px; background-size:50px;}
		.sysWrap .sysLogin div.sysLoginctn ul li > input,
		.sysWrap .sysLogin div.sysLoginctn > a.sysLoginbtn {padding:10px 20px;}
		.sysWrap .sysLogin div.sysLoginctn ul li:not(:first-child),
		.sysWrap .sysLogin div.sysLoginctn .info_check {margin-top:10px;}	
		.sysWrap .sysLogin div.sysLoginctn .info_check {margin-left:10px; font-size:13px;}
		.sysWrap .sysLogin .copywrap {margin-top:20px;}
	}