@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

/* default */
* {
  margin: 0;
  padding: 0;
  word-wrap: break-word;
  word-break: keep-all;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -o-text-size-adjust: none;
  -ms-text-size-adjust: none;
  text-size-adjust: none;
  font-family: 'Noto Sans KR', sans-serif;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

html,
body {}

body {
  position: relative;
  font-size: 16px;
  color: #333333;
  line-height: 1.5;
  font-family: 'Noto Sans KR', sans-serif;
}

body.white {
  color: #ffffff;
}

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
address,
em,
img,
strong,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
input,
textarea,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
header,
footer,
nav,
menu,
section,
article,
aside,
main,
video {
  margin: 0;
  padding: 0;
  border: 0;
}

header,
footer,
section,
article,
aside,
nav,
main,
details,
menu,
figure,
figcaption,
video {
  display: block;
}

table {
  border-collapse: collapse;
  word-wrap: break-word;
  word-break: break-all;
}

caption {
  position: absolute;
  top: -9999px;
  left: -9999px;
  width: 0;
  height: 0;
  overflow: hidden;
  /*visibility:hidden;*/
  font-size: 0;
  line-height: 0;
}

table th {}

table td {}

ol,
ul,
li {
  list-style: none outside none;
}

a {
  text-decoration: none;
  color: #484747;
}

a:hover,
a:visited {
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
}

img {
  border: 0 none;
  vertical-align: top;
}

form input,
form select,
form label,
form img {
  vertical-align: middle;
}

fieldset {
  border: 0 none;
}

fieldset legend {}

em,
address {
  font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

strong,
.strong {
  font-weight: bold !important;
}

mark {
  background: none;
}

iframe {
  margin: 0;
  padding: 0;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

input[type="text"],
input[type="password"] {}

input[type="text"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="password"] {
  -webkit-appearance: none;
  border-radius: 0;
  font-size: 12px;
  background: transparent;
}

input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

input[type="search"]::-ms-clear {
  display: none;
}

/*select {font-size:15px;height: 36px;padding: 0 25px 0 13px;border: 1px solid #ddd;background: #f9f9f9;line-height: 36px;-webkit-appearance:button;-moz-appearance:button;appearance:button;}
select::-ms-expand {display: none;}*/
.oldie select {
  height: auto;
  padding: 0;
}

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #a0a0a0;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: #a0a0a0;
}

:-ms-input-placeholder {
  /* IE 10+ */
  color: #a0a0a0;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: #a0a0a0;
}

/* skip */
.skip {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  line-height: 0;
  z-index: 500;
}

.skip a {
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-indent: -9999px;
}

.skip a:hover,
.skip a:focus,
.skip a:active {
  display: block;
  height: 48px;
  width: 100%;
  text-indent: 0;
  padding: 16px 0;
  text-align: center;
  font-size: 14px;
  line-height: 1;
  color: #fff;
  background: #282a37;
}

/* common */
.clearboth {
  clear: both;
  display: block;
  content: '';
}

.hidden {
  display: block;
  height: 0;
  width: 0;
  font-size: 0;
  line-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.disabled {
  display: none !important
}

.no-pd {
  padding: 0 !important;
}

/* 반응형 대응 */


@media screen and (max-width: 470px) {
  html {
    font-size: 14.98px;
  }
}

@media screen and (max-width: 460px) {
  html {
    font-size: 14.66px;
  }
}

@media screen and (max-width: 450px) {
  html {
    font-size: 14.34px;
  }
}

@media screen and (max-width: 440px) {
  html {
    font-size: 14.02px;
  }
}

@media screen and (max-width: 430px) {
  html {
    font-size: 13.71px;
  }
}

@media screen and (max-width: 420px) {
  html {
    font-size: 13.38px;
  }
}

@media screen and (max-width: 410px) {
  html {
    font-size: 13.07px;
  }
}

@media screen and (max-width: 400px) {
  html {
    font-size: 12.75px;
  }
}

@media screen and (max-width: 390px) {
  html {
    font-size: 12.43px;
  }
}

@media screen and (max-width: 380px) {
  html {
    font-size: 12.11px;
  }
}

@media screen and (max-width: 370px) {
  html {
    font-size: 11.79px;
  }
}

@media screen and (max-width: 360px) {
  html {
    font-size: 11.47px;
  }
}

@media screen and (max-width: 350px) {
  html {
    font-size: 11.16px;
  }
}

@media screen and (max-width: 340px) {
  html {
    font-size: 10.83px;
  }
}

@media screen and (max-width: 330px) {
  html {
    font-size: 10.52px;
  }
}

@media screen and (max-width: 320px) {
  html {
    font-size: 10.2px;
  }

  body {
    font-size: 11px;
  }
}

/* wrapper */

.wrapper {
  max-width: 1200px;
  width: 90vw;
}

/* flip */

.flip-box {
  width: 100%;
  height: 100%;
}

.flip {
  width: 100%;
  height: 100%;
  position: relative;
}

.flip>div {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  left: 0;
  top: 0;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  transition: .5s ease-in-out;

}

.flip>div.front {
  background: #ffffff;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-transform: perspective(800px) rotateY(0deg);
  -webkit-transform: perspective(800px) rotateY(0deg);
  transform: perspective(800px) rotateY(0deg);
  z-index: 1;
}

.flip>div.back {
  transform: rotateY(180deg);
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: perspective(800px) rotateY(180deg);
  -moz-transform: perspective(800px) rotateY(180deg);
  -ms-transform: perspective(800px) rotateY(180deg);
  -o-transform: perspective(800px) rotateY(180deg);
  transform: perspective(800px) rotateY(180deg);
  z-index: 0;
}

.flip.flipped>div.back {
  -moz-transform: perspective(800px) rotateY(0);
  -webkit-transform: perspective(800px) rotateY(0);
  transform: perspective(800px) rotateY(0);
  z-index: 1;
}

.flip.flipped>div.front {
  -webkit-transform: perspective(800px) rotateY(-179.9deg);
  -moz-transform: perspective(800px) rotateY(-179.9deg);
  -ms-transform: perspective(800px) rotateY(-179.9deg);
  -o-transform: perspective(800px) rotateY(-179.9deg);
  transform: perspective(800px) rotateY(-179.9deg);
  z-index: 0;
}

/* read more */

.read-more {
  color: #C09C88;
  line-height: 19.2px;
  padding: 15px 17px 16px;
  border: 1px solid #C09C88;
  height: 50px;
  transition: all .3s;
  font-size: 1rem;
}

.read-more:hover {
  background-color: #C09C88;
  border-color: #C09C88;
  color: #ffffff;
}

/* scroll-elements */

.scroll-elements {
  opacity: 0;
  transition: all 1s;
  transform: translateY(30px);
}

.scroll-elements.scroll-in {
  opacity: 1;
  transform: translateY(0px);
}