@charset "UTF-8";
.visual {
  z-index: 0;
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 97rem;
  color: #fff;
}
.visual .inner {
  position: relative;
  left: 0;
  top: 0;
  height: 100%;
}
.visual .slide-video {
  width: 100vw;
  height: 100%;
}
.visual .slide-video video {
  width: 100vw;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.visual .slide-video .figure {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(1) rotate(0);
  transition: transform 5s;
  -webkit-transform: scale(1) rotate(0);
  -moz-transform: scale(1) rotate(0);
  -ms-transform: scale(1) rotate(0);
  -o-transform: scale(1) rotate(0);
  -webkit-transition: transform 5s;
  -moz-transition: transform 5s;
  -ms-transition: transform 5s;
  -o-transition: transform 5s;
}
.visual .slide-video .figure .img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.visual .visual-txt {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}
.visual .visual-txt .sm-txt {
  margin-bottom: 0.7rem;
  opacity: 0.9;
  font-size: 2rem;
  font-weight: 700;
}
.visual .visual-txt > h2 {
  margin-bottom: 2rem;
  line-height: 1.2;
  font-size: 8rem;
}
.visual .visual-txt p {
  opacity: 0.9;
  line-height: 2;
  font-size: 1.9rem;
  font-weight: 200;
}
.visual .visual-txt .btn-box {
  margin-top: 5.5rem;
}
.visual .slide-item {
  overflow: hidden;
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.visual .slide-item .inner {
  z-index: 1;
  position: relative;
}
.visual .slide-item .figure {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(1) rotate(0);
  transition: transform 5s;
  -webkit-transform: scale(1) rotate(0);
  -moz-transform: scale(1) rotate(0);
  -ms-transform: scale(1) rotate(0);
  -o-transform: scale(1) rotate(0);
  -webkit-transition: transform 5s;
  -moz-transition: transform 5s;
  -ms-transition: transform 5s;
  -o-transition: transform 5s;
}
.visual .slide-item .figure .img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.visual .swiper-slide.swiper-slide-active .figure {
  transform: scale(1.2) rotate(-1deg);
  transition: transform 6s;
  -webkit-transition: transform 6s;
  -moz-transition: transform 6s;
  -ms-transition: transform 6s;
  -o-transition: transform 6s;
  -webkit-transform: scale(1.2) rotate(-1deg);
  -moz-transform: scale(1.2) rotate(-1deg);
  -ms-transform: scale(1.2) rotate(-1deg);
  -o-transform: scale(1.2) rotate(-1deg);
}
.visual .slide-1 {
  width: 100%;
  height: inherit;
}
.visual .slide-2 {
  width: 100%;
  height: inherit;
}
.visual .link-btn {
  border-color: rgba(255, 255, 255, 0.25);
  background: url("../img/icon/link-btn-w.png") right 2.5rem center no-repeat;
}
.visual .visual-btn {
  z-index: 100;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  max-width: 145rem;
  height: 15rem;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}
.visual .visual-btn .swiper-pagination {
  display: inline-block;
  top: 0;
  text-align: left;
  font-size: 2rem;
  font-weight: 700;
}
.visual .visual-btn .control {
  z-index: 10;
  position: absolute;
  top: -3rem;
  right: 0;
}
.visual .visual-btn .control .stop-btn {
  margin-left: 5rem;
  padding: 0.2rem 0;
  width: 1.3rem;
}
.visual .visual-btn .control .stop-btn > span {
  display: block;
  margin: 0 auto;
  width: 1rem;
  height: 1.3rem;
  border-width: 0 0.3rem 0;
  border-style: solid;
  border-color: #fff;
  text-indent: -9999px;
}
.visual .visual-btn .control .stop-btn.active {
  background-color: #fff;
}
.visual .visual-btn .control .stop-btn.active > span {
  border: 0 none;
}
.visual .visual-btn .control .stop-btn:hover {
  opacity: 0.5;
}
.visual .visual-btn .control .next-btn {
  width: 2rem;
  text-align: center;
}
.visual .visual-btn .control .next-btn:hover {
  opacity: 0.5;
}

@media all and (max-width: 85.375rem) {
  .visual {
    height: 100vh;
  }
  .visual .inner {
    padding: 0;
    max-width: 100rem;
  }
  .visual .visual-txt .sm-txt {
    font-size: 1.8rem;
  }
  .visual .visual-txt > h2 {
    font-size: 7.2rem;
  }
  .visual .visual-txt p {
    font-size: 1.71rem;
  }
  .visual .visual-txt .btn-box {
    margin-top: 4.95rem;
  }
  .visual .visual-btn {
    width: 100%;
    height: 10rem;
  }
  .visual .visual-btn .swiper-pagination {
    font-size: 1.62rem;
  }
}
@media all and (max-width: 64rem) {
  .visual {
    height: 100vh;
  }
  .visual .inner {
    padding: 0;
    max-width: 80rem;
  }
}
@media all and (max-width: 62.5rem) {
  .visual {
    height: 75vh;
  }
  .visual .inner {
    padding: 0;
    width: 80%;
  }
  .visual .visual-txt .sm-txt {
    font-size: 1.5rem;
  }
  .visual .visual-txt > h2 {
    font-size: 6rem;
  }
  .visual .visual-txt p {
    font-size: 1.425rem;
  }
  .visual .visual-txt .btn-box {
    margin-top: 4.125rem;
  }
  .visual .visual-btn {
    height: 10rem;
  }
  .visual .visual-btn .swiper-pagination {
    font-size: 1.35rem;
  }
  .visual .visual-btn .control {
    top: 0;
  }
}
@media all and (max-width: 47.9375rem) {
  .visual {
    height: 75vh;
  }
  .visual .inner {
    padding: 0;
    width: 80%;
  }
  .visual .visual-txt .sm-txt {
    font-size: 1rem;
  }
  .visual .visual-txt > h2 {
    font-size: 4rem;
  }
  .visual .visual-txt p {
    font-size: 1.5rem;
  }
  .visual .visual-txt .btn-box {
    margin-top: 2.75rem;
  }
  .visual .visual-btn {
    height: 5rem;
  }
  .visual .visual-btn .swiper-pagination {
    font-size: 1.6rem;
  }
  .visual .visual-btn .control {
    top: 0;
  }
  .jp .visual .visual-txt p {
    font-size: 1.3rem;
  }
}
/*
섹션 1
*/
.sec1 {
  z-index: 10;
  position: relative;
  left: 0;
  top: 0;
  background: url("../img/main/circle-bottm.png") right bottom no-repeat;
}
.sec1 .figure {
  overflow: hidden;
}
.sec1 .figure .img {
  width: inherit;
  height: inherit;
  -o-object-fit: cover;
     object-fit: cover;
  transform: scale(1);
  transition: transform 1s linear;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
}
.sec1 .figure:hover .img {
  transform: scale(1.05);
  transition: transform 1s linear;
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  -webkit-transition: transform 1s linear;
  -moz-transition: transform 1s linear;
  -ms-transition: transform 1s linear;
  -o-transition: transform 1s linear;
}
.sec1 .col-box {
  display: flex;
  justify-content: flex-start;
  font-size: 0;
}
.sec1 .col-box > div {
  width: 50%;
}
.sec1 .col-box .txt-box {
  z-index: 1;
  position: relative;
  left: 0;
  top: 0;
}
.sec1 .col-box .txt-box .txt-header {
  margin-bottom: 2.5rem;
  line-height: 1.3;
  font-size: 3.8rem;
}
.sec1 .col-box .txt-box .txt-header sup {
  vertical-align: top;
  font-size: 0.42em;
  color: #666;
}
.sec1 .col-box .txt-box p {
  line-height: 1.7;
  font-size: 1.9rem;
  font-weight: 300;
}
.sec1 .col-box .txt-box .btn-box {
  margin-top: 2.4vh;
}
.sec1 .col-box .img-box {
  position: relative;
  left: 0;
  top: 0;
}
.sec1 .col-box .img-box .img {
  position: relative;
  left: 0;
  top: 0;
}
.sec1 .col-box .img-box p {
  opacity: 0.8;
  position: absolute;
  left: 2.8rem;
  bottom: 3.5rem;
  font-size: 2.2rem;
  font-weight: 600;
  color: #fff;
}
.sec1 .col-box .img-box .side-txt {
  position: absolute;
  font-size: 1.5rem;
  font-weight: 700;
  color: #000;
  transform-origin: left bottom;
}
.sec1 .item-1 .img-box {
  order: 1;
  height: 84rem;
}
.sec1 .item-1 .img-box .figure {
  width: 100%;
  height: inherit;
}
.sec1 .item-1 .img-box .side-txt {
  left: -17.7%;
  bottom: 18.45%;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
}
.sec1 .item-1 .txt-box {
  position: relative;
  left: 0;
  top: 0;
  order: 2;
  margin-top: -15rem;
  padding: 28rem 2rem 0 8rem;
  height: 72.5rem;
}
.sec1 .item-1 .txt-box > div {
  z-index: 1;
  position: relative;
  left: 0;
  top: 0;
}
.sec1 .item-1 .txt-box::after {
  z-index: 0;
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  width: 50vw;
  height: 100%;
  background: url("../img/main/circle-top.png") left top no-repeat #fff;
}
.sec1 .item-2 .img-box:nth-of-type(1) {
  position: relative;
  left: 0;
  top: 0;
  height: 78rem;
}
.sec1 .item-2 .img-box:nth-of-type(1) .figure {
  z-index: 1;
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: inherit;
}
.sec1 .item-2 .img-box:nth-of-type(1)::after {
  z-index: 0;
  position: absolute;
  left: -8rem;
  bottom: -11rem;
  content: "";
  width: 23.5rem;
  height: 23.5rem;
}
.sec1 .item-2 .img-box:nth-of-type(1) .side-txt {
  left: -17.7%;
  bottom: 9.6%;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
}
.sec1 .item-2 .img-box:nth-of-type(2) {
  position: relative;
  left: 0;
  top: 0;
  height: 80rem;
}
.sec1 .item-2 .img-box:nth-of-type(2) .figure {
  z-index: 1;
  margin-top: -26rem;
  width: 100%;
  height: inherit;
}
.sec1 .item-2 .img-box:nth-of-type(2) .figure .side-txt {
  left: 117.7%;
  top: 9.6%;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}
.sec1 .item-3 .txt-box {
  padding: 21rem 2rem 0 0;
}
.sec1 .item-3 .txt-box .txt-header .br {
  display: block;
}
.sec1 .item-3 .img-box {
  margin-top: -26rem;
}
.sec1 .item-3 .img-box .figure {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 87rem;
}
.sec1 .item-3 .img-box .figure .side-txt {
  left: 117.7%;
  top: 28.6%;
  width: 100%;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}
.sec1 .item-3 .img-box .btn-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 15rem;
  background-color: #d3d9e8;
}

.img-box .img {
  background-size: cover;
}
.img-box .img:hover {
  background-size: 105% !important;
  transition: background-size 5s linear;
  -webkit-transition: background-size 5s linear;
  -moz-transition: background-size 5s linear;
  -ms-transition: background-size 5s linear;
  -o-transition: background-size 5s linear;
}

@media all and (max-width: 85.375rem) {
  .sec1 {
    background-size: 60%;
  }
  .sec1 .inner {
    padding: 0;
    max-width: 98rem;
  }
  .sec1 .col-box .txt-box .txt-header {
    margin-bottom: 2.5rem;
    font-size: 3rem;
  }
  .sec1 .col-box .txt-box .txt-header .inner {
    display: block;
  }
  .sec1 .col-box .txt-box .txt-header sup {
    font-size: 0.32em;
  }
  .sec1 .col-box .txt-box .txt-header .inline {
    display: block;
  }
  .sec1 .col-box .img-box p {
    left: 2.8rem;
    bottom: 3.5rem;
    font-size: 2.2rem;
  }
  .sec1 .item-1 .img-box {
    order: 1;
    height: 64rem;
  }
  .sec1 .item-1 .txt-box {
    margin-top: -10rem;
    padding: 11rem 2rem 0 8rem;
    height: 52.5rem;
  }
  .sec1 .item-1 .txt-box::after {
    height: 60rem;
    background-size: 50%;
  }
  .sec1 .item-2 .img-box:nth-of-type(1) {
    height: 58rem;
  }
  .sec1 .item-2 .img-box:nth-of-type(1)::after {
    bottom: -10rem;
    width: 20.5rem;
    height: 20.5rem;
  }
  .sec1 .item-2 .img-box:nth-of-type(2) {
    height: 60rem;
  }
  .sec1 .item-3 .txt-box {
    padding: 5rem 2rem 0 0;
  }
  .sec1 .item-3 .img-box .figure {
    height: 67rem;
  }
}
@media all and (max-width: 64rem) {
  .sec1 .inner {
    max-width: 80rem;
  }
}
@media all and (max-width: 62.5rem) {
  .sec1 .inner {
    padding: 0;
    max-width: 80%;
  }
  .sec1 .col-box .txt-box {
    padding: 19rem 2rem 8rem 0;
  }
  .sec1 .col-box .img-box {
    margin-top: 0 !important;
  }
  .sec1 .item-1 {
    flex-direction: column;
  }
  .sec1 .item-1 > div {
    width: 100%;
  }
  .sec1 .item-1 .img-box {
    order: 2;
    height: 30rem;
  }
  .sec1 .item-1 .txt-box {
    order: 1;
    margin-top: 0;
    padding: 5rem 0 0;
    height: auto;
  }
  .sec1 .item-1 .txt-box::after {
    left: -10vw;
    width: 100vw;
    background-color: transparent;
  }
  .sec1 .item-1 .txt-box .btn-box {
    margin: 3rem 0;
  }
  .sec1 .item-2 .img-box:nth-of-type(1) {
    height: 28rem;
  }
  .sec1 .item-2 .img-box:nth-of-type(1) .side-txt {
    left: -2rem;
  }
  .sec1 .item-2 .img-box:nth-of-type(2) {
    height: 28rem;
  }
  .sec1 .item-2 .img-box:nth-of-type(2) .figure {
    margin-top: 0;
  }
  .sec1 .item-2 .img-box:nth-of-type(2) .figure .side-txt {
    left: calc(100% + 2rem);
  }
  .sec1 .item-3 {
    flex-direction: column;
  }
  .sec1 .item-3 .txt-box {
    padding: 5rem 0 0;
    width: 100%;
  }
  .sec1 .item-3 .txt-box .btn-box {
    margin: 3rem 0;
  }
  .sec1 .item-3 .img-box {
    margin-top: 0;
    width: 100%;
  }
  .sec1 .item-3 .img-box .figure {
    height: 30rem;
  }
  .sec1 .item-3 .img-box .figure .side-txt {
    left: calc(100% + 2rem);
  }
  .sec1 .item-3 .img-box .btn-box {
    height: 10rem;
  }
}
@media all and (max-width: 47.9375rem) {
  .sec1 .col-box .txt-box {
    padding-top: 3rem;
  }
  .sec1 .col-box .txt-box .txt-header {
    margin-bottom: 1.5rem;
  }
  .sec1 .col-box .img-box p {
    left: 1.5rem;
    bottom: 2rem;
  }
  .sec1 .item-2 {
    flex-direction: column;
  }
  .sec1 .item-2 .img-box:nth-of-type(1) {
    width: 100%;
    height: 25rem;
  }
  .sec1 .item-2 .img-box:nth-of-type(1) .side-txt {
    left: -1rem;
    font-size: 1rem;
  }
  .sec1 .item-2 .img-box:nth-of-type(1)::after {
    bottom: -34.5rem;
  }
  .sec1 .item-2 .img-box:nth-of-type(2) {
    width: 100%;
    height: 25rem;
  }
  .sec1 .item-2 .img-box:nth-of-type(2) .img {
    margin-top: 0;
  }
  .sec1 .item-2 .img-box:nth-of-type(2) .img .side-txt {
    left: calc(100% + 1rem);
    font-size: 1rem;
  }
  .sec1 .item-3 {
    flex-direction: column;
  }
  .sec1 .item-3 .img-box .img .side-txt {
    left: calc(100% + 1rem);
    font-size: 1rem;
  }
}
.sec2 {
  padding-top: 12rem;
  width: 100%;
  height: 112rem;
  background-image: url("../img/main/sec2.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.sec2 .slide-txt {
  color: #fff;
}
.sec2 .slide-txt .sm-txt {
  opacity: 0.5;
  font-size: 2rem;
}
.sec2 .slide-txt > h3 {
  margin: 1.5rem 0 3.5rem;
  font-size: 3.8rem;
}
.sec2 .slide-txt > p {
  opacity: 0.9;
  line-height: 1.8;
  font-weight: 300;
}
.sec2 .slide-txt .btn-box {
  margin-top: 6.5rem;
}
.sec2 .slide-txt .btn-box .link-btn {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
  background: url("../img/icon/link-btn-w.png") right 2.5rem center no-repeat;
}

@media all and (max-width: 85.375rem) {
  .sec2 {
    padding-top: 10rem;
    max-height: 100vh;
  }
}/*# sourceMappingURL=main.css.map */