@charset "utf-8";





/*---------------------------------
            common
---------------------------------*/
* {
  box-sizing: border-box;
}
::selection {
  background:#863ED9;
  color:#fff;
}

/* header */
#header-box {
  position: relative;
  padding:0 20px;
  height:56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #EEEEEE;
}
#header-box a.prev_arrow {
  position: absolute;
  top:26%;
  left:20px;
  font-weight: bold;
}
#header-box h1 {
  font-weight: bold;
  font-size:16px;
}





/*---------------------------------
            button
---------------------------------*/

/* 노랑 */
.btn_yel{
  font-size:14px;
  background:#FEEA61;
  color:#000;
  padding:15px 25px;
}

.btn_yel_list {
  font-size:12px;
  background:#FEEA61;
  color:#000;
  padding:6px 20px;
  border-radius: 5px;
  font-weight: bold;
}
.btn_yel_list_nobg {
  font-size:12px;
  background:#fff;
  color:#000;
  padding:10px 20px;
  border-radius: 10px;
  font-weight: bold;
  border:1px solid #FEEA61;
}

.btn_blk_list {
  font-size:12px;
  background:#000;
  color:#fff;
  padding:10px 10px;
  border-radius: 10px;
  font-weight: bold;
}

.btn_ppl_list {
  font-size:12px;
  background:#863ED9;
  color:#fff;
  padding:10px 20px;
  border-radius: 10px;
  font-weight: bold;
}

.btn_gray_list {
  font-size:12px;
  background:#DBDBDB;
  color:#000;
  padding:10px 10px;
  border-radius: 10px;
  font-weight: bold;
}
.btn_gray_list_nobg {
  font-size:12px;
  background:#fff;
  color:#000;
  padding:10px 20px;
  border-radius: 5px;
  font-weight: bold;
  border:1px solid #EEEEEE;
  text-align: center;
}

/* 회색 */
.btn_gry {
  font-size:12px;
  background:#ECECEC;
  color:#000;
  padding:15px 25px;
}

.btn_gray_list_nobg {
  font-size:12px;
  background:#fff;
  color:#000;
  padding:10px 20px;
  border-radius: 5px;
  font-weight: bold;
  border:1px solid #EEEEEE;
}


/*---------------------------------
            title
---------------------------------*/
.title {
  font-weight: bold;
  margin-bottom: 1.4rem;
}


/*---------------------------------
            header
---------------------------------*/
/* floating nav */
nav {
  position: fixed;
  bottom:0;
  left:0;
  width:100%;
  background:#fff;
  z-index: 9;
}
nav ul {
  display: flex;
  align-items: center;
  text-align: center;
  border-top:1px solid #eee;
}
nav ul li {
  width:20%;
  font-size:10px;
  padding:10px 10px;
}
nav ul li.active a {
  color:#863ED9;
}
nav ul li a span.material-icons {
  display: block;
  font-size:2em;
  margin-bottom: 6px;
}










/*---------------------------------
            footer
---------------------------------*/
footer {
  background:#F5F5F5;
  padding: 40px 20px 100px;
}
footer img {
  width:50%;
}
footer p {
  font-size:14px;
  padding:20px 0;
}
footer small {
  font-size:12px;
}



/*---------------------------------
            form
---------------------------------*/
/* 기본 인풋 */
.ipt_style_app {
  font-size:14px;
  font-weight:300;
  background:#fff;
  border-radius:5px;
  padding:14px 10px;
  border:1px solid #d5d5d5;
}
.ipt_style_app:focus {
  outline:1px solid #684BCB;
}
.ipt_style_app::placeholder {
  color:#d5d5d5;
}


/* select */
select.slt_app {
  position:relative;
  padding:14px 30px 14px 10px;
  font-size:14px;
  -webkit-appearance:none;
  border-radius:6px;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  color:#eeeeee;
  border:1px solid #EEEEEE;
  background:url('../img/select_app.png') center right no-repeat;
}
select.slt_app:focus {
  outline:1px solid #684BCB;
  background:url('../img/select_app.png') center right no-repeat;
}


/* check box */
.checkbox {position: relative;}
.checkbox input + label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  padding-left:26px;
}
.checkbox input + label:before {
  content:'';
  width:22px;
  height:22px;
  position: absolute;
  top:0px;
  left:0;
  background:#F3F3F3;
  border-radius: 50%;
}
.checkbox input:checked + label:before {
  content:'done';
  font-family: 'Material Icons';
  background:#FEEA61;
  color:#000;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  top:0px;
  left:0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.checkbox input {display: none;}

/* check box -app */
.checkbox-note {position: relative;}
.checkbox-note input + label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  padding-left:26px;
}
.checkbox-note input + label:before {
  content:'';
  width:16px;
  height:16px;
  position: absolute;
  top:-2px;
  left:0;
  background:#fff;
  border-radius: 3px;
  border:1px solid #D9D9D9;
}
.checkbox-note input:checked + label:before {
  content:'done';
  font-family: 'Material Icons';
  color:#000;
  border-radius: 3px;
  width: 16px;
  height: 16px;
  top:-2px;
  left:0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.checkbox-note input {display: none;}



/* textarea */
.txtA_style_app {
  font-size:0.938em;
  font-weight:300;
  color:#000;
  border-radius:6px;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  padding:8px 10px;
  background:#fff;
  border:1px solid #eee;
  resize:none;
}
.txtA_style_app::placeholder {
  color:#C7C7C7;
  line-height: 1.4rem;
}
.txtA_style_app:focus {outline:1px solid #684BCB;}


/* file */
.file-custom {
  position:relative;
  margin-right:30px;
  display: flex;
  align-items: center;
  width:50%;
}
.file-custom input[type="file"] {
  display: none;
}
.file-custom label {
  cursor: pointer;
  border-radius: 6px;
  background:#fff;
  color:#191919;
  position: relative;
  font-size:16px;
  vertical-align:middle;
  text-align: center;
  padding:5px 10px;
  width:100%;
}


/* 검색창 */
.search-form {
  position: relative;
  border:1px solid #eee;
  width:100%;
  border-radius:5px;
  background:#fff;
}
.ipt_style_search {
  font-size:14px;
  font-weight:300;
  padding:15px 20px;
  width:90%;
  border-radius:5px;
}

.ipt_style_textarea {
  font-size:14px;
  font-weight:300;
  padding:15px 20px;
  width:100%;
  border-radius:5px;
}

.search-form button {
  content:'\e8b6';
  font-family: 'Material Icons';
  color:#000;
  width:18px;
  height:18px;
  position: absolute;
  right:14px;
  top:12px;
  font-size:22px;
}
.ipt_style_search:focus {outline:1px solid #684BCB;}
.ipt_style_search::placeholder {color:#eee;}




/*---------------------------------
            tab
---------------------------------*/
.tab-wrapper .tab-nav {
  display: flex;
  width:100%;
  border-bottom:1px solid #DBDBDB;
  padding:0 20px;
}
.tab-wrapper .tab-nav li {
  width:50%;
  text-align: center;
}
.tab-wrapper .tab-nav li a {
  padding:8px;
  color:#DBDBDB;
  font-weight: bold;
  font-size:14px;
}
.tab-wrapper .tab-nav li a.active {
  border-bottom: 1px solid #863ED9;
  color:#863ED9;
}

.tab-content {
  padding:20px;
  line-height: 1.8rem;
}
.tab-content .tab-cont {
  display:none;
}


/*---------------------------------
            modal
---------------------------------*/
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  background-color: rgba(254, 234, 97, 0.8);
  z-index: 99;
}
.modal.show {
  display: block;
}
.modal .modal-box {
  width:100%;
  position: absolute;
  bottom:0;
  left:0;
  padding: 30px 20px;
  text-align: left;
  background-color: rgb(255, 255, 255);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: 0 3px 18px 0 rgb(34 36 38 / 14%);
  z-index: 9;
}
.modal .modal-box h2 {
  text-align: center;
  font-size:20px;
  font-weight: bold;
}
.modal .modal-box .scroll-box {
  height:44vh;
  overflow-y: scroll;
  margin:25px 0 35px;
  font-size:14px;
}
.modal .scroll-box ol {
  list-style-type: decimal;
  padding-left:17px;
  font-size:14px;
}
.modal .scroll-box ol li {
  margin-bottom: 10px;
}
.modal .modal-box button {
  position: absolute;
  bottom:0;
  left:0;
  width:100%;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
}



/*---------------------------------
            accordion
---------------------------------*/

.accordion .a-container .a-btn {
  display: block;
  text-align: left;
  font-size: 14px;
  padding: 1rem;
  background:#fff;
  color: #191919;
  transition: background-color 350ms ease-in-out;
  width:100%;
  position: relative;
  border-bottom:1px solid #D9D9D9;
}
.accordion .a-container .a-btn i {
  display: block;
  font-size:12px;
  color:#D9D9D9;
  line-height: normal;
}
.accordion .a-container .a-btn::before {
  content:'expand_less';
  font-family: 'Material Icons';
  position: absolute;
  right:20px;
  transform: rotate(180deg);
  font-size:30px;
  top:25%;
  transition: all .5s ease;
}
.accordion .a-container.active .a-btn::before {
  transform: rotate(0deg);
}

.accordion .a-container .a-panel {
  width: 100%;
  color: #262626;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  opacity: 0;
  height: auto;
  max-height: 0;
  overflow: hidden;
  padding: 0px 10px;
  font-size:12px;
  line-height: 26px;
}
.accordion .a-container.active .a-panel {
  padding: 1rem;
  opacity: 1;
  height: auto;
  max-height: 500px;
  color:#191919;
  background:#F9F9F9;
}



/*---------------------------------
            paging
---------------------------------*/
.paging {
  display: flex;
  width:100%;
  justify-content: center;
  align-items: center;
}
.paging li {
  width:24px;
  height:24px;
  text-align: center;
  line-height: 22px;
  font-size:12px;
}
.paging li a {
  display: block;
  border-radius: 100%;
}
.paging li .active {background:#FEEA61;}
.paging li a:hover {background:#eee;}


/*---------------------------------
            responsive
---------------------------------*/
@media screen and (max-width:1440px) {
  
}

@media screen and (max-width:1024px) {

}

@media screen and (max-width:768px) {
  
}