
:root{

	--colB:#566EFF;/*블루*/
	--colGr:#f6f6f6;/*그레이*/
	--colG:#34c38f;/*그린*/
	--colSky:#50a5f1;/*스카이*/
	--colY:#f1b44c;/*엘로우*/
	--colR:#f46a6a;/*레드*/
	--colDg:#343a40;/*다크그레이*/
	--colSt:#74788d;/*다크그레이*/
	--colBl:#000;/*블랙*/
	--colWh:#fff;/*화이트*/
	--comBorder:1px solid #e5e5e5;
	--:' Sans KR','Gulim';
}

/*button*/
	._colB{color: var(--colB);}
	._colG{color: var(--colG);}
	._colSky{color: var(--colSky);}
	._colY{color: var(--colY);}
	._colR{color: var(--colR);}
	._colDg{color: var(--colDg);}
	._colSt{color: var(--colSt);}
	.popUpBtn span{font-weight: bold;display: inline-block;width: 100%;height: 100%;line-height: 32px;}
	._btn{line-height: 32px; display: inline-block;text-align: center; cursor: pointer; transition: all 0.5s; border-radius: 3px;color: #fff;height: 32px;min-width: 80px;padding: 0 12px;font-weight: bold;}
	._btn._colGr{background-color: var(--colGr);color: var(--colBl)}
	._btn._colB{background-color: var(--colB);}
	._btn._colG{background-color: var(--colG);}
	._btn._colSky{background-color: var(--colSky);}
	._btn._colY{background-color: var(--colY);}
	._btn._colR{background-color: var(--colR);}
	._btn._colDg{background-color: var(--colDg);}
	._btn._colSt{background-color: var(--colSt);}
	._btn._colB:hover{background-color: #3951c6}
	._btn._colG:hover{background-color: #24af7c}
	._btn._colSky:hover{background-color: #3389d6}
	._btn._colY:hover{background-color: #d89d3a}
	._btn._colR:hover{background-color: #e65454}
	._btn._colDg:hover{background-color: #181e23}
	._btn._colSt:hover{background-color: #5f637b}

	._lineBtn{transition: all 0.5s;font-weight: bold;border-style: solid;border-width: 1px;border-radius: 3px;height: 32px;min-width: 80px;padding: 0 12px}
	._lineBtn._colB:hover{background-color:#d6dcf9;}
	._lineBtn._colG:hover{background-color:#ccf0e3;}
	._lineBtn._colSky:hover{background-color:#d3e8fb;}
	._lineBtn._colY:hover{background-color:#fbecd2;}
	._lineBtn._colR:hover{background-color:#fcdada;}
	._lineBtn._colDg:hover{background-color:#cccecf;}
	._lineBtn._colSt:hover{background-color:#dcdde2;}
	._roundBtn{border-radius: 100px;}
	/*btn size*/
	.ss{min-width: 20px;height: 32px; }
	.sl{height: 36px;width: 100px;line-height: 36px;}
	button.delBtn{background-image: url(../../img/common/del_icon.png);font-size: 0;width: 32px;height: 16px;text-align: center;background-size: 50%;}
	._btn:disabled{background-color: #c1c1c1}
	._btn:disabled:hover{background-color: #c1c1c1}

/*input*/
	.checkLabel{position: relative;}
	.checkLabel input{width: 100%;position: absolute;opacity: 0;left: 0;cursor: pointer;top: 0;height: 100%;z-index: 1;}
	.checkLabel input[type="checkbox"] + label,
	.checkLabel input[type="radio"] + label{line-height:13px;display: inline-block;height: 100%;cursor: pointer;position: relative;padding-left: 20px;}
	.checkLabel input[type="checkbox"] + label:after,
	.checkLabel input[type="radio"] + label:after{content: "";display: block;width: 12px;height: 12px;left: 0;top: 0;border:1px solid #8b8b8b;position: absolute;border-radius: 2px;}
	.checkLabel input[type="radio"] + label:after{border-radius: 20px;}
	.checkLabel input[type="checkbox"]:checked + label:after{background-color: #0075ff;background-image: url(../../img/common/check_icon.png);background-size: 80%;background-position: center;border:1px solid #0075ff;background-repeat: no-repeat;}
	.checkLabel input[type="radio"]:checked + label:after{border:1px solid #0075ff;}
	.checkLabel input[type="radio"]:checked + label:before{position: absolute;width: 8px;height: 8px;background-color: #0075ff;content: "";border-radius: 8px;left: 3px;top: 3px;}
	input[type="email"],
	input[type="password"],
	input[type="text"],
	input[type="number"],
	input[type="date"],
	input[type="month"]{
		border: var(--comBorder);
		height: 32px;
		border-radius: 3px;
		padding: 0 16px;
	}
	input[type="email"]:disabled,
	input[type="password"]:disabled,
	input[type="text"]:disabled,
	input[type="number"]:disabled,
	input[type="date"]:disabled{
	  background: #fafafa;
	}
	input[type="date"]{
		width: 140px;
		padding: 0 10px;
	}
	select{border:var(--comBorder);height: 32px;border-radius: 3px;min-width: 120px;}

/*section tit search option common*/
	._searchOption:after{content: "";display: block;clear: both;}
	._searchOption input,
	._searchOption select,
	._searchOption button,
	._searchOption span{float: left;margin-right: 5px;line-height: 32px;}
	._searchOption button{width: 54px;height: 32px;font-weight: bold;}
/*table search Count*/
	._searchCount{margin-bottom: 10px;}
	._searchCount span{font-weight: bold;color: var(--p);}


/*table width*/
	.t_Wss {min-width:80px;}
	.t_Ws {min-width: 120px;}
	.t_Wm {width: ;}
	.t_Wl {width: 420px;}
	.t_WXl {min-width: 200px;}

	.marginL_5{margin-left: 5px;}
	.marginR_5{margin-right: 5px;}
	.marginT_3{margin-top:30px;}
	.marginB_3{margin-bottom: 30px;}
	.marginB_1{margin-bottom: 10px;}
	td.t__8_h,th.t__8_h{width: 80px}
	td.t_Wss,th.t_Wss {width:120px;}
	td.t_1_h,th.t_1_h{width: 150px}
	td.t_3_h,th.t_3_h{width: 340px}
	td.t_Ws,th.t_Ws  {width: 400px;}
	td.t_Wm,th.t_Wm  {width:500px ;}
	td.t_Wl,th.t_Wl  {width:200px ;}
	td.t_WXl,th.t_WXl {width:640px;}
	th.t_Wm,th.t_Wm  {width:500px ;}
	._960{width: 960px;margin-left:auto;margin-right: auto;}




/*table common*/
	table._arL td {text-align: left;}
	table._arC td {text-align: center;}
	table._arR td {text-align: right;}

	table._arL td.arC {text-align: center;}
	table._arL td.arR {text-align: right;}

	table._arC td.arL {text-align: left;}
	table._arC td.arR {text-align: right;}

	table._arR td.arL {text-align: left;}
	table._arR td.arC {text-align: center;}

	table{width: 100%;border:var(--comBorder);}
	table tr{border:var(--comBorder);transition: 0.2s all;}
	table.list tr:hover{background-color:#e9edf4}
	table tr.empty td{ height: 500px;text-align: center;color: #797979}
	table tr.empty:hover{background: #FFF;}
	table th{border:var(--comBorder);background-color: #f5f5f5;height: 46px;vertical-align: middle;font-weight: bold;padding: 0 10px;}
	table td{border:var(--comBorder);line-height: 16px;padding: 10px;}
	table select,
	table td input[type="password"],
	table td input[type="email"],
	table td input[type="text"],
	table td input[type="number"]{width: 100%;}
	table th select{font-weight: bold; padding: 0;background-color: transparent;border:0;}
	table.set th{width: 180px;text-align: left;}

	table td .inputWrap:after{content: "";display: block;clear: both;}
	table td .inputWrap{border: var(--comBorder);}
	table td .inputWrap input {
		border:0; float: left;min-width: calc(100% - 36px);
		min-width: calc(100% - 50px);
		width: initial;
	}
	table td .inputWrap span{
		color: #bbb;display: block;padding-right: 10px;
		text-align: right;	float: right;line-height: 32px;
		max-width: 50px;
	}


/*table option design*/
	table td .inputBtn input{float: left;width: calc(100% - 100px)}
	table td .inputBtn button{float: right;}
	table td .btnWrap:after{content: "";display: block;clear: both;}
	table td .btnWrap button{width: calc((100% - 5px)/2);float: left;}
	table td .btnWrap button:first-child{margin-right: 5px;}
	.linkBtn{color: var(--colB);border-bottom: 1px solid var(--colB);}
	.linkBtn._colR{color: var(--colR);border-bottom: 1px solid var(--colR)}
	.linkBtn._colG{color: var(--colG);border-bottom: 1px solid var(--colG)}
	table td .itemWrap:after{content: "";display: block;clear: both;}
	table td .itemWrap .item{float: left;margin-right: 10px;padding-right: 10px;	border-right: 1px solid #f0f0f0;}
	table td .itemWrap .item:last-child{border-right: 0;margin-right: 0;padding-right: 0;}
	table td .itemWrap .checkLabel{	float: left;margin-right: 20px;}
	table td .itemWrap .checkLabel:last-child{margin-right: 0;}
	table td .Memotextarea{background-color: #faf6d9;}
	/*table td .itemWrap input{float: left;width: calc(100% - 60px);margin-right: 10px;}*/
	table td .itemWrap button{float: left;}
	table td .itemWrap select{margin-right: 5px; float: left; width: initial;}
	table td ._address:after{content: "";display: block;clear: both;}
	table td ._address input{width: calc((100% - 100px)/2);margin-left: 10px;float: left;}
	table td ._address button{float: left;}

	table td._mag{padding-right: 30px;}
	table td._mag ._magDetail {
		transition: 0.5s all;
		position: relative;
		cursor: pointer;width: 240px;
	}
	table td._mag ._magDetail .txtpop{
		width: 100%;font-weight: bold;
		height: 16px;display: block;text-overflow:ellipsis;
		overflow: hidden;white-space:nowrap;
	}
	table td._mag ._magDetail .txtpop .imgWrap {margin-top: 10px;}
	table td._mag ._magDetail .txtpop .imgWrap img{width: 50%;}
	table td._mag:hover ._magDetail .txtpop{
		/* overflow: initial;white-space:initial; */
        overflow: auto;
		max-height: 500px;
		height: initial;text-overflow:ellipsis;
		transform: translateY(-50%);
		display: block;position: absolute;
		left: 0;border-radius: 5px;
		top: 0;border:var(--comBorder);
		padding: 20px;z-index: 1;
		background-color: #fff;
		box-shadow:  -8.9px 16.8px 13px rgba(48, 15, 90, 0.14);
	}
	table .help {position: relative; cursor: pointer;}
	table .help .tit{font-weight: bold;position: relative;}
	table .help .tit:after{
		content: "✓";display: block;
		width:15px; height: 15px;
		font-size: 12px;
		position: absolute;color: #b0b0b0;
		right:-20px;top: -1px;border-radius: 50px;
		line-height: 15px;font-size: 10px;
	}
	table .help:hover .txt{
		display: inline-block;
	}
	table .help .txt{
		border:var(--comBorder);
		position: absolute;display: none;
	 	top: 40px;left: 50%;transform: translateX(-50%);
	 	width: 200px;line-height: 20px;
	 	padding: 10px;z-index: 1;text-align: left;
		background-color: #000;color: #fff;border-radius: 5px;
		box-shadow:  -8.9px 16.8px 13px rgba(48, 15, 90, 0.14);
	}
	/*발송통계*/
	table.send_statistics td{height: 22px; line-height: 5px;padding:0 10px}
	table.send_statistics td.bg{	background-color: #f6f7f9;font-weight: bold}
	table.send_statistics .total:hover td{background-color: #e9edf4}

	.{font-size: 14px;}
	table .textarea{border:var(--comBorder);; line-height: 24px; vertical-align: top; padding: 30px; width: 100%;resize: none;height:420px;}
	table td.site_images{transition: all 0.3s;cursor: pointer;}
	table td.site_images img{max-height: 80px;max-width: 80px;cursor: pointer;}
	table td.site_images .imgReplace{
		position: relative;cursor: pointer;
	}
	table td.site_images:hover {background-color: var(--colGr);}
	table td.site_images input[type="file"]{
		position: absolute;opacity: 0;
		left: 0;
		top: 0;cursor: pointer;
		width: 100%;
		height: 100%;
	}

/*white-space*/
	._shorten{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
	._shorten_s{-webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical;}

/*array*/
	._rowCenter{display: -webkit-box; display: -ms-flexbox; display: flex;-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
	.arR{text-align: right;}
	.arC{text-align: center;}
	.arL{text-align: left}
	.bold{font-weight: bold;}
	.disabled{background-color: #f6f6f6;}
	.bg_G{background-color: #fafafa;}
	.bg_y{background-color:#fffae0 }
/*Txt Tab common*/

	._txtTab:after{content: "";display: block;clear: both;}
	._txtTab button,
	._txtTab a{float: left;font-size: 14px;margin-right: 14px;padding-right: 14px;position: relative;line-height: 32px;color: #595959;}
	._txtTab button:after,
	._txtTab a:after{content: "";display: block;position: absolute;width: 1px;height: 14px;background-color:#dddddd;right: 0;top: 50%;transform: translateY(-50%);}
	._txtTab button:last-child:after,
	._txtTab a:last-child:after{display: none;}
	._txtTab button.on,
	._txtTab a.on{color: var(--colB);font-weight: 500;}

/*page nav*/
	._page:after{content: "";display: block;clear: both;}
	._page{border-radius: 5px;margin-top: 20px;}
	._page > div{float: left;height: 34px;line-height: 34px;border:var(--comBorder);border-right:0;}
	._page > div.last{letter-spacing: -3px}
	._page > div.first{letter-spacing: -3px}
	._page > div:first-child{border-radius: 5px 0 0 5px}
	._page > div:last-child{border-right: 1px solid #e5e5e5;border-radius: 0 5px 5px 0;}
	._page > div.on{background-color: var(--colSt);}
	._page > div a{display: inline-block;height: 100%;padding: 0 12px;}
	._page > div.on a{color: var(--colWh);font-weight: bold;}

/*section common bottom Btn*/
._secComBtn{margin: 20px 0;margin-bottom: 0;}


/*+ linkBtn*/
.txtLinkWrap .linkBtn{margin-left: 5px;}


/*login*/

._login{position: fixed;width: 100%;height: 100%;left: 0;top: 0;
}
._login .boxWrap{position: absolute;right: 0;width: 100%;background-color:#fff;height: 100%;}


._login .boxWrap .conBox{width:460px;position: absolute;left: 50%;top: 47%;transform: translate(-50%,-50%);padding:60px 50px;border-radius: 10px;box-shadow: -4.9px 8.8px 61px rgb(91, 89, 131, 0.16);}
._login .loginBox input{font-size: 14px;border:0;padding: 0;border-bottom: var(--comBorder);}
._login .boxWrap .conBox h1{background-image: url(/logo);width: 100%;height: 82px;background-size: 250px;font-size: 0;}
._login .boxWrap .conBox .loginBox{margin-top: 50px;margin-bottom: 10px;}
._login .boxWrap .conBox .loginBox input{width: 100%;height: 42px;transition: 0.3s all;margin-bottom: 10px;}
._login .boxWrap .conBox .loginBox input:focus{border-bottom: 1px solid #494949;}
._login .boxWrap .conBox .securityBox {margin-top: 20px;border: var(--comBorder);border-radius: 5px;padding: 5px;}
._login .boxWrap .conBox .securityBox input{float: left;width: calc(100% - 140px);font-size: 14px;border:0;height: 30px;}
._login .boxWrap .conBox .securityBox button{float: right;height: 30px;width: 110px;}
._login .boxWrap .bot{width: 100%;min-height:60px;background-color: #f0f0f0;margin-top: 20px;}
._login .boxWrap .conBox button.login{width: 100%;font-size: 16px;margin-top: 20px;font-weight: initial;height: 50px;}



._ip:after{content: "";display: block;clear: both;}
._ip span{float: left;width: calc((100% - 48px)/4);margin-right: 16px;position: relative;}
._ip span:after{width: 5px;height: 5px;content: "";border-radius: 5px;background-color: #000;position: absolute;bottom: 0;right:-10px;}
._ip span:last-child{margin-right: 0;}
._ip span:last-child:after{display: none;}
._ip span input{width: 100%; text-align: center;}


.hoverTxt{position: relative;cursor: pointer;}
.hoverTxt div{position: absolute;display: none;width: 200px;background-color: #fff;right: 0;border-radius: 5px;text-align: left;border:var(--comBorder);padding: 20px;z-index: 1;background-color: #fff;box-shadow:  -8.9px 16.8px 13px rgba(48, 15, 90, 0.14);}
.hoverTxt:hover div{display: block;}


.plusBtnIcon{font-size: 20px;font-weight: bold;color: #fff;height: 32px;border-radius: 3px;width: 36px;background-color: var(--colG);}

