@import url('reset.css');
@import url('modal-popup.css');

:root{
  --main:#007B4E;
  }

.container{    margin: 0 auto;
    width: 100%;
    max-width:600px;
    position: relative;
    overflow: hidden;
padding: 0 clamp(0px, 3vw, 24px);}
.container.visible {overflow:visible;}
.flex{display: flex}
.flex_center{align-items: center;}
.text_center{text-align: center}
.white *{color:#fff}
.bgwhite{background: #fff;}
img{max-width: 100%}
.plr0{padding: 0;}
.plr40{padding: 0 clamp(0px, 5vw, 40px);}
.plr24{padding: 0 24px;}
.mt20{margin-top: 20px !important;}
.mb24{margin-bottom: 24px !important;}
.mb28{margin-bottom: 28px !important;}
.accent{color: var(--main) !important;}
.accent_line{color: var(--main) !important;text-decoration: underline;}
.semi_bold{font-weight: 600;}
.bold{font-weight: 700;}
.font16{font-size: 1.6rem;line-height: 24px;}
.font14{font-size: 1.4rem;line-height: 22px;}
.w-full{width:100%}

.btn_common{border-radius: 8px;display: inline-block;width:100%;height: 52px;line-height: 52px;
  font-size: 1.6rem;text-align: center;cursor: pointer;font-weight: 700;}
.btn_common:disabled{opacity: 0.2;}
.btn_main{background: var(--main);color:#fff}
.btn_cancel{background:#fff;border:solid 1px #D2D2D2;    font-weight: 400;}
.btn_sm{font-size: 1.3rem;font-weight: 600 !important;padding: 7px 16px;width:auto;height: auto;line-height: initial;border-radius: 4px;}
.text_btn{font-size: 1.4rem;line-height: 24px;color:#6a6a6a;font-weight: 500;padding: 8px 16px;}
.text_bd_btn {font-size: 1.3rem;font-weight: 500;height: auto;line-height: initial;border-radius: 4px;
    border: solid 1px #E8E8E8;width:auto;padding:7px 16px;}
.edit_btn{background: url('/img/common/icon_edit.svg') center center;width:16px;height: 16px;margin-left: 8px;vertical-align: middle;}
.add_btn{color:#6A6A6A;display: inline-flex;align-items: center;gap:6px;margin-top: 12px;}
.add_btn::before{display: inline-block;content:'';width:16px;height: 16px;
    background: url('/img/common/icon_add.svg') center center;vertical-align:middle;}
.btn_wrap{display: flex;align-items: center;gap:4px}
.btn_wrap .btn_cancel{flex:0.5}
.btn_wrap .btn_main{flex:1}
.btn_close {width:40px;height: 40px; display: inline-block;background: url('/img/common/icon_close.svg') center center no-repeat;cursor: pointer;}
/* header */
.header-wrap {
  width: 100%;
  max-width: 600px;
  height: 64px;
  z-index: 999;
  transition: all 0.3s;
  position: sticky;
  top: 0px;
  backdrop-filter: blur(4px);
}
.header-wrap .header{width: 100%;display: flex;align-items: center;justify-content: space-between;height: 64px;
  max-width: 100%;min-width: inherit;padding: 0 16px;transition: all 0.4s;z-index: 2;}
.header-wrap .header>*{z-index: 2}
.header-wrap .hd_logo {}
.header-wrap .gnb_w{height: 100%;}
.header-wrap>.btn_flex p{width:40px;height: 40px;}
.nav .login_info{padding:32px clamp(16px, 6vw, 40px);border-bottom: solid 1px #E8E8E8;}
.nav .login_info p{font-size: 16px;margin-bottom: 16px;}
.nav .nav_top{padding:0 clamp(16px, 6vw, 40px);height: 60px;border-bottom: solid 1px #E8E8E8;display: flex;
    align-items: center;justify-content: end;}
.nav .nav_btn{width:40px;height: 40px;}
.nav .nav_btn .btn_close {position: relative;}
body:has(.wrap.white_hd) .header-wrap{background: #fff;}
.nav .login_info + .gnb_wrap{max-height: calc(100% - 210px);}

.profile_cont{padding: 32px clamp(16px, 6vw, 40px);align-items: center;height: 120px;border-bottom: solid 1px #E8E8E8;position: relative;}
.user_photo{width:56px;height: 56px;border-radius: 100%;background-color:var(--main);margin-right: 12px;position: relative;
background-position: center center; background-size: cover;}
.profile_cont .user_photo button{position: absolute;right:0;bottom: 0;border-radius: 100%;background: transparent;z-index: 2;    cursor: pointer;}
.profile_cont .user_info .nickname{font-size: 2rem;font-weight: 700;}
.profile_cont .user_info a{color:var(--main);font-size: 1.4rem;font-weight: 600;text-decoration: underline;margin-top: 8px;}
.profile_cont .user_type{display: inline-block;background: #EDEDF2;padding: 4px 8px;color:#444;font-size: 12px;border-radius: 4px;
position: absolute;right:40px;top:32px}

.nav {
  display: none;
  background: #fff;
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  top: 0;
  right:0
}
.gnb_wrap{max-height: calc(100% - 180px);overflow-y: auto;}
#gnb{padding: clamp(16px, 6vw, 40px);}
#gnb>p{font-size: 12px;font-weight: 600;color:#A3A0B4;border-bottom: solid 1px #F4F4F4;padding-bottom: 9px;margin-bottom: 16px;}
#gnb>a {
  font-size: 16px;
  font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
line-height: 32px;
}
#gnb>a + a{margin-top: 16px;}
#gnb>a + p{margin-top: 52px;}
#gnb>a::after{display: inline-block;content: '';width:20px;height: 20px;background: url('/img/common/icon_arrow.svg');}

.bottom_bar{position: sticky;bottom:0;background: #fff;padding:10px 0;border-top: solid 1px #e8e8e8;height: 62px;z-index: 2;}
.bottom_bar .icon{width:20px;height:20px;display: block;background-repeat: no-repeat;background-position: center center;text-align: center;margin: 0 auto 4px;}
.bottom_bar a:first-child .icon{background-image: url('/img/common/menu_icon01.svg');}
.bottom_bar a:first-child.active .icon{background-image: url('/img/common/menu_icon01_on.svg');}
.bottom_bar a:nth-child(2) .icon{background-image: url('/img/common/menu_icon02.svg');}
.bottom_bar a:nth-child(2).active .icon{background-image: url('/img/common/menu_icon02_on.svg');}
.bottom_bar a:nth-child(3) .icon{background-image: url('/img/common/menu_icon03.svg');}
.bottom_bar a:nth-child(3).active .icon{background-image: url('/img/common/menu_icon03_on.svg');}
.bottom_bar a:nth-child(4) .icon{background-image: url('/img/common/menu_icon04.svg');}
.bottom_bar a:nth-child(4).active .icon{background-image: url('/img/common/menu_icon04_on.svg');}
.bottom_bar a:nth-child(5) .icon{background-image: url('/img/common/menu_icon05.svg');}
.bottom_bar a:nth-child(5).active .icon{background-image: url('/img/common/menu_icon05_on.svg');}
.bottom_bar a{width:25%;text-align: center;font-size: 13px;font-weight: 500;color:#666271}
.bottom_bar a.active{font-weight: 700;}

.footer{border-top:solid 1px #F4F4F4;width:100%;padding: 25px clamp(0px, 5vw, 40px) 40px;z-index: 2;position: relative;background: #fff;text-align: left;}
.footer *{color:#9E9E9E;}
.footer .company_name.show img{transform: scaleY(-1)}
.footer .company_detail{background: #F9F9FB;margin-top: 12px;padding: 16px;display: none;}
.footer .company_detail p{display: flex;align-items: center;justify-content: space-between;font-size: 12px;font-weight: 500;gap:10px;line-height: 24px;}
.footer .company_detail p span:first-child{flex:0.5}
.footer .company_detail p span:last-child{flex:1}
.footer .flex{margin-top: 12px;}
.footer .flex a{color:#9E9E9E;line-height: 22px;}
.footer .flex a + a{font-weight: 600;}
.footer .flex a + a::before{display: inline-block;content: '';width:1px;height: 12px;background: #E8E8E8;margin:0 6px;    vertical-align: middle;}

.input_wrap{position: relative;}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {-webkit-appearance: none;margin: 0;}
input:not([type="checkbox"],[type="radio"]){height: 40px;width:100%;outline: none;border:none;border-bottom: 1px solid #e8e8e8;font-size: 1.6rem;font-weight: 500;font-family: 'Pretendard', sans-serif;}
input[type="search"]{border:solid 1px var(--main);border-radius: 10px;background:#fff url('/img/common/input_search.svg') 14px 12px no-repeat;padding: 10px 16px 10px 34px;}
input.input_bd{border-radius: 8px;border: 1px solid #D2D2D2;height: 48px;padding: 0 17px;}
input.input_bd:disabled{background-color: #EDEDF2;}
input.input_error{border-color:#FF364A;}
.error_txt{color:#FF364A;font-size: 1.2rem;margin-top: 8px;}
.input_wrap .label{color:#6a6a6a;font-weight: 500;}
.input_wrap .label.requ::after{display: inline-block;content: '*';color:#FF364A;font-size: 1.4rem;margin-left: 2px;}
.input_wrap .label + .input_bd{margin-top: 8px;}
.input_wrap.input_file_wrap .info{font-size: 1.2rem;color:#6A6A6A;line-height: 32px;}
.input_wrap.input_file_wrap .info .cert{margin:0 4px 0 0}
.input_file div.flex{width:calc(100% - 120px)}
.input_file div.flex>div{position: relative;width:calc(100% - 180px)}
.input_file #file {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip:rect(0,0,0,0);
	border: 0;
}
.input_file{display: flex;align-items: center;position: relative;height: 40px;}
.input_file_wrap #file_btn {
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
	font-size: 1.3rem;
	font-weight: 500;
	text-align:center;
    border: solid 1px #E8E8E8;
    padding: 7px 16px;
  border-radius: 4px;
  margin-right: 8px;
}
.input_file .file_name{
font-size: 1.6rem;
font-weight: 500;
color:#000000;
}
.input_file .file_remove_btn{
  width:20px;
  height: 20px;
  background: url("/img/common/icon_close.svg") no-repeat center;
  margin-left: 10px;
}

.input_wrap .flex1{gap:24px}
.input_wrap .flex1 >*{flex:1}
.input_wrap:has(.btn_clear) input{padding-right: 38px;}
.input_wrap input:not(:placeholder-shown) + .btn_clear {
  display: block;
}
.input_wrap .btn_clear{position: absolute;display: none;
  top: 12px;
  right: 16px;
  width:16px;
  height: 16px;
  pointer-events: none;
  background: url('/img/common/input_clear.svg');
}

input[type="checkbox"] ,input[type="radio"] {
  opacity: 0;
  width: 0;
  margin:0
}

input[type="checkbox"]+ label:not(.toggle) {
  padding-left: 28px;
  padding-top: 0;
  height: 20px;
  display: inline-block;
  line-height: 22px;
  vertical-align: middle;
  cursor: pointer;
  opacity: 1;
  background: url("/img/common/input_unchk.svg") no-repeat;
  background-size: 20px;
  font-size: 14px
}
input[type="checkbox"]+ label:not(.toggle) span{
  font-size: 14px;
  color: #6A6A6A;
  font-weight: 400;
  line-height: 22px
}
input[type="checkbox"]:checked+label:not(.toggle) {
  background-image: url("/img/common/input_chk.svg");
}
input[type="checkbox"].bg+ label{
    background: url("/img/common/input_unchk_bg.svg") no-repeat;
}
input[type="checkbox"].bg:checked+ label{
    background: url("/img/common/input_chk_bg.svg") no-repeat;
}

input[type="radio"] {
  width:auto;
  display: none;
  vertical-align: middle;
  cursor: pointer;
  position: relative;
}

input::placeholder,textarea::placeholder{
  color:#D2D2D2;
  font-size: 1.6rem;
  font-weight: 500;
}
input:read-only{
  background:  #E4E7EB;color:#7B7B7B
}
input#input_id{background: url('/img/common/input_id.svg')  left 17px center no-repeat;padding:0 17px 0 50px;}
input#input_pw{background: url('/img/common/input_pw.svg')  left 17px center no-repeat;padding:0 17px 0 50px;}
input.input_sch_btn{background: url('/img/common/input_search_btn.svg') right center no-repeat;padding-right: 24px;}

textarea {
 border-bottom: 1px solid #e8e8e8;
 padding: 8px 0;
  resize: none;
  min-height: 40px;
  width:100%;
  overflow: hidden;
  line-height: 24px;
  font-size: 1.6rem;
  font-weight: 500;
}
textarea::-webkit-scrollbar {
  width:14px;
}

textarea::-webkit-scrollbar-thumb {
  background-color: #828282;
  border:4px solid #fff;
  border-radius: 100px;
}

textarea::-webkit-scrollbar-track {
  background-color: #fff;
}
select{ font-size: 1.6rem;
  font-weight: 500;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #fff url("/img/common/input_select.svg") no-repeat right 50%;
  background-size: 20px auto;
height: 40px;
border:none;
border-bottom: solid 1px #E8E8E8;
}
select:has(option:checked[value=""]) {
  color:#D2D2D2;
  font-size: 1.6rem;
  font-weight: 500;
  font-family: 'Pretendard', sans-serif;
}

.switch_toggle{display: inline-flex;align-items: center;gap:8px;height: 24px;}
.switch_toggle .toggle {
        display: inline-block;
    position: relative;
  background-color: #D2D2D2;
  width: 40px;
  height: 24px;
  border-radius: 100px;
}
.switch_toggle .slider {
  height: 20px;
  width: 20px;
  box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.1);
  background-color: white;
  border-radius: 100%;
  position: absolute;
  left:2px;
  top:2px;
  transition: all 0.4s;
}
.switch_toggle input:checked + .toggle {
  background-color: #32D48A;
}
.switch_toggle input:checked + .toggle > .slider {
  left:18px
}
.switch_toggle span{font-size: 1.2rem;}

.tab_menu {border-bottom: solid 1px #E8E8E8;  display: flex;cursor: pointer;}
.tab_menu p{display: inline-block;
height: 48px;
flex: 1 1 auto;
line-height: 48px;
text-align: center;
font-size: 14px;}
.tab_menu p.active{border-bottom:solid 2px var(--main);color: var(--main) !important;font-weight: 700;}

.map_wrap{margin-top: 16px;border-radius: 8px;overflow: hidden;}
.map_wrap .root_daum_roughmap  {width:100% !important}
.map_wrap .root_daum_roughmap .wrap_controllers  {display: none;}
.map_wrap .root_daum_roughmap .map_border{display: none;}

@media (min-width: 601px){
    html{background: #F5F5F7;}
    body{max-width: 600px;margin: 0 auto;box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);position: relative;}
    .nav{max-width: 600px;right: calc(50% - 300px);}
}
@media (max-width: 360px){
    .footer .company_detail p span{flex:auto}
}