@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

* { 
word-break: keep-all; font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Lexend, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}
 
 

* {padding:0; margin:0; }
textarea {font-size:1em; padding:10px; height:200px}
h3   {font-size:1.3em} 
h3 span {font-size:.75em; display:inline-block;  font-weight:400}
a {color:#222; text-decoration:none}
input {font-size:.95em}
select {font-size:.95em; height:28px;}

#top {width:100%; box-sizing:border-box;}
.util {display:flex; justify-content:space-between; background-color:#f1f1f1; }
.util a {  text-align:center; padding:7px 0; font-size:.9em}
.util a:nth-child(1) {width:40%; background-color:#fbe300; color:#111}

#top input {border:1px solid #333; height:25px; border-radius:0}
#top button {background-color:#333; border:none; color:#fff; height:25px; box-sizing:border-box; padding:0 10px; font-size:.95em}

.nav_wrap {width:100%; box-sizing:border-box; max-width:900px; margin:0 auto;   overflow:hidden;  position:relative;   }
 
ul.nav {width:100%; display:flex; flex-wrap:wrap;  background-color:#006b90; }
ul.nav li {position:relative; display:flex; align-items:center; justify-content:center; width:33.33333%; box-sizing:border-box; list-style:none; text-align:center; border-right:1px solid rgba(255,255,255,.5); border-bottom:1px solid rgba(255,255,255,.5);  transition: all 0.3s ease-out; font-size:.9em }
ul.nav li  a {width:100%; display:inline-block; color:#fff; line-height:1em;  padding:10px 0;}
ul.nav li.on {background-color:#055d45; }
ul.nav li.on a { color:#fff102}

.nav_bottom {background-color:#004d71;  width:100%; text-align:center; color:#fff; padding:12px 0;  font-weight:400; font-size:.9em;}

.dep_2_wrap {width:100%; background-color:#fff; border-top:1px solid #333; border-bottom:1px solid #333;  padding:6px 3%;  box-sizing:border-box; font-size:0; line-height:0;    margin-top:7px; text-align:center}
div.dep_2 { font-weight:400; display:inline-block;  box-sizing:border-box;  margin:3px 0;   }
div.dep_2 a {font-size:.92rem; position:relative; display:inline-block;  padding:0 10px;  line-height:1; }
div.dep_2 a:after {width:1px; height:10px; content:''; background-color:#333; display:inline-block; position:absolute; right:0; top:2px;} 
div.dep_2:last-child a:after {display:none} 
/* div.dep_2 + div.dep_2  {border-left:2px solid #fff; padding-left:10px}
 */

.basic_btn {background-color:#333; color:#fff; border-radius:3px; padding:6px 10px; display:inline-block; font-size:.95em}


#wrap { box-sizing:border-box; width:94%; margin-left:3%; margin-top:15px; margin-bottom:30px}
#wrap img {max-width:100%; height:auto}
/* General Style Definitions */
  

body {
	background-color: #FFFFFF;
	margin: 0px;

	scrollbar-3dlight-color:#BBBBBB;
	scrollbar-arrow-color:#BBBBBB;
	scrollbar-base-color:#EFEFEF;
	scrollbar-darkshadow-color:#FFFFFF;
	scrollbar-face-color:#EFEFEF; 
	scrollbar-highlight-color:#FFFFFF;
	scrollbar-shadow-color:#BBBBBB; 
}

table {
	border-collapse:collapse;
}
 
.hand {cursor:pointer;}


.main_mn   td  {padding-top:7px; padding-left:5px; width:75px; vertical-align:middle; border-bottom:1px solid #ddd;}

.product_list {width:100%;  box-sizing:border-box; display:flex; flex-wrap:wrap;   margin-top:20px; justify-content:space-between; font-weight:600; font-size:1em}
.product_list div.box {width:48.5%; text-align:Center}
.product_list div.box:nth-child(n+3) {margin-top:20px} 
.product_list div.box p {margin:3px 0}

.product_list div.box img.list_img {margin-bottom:5px; border:1px solid #ddd}

 
.page {width:100%; margin-top:30px;  display:flex;  algin-items:Center; justify-content:center }

.label {padding:2px 5px; background-color:#0bb300; color:#fff; font-size:11px; font-weight:600; display:inline-block; border-radius:2px}

#footer {width:100%; display:inline-block; background-color:#222; color:rgba(255,255,255,.9); box-sizing:border-box; font-size:.85em; line-height:1.6; padding:30px 4%; }

.bottom_list {width:100%; display:flex;  flex-wrap:wrap ; justify-content:center; box-sizing:border-box; border-left:1px solid #ddd;  margin-top:20px;}
.bottom_list li {width:33.33333%; background-color:#f9f9f9; border-right:1px solid #ddd; border-bottom:1px solid #ddd; font-size:.90em;  box-sizing:border-box; display:flex; justify-content:center; align-items:center; list-style:none; padding:15px 10px; text-align:center; cursor:pointer;}
.bottom_list li:nth-child(1) {background-color:#fbe300; border-bottom:none} 
.bottom_list li:nth-child(2) {background-color:#fff} 
.bottom_list li:nth-child(3) {background-color:#fff} 
.bottom_list li p {font-size:1em; background-color:#f2f2f2; border-radius:5px; padding:10px; box-sizing:border-box;  margin-top:5px; }

.bottom_list li img {max-width:100% }
 .bottom_list li b {font-size:1.1em}

.kakao {background-color:#fbe300;  box-sizing:border-box;    color:#111}

.guide {font-size:1.5em; color:#111; width:100%; text-align:center;  }

.write_table {width:100%; margin-top:10px}
.write_table td { padding-bottom:10px}
.write_table td input[type="text"] {width:100%; height:30px; margin-top:5px}
.write_table td input[type="password"] {width:100%; height:30px;  margin-top:5px}
.write_table td textarea {   margin-top:5px}


.write_table td textarea {width:100%;  }
.write_table td div.file_wrap {width:100%; display:inline-block; margin:5px 0;}
.write_table td.tel input {width:30%; }

.info_text {margin-top:20px; background-color:#f3f3f3; padding:13px; font-size:.95em; box-sizing:border-box;}

.search_bar {margin-top:20px; margin-bottom:10px; width:100%; display:flex; justify-content:flex-end; align-items:center}

.search_bar2 {display:flex; border:1px solid #004d71; width:60%; margin-left:auto}
.search_bar2 input {border:none; width:calc(100% - 50px); height:29px; border-radius:0}
.search_bar2 button {background-color:#004d71; border:none; color:#fff; box-sizing:border-box; width:50px; text-align:center; font-size:.90em}

.search_bar2.select_plus {width:100%; margin-top:15px; border:none; margin-bottom:15px }
.search_bar2.select_plus input {  border:1px solid #004d71;  width:calc(100% - 150px); }
.search_bar2.select_plus select {width:100px;   margin-right:10px; font-size:.90em}

.member_box {width:100%; max-width:600px; box-sizing:border-box;   padding:0 3%;   margin:0 auto; text-align:Center; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
.member_box input[type="text"] {width:100%; height:40px; font-size:1em; box-sizing:border-box; padding-left:6px;  border:1px solid #333; margin-top:5px}
.member_box input[type="password"] {width:100%; height:40px; font-size:1em;   box-sizing:border-box; padding-left:6px; border:1px solid #33;  margin-top:6px}

.td1 {padding:5px 0}

.view_img {width:100%;  box-sizing:border-box;  text-align:center; margin-top:20px}
.view_img img {max-width:100%}

.pay_table td {border:1px solid #999;  font-size:0.95em; padding:5px}
.pay_table td input {width:100%}


.file_info {margin:5px 0 ; display:inline-block; background-color:#f1f1f1; width:100%;   padding:15px; padding-bottom:10px; box-sizing:border-box; text-align:center}
 

.bg_box {background-color:#f1f1f1; border-radius:5px; box-sizing:border-box; width:100%; padding:15px}

/*********팝업*********/

.needpopup-opened,.needpopup-opened body{overflow:hidden}.needpopup-opened.needpopup-scrolled,.needpopup-opened.needpopup-scrolled body{height:auto}.needpopup-opened.needpopup-scrolled body{position:fixed;width:100%}.needpopup_wrapper{position:fixed;z-index:999;top:0;left:0;visibility:hidden;overflow:auto;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;padding:40px 0;-webkit-transition:opacity .3s ease;transition:opacity .3s ease;opacity:0;background:#000;background:rgba(0,0,0,.8)}.needpopup-opened .needpopup_wrapper{visibility:visible;opacity:1}.needpopup-overflow .needpopup_wrapper{}.needpopup{position:relative;z-index:9999;top:50%;left:50%;display:none;-webkit-box-sizing:border-box;box-sizing:border-box;width:400px;max-width:100%;margin-left:-200px; -webkit-transform:scale(.1,.1);-ms-transform:scale(.1,.1);transform:scale(.1,.1);opacity:0;background:#fff}.needpopup.opened{-webkit-transition:opacity .5s ease,-webkit-transform .5s ease;transition:opacity .5s ease,transform .5s ease;-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);opacity:1}.needpopup.stacked{top:0!important;margin-top:0!important}.needpopup-overflow .needpopup{left:0;width:auto;margin-left:0}.needpopup_remover{position:fixed;z-index:9999;top:30px;right:30px;font-size:40px;line-height:.5;color:#fff;text-decoration:none}.needpopup_remover:hover{color:#ccc}.needpopup_remover:before{content:'×'}.needpopup .needpopup_remover{top:20px;right:20px;position:absolute; font-size:30px; font-weight:800; color:#111;  }.needpopup .needpopup_remover:hover{color:#ccc}


input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.number-input {
  
  display: inline-flex;
}

.number-input,
.number-input * {
  box-sizing: border-box;
}

.number-input button {
  outline:none;
  -webkit-appearance: none;
  background-color: transparent;
 align-items: center;
  justify-content: center;
  width: 35px;
  height:30px;
  margin-right:5px;
  position: relative;
  cursor:pointer; 
  border: 1px solid #ddd; background-color:#fff
}

.number-input button:before,
.number-input button:after {
  display: inline-block;
  position: absolute;
  content: '-1';
  font-size:15px;  left:50%; top:50%; transform: translate(-50%, -50%); 
  /* width: 10px;
  height: 2px; 
  background-color: #212121;
  transform: translate(-50%, -50%); */ 
}

.number-input button.plus:before,
.number-input button.plus:after {
  display: inline-block;
  position: absolute;
  content: '+1';
 
}

/* .number-input button.plus:after {
  transform: translate(-50%, -50%) rotate(90deg);
} */

.number-input input[type=number] {
  font-family: sans-serif;
  width:50px; 
    border: 1px solid #ddd; margin-right:5px;
   font-size:15px; line-height:0;
  height: 30px; font-weight:500; color:#111;
  text-align: center; padding:0;
}


 button.basic_button {background-color:#004d71; border:none; color:#fff; box-sizing:border-box; width:50px; text-align:center; font-size:.90em}
