/**Radio CSS**/
.label-text {margin:0 0.666rem 0 0} 
.checkradio-container {
  display: flex;
  flex-direction: row;
  width: 100;
  align-items: center;
}
/**Typeo CSS End**/
.checkradio-container fieldset {
  border: none;
  display: flex;
  align-items: flex-start;
  flex-flow:row wrap;
  /*min-width: 340px;*/
}
.checkradio-container label {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.checkradio-container input {
  position: relative !important;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 8px;
  box-sizing: content-box;
  overflow: hidden;
  width:auto;
  height:auto
}
.checkradio-container input:before {
  content: '';
  display: block;
  box-sizing: content-box;
  width: 16px;
  height: 16px;
  border: 2px solid #ccc;
  transition: 0.2s border-color ease;
}
.checkradio-container input:checked:before {
  border-color: var(--theme-color);
  transition: 0.5s border-color ease;
}
.checkradio-container input:disabled:before {
  border-color: #ccc;
  background-color: #ccc;
}
.checkradio-container input:after {
  content: '';
  display: block;
  position: absolute;
  box-sizing: content-box;
  top: 50%;
  left: 50%;
  transform-origin: 50% 50%;
  background-color: var(--theme-color);
  width: 16px;
  height: 16px;
  border-radius: 100vh;
  transform: translate(-50%, -50%) scale(0);
}
/**Radio CSS**/
.checkradio-container input[type="radio"]:before {
  border-radius: 100vh;
}
.checkradio-container input[type="radio"]:after {
  width: 16px;
  height: 16px;
  border-radius: 100vh;
  transform: translate(-50%, -50%) scale(0);
}
.checkradio-container input[type="radio"]:checked:after {
  -webkit-animation: toggleOnRadio 0.2s ease forwards;
          animation: toggleOnRadio 0.2s ease forwards;
}
/**Radio CSS**/
/**Checkbox CSS**/
.checkradio-container input[type="checkbox"]:before {
  border-radius: 4px;
}
.checkradio-container input[type="checkbox"]:after {
  width: 9.6px;
  height: 16px;
  border-radius: 0;
  transform: translate(-50%, -85%) scale(0) rotate(45deg);
  background-color: transparent;
  box-shadow: 4px 4px 0px 0px var(--theme-color);
}
.checkradio-container input[type="checkbox"]:checked:after {
  -webkit-animation: toggleOnCheckbox 0.2s ease forwards;
          animation: toggleOnCheckbox 0.2s ease forwards;
}
.checkradio-container input[type="checkbox"].filled:before {
  border-radius: 4px;
  transition: 0.2s border-color ease, 0.2s background-color ease;
}
.checkradio-container input[type="checkbox"].filled:checked:not(:disabled):before {
  background-color: #62ab64;
}
.checkradio-container input[type="checkbox"].filled:not(:disabled):after {
  box-shadow: 4px 4px 0px 0px white;
}
@-webkit-keyframes toggleOnCheckbox {
  0% {
    opacity: 0;
    transform: translate(-50%, -85%) scale(0) rotate(45deg);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -85%) scale(0.9) rotate(45deg);
  }
  100% {
    transform: translate(-50%, -85%) scale(0.8) rotate(45deg);
  }
}
@keyframes toggleOnCheckbox {
  0% {
    opacity: 0;
    transform: translate(-50%, -85%) scale(0) rotate(45deg);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -85%) scale(0.9) rotate(45deg);
  }
  100% {
    transform: translate(-50%, -85%) scale(0.8) rotate(45deg);
  }
}
@-webkit-keyframes toggleOnRadio {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.9);
  }
  100% {
    transform: translate(-50%, -50%) scale(0.8);
  }
}
@keyframes toggleOnRadio {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.9);
  }
  100% {
    transform: translate(-50%, -50%) scale(0.8);
  }
}

/*toggle*/
.tgl-group {position:relative; display:flex; flex-flow:row wrap; align-items:center; padding:0.666rem 0 }
.tgl-group i {position:absolute; left:0; top:50%;  transform:translateY(-50%)}
.tgl-group>input {width:calc(100% - 80px) !important;}
.sns-group>.tgl-group>input {padding-left:30px !important}
.toggle-buttons-multiple {
    margin: auto;
    max-width: 600px !important;
    width: 100%;
    /* text-align: center; */
}

.toggle-buttons-multiple ul.tg-list {
    list-style: none;
    margin: 0px;
    display: flex;
    flex-direction: row;
}

.toggle-buttons-multiple ul.tg-list li {
    list-style: none;
    margin: 0px;
    max-width: 20%;
    width: 100%;
}

.toggle-buttons-multiple h2 {
    text-align: center;
}
.tg-list input {display:none}
/**Typeo CSS End**/

.tgl {
  display: none;
}
.tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn {
  box-sizing: border-box;
}
.tgl::-moz-selection, .tgl:after::-moz-selection, .tgl:before::-moz-selection, .tgl *::-moz-selection, .tgl *:after::-moz-selection, .tgl *:before::-moz-selection, .tgl + .tgl-btn::-moz-selection {
  background: none;
}
.tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection {
  background: none;
}
.tgl + .tgl-btn {
  outline: 0;
  display: block;
  width: 4em;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.tgl + .tgl-btn:after, .tgl + .tgl-btn:before {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
}
.tgl + .tgl-btn:after {
  left: 0;
}
.tgl + .tgl-btn:before {
  display: none;
}
.tgl:checked + .tgl-btn:after {
  left: 50%;
}
.tgl:checked + .tgl-btn:before {display:inline-block; content:"공개"; 
font-family: 'Pretendard','Malgun Gothic','돋움',Dotum,Helvetica,AppleGothic,Sans-serif !important;
position:absolute; left:6px; line-height:2em; font-size:12px; color:#fff
}

.tgl-light + .tgl-btn {
  background: #f0f0f0;
  border-radius: 2em;
  padding: 2px;
  transition: all 0.4s ease;
}
.tgl-light + .tgl-btn:after {
  border-radius: 50%;
  background: #fff;
  transition: all 0.2s ease;
}
.tgl-light:checked + .tgl-btn {
  background: #9FD6AE;
}

.tgl-ios + .tgl-btn {
  background: #fbfbfb;
  border-radius: 2em;
  padding: 2px;
  transition: all 0.4s ease;
  border: 1px solid #e8eae9;
}
.tgl-ios + .tgl-btn:after {
  border-radius: 2em;
  background: #fbfbfb;
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}
.tgl-ios + .tgl-btn:hover:after {
  will-change: padding;
}
.tgl-ios + .tgl-btn:active {
  box-shadow: inset 0 0 0 2em #e8eae9;
}
.tgl-ios + .tgl-btn:active:after {
  padding-right: 0.8em;
}
.tgl-ios:checked + .tgl-btn {
  background: #86d993;
}
.tgl-ios:checked + .tgl-btn:active {
  box-shadow: none;
}
.tgl-ios:checked + .tgl-btn:active:after {
  margin-left: -0.8em;
}

.tgl-skewed + .tgl-btn {
  overflow: hidden;
  transform: skew(-10deg);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transition: all 0.2s ease;
  font-family: sans-serif;
  background: #888;
}
.tgl-skewed + .tgl-btn:after, .tgl-skewed + .tgl-btn:before {
  transform: skew(10deg);
  display: inline-block;
  transition: all 0.2s ease;
  width: 100%;
  text-align: center;
  position: absolute;
  line-height: 2em;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.tgl-skewed + .tgl-btn:after {
  left: 100%;
  content: attr(data-tg-on);
}
.tgl-skewed + .tgl-btn:before {
  left: 0;
  content: attr(data-tg-off);
}
.tgl-skewed + .tgl-btn:active {
  background: #888;
}
.tgl-skewed + .tgl-btn:active:before {
  left: -10%;
}
.tgl-skewed:checked + .tgl-btn {
  background: #86d993;
}
.tgl-skewed:checked + .tgl-btn:before {
  left: -100%;
}
.tgl-skewed:checked + .tgl-btn:after {
  left: 0;
}
.tgl-skewed:checked + .tgl-btn:active:after {
  left: 10%;
}

.tgl-flat + .tgl-btn {
  padding: 2px;
  transition: all 0.2s ease;
  background: #fff;
  border: 4px solid #f2f2f2;
  border-radius: 2em;
}
.tgl-flat + .tgl-btn:after {
  transition: all 0.2s ease;
  background: #f2f2f2;
  content: "";
  border-radius: 1em;
}
.tgl-flat:checked + .tgl-btn {
  border: 4px solid #7FC6A6;
}
.tgl-flat:checked + .tgl-btn:after {
  left: 50%;
  background: #7FC6A6;
}

.tgl-flip + .tgl-btn {
  padding: 2px;
  transition: all 0.2s ease;
  font-family: sans-serif;
  perspective: 100px;
}
.tgl-flip + .tgl-btn:after, .tgl-flip + .tgl-btn:before {
  display: inline-block;
  transition: all 0.4s ease;
  width: 100%;
  text-align: center;
  position: absolute;
  line-height: 2em;
  font-weight: bold;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-radius: 4px;
}
.tgl-flip + .tgl-btn:after {
  content: attr(data-tg-on);
  background: #02C66F;
  transform: rotateY(-180deg);
}
.tgl-flip + .tgl-btn:before {
  background: #FF3A19;
  content: attr(data-tg-off);
}
.tgl-flip + .tgl-btn:active:before {
  transform: rotateY(-20deg);
}
.tgl-flip:checked + .tgl-btn:before {
  transform: rotateY(180deg);
}
.tgl-flip:checked + .tgl-btn:after {
  transform: rotateY(0);
  left: 0;
  background: #7FC6A6;
}
.tgl-flip:checked + .tgl-btn:active:after {
  transform: rotateY(20deg);
}
/*상단 메시지박스*/
.bbsTopBox {
    border: 1px solid #c9c9c9;
    padding: 2rem 2.25rem;
    border-radius: 30px 10px;
    box-shadow: 0px 20px 30px 0px rgba(179,191,203,0.2);
	margin-bottom:var(--secgapn)
}
.bbsTopBox span {color:var(--point-color1); font-weight:var(--fw-7)}
.total {
	color:var(--color-6);
	font-size:var(--text-s);
	margin-bottom:var(--margin-1);
}
.total span {color:var(--theme-color)}
.fbbsList {display:flex; flex-flow:row wrap; gap:1rem}
.fbbsList .column {
	width:100%;
	background-color:var(--color-w);
	
}
.fbbsList .column a {
	display:block;
	padding:var(--boxpd);
	border:1px solid var(--color-c);
	transition:0.5s ease-in-out;
}
.fbbsList .column a:hover {
	border-color:var(--theme-color)
}
.fbbsList h4 {
	display:flex;
	flex-flow:row wrap;
	align-items:center;
	gap:1rem;
	font-family:var(--sub-font-B);
	font-size:var(--text-lg);
	margin-bottom:var(--margin-1);
	color:var(--color-3)
}
.fbbsList h4 span {
	font-family:var(--sub-font-M);
	display:flex;
	align-items:center;
	padding:6px var(--padding-1);
	border-radius:var(--radius40);
	color:var(--color-w);
	font-size:var(--text-sm);
	background-color:var(--theme-color)
}

.fbbsList h4 span.reEnd {background-color:var(--color-c)}
.reIng {}
.rowInfo {
	display:flex; 
	gap:1rem;
	align-items:center;
	font-size: var(--text-sm);
    color: var(--color-9);
    font-weight: var(--fw-3);
}

.rowInfo {display:flex; align-items:center}
.rowInfo span{display:flex; align-items:center}
.op1 {color:var(--blue-color)}
.op2 {color:var(--red-color)}
[class*='feather-']{width:1rem; height:1rem; vertical-align:middle}



@media all and (min-width:780px) {

}

@media all and (min-width:1000px) {

}

@media all and (min-width:1200px) {

}

@media all and (min-width:1600px) {

}
.topSCH {display:flex; justify-content:flex-end}
.bbsschW {position:relative; width:340px; max-width:100%; margin:0 1rem 1rem 0; height:50px; border:2px solid rgba(0,0,0,0.6); border-radius:10px; padding:10px 1em}
.bbsschW input {height:30px; width:calc(100% - 50px); border:0}
.bbsschW input:focus{outline:0}
.bbsschW .sbtn {position:absolute; right:1em; top:50%; transform: translateY(-50%); color:#333;}
.bbsschW [class*='feather-'] {width:1.5rem; height:1.5rem}

/*비밀번호 확인 */
.pwdInput{
	width:100%;
	max-width:400px;
	margin:0 auto;
	border: 1px solid #cfcfcf;
    border-radius: var(--radius20);
    padding:var(--boxpd);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    transition: 0.5s ease-in-out;
}


.pwdInput h3 {
	font-family:var(--sub-font-B);
	font-size:var(--text-xl);
	margin-bottom:var(--margin-m);
}

.pwdInput p {
	font-size:var(--text-sm);
	color:var(--color-6);
}

.login-pw {
	display:flex; 
	justify-content:center;
	align-items:center;
	gap:1rem;
	padding:var(--padding-1)
}

/*글쓰기*/
.explain {
	font-size:var(--text-s);
	color:var(--theme-color)
}
.InBox {
	border: 1px solid #cfcfcf; 
	border-radius: 3px; 
	padding:var(--boxpd);
	box-shadow:0 10px 20px rgba(0,0,0,0.15); 
	transition:0.5s ease-in-out;
}

.InBox textarea {
	font-family:var(--sub-font-B);
	margin-top:var(--margin-s)
}


/*뷰페이지*/
.view_head {
	position:relative;
	background:#fff;
	/*border-top:2px solid #333; 
	border-bottom:1px solid #ccc*/
	border-radius: 60px 10px;
    box-shadow: 0px 30px 40px 0px rgba(179,191,203,0.2);
	padding:var(--boxpd2);
}

.view_head:before {
    content: "";
    width: calc(100% - 1px);
    height: 100px;
    background: #333;
    position: absolute;
    left: 1px;
    top: -4px;
    z-index: -1;
    border-radius: 60px 10px;
}

.view_head h3 {
	display:flex;
	flex-flow:row wrap;  
	font-family:var(--sub-font-B); 
	font-size:var(--text-xl);
	margin-bottom:var(--margin-m);
	color:var(--color-3)
}
.view_head h3 label1 {display:inline-block}
.date {
	width:100%;
	height:auto; 
	padding:0; 
	color:var(--color-9);
	font-size:var(--text-s);
	margin-bottom:var(--margin-m);
	border:none !important 
}
.date ul {display:flex; flex-flow:row wrap}
.date ul li {margin-right:1rem}
.view_head .file_wrap {padding:2px 4px 0 0; text-align:right; font-size:0.725em; color:#999; font-weight:300}
.view_head .file_wrap li {margin-bottom:0.333rem}
.view_head .file_wrap dt,.view_head .file_wrap dd {display:inline-block;}
.view_head .file_wrap a {/*margin-right:15px;*/ word-break:keep-all; white-space:normal;}
.view_head .file_wrap a:before {content:""; display:inline-block; content:"\ea8b"; font-family:'xeicon' !important; font-size:14px; color:#004f9f;animation:icon_ani 0.5s infinite linear alternate;}
.view_head .file a{display:inline-block; background:url('../images/bbs/ico_file.png') left 3px no-repeat; padding-left:20px; color:#ff9900 !important}
.view_body {padding:4% 3%; margin-top:10px; border-bottom:1px solid #999;}


@keyframes icon_ani {
  0%   {transform:translate(0, 0px);}
  50%   {transform:translate(0, 5px);}
  100% {transform:translate(0, -5px);}
}


/* 게시판 댓글 */
.reply_box {
	position:relative;
	border-radius:10px 60px;
    box-shadow: 0px 5px 30px 0px rgba(179,191,203,0.2);
	padding:1.5rem 2rem 2rem 60px;
	margin-top:2rem;
	overflow:hidden;
	border:1px solid #eee;
	margin-bottom:var(--secgap)
}

.reply_box:before {
	content: "";
	display:block;
	background-color:var(--theme-color);
	width:40px;
	height:60px;
	position:absolute;
	left:0;
	top:0;
	border-radius:10px 10px 30px 0;
}


.reply_head h3 {
	display:flex;
	flex-flow:row wrap;  
	font-family:var(--sub-font-B); 
	font-size:var(--text-lg);
	margin-bottom:var(--margin-m);
	color:var(--theme-color)
}


.reply_box:after {
	display:flex;
	align-items:center;
	justify-content:center;
	content: "";
	background-color:var(--color-w);
	-webkit-mask-image:url(/wdyouth/images/common/corner-down-right.svg);
	mask-image:url(/wdyouth/images/common/corner-down-right.svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	mask-position: center center;
	-webkit-mask-size: 60%;
	mask-size: 60%;
	transition: 0.3s;
	display:block;
	width:40px;
	height:60px;
	position:absolute;
	left:0;
	top:0;
	border-radius:10px 10px 30px 0;
}


/*버튼 형식 라디오 박스*/
.radio-list-main{
	width: 100%;
    display: flex;
    flex-flow: row wrap;
	justify-content:center;
    align-items: center;
    max-width: 500px;
    margin: auto;
    padding: 20px;
    background-color: #333333;
    border: #ccc 1px solid;}
.radio-list {width: 100%;display: flex;
	justify-content:center;
    flex-flow: row wrap;
    align-items: center;
	margin-bottom:2rem;
	}
.radio-list .radio-item {
	position: relative; 
	margin: 5px;
}
.radio-list input[type="radio"]{ 
	opacity: 0; 
	cursor: pointer; 
	position: absolute; 
	top: 6px; 
	left: 7px;
}
.custom-radio{
	min-height: 28px; 
	display: flex;
	align-items: center; 
	flex-flow: row wrap; 
	padding:8px 15px;
	border: #000 2px solid; 
	position: relative; 
	cursor:pointer;

}
.radio-list input:checked~.custom-radio { 
	border-color:#333333;  
	background-color: #333333; 
	color:#fff;
}
#daum_juso_pagezip {background-color:#fff; z-index:1}
.required:before {content:"*"; color:var(--theme-color); margin-left:2px}
.addBox {position:relative; border: 1px solid #cfcfcf; border-radius: 3px; padding:1em}
.addBox .closeBtn {position:absolute; right:10px; top:50%;transform: translateX(-50%) translateY(-50%);}
.saleInput li {margin:5px 0}
.saleInput li label {display:inline-block; width:16%; margin-right:2%}
.saleInput li input {display:inline-block; width:80%}
.fileList {overflow:hidden; margin-bottom:1em}
.fileList li {position:relative; float:left; margin:0.3333em}
.fileList li {margin-bottom:5px; /*border-bottom:1px solid #f1f1f4*/}
.fileList li span {display:inline-block; overflow: hidden;  white-space: nowrap; width:100%; background:rgba(0,0,0,0.3); padding:5px}
.fileList li a.button {position:absolute; right:0px; top:0;/*transform: translateY(-50%);*/}
.fileList li div.photoThum {position:relative;border: 1px dashed #ccc; width:160px; height:150px; overflow:hidden; padding:10px}
.fileList li div.photoThum img {width:100%; position:absolute; left:50%; top:50%;transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%);}
.mbox {border-bottom:1px solid #f1f1f4; padding:1em 0}
.mblock-input {display:block; margin-bottom:5px}
.mblock-input>input.w150,.mblock-input>input.w200  {width:100% !important}
.form-group {display:flex; flex-flow:row wrap}
.form-group li:nth-of-type(2) {margin:0 5px}
.form-group select {border:none; min-width:100px}
.sns-group>div {position:relative;}
.inputW {position:relative}
.inputW input {padding-right:100px}
.inputW button {font-size:0.725rem; padding:0 1rem; border:2px solid #333; border-radius:30px; background:none; position:absolute; z-index:0; right:0; top:0; transform:translateY(0)}
.max400 {max-width:400px}
.max500 {max-width:500px}
.formBox {width:100%; margin-bottom:0.666em;border: 0px solid #ddd; padding: 20px 12px 6px 12px; background:#fff; border-radius:3px}
.formBox>label {
	font-family:var(--sub-font-L);
	font-size:var(--text-sm); 
	color:var(--color-6); 
	display:block
}
.formBox>input{width:100%; border:none; background:none}
.formBox input.form-control,textarea.form-control {
		width: 100%;
		padding: var(--margin-m) 0;
		border-radius:0;
		font-family:var(--sub-font-M);
		color: var(--color-3);
		outline: none;
		border:none;
		background-color:transparent;
		border-bottom: #ccc 1px solid;
		font-size: var(--text-xl);
		letter-spacing:-0.04em;
		transition: 0.5s all;
		resize: none;
		text-decoration:none
	}
	select.form-control {
		appearance: none;
		padding: 5px 6px;
		border-radius:0;
		outline: none;
		border:none;
		background-color:transparent;
		border-bottom: #ccc 1px solid;
		background-image: url(/wdyouth/images/contents/arrow-down-black.svg);
		background-size:10px;
		background-repeat: no-repeat;
		background-position: calc(100% - 10px) 12px;
		font-size:14px;
	}
	.formBox input.form-control:focus {
		border-color: #333;
	}
	.form-control::-webkit-input-placeholder {
		font-size:0.825rem;
		color: #999;
	}
	.form-control:-ms-input-placeholder {
		font-size:0.825rem;
		color: #999;
	}
	.form-control::placeholder {
		font-size:0.825rem;
		color: #999;
	}
	.fg-full-width {
		font-size:0.825rem;
		width: 100%;
	}
	textarea.form-control {
		font-size:0.825rem;
		height: 150px;
	}

/**Checkbox 공개 or 비공개 start**/
.cw-yesno-label-checkbox {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}
.cw-yesno-label-checkbox input {
	position: absolute;
	left: 0px;
	top: 0px;
	opacity: 0;
}
.cw-yesno-label-checkbox span{
  width: 60px;
  height: 30px;
  border: #ccc 2px solid;
  border-radius: 25px;
  cursor: pointer;
  position: relative;
  display: inline-block;
  margin: 0px 8px;
}
.cw-yesno-label-checkbox small {
    font-size: 12px;
    cursor: pointer;
}
.cw-yesno-label-checkbox span::after{
  content: '';
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: #000;
  display: block;
  position: absolute;
  top: 3px;
  left: 6px;
  transition: left .3s;
}
.cw-yesno-label-checkbox input:checked + span::after{
  left: calc(100% - 26px);
}

/**Checkbox Option 6 start**/
.cw-toggle-label-checkbox {position: relative;}
.cw-toggle-label-checkbox input {
	position: absolute;
	left: 0px;
	top: 0px;
	opacity: 0;
}
.cw-toggle-label-checkbox span{
  width: 80px;
  height: 30px;
  background-color: #ddd;
  border-radius: 25px;
  transition: background .6s;
  cursor: pointer;
  position: relative;
  display: inline-block;
}
.cw-toggle-label-checkbox span::after{
  content: '';
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: #fff;
  display: block;
  position: absolute;
  top: 5px;
  left: 6px;
  transition: left .3s;
}
.cw-toggle-label-checkbox input:checked + span{
  background: #333;
}
.cw-toggle-label-checkbox input:checked + span:before {
	display:inline-block; 
	content:"공개";
	color: #fff;
    text-align: center;
    position: absolute;
    left: 10px;
    line-height: 30px;
    font-size: 12px;
	}
.cw-toggle-label-checkbox input:checked + span::after{
  left: calc(100% - 26px);
}

/**box type **/
.infoBox {display:flex; flex-flow:row wrap;  padding:1rem;  border-bottom:1px solid #ccc;}
.inCntBox {
	position:relative; 
	background-color:#f8f8f8;
	padding:2rem; 
	border:1px solid #cfcfcf;
	border-radius: 60px 10px;
	box-shadow: 0px 20px 40px 0px rgba(179,191,203,0.2);
	margin-bottom:2rem
	}
.inCntBox:before {
	content:""; 
	width:calc(100% - 1px);
	height:100px;
	background:#333;
	position:absolute;
	left:1px;
	top:-4px;
	z-index:-1;
	border-radius: 60px 10px;
	}
/*.inCntBox:after {
	content:""; 
	position:absolute; 
	z-index:-1; 
	top:-5px; 
	left:-5px; 
	background:#fff; 
	border:10px solid var(--theme-color); 
	width:60px; 
	height:60px; 
	border-radius: 60px 10px;
	}*/
.inCntBox .CntTit {margin-bottom:1rem;}
.inCntBox .CntTit p {font-weight:300; font-size:0.825rem}
#contents>.inCntBox>.CntTit>h3 {position:relative; display:inline-block; font-size:1.5rem; line-height:1.3; font-weight:700; letter-spacing:-0.06em}
#contents>.inCntBox>.CntTit>h3:before{
	content: '';
    display: block;
	width:100%; 
    height: 40%;
    background-color: #fcf49f;
    border-radius: 12px;
	position:absolute;
	bottom:5px;
	left:0
	}
#contents>.inCntBox>.CntTit>h3>span {position:relative}

.inCntBox .CnCnt h4 {
	display:inline-block; 
	color:#f5f5f5; 
	background-color:#333; 
	border-radius: 12px 4px;
	height:30px;
	line-height:30px;
	padding:0 1rem;
	margin-bottom:0.666rem;
	}
.inCntBox .CnCnt  .bu li {position:relative; padding-left:120px; font-size:0.925em}
.inCntBox .CnCnt  .bu li b{display:inline-block; font-size:1em; width:100px; font-weight:300; position:absolute; left:10px; top:0px}
.inCntBox .CnCnt  .bu li p {display:inline-block; vertical-align:top}
.inCntBox .CnCnt dl dt {font-weight:300; font-size:0.925rem; color:#444; margin:1rem auto 0.666rem auto}
.inCntBox .CnCnt dl dd {position:relative; color:#555; padding-left:10px}
.inCntBox .CnCnt dl dd:before {
	content: ""; 
	width: 3px;
	height: 1px; 
	background: #999; 
	display:inline-block; 
	vertical-align:middle; 
	margin-right:1px;
	position:absolute; 
	left:0; 
	top:8px;
	}
.inCntBox .CnCnt p {margin-bottom:1rem; color:#555}
.arcInfo .infoBox dt,.arcInfo .infoBox dd {padding:0}
.arcInfo .infoBox dt {min-width:100px; font-size:12px; color:#666; font-weight:300}
.arcInfo .infoBox dd {width:calc(100% - 250px)}
.arcInfo .infoBox dd.tglW {width:150px}
.datepick {position:relative; max-width:300px}
.datepick:before {content:"\e9a4"; display:block; font-family: xeicon!important; position:absolute; right:1em; top:50%; transform:translateY(-50%)}
.uploadLOGO{display:flex; align-items:center; margin-top:5px}
.uploadLOGO .logoIMG {width:100%; text-align:center; padding:1em; border:1px solid #cdcdcd;}
.uploadLOGO .logoIMG img {max-width:150px}
.upload-box {
    max-width: 500px;
    width: 100%;
    height: 280px;
    border: #ccc 1px solid;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    background-color: #ededed;
    margin: auto;
    margin-top: 5%;
}
.upload-group {
  padding: 1rem 0;
  max-width:300px;
}
.inCntBox .CnCnt .ptgrid,.inCntBox .CnCnt .ptgrid-item {background:none; border:none; height:auto}
.inCntBox .CnCnt .ptgrid {}
.rowbu {display:flex; flex-flow:row wrap}
.rowbu li {position:relative; padding-left:90px;  padding-right:1rem; margin-bottom:0.333rem}
/*ul.rowbu li:after {
    content: "";
    width: 1px;
    height: 60%;
    background: #ccc;
    display: inline-block;
    vertical-align: middle;
    margin-right: 2px;
    position: absolute;
    right: 0;
    top: 50%;
	transform:translateY(-50%)
}*/
.rowbu li {width:100%}
.rowbu li b {
	display: inline-block;
	background-color:#222;
	border-radius: 0 10px 10px 10px;
	color:#fff;
	text-align:center;
    font-size: 0.825rem;
    width: 70px;
    font-weight: 300;
    position: absolute;
    left: 10px;
    top: 0px;
	

}

@media all and (min-width:640px){
	.rowbu li {width:calc(50% - 10px);}
}

@media all and (min-width:980px){
	.inCntBox {padding:3rem 3rem; margin-bottom:4rem}
	#contents>.inCntBox>.CntTit {margin-bottom:2rem}
	#contents>.inCntBox>.CntTit>h3 {font-size:2.125rem;}
	.inCntBox .CnCnt p {font-size:1.125rem}
}
@media all and (min-width:1000px){
	.rowbu li {width:calc(33.333% - 10px); max-width:400px}
}



/**Typeo CSS Start**/
/**Custom file upload**/
.fileupload {
    width: 100%;
    background-color: #e7e6e6;
    padding: 10px;
    border: #f5f5f5 1px solid;
    color: #333;
    position: relative;
}
.file-text {
    position: absolute;
    left: 0px;
    padding: 0px 40px 0px 10px;
    font-size: 0.725rem;
	color:#666;
    cursor: pointer;
    height: 100%;
    width: 100%;
    top: 0px;
    line-height: 44px;
    pointer-events: none;
    overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 1; /* number of lines to show */
   line-clamp: 1; 
   -webkit-box-orient: vertical;
}
.fileupload .fileupload-icon{
  position: absolute;
  right: 10px;
  top: 9px;
  bottom: 0px;
  margin: auto;
  pointer-events: none;

}
/**File size**/
.fileupload {
    width: 100%;
    background-color: #f7f7f7;
    padding: 10px;
}
.fileupload input[type="file"] {
    opacity: 0;
	padding:0;
	cursor:pointer
}

.fileupload input.upfile {width:100%}

.artInbox .fileupload { background:#eee}
.artInbox .upload-group {padding:1rem 12px}
.inBtnW {display:flex; justify-content:flex-end}
.inBtnW a:after {display:block; font-family: xeicon!important; color:#333; font-size:1.25rem}
.inBtnW a.delBtn:after {content:"\e96f";}
.inBtnW a span {display:none}
#uploadsize{
  display: block; 
  font-size: 14px; 
  color: red;
}
.artInbox { margin:1rem; }
.artInbox .Inbox{background:#f7f7f7; padding:1rem; border:1px solid #cdcdcd; border-radius:5px; margin-bottom:1rem}
.artInbox .formBox {background:transparent}

.telNum li {max-width:100px}
.addBtn {background-color:transparent; font-size:0.725rem; padding:0 1rem; margin:0.333rem auto; border:2px solid #333; border-radius:30px;}
.input-textarea {background:#f9f9f9; width:100%; border:1px solid #ccc; border-radius:5px;  padding:1rem; margin-top:1rem}
@media all and (min-width:768px){

.uploadLOGO>div {display:inline-block; vertical-align:top}
.uploadLOGO .logoIMG {width:200px; margin-right:2%;}
.uploadLOGO .filebox {width:calc(100% - 200px)}
}

@media all and (min-width:980px){
.arcInfo>dl.long>dt {position:absolute; }
.arcInfo>dl>dd,.arcInfo>dl.long>dd {padding:8px 6px 8px 120px;}
.mblock-input {display:inline-block}
.mblock-input>input.w150 {width:150px !important}
.mblock-input>input.w200  {width:200px !important}
.sns-group{justify-content:space-between}
.sns-group>div {width:48%}
}


/*실명인증*/
.input-group {display:table; width:100%; margin: .333em 0;}
.input-group>span {display:table-cell; vertical-align:top}
.input-group>span>input {width:100%; margin:0 !important; border-top-right-radius:0!important; border-bottom-right-radius:0!important}
.input-group>span:first-child {width:80%}
.input-group>span {width:20%}
.input-group>span a.phonebtn {display:block;  padding: 8px 12px; box-sizing:border-box; height:38px; color: #fff; background: #333; font-size:0.925em; letter-spacing:-1px;border-top-right-radius:4px!important;border-bottom-right-radius:4px!important; white-space:nowrap}

.lginSelect {position: relative;margin: 0 auto;border: 1px solid #ddd;overflow: hidden;}
.lginSelect [class*="certi"] {position: relative; box-sizing: border-box;margin: 4.166% 0 4.166% -1px;padding: 0 4.166%;border-left: 1px dotted #ccc;text-align:center;}
.lginSelect [class*="certi"] > i {display: inline-block;width: 140px;height: 140px;margin: 0 auto;background: url() no-repeat center center;background-image: url("");background-size: auto auto;background-size: contain; text-indent: -9999px;overflow: hidden;}
.lginSelect [class*="certi"] > i.ic1 {background-image: url(/wdyouth/images/common/phone.png);}
.lginSelect [class*="certi"] > i.ic2 {background-image: url(/wdyouth/images/common/ipin.png);}
.lginSelect [class*="certi"] > .btns { margin: 1.666em 0;}
@media all and (min-width:980px){
.input-group {width:50%}
}

/*검색박스*/
.search1select1 select {width:22%; margin:0}
.search1select1 input[type='text'] {width:40%;}
.search1select1 input[type='submit'] {width:14%;}

/*로그인*/
.login {max-width: 410px;margin: 40px auto;}


/*모달*/

/*상세화면*/
#detail_pop_up{position:fixed !important; display:none;}
#detail-button {cursor:pointer; color:#fff}
table #detail-button {display:flex; justify-content:center; align-items:center; color:#222}
.artinfoBox {width:94%; min-width:320px; max-width:700px; border-radius:5px; margin:0 auto; background:#fff; position:absolute; top:50% !important; left:50% !important; transform: translate(-50%,-50%); z-index:9001}
.rowBox {
	display:flex; 
	flex-flow:row wrap; 
	justify-content:space-between; 
	align-items:center;
	max-width:500px;
	margin:0 auto;
	}
.popupW div:nth-of-type(2) {margin-bottom:1.25rem !important}
.popupW .rowBox.bLind {border-bottom:1px dashed #ccc; padding:1rem 0}
.rowBox h4 {width:100%; font-size:12px; color:#ccc; margin-bottom:0.333rem}
.rowBox pre{
	white-space:pre-wrap; 
	font-family: 'Pretendard','Malgun Gothic','돋움'; 
	font-size:0.825em; 
	line-height:1.5em;
	color:#555; 
	font-weight:300
	}
#detail_pop_up .popupW {position:relative; width:100%; height:600px;  padding:1em; box-shadow:0 10px 20px rgba(0,0,0,0.15); overflow-y:scroll}
#detail_pop_up .popupW>.popup-close {box-shadow:none}
#detail_pop_up .popupW:before {background:none}

/*.popupW:before {content:""; position:absolute; left:0; top:0; z-index:8500; width:100%; height:50px; background:#1b355f url("/wdyouth/images/contents/popLogo.png") no-repeat 10px; 5px; background-size:95px }*/
#detail_pop_up .popupW {overflow-y: auto;}
#detail_pop_up .popupW .popup-close{position:absolute;  z-index: 9500; right:1em; top:1em; width:50px; height:50px; cursor:pointer;  line-height:50px; background:#fff; color:#333;  text-align:Center; font-size:14px;}
#detail_pop_up .popupW .popup-close span {background: #ccc;  width: 14px; height: 2px;display: block;margin: 7px 8px;border-radius: 35px; transition: all 0.3s cubic-bezier(0.81, -0.33, 0.345, 1.375);}
#detail_pop_up .popupW .popup-close span:nth-of-type(2) {position: relative;width: 30px;opacity: 0;}
#detail_pop_up .popupW .popup-close span:first-of-type {width: 30px;margin-top: 18px;transition: all 0.6s; transform: rotate(-45deg) translate(-4px, 8px);}
#detail_pop_up .popupW .popup-close span:last-of-type { position: relative;width: 30px;margin-top: 0;transform: rotate(45deg) translate(-4px, -8px);}

.moreBtn {display:flex; justify-content:center; margin-bottom:var(--secgap)}
.moreBtn a {display:block; padding:1rem;}
.moreBtn a p {display:block; margin-top:var(--padding-s)}
.moreBtn a p span {color:var(--color-9); font-size:var(--text-xs)}
.moreBtn a:before {
	content:""; 
	width:48px;
	height:48px;
	margin:0 auto;
	background-image:url("/wdyouth/images/common/chevrons-down.svg");
	background-repeat:no-repeat;
	background-size:cover;
	display:block; 
	transition:.2s ease-out; 
	-webkit-animation:balloon1 1.2s ease-in-out infinite; 
	-moz-animation:balloon1 1.2s ease-in-out infinite; 
	-o-animation:balloon1 1.2s ease-in-out infinite; 
	animation:balloon1 1.2s ease-in-out infinite; 

}
.moreBtn a:hover {border-color:#333}