@charset "UTF-8";
/*-------------------------------------------------
Author : ksi
Create date : 2019-08-08
-------------------------------------------------*/

body {background:#f2f7fc;}
#main {position: relative; background:#f2f7fc;}
#contents {padding:40px 0 50px;}


/* snb */
#snb {margin-bottom: 22px;}
#snb::after {content:''; display:block; clear:both;}
#snb .menu {float:left; margin-right:8px; padding-top:4px;}
#snb .menu::after {content:''; display:block; clear:both;}
#snb .menu > li {float:left; padding-right:45px; position: relative;}
#snb .menu > li::before {content:'\e93f'; display:block; font-family: 'xeicon'; font-size:19px; color:#b1b1b1; position:absolute; top:-1px;; right:13px;}
#snb .menu > li:last-child {padding-right: 0;}
#snb .menu > li:last-child::before {display:none;}
#snb .menu > li > a {display:block; font-size:15px;}
#snb .menu > li > a:hover {text-decoration:underline;}
#snb .manual {float:left; display:block; font-size:13px; text-align:center; padding:5px 13px; background-color:#5d4ff1; border-radius:30px; color:#fff;}


/* tips */
.tips-wrap {background:#1f2a3c; padding:25px 28px; color:#fff; margin:30px 0 40px;}
.tips-wrap .txt {font-size:15px;}
.tips-wrap .txt em {display:inilne-block; font-size:18px; font-weight:500; color:#faaa1e; vertical-align: top; padding-right: 13px;}


/* 검색영역 */
.search-area {margin:20px 0;}
.search-box {width:260px; position:relative; display:inline-block;}
.search-box input {padding-right:80px;}
.search-box .btn {position:absolute; top:0; right:0; width:64px; color:#fff; background:#4a6ee0; font-size:15px; text-align:center;}

/* title */
.title1 {font-size:20px; margin:30px 0 17px;}

/* step-list */
.step-wrap {text-align:center; margin:40px 0;}
.step-wrap .step-list {display:inline-block;}
.step-wrap .step-list::after {content:''; display:block; clear:both;}
.step-wrap .step-list > li {float:left; padding-right:50px; position:relative;}
.step-wrap .step-list > li::before {content:''; width:11px; height:21px; background:url('../images/board/i_arr.png') 0 0 no-repeat; position:absolute; top:50%; right:22px; transform:translateY(-50%);}
.step-wrap .step-list > li:last-child {padding-right:0;}
.step-wrap .step-list > li:last-child::before {display:none;}
.step-wrap .step-list > li .box {height:145px; width:145px; }
.step-wrap .step-list > li .box span {display:inline-block; padding-top:90px; background:url('../images/board/icon_01.png') center 26px no-repeat;}
.step-wrap .step-list > li:nth-child(2) .box span {background-image:url('../images/board/icon_02.png');}
.step-wrap .step-list > li:nth-child(3) .box span {background-image:url('../images/board/icon_03.png');}
.step-wrap .step-list > li:nth-child(4) .box span {background-image:url('../images/board/icon_04.png');}
.step-wrap .step-list > li:nth-child(5) .box span {background-image:url('../images/board/icon_05.png');}
.step-wrap .step-list > li:nth-child(6) .box span {background-image:url('../images/board/icon_06.png');}
.step-wrap .step-list > li:nth-child(7) .box span {background-image:url('../images/board/icon_07.png');}
.step-wrap .step-list > li:nth-child(8) .box span {background-image:url('../images/board/icon_08.png');}
.step-wrap .step-list > li.active {}
.step-wrap .step-list > li.active .box {border-radius:50%; background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #9b35e0), color-stop(0.5, #5f4cf0), color-stop(1, #5b89fd)); background: linear-gradient(135deg,  #9b35e0 0%, #5f4cf0 50%, #5b89fd 100%);}
.step-wrap .step-list > li.active .box span {color:#fff;}
.step-wrap .step-list > li.active:nth-child(1) .box span {background-image:url('../images/board/icon_01_w.png');}
.step-wrap .step-list > li.active:nth-child(2) .box span {background-image:url('../images/board/icon_02_w.png');}
.step-wrap .step-list > li.active:nth-child(3) .box span {background-image:url('../images/board/icon_03_w.png');}
.step-wrap .step-list > li.active:nth-child(4) .box span {background-image:url('../images/board/icon_04_w.png');}
.step-wrap .step-list > li.active:nth-child(5) .box span {background-image:url('../images/board/icon_05_w.png');}
.step-wrap .step-list > li.active:nth-child(6) .box span {background-image:url('../images/board/icon_06_w.png');}
.step-wrap .step-list > li.active:nth-child(7) .box span {background-image:url('../images/board/icon_07_w.png');}
.step-wrap .step-list > li.active:nth-child(8) .box span {background-image:url('../images/board/icon_08_w.png');}


/* input */
.control {position: relative; display: inline-block; margin-right: 4px;}
.control input[type="radio"], .control input[type="checkbox"] {opacity: 0; position: absolute; top: 0; left: 0; z-index: 0;}
.control label {display: block; width:18px; height:18px; cursor: pointer; text-align:center;}
.control label::before, .control label::after {content: ''; position: absolute; top: 0; left: 0;}
.control label::before {width: 18px; height: 18px; background: #fff; border: 1px solid #ddd; -webkit-transition: all .3s ease; transition: all .3s ease;}
.control input[type="radio"]:checked + label::after, .control input[type="checkbox"]:checked + label::after {content:'\e929'; font-family: 'xeicon'; width:100%; height:100%; top: 0; left: 0; color:#fff; background: #4a6ee0; z-index: 1; line-height:1;}
.control input[type="radio"]:focus ~ label::before, .control input[type="checkbox"]:focus ~ label::before {border-color: #3855b2; background:transparent; z-index: 2;}


/* 버튼 */
.btns {text-align:center; margin:20px 0;}
.btn.xs {font-size:14px; height:28px; padding:5px 8px;}
.btn.md {height:52px; font-weight:500; padding:16px 10px;}
.btn.black {background:#333; color:#fff;}
.btn.red {background:red; color:#fff;}
.btn.pink {background:#FF00BF; color:#fff;}
.btn.blue {background:#5CD1E5; color:#fff;}
.btn.green {background:#04B431; color:#fff;}

/* white-box */
.white-box {border: 1px solid #ebedec; background-color:#fff; padding: 38px; margin: 17px 0;}
.white-box .title1:first-of-type {margin-top: 0;}
.white-box .top {margin-bottom: 20px;}
.white-box .top::after {content:''; display:block; clear:both;}
.white-box .top .title1 {margin:0; }
.white-box .top > * {vertical-align: middle;}
.white-box .top .btn {float:right;}
.white-box .btns {margin-bottom: 0;}

.row-eq-height {display: -webkit-box; display: -webkit-flex; display: flex;}
.row-eq-height .white-box {height:100%;}


/* 테이블 */
.table-wrap {width: 100%; margin: 15px 0; text-align:center; overflow-x:auto;}
.table-wrap table {position: relative; min-width: 100%;}
.table-wrap table.lg {min-width:4000px;}
.table-wrap table::before {content: ''; width: 100%; height: 2px; background: #555; position: absolute; top: 0; left: 0;}
.table-wrap table th {font-size: 16px; color: #000; font-weight:500;}
.table-wrap table th, .table-wrap table td {border-bottom: 1px solid #ddd; word-break: keep-all; padding: 16px  20px;}
.table-wrap table thead th {border-color:#aaa;}
.table-wrap table tr:first-child th, .table-wrap table tr:first-child td {border-top: 0;}
.table-wrap table th:first-child, .table-wrap table td:first-child {border-left: 0;}
.table-wrap table th:last-child, .table-wrap table td:last-child {border-right: 0;}
.table-wrap table .list li {text-align: left;}

.table-wrap2 {width: 100%; margin: 15px 0; text-align:left;}
.table-wrap2 table {position: relative; width: 100%;}
.table-wrap2 table th {font-size: 15px; color: #555; font-weight:300; background-color:#f4f4f4;}
.table-wrap2 table thead th {background-color:#e9ebed; color:#222; font-weight:600; border:0; font-size:16px;}
.table-wrap2 table th, .table-wrap2 table td {border-bottom: 1px solid #e7e7e7; word-break: keep-all; padding: 16px  20px;}
.table-wrap2 table tr:first-child th, .table-wrap2 table tr:first-child td {border-top: 0;}
.table-wrap2 table th:first-child, .table-wrap2 table td:first-child {border-left: 0;}
.table-wrap2 table th:last-child, .table-wrap2 table td:last-child {border-right: 0;}
.table-wrap2 table .list li {text-align: left;}

table tr.total_price {background-color:#F8E0E6; }


/* mark */
[class^="mark"] {display:inline-block; font-size:15px; text-align:center; border-radius:5px;}
.mark1 {background:#eee; padding:5px;}


/* 모달팝업 */
.popup-wrap {position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.6); z-index: 6; overflow:scroll;}
.popup-wrap .scroll-area {width:100%;}
.popup-wrap .popup {position:absolute; top:10%; left:50%; transform:translateX(-50%); background:#fff; width:806px; padding:50px;}
.popup-wrap .popup.md {width:1000px;}
.popup-wrap .popup.lg {width:1500px;}
.popup-wrap .popup .inner {min-height:358px;}
.popup-wrap .popup .title {display:block; font-size:40px; padding-bottom:24px; position:relative; text-align:center; margin-bottom: 26px;}
/*.popup-wrap .popup .title::before {content:''; width:66px; height:1px; background:#000; position:absolute; bottom:0; left:50%; transform:translateX(-50%);}*/
.popup-wrap .popup .list {margin:25px 0 30px;}
.popup-wrap .popup .list > li {margin-bottdom: 20px; font-size:15px;}
.popup-wrap .popup .list > li:last-child {margin-bottom: 0;}

/* pagination */
#paging_area {margin:30px 0;}
.pagination {text-align:center;}
.pagination::after {content:''; display:block; clear:both;}
.pagination > li {display:inline-block; margin-right:5px;}
.pagination > li:last-child {margin-right:0;}
.pagination > li > a {display:block; width:40px; height:40px; border-radius:50%; border:1px solid #ddd; padding:7px;}
.pagination > li > a.active {background:red; color:#fff;}

/* 검색폼 */
.input-area {margin:15px 0; text-align:right;}
.input-area .btn.search {background:#5d4ff1; color:#fff; width:50px;}