@charset "utf-8";

/* main */
.main {position: relative; width:calc(100% + 40px); max-height: 100vh; margin: 0 -20px;}
.main section {height: 100vh;}
.main .mainSwiper {max-height: 100vh; --swiper-wrapper-transition-timing-function: ease-in-out}
.mainSwiper-pagination.swiper-pagination-bullets {--swiper-pagination-left: auto; --swiper-pagination-right:50px; --swiper-pagination-bullet-vertical-gap: 10; top: 50%; bottom: auto; transform: translateY(-50%);}
.mainSwiper-pagination::before {content:""; display: block; position: absolute; top: 15px; bottom: 15px; left:-1px; width:1px; background: #525252; transition: all 0.3s;}
.mainSwiper-pagination .swiper-pagination-bullet {position: relative; width: auto; height: 30px; opacity: 1; background: transparent; padding-left: 22px; text-align: left; transition: all 0.3s;}
.mainSwiper-pagination .swiper-pagination-bullet::before {content:""; display: block; width: 23px; height: 23px; border-radius: 100%; border: 2px solid #525252; opacity: 1; position: absolute; top: 4px; left: -12px; transition: all 0.3s;}
.mainSwiper-pagination .swiper-pagination-bullet::after {content:""; display: block; width: 7px; height: 7px; background: #525252; border-radius: 100%; position: absolute; top: 12px; left: -4px; transition: all 0.3s;}
.mainSwiper-pagination .swiper-pagination-bullet:last-child {display: none;}
.mainSwiper-pagination .swiper-pagination-bullet .txt {font-size: 11px; letter-spacing: 1px; color:#525252; line-height: 30px; opacity: 1; transition: all 0.3s;}
.mainSwiper-pagination .swiper-pagination-bullet + .swiper-pagination-bullet {margin-top: 10px;}

.mainSwiper-pagination .swiper-pagination-bullet-active {}
.mainSwiper-pagination .swiper-pagination-bullet-active::before {border-color:#fff; opacity: 1;}
.mainSwiper-pagination .swiper-pagination-bullet-active::after {background:#fff;}
.mainSwiper-pagination .swiper-pagination-bullet-active .txt {color:#fff;}

.mainSwiper-pagination.scroll::before {background: #dfdfdf;}
.mainSwiper-pagination.scroll .swiper-pagination-bullet::before {border-color: #dfdfdf; opacity: 1;}
.mainSwiper-pagination.scroll .swiper-pagination-bullet::after {background: #dfdfdf;}
.mainSwiper-pagination.scroll .swiper-pagination-bullet .txt {color:#dfdfdf;}
.mainSwiper-pagination.scroll .swiper-pagination-bullet-active::before {border-color:var(--color-sub); opacity: 1;}
.mainSwiper-pagination.scroll .swiper-pagination-bullet-active::after {background:var(--color-sub);}
.mainSwiper-pagination.scroll .swiper-pagination-bullet-active .txt {color:var(--color-sub);}

@media screen and (max-width: 1300px) {
  .mainSwiper-pagination {--swiper-pagination-right: 30px;}
  .mainSwiper-pagination .swiper-pagination-bullet .txt {display: none;}
  .mainSwiper-pagination.swiper-pagination-bullets {--swiper-pagination-right: 30px;}
  
}

@media screen and (max-width: 1024px) {
  .main {max-height: none;}
  .main .mainSwiper {max-height: none;}
  .main section {height: 153vw;}
  .mainSwiper-pagination {display: none;}
  .main .sec01 {height: 177vw;}
  
  
  
}

/* main visual */
.sec01 {position: relative}
/*
.mbg-visual {width:100%; height: 100%;}
.mbg-visual-slide {height: 100%!important;}
.mbg-visual-slide .item {position: relative; width: 100%; height:100%; transition: background 0.3s;}
.mbg-visual-slide .item::before {content:""; display: block; position: absolute; top: 0; left:0; right:0; bottom:0; transform: translateY(-50%); background: #000; opacity: 0.3}
*/

.mvisual {width:100vw; height:100%;}
.mvisual-slide {position: relative; display: flex; justify-content: space-between; align-items: center; padding: 0 10vw 0 6vw; height:100%!important;}
.mvisual-slide::before {content:""; display: block; position: absolute; top: 0; right:0; left:0; bottom: 0; background: rgba(0,0,0,0.4)}
.mvisual-slide .mvisual-txt {flex:1; opacity:0; transform: translateX(30%); transition: all 0.5s; transition-delay: 0.3s}
.mvisual-slide .mvisual-txt .item01 {font-size: 20px; font-weight: 600; color:#fff; margin-bottom: 10px; word-break: keep-all;}
.mvisual-slide .mvisual-txt .item02 {font-size: 20px; font-weight: 300; color:#fff; margin-bottom: 10px; word-break: keep-all;}
.mvisual-slide .mvisual-txt .item03 {font-size: 40px; font-weight: 300; color:#fff; margin-bottom: 24px; line-height: 1.3;}
.mvisual-slide .mvisual-img {width: 60%; height:100%; opacity:0; transform: translateX(30%); transition: all 0.5s; transition-delay: 0.3s; background-size: cover;}
.mvisual-slide.swiper-slide-active .mvisual-txt {opacity: 1; transform: translateX(0)}
.mvisual-slide.swiper-slide-active .mvisual-img {opacity: 1; transform: translateX(0)}
.mvisual-visual-controll {position: absolute; left: 6vw; top:50%; bottom:auto; width: 22%; z-index: 1; margin-top: 10%; display: grid; align-items: center; grid-template-columns: 1fr 20px 20px; column-gap: 5px;}
.mvisual-visual-controll .mvisual-pagination {position: static; margin:0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; grid-column: 1/2; column-gap: 5px;}
.mvisual-visual-controll .swiper-pagination-current,
.mvisual-visual-controll .swiper-pagination-total {color: #fff; font-size: 14px; }
.mvisual-visual-controll .mvisual-scrollbar {position: static; background: rgba(255,255,255,0.5); height:1px;}
.mvisual-visual-controll .mvisual-scrollbar .swiper-scrollbar-drag {background: rgba(255,255,255,1);}
.mvisual-visual-controll .mvisual-button-prev {position: static; width: 20px; height:20px; margin:0; background: center / cover url('../img/btn-arrow-prev.svg') no-repeat; grid-column: 2/3;}
.mvisual-visual-controll .mvisual-button-prev::after {content:none;}
.mvisual-visual-controll .mvisual-button-next {position: static; width: 20px; height:20px; margin:0; background: center / cover url('../img/btn-arrow-next.svg') no-repeat; grid-column: 3/4;}
.mvisual-visual-controll .mvisual-button-next::after {content:none;}

@media screen and (max-width: 1300px) {
  .mvisual-slide {padding: 0 10vw 0 5vw;}
  .mvisual-slide .mvisual-txt .item03 {font-size:35px;}
  .mvisual-visual-controll {left: 5vw; top: 55%;}
  
}

@media screen and (max-width: 1024px) {
  .mvisual-slide {flex-direction: column-reverse; padding: 5% 5% 15%; height: auto!important; justify-content: center;}
  .mvisual-slide .mvisual-txt {width:100%; flex: 0;}
  .mvisual-slide .mvisual-txt .item01 {font-size: 16px;}
  .mvisual-slide .mvisual-txt .item01 > br {display: none; } 
  .mvisual-slide .mvisual-txt .item02 {font-size: 16px;} 
  .mvisual-slide .mvisual-txt .item02 > br {display: none;} 
  .mvisual-slide .mvisual-txt .item03 {font-size:26px;}
  .mvisual-slide .mvisual-img {width:100%; height:0; padding-bottom: 100%; margin-bottom: 20px;}
  .mvisual-visual-controll {top: auto; bottom: 0; width: 82%; margin-top: 0; margin-bottom: 10%;}
}


/* section02 */
.main-wec {display: flex; justify-content: center; align-items: center; background-repeat: no-repeat; background-position: center left; background-size: cover; transition: all 0 ease-out; transition-delay: 0.5s;}
.main-wec .item {width:100%; max-width: 1200px; padding: 0 20px;}
.main-wec .item .txt01 {font-size:50px; color:var(--color-primary); padding:0 50px; transition:all 0.3s ease-out; opacity: 0; transition-delay: 0.5s; line-height: 1.3; font-weight: 600;}
.main-wec .item .txt02 {font-size:32px; color:#1C1C1C; padding:0 30px; transition:all 0 ease-out; opacity: 0; transition-delay: 0.5s; line-height: 1.4;}
.main-wec .item .txt03 {font-size:20px; color:#1c1c1c; margin-top:30px; padding:0 30px; transition:all 4.5s ease-out; opacity: 0;transition-delay: 0.5s; line-height: 1.4;}
.main-wec .item .btns {display: flex; column-gap: 30px; margin: 40px 30px 0; transition:all 0 ease-out;transition-delay: 0.5s;}
.main-wec .item .link {position: relative; padding: 20px 60px; font-size:16px; font-weight: 500; color:#fff; border: 1px solid #fff; overflow: hidden; background-color: transparent; transition:all 1.5s ease-out;}
.main-wec .item .link span {position: relative; z-index: 1; line-height: 1;}
.main-wec .item .link:before {content: '';display: block;width:0%;height: 100%;position: absolute;left: 0;top: 0;transform-origin: right top;transition: all .55s cubic-bezier(.52,.08,.18,1); backface-visibility: hidden; background: #fff;}
.main-wec .item .link:hover {border-color:#fff; color:#000;}
.main-wec .item .link:hover:before {width:120%;transform: translateX(0) skewX(-17.62deg);transform-origin: left top;}

.main-wec .item .link.border {border-color: var(--color-primary); color: var(--color-primary); background: transparent;}
.main-wec .item .link.border:before {background: var(--color-primary);}
.main-wec .item .link.border:hover {color: #fff;}
.main-wec .item .link.color {background: #af8d5c; border-color: #af8d5c;}
.main-wec .item .link.color:hover {border-color: #000; color:#fff;}
.main-wec .item .link.color:before {background: #000;}
/* basic style */

.swiper-slide-active .main-wec {background-position: center left 20%; transition: all 3s ease-out;}
.swiper-slide-active .main-wec .item .txt01 {padding:0; opacity: 1; transition:all 1.5s ease-out;}
.swiper-slide-active .main-wec .item .txt02 {padding:0; opacity: 1; transition:all 4.5s ease-out;}
.swiper-slide-active .main-wec .item .txt03 {padding:0; opacity: 1; transition:all 1.5s ease-out;}
.swiper-slide-active .main-wec .item .btns {margin: 40px 0 0; transition:all 1.5s ease-out;}

.sec02 {text-align: right; background-position-x: 20%;}
.swiper-slide-active .sec02 {background-position-x: 0;}
.sec02 .btns {justify-content: flex-end}

.sec03 {text-align: left; background-position-x: 80%;}
.swiper-slide-active .sec03 {background-position-x: 100%;}
.sec03 .btns {justify-content: flex-start}
.sec03 .item .txt01 {color:#fff;}
.sec03 .item .txt02 {color:#fff;}
.sec03 .item .txt03 {color:#fff;}

.sec04 {position: relative;}
.sec04 .sec04-slide {height: 100%}
.swiper-slide-active .sec04 .sec04-slide .img {scale: 1.1;}
.sec04 .txt {position: absolute; bottom: 45%; left: 0; right:0; text-align:center; padding:0 20px; z-index: 1; word-break: keep-all; transform: translateY(-50%);}
.sec04 .txt .main-title {font-size: 45px; color:#fff; font-weight: 600;}
.sec04 .txt .sub-ex {margin-top: 10px; font-size:20px; color:#fff; font-weight: 300;}
.sec04 .sec04-slide .img {width:100%; height:100%; background-position: center; background-repeat: no-repeat; background-size: cover; transform-origin: center; transform: scale(1); transition: all 3s ease-in-out;}
.sec04 .sec04-pagination {padding: 0 20px; position: absolute; --swiper-pagination-top: 55%; --swiper-pagination-bottom: auto; left:0; right:0; display:flex; flex-wrap: wrap; justify-content: center; align-items: center; z-index: 1; --swiper-pagination-bullet-gap: 3%; margin: 4px;}
.sec04 .sec04-bullet {position: relative; padding-bottom: 20px; --swiper-pagination-bullet-width: 244px; --swiper-pagination-bullet-height: 220px; --swiper-pagination-bullet-border-radius: 20px; border: 1px solid #fff; color:#fff; display: flex; flex-direction: column; align-items: center; justify-content: center; --swiper-pagination-bullet-inactive-opacity: 1; --swiper-pagination-bullet-inactive-color: rgba(255,255,255,0.1); word-break: keep-all; background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); transition: all 0.3s;}
.sec04 .sec04-bullet:hover {background-color: rgba(0,0,0,0.2);}
.sec04 .sec04-bullet .sec04-bullet-num {font-size: 40px; opacity: 0.3; margin-bottom: 14px; line-height: 1;}
.sec04 .sec04-bullet .sec04-bullet-txt {font-size: 26px; line-height:1.3;}
/* .sec04 .sec04-slide.swiper-slide-active .img {transform: scale(1.2); background-size: cover;} */
.sec04 .sec04-bullet.swiper-pagination-bullet-active {background-color: rgba(0,0,0,1); border-color: #000;}

.sec05 {display: flex; justify-content: center; align-items: center; flex-direction: column;}
.sec05 h2.tit {font-size: 44px; color: #111; text-align: center; margin-bottom: 16px; font-weight: 400;}
.sec05 .sub {font-size: 18px; color: #333; text-align: center;  margin-bottom: 45px;}
.sec05 #fwrite {display: flex; flex-wrap: wrap; column-gap: 10px; row-gap: 10px; max-width: 1280px; padding: 0 20px;}
.sec05 .write_div {width: calc(50% - 5px);}
.sec05 .write_div.full {width: 100%;}
.sec05 .write_div input {width: 100%;}
.sec05 .write_div input,
.sec05 .write_div textarea {font-size: 14px; color:#111; font-family:"Noto Sans", "Noto Sans KR", sans-serif; resize: none;}
.sec05 .write_div input::placeholder,
.sec05 .write_div textarea::placeholder {font-size: 14px; color:#888; font-family:"Noto Sans", "Noto Sans KR", sans-serif;}
.sec05 .privacy input {display: none;}
.sec05 .privacy .tit {font-size: 16px; font-weight: 500;}
.sec05 .privacy .desc {font-size: 16px; font-weight: 300;}
.sec05 .privacy .check_box {margin-top: 20px;}
.sec05 .privacy .check_box .privacy {display: inline-flex; align-items: center;}
.sec05 .privacy .check_box .box {display: block; width: 30px; height: 30px; background-color: #fff; border: 1px solid #B2B2B2; margin-right: 10px;;}
.sec05 .privacy .check_box .txt {font-size: 16px; font-weight: 400;}
.sec05 .privacy .check_box #privacy:checked + .privacy .box {background: center / contain url('../img/ico-check.svg') no-repeat #B2B2B2;}
.sec05 .btn_confirm {margin: 70px auto 0;}
.sec05 .btn_confirm .btn_submit {width: 99px; height: 43px; font-size: 16px;}

.sec07 {text-align: left}

@media screen and (max-width: 1300px) {
  .main-wec {background-position: center left; background-size: cover;}
  .swiper-slide-active .main-wec {background-position: center left 30%; background-size: cover;}
  .main-wec .item {width: 80%;}
  .main-wec .item .txt01 {font-size: 35px;}
  .main-wec .item .txt02 {font-size: 20px;}
  .main-wec .item .txt03 {font-size: 16px;}
  .main-wec .item .link {font-size: 12px; padding: 8.5px 10px; width: 120px; height: 40px;}
  
  .swiper-slide-active .main-wec.sec02 {background-position-x: 30%}

  .swiper-slide-active .main-wec.sec03 {background-position-x: 60%}
  .sec04 .sec04-pagination {row-gap: 8px;}
  .sec04 .txt .main-title {font-size: 30px;}
  .sec04 .txt .sub-ex {bottom: 70%; font-size:16px;}
  .sec04 .sec04-bullet {--swiper-pagination-bullet-width: 22%; flex: 0 0 25%; height: 160px; padding: 0;}
  .sec04 .sec04-bullet .sec04-bullet-num {font-size: 30px;}
  .sec04 .sec04-bullet .sec04-bullet-txt {font-size: 19px;}
  
  .sec05 h2.tit {font-size: 35px;}
  .sec05 .sub {font-size: 20px;}
}


@media screen and (max-width: 1024px) {
  .main-wec {align-items: flex-end; background-size: cover; background-position-x: 20%; transition: none;}
  .main-wec .item {position: relative; width: 100%; text-align: center; padding: 30px 10px;}
  .main-wec .item::before {content: ""; display: block; position: absolute; top: 0; left:0; right:0; bottom: 0; backdrop-filter: blur(20px);}
  .main-wec .item .txt01 {position: relative; padding:0; opacity: 1; font-size: 26px; transition: none; margin-bottom: 6px;}
  .main-wec .item .txt02 {position: relative;padding:0; opacity: 1; font-size: 16px; transition: none;}
  .main-wec .item .txt03 {position: relative;padding:0; opacity: 1; font-size: 14px; transition: none; margin-top: 20px;}
  .main-wec .item .btns {position: relative; margin:30px 0 0; column-gap: 10px; transition: none; justify-content: center; margin-top: 20px;}

  .sec01 {box-sizing: content-box; padding-top: var(--hd-mo-height);}

  .sec03 {background-position-x: 75%}
  .sec03 .item::before {background-color: rgba(0,0,0,0.2);}
  .sec03 .item .txt03 br {display: none;}
  
  .sec04 .txt {bottom: 60%;}
  .sec04 .txt .main-title {font-size: 25px;}
  .sec04 .txt .sub-ex {font-size:15px;}
  .sec04 .sec04-pagination {--swiper-pagination-top: 40%;}
  .sec04 .sec04-bullet {--swiper-pagination-bullet-height: auto; flex:0 0 30%; padding: 10px; height: 34vw}
  .sec04 .sec04-bullet .sec04-bullet-num {margin-bottom: 5px;}
  .sec04 .sec04-bullet .sec04-bullet-txt {font-size: 16px; letter-spacing: -1px;}
  .sec04 .sec04-slide .img {background-position-x: 80%; filter: brightness(0.9);}
  
  .main section.sec05 {min-height: 153vw; height: auto;padding: 40px 0;}
  .sec05 h2.tit {font-size: 26px;}
  .sec05 .sub {font-size: 16px;}
  
  .sec07 {background-position-x: 65%}
  
}