@charset "UTF-8";

/* 입력란 */
input[type="text"],
input[type="password"] {
  box-sizing: border-box;
  height: 34px;
  padding: 5px 15px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #e7e7e7;
  border-radius: 5px;
  outline: none;
  font-size: 18px;
  color: #5e5e5e;
}

input[type="text"]::placeholder,
input[type="password"]::placeholder {
  color: #cacaca;
}

input[type="text"]:focus,
input[type="password"]:focus {
  box-shadow: 0 0 0 1px #3abff1;
}

input[type="text"]:disabled {
  color: #aaa;
}

/* 체크박스 */
input[type="checkbox"] {
  width: 16px;
  height: 16px;
  appearance: none;
  border: 1px solid #d1d1d1;
  margin: 0 2px 4px 0;
  vertical-align: middle;
  border-radius: 4px;
  cursor: pointer;
}

input[type='checkbox']:checked {
  background-color: #3abff1;
  background-image: url(/public/resource/images/checkbox_checked.png);
  background-size: 10px 8px;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid #34add9;
}

/* button */
.btn_wrap {
  display: flex;
  grid-column-gap: 10px;
}

button, .btn {
  box-sizing: border-box;
  padding: 13px 0;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  background-color: #3abff1;
  color: #fff;
}

.btn.basic {
  border: 1px solid #5e5e5e;
  background-color: #fff;
  color: #5e5e5e;
}

.btn.delete {
  background-color: #5e5e5e;
  color: #fff;
}

/* images */
/* logo */
.logo {
  background: url(/public/resource/images/logo.png) center / contain no-repeat;
}

.logo_white {
  background: url(/public/resource/images/logo_khp_white.png) center / contain no-repeat;
}

.logo_chungchy {
  background: url(/public/resource/images/logo_chungchy.png) center / contain no-repeat;
}

/* sprite*/
.spr {
  display: block;
  background-image: url(/public/resource/images/sprite_main.png);
}

.spr.select_arrow2 {
  width: 10px;
  height: 9px;
  background-position: bottom -2px left -81px;
}

.spr.arrow_pre {
  width: 29px;
  height: 32px;
  background-position: top -166px left -61px;
}

.spr.arrow_next {
  width: 29px;
  height: 32px;
  background-position: top -166px left -100px;
}

.spr.table_tap.act {
  width: 177px;
  height: 41px;
  background-position: top -1px left -1px;
  color: #fff;
}

.spr.table_tap {
  width: 177px;
  height: 41px;
  background-position: top -52px left -1px;
}

/* sprite sub*/
.spr_sub {
  display: block;
  background-image: url(/public/resource/images/sprite_sub.png);
}

.spr_sub.triangle_bottom {
  width: 33px;
  height: 17px;
  background-position: top 0 left 0px;
}

.spr_sub.ribbon {
  width: 152px;
  height: 46px;
  background-position: top 0 left -43px;
}

.spr_sub.balloonTip {
    width: 227px;
    height: 23px;
    background-position: top -56px left -114px;
}

/* select */
.dropdown_select {
  position: relative;
  border-radius: 5px;
}

.dropdown_select>span {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #e2e2e2;
  border-left: none;
  border-radius: 0 5px 5px 0;
}

.dropdown_select select {
  position: relative;
  appearance: none;
  background: none;
  outline-style: none;
  width: 100%;
  height: 100%;
  border: 1px solid #bfbfbf;
  border-radius: 5px;
  font-size: 16px;
  text-indent: 16px;
  color: #5e5e5e;
  cursor: pointer;
}

/* login, join - content_wrap */
.content_wrap {
  width: 590px;
  box-sizing: border-box;
  padding: 54px 50px;
  border-radius: 10px;
  box-shadow: 0px 3px 4px 1px rgba(0, 0, 0, 0.24);
  margin: 100px auto 100px;
}

.content_wrap h1.title {
  font-size: 50px;
  font-weight: 800;
  margin-bottom: 30px;
}

.content_wrap p {
  font-size: 20px;
  line-height: 1.5;
}

.content_wrap form input[type="text"],
.content_wrap form input[type="password"],
.my_page.contents.setting input {
  width: 100%;
  height: 39px;
  margin-bottom: 28px;
}

.content_wrap form input+span,
.popup input+span,
.my_page.contents.setting input+span,
section.join input[type='checkbox']+label+span {
  display: none;
  margin-left: 6px;
  margin-bottom: 6px;
  color: red;
  font-size: 16px;
}

.content_wrap form input.act:not(input[type="checkbox"]),
.popup input[type="text"].act,
.my_page.contents.setting input.act {
  margin-bottom: 2px;
  border-color: red;
}

.content_wrap form input.act+span,
.popup input[type="text"].act+span,
section.join input[type='checkbox'].act+label+span {
  display: block;
}

.content_wrap .btn {
  width: 100%;
}

/* sub page - title wrap */
section.title_wrap {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 250px;
}

section.my_page.title_wrap {
  background-image: url(/public/resource/images/bg_titleMyPage.png);
}

section.title_wrap>div {
  background-color: #00000090;
  height: 100%;
}

section.title_wrap .title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  font-size: 50px;
}

section.title_wrap .detail {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background-color: #00000050;
}

section.title_wrap .detail a {
  width: auto;
  height: auto;
  font-size: 18px;
  margin: 0 30px;
}

section.title_wrap .detail a.act {
  color: #fee600;
}

/* sub page - subheading */
.subheading {
  font-size: 16px;
  color: #999;
  font-weight: 400;
  border-bottom: 1px solid #eaeaea;
  padding: 56px 0 9px;
  margin: 0 auto 40px;
}

.subheading span {
  font-size: 35px;
  margin-right: 16px;
}

/* landing - section title */
.inset_shadow {
  box-shadow: 0 -8px 8px -8px #00000050 inset, 0 8px 8px -8px #00000050 inset;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.spr_sub.triangle_bottom {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -16.5px;
  z-index: 10;
}

article.landing {
  padding-bottom: 0;
}

.landing .title {
  position: relative;
  text-align: center;
}

.landing .title h2 {
  font-size: 34px;
  margin-bottom: 5px;
  font-weight: 800;
}

.landing .title h2 b {
  color: #fee600;
  font-weight: inherit;
}

.landing .title p {
  font-size: 20px;
}

/* pop up */
.popup_bg {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

.popup {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 15px;
  padding: 50px;
  line-height: 1.5;
}

.popup i {
  font-size: 60px;
}

.popup ins {
  text-decoration: none;
  width: 50px;
  height: 50px;
  border: 5px solid #fdcc00;
  border-radius: 30px;
  font-size: 40px;
  font-weight: 900;
  color: #fff;
  text-align: center;
  line-height: 50px;
  margin-bottom: 10px;
}

.popup.book1 ins {
  background-color: #e50112;
}

.popup.book2 ins {
  background-color: #0a872e;
}

.popup.book3 ins {
  background-color: #0158a6;
}

.popup b {
  font-size: 20px;
  font-weight: 850;
}

.popup p {
  max-width: 660px;
  max-height: 500px;
  font-size: 20px;
  text-align: center;
  margin: 30px 0 40px;
  overflow-y: auto;
}

.popup p.left {
  text-align: left;
}

.popup p input {
  display: block;
  margin: 0 auto;
  margin-top: 20px;
}

.popup button {
  width: 110px;
  font-size: 18px;
  padding: 10px 0;
}

/* font color */
.lightgray {
  color: #d6d6d6;
}

.gray {
  color: #727272;
}

.gray2 {
  color: #818182;
}

.white {
  color: #fff;
}

.blue2 {
  color: #3abff1;
}

/* bg color */
.bg_blue {
  background-color: #3ac0f2;
}

.bg_blue4 {
  background-color: #3abff1;
}

.bg_skyblue {
  background-color: #def7ff;
}

.bg_lightgray1 {
  background-color: #f2f2f2;
}

.bg_lightgray2 {
  background-color: #f1f1f1;
}

.bg_darkgray {
  background-color: #5e5e5e;
}

.bg_white {
  background-color: #fff;
}