@charset "UTF-8";
/* #f0c2c9 , #ffdbe1 */
/* 모달창 색상 */
/* TODO: 본문글씨 공통클래스 */
/* @include translateY-50;
    position: absolute;top: 50%; */
    /* #1a1b1b
#444 
#b20000 wine
#F0C2C9 wht wine
#720000 wine:hover */
/* #262A2D midnight */
/* #FBF7EF (251,247,239) */
/* https://codepen.io/g1eb/pen/MpXQZN dash-array */
/* 초중고 섹션 30px 로 apis 따라하기 */
/* 말줄임표 (line-clamp) */
/* 

@include animation(fadeUp 1.5s forwards);

@-webkit-keyframes fadeUp {
  0%{opacity: 0;-webkit-transform: translateY(50px);}
  100%{opacity: 1;-webkit-transform: translateY(0px);}
}
@-moz-keyframes fadeUp {
  0%{opacity: 0;-moz-transform: translateY(50px);}
  100%{opacity: 1;-moz-transform: translateY(0px);}
}
@keyframes fadeUp {
  0%{opacity: 0;transform: translateY(50px);}
  100%{opacity: 1;transform: translateY(0px);}


@include keyframes(fadeIn) {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}

*/
/* 
태블릿크기 x 1.07(비율로 더 크게 보이도록) = ??px => vw로 환산하자
30 X 1.07 = 32.1px

770px 에서 1vw의 크기가 얼마인지??
770(해상도) / 100 = 7.7px

32.1px / 7.7px = 4.168831168831169vw

vw-calc770(태블릿 사이즈size) {
  (size * 1.07) / (770 / 100)
} 

함수 만들기
@function calc-percent($target, $container) {
  @return ($target / $container) * 100%;
}
함수 호출하기
.box {
  width: calc-percent(650px, 1000px);
}
*/
/* 쓸때는 vw-calc770(40) 이렇게 px빼고 적는다 */
/* 또는 calc(10% - 5.5584415584vw) 이렇게 적음 */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400i|Raleway:300,300i,400,600,600i,800,900&display=swap);
@import url(https://fast.fonts.net/lt/1.css?apiType=css&c=5452a5f2-8cfa-4a36-8a14-6afb8b3de809&fontids=1575150,1575166,1575192);
/* 나중에 common과 합해주세요 */
/* reset */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
button,
input,
[type="text"] {
  margin: 0;
  padding: 0; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%; }

ul {
  list-style: none; }

a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none;
  color: inherit; }

button,
input {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  letter-spacing: inherit; }

button {
  border: none;
  cursor: pointer;
  background: none; }

input[type="text"] {
  border-radius: 0; }

img {
  vertical-align: top;
  max-width: 100%;
  border: 0; }

iframe {
  border: none; }

address {
  font-style: normal; }

header,
nav,
aside,
section,
article,
footer {
  display: block; }

/* scroll-Bar */
/* width */
::-webkit-scrollbar {
  width: 7px; }

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 2px black; }

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
  box-shadow: inset 0 0 2px black; }

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; }

/* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width */
/* firefox만 제어가능함. (결과적으로 위에꺼만 넣으면 ie외 모든 브라우저에서 제어 됨.) < jquery에서 가상으로 처리하는 것이 좋겠다. */
/* common */
body {
  letter-spacing: 1px;
  font: normal 16px/27px "open-sans", Arial, sans-serif;
  color: #707070;
  word-break: keep-all; }

.clearfix::after {
  content: "";
  display: block;
  clear: both; }

.blind {
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: none;
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%); }

/* .max1440{width: 100%;max-width: 1440px;margin: 0 auto;} */
/* 반응형 크기 제어  */
.fullVdo.moreBtn a {
  color: #fff; }
.fullVdo.moreBtn .arrow {
  background: #b20000; }
  .fullVdo.moreBtn .arrow::after {
    content: "";
    border-radius: 50%;
    width: 33px;
    height: 33px;
    background: #b20000 url(../images/SVG/full.svg) no-repeat 100%/cover;
    right: -20px;
    top: -16px;
    position: absolute; }

.moreBtn {
  /* TODO: 여기까지 했음 */
  display: block;
  height: 40px;
  margin-top: 40px;
  /* 제어 안되고있음 : 수정필요 */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  position: relative;
  /* 
  
  TODO: moreBtn arrowR fullVdo 수정바람 
  겉보기엔 괜찮아도 상태 좋지 않음..
  a태그의 내용이 길어져도 옆에 있어야 함.

  */ }
  .moreBtn a {
    display: inline-block;
    font-weight: 600;
    padding-top: 15px;
    display: block;
    width: 300px;
    height: 40px;
    display: inline-block;
    letter-spacing: 0.5px;
    font-family: "Raleway", sans-serif !important;
    font-size: 16px; }
    .moreBtn a em {
      font-weight: 800; }
  .moreBtn .wht {
    font-weight: 400;
    color: #fff; }
    .moreBtn .wht em {
      font-weight: 600; }
  .moreBtn .arrow {
    display: inline-block;
    width: 60px;
    height: 2px;
    background: #b20000;
    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
    -o-transition: all 0.25s;
    transition: all 0.25s;
    position: relative;
    margin: 3px 15px; }
    .moreBtn .arrow::after {
      content: "";
      border-radius: 50%;
      width: 33px;
      height: 33px;
      background: #b20000 url(../images/SVG/full.svg) no-repeat 100%/cover;
      right: -20px;
      top: -16px;
      position: absolute; }
  .moreBtn a:hover .arrow,
  .moreBtn a:focus .arrow {
    width: 85px; }
  .moreBtn .arrowR::after {
    content: "";
    position: absolute;
    display: block;
    top: 10px;
    left: 130px;
    width: 65px;
    height: 35px;
    background: url(../images/SVG/arrow+circle.svg) no-repeat 100%/cover;
    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
    -o-transition: all 0.25s;
    transition: all 0.25s; }
  .moreBtn .arrowR:hover::after, .moreBtn .arrowR:focus::after {
    left: 180px; }

.tac {
  text-align: center; }
  .tac h2::after {
    right: 0;
    margin: 0 auto; }

.after::after {
  border: 4px solid #b20000; }

.title {
  width: 100%;
  height: auto; }
  .title span {
    display: block;
    letter-spacing: 2.5px;
    line-height: 30px;
    font-size: 12px;
    font-family: "Raleway", sans-serif;
    font-weight: 800;
    text-transform: uppercase; }
  .title h2,
  .title h3 {
    font: normal 11px/13px "Raleway", sans-serif;
    font-size: 3rem;
    font-weight: 500;
    line-height: 4rem;
    color: #b20000;
    margin-bottom: 40px;
    position: relative; }
    .title h2::after,
    .title h3::after {
      content: "";
      position: absolute;
      bottom: -20px;
      left: 0;
      background: #707070;
      height: 2px;
      width: 40px; }

.btnBox {
  margin-top: 50px; }
  .btnBox button {
    width: 53px;
    height: 53px;
    background: no-repeat 100% / cover; }
    .btnBox button:nth-of-type(1) {
      background: url(../images/SVG/left_crl_arrow.svg);
      /* 다음에 기회가 되면 $rosewine 로 바꿔주세요 */ }
      .btnBox button:nth-of-type(1):hover, .btnBox button:nth-of-type(1):focus {
        background: url(../images/SVG/left_crl_arrow_on.svg); }
    .btnBox button:nth-of-type(2) {
      background: url(../images/SVG/right_crl_arrow.svg); }
      .btnBox button:nth-of-type(2):hover, .btnBox button:nth-of-type(2):focus {
        background: url(../images/SVG/right_crl_arrow_on.svg); }

.arrowbox {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 72px;
  height: 65px;
  background: url(../images/SVG/more_box.svg) no-repeat 100%/cover;
  z-index: 4;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s; }

a:hover .arrowbox, a:focus .arrowbox {
  background-image: url(../images/SVG/more_box_on.svg); }

.zoom-frame {
  overflow: hidden; }
  .zoom-frame .img {
    transition-duration: 3s;
    margin: 0 auto; }

.zoom-frame {
  overflow: hidden; }

.zoom-frame .img {
  transition-duration: 3s; }
  .zoom-frame .img:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    /* -o-transform: $value;
    -ms-transform: $value; */
    transform: scale(1.2); }

.zoom-frame img:hover {
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  z-index: 0; }

/*# sourceMappingURL=reset.css.map */