@charset "utf-8";


@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap');


/* body::after{content: ''; display: inline-block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 500; opacity: 0.3;  background: linear-gradient(180deg, rgba(0,0,0,1), rgba(255,255,255,0) 48.71%); }*/
.main .content::after{content: ''; display: inline-block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 80; opacity: 0.3;  background: linear-gradient(180deg, rgba(0,0,0,1), rgba(255,255,255,0) 48.71%); }


/* fixed_tit */
.fixed_tit{position:fixed; z-index:99; left:calc(50% - 700px); top:15%; }
.fixed_tit span{display:block; font-size:18px; font-weight:300; letter-spacing:0; color:rgba(255,255,255,0.4); }
.fixed_tit p{font-size:22px; font-weight:300; letter-spacing:-0.025em; color:rgba(255,255,255,0.9); line-height:35px; margin-top:20px;}

.bg_img{position:fixed; right:0; top:0; height:100vh; width:50%; overflow:Hidden; z-index:10;}
.bg_img ul { width:100%; height:100%; transition:all 0.5s; }
.bg_img ul li{display:block; position:absolute; left:0; top:-100%; width:100%; height:100%; z-index:0; transition:all 0.5s; }
.bg_img img{position:absolute; left:50%; top:50%; height:100% !important; width:100%; transform:Translate(-50% , -50%)}
/* .bg_img ul li.top_agu img{top: 52%;} */

.bg_img ul li:nth-of-type(1){top:0; }
.fp-viewing-01 .bg_img ul li:nth-of-type(1){top:0; z-index:2;}

.fp-viewing-02 .bg_img ul li:nth-of-type(1){top:100%; }
.fp-viewing-02 .bg_img ul li:nth-of-type(2){top:0;  z-index:2;}

.fp-viewing-03 .bg_img ul li:nth-of-type(3){top:0;  z-index:2;}
.fp-viewing-03 .bg_img ul li:nth-of-type(2){top:100%; }
.fp-viewing-03 .bg_img ul li:nth-of-type(1){top:100%; }
.fp-viewing-03 .bg_img ul li.top_agu img{top: 52%;}

.fp-viewing-04 .bg_img ul li:nth-of-type(4){top:0;  z-index:2;}
.fp-viewing-04 .bg_img ul li:nth-of-type(3){top:100%; }
.fp-viewing-04 .bg_img ul li:nth-of-type(2){top:100%; }
.fp-viewing-04 .bg_img ul li:nth-of-type(1){top:100%; }

.main_tit ul li p{display: block;}
.main_tit ul li .f63{font-size: 63.76px; color: rgba(255,255,255,0.4);}
.main_tit ul li .f120{font-size: 120px; color: rgba(255,255,255,0.3);}
.main_tit ul li .op09{ color: rgba(255,255,255,0.6);}

.main_tit{position:fixed; left:38%; top:50%; transform:translate(-50% , -50%); z-index:20; text-align:right;}
.main_tit ul li{display:none;}
.main_tit h4{margin:0; font-size:130px; font-weight:900; letter-spacing:0; color:#ffffff; line-height:1; opacity:0;}

.fp-viewing-01 .main_tit ul li:nth-of-type(1){display:block;}
.fp-viewing-01 .main_tit ul li:nth-of-type(1) h4{animation:goDown 0.3s ease-in-out 0.3s forwards;}
.fp-viewing-02 .main_tit ul li:nth-of-type(2){display:block;}
.fp-viewing-02 .main_tit ul li:nth-of-type(2) h4{animation:goDown 0.3s ease-in-out 0.3s forwards;}
.fp-viewing-03 .main_tit ul li:nth-of-type(3){display:block;}
.fp-viewing-03 .main_tit ul li:nth-of-type(3) h4{animation:goDown 0.3s ease-in-out 0.3s forwards;}

.fp-viewing-04 .main_tit ul li:nth-of-type(4){display:block;}
.fp-viewing-04 .main_tit ul li:nth-of-type(4) h4{animation:goDown 0.3s ease-in-out 0.3s forwards;}

.bot{position:fixed; left:80px; bottom:15px; z-index:20;}
.bot ul li{opacity:0; display:none;}
.bot p{font-size:24px; font-weight:bold; letter-spacing:-0.025em; color:rgba(255,255,255,0.8);}
.bot span{display:block; font-size:18px; font-weight:400; letter-spacing:-0.025em; color:rgba(255,255,255,0.7); margin-top:15px;}

.fp-viewing-01 .bot ul li:nth-of-type(1){ display:block ;animation:goUp 1.2s ease-in-out 0.7s forwards;}
.fp-viewing-02 .bot ul li:nth-of-type(2){display:block ;animation:goUp 1.2s ease-in-out 0.7s forwards;}
.fp-viewing-03 .bot ul li:nth-of-type(3){display:block ;animation:goUp 1.2s ease-in-out 0.7s forwards;}
.fp-viewing-04 .bot ul li:nth-of-type(4){display:block ;animation:goUp 1.2s ease-in-out 0.7s forwards;}

/* main_con */
.main_con01{background:url(/img/main_leftnew_01.jpg) no-repeat; background-size: 50% auto; background-position: left center;}
.main_con02{background:url(/img/main_leftnew_02.jpg) no-repeat; background-size: 50% auto; background-position: left center;}
.main_con03{background:url(/img/main_leftnew_03.jpg) no-repeat; background-size: 50% 100%;}

.main_con{position: relative;}
.main_con .txt_box{position: absolute; bottom: 100px; left: 70px; max-width: 480px; color: #fff;}
.main_con .txt_box h6{font-size: 20px; letter-spacing: -0.05em; line-height: 1.5em; font-weight: 800; word-break: keep-all; font-family: 'Spoqa Han Sans Neo', 'sans-serif'; opacity: 0.75;}
.main_con .txt_box p{font-size: 16px; letter-spacing: 0em; line-height: 1.625em; font-family: 'Pretendard'; opacity: .8;}

.main_con .big_tit{position: absolute; top: 50%; left: calc(50% - 250px); z-index: 10; transform: translate(-50%,-50%); color: #fff; text-align: right; pointer-events: none;}
.main_con .big_tit p{font-size: 28px; letter-spacing: 0em;}
.main_con .big_tit h2{font-size: 110px; letter-spacing: -0.025em; font-weight:400; line-height: 1em; margin-top: 20px;}
.main_con .big_tit h2 i{font-style: normal; font-size: 80px;}
.main_con .big_tit h2 span{line-height: 1;}
.main_con .big_tit .op30{opacity: .3;}
.main_con .big_tit .op50{opacity: .5;}
.main_con .big_tit .op60{opacity: .6;}
.main_con .big_tit .op74{opacity: .74;}
.main_con .big_tit .op80{opacity: .8;}

.main_con .big_tit .mr5{margin-right: -5px;}

.main_con .big_tit:before{width: 100vw; height: 100vw; position: absolute; left: 50%; top: 50%; content: ''; z-index: 11; transform: translate(-50%,-50%);}

@keyframes goUp{
	0% {opacity:0; transform:translateY(30px); -webkit-transform:translateY(30px); -moz-transform:translateY(30px); -ms-transform:translateY(30px); -o-transform:translateY(30px);}
	100% {opacity:1; transform:none;}
}
@keyframes goDown{
	0% {opacity:0; transform:translateY(-100px); -webkit-transform:translateY(-100px); -moz-transform:translateY(-100px); -ms-transform:translateY(-100px); -o-transform:translateY(-100px);}
	100% {opacity:1; transform:none;}
}

@media (min-width:1920px) and (max-height:1000px){
	.bg_img img{width:100%; height:auto;}
}
@media (min-width:2300px) and (min-height:1000px){
	.bg_img img{width:100%; height:auto;}
}
@media all and (max-width:1500px){
	.fixed_tit{left:40px;}
	/* .fixed_tit p{font-size:36px;} */
	.main_tit h4{font-size:100px;}
	.bot{left:15px;}
}
@media all and (max-height:1000px){
	.fixed_tit{left:0; top:100px; padding:0 40px; box-sizing:border-box;}
	.fixed_tit span{font-size:16px;}
	/* .fixed_tit p{font-size:34px;} */
	.main_tit h4{font-size:80px;}
	.bot{left:65px; bottom:15px;}
	.main_con01,
	.main_con02{background-size: 50% 100%;}


}
@media all and (max-width:1000px){
	.main_con .big_tit{left: calc(50% - 110px);}
	.main_con .big_tit p{font-size: 18px;}
	.main_con .big_tit h2{font-size: 60px;}
	.main_con .big_tit h2 i{font-size: 40px;}
	.main_con .txt_box{position: absolute; bottom: 0; left: 0; max-width: 50%; color: #fff; padding: 10px; box-sizing: border-box;}
	.main_con .txt_box h6{font-size: 16px; letter-spacing: -0.05em; line-height: 1.5em; font-weight: 800;}
	.main_con .txt_box p{font-size: 14px; letter-spacing: -0.05em; line-height: 1.333em;}
}
@media all and (max-width:800px){
	.fixed_tit{left:0; top:60px; padding:0 30px; box-sizing:border-box;}
	.fixed_tit span{font-size:16px;}
	.fixed_tit p{font-size:26px;}
	.main_tit h4{font-size:50px;}
	.bot{left:0; width:100%; padding:0 10px; box-sizing:border-box;}
	.bot br{display:none;}
	.bot p{font-size:22px;}
	.bot span{font-size:18px; word-break:keep-all;}
	.main_tit ul li .f63{font-size: 41.76px; }
    .main_tit ul li .f120{font-size: 73px;}
}

/* 스크롤 다운 버튼 */
.scroll_btn{position: absolute; bottom: 100px; left: 45%; transform: rotate(270deg);  color: #fff; font-weight: 800; z-index: 10; font-size: 14px; display: inline-block;}
.scroll_btn .scr_icon{display: inline-block; width: 16px; rotate: 90deg;transform: translateX(3px);  vertical-align: bottom; height: 24px; margin-right: 15px; background: url(/img/scr_icon.png)no-repeat center/cover;}


/* fp-nav */
#fp-nav{position:fixed; top:50%; left:0; transform:translateY(-50%); margin-top:0 !important; z-index: 81;}
#fp-nav ul li + li{margin-top:90px;}
#fp-nav ul li a.active{}
#fp-nav ul li a.active:before{ Background:#fff;}

#fp-nav ul li a{border-bottom: 1px solid #fff; height: 1px; width: 0; display: flex; align-items: center; padding-left:60px; font-size:18px; font-weight:bold; letter-spacing:0; color:rgba(255,255,255,0.3); position:relative; transition:all 0.3s;}
#fp-nav ul li span{margin-left: 10px; }
#fp-nav ul li a::before {content: ''; position:absolute; left:0; top:50%; transform:TranslateY(-50%); width:50px; height:1px; display: block; height: 100%; width: 0; background-color: #fff; }
#fp-nav ul li a.active{height: 3px; border: 1px solid #fff; padding-left:130px; color:#fff; }
#fp-nav ul li a.active::before {animation: progress 5s linear infinite;}
#fp-nav ul li a.pause::before{ animation: none;}

#fp-nav ul li a span.fp-sr-only{position:relative;}
#fp-nav ul li a span.fp-sr-only:after{content:none; position:absolute; width:22px; height:22px; border-radius:50%; border: 1px solid rgba(255,255,255,.5); background-repeat:no-repeat; background-position:center center; background-image: url(/img/pause_btn01.png); cursor: pointer; margin-left: 5px;}
#fp-nav ul li a.active span.fp-sr-only:after{content: '';}
#fp-nav ul li a.pause span.fp-sr-only:after{background-image: url(/img/play_btn01.png);}

@media all and (max-width:1000px){
	#fp-nav ul li + li{margin-top:20px;}
	#fp-nav ul li a{padding-left:20px;}
	#fp-nav ul li a:before{width:10px;}
	#fp-nav ul li a.active{padding-left:25px;}
	#fp-nav ul li a.active:before{width:15px;}
}
/* progress */
.main .progress_wrap {border: 1px solid #fff; margin-top: 20px; height: 5px; width: 470px;}
.main .progress_wrap::before {content: ''; display: block; height: 100%; width: 0; background-color: #fff;}
.main .progress_wrap.on::before {animation: progress 5s linear infinite;}

@keyframes progress {
	0% {width: 0;}
	100% {width: 100%;}
}

@media all and (max-width:768px){
	/* .bg_img{display: none;} */
	.main_con01,
	.main_con02,
	.main_con03{background-size: 100% 100%;}

	.main_con .txt_box{max-width: 100%;}
	.main_con .big_tit{left: 50%;}

	.scroll_btn{left: auto; right: 10px; bottom: 250px;}
	.main #header h1{margin-left: 0;}

}

@media all and (max-width: 768px) {
  .bg_img {
    position: fixed;
    top: unset;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50dvh;
    z-index: 1;
    overflow: hidden;
  }

  .main_con {
  height: 100dvh !important;
  position: relative;
  display: flex;
  flex-direction: column;
  }

  .main_con .content_half {
  height: 50dvh;
  width: 100%;
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  /* padding: 20px; */
  box-sizing: border-box;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* gap: 20px; */
  z-index: 2;

  position: relative;
  }

  .content_half.heigth_cus {
	 height: 51dvh;
  }


  .main_con01 .content_half {
    background-image: url('/img/main_leftnew_01.jpg');
  }

  .main_con02 .content_half {
    background-image: url('/img/main_leftnew_02.jpg');
  }

  .main_con03 .content_half {
    background-image: url('/img/main_leftnew_03.jpg');
  }


  /* .main_con .big_tit {
    position: absolute;
    width: 100%;
    max-width: 100%;
    color: white;
    z-index: 3;
	transform: translate(-50%,-50%);
	left: 50%;
	top: 50%;
	right: unset;
  } */

    .main_con .txt_box {
		   position: absolute;
    width: 100%;
    max-width: 100%;
    text-align: left;
    color: white;
    z-index: 3;

	transform: translateX(-50%);
	left: 50%;
	bottom: 5px;
	}

  .main_con .big_tit h2 {
    font-size: 39px;
    line-height: 1.2em;
     font-family: 'Roboto', serif;
  }

      .main_con .big_tit h2 i {
        font-size: 32px;
             font-family: 'Roboto', serif;
    }


  .main_con .big_tit p {
    font-size: 16px;
  }

  .main_con .txt_box h6 {
    font-size: 15px;
    line-height: 1.5;
  }

  .main_con .txt_box p {
    font-size: 13px;
    line-height: 1.5;
  }

  .scroll_btn {
    position: fixed;
    bottom: 20px;
    right: 15px;
    z-index: 999;
  }
  .scroll_btn {
    display: none;
  }
  #fp-nav {
    top: 22%;
  }
}