@charset "UTF-8";

/****** KRDS 커스텀 ******/

/*** 서브콘텐츠 공통 커스텀 ***/
/** btn 커스텀_공통 **/
:root {
	--main-btn-color1: #0950a0;
	--main-btn-color2: #f3f9ff;
	--main-btn-color3: #433f94;
	--main-btn-color4: #f9f8ff;
	--main-btn-color5: #dd2959;
	--main-btn-color6: #fff7f9;
	--main-btn-color7: #454545;
	--main-btn-color8: #f6f6f6;
	--main-btn-color9: #f9fffd;
	--main-btn-color10: #078560;
	--attach-btn-color1: #de2a59;
	--attach-btn-color2: #4c4c4c;
	--attach-btn-color3: #444097;
	--attach-btn-color4: #008738;
	--attach-btn-color5: #495881;
	--attach-btn-color6: #dc4647;
}

#subContent .btn {
  position: relative;
  min-width:9.5rem;
  border-radius: 1rem;
  margin: 3px 1px;
  white-space: wrap;
  text-align: left;
  transition: all 0.2s ease;
}

#subContent .btn.lg {height: 5rem;}

#subContent .btn.sm {
  border-radius: 0.5rem;
}

#subContent .btn.ico-del::after,
#subContent .btn.ico-arr::after,
#subContent .btn.ico-external::after,
#subContent .btn.ico-down::after,
#subContent .btn.ico-more::after,
#subContent .btn.ico-view::after,
#subContent .btn.ico-print::after,
#subContent .btn.ico-arr2::after,
#subContent .btn.ico-check::after,
#subContent .btn.ico-star::after {
  width: auto;
  height: auto;
  background-image: none;
  margin-left: 2rem;
  font-family: 'remixicon';
  font-size:1.8rem;
}
#subContent .btn.ico-more::after {
  content:'\EA13';
}
#subContent .btn.ico-view::after {
  content:'\e950'; font-family: 'xeicon';
}
#subContent .btn.ico-print::after {
  content:'\F029';
}
#subContent .btn.ico-arr2::after {
  content:'\EA6C';;
}
#subContent .btn.ico-check::after {
  content:'\EB7B';;
}
#subContent .btn.ico-star::after {
  content:'\F18B';;
}
#subContent .btn.sm[class*=ico-]::after {
  font-size: 1.6rem;
}

/* 버튼 : 아이콘만 */
#subContent .btn.ico {padding: 0 !important; font-size: 0 !important; vertical-align: top; gap:0 !important; text-align: center;}

#subContent .btn-txt {min-width: auto;}
#subContent .btn-txt.sm {background-color: transparent !important;}
#subContent .btn-txt.sm[class*=ico-]::before, 
#subContent .btn-txt.sm[class*=ico-]::after {width: 2rem; height: 2rem;}
#subContent .btn-txt.ico-del::before, #subContent .btn-txt.ico-del::after {position: relative; opacity: 1; z-index: auto;}


/** btn 커스텀_대표(goeMain 클래스 하위) **/
#subContent.goeMain .btn {
  height: 5rem;
  font-size: 1.7rem;
  font-weight: 600;
}

#subContent.goeMain .btn.primary {
  background-color: var(--main-btn-color9);
  border: 1px solid var(--main-btn-color10);
  color:var(--main-btn-color10);
}
#subContent.goeMain .btn.primary:hover,
#subContent.goeMain .btn.primary:focus {
  background-color: var(--main-btn-color10);
  color:#fff;
}
#subContent.goeMain .btn.primary:active {
  background-color: var(--main-btn-color1);
  border-color: var(--main-btn-color1);
}

#subContent.goeMain .btn.secondary {
  background-color: var(--main-btn-color4);
  border: 1px solid var(--main-btn-color3);
  color: var(--main-btn-color3);
}
#subContent.goeMain .btn.secondary:hover,
#subContent.goeMain .btn.secondary:focus {
  background-color: var(--main-btn-color3);
  color: #fff;
}
#subContent.goeMain .btn.secondary:active {
  background-color: var(--main-btn-color3);
  border-color: var(--main-btn-color3);
}

#subContent.goeMain .btn.tertiary {
  width:100%; max-width:46rem;
  justify-content:start;
  border: 1px solid #dbdbdb;
  color: #444;
  height: 6rem;
  padding: 0 1.5rem;
  font-weight:400;
  color:#444;
  gap:0.8rem;
}
#subContent.goeMain .btn.tertiary::before {
	content:'\ECD3';
	font-family: 'remixicon';
	color:#fff;
	font-size:2rem;
	width: 3.8rem;
	line-height:3.8rem;
	text-align:center;
	border-radius:50%;
	background:var(--main-btn-color5);
}
#subContent.goeMain .btn.tertiary::after {
	position:absolute;
	right:1.5rem;
	content:'\EC5A';
	font-family: 'remixicon';
	color:#454545;
	font-size:1.6rem;
	display: inline-flex;
	width: 3.8rem;
	line-height:3.8rem;
	justify-content:center;
	border-radius:0.8rem;
	background:#fff;
	border:1px solid #dbdbdb;
}
#subContent.goeMain .btn.tertiary:hover::after,
#subContent.goeMain .btn.tertiary:focus::after {background: var(--main-btn-color5); border-color:var(--main-btn-color5); color:#fff;}
#subContent.goeMain .btn.tertiary:hover,
#subContent.goeMain .btn.tertiary:focus {
  background-color: var(--main-btn-color6);
  border-color: var(--main-btn-color5);
}
#subContent.goeMain .btn.tertiary:active {
  background-color: var(--main-btn-color6);
  border-color: var(--main-btn-color5);
}

#subContent.goeMain .btn.tertiary2 {
  background-color: var(--main-btn-color6);
  border: 1px solid var(--main-btn-color5);
  color: var(--main-btn-color5);
}
#subContent.goeMain .btn.tertiary2:hover,
#subContent.goeMain .btn.tertiary2:focus {background: var(--main-btn-color5); color:#fff;}
#subContent.goeMain .btn.tertiary2:active {
  background-color: var(--main-btn-color5);
  border-color: var(--main-btn-color5);
}

#subContent.goeMain .btn.fourth {
  background-color: var(--main-btn-color8);
  border: 1px solid var(--main-btn-color7);
  color: var(--main-btn-color7);
}
#subContent.goeMain .btn.fourth:hover,
#subContent.goeMain .btn.fourth:focus {background: var(--main-btn-color7); color:#fff;}
#subContent.goeMain .btn.fourth:active {
  background-color: var(--main-btn-color7);
  border-color: var(--main-btn-color7);
}

#subContent.goeMain .btn.sm {
  min-height: 4rem; height: auto; font-size: 1.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem;
}
#subContent.goeMain .bbs_ViewA .btn.sm {
    min-height: 3.5rem;
}

#subContent.goeMain .btn[class*=ico-]::after {font-weight:400;}
#subContent.goeMain .btn.ico-arr::after {
  content:'\EA6C';
}
#subContent.goeMain .btn.ico-external::after {
  content:'\EB87';
}
#subContent.goeMain .btn.ico-down::after {
  content:'\EC5A';
}
#subContent.goeMain .btn.ico-del::after {
  content:"\EC2A";
}

#subContent.goeMain .btn.ico {min-width: 4rem; max-width: 4rem; height:4rem !important; background:#e8e8e8; border:none;}
#subContent.goeMain .btn.ico::before {display:none;}
#subContent.goeMain .btn.ico::after {position:relative; display:block; right:auto !important; width:100%; border:none; background:transparent; margin-left:0; font-weight:400; color:#444;}
#subContent.goeMain .btn.ico:hover::after,
#subContent.goeMain .btn.ico:focus::after {color:#fff;}
#subContent.goeMain .btn.ico.ico-arr::after {
  content:'\EA6C' !important;
}
#subContent.goeMain .btn.ico.ico-external::after {
  content:'\EB87' !important;
}
#subContent.goeMain .btn.ico.ico-down::after {
  content:'\EC5A' !important;
}
#subContent.goeMain .btn.ico.ico-more::after {
  content:'\EA13' !important;
}


/** btn 커스텀_부속(goeAttach 클래스 하위) **/
#subContent.goeAttach .btn {
  height: 4.6rem;
  font-size: 1.8rem;
  font-weight: 500;
}
#subContent.goeAttach button.btn::before {content:''; position: absolute; right: 0; top:0; width: 100%; height: 100%; border-radius: 1rem 2rem 1rem 1rem; opacity: 0.1; z-index: -1; transition: all 0.2s ease;}
#subContent.goeAttach .btn:hover,
#subContent.goeAttach .btn:focus {border-top-right-radius: 2rem;}
#subContent.goeAttach .btn:hover::before,
#subContent.goeAttach .btn:focus::before {right: -0.5rem; top:-0.5rem;}

#subContent.goeAttach .btn.primary {
  background-color: var(--attach-btn-color1);
  border: 1px solid var(--attach-btn-color1);
}
#subContent.goeAttach .btn.primary:hover,
#subContent.goeAttach .btn.primary:focus {
  background-color: #ab0833;
  border-color: #ab0833;
  color:#fff;
}
#subContent.goeAttach .btn.primary:hover::before,
#subContent.goeAttach .btn.primary:focus::before {background: var(--attach-btn-color1);}
#subContent.goeAttach .btn.primary:active {
  background-color: #b10c35;
  border-color: #b10c35;
}

#subContent.goeAttach .btn.secondary {
  background-color: var(--attach-btn-color2);
  border: 1px solid var(--attach-btn-color2);
  color: #fff;
}
#subContent.goeAttach .btn.secondary:hover,
#subContent.goeAttach .btn.secondary:focus {
  background-color: #000;
  border-color:#000;
  color: #fff;
}
#subContent.goeAttach .btn.secondary:hover::before,
#subContent.goeAttach .btn.secondary:focus::before {background: var(--attach-btn-color2);}
#subContent.goeAttach .btn.secondary:active {
  background-color: #000;
  border-color: #000;
}

#subContent.goeAttach .btn.tertiary {
  border: 1px solid #676767;
  color: #3d3d3d;
}
#subContent.goeAttach .btn.tertiary:hover::before,
#subContent.goeAttach .btn.tertiary:focus::before {background: #676767;}
#subContent.goeAttach .btn.tertiary:hover,
#subContent.goeAttach .btn.tertiary:focus {
  background-color: #fff;
}
#subContent.goeAttach .btn.tertiary:active {
  background-color: #fff;
}

#subContent.goeAttach .btn.tertiary2 {
  background-color: var(--attach-btn-color3);
  border: 1px solid var(--attach-btn-color3);
  color: #fff;
}
#subContent.goeAttach .btn.tertiary2:hover,
#subContent.goeAttach .btn.tertiary2:focus {background: #0e0a54; border-color:#0e0a54;}
#subContent.goeAttach .btn.tertiary2:hover::before,
#subContent.goeAttach .btn.tertiary2:focus::before {background: var(--attach-btn-color3);}
#subContent.goeAttach .btn.tertiary2:active {
  background-color: #0e0a54;
  border-color: #0e0a54;
}

#subContent.goeAttach .btn.fourth {
  background-color: var(--attach-btn-color4);
  border: 1px solid var(--attach-btn-color4);
  color: #fff;
}
#subContent.goeAttach .btn.fourth:hover,
#subContent.goeAttach .btn.fourth:focus {background: #014d1f; border-color:#014d1f;}
#subContent.goeAttach .btn.fourth:hover::before,
#subContent.goeAttach .btn.fourth:focus::before {background: var(--attach-btn-color4);}
#subContent.goeAttach .btn.fourth:active {
  background-color: #014d1f;
  border-color: #014d1f;
}

#subContent.goeAttach .btn.fifth  {
  background-color: var(--attach-btn-color5);
  border: 1px solid var(--attach-btn-color5);
  color: #fff;
}
#subContent.goeAttach .btn.fifth :hover,
#subContent.goeAttach .btn.fifth :focus {background: #28365d; border-color:#28365d;}
#subContent.goeAttach .btn.fifth :hover::before,
#subContent.goeAttach .btn.fifth :focus::before {background: var(--attach-btn-color5);}
#subContent.goeAttach .btn.fifth :active {
  background-color: #28365d;
  border-color: #28365d;
}
#subContent.goeAttach .btn.sixth  {
  background-color: var(--attach-btn-color6);
  border: 1px solid var(--attach-btn-color6);
  color: #fff;
}
#subContent.goeAttach .btn.sixth :hover,
#subContent.goeAttach .btn.sixth :focus {background: #a6292a; border-color:#a6292a;}
#subContent.goeAttach .btn.sixth :hover::before,
#subContent.goeAttach .btn.sixth :focus::before {background: var(--attach-btn-color6);}
#subContent.goeAttach .btn.sixth :active {
  background-color: #a6292a;
  border-color: #a6292a;
}

#subContent.goeAttach .btn.sm {
  min-height: 3.5rem; height: auto;
  background-color: #fff !important;
  font-size: 1.5rem;
  padding-top: 0.5rem; padding-bottom: 0.5rem;
}

#subContent.goeAttach .btn.sm:hover,
#subContent.goeAttach .btn.sm:focus {border-top-right-radius: 1.5rem;}
#subContent.goeAttach .btn.sm::before {border-radius: 0.5rem 1.5rem 0.5rem 0.5rem;}

#subContent.goeAttach .primary.sm {color:var(--attach-btn-color1);}
#subContent.goeAttach .primary.sm:hover,
#subContent.goeAttach .primary.sm:focus {color:var(--attach-btn-color1);}
#subContent.goeAttach .secondary.sm {color:var(--attach-btn-color2);}
#subContent.goeAttach .secondary.sm:hover,
#subContent.goeAttach .secondary.sm:focus {color:var(--attach-btn-color2);}
#subContent.goeAttach .tertiary2.sm {color:var(--attach-btn-color3);}
#subContent.goeAttach .tertiary2.sm:hover,
#subContent.goeAttach .tertiary2.sm:focus {color:var(--attach-btn-color3);}
#subContent.goeAttach .fourth.sm {color:var(--attach-btn-color4);}
#subContent.goeAttach .fourth.sm:hover,
#subContent.goeAttach .fourth.sm:focus {color:var(--attach-btn-color4);}

#subContent.goeAttach .btn.ico-down { text-align: left; }

#subContent.goeAttach .btn.ico-arr::after {
  content:'\EA6E';
}
#subContent.goeAttach .btn.ico-external::after {
  content:'\ECAF';
}
#subContent.goeAttach .btn.ico-down::after {
  content:'\EC54';
}

#subContent.goeAttach .btn.ico {min-width: 3.5rem; height:3.5rem; border-radius: 50%;}
#subContent.goeAttach .btn.ico::after {margin-left: 0;}


/** 라디오버튼 커스텀 **/
#subContent .chk-area {display: inline-flex; flex-wrap: wrap; gap: 1rem var(--krds-spacer-6);}
#subContent .form-check input[type=radio]:checked ~ label:before {border-color: #dd2959;}
#subContent .form-check input[type=radio]:checked ~ label:after {background-color: #dd2959;}

/** 체크박스 커스텀 **/
.form-check input[type=checkbox]:checked ~ label:before {background-color: #dd2959; border-color: #dd2959;}

/** input 커스텀 **/
#subContent .form-group .form-conts.frow {flex-direction: row; align-items: center; background: var(--krds-white); border: 1px solid #cbcbcb; color:#555; padding-right: 1rem;}
#subContent .form-group .form-conts.frow .form-control {border:none; height: 3.6rem;}
#subContent .form-group .form-conts.frow2 {flex-direction: row; align-items: center; white-space:nowrap;}
#subContent .form-control, 
#subContent .form-select {border-radius: 0; border-color: #cbcbcb; height: 3.8rem; font-size: 1.5rem; background-color:#fff;}
#subContent .form-control[disabled] {background-color: #f8f8f8;}
#subContent textarea.form-control {height: 18rem;}
#subContent .datepicker-input .form-btn-datepicker {display: flex; align-items: center; justify-content: center; color:#666;}
#subContent .flexItem {display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:1rem;}


/** select 커스텀 **/
.form-select {
  border-radius: 0;
}
#subContent .select-group {display: flex; flex-wrap: wrap; gap: 1rem;}
#subContent .select-group > li {flex: 1; min-width: 20rem;}


/** 날짜입력 필드 커스텀 **/
#subContent .datepicker-wrap .datepicker-tbl-wrap .datepicker-tbl th, 
#subContent .datepicker-wrap .datepicker-tbl-wrap .datepicker-tbl td {
	border:none;
	padding-left:0;
	padding-right:0;
	padding-bottom:0;
	background:none;
}

/** 파일 업로드 커스텀 **/
#subContent .file-upload-result {display: flex; flex-wrap: wrap;}
#subContent .file-upload-result .upload-top {flex: 1; order: -1;}
#subContent .file-upload-result .upload-list {width: 100%; margin-top: var(--krds-spacer-2);}
#subContent .file-upload-result .upload-list .in > div {align-items: center;}
#subContent .file-upload-result .upload-delete-btn {order:-1; line-height: 1;}

/** 페이지네이션 커스텀 **/
#subContent .pagination .page-navi.prev,
#subContent .pagination .page-navi.next {
  min-width: 4rem; border-radius: 50%; border:1px solid #cbcbcb; font-size: 0; padding: 0;
}
#subContent .pagination .page-links .page-link {font-size: 1.4rem;}
#subContent .pagination .page-links .page-link.active {border-radius: 50%; background-color: #da2455;}

/** 모달 커스텀 **/
#subContent .modal .modal-dialog .modal-content {border-radius: 2rem; border: 1px solid #d4d8dd; box-shadow: 5px 5px 5px rgb(0,0,0,0.1);}
#subContent .modal .modal-dialog .modal-header {padding: 2.5rem 6.8rem 1rem 2rem;}
#subContent .modal .modal-dialog .modal-conts {padding: 0 2rem;}
.modal .modal-dialog .btn-close {background-size: 2.4rem;}

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

@media screen and (max-width: 600px){	
  .form-check input[type=radio] ~ label, .form-check input[type=checkbox] ~ label {font-size:1.5rem;}
  
  #subContent .btn.md {font-size:1.6rem;}
}

@media screen and (max-width: 580px){
  #subContent.goeMain .btn { height: auto; white-space: wrap; padding: 0.8rem var(--krds-btn-px-lg);}
  #subContent.goeAttach .btn { height: auto; white-space: wrap; padding: 0.8rem var(--krds-btn-px-lg);}
}

@media screen and (max-width: 350px){
  /* btn 커스텀 */
  #subContent .btn {
    min-width:100%;
  }
  
  #subContent.goeMain .btn {
    font-size: 1.6rem;
  }
  #subContent.goeAttach .btn {
    font-size: 1.6rem;
  }
  #subContent.goeMain .btn.tertiary {height:5rem;}
  #subContent.goeMain .btn.tertiary::after {right:1rem;}
  #subContent.goeMain .btn.lg {font-size: 1.6rem;}
  #subContent.goeMain .btn.sm {height: auto; font-size: 1.5rem;}

  #subContent.goeAttach .btn.lg {font-size: 1.7rem;}
  #subContent.goeAttach .btn.sm {height: auto; font-size: 1.5rem;}

  #subContent .btn.ico-arr,
  #subContent .btn.ico-external,
  #subContent .btn.ico-down,
  #subContent .btn.ico-more,
  #subContent .btn.ico-del {
    justify-content: space-between;
  }
  #subContent .btn.ico-arr::after,
  #subContent .btn.ico-external::after,
  #subContent .btn.ico-down::after,
  #subContent .btn.ico-more::after,
  #subContent .btn.ico-del::after {
    font-size:1.6rem;
  }

  /* 버튼 : 아이콘만 */
  #subContent .btn.ico {justify-content: center;}
}