/* ---------------- 공통 ------------------- */
.swiper { width: 100%; height: 100%;}
.swiper-slide {  font-size: 18px;  display: flex; justify-content: center; align-items: center;}
.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover;}

.m_tit_wrap{padding-top:150px; padding-bottom:100px;    text-align: center;}
.m_tit_wrap h3{font-size:58px; line-height:1.1; font-weight:500;}
.m_tit_wrap p{font-size: 22px;padding-top:40px;opacity:0.9}
.btn_style1{position:relative; display: flex;align-items: center; cursor:pointer; width:180px;}

.btn_style1 i{position:relative; display:inline-block;transition:all 0.3s; left:0;  width: 40px; margin-right: 18px; background: #8dcda2; border-radius: 50%; padding: 10px;}
.btn_style1 span{font-size: 18px;position:relative; left:0;transition:all 0.3s;display:inline-block;    vertical-align: top; padding-top: 7px;}
.scroll_wrap {position:absolute;}

.wrap.overauto{overflow-x:inherit;}

/* main01 */

:root {--sec2_Height : 150vh;  /* 섹션 스크롤모션 범위기준 */}
body {color:#fff; }
#wrap {width:100%;}
#wrap .main_ani {overflow:hidden; position:relative; width:100%; height:100vh; }
#wrap section .sec1, #wrap section .sec2{}
#wrap section .inner {width:100%; height:100%;}

#wrap section.sec2 {height:var(--sec2_Height)}
#wrap section.sec2 .ani_section{opacity:0; position:absolute; left:0; top:20%; width:100%; font-size:40px; text-align:center; transform: translateY(30px); -webkit-transform: translateY(30px); transition: all 0.2s ease;}
#wrap section.sec2 .ani_section.sec2_tit1 {opacity:1; transform: translateY(0); -webkit-transform: translateY(0)}
.m1_txt_box{    position: absolute; z-index: 100; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; width:100%;}
:lang(en) .m1_txt_box{width: 1140px; max-width: 100%;}
.m1_txt_box h3{font-size: 50px; font-weight:400; padding-bottom:20px;}
.m1_txt_box p{font-size: 22px; line-height:1.8}
#wrap section.sec2 .ani_section .gin_mov{  aspect-ratio: 16 / 9;    width: 748px; position: absolute; right: 0;}
#wrap section.sec2 .ani_section .gin_mov iframe{display: block;width:100%; height:100%;}


/* w1440 부터 main01 애니메이션 */
.w1400{display:none;}
.brand_top .background-sticky{position:sticky;z-index: 1;	top: 0; height: 100vh;background:url(../img/aws/166741068032451.jpg) no-repeat; background-size: cover; background-position: center;}
.brand_top .brand_cont_wrap{position: relative;z-index: 1;margin: -100vh auto 0;box-sizing: border-box;}
.brand_top .brand_cont_wrap > div{height:100vh; color:#fff;}
.br_type01{  position: relative;}
.br_type01 > div{position: absolute;  top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center;}
.br_type01 .br_tit{}
.br_type01 .br_tit h3{font-size: 35px;}
.br_type01 .br_tit p{font-size: 18px; padding-top:12px;}
.brand_top .br_type02{position:relative; height:100%; background: url(../img/aws/166741215045185.png) no-repeat; background-size:cover; background-position: center;}
.brand_top .br_type02 > p{text-align: center; font-size: 35px; padding: 100px 0px;}
.brand_top .br_type02 .br_txtbox{display:flex;    align-items: center;}
.brand_top .br_type02 .br_txtbox .in_ani{width: 50%;}
:lang(en) .brand_top .br_type02 .br_txtbox .in_ani{padding-right: 24px;}
.brand_top .br_type02 .br_txtbox .in_ani span{font-size: 34px; padding-bottom: 10px; display: block;}
.brand_top .br_type02 .br_txtbox .in_ani p{font-size: 18px;}
.brand_top .br_type02 .br_txtbox .sec2_tit3{width: 50%; aspect-ratio: 16 / 9; }
.brand_top .br_type02 .br_txtbox .sec2_tit3 iframe{display: block;width:100%; height:100%;}


/* main02 */
.main02 .sec2_tit1 .in_ani p{font-size: 30px;}
:lang(en) .main02 .sec2_tit1 .in_ani p{width: 760px; margin: 0 auto; max-width: 100%;}


.main02 .sec2_tit1 .in_ani strong{display:block; font-size: 40px;}
.main02 .sec2_tit2{}
.main02 .sec2_tit2 .in_ani{text-align: left;position: relative; z-index: 1;}
.main02 .sec2_tit2 .in_ani > span{font-size: 50px;}
.main02 .sec2_tit2 .in_ani div{}
.main02 .sec2_tit2 .in_ani div p{font-size: 24px; padding: 30px 0px 50px; line-height: 1.8;font-weight: 300; text-shadow: 0 0 2px #fff;}
:lang(en) .main02 .sec2_tit2 .in_ani div p{width: 620px;}
.main02 .sec2_tit2 .in_ani div a{}
.main02 .sec2_tit2 .in_ani div .btn_style1{z-index:100;}
#wrap section.sec2 .ani_section.sec2_tit3{ top: -12%; left: 50%; transform: translateX(-50%) !important;z-index:1;}
.main02 .sec2_tit3{   }
.main02 .sec2_tit3 i{display:block;box-shadow: 0 0 15px rgb(147 147 147 / 50%);}
.sec_tit_wrap{}



/* main03 */
.main{position:relative;  background:#131313;}
.main03{position:relative; z-index:1; height: auto !important;}
/* .main03:before{position: absolute; content: ""; width: 100%; height: 255px; top: -255px; left: 0; background: linear-gradient(to bottom, rgb(255 255 255 / 0%) 0%, #131313);} */
/* .main03:before{position: absolute; content: ""; width: 100%; height: 400px; top: -395px; left: 0; background: url(../img/aws/166128481012214.png) no-repeat;} */
.main03 .item_swiper{}
.main03 .item_swiper .swiper-slide{position:relative; align-items: flex-start;}
.main03 .item_swiper .swiper-slide.swiper-slide-active{opacity:1;}
.main03 .item_swiper .swiper-slide > a{display:block; height:620px;width:100%; cursor:pointer;}
.main03 .item_swiper .swiper-slide .txt_box{    background: #131313; width: 40%; height: 100%;position: absolute; right: -1px; top: 0; opacity:0; transition: all.3s;;}
.main03 .item_swiper .swiper-slide .txt_box h4{font-size: 40px; color:#fff; padding-bottom:40px; line-height:1;}
.main03 .item_swiper .swiper-slide .txt_box > div{padding-left:95px; padding-top:70px}
.main03 .item_swiper .swiper-slide .txt_box div p{font-size: 20px; word-break:keep-all; color:#eee}
/* .main03 .item_swiper .swiper-slide.swiper-slide-active{width:1200px !important;} */
.main03 .item_swiper .swiper-slide.swiper-slide-active .txt_box{opacity:1;}
.main03 .item_swiper .txt_box .slider_btn_wrap{position:absolute; bottom:100px; width: 100%; display: flex; align-items: center; justify-content: space-between;}
.main03 .item_swiper .txt_box .slider_btn_wrap ul{display:flex;}
.main03 .item_swiper .txt_box .slider_btn_wrap ul li{cursor:pointer}
.main03 .item_swiper .txt_box .slider_btn_wrap ul li i{display:block; width:45px; background:#8dcda2; padding:12px; border-radius:50%;}
.main03 .item_swiper .txt_box .slider_btn_wrap ul li:first-child{transform: rotate(180deg); margin-right:10px;}
.main03 .item_swiper .txt_box .slider_btn_wrap div{position:relative; width:65px; height:65px;}
.main03 .item_swiper .txt_box .slider_btn_wrap div span{position:absolute; font-size: 22px; font-weight:600}
.main03 .item_swiper .txt_box .slider_btn_wrap div span.now{top: 0; left: 0;}
.main03 .item_swiper .txt_box .slider_btn_wrap div span.total{opacity:50%; bottom:0; right:0;}
.main03 .item_swiper .txt_box .slider_btn_wrap div em{    display: inline-block; width: 70px; background: #fff; opacity: 50%; height: 2px; transform: rotate(-45deg); position: relative; left: 0px; bottom: -14px;}


.main04{position:relative; background:#131313}
.main04:before{position: absolute; content: ""; z-index:1; width: 100%; height: 400px; top: -395px; left: 0; background: url(../img/aws/166128481012214.png) no-repeat;}
.main04 .m04_content{position:relative;}
.main04 .m04_content ul{display:flex;position:relative; overflow:hidden;  height:705px; background-position: center; background-size: cover !important; list-style: none; padding: 0; margin: 0; background:url(../img/aws/166058339685958.jpg) no-repeat;}
.main04 .m04_content ul li{position:relative; width:33.33%; padding:204px 0px; border-right: 1px solid rgb(255 255 255 / 50%);}
.main04 .m04_content ul li:before{position: absolute; content: ""; background: rgb(0 0 0 / 24%);transition:all 0.3s; opacity:0; width: 30%; height: 100%; left: 50%; transform:translateX(-50%); top: 0;}
.main04 .m04_content ul li:hover:before{opacity:1;width:100%;}
.main04 .m04_content ul li > div{position:relative; padding:0px 16px;display: flex; flex-direction: column; align-items: center;}
.main04 .m04_content ul li > div h4{  position: relative; top:0px; color: #FFF;  transition:all 0.3s;padding-bottom:35px; text-shadow: 0px 4px 9px rgba(0, 0, 0, 0.70); font-size: 35px;  font-weight: 400; line-height: normal;}
:lang(zh) .main04 .m04_content ul li > div h4{font-family: "Noto Serif SC", serif !important;}
.main04 .m04_content ul li > div > div{position:relative; padding-top:35px; padding-bottom:50px;}
.main04 .m04_content ul li > div > div span{opacity:0;transition:all 0.3s; position: absolute; left: 50%; top:30px; transform: translateX(-50%);display:block;width:9px; height:9px; background:#8dcda2; border-radius: 50%;}
.main04 .m04_content ul li > div > div span:before{position:absolute; content:"";width:9px; height:9px;     background: rgb(141 205 162 / 40%); border-radius:50%; top:0px;}
.main04 .m04_content ul li > div > div span:after{position:absolute; content:"";width:9px; height:9px;     background: rgb(141 205 162 / 70%); border-radius:50%; top:0px}
.main04 .m04_content ul li > div > div p{color: #FFF;transition:all 0.3s; text-align: center; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.35); font-size: 20px; font-weight: 500;}
/* .photo { z-index:-1; position: absolute; width: 100%; height: 100%; top: 0; left: 0;
  background: url('../img/aws/1660084675617.jpg') no-repeat; background-size: cover; background-position: center; transition: 0.5s;} */
/* .main04 .m04_content ul li:nth-child(1):before{z-index:-9; position:absolute; content:""; width:100%; height:100%; left:0; top:0; } */
.main04 .m04_content ul li > div a{position:relative; opacity:0; bottom:-200px; transition:all 0.4s;justify-content: center;}

@media (hover: hover) {
  .main04 .m04_content ul li:hover > div h4{   top: -15px;}
  .main04 .m04_content ul li:hover a{bottom:0; opacity:1;}
  .main04 .m04_content ul li:hover > div > div p{padding-top: 35px;}
  .main04 .m04_content ul li:hover > div > div h4{padding-top:35px;}
  .main04 .m04_content ul li:hover > div > div span{opacity:1;left: 50%; top:30px;}
  .main04 .m04_content ul li:hover > div > div span:before{ top:-50px;}
  .main04 .m04_content ul li:hover > div > div span:after{ top:-25px}
}
.main05{position:relative; padding-bottom:120px; background:#131313;}
.main05 .m05_bg1{display: block; position: absolute; top: -90px; right: 0; }
.main05 .m05-cont{position:relative; display: flex; align-items: center;}
.main05 .m05-cont > span{position:absolute; display:block;transform: rotate(-90deg); color: rgba(255, 255, 255, 0.03);font-size: 100px; font-weight: 400;top: 137px; left:70px;}
.main05 .m05-cont > div{width:100%;}
.main05 .m05-cont > div ul{padding-bottom:50px;}
.main05 .m05-cont > div ul li{}
.main05 .m05-cont > div ul li > div{  cursor:pointer;  display: flex; align-items: flex-end; justify-content: space-between; padding: 16px 0px;border-bottom:1px solid rgba(255, 255, 255, 0.50);}
.main05 .m05-cont > div ul li > div > div{}
.main05 .m05-cont > div ul li > div > div span{color: rgba(245, 245, 245, 0.70); font-size: 18px; font-weight: 400;}
.main05 .m05-cont > div ul li > div > div p{color: #FFF; font-size: 20px; font-weight: 500;}
.main05 .m05-cont > div ul li > div i{position:relative; display: block; width:20px; transition:all 0.3s;}
.main05 .m05-cont > div .btn_style1{display:flex; justify-content: flex-end; margin: 0 0 0 auto;}
@keyframes fadeInLeft {
  0% {
      opacity: 0.5;
      transform: translate3d(-70%, 0, 0);
  }
  to {
      opacity: 1;
      transform: translateZ(0);
  }
}
@media (hover: hover) {
  .btn_style1:hover i{animation: fadeInLeft 1s;}
  .btn_style1.type03:hover i{animation:none}
  .main05 .m05-cont > div ul li:hover > div i{animation: fadeInLeft 1s;}
}



/* ********************************************* *
* 1660px
* ********************************************* */
@media screen and (max-width: 1660px){

  /* .w1920{display:none;}
  .w1660{display:block;} */


  .scroll_wrap svg image.sky{height:130vh}
  .scroll_wrap svg image.ginseng{height:120vh;}
  .scroll_wrap svg image.mountBg{height: 110vh;}
  .m1_txt_box h3{font-size: 40px;}
  .main02 .sec2_tit1 .in_ani p{    font-size: 27px;}
  .m1_txt_box p{font-size: 18px;}
  .main05 .m05-cont > span{left:-70px;}
  
}


/* ********************************************* *
* 1660px
* ********************************************* */
@media screen and (max-width: 1660px){

}

/* ********************************************* *
* 1400px
* ********************************************* */
@media screen and (max-width: 1400px){

  .w1920{display:none;}
  .w1400{display:block;}

  .main03 .item_swiper .swiper-slide > a{height: 500px;}
  .main03 .item_swiper .swiper-slide .txt_box h4{font-size: 30px;    padding-bottom: 20px;}
  .main03 .item_swiper .swiper-slide .txt_box div p{font-size: 16px;}
  .main03 .item_swiper .txt_box .slider_btn_wrap div span{    font-size: 16px; font-weight: 500;}
  .main03 .item_swiper .txt_box .slider_btn_wrap ul li i{    width: 38px;}
  .main03 .item_swiper .swiper-slide .txt_box div p br{display:none;}
  .main03 .item_swiper .swiper-slide .txt_box > div{padding-left:45px;}

  .main04 .m04_content ul{height: 605px;}
  .main04 .m04_content ul li > div h4{font-size: 30px;}
  .main04 .m04_content ul li{padding:200px 0px;}

  .main05 .m05-cont > span{display:none;}
  .main05 .m05_bg1{width:365px;}
  .m_tit_wrap h3{font-size: 48px; line-height: 1;}
  .m_tit_wrap p{padding-top:24px;}
  .main04 .m04_content ul li > div h4{padding-bottom:24px;}
  .main04 .m04_content ul li > div > div{padding-top:24px;}
  .main04 .m04_content ul li > div > div p{font-size: 18px;}
}

/* ********************************************* *
* 1200px
* ********************************************* */
@media screen and (max-width: 1200px){
  .btn_style1 span{font-size: 16px;}
  .btn_style1 i{width: 35px;    margin-right: 14px;}

  .main03 .item_swiper .swiper-slide > a{height:420px;}
  .main03 .item_swiper .txt_box .slider_btn_wrap{bottom:30px;}
  .main03 .item_swiper .swiper-slide .txt_box h4{font-size: 26px;}
  .main03 .item_swiper .swiper-slide .txt_box > div{padding-top:40px;}

  .main04 .m04_content ul{height: 500px;}
  .main04 .m04_content ul li{padding: 130px 0px;}
  .main04 .m04_content ul li > div h4{font-size: 26px;}
  .main04 .m04_content ul li > div > div span:before,.main04 .m04_content ul li > div > div span:after, .main04 .m04_content ul li > div > div span{width:6px; height:6px;}
  .main04 .m04_content ul li > div > div p{font-size: 16px;}
  
}


/* ********************************************* *
* 1024px
* ********************************************* */
@media screen and (max-width: 1024px){

  .br_type01 .br_tit h3{font-size: 30px;}
  .brand_top .br_type02 > p{font-size: 30px; padding-top:0px;}
  .brand_top .br_type02 .br_txtbox .in_ani span{font-size: 30px;}
  .brand_top .br_type02 .br_txtbox .in_ani p{font-size: 16px;}

  .main03 .item_swiper .txt_box .slider_btn_wrap div{width: 50px; height: 65px;}
  .main03 .item_swiper .txt_box .slider_btn_wrap div em{height: 1px;    width: 50px;}

  .m_tit_wrap{padding-top:100px; padding-bottom: 50px;}
  .m_tit_wrap p{font-size: 20px;}
  .main05 .m05_bg1{width: 285px; top: -50px;}
  .main05 .m05-cont > div ul li > div > div span{font-size: 16px;}
  .main05 .m05-cont > div ul li > div > div p{font-size: 18px;}
  .main05 .m05-cont > div ul li > div{padding:10px 0px;}
  .main05 .m05-cont > div ul li > div i{width: 16px;}

  .main05{padding-bottom: 100px;}
}

/* ********************************************* *
* 1024px
* ********************************************* */
@media screen and (max-width: 1024px){
  .main04 .m04_content ul{height: 450px;}
  .main04 .m04_content ul li{padding: 100px 0px;}
  .main04 .m04_content ul li > div > div{padding-bottom: 30px;}
  .main03 .item_swiper .swiper-slide{    padding: 0px 16px;}
  .main03 .item_swiper .swiper-slide > a{width: 60%;}
  .main03 .item_swiper .swiper-slide .txt_box{    position: relative;      right: inherit; top: inherit;  width: 40%;}
  .main03 .item_swiper .txt_box .slider_btn_wrap{    position: relative; bottom: 0;padding-top: 120px !important;}

  .main03 .item_swiper .swiper-slide .txt_box h4{font-size: 22px;}


}


/* ********************************************* *
* 860px
* ********************************************* */
@media screen and (max-width: 860px){
  .main04 .m04_content ul{flex-direction: column; height:inherit;}
  .main04 .m04_content ul li{width:100%; padding:24px 0px;    border-bottom: 1px solid rgb(255 255 255 / 28%);}
  .main04 .m04_content ul li > div{align-items: flex-start;}
  .main04 .m04_content ul li > div > div p{text-align: left; font-size: 15px;}
  .main04 .m04_content ul li > div > div p br{display:none;}
  .main04 .m04_content ul li > div > div span{display: none;}
  .main04 .m04_content ul li > div h4{padding-bottom:0px;    font-size: 20px; font-weight: 600;}
  .main04 .m04_content ul li > div > div{padding-bottom:16px; padding-top:10px;}
  .main04 .m04_content ul li > div a{    opacity: 1;    bottom: inherit;justify-content: flex-start;;}
  
}


/* ********************************************* *
* 768px
* ********************************************* */
@media screen and (max-width: 768px){
  .m_tit_wrap h3{font-size: 38px;}
  .m_tit_wrap p{ padding-top: 16px;   font-size: 17px;}

  .br_type01 .br_tit h3{font-size: 26px;}
  .br_type01 .br_tit p{font-size: 16px;}
  .brand_top .br_type02 > p{font-size: 26px;}
  .brand_top .br_type02 .br_txtbox .in_ani span{font-size: 24px; padding-bottom:4px;}

  .main03 .item_swiper .swiper-slide > a{width:50%; height:360px;}
  .main03 .item_swiper .swiper-slide .txt_box{width:50%;}
  .main03 .item_swiper .txt_box .slider_btn_wrap{padding-top: 80px !important;}
}


/* ********************************************* *
* 640px
* ********************************************* */
@media screen and (max-width: 640px){
  .m_tit_wrap h3{font-size: 30px;}

  .brand_top .br_type02 .br_txtbox{align-items: flex-start; flex-direction: column-reverse;}
  .brand_top .br_type02 .br_txtbox .in_ani{width:100%; padding-top:20px;}
  :lang(en) .brand_top .br_type02 .br_txtbox .in_ani{padding-right: 0;}
  .brand_top .br_type02 .br_txtbox .sec2_tit3{width:100%;}
  .brand_top .br_type02 .br_txtbox .in_ani p br{display:none;}
  .br_type01 .br_tit h3{font-size: 22px;}

  .main03{padding-bottom:100px;}
  .main03 .item_swiper .swiper-slide{flex-direction: column;}
  .main03 .item_swiper .swiper-slide > a{width: 100%; height: 280px;}
  .main03 .item_swiper .swiper-slide .txt_box{width:100%;}
  .main03 .item_swiper .swiper-slide .txt_box > div{padding-left:0px;}
  .main03 .item_swiper .txt_box .slider_btn_wrap{    padding-top: 20px !important;}

  .main05 {padding-bottom: 70px;}
  .main05 .m05-cont > div ul li > div > div span{font-size: 14px;}
  .main05 .m05-cont > div ul li > div > div p{    font-size: 16px;}

  .brand_top .br_type02 > p{padding: 50px 0px; font-size: 22px;}
  
}

/* ********************************************* *
* 500px
* ********************************************* */
@media screen and (max-width: 500px){

  .br_type01 .br_tit h3{font-size: 20px;}
  .br_type01 .br_tit p{font-size: 14px;}

  .main03 .item_swiper .swiper-slide > a{height:220px;}
  .main03 .item_swiper .swiper-slide .txt_box div p{font-size: 14px;}
  .main03 .item_swiper .swiper-slide .txt_box h4{font-size: 18px;    padding-bottom: 10px;}
  .main03 .item_swiper .txt_box .slider_btn_wrap div{width: 40px; height: 55px;}
  .main03 .item_swiper .txt_box .slider_btn_wrap div span{font-size: 14px;}
  .main03 .item_swiper .txt_box .slider_btn_wrap div em{width:40px;bottom: -8px;}

  .main04 .m04_content ul li{padding:20px 0px;}
  .main04 .m04_content ul li:before{display:none;}
  .main04 .m04_content ul li:hover > div > div p{padding-top:0px;}
  .main04 .m04_content ul li:hover > div h4{top: 0;}
  .main04 .m04_content ul li > div h4{font-size: 18px;}
  .main04 .m04_content ul li > div > div p{font-size: 14px;}
  .main04 .m04_content ul li > div > div{padding-bottom: 10px;}

  .m_tit_wrap{padding-top: 80px;padding-bottom: 40px;}
  .main05 .m05_bg1{    width: 165px; top: -30px;}
  .m_tit_wrap h3{font-size: 26px;}
  .m_tit_wrap p{padding-top: 10px; font-size: 15px;}
  .main05 .m05-cont > div ul li > div > div p{font-size: 15px;}
  .main05 .m05-cont > div ul li > div > div span{font-size: 13px;}
  .btn_style1 span{    font-size: 14px; padding-top:0px;}
  .btn_style1 i{width:30px;margin-right: 10px;}
  .main05 .m05-cont > div ul{padding-bottom:30px;}
  
}