@charset "utf-8";

/*
 *
 * file : Sub
 * date : 220312
 * writer : eun
 *
 *
 */

 /* login */
.login-wrap{display:flex;height:100vh;width:100%}
.login-wrap .logo-wrap{width:40%;background:url('../img/sub/bg-login.jpg') center/cover no-repeat;display:flex;align-items:center;justify-content:center}
.login-wrap .info-wrap{width:60%;display:flex;align-items:center;padding-left:150px}
.login-wrap .inner{width:500px}
.login-wrap .info-wrap .tit{font-size:2.75rem;font-weight:500;color:#005629}
.login-wrap .info-wrap .tit strong{color:#53a078}
.login-wrap .info-wrap .stit{font-size:1.25rem;color:#808080;margin-bottom:50px;padding-left:5px}
.login-wrap .info-wrap .input-text{height:60px}
.login-wrap .info-wrap li{margin-bottom:15px}
.login-wrap .save-id{display:flex;justify-content:flex-end}
.login-wrap .info-wrap .btn-login{height:60px;color:#fff;width:100%;background-color:#53a078;font-size:1.25rem;margin-top:30px}
.login-wrap .check-box input[type="checkbox"] + label:before{width:20px;height:20px;top:3px}
.login-wrap .check-box input[type="checkbox"]:checked + label:before{font-size:1.2em;line-height:normal}

.kakao-wrap{display:flex}
.kakao-wrap .info-wrap{width:calc(100% - 400px);padding:20px;border-right:1px solid #dcdcdc}
.kakao-wrap .info-wrap .inner{display:flex}
.kakao-wrap .phone-wrap{width:370px;padding:0 20px}
.kakao-wrap .phone-wrap .phone{background:url('../img/sub/bg-mobile.png') center/cover no-repeat;width:100%;height:546px;padding:45px 20px 20px 20px}
.kakao-wrap .phone-wrap .phone .input-text{width:100%;height:390px;background-color:#fefff1;border-radius:5px;border:1px solid #e5e5e5}
.kakao-wrap .phone-wrap .phone .btn-submit{background-color:#fbd022;color:#fff;border-radius:5px;font-size:1.25rem;width:100%;height:55px;font-weight:500;margin-top:15px;transition:.3s}
.kakao-wrap .phone-wrap .phone .btn-submit:hover{background-color:#ffcc00}
.kakao-wrap .ck-wrap{display:flex;margin-top:20px}
.kakao-wrap .ck-wrap .tit{font-weight:bold;color:#53a078;width:80px;flex-shrink:0}
.kakao-wrap .group-wrap{width:400px;padding:20px}
.kakao-wrap .select-wrap{width:calc(100% - 370px)}
.select-box{border:1px solid #53a078;border-radius:5px;overflow:hidden}
.select-box .tbl-basic tr:last-child td{border-bottom:0}
.select-box.min-height{height:190px;overflow-y:auto}
.select-box .tit{font-weight:bold;color:#53a078;padding:20px;position:relative;background-color:#edf6f3;border-bottom:1px solid #53a078}
.select-box .tit:last-child{border-bottom:0}
.select-box .tit .btn-wrap{position:absolute;right:20px;top:50%;transform:translateY(-50%);display:flex;align-items:center}
.select-box .tit .btn-wrap > *{margin-left:5px}
.select-box .con{padding:20px}
.select-wrap .select-box .con{border-bottom:1px solid #53a078}
.select-box .frm-item{margin-bottom:10px;display:flex;align-items:center}
.select-box .frm-item:last-child{margin-bottom:0}
.select-box .frm-item .label{font-weight:500;width:120px;flex-shrink:0}
.select-box .frm-item .label-set{width:calc(100% - 120px)}
.select-box .frm-item .label-set .flex{display:flex;justify-content:space-between}
.select-box .frm-item .label-set .flex .input-text{margin-right:5px}
.select-box .frm-item .label-set .flex .input-text:last-child{margin-right:0}
.input-btn-wrap{display:flex;width:100%}
.input-btn-wrap .input-text{margin-left:5px}
.input-btn-wrap .input-text:first-child{margin-left:0}
.input-btn-wrap .btn-base{flex-shrink:0}
.input-btn-wrap .btn-plus{margin-left:5px}
.td-num{width:50px}
.btn-base.btn-add{background-color:#fff;color:#53a078}
.btn-base.btn-add:hover{background-color:#fbfafa}
.btn-base.btn-plus{width:35px}
.btn-base.btn-down{width:auto;padding:0 10px}
.btn-base.btn-down:before{background:url('../img/sub/ico-down.png') center no-repeat;content:"";width:14px;height:18px;margin-right:5px}
.btn-base.btn-file{width:auto;padding:0 10px}
.btn-base.btn-file:before{background:url('../img/sub/ico-file.png') center no-repeat;content:"";width:16px;height:13px;margin-right:5px}

.person-wrap{margin-top:20px;display:flex;align-items:center;padding-bottom:10px;width:100%;justify-content:space-between}
.person-wrap .total{flex-shrink:0;font-weight:bold;color:#53a078}
.person-wrap .btn-wrap{display:flex}
.person-wrap .btn-add{width:auto;padding:0 10px;margin:0 2.5px}
.person-wrap .group{display:flex;align-items:center}
.person-wrap .group label{flex-shrink:0;margin-right:5px}
.person-wrap .group .btn-base{margin-left:5px}
.group-wrap .address-wrap{height:calc(100% - 248px)}
.group-wrap .address-wrap .select-box{height:100%}
.group-wrap .address-wrap .con{padding:0}
.group-wrap .group-1item{display:block;position:relative;padding:20px;border-bottom:1px solid #e2f3ed}
.group-wrap .group-1item:after{position:absolute;font-family:'xeicon';content:"\e936";right:20px;top:50%;transform:translateY(-50%);color:#53a078;transition:.3s}
.group-wrap .group-1item.on:after{transform:rotate(180deg) translateY(50%)}
.group-wrap .group-2wrap{display:none}
.group-wrap .group-2wrap li{padding:10px 20px;border-bottom:1px solid #e2f3ed}
.group-wrap .group-2wrap li:hover{background-color:#e2f3ed}
.group-wrap .group-2wrap li .check-box{background:url('../img/sub/ico-arrow.png') center no-repeat;background-position-x:30px;padding-left:50px}
.group-wrap .notice-wrap{margin-top:20px}
.group-wrap .notice-wrap .con{padding:0}
.group-wrap .notice-wrap .item{display:flex;align-items:center;padding:10px 20px;justify-content:space-between}
.group-wrap .notice-wrap .item:hover{background-color:#e2f3ed}
.group-wrap .notice-wrap .board-date{color:#7d7d7d;flex-shrink:0}
.group-wrap .notice-wrap .board-subject{width:calc(100% - 80px)}

.item-hipen > li{position:relative;padding-left:20px;margin:10px 0}
.item-hipen > li:last-child{margin-bottom:0}
.item-hipen > li:before{display:block;content:"";position:absolute;top:12px;left:0;width:10px;height:3px;background-color:#333}

.item-square > li{position:relative;padding-left:15px;margin:10px 0}
.item-square > li:last-child{margin-bottom:0}
.item-square > li:before{width:4px;height:4px;background-color:#a2a2a2;position:absolute;display:block;content:"";left:0;top:10px}

.item-num{counter-reset: section}
.item-num > li{position:relative;padding-left:50px;margin:15px 0}
.item-num > li::before{position:absolute;top:-2px;left:0;border:1px solid #0066d8;color:#0066d8;counter-increment: section;content: "0" counter(section);padding:2px 4px}

/* 모바일 이미지 확대보기(새창) */
.mblink{position:relative}
.mblink a{display:none;position:absolute;bottom:0;right:0;width:40px;height:40px;overflow:hidden;background:rgba(0,0,0,0.4);border-radius:50%;text-align:center;color:#fff;line-height:40px}

.tabs{background-color:#e2f3ed;display:flex;flex-wrap:wrap}
.tabs .item{position:relative;color:#005629;display:flex;width:calc(100% / 8);text-align:center;align-items:center;justify-content:center;height:60px;padding-top:10px}
.tabs .item span{position:relative;z-index:1;font-weight:500}
.tabs .item:before{position:absolute;height:0;background-color:#fff;width:100%;bottom:0;content:"";left:0;border-top-left-radius:20px;border-top-right-radius:20px;transition:.3s}
.tabs .item:hover:before,
.tabs .item.on:before{height:calc(100% - 10px)}
.tabs-con{display:none;padding:20px}
.tabs-wrap .tabs-con:first-child{display:block}
.frm-half-wrap{display:flex;flex-wrap:wrap;justify-content:space-between;}
/*.frm-half-wrap .frm-item{width:calc(50% - 5px)}*/
.frm-half-wrap .frm-item{width:100%}
.layout-right{margin:20px 0;display:flex;justify-content:flex-end}
.layout-right > *{margin-left:5px}

.tbl-basic th{padding:10px 5px;font-weight:500;text-align:center;color:#53a078;border-bottom:1px solid #53a078;background-color:#edf6f3;border-right:1px solid #53a078}
.tbl-basic th:last-child{border-right:0}
.tbl-basic td{padding:10px 5px;border-bottom:1px solid #53a078;text-align:center;border-right:1px solid #53a078}
.tbl-basic td.none-data{border-bottom:0}

.template-wrap{display:flex;flex-wrap:wrap}
.template-wrap > *{width:33.333%}
.template-wrap .search-wrap{padding:20px}
.template-wrap .search-wrap .select-box{margin-top:10px}
.template-wrap .search-wrap .select-box .con{padding:0;height:calc(70vh - 220px);overflow-y:auto}
.template-wrap .search-wrap .input-btn-wrap{justify-content:space-between}
.template-wrap .search-wrap .input-btn-wrap .input-text{width:calc(50% - 2.5px)}
.template-wrap .search-wrap li{padding:10px;border-bottom:1px solid #e2f3ed}
.template-wrap .search-wrap .search-item{margin-bottom:5px}
.template-wrap .txt-wrap{padding:20px 20px 20px 0}
.template-wrap .txt-wrap .phone{width:330px;height:475px;background:url('../img/sub/bg-smobile.png') center/cover no-repeat;padding:50px 20px 40px 20px;margin:0 auto}
.template-wrap .txt-wrap .phone textarea{background-color:#fefff1;border:1px solid #e5e5e5;padding:10px;height:100%}
.template-wrap .txt-wrap .tit-wrap{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.template-wrap .txt-wrap p{font-size:1.563rem;color:#53a078;font-weight:500}
.template-wrap .group-wrap{position:relative;background-color:#f9f9f9;padding:20px}
.template-wrap .group-wrap .frm-item{display:flex;align-items:center;margin-bottom:10px}
.template-wrap .group-wrap .frm-item:last-child{margin-bottom:0}
.template-wrap .group-wrap .layout-right{margin-top:0;margin-bottom:50px}
.template-wrap .group-wrap .label{font-weight:500;width:100px}
.template-wrap .group-wrap .label-set{width:calc(100% - 100px)}
.template-wrap .layout-right > *{width:auto;padding:0 10px}

.tbl-item{text-align:center}
.tbl-item .tbl-item-head{border:1px solid #53a078;border-top-left-radius:5px;border-top-right-radius:5px;background-color:#edf6f3}
.tbl-item .tbl-item-con{border:1px solid #53a078;border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top:0}
.tbl-item ul{display:flex;justify-content:space-between;}
.tbl-item li{border-right:1px solid #53a078;flex-grow:1;padding:10px}
.tbl-item .item-ck{max-width:50px}
/*.tbl-item .item-name{width:10%}
.tbl-item .item-id{width:10%}
.tbl-item .item-phone{width:15%}
.tbl-item .item-category{width:20%}*/


@media (max-width:1700px){
	.select-box .tit.tit-block .btn-wrap{position:relative;top:auto;right:auto;transform:none;margin-top:5px;justify-content:flex-end}
	.person-wrap{flex-wrap:wrap}
	.person-wrap .group{width:100%;margin:5px 0}
	.person-wrap .btn-add:last-child{margin-right:0}
}

@media (max-width:1400px){
	.login-wrap .logo-wrap{width:45%}
	.login-wrap .info-wrap{width:55%;padding-left:0;;justify-content:center}

	.kakao-wrap .phone-wrap{width:280px}
	.kakao-wrap .select-wrap{width:calc(100% - 280px)}
	.kakao-wrap .phone-wrap .phone{height:395px}
	.kakao-wrap .phone-wrap .phone .input-text{height:calc(100% - 80px)}
	.kakao-wrap .ck-wrap .tit{width:70px}
	.kakao-wrap .info-wrap{width:calc(100% - 260px)}
	.kakao-wrap .group-wrap{width:300px}
	.select-box .frm-item .label{width:100px}
	.select-box .frm-item .label-set{width:calc(100% - 100px)}
	.select-box .tit{padding:15px}
	.select-box .con{padding:15px}

	.group-wrap .address-wrap{height:calc(100% - 238px)}

	.btn-base.btn-file,
	.btn-base.btn-down{padding:0 5px;font-size:13px}
	.btn-base.btn-file:before{margin-right:2px}
}

@media (max-width:1200px){
	.kakao-wrap{display:block}
	.kakao-wrap .info-wrap{width:100%}
	.select-box .tit{padding:10px}
	.select-box .tit .btn-wrap{right:10px}

	.kakao-wrap .group-wrap{width:100%;display:flex;flex-direction:row-reverse;padding-top:0}
	.group-wrap .address-wrap{width:calc(100% - 280px);margin-left:20px;height:auto}
	.group-wrap .notice-wrap{margin-top:0;width:260px}

	.template-wrap .txt-wrap .phone{width:280px;height:400px}
}

@media (max-width:1024px){
	.login-wrap .info-wrap{padding:0 20px}
	.login-wrap .info-wrap .tit{font-size:2rem}
	.login-wrap .info-wrap .stit{font-size:1rem;margin-bottom:30px}
	.login-wrap .info-wrap .input-text{height:40px}
	.login-wrap .info-wrap li{margin-bottom:5px}
	.login-wrap .info-wrap button{font-size:1rem;margin-top:15px;height:40px}

	.tabs .item{width:calc(100% / 4);height:50px}
	.frm-half-wrap .frm-item{width:100%}

	.template-wrap > *{width:100%}
	.template-wrap .txt-wrap{padding:0 20px 20px 20px}
	.template-wrap .txt-wrap .phone{width:240px;height:345px}
	.template-wrap .group-wrap{display:block}
	.template-wrap .group-wrap .layout-right{margin-top:0;margin-bottom:20px}
	.template-wrap .layout-right{position:relative;bottom:auto;right:auto}
}

@media (max-width:720px){
	.login-wrap{display:block;height:auto;min-height:100vh;background:url('../img/sub/bg-loginm.jpg') center/cover no-repeat;text-align:center}
	.login-wrap .logo-wrap{width:100%;padding:50px;background:none}
	.login-wrap .logo-wrap img{max-width:40%}
	.login-wrap .info-wrap{width:100%}
	.login-wrap .info-wrap .tit{font-size:1.6rem}
	.login-wrap .info-wrap .stit{font-size:.938rem;padding-left:0}
	.login-wrap .check-box input[type="checkbox"] + label:before{width:18px;height:18px}

	.kakao-wrap .info-wrap{padding:0;border:0}
	.kakao-wrap .info-wrap .inner{display:block}
	.kakao-wrap .select-wrap{width:100%}
	.kakao-wrap .phone-wrap .phone .btn-submit{height:40px;font-size:1rem}
	.kakao-wrap .select-wrap{margin:20px 0}
	.kakao-wrap .group-wrap{flex-direction:row;padding:0;margin:20px 0;flex-wrap:wrap}
	.group-wrap .address-wrap{width:100%;margin:0}
	.group-wrap .notice-wrap{width:100%;margin:20px 0}

	.tabs .item{width:calc(100% / 2);padding-top:0}
	.tabs .item:hover:before, .tabs .item.on:before{height:100%;border-radius:0}

	.scroll-sview .tbl-item{width:720px}
}

@media (max-width:360px){
	.select-box .frm-item{flex-wrap:wrap}
	.select-box .frm-item .label{width:100%;margin-bottom:5px}
	.select-box .frm-item .label-set{width:100%}
}