@charset "utf-8";

/**************************************
** 공통
***************************************/
#wrap {overflow: hidden;}
.textBox.tWithe {color:#fff;}
.textBox {color: #181818;padding-bottom: 90px;position: relative;}
.textBox .titB{font-size: 2em;font-weight: 600;padding-bottom: 5px;}
.textBox .titM{}
.textBox .titS{font-size: 14px;color: #a2a2a2;display: inline-block;}

.subtextBox {color: #181818;padding-bottom: 60px;position: relative;}
.subtextBox .titB{font-size: 2.8em;font-weight: 500;padding-bottom: 5px;display: inline-block;}
.subtextBox .titM{}
.subtextBox .titS{font-size: 14px;color: #24a7df;display: block;}

#contents{overflow:hidden;}

/*scrollnavi 휠 메뉴*/
#scrollnavi{position:fixed;top:50%;right: 20px;margin-top: -50px;z-index:999;}
#scrollnavi a {display:block;width: 10px;height: 10px;background-color: #dcdcdc;border-radius: 10px;margin: 0 auto 15px;/*웹폰트*/overflow:hidden;box-sizing:border-box;/*▽*/border: 3px solid transparent;}
#scrollnavi li.on a {opacity:1;background: transparent;border: 3px solid #009bfa;width: 14px;height: 14px;}
#scrollnavi li:last-child a {margin: 0 auto 0;}


/* 헤더 */
.mainHeader {position: absolute;top: 0;width: 100%;z-index: 99;margin: 0 auto;transition: all 0.25s;margin-top: 10px;}
.mainHeader>.inner {margin: 0 auto;max-width: 1400px;display: flex;justify-content: space-between;align-items: center;position: relative;padding: 0 20px;}
.mainHeader.tblack {/* position: fixed; *//* top: 0; */}
.mainHeader.tblack .menu>li>p {color: #181818;}
.mainHeader.tblack .logoW {background: url('../v2_images/logo.png') no-repeat;}
.inner>a {display: block;cursor: pointer;}
.logoW {background: url('../v2_images/logoW.png') no-repeat;width: 155px;height: 37px;overflow: hidden;}

.mainHeader.sub {/* position: fixed; *//* top: 0; */}
#headerWrap.nav-down .mainHeader {background: #fff;position: fixed;transition: all 0.25s;margin-top: 0;}
#headerWrap.nav-down .mainHeader .logoW {background: url(../v2_images/logo.png) no-repeat;}
#headerWrap.nav-down .mainHeader .menu>li>p,
#headerWrap.nav-down .menu>li>.oneMenu>a {color: #181818;}
#headerWrap.nav-up .mainHeader{display: none;}
#headerWrap.nav-down .mainHeader.open nav .menu>li>p,
#headerWrap.nav-down .mainHeader.open nav .menu>li>.oneMenu a{color:  #fff;}
.mainHeader.open .mobileMenu .menuBtn.active>span {color:  #fff;}

nav {display: flex;}
nav .menu{display: flex;justify-content: center;}
nav .menu>li{display: flex;position: relative;margin: 0 30px;color: #181818;}
nav .menu>li>a {text-align: center;display: block;padding: 20px;color: #fff;font-size: 18px;font-weight: 500;}
nav .menu>li>p {text-align: center;display: block;padding: 20px;color: #fff;font-size: 18px;font-weight: 500;cursor: pointer;}
nav .menu>li>.oneMenu>a {text-align: center;display: block;padding: 20px;color: #fff;font-size: 18px;font-weight: 500;cursor: pointer;}
nav .menu>li>p{background: url('../v2_images/icon-arrow.png') no-repeat center right;background-size: 14px;}
nav .subMenu {position: absolute;left: 0;top: 65px;width: 100%;border-radius: 5px;overflow: hidden;padding: 15px 0;background: #009bfa;}
nav .subMenu>li{}
nav .subMenu>li>a{text-align: center;padding: 8px 0;margin: 0;color: #f5fcff;display: block;font-size: 16px;}
nav .subMenu>li>a:hover{color: #ffffff;text-decoration: underline;}
.mainHeader .mobileMenu {display: none;}
#mask {display: none;width: 100%;height: 100vh;background: #00000073;position: fixed;top: 0;z-index: 999;overflow: hidden;}


/*메뉴 엑스표시 디자인*/
.mobileMenu {position: fixed;right: 20px;z-index: 9999;}

.menuBtn {position: relative;width: 30px;height: 22px;z-index: 9999;border: 0;outline: none;background: transparent;}
.menuBtn span {display: inline-block;transition: all .25s;box-sizing: border-box;}
.menuBtn span {position: absolute;left: 0;width: 100%;height: 3px;background-color: #fff;border-radius: 4px;}
.menuBtn span:nth-of-type(1) {top: 0;}
.menuBtn span:nth-of-type(2) {top: 9px;}
.menuBtn span:nth-of-type(3) {bottom: 0;}
/* type-01 */
.menuBtn.active span:nth-of-type(1) {-webkit-transform: translateY(9px) rotate(-45deg); transform: translateY(9px) rotate(-45deg);background-color: #ffffff;}
.menuBtn.active span:nth-of-type(2) {background-color: #000;opacity: 0;}
.menuBtn.active span:nth-of-type(3) {-webkit-transform: translateY(-9px) rotate(45deg);transform: translateY(-9px) rotate(45deg);background-color: #ffffff;}


/*wrap 공통시작*/
section {width:100%;height: 100%;position: relative;padding: 120px 0;}
section article {display: flex;flex-direction: column;justify-content: center;height: 100%;max-width: 1280px;margin: 0 auto;width: 96%;padding: 0 2%;}
#subPage article {max-width: 1280px;margin: 0 auto;width: 96%;padding: 80px 2%;}

section#main {padding: 0;overflow: hidden;}
section#customer {padding: 0;}
.infoBox.tp2 {margin-bottom: 40px;overflow: hidden;}


/*slick 공통시작*/
.slick .slick-prev {border-radius: 50px 0 0 50px;background: url('../v2_images/left_icon.png') no-repeat center;background-size: 25px;right: 79px;}
.slick .slick-next {border-radius: 0 50px 50px 0;background: url('../v2_images/right_icon.png') no-repeat center;background-size: 25px;right: 0;margin-left: -1px;}
.slick .slick-arrow {border: 1px solid #eaeaea;width: 80px;height: 40px;position: absolute;top: -65px;text-indent: -9999px;outline: 0;opacity: 0.6;}
.slick .slick-arrow:hover {opacity: 1;}

/*slick-slider dots*/
.slick .slick-slide.img {display: block;width: 100%;height: 100%;outline: 0;overflow: hidden;}
.slick .slick-dots {display: flex;height: 40px;justify-content: center;align-items: flex-end;/* position: relative; */}
.slick .slick-dots li.slick-active button{background: #e7277c;}
.slick .slick-dots li {margin: 0 3px;outline: 0;}
.slick .slick-dots li button {border: 0;width: 10px;height: 10px;border-radius: 7px;padding: 0;margin: 0;text-indent: -9999px;outline: 0;}


/* 조회 결과 없음 박스 */
.NoBox{background:#fff url('../../common/img/icon-error.png') no-repeat 50% 70px; background-size:80px; padding:100px 0px;}
.NoBox .txt{margin-top:45px;}
.calBox{min-height:62px;padding:10px; background-color:#e9f1f6; box-sizing: border-box;}

/**************************************
** 모달팝업
***************************************/
/* 공통 */
.mpopBox{overflow:hidden; background-color:#fff; width:90%; display:none;}
.mpopBox .popHeader{height:50px; line-height:50px; font-size:15px; font-weight:600; color:#000; background-color:#e9f1f6; padding:0px 20px; box-sizing:border-box; border-bottom:1px solid #e1e1e1;}
.mpopBox .popBody{overflow:hidden; padding:10px;}
.mpopBox .popFooter{border-top:1px solid #e1e1e1;}
.mpopBox .popFooter .btnBox{overflow:hidden;}

/* 이미지 형태 공통 */
.mpopBox.img .popBody{padding:20px; text-align:center;}
.mpopBox.img .img{padding-top:15px;}
.mpopBox.img .img img{width:60px;}
.mpopBox.img .txt1{font-size:18px; color:#000; font-weight:500; margin-top:15px;}
.mpopBox.img .txt2{font-size:14px; color:#535454; font-weight:400; margin-top:5px;}

/* 이미지 삭제 */
.mpopBox.del .popBody{padding:20px; text-align:center;}
.mpopBox.del .img{padding-top:15px;}
.mpopBox.del .img img{width:40px;}
.mpopBox.del .txt1{font-size:18px; color:#000; font-weight:500; margin-top:15px;}
.mpopBox.del .txt2{font-size:14px; color:#535454; font-weight:400; margin-top:5px;}

/* 전송 */
.mpopBox.send .popBody{padding:20px; text-align:center;}
.mpopBox.send .img{padding-top:15px;}
.mpopBox.send .img img{width:60px;}
.mpopBox.send .txt1{font-size:18px; color:#000; font-weight:500; margin-top:15px;}
.mpopBox.send .txt2{font-size:14px; color:#535454; font-weight:400; margin-top:5px;}

/* 배경 검정색 형태 */
.mpopBox.black{overflow:hidden;}
.mpopBox.black .popBody{padding:20px; text-align:center; background-color:#000; opacity:0.6;}
.mpopBox.black .txt1{opacity:1; color:#fff;}
/******* // 모달팝업 // *******/


/**************************************
** button & badge
***************************************/
/* 공통 */
button:hover{cursor:pointer; outline:none;}
a.btn,.btn{display:inline-block;zoom:1;height:35px;font-size: 15px;vertical-align:middle;box-sizing:border-box;border:0px;position:relative;outline: 0;background: #ffffff00;}


/* 크기 */
.btn.s0{height:25px;}  .btn.s{height:30px;} .btn.s2{height:35px;} .btn.m{height:50px;}  .btn.l{height:60px;}

/* 칼라 */
.btn.black{background-color: #292929;color:#fff;}
.btn.gray{background-color:#b5b5b5; color:#fff;}
.btn.gray2{background-color:#76787b; color:#fff;}
.btn.gray3{background-color:#54585b; color:#fff;}
.btn.red{background-color:#da291c; color:#fff;}
.btn.blue{background-color:#009bfa; color:#fff;}
.btn.blue2{background-color:#0383d2; color:#fff;}
.btn.blue3{background-color:#0875b8; color:#fff;}
.btn.blue4{background-color:#07649d; color:#fff;}

/* 라인 */
.btn.bd{background-color:#fff; border:1px solid #757676; color:#535454;}
.btn.bdGray{background-color:#fff; border:1px solid #e1e1e1; color:#535454;}
.btn.bdRed{background-color:#fff; border:1px solid #e15449; color:#da291c;}

/* 이미지형 */
.btn.mobile{background:#54585a url('../../common/img/icon-phone.png') no-repeat 50%; background-size:11px; text-indent:-9999px; width:25px; height:25px;  border-radius:60px; padding:0px;}
/****  // button 디자인 //  ****/


/**************************************
** tobBox
***************************************/
.tabBox{overflow:hidden;}
.tabBox ul{border-bottom: 1px solid #eaeaea;}
.tabBox li{float:left;box-sizing:border-box;}
.tabBox li .btn{background-color:#fff;width:100%;height: 50px;line-height: 50px;letter-spacing:-1px;font-size: 18px;font-weight: 500;text-align: center;color: #181818;padding: 0 10px;}
.tabBox li .btn.barcode{background:url('../../common/img/icon-barcode.png') no-repeat 50% 50%; background-size:30px; text-indent:-9999px;}

.tabBox.li4 li{width:27%;}
.tabBox.li4 li:last-child{width:19%;}
.tabBox.li3 li{width:33.333%;}
.tabBox.li2 li{width:50%;}

.tabBox li.on .btn{border-bottom: 2px solid #009bfa;color: #009bfa;}
.tabBox li.on span{background-color:#da291c;}

.tabView {margin-top: 10px;}

/**************************************
** 폼 스타일
***************************************/
/* 라디오 */
.radioBox {position: relative;}
.radioBox input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; }
.radioBox input[type="radio"] + label { display: inline-block; position: relative; padding-left: 27px; cursor: pointer; -webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; line-height:23px; font-size:14px;}
.radioBox label{background:url('../../common/img/radio-off.png') no-repeat 5px 4px; background-size:17px;}
.radioBox input[type="radio"]:checked +  label{background:url('../../common/img/radio-on.png') no-repeat 5px 4px; background-size:17px;}

.radioBox.txt input[type="radio"] + label{border:1px solid #e1e1e1; background-color:#f7f7f7; padding:5px 15px; background-image:none; font-size:13px;}
.radioBox.txt input[type="radio"]:checked +  label{border:1px solid #e56960; background-color:#fff;}

/* 체크박스 */
.chkBox {position: relative;}
.chkBox input[type="checkbox"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; }
.chkBox input[type="checkbox"] + label { display: inline-block; position: relative; padding-left: 25px; cursor: pointer; -webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; line-height:25px; letter-spacing:-1px; vertical-align:middle;}
.chkBox label{background:url('../../common/img/chk-off.png') no-repeat 0px 5px; background-size:20px;}
.chkBox input[type="checkbox"]:checked +  label{background:url('../../common/img/chk-on.png') no-repeat 0px 5px; background-size:20px;}

.chkBox.m input[type="checkbox"] + label {background-size:15px; font-size:13px; background-position:0px 3px; padding-left:20px; line-height:20px; vertical-align:middle;}
.chkBox.m input[type="checkbox"]:checked +  label{background-size:15px; background-position:0px 3px;}

.chkBox.login input[type="checkbox"] + label {font-size:12px; padding-top:3px; padding-bottom:3px;}

/* 스위치박스 */
.switchBox {position: relative; overflow:hidden;}
.switchBox input[type="checkbox"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; }
.switchBox input[type="checkbox"] + label { display: inline-block; position: relative; padding-left: 40px; cursor: pointer; height:25px;}
.switchBox label{background:url('../../common/img/switch-off.png') no-repeat 0px 0px; background-size:38px;}
.switchBox input[type="checkbox"]:checked +  label{background:url('../../common/img/switch-on2.png') no-repeat 0px 0px; background-size:40px;}

/* 셀렉트 */
.selBox{display:inline-block;}
.selBox select{background:#fff url('../v2_images/icon-arrow-down-v1.png') no-repeat calc(100% - 6px) 53%;background-size:9px;padding:7px 20px 7px 10px;vertical-align: middle;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size: 15px;border: 1px solid #eaeaea;color: #181818;box-sizing: border-box;outline: none;}
.selBox.v1 select{background:#fff url('../v2_images/icon-arrow-down-v1.png') no-repeat calc(100% - 6px) 53%; background-size:9px; padding:4px 20px 4px 10px;  vertical-align: middle;color:#535454;-moz-appearance:none;-webkit-appearance:none;appearance:none;​ box-sizing:border-box; font-size:13px; border:1px solid #d8d8d8;}
.selBox select::-ms-expand{display:none}
.selBox.w100,select{width:100%;}
.selBoxFixed { max-width:100px; }

.inNum{overflow:hidden; display:inline-block; font-size:0; vertical-align:middle;}
.inNum input[type="number"]{width:40px; border-left:none; border-right:none; padding:0px 5px;}

/* 인풋 박스 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {-webkit-appearance: none;  margin: 0;}
input[type='text'],
input[type='number'],
input[type='email'],
input[type='password']{border: solid 1px #eaeaea;padding:5px 10px;background:#fff;height: 40px;vertical-align:middle;-webkit-appearance:none;outline:none;box-sizing:border-box;width:100%;font-size: 15px;border-radius: 5px;}
textarea:focus,
select:focus,
input:focus{border:solid 1px #268bcd;}

textarea{border:solid 1px #d6d6d6; padding:10px; background:#fff;  -webkit-appearance:none; outline:none; box-sizing:border-box; width:100%; font-size:15px;}
textarea:focus{border:1px solid #268bcd;}

input:disabled{background-color: #f5f5f5 !important;}
input.disabled{background-color:#f5f5f5 !important; }
select:disabled{background-color:#f5f5f5 !important; }
select.disabled{background-color:#f5f5f5 !important; }

::placeholder {color:#9a9c9c;font-size: 15px;}

/* 달력 */
input[type='text'].inCal{background:#fff url('../v2_images/icon-calendar.png') no-repeat 10px 10px; background-size:16px; padding-left:35px; box-sizing:border-box;}
input.inbdb{border:none; border-bottom:1px solid #e1e1e1; height:20px; padding:0px 10px 3px; margin-top:7px; line-height:20px; background-color:initial;}
input.inbdb2{border:none; border-bottom:1px solid #e1e1e1; height:35px; line-height:35px; padding:0px 3px 3px; background-color:initial;}

/* IOS */
Input, textarea, select{
-webkit-border-radius:0; /* 모서리 스타일 제거 */
-webkit-appearance:none; /* 인풋내 그림자 제거 */
}

.inSearch{position:relative;}
.inSearch input{padding-right:40px; box-sizing:border-box;}
.inSearch .btn{position:absolute; right:0px; top:0px;}
/****  // 폼스타일 //  ****/


/**************************************
**  달력 스타일
***************************************/
#datepicker {width: 100%;height: 100%;font-size: 16px;text-align: center;}

 /* calendar table */
.ui-datepicker-header{position:relative; height:55px;}
.ui-datepicker-title {text-align: center;font-size:18px; font-weight:600; position:absolute; width:100%; top:-5px;}
.ui-datepicker {display: none;background-color: #fff;border-radius: 0;margin-top: 3px;padding: 20px;box-sizing:border-box;max-width: 460px;border: 1px solid #eaeaea;}
.ui-datepicker-prev span,.ui-datepicker-next span{display:none;}
.ui-datepicker-prev,.ui-datepicker-next{display:inline-block;  width:20px; height:20px; position:absolute; z-index:999;}
.ui-datepicker-prev{background:url('../v2_images/icon-arrow-left.png') no-repeat; background-size:10px; left:0px;}
.ui-datepicker-next {background:url('../v2_images/icon-arrow-right.png') no-repeat;background-size:10px; right:0px;}
.ui-state-disabled{color:#cccfcf;}
.ui-datepicker-calendar {width: 100%;}
.ui-datepicker-calendar > thead > tr > th{padding: 5px;font-size: 20px;font-weight: 400;}
.ui-datepicker-calendar > thead > tr > th:nth-of-type(1){color:#da291c;}
.ui-datepicker-calendar > tbody > tr > td {border-radius: 100%;width: 44px;height: 44px;line-height: 44px;cursor: pointer;padding: 5px;font-weight: 100;text-align: center;}
.ui-datepicker-calendar > tbody > tr > td > a{color: #000;font-size: 18px;font-weight: 400;text-decoration: none;}
/*.ui-datepicker-calendar > tbody > tr > td > a.ui-state-active{background-color:#da291c; display:inline-block; width:45px; height:45px; border-radius:100px; color:#fff;}*/
.ui-datepicker-calendar > tbody td:first-child a{color: #da291c;}
.ui-datepicker-calendar > tbody > tr > .ui-state-disabled:hover {cursor: auto;background-color: #fff;}
.ui-datepicker-current-day > .ui-state-active{color: #fff;font-weight: 500;background: #009bfa;width: 36px;height: 36px;line-height: 36px;display: inline-block;border-radius: 50%;}

.calArea.tp2 .ui-state-active{background-color:#da291c; display:inline-block; width:30px; height:30px; border-radius:60px; color:#fff; line-height:30px;}
/******* // 달력 스타일 // *******/


/**************************************
** tableBox
***************************************/
.tableBox table{width:100%;border-top: 2px solid #181818;}
.tableBox thead th{height:50px;line-height:50px;text-align:center;font-weight:500;font-size: 15px;background: #f5f5f5;border-right: 1px solid #eaeaea;}
.tableBox thead th:last-child{border-right: 0;}
.tableBox tbody th{height:50px;line-height:50px;font-weight:500;font-size: 15px;color:#535454;padding-left:10px;border-bottom:1px solid #f2f2f2;border-top:1px solid #f2f2f2;background: #f5f5f5;border-right: 1px solid #eaeaea;}
.tableBox tbody td{height: 40px;text-align:center;font-weight:500;font-size: 15px;color:#535454;border-bottom: 1px solid #eaeaea;border-top: 1px solid #eaeaea;vertical-align: middle;border-right: 1px solid #eaeaea;padding: 5px;}
.tableBox tbody td:last-child{border-right: 0;}
/******* // tableBox // *******/

.tableBoxSimple tbody th, .tableBoxSimple tbody td { line-height:1.2; vertical-align: middle;}
.tableBoxSimple tbody tr:nth-child(2n-1) th, .tableBoxSimple tbody tr:nth-child(2n-1) td{background-color:#fff;}
.tableBoxSimple tbody tr.on td {background-color:#f7f7f7;}