@charset "utf-8";

.btn-box {width: 100%; display: flex}
.btn-box.align-center {justify-content: center}
.btn-box.align-right {justify-content: flex-end}
.btn-box.align-between {justify-content: space-between}

.btn {letter-spacing: -1.5px; display: flex; align-items: center; justify-content: center; transition: .6s; margin: 0 10px 0 0}
.btn:last-child {margin: 0}
.btn.blue01 {height: 60px; font-size: 20px; font-weight: 600; color: #fff; background: #0a1e5a; border: 1px solid #0a1e5a; padding: 0 100px}
.btn.blue01:hover {color: #0a1e5a; background: none}
.btn.red01 {height: 60px; font-size: 20px; font-weight: 600; color: #fff; background: #fa002d; border: 1px solid #fa002d; padding: 0 100px}
.btn.red01:hover {color: #fa002d; background: none}
.btn.gray01 {height: 60px; font-size: 20px; font-weight: 600; color: #fff; background: #b4b4b4; border: 1px solid #b4b4b4; padding: 0 60px}
.btn.gray01:hover {color: #b4b4b4; background: none}
.btn.gray02 {height: 60px; font-size: 20px; font-weight: 600; color: #fff; background: #646464; border: 1px solid #646464; padding: 0 60px}
.btn.gray02:hover {color: #646464; background: none}
.btn.gray03 {height: 40px; font-size: 16px; font-weight: 600; color: #fff; background: #646464; border: 1px solid #646464; padding: 0 40px}
.btn.gray03:hover {color: #646464; background: none}

@media screen and (max-width: 1080px) {
	.btn.blue01 {height: 50px; font-size: 16px; padding: 0 60px}
	.btn.gray01 {height: 50px; font-size: 16px; padding: 0 60px}
	.btn.gray02 {height: 50px; font-size: 16px; padding: 0 60px}
}
@media screen and (max-width: 640px) {
	.btn.blue01 {width: 100%; height: 40px; font-size: 14px; padding: 0}
	.btn.gray01 {width: 100%; height: 40px; font-size: 14px; padding: 0}
	.btn.gray02 {width: 100%; height: 40px; font-size: 14px; padding: 0}
}

.input {
    display: inline-flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    margin: 0;
    outline: none;
    border: 1px solid #d2d2d2;
    width: auto;
    height: 50px;
    padding: 0 8px;
    background-color: #fff;
    color: #000;
    font-family: 'S-CoreDream', 'serif';
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.5px;
    transition: all 0.4s;
	line-height: normal;
  }

  .input:hover {
    border: 1px solid #0a1e5a;
  }

  .input:focus {
    border: 1px solid #0a1e5a;
  }

  .select {
    appearance: none;
    -webkit-appearance: none;
    display: inline-block;
    position: relative;
    margin: 0;
    outline: none;
    border: 1px solid #d2d2d2;
    width: auto;
    height: 50px;
    line-height: 1;
    padding: 0 8px;
    background-color: #fff;
    background-image: url(../../../../imgs/diagnosis/arw-bottom.svg);
    background-image: url(../../../../imgs/diagnosis/arw-bottom.png) \0/IE8 +9;
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    color: #000;
    font-family: 'S-CoreDream', 'serif';
    font-size: 16px;
    font-weight: 400;
    transition: all .4s;
    cursor: pointer;
	line-height: normal;
  }

  @media screen and (-ms-high-contrast:active) , ( -ms-high-contrast :none) {
    .select {
      background-image: url(../../../../imgs/arw-bottom.svg);
    }
  }

  .select:hover, .select:focus {
    border-color: #0a1e5a;
    background-image: url(../../../../imgs/diagnosis/arw-bottom.svg);
    background-image: url(../../../../imgs/diagnosis/arw-bottom.svg) \0/IE8 +9;
  }

  .select:focus {
    border: 1px solid #0a1e5a;
  }

  @media screen and (-ms-high-contrast:active) , ( -ms-high-contrast :none) {
    .select:hover, .select:focus {
      background-image: url(../../../../imgs/diagnosis/arw-bottom.svg);
    }
  }

  .select::-ms-expand {
    display: none
  }

  .select.select--time {
    width: 6rem;
    min-width: auto;
    max-width: none
  }

  .textarea {
    display: inline-block;
    position: relative;
    margin: 0;
    outline: none;
    border: 1px solid #d2d2d2;
    width: 100%;
    min-height: 8rem;
    line-height: 1.6;
    padding: 8px;
    background-color: #fff;
    color: #000;
    font-family: 'S-CoreDream', 'serif';
    font-size: 16px;
    font-weight: 400;
    transition: all .4s;
  }

  .textarea:hover {
    border: 1px solid #0a1e5a;
  }

  .textarea:focus {
    border: 1px solid #0a1e5a;
  }

 @media screen and (max-width: 768px) {
 	.input, .select, .textarea {font-size: 14px}
 }
 @media screen and (max-width: 480px) {
	.input, .select {padding: 0 4px}
	.input, .select, .textarea {font-size: 12px}
	.select {
	    background-position: right 6px center;
	    background-size: 10px;
	}
}




/* CHECK EFFECT */
input[type="radio"],
input[type="checkbox"] {position: absolute; opacity: 0; cursor: pointer; width: 0; height: 0}
label:hover input[type="radio"] ~ .checkmark,
label:hover input[type="checkbox"] ~ .checkmark {border-color: #0a1e5a}
input[type="radio"]:checked ~ .checkmark,
input[type="checkbox"]:checked ~ .checkmark {background-color: #0a1e5a; border-color: #0a1e5a}
.checkmark {width: 40px; height: 40px; background-color: #fff; border: 1px solid #d2d2d2; position: absolute; top: 0; left: 0; transition: .4s}
.checkmark.rd {border-radius: 50%; top: 0; left: 50%; transform: translateX(-50%)}
.checkmark::after {content: ''; position: absolute; display: none}
input[type="radio"]:checked ~ .checkmark::after,
input[type="checkbox"]:checked ~ .checkmark::after {display: block}
.checkmark::after {width: 8px; height: 18px; border: solid white; border-width: 0 4px 4px 0; top: 5px; left: 13px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg)}
@media screen and (max-width: 768px) {
	.checkmark {width: 30px; height: 30px}
	.checkmark::after {width: 5px; height: 10px; border-width: 0 3px 3px 0; top: 6px; left: 10px}
}



.form-area .form-line {width: 100%; display: flex; justify-content: space-between; margin: 0 0 20px}
.form-area .form-line:last-child {margin: 0}
.form-area .form-line .form {width: 100%}
.form-area .form-line .form.half {width: calc(50% - 15px)}
.form-area .form-line .form label {font-size: 18px; font-weight: 600; line-height: 1; display: flex; margin: 0 0 10px; cursor: default; position: relative}
.form-area .form-line .form label::after {content: ''; display: block; clear: both}
.form-area .form-line .form label span {margin: 0 0 0 3px}
.form-area .form-line .form input,
.form-area .form-line .form select {width: 100%; height: 40px}
.form-area .form-line .form .array {width: 100%; display: flex}
.form-area .form-line .form .array .w01 {width: calc(50% - 15px)}
.form-area .form-line .form .array .w02 {width: calc(((50% - 15px) / 2) - 5px); margin: 0 10px 0 0}
.form-area .form-line .form .array .w02:last-child {margin: 0}
.form-area .form-line .form .array .w03 {width: calc((100% / 3) - (40px / 3))}
.form-area .form-line .form .btw1 {width: 30px; height: 40px; font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center}
.form-area .form-line .form .btw2 {width: 20px; height: 40px; font-size: 18px; display: flex; align-items: center; justify-content: center}
@media screen and (max-width: 1080px) {
	.form-area .form-line .form.half {width: calc(50% - 10px)}
	.form-area .form-line .form label {font-size: 16px}
	.form-area .form-line .form .array .w02 {width: calc(((50% - 12px) / 2) - 4px); margin: 0 8px 0 0}
	.form-area .form-line .form .btw1 {width: 24px; font-size: 16px}
	.form-area .form-line .form .btw2 {font-size: 16px}
}
@media screen and (max-width: 768px) {
	.form-area .form-line {margin: 0 0 12px}
	.form-area .form-line.mb20 {margin: 0 0 20px}
	.form-area .form-line .form.half {width: calc(50% - 6px)}
	.form-area .form-line .form label {font-size: 14px; margin: 0 0 8px}
	.form-area .form-line .form .btw1 {font-size: 14px}
	.form-area .form-line .form .btw2 {font-size: 14px}
}
@media screen and (max-width: 640px) {
	.form-area .form-line .form input,
	.form-area .form-line .form select {height: 32px}
	.form-area .form-line .form .btw1 {height: 32px}
	.form-area .form-line .form .btw2 {height: 32px}
}
@media screen and (max-width: 480px) {
	.form-area .form-line {display: inline-block}
	.form-area .form-line .form.half {width: 100%; margin: 0 0 12px}
	.form-area .form-line .form.half:last-child {margin: 0}
	.form-area .form-line .form label {font-size: 12px; margin: 0 0 4px}
	.form-area .form-line .form .array .w01 {width: calc(40% - 12px)}
	.form-area .form-line .form .array .w02 {width: calc(((60% - 12px) / 2) - 4px); margin: 0 8px 0 0}
}