@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

* {
  box-sizing: border-box;
  font-family: inherit;
}

html,body {margin: 0; font-family: 'NanumSquare', sans-serif;  height:100%;}
body {background: #bacce0;}
input[type=password]{  font-family:"±¼¸²"; } input[type=password]::placeholder { font-family: "NanumSquare",sans-serif; }



.login {width: 100%; background:#f1f7fc; float:left; position:relative; }
.cmp{color:#fff;font-size: 20px;padding: 8Px;}


.header {
 
  width: 100%;
  background-position: top center;
  float:left;
  background:#39b54a;
  background-size:80%;
}
.header__text {
  position: relative;
  padding: 80px 0px;
  width:265px;
  margin:0 auto;

}
.header__text > span {color:#fff; font-size:12px; font-weight:600;}
.header__text > h1 {
  margin: 0;
  font-size: 44px;
  color:#ff7f15;
  font-weight:lighter;
  text-shadow: 2px 2px 4px rgba(0,35,77,0.5);
}
.header__text > h1 span.b_text {font-weight:800;}


.header__text > p {font-size:16px; margin-top:10px; color:rgba(255,255,255,0.6)}

.footer {
  background: #bacce0;
  text-align: center;
  width: 100%;
  overflow: hidden;
  padding-top: 20px;
  padding-bottom: 30px;
}
.footer p.copy {
  color: #98b0cb;
  font-weight: 400;
  text-shadow: rgb(255 255 255 / 10%) 1px 1px 0;
  font-size: 10px;
  padding-top: 5px;
}

.loginf {
  margin: 0 auto;
  max-width: 17rem;
  overflow: auto;
  padding-top:40px;
}
.loginf > * + * {
  margin-top: 12px;
}
.loginf > input {
  
  border: 1px solid rgba(98,123,165,0.5);
  border-radius: 8px;
  width: 100%;
  color:#000;
  padding: 12px;
  font-size: 1rem;
  height:42px;
}

.loginf > input[type=password]
.loginf > input:focus {
  outline: none;
}
.loginf > input::placeholder {
  color: rgba(59,64,91,0.5);
}
.loginf > button {
  margin-top:12px;
  border: 0;
  border-radius: 5px;
  width: 100%;
  padding: 8px 0px 6px 0px;
  font-size: 1rem;
  color: #fefefe;
  background: #1769ce;
  font-weight:600;
  height:42px;
}
.loginf> button:focus {
  outline: none;
}

.loginf > button .loginbtn {width:165px; margin:0 auto; overflow:hidden; text-align:center; }
.loginf > button .loginbtn span.l_icon {padding:0px 0px 0px 0px;}
.loginf > button .loginbtn span.l_icon img {width:18px; height:19px;}
.loginf > button .loginbtn span.l_text {padding:0px 0px 0px 0px; }



.loginf > button .i_loginbtn {width:170px; margin:0 auto; overflow:hidden; text-align:center; }
.loginf > button .i_loginbtn span.l_icon {float:left; padding:2px 0px 0px 0px;}
.loginf > button .i_loginbtn span.l_icon img {width:22px; height:22px;}
.loginf > button .i_loginbtn span.l_text {float:left; padding:5px 0px 0px 5px; }


.loginf > button .a_loginbtn {width:110px; margin:0 auto; overflow:hidden; text-align:center; }
.loginf > button .a_loginbtn span.l_icon {float:left; padding:4px 0px 0px 0px;}
.loginf > button .a_loginbtn span.l_icon img {width:20px; height:20px;}
.loginf > button .a_loginbtn span.l_text {float:left; padding:5px 0px 0px 5px; }

.sign-in {background: linear-gradient(270deg, rgba(229,239,248,1) 0%, rgba(241,247,252,1) 100%); overflow:hidden; float:left; width:100%; height:100%;}

.opposite-btn1,
.opposite-btn2 {
  cursor: pointer;
}


.btn_area {max-width: 17rem; margin:30px auto 20px auto; height:55px;}
.btn_area .btn_text {  float:left; color:#3b405e; font-weight:800; margin-top:10px; font-size:14px; padding-left:10px;}
.btn_area .btn_text p.text_s{font-size:11px; margin-top:5px; color:rgba(59, 64, 94, 0.5); line-height:15px; font-weight:600;}

.swich {width:60px; float:left; }

/* up/down */
.detPer {  float:left; width:100%; background:#fff;}
.detPer ul {float:left;  width:100%;  background: linear-gradient(270deg, rgba(214,225,236,0.5) 0%, rgba(235,242,248,0.5) 100%);}

.detPer ul li{float:left; padding:8px 1px; border-bottom:1px solid rgba(13,77,137,0.15); border-top:1px solid rgba(255,255,255,0.8); height:58px;}
.detPer ul li.m_txt {text-align:right; padding-right:5px; padding-top:18px; font-weight:800; color:#3b405e;}

/*  
.detPer ul li {color:#1769ce; font-size:16px; text-align:center; font-weight:800; height:44px; padding-top:13px; border-right:1px solid rgba(13,77,137,0.15);  border-left:1px solid rgba(255,255,255,0.3);} */

.detPer ul li:last-child  {border-right:none; }
.detPer ul li input  {padding: 1px; }
.detPer ul li span img  {height:42px; content:url(/common/img/arrow_top_down.png)}


.detPerT {  float:left; width:100%; background:#fff;}
.detPerT ul {float:left;  width:100%;  background: linear-gradient(270deg, rgba(214,225,236,0.5) 0%, rgba(235,242,248,0.5) 100%);}
.detPerT ul:first-child {background:#e6edf3 url(/common/img/table_bg.png) repeat-x left top; background-size:100% 40px;  width:100%;   }

.detPerT ul li{float:left; padding:8px 1px; border-bottom:1px solid rgba(13,77,137,0.15); border-top:1px solid rgba(255,255,255,0.8); height:52px;}
.detPerT ul li.m_txt {text-align:right; padding-right:5px; padding-top:18px; font-weight:800; color:#3b405e;}

.detPerT ul:first-child li {font-size:15px; text-align:center; font-weight:500; height:52px; padding-top:13px; border-right:1px solid rgba(13,77,137,0.15);  border-left:1px solid rgba(255,255,255,0.3);}

.detPerT ul li:last-child  {border-right:none;}


.join_area {position:absolute; Bottom:0; width:100%; border-top:1px solid rgba(0,0,0,0.15); padding:10px 0px; text-align:center; background:#e7eff6; float:left;}
.join_area .join {margin:0 auto; width:100px;  overflow:hidden;}
.join_area .join .join_logo {float:left; padding-top:4px; height:44px;}
.join_area .join .join_logo img {width:17px; height:24px;}
.join_area .join .join_text {color:#ff7f15; font-weight:800; padding:13px 0px 0px 10px; height:44px; float:left; text-shadow: 0px 1px 0px #fff; font-size:16px;} 


.info{color:#6666cc;font-size: 16px;padding-left:10px;margin-top:5px;text-align:center;width:100%;display:block;}
.hint{color:#0099cc;font-size: 12px;padding-left:10px;margin-top:-5px;text-align:center;width:100%;display:block;}
.error{color:red;font-size: 12px;padding-left:10px;margin-top:5px;text-align:center;width:100%;display:block;}

.pop-layerBg {display:none;position:fixed;z-index:9999;margin:0px;width:100%;height:100%;background-color:rgb(39 39 39 / 80%); } 
.pop-layer {display:none; position: fixed; top: 50%; left: 50%; width: 250px; height:auto;  background-color:#fff;  z-index: 10; border-radius:20px;} 
.pop-layer .textTit {padding:20px 0px 15px 20px; color:#1769ce; font-weight:800; border-bottom:1px solid rgba(255,255,255,0.5);
background: rgb(214,225,236); background: linear-gradient(270deg, rgba(214,225,236,1) 0%, rgba(235,242,248,1) 100%); border-top-left-radius:20px; border-top-right-radius:20px; }
.pop-layer .pop-container {padding: 10px 15px ; border-top:1px solid rgba(13,77,137,0.15); background: rgb(229,239,248);
background: linear-gradient(270deg, rgba(229,239,248,1) 0%, rgba(241,247,252,1) 100%);}
.pop-layer .btn-r {width: 100%; margin:0px; padding-top: 10px; text-align:right;}

.dlItem{ position: relative; padding: 15px 15px;overflow: hidden; background:#178bce; border-radius:5px; color:#fff; text-align:center; font-weight:600; margin-bottom:10px;}
.dlItem:hover {border: 1px solid #091940; background-color:#1f326a; color:#fff;}    
a.cbtn {display:inline-block;   position: absolute; top:0px; right:5px;}
a.cbtn img {width:50%;}


#toast {position: fixed;bottom: 40px;left: 50%;padding: 15px 20px;max-width: 80%;width: fit-content;transform: translate(-50%, 10px);border-radius: 30px;overflow: hidden;font-size: .8rem;opacity: 0;visibility: hidden;transition: opacity .5s, visibility .5s, transform .5s;background: rgba(0, 0, 0, .65);color: #fff;z-index: 10000;}
#toast img{position: absolute;width: 22px;top: 22%;border-radius: 40%;background: #fff;padding: 4px;}
#toast p{padding-left: 30px;}
#toast.reveal{opacity:1;visibility:visible;transform:translate(-50%,0)}


/* header */




.header .left_top {position:relative; float:left; font-weight:600; height:60px; width:70%; overflow:hidden; white-space:nowrap;}
.header .left_top span.left_arrow {background: url("/common/img/left_arrow.png")no-repeat; float:left; background-size:14px 21px; background-position:20px 21px; width:40px; height:60px; }
.header .left_top span.left_text {color:#fff; padding:22px 0px 0px 5px; font-size:18px; float:left; font-weight:800;}
.header .left_top span.left_text_1 {color:#fff; width:auto; padding:22px 12px 0px 5px; font-size:18px; float:left; background:url("/common/img/top_line.png") no-repeat; background-size:2px 15px; background-position:right 24px;  font-weight:800; }
.header .left_top span.left_text_2 {color:#fff;  padding:22px 0px 0px 12px; font-size:18px; float:left;  font-weight:800;}
.header .right_btn {position:relative; float:right; border-left:1px solid rgba(255,255,255,0.3); width:80px; text-align:center; color:#fff; height:60px; font-weight:800; font-size:18px; padding:22px 0px 0px 0px;}
.top_line {width:100%; background:(0,0,0,0.5); float:left;}

.header .unidentified {position:absolute; background:#14417b url("/common/img/top_arrow.png") no-repeat 100px 15px;font-weight: 800; background-size:18px 10px; width:130px; color:#ff7f15; top:11px; left:140px; height:40px; border-radius:10px; padding:10px 15px; border:1px solid #1c61bd; }






#wrap {background:#bacce0; width:100%; float:left;}

.detArea h1 {font-size:18px; color:#1769ce; font-weight:800; margin:25px 0px 0px 20px; padding-left:10px;  text-shadow:1px 1px 1px #fff; }
.detArea h2 {font-size:16px; color:#000; font-weight:800; margin:5px 0px 5px 20px; padding-left:10px;  text-shadow:1px 1px 1px #fff; }

.detArea {float:left; box-shadow: 0px 2px 6px 0px rgba(0,38,84,0.3); width:100%; background: linear-gradient(270deg, #eaf0f5 0%, #f5f8fb 100%);}


.detTit {height:54px; float:left; width:100%; background: rgb(231,239,246);
background: linear-gradient(0deg, rgba(231,239,246,1) 0%, rgba(247,251,254,1) 100%);}
.detTit div {position:relative; height:50px; margin:2px 0px 3px 0px;  width:100%;  float:left; background: rgb(250,252,255); font-weight:800;  text-shadow:1px 1px 1px #fff;
background: linear-gradient(0deg, rgba(250,252,255,1) 0%, rgba(231,240,247,1) 100%); padding:4px 0px 10px 20px; font-size:16px; color:#3b405e;  }
.detTit div.round {width:40px;height:33px;top:0px;}
.detTit div span {position: relative;float:left;padding-top:13px;width:fit-content;display: inline-block;}
.detTit div span.arrow_bottom {position:absolute; right:15px; top:5px;}
.detTit div span.arrow_bottom img {width:20px; height:15px;}
.detTit div span.plus_icon {position:absolute; right:45px; top:12px;}
.detTit div span.plus_icon img {width:24px; height:24px;}
.detTit div span.r_txt {position:absolute; right:10px; top:14px; color:#d23d15; font-weight:800;}
.detTit div span.area_txt { margin-left:20px;}

.detTit .h_tit {width:50%; float:left;}
.detTit .h_tit span.h_icon {float:left;}
.detTit .h_tit span.h_icon img {width:20px; height:21px;}
.detTit .h_tit span.h_txt {padding:1px 0px 0px 5px;}


@media all and (max-width: 321px){ 
	.detTit .h_tit span.h_txt {font-size:12px;}
}



/* ȸ¿ø°¡ÀÔ */
dl {width:100%; float:left;  border-bottom:1px solid rgba(13,11,137,0.1); border-top:1px solid rgba(255,255,255,0.8);}
dl.first {}
dl.last { border-bottom:none; }

dl dt.lh{width:28%; text-align:right; float:left; padding:10px 10px 0px 0px; font-size:16px; color:#3b405e; font-weight:800;  }

dl dt {width:19%; text-align:right; float:left; padding:17px 10px 0px 0px; font-size:16px; color:#3b405e; font-weight:800; height:54px;  }
dl dd {width:81%; float:left; padding:7px 10px 7px 0px;  }


dl dt.half_dt_1 {width:28%; text-align:right; float:left; padding:20px 10px 0px 0px; font-size:16px; color:#3b405e; font-weight:800;  }
dl dd.half_dd_1 {width:32%; float:left; padding:10px 0px 10px 0px;  }

dl dt.half_dt_2 {width:17%; text-align:right; float:left; padding:20px 10px 0px 0px; font-size:16px; color:#3b405e; font-weight:800;  }
dl dd.half_dd_2 {width:35%; float:left; padding:10px 10px 10px 0px;  }

dl dt.check_dt {width:8%; text-align:right; float:left; padding:0px 10px 0px 0px; font-size:16px; color:#3b405e; font-weight:800; height:40px; }
dl dd.check_dd  { float:left; padding:8px 0px 0px 10px;  }

dl dd.agree_dd  {width:92%; float:left; padding:12px 0px 7px 10px; }






/*¹öÆ° Çϳª*/
.save_btn {  float:left; padding:45px 0px; position:relative; width:100%; height:150px;}
.save_btn .b_one { position:absolute; left:50%; margin-left:-70px; width:136px; height:56px; text-align:center; background:#c0d2e5; border-radius: 5
px; 
					  box-shadow: -6px -6px 10px rgba(232, 243, 255, 0.3),6px 6px 10px rgba(95, 126, 161, 0.2);}
.save_btn .b_one .m_one {width:130px; height:50px; margin:3px; border-radius: 5px; background: rgb(57,181,14);
background: linear-gradient(270deg, rgba(231,239,246,1) 0%, rgba(247,251,254,1) 100%);}
.save_btn .b_one .m_one .s_one { width:124px; height:44px; margin:3px; border-radius: 5px; float:left; background: rgb(57,181,14);
background: linear-gradient(270deg, rgba(250,252,255,1) 0%, rgba(231,240,247,1) 100%); padding-top:15px; font-size:18px; font-weight:800; color:#39b54a;}


/*¹öÆ° µÎ°³*/
.save_btn .b_one_2 { position:absolute; left:50%; margin-left:-120px; width:240px; height:56px; text-align:center; background:#c0d2e5; border-radius: 5px; 
					  box-shadow: -6px -6px 10px rgba(232, 243, 255, 0.3),6px 6px 10px rgba(95, 126, 161, 0.2);}
.save_btn .b_one_2 .m_one_2 {width:234px; height:50px; margin:3px; border-radius: 5px; background: rgb(57,181,14);
background: url(/common/img/btn_line.png) repeat-y 50% 0, linear-gradient(270deg, rgba(231,239,246,1) 0%, rgba(247,251,254,1) 100%); }
.save_btn .b_one_2 .m_one_2 .s_one_2 { width:111px; height:44px; margin:3px; border-radius: 5px; float:left; background: rgb(57,181,14);
background: url(/common/img/btn_line.png) repeat-y 50% 0, linear-gradient(360deg, rgba(250,252,255,1) 0%, rgba(231,240,247,1) 100%); padding-top:15px; font-size:18px; font-weight:800; color:#39b54a;}
.save_btn .b_one_2 .m_one_2 .s_one_2 span.btn_2 { width:50%;  float:left;}



/* input style */

input{ 
		position: relative;
		width:100%;
		border:1px solid rgba(98,132,165,0.5);
		padding:10px;
		box-sizing: border-box;
		border-radius:5px;
		display:inline;
		outline:none;
		font-size:16px;  color:rgba(40,40,40,1);
		height:38px;
		font-weight:600;
	}
input::placeholder { font-size:13px; font-weight:600; padding-left:0px; color:rgba(59,64,94,0.5);}
input[type=button]{
        position:absolute;
		
		right:25px;
        width: 13%;
        border:none;
       
		 appearance: none; 
		-moz-appearance: none; 
		-webkit-appearance: none; 
		font-size:14px;
		font-weight:bold;
		color:#d23d15;
        height:38px;

        /* display:inline; */
        background:transparent;
    }


input[type=text1]{ 
		position: relative;
		width:100%;
		border:1px solid rgba(98,132,165,0.5);
		
		 background:#e4edf7;
		box-sizing: border-box;
		height:38px;  
		border-radius:10px;
	
		display:inline;
		outline:none;
		

	}
input[type=text1]::placeholder { font-size:16px; font-weight:800; padding-left:5px; color:#d23d15;}
input[inputmode=decimal] {text-align:right;padding-right:5px;}
input.inputdate{padding: 15px 0px; background-color: #fff !important; color: #fff !important; width:100%;-webkit-appearance: none !important;display: -webkit-inline-flex;}
input.inputdate:before{position: absolute;content: attr(data-date);display: inline-block;color: black; !important; font-size:16px; font-weight:600; padding-left:10px;} 

select{ 
    position: relative;
    width: 100%;
    border: 1px solid rgba(98,132,165,0.5);
    box-sizing: border-box;
    height: 38px;
    border-radius: 5px;
    display: inline;
    outline: none;
	font-size:16px;
	font-weight:600;
	background:#e4edf7;
	padding-left:10px;
}
select::placeholder { font-size:16px; font-weight:600; padding-left:10px; color:rgba(59,64,94,0.5);}


textarea {
			width: 100%;
			height: 100px;
			padding: 10px;
			box-sizing: border-box;
			border: solid 1px rgba(98,132,165,0.5);
			border-radius: 5px;
			font-size: 16px;
			resize: both;
			font-weight:600;

		}


textarea.pc_text {
			width: 100%;
			height: 60px;
			padding: 10px;
			box-sizing: border-box;
			border: solid 1px rgba(98,132,165,0.5);
			border-radius: 0px;
			font-size: 16px;
			resize: both;
			font-weight:600;

		}


.in_text {margin:15px 20px; position: relative; }
.btnO {width:35px; position: absolute; top:10px; right:10px; background:url(/common/img/btn_o.png) no-repeat; background-size:35px 35px; height:35px; }



input:read-only {
  font-size:16px; font-weight:600; padding-left:10px; color:#3b405e; background:#f2f2f2; z-index:9;
}




/* °øÁö»çÇ× */
.detNotice { padding:10px 0px 5px 0px;float:left; position:relative;  width:100%;  font-size:16px; box-shadow:inset 0px 16px 8px -10px rgb(0 38 84 / 20%);  background: linear-gradient(90deg, rgba(241,247,252,1) 0%, rgba(229,239,248,1) 30%, rgba(229,239,248,1) 100%); }  



.detNotice span.writer {font-weight:800; color:#3b405e; }
.detNotice span.name {font-weight:800; color:#1769ce;}
.detNotice span.date {color:#1769ce; font-size:13px; font-weight:600; padding-right:10px;}
.detNotice span.time {float:right; color:#1769ce; font-size:13px; padding-right:20px; font-weight:600;}
.detNotice div {position:relative;width:100%;float:left;height:50px;}
.detNotice div.round {width:33px;top:3px;}
.detNotice div span {position: relative;float:left;padding-top:13px;width:65px;display:inline-block;padding-right:5px;}
.detNotice div span.textbox {padding-top:3px;}
.detNotice div span input[type=button]{left:0px;right:0px;padding-top:8px;font-weight:900;font-size:20px;text-align:left;}

.detNotice ul {margin:0px 0px 0px 0px;}
.detNotice ul li {width:28%;  float:left; height:80px; border:1px solid rgba(255,255,255,0.5);	border-radius:20px; margin-right:20px; margin-bottom:20px; 
box-shadow: -8px -8px 10px 0px rgba(255,255,255,0.4), inset 0px 4px 6px 0px rgba(148,172,194,0.31),  8px 8px 14px 0px rgba(148,172,194,0.25);
 background: url(/common/img/img_bg.png),
 linear-gradient(0deg, rgba(234,242,248,1 ) 0%, rgba(222,232,242,1) 100%);

  background-repeat: no-repeat, no-repeat;
  background-position: center center;
  overflow:hidden;
}
.detNotice ul li img {width:100%; height:100%;}
.detNotice ul li:nth-child(3) {margin-right:0px;}
.detNotice ul li:nth-child(6) {margin-right:0px;}


.round {
  display: inline-block;
  position: relative;
  margin: 0 0 15px 0px;
  float:left;
  
}
.round input {
  position: absolute;
  top: 4px;
  left: 0;
  width: 16px;
  height: 16px;
  opacity: 0;
  z-index: 0;
}
.round input:checked + label:after {
  border-color: #0066ff;
}

.round label {
  display: block;
  padding: 0 0 0 24px;
  cursor: pointer;
}
.round label:before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
   background-color: #f4f8fc;
  border:1px solid rgba(255,255,255,0.5);
  box-shadow: inset 0px 4px 6px 0px rgba(148,172,194,0.6),inset 0px -4px 6px 0px rgba(255,255,255,0.6),-8px -8px 10px 0px rgba(255,255,255,0.4),8px 8px 14px 0px rgba(148,172,194,0.25);
  display: inline-block;
  height: 27px;
  width: 27px;
  border-radius: 50%;
}
.round label:after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 6px;
  height: 12px;
  border-bottom: 4px solid transparent;
  border-right: 4px solid transparent;
  transform: rotate(45deg);
  z-index: 2;
  transition: border-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}