@charset "utf-8";

/* 초기화 */
html {overflow-y:scroll}
body {margin:0;padding:0;font-size:0.75em;font-family:'Pretendard', dotum, sans-serif;background:#fff}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'Pretendard', dotum, sans-serif}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button, figure {margin:0;padding:0;font-family:'Pretendard', dotum, sans-serif;font-size:1em}
input[type="submit"] {cursor:pointer}
button {cursor:pointer}

textarea, select {font-family:'Pretendard', dotum, sans-serif;font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}

*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

input[type=text],input[type=password], textarea {
-webkit-transition:all 0.30s ease-in-out;
-moz-transition:all 0.30s ease-in-out;
-ms-transition:all 0.30s ease-in-out;
-o-transition:all 0.30s ease-in-out;
outline:none;
}

input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus {
-webkit-box-shadow:0 0 5px #9ed4ff;
-moz-box-shadow:0 0 5px #9ed4ff;
box-shadow:0 0 5px #9ed4ff;
border:1px solid #558ab7 !important;
}

.placeholdersjs {color:#aaa !important}


/* 메인 */
.intro{position: relative;}
.product_sec .fp-overflow{height: 100%;}
.product_sec .fp-overflow .inner{padding-top: 12%;}
h1 { font-size: 6em; font-size: calc(2em + 2vw); font-family: arial, helvetica; margin: 0; }
.mid_1 .intro p { width: 100%; font-size: 1.65em; }
.section { font-family: arial,helvetica; color: #fff; text-align:center;}
main#main_slider { height:650px; position: relative; }
.m_slide { height:100%; width: 100%; opacity: 0; position: absolute;transition: all 1s ease; display: flex; align-items: center; justify-content: flex-start; font-size: 3em; background-repeat: no-repeat; background-size: cover; }
.m_slide:nth-child(1) { background-image: url('../img/visual_img01.png'); }
.m_slide:nth-child(2) { background-image: url('../img/visual_img01.png'); }
.m_slide:nth-child(3) { background-image: url('../img/visual_img01.png'); }
.m_slide.active { left: 0; opacity: 1; z-index: 1; }
.m_slide__title{width: 80%; margin: 0 auto;}
.m_slide__title .b_tit{
  font-size:5rem;
  font-weight: 600;
}
.m_slide__title .s_tit{padding-top:2rem;}
.m_slide__title .s_tit p{font-size:22px;}

.mid_1 .controls { position: absolute; bottom: 80px; left: 100px; z-index:9; display: flex; align-items: center; gap: 20px; }
.mid_1 #prev, #next { font-size: 2em; background: none; border: none; cursor: pointer; }
.mid_1 #slide-number { font-size: 1.2em; }
.mid_1 .progress-bar { display: none;width: 360px; height: 3px;background: rgba(255, 255, 255, 0.26);overflow: hidden; position: relative; }
.mid_1 .progress { height: 100%; width: 0%; background: #ffffff; transition: width linear; }

.fp-section { background-repeat: no-repeat; background-size: cover; }
.fp-section:nth-child(2) { background-image: url('../img/m_section01_bg.jpg'); }
.fp-section:nth-child(3) { background-image: url('../img/m_section02_bg.jpg'); }
.fp-section:nth-child(4) { background-image: url('../img/m_section03_bg.jpg'); }
.fp-section:nth-child(5) { background-image: url('../img/m_section04_bg.jpg'); }
.fp-section:nth-child(6) { background-image: url('../img/m_section05_bg.jpg'); }


@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.s_tit,
.b_tit,
.ss_tit {
  opacity: 0;
  text-align: left;
}

.s_tit h2,
.b_tit p,
.ss_tit p {
  text-align: left;
}

.m_slide.active .s_tit {
  animation: fadeUp 0.8s ease-out forwards;
  animation-delay: 0.0s;
}

.m_slide.active .b_tit {
  animation: fadeUp 0.8s ease-out forwards;
  animation-delay: 0.5s;
}

.m_slide.active .ss_tit {
  animation: fadeUp 0.8s ease-out forwards;
  animation-delay: 1.0s;
  font-size:1.5rem;
}

/* scroll down */

.scrollDown {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  z-index: 2;
}

.scrollDown__inner {
  display: flex;
  align-items: center;
  gap: 8px; /* 텍스트와 바 사이 간격 */
}

.scrollDown h4 {
  font-size: 14px;
  transform: rotate(90deg);
  transform-origin: left;
  white-space: nowrap;
  margin-bottom: 11rem;
}

.animated-bar {
  position: relative;
  width: 2px;
  height: 100px;
  background-color: rgba(225, 225, 225, 0.4);
  overflow: hidden;
}

.white-line {
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 0.6;
  animation: scrollDown 1.5s ease-in-out infinite;
}

@keyframes scrollDown {
  0% {
    top: -100%;
  }
  100% {
    top: 100%;
  }
}


/* content common */
.flex{display: flex;}
.flex-column{display: flex;flex-direction: column;}
.flex-center{display: flex;align-items: center;}

.font_b{font-weight: 600 !important;}

.main_tit_wrap{gap: 4rem;}
.main_tit_wrap .p_tit__area h2{margin-top: 0.85rem;font-size:22px; font-weight: 600;color:#327454;}
.main_tit_wrap .b_tit__area .tit{display:flex;flex-direction:column;font-size:44px; font-weight: 300;color:#1C1D1D;}
.main_tit_wrap .b_tit__area .txt{margin-top: 3rem;font-size:18px; font-weight: 300;color:#6C6C6C;}

/* section01 */

.arrow_btn {
  margin-top: 20px;
}

.arrow {
  width:56px;
  height:56px;
  background: #F3F3F3;
  border: none;
  padding: 10px 14px;
  margin-right: 10px;
  cursor: pointer;
  border-radius: 50px;
}
.arrow:hover{background-color:#000000;transition: 0.2s;}

.cont_left{
  display: flex;
  width: 16%;
  margin-right: 4%;
  flex-direction: column;
  justify-content: space-between;
}
.slider-container {
  width: 100%;
  position: absolute;
  top: 0;
  right: -20%;
  overflow: hidden;
}

/* 스크롤바 스타일 */
.slider-container::-webkit-scrollbar {
  height: 6px;
}

.slider-container::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 3px;
}

.slider-container::-webkit-scrollbar-track {
  background-color: #eee;
}

/* ==================================
animation area
================================== */
/* Scroll Down(Animation) - arrow */
@keyframes scrollIcon {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(60%);
  }
  100% {
    transform: translateY(0);
  }
}
/* 흐르는 배경 */
@keyframes flowAni {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

.back-to-position {opacity: 0;transition: 1s;}

.back-to-position.to-right {transform: translateX(-150px);}
.back-to-position.to-left {transform: translateX(150px);}
.back-to-position.to-top {transform: translateY(150px);}
.back-to-position.to-btm {transform: translateY(-150px);}
.show .back-to-position {opacity: 1;transform: translateX(-150px);}
.show .back-to-position {opacity: 1;transform: translateY(0);}
.show .back-to-position.delay-0 {transition-delay: 0s;}
.show .back-to-position.delay-1 {transition-delay: 0.3s;}
.show .back-to-position.delay-2 {transition-delay: 0.6s;}
.show .back-to-position.delay-3 {transition-delay: 0.9s;}
.show .back-to-position.delay-4 {transition-delay: 1.2s;}
.show .back-to-position.delay-5 {transition-delay: 1.5s;}
.show .back-to-position.delay-6 {transition-delay: 1.8s;}

/* ==================================
animation area : end
================================== */


.top__btn { position: fixed; bottom: 2rem; right: 2rem; z-index: 3; opacity: 0.4; }
.top__btn:hover { opacity: 1; transition: 0.2s; }


/* ==================================
footer
================================== */
.footer {
  background-color: #14181C;
}
.footer .inner{
  width:80%;
  margin:0 auto;
  padding:7rem;
  color:#ffffff;
  display: flex;
  justify-content: space-between;
  gap: 3rem;
}
.footer .inner .f_logo{width:216px;}
.footer .inner .f_logo img{width:100%;}
.footer .inner .f_content{
  width:80%;
  display: flex;
  justify-content: space-between;
}
.footer .inner .f_content ul{
  display: flex;
  gap: 42px;
  margin-bottom: 3rem;
}
.footer .inner .f_content ul li{
  font-size:20px;
  font-weight: 600;
}
.footer .inner .f_content p{
  font-size:18px;
  line-height: 180%;
  display: flex;
}
.footer .inner .f_content p span{
  width:30px;
  display: flex;
  flex-direction: row;
  position: relative;
}
.footer .inner .f_content p span:after{
  content: "";
  background-color: #5D5D5D;
  width:1px;
  height: 18px;
  position: absolute;
  left: 50%;
  top: 8px;
}
.footer .inner .f_content .copy{font-size:1.6rem;margin-top:3rem;color:#A0A0A0;}
.footer .inner .f_content a{font-size:1.8rem;font-weight:600;color:#ffffff}

/* ==================================
footer : end
================================== */

/* 반응형 */
@media screen and (max-width:이너값){
}
@media screen and (max-width:1200px){
}
@media screen and (max-width:1024px){
}
@media screen and (max-width:780px){
}
@media screen and (max-width:480px){
}
@media screen and (max-width:280px){
}