@charset "UTF-8";

/*! base.css 파일은 해당 프로젝트 내에서 바탕이 되는 레이아웃, 스타일링을 정의 */

/**
 * 폰트 사이즈를 rem 단위로 작성하기 위함.
 * 24px 을 주고 싶을 때, 별도의 계산 없이 2.4rem 으로 입력 가능
 */

html {
  font-size: 62.5%;
}

/**
 * 스크린 리더가 읽되, 화면상에서 보이지 않게 할 때. 
 */

.screen_out {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
}

/**
 * 해당 프로젝트 메인 레이아웃 규격
 */

.l_inner {
  width: 1280px;
  margin: 0 auto;
}

/**
 * 1줄 말줄임 처리
 */
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/**
 * 2줄 말줄임 처리 (IE 에 맞추어서 해야됨)
 */

.multi_line_ellipsis {
  
}

/**
 * slick 커스텀
 */
.slick-track {
  margin-left: 0 !important;
}
.slick-prev, .slick-next {
  width: 48px;
  height: 48px;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 100;
}
.slick-prev {
  left: -40px;
  transform: translate(0, -50%) rotate(180deg);
  background-image: url('/imgs/icons/outline/48_angle_right.svg');
}
.slick-next {
  right: -40px;
  background-image: url('/imgs/icons/outline/48_angle_right.svg');
}
.slick-slider .slick-prev:before, 
.slick-slider .slick-next:before {
  content: '';
}

/**
 * 디자인 공통 가이드 정의
 */


/* button */
.wrap_btn {
  display: flex;
  justify-content: center;
}
.btn {
  width: 100%;
  height: 72px;
  border-radius: 4px;
  font-size: 1.6rem;
}
.btn_confirm_close {
  background-color: #f00;
  color: #fff;
}
.btn_confirm {
  background-color: #f00;
  color: #fff;
}
.btn_confirm.disabled { 
  background-color: #666;
  color: #444;
}
.btn_confirm.outline {
  border: 1px solid #f00;
  background-color: transparent;
  color: #f00
}
.btn_cancel {
  border: 1px solid #666;
  color: #dedede;
}
.btn.outline {
  border: 1px solid #666;
  color: #dedede;
}
.btn.outline:hover {
  border: 1px solid #dedede;
  color: #fff;
}


/* input */
.ipt {
  width: 100%;
  height: 56px;
  padding: 15px 16px 17px;
  border: 1px solid #2f2f2f;
  border-radius: 4px;
  font-size: 1.6rem;
  background-color: transparent;
  color: #dedede;
}
.ipt::placeholder {
  color: #888;
  font-size: 1.6rem;
}
.ipt:focus::placeholder {
  color: #dedede
}
.ipt.disabled {
  background-color: #666;
  border-color: #666;
  color: #444;
}

/* checkbox */
input[type="checkbox"] {
  display: none;
}
.wrap_checkbox label + label {
  margin-left: 16px;
}
.wrap_checkbox span {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  color: #888;
  cursor: pointer;
}
.wrap_checkbox span::before {
  content: '';
  width: 24px;
  height: 24px;
  margin-right: 8px;
  background: url('/imgs/icons/outline/24_box.svg') no-repeat center / 100%;
}
.wrap_checkbox input[type="checkbox"]:checked + span::before {
  background-image: url('/imgs/icons/outline/24_check box.svg');
}

/* icon */
.icon_16 {
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
}
.icon_20 {
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
}
.icon_24 {
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
}
.icon_28 {
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
  background-position: center;
}
.icon_48 {
  width: 48px;
  height: 48px;
  background-repeat: no-repeat;
  background-position: center;
}


/* Dropdown */
/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  font-size: 1.6rem;
  color: #dedede;
}
/* Dropdown Content (Hidden by Default) */
.dropdown_list {
  display: none;
  position: absolute;
  padding: 8px 0;
  border-radius: 4px;
  border: solid 1px #2f2f2f;
  background-color: #141414;
  z-index: 1;  
}
/* Links inside the dropdown */
.dropdown_list li {
  padding: 12px 20px;
}
/* Change color of dropdown links on hover */
.dropdown_list li:hover {
  background-color: #212121
}
/* Show the dropdown menu (use JS to add this class to the .dropdown_list container when the user clicks on the dropdown button) */
.show {display:block;}

/* Dropdown Button */
.dropdown .btn_drop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 58px;  
  padding: 17px 20px;
  border-radius: 4px;
  border: 1px solid #2f2f2f;
  font-size: 1.6rem;
  color: #dedede;
}
.dropdown .btn_drop .icon_arrow {
  margin-left: 20px;
  background-image: url('/imgs/icons/outline/16_angle_down.svg');
}