@charset "utf-8";



.head-type1{text-align: center; margin-bottom: 111px; position: relative; font-size: 22px; font-size: 1.375em;}
.head-type1.mb1{margin-bottom: 60px;}
.head-type1 .h1{color: #0c254b; font-size: 40px; line-height: 1.25; font-weight: 600; position: relative; z-index: 1;}

.esg .head-type1{ padding-top: 100px;  overflow: hidden; }
.head-type1 .slide{font-size: 120px; line-height: 1; position: absolute; left: 100%; top: 40px; z-index: 0; color: #817a67; width: 2000px;font-weight: 600;opacity: 0.1;}


.btn-more1{ display: inline-flex; align-items: center; line-height: 1; color: #222; font-size: 22px; font-weight: 500; }
.btn-more1 i{ margin-left: 25px; font-size: 42px; }
.btn-more1:hover{opacity: 0.8;}
.btn-more1:hover i{ -webkit-animation: arr_rgh1 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s infinite both; animation: arr_rgh1 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s infinite both;}

@-webkit-keyframes arr_rgh1 {
 0% {
    -webkit-transform: translate(0, 0px);
    -moz-transform: translate(0, 0px);
    -o-transform: translate(0, 0px);
    -ms-transform: translate(0, 0px);
    transform: translate(0, 0px);
    opacity: 1;
  }
  70% {
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translate(50px, 0px);
    -moz-transform: translate(50px, 0px);
    -o-transform: translate(50px, 0px);
    -ms-transform: translate(50px, 0px);
    transform: translate(50px, 0px);
    opacity: 0;
  }
}
@keyframes arr_rgh1 {
  0% {
    -webkit-transform: translate(0, 0px);
    -moz-transform: translate(0, 0px);
    -o-transform: translate(0, 0px);
    -ms-transform: translate(0, 0px);
    transform: translate(0, 0px);
    opacity: 1;
  }
  70% {
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translate(50px, 0px);
    -moz-transform: translate(50px, 0px);
    -o-transform: translate(50px, 0px);
    -ms-transform: translate(50px, 0px);
    transform: translate(50px, 0px);
    opacity: 0;
  }
}


.line_bot_main1{position: absolute;left: -20px;bottom: -31px;z-index: -1;overflow: hidden;border-radius: 50%;padding: 10px 15px;width: 100%;}
.line_bot_main1 img{max-width:none;}

.wrap_rollring5{ width: 100%; overflow: hidden; position: relative; }
.wrap_rollring5 .inner_rolling5{}
.wrap_rollring5 .inner_rolling5 .swiper-container{width: 100%;}

.wrap_products_main{ position: relative; width: 100%; overflow: hidden; }
.wrap_products_main .area_lft{ width: 74.5312%; height: 970px; background-color: #011c4d; background-image: url(../images/main/bg_product1.jpg); background-position: 100% 100%; background-repeat: no-repeat; display: flex;align-items: center;}
.wrap_products_main .area_rgh{ position: absolute; right: 0; top: 60px; width:849px;}
.wrap_products_main  .tab_area{display: none; position: relative; width: 100%; overflow: hidden;}
.wrap_products_main  .tab_area.active{display: block;}

.wrap_products_main .area_lft .inner{width: 700px; padding-left:120px; color:#fff;}
.wrap_products_main .area_lft .h1{font-size:95px; line-height:1; font-weight:700;}
.wrap_products_main .area_lft .tab{font-size: 0;margin-top: 51px;}
.wrap_products_main .area_lft .tab a{
  width:150px; height:150px;box-sizing: border-box; opacity: 0.4; margin-right:17px; position:relative;display: inline-flex;justify-content: center;align-items: center;
  -webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.wrap_products_main .area_lft .tab a:after{
  position:absolute; left:0; top:0; width:100%; height:100%; border:1px #fff solid; content:"";
box-sizing: border-box;}
.wrap_products_main .area_lft .tab a span{color: #fff;font-size: 22px; z-index:2; position:relative;line-height: 1;}
.wrap_products_main .area_lft .tab a.on,
.wrap_products_main .area_lft .tab a:hover{opacity:1;}
.wrap_products_main .area_lft .tab a.on:after,
.wrap_products_main .area_lft .tab a:hover:after{border-width:3px;}
.wrap_products_main .area_lft .cont{margin-top: 65px;font-size: 20px;line-height: 1.8;}
.wrap_products_main .area_lft .cont .t1{}

@media screen and (max-width: 1750px) {
  .wrap_products_main .area_lft .h1{ font-size: 80px;  }
  .wrap_products_main .area_lft .inner{width: 450px; word-break: keep-all;}
}


.card_type1{ width: 100%; height: 780px; position: relative; overflow: hidden; border-radius: 30px; display: block;outline-offset: 4px;}
.card_type1 .bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover; background-position: 50%; background-repeat: no-repeat; z-index: 0;
    -webkit-transition: all 1.6s ease;
    -moz-transition: all 1.6s ease;
    -o-transition: all 1.6s ease;
    transition: all 1.6s ease;
}
.card_type1:hover .bg{ 
  -webkit-transform: rotate(0.001deg) scale(1.05);
  -moz-transform: rotate(0.001deg) scale(1.05);
  -o-transform: rotate(0.001deg) scale(1.05);
  -ms-transform: rotate(0.001deg) scale(1.05);
  transform: rotate(0.001deg) scale(1.05);
 }
.card_type1 .cont{position:absolute; left:0; bottom:0; z-index:2; color:#fff; box-sizing: border-box; padding: 115px 70px; display: block; }
.card_type1 .cont .h1{font-size: 62px; line-height: 1.2em; font-weight: 700; display: block;}
.card_type1 .cont .t1{font-size: 30px; line-height: 1.2; font-weight: 400; margin-top: 15px; display: block;}


.pageing.swiper.type2{ margin-top: 20px; }
.pageing.swiper.type2 > .inner{display: flex; align-items: center; color: #fff;}
.pageing.swiper.type2 .swiper-button-prev2,
.pageing.swiper.type2 .swiper-button-next2{font-size: 40px; line-height: 1; cursor:pointer;}
.pageing.swiper.type2 .swiper-button-prev2:hover,
.pageing.swiper.type2 .swiper-button-next2:hover{ color:#0cbcff;}
.pageing.swiper.type2 .swiper-button-prev2{margin-right:25px}
.pageing.swiper.type2 .swiper-button-next2{margin-left:25px}
.pageing.swiper.type2 .number{font-size: 20px; line-height: 1; font-weight: 600;}

.main-page.esg{padding-bottom: 160px;}
.wrap_esg_main{color: #fff; overflow: visible; }
.wrap_esg_main .btn-more1{color: #0baff1; font-size: 22px;}
.wrap_esg_main .btn-more1 i{font-size: 42px;}
.wrap_esg_main .item { display: block; width: 100%; height: 80vh; position: relative; z-index: 2; min-height: 650px; overflow: hidden; color: #fff; }
/*.wrap_esg_main .item.n1{margin-top: 0;}
.wrap_esg_main .item.n2{ margin-top: 30px; }
.wrap_esg_main .item.n3{margin-top: 100px;}
.wrap_esg_main .item.n4{ margin-top: 30px; }*/
.wrap_esg_main .cover{
  position:absolute; left:0; top:0; z-index:1; background:#000; width:100%; height:100%; opacity:0.2;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;

}
.wrap_esg_main .bg{
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover; background-position: 50%; background-repeat: no-repeat; z-index: 0;
    -webkit-transition: all 1.6s ease;
    -moz-transition: all 1.6s ease;
    -o-transition: all 1.6s ease;
    transition: all 1.6s ease;
}
.wrap_esg_main .num{
  position: absolute; left: 10%; top: 6%; z-index:2;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.wrap_esg_main .num .circle{width: 63px; height: 63px; display: flex; align-items: center; justify-content: center; font-weight: 600; border: 1px rgba(255,255,255,0.5) solid;border-radius: 50%;}
.wrap_esg_main .h1{
  position: absolute; left: 10%; bottom: 10%; font-size: 45px; line-height: 1.2; font-weight: 700; z-index: 2; 
    -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.wrap_esg_main .hover{
  position:absolute; left:0; bottom:0; padding:10% 10% 16%;  z-index:2; opacity:0;
    -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  
-webkit-transform: translate(0px, -80px);
-moz-transform: translate(0px, -80px);
-o-transform: translate(0px, -80px);
-ms-transform: translate(0px, -80px);
transform: translate(0px, -80px);
}
.wrap_esg_main .hover .h2{font-size:30px; font-weight:600; word-break: keep-all;}
.wrap_esg_main .hover .t1{font-size:18px; line-height:1.6; margin-top: 12px; word-break: keep-all; font-weight: 100;}
.wrap_esg_main .hover .more{margin-top:30px}

.wrap_esg_main .swiper-slide-active .cover ,
.wrap_esg_main .item:hover .cover,
.wrap_esg_main .item:focus .cover { opacity: 0.7; }
.wrap_esg_main .swiper-slide-active .bg,
.wrap_esg_main .item:hover .bg,
.wrap_esg_main .item:focus .bg{ 
-webkit-transform: rotate(0.001deg) scale(1.05);
-moz-transform: rotate(0.001deg) scale(1.05);
-o-transform: rotate(0.001deg) scale(1.05);
-ms-transform: rotate(0.001deg) scale(1.05);
transform: rotate(0.001deg) scale(1.05);
 }
 .wrap_esg_main .swiper-slide-active .num,
.wrap_esg_main .item:hover .num,
.wrap_esg_main .item:focus .num{left: -30%;}
.wrap_esg_main .swiper-slide-active .h1,
.wrap_esg_main .item:hover .h1,
.wrap_esg_main .item:focus .h1 { 
  opacity: 0;  
  -webkit-transform: translate(0px, 80px);
-moz-transform: translate(0px, 80px);
-o-transform: translate(0px, 80px);
-ms-transform: translate(0px, 80px);
transform: translate(0px, 80px);
}
.wrap_esg_main .swiper-slide-active .hover,
.wrap_esg_main .item:hover .hover,
.wrap_esg_main .item:focus .hover {
  opacity: 1;
  -moz-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}


.banner_main1{background: url(../images/main/bg_banner1.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; height: 339px; position: relative; display:flex;align-items: center;}
.banner_main1 .inner{width: 90%; max-width: 1180px; margin-left: auto; margin-right: auto; position: relative; z-index: 1; color:#fff;margin-top: -8px;}
.banner_main1 .bg_img{position: absolute; left: 50%;top: 30px; z-index: 0;margin-left: 50px;}
.banner_main1 .h1{font-size: 42px;;;line-height: 1.2;font-weight: 600;}
.banner_main1 .t1{font-size: 18px;line-height: 1.6;max-width: 530px;margin-top: 22px;}
.banner_main1 .btns{margin-top: 30px;}
.banner_main1 a{ 
  display: inline-block;
  color:#fff;border: 1px #fff solid;border-radius: 500px;padding: 17px 33px;font-weight: 500;
    -webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.banner_main1 a:hover{background:#9dc1da; border-color:#86a8c0;}



.main-page.story > .inr-c{width: 1538px; position: relative;}
.wrap_notice_type1{ display: flex; justify-content: space-between;}
.wrap_notice_type1 > *{flex: none;}
.wrap_notice_type1 > .col.lft{width: 372px;}
.wrap_notice_type1 .h1{font-size: 48px; line-height: 1.1458; font-weight: 600; color: #0c254b;}

.wrap_notice_type1 .tab.ty1{margin-top: 48px;}
.wrap_notice_type1 .tab_area{display: none; overflow: visible;margin-bottom: -80px;}
.wrap_notice_type1 .tab_area.active { display: block; }
.wrap_notice_type1 .lst_thumb2 {margin-top: -20px;}

.tab.ty1 ul{display: flex;  margin-right: 5px; flex-wrap: wrap;}
.tab.ty1 ul li{margin-right: 10px;margin-bottom: 20px;}
.tab.ty1 ul li a{ 
  padding: 12px 30px; border: 1px solid #cccccc; color: #333; flex:none; border-radius: 100px; line-height: 1;display: block;
  
}
.tab.ty1 ul li.on a,
.tab.ty1 ul li a:hover{border-color:#2c4263; background:#2c4263; color:#fff;}

.lst-thumb1{display: flex;}
.lst-thumb1 > .item{width: 25%; margin-left: 20px; overflow: hidden;}
.lst-thumb1 > .item:first-child{margin-left: 0;}


.lst-thumb1 > .item a .img { overflow: hidden; }
.lst-thumb1 > .item a .img img{
  display: block;
  -webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.lst-thumb1 > .item a:hover .img img{
-webkit-transform: rotate(0.001deg) scale(1.1);
-moz-transform: rotate(0.001deg) scale(1.1);
-o-transform: rotate(0.001deg) scale(1.1);
-ms-transform: rotate(0.001deg) scale(1.1);
transform: rotate(0.001deg) scale(1.1);
}
.lst-thumb1 > .item a .cont { padding: 20px 0; }
.lst-thumb1 > .item a .cont .tit { font-size: 1em; line-height: 1.35; height: 50px; overflow: hidden; }
.lst-thumb1 > .item a .cont .date { font-size: 16px; margin-top: 10px; color: #666; }



.lst_thumb2{ width: 1044px; }
.lst_thumb2 > .item {width: 48%; margin-bottom: 80px;}
.lst_thumb2 > .item > a { display: flex; flex-direction: column; padding: 25px; border-radius: 30px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.lst_thumb2 > .item > a:hover,
.lst_thumb2 > .item > a:focus { 
  -webkit-transform: translate(0px, -20px);
  -moz-transform: translate(0px, -20px);
  -o-transform: translate(0px, -20px);
  -ms-transform: translate(0px, -20px);
  transform: translate(0px, -20px);
  -webkit-box-shadow: 0px 14px 16px -2px rgba(0,0,0,0.17);  
  box-shadow: 0px 14px 16px -2px rgba(0,0,0,0.17);
}

.lst_thumb2 > .item .cate { font-size: 16px; font-weight: 500; color: #099de8; margin-bottom: 5px; }
.lst_thumb2 > .item .tit { font-size: 28px; font-weight: 600; color: #222; line-height: 1.35; margin-bottom: 20px; height: 75px; overflow: hidden; }
.lst_thumb2 > .item .txt { font-size: 16px; line-height: 1.75; overflow: hidden; height: 56px; }
.lst_thumb2 > .item .img { background-color: #dedede; border-radius: 30px; width: 100%; height: 0; padding-top: 56.25%; margin-top: 30px; }

 .title_sns{font-size: 30px; line-height: 1.2; font-weight: 700; color: #0c254b; text-align: center; margin-bottom: 50px;}
.main-page.sns{position: relative; padding-bottom: 120px;}
.main-page.sns .inr-c2{position: relative; z-index: 2;}
.main-page.sns .lst-thumb1{position: relative; z-index: 2;}
.main-page.sns .lst-thumb1 .img { position: relative; }
.main-page.sns .lst-thumb1 .socialIcon { position: absolute; top: 12px; right: 12px; z-index: 1; }
.main-page.sns > .bg{position: absolute; left: 0; bottom: 0; width: 100%; height: 50%; background-color: #f5f3f0; z-index: 0;}



.video-container {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.video-container:after{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 2; content: "";}
.video-container > video {
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
  z-index: 1;
}
@media screen and (max-aspect-ratio: 1920/1080) {
  .video-container > video {
    height: 100%;
  }
}
@media screen and (min-aspect-ratio: 1920/1080) {
  .video-container > video {
    width: 100%;
  }
}


#main_section_visual {
  flex-shrink: 0;
  width: 100%;
  height: 100vh;
  position: relative;
  transition-property: transform;
}


#mainVisual { padding: 0; }
#mainVisual .swiper-wrapper {
  display: flex !important;
}
#mainVisual .swiper-slide {
  background-color: #333;
  color: #fff;
  overflow: hidden;
}

#mainVisual .swiper-slide:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(40,42,28,0.3);
  z-index: 1;
}

#mainVisual .img {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background-color: #000; 
  background-position: center; 
  background-size: cover;
}
#mainVisual .text { position: relative; width: 100%; height: 100vh; box-sizing: border-box; z-index: 2; text-align: left; }
#mainVisual .text > .inner { display: table; width: 86%; height: 100%; max-width: 1400px; margin: 0 auto; box-sizing: border-box; }
#mainVisual .text > .inner > * { display: table-cell; vertical-align: middle; }
#mainVisual .text .tit { opacity: 0; font-size: 40px; color: #fff; line-height: 60px; font-family: "KHNPHD"; font-weight: 600; word-break: keep-all; }
#mainVisual .text .txt { opacity: 0; font-size: 18px; color: #d2d2d2; line-height: 40px; margin-top: 50px; }
#mainVisual .text .btn { opacity: 0; font-size: 14px; color: #fff; line-height: 60px; display: inline-block; width: 160px; height: 60px; border: 1px solid #fff; text-align: center; margin-top: 50px; font-family: 'Roboto', sans-serif; 
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
#mainVisual .text .btn:hover { background-color: #fff; color: #333; }
#mainVisual .text.ani .tit { animation: mainVisual-animation 0.7s ease-in-out 0.3s forwards; }
#mainVisual .text.ani .txt { animation: mainVisual-animation 0.7s ease-in-out 0.6s forwards; }
#mainVisual .text.ani .btn { animation: mainVisual-animation 0.7s ease-in-out 0.9s forwards; }
#mainVisual .text.center { text-align: center; }

#mainVisual .graph { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
#mainVisual .graph > .inner { position: relative; width: 100%; max-width: 1600px; margin: 0 auto; height: 100%; }

#mainVisual .wrap-graph {
  position: absolute;
  left: auto;
  right: 10%;
  top: 16.65%;
  height: 276px;
}
#mainVisual .wrap-graph .bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 15px;
  height: 10%;
  border-radius: 15px;
  background-color: rgba(245, 226, 207, 0.2);
}
#mainVisual .wrap-graph.ty1 .bar {
  background-color: rgba(177, 168, 224, 0.2);
}
#mainVisual .wrap-graph.ty2 {
  position: absolute;
  right: 6%;
  bottom: 25%;
  height: 155px;
  top: auto;
}
#mainVisual .wrap-graph.ty2 .bar {
  background-color: rgba(255, 255, 255, 0.2);
}
#mainVisual .wrap-number {
  color: #fff;
  text-align: left;
  font-size: 20px;
}
#mainVisual .wrap-number .ff-en-ty2 {
  font-size: 0;
  opacity: 0;
}
#mainVisual .wrap-number .ff-en-ty2 .col {
  display: inline-block;
  font-size: 120px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
}
/*.wrap-number .ff-en-ty2 .col.num{display: inline-block; overflow: hidden; text-align: left;}*/
#mainVisual .wrap-number .ff-en-ty2 .num .wrap {
  display: block;
  position: relative;
}
#mainVisual .wrap-number .ff-en-ty2 .num .wrap .n {
  display: block;
  line-height: 1;
}
#mainVisual .wrap-number .ff-en-ty2 .parsent {
  font-size: 50px;
  font-weight: 300;
}
#mainVisual .wrap-number .t2 {
  line-height: 1.5;
  padding-left: 5px;
}
#mainVisual .wrap-number.ty1 {
  position: absolute;
  right: 25%;
  top: 25%;
  z-index: 2;
}
#mainVisual .wrap-number.ty2 {
  position: absolute;
  right: 10%;
  bottom: 28%;
  z-index: 2;
  opacity: 0.5;
}

#mainVisual .wrap-number.ty1 .t1 {
  color: #a066ff;
}

#mainVisual .graph .line {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background-color: #fff;
  z-index: 2;
  opacity: 0.2;
}

.spot_content{position:absolute;left:0;top:0;width:100%;height: 100vh;background-color:transparent;z-index:1;display:flex;align-items: flex-end;padding-bottom: 190px;box-sizing: border-box;}
.spot_content .inr-c2{
  width: 1670px;display:flex;flex-direction: column;justify-content: center;margin-top: -11vh; opacity: 0;
  /*-webkit-transform: translate(0px,-50px);
  -moz-transform: translate(0px,-50px);
  -o-transform: translate(0px,-50px);
  -ms-transform: translate(0px,-50px);
  transform: translate(0px,-50px);*/
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 20px 20px rgba(0, 0, 0, 0.5);

}
.spot_content .h1{font-size: 52px; color: #fff; font-weight: 600;  line-height: 1.2; font-weight: 300;}
.spot_content .h1 .ff-en{font-weight: 600;margin-top: 20px;display: block;font-size: 0.8em;line-height: 1;}

.spot_content.on .inr-c2{ 
  opacity: 1; 
  -webkit-transform: translate(0, 0px);
  -moz-transform: translate(0, 0px);
  -o-transform: translate(0, 0px);
  -ms-transform: translate(0, 0px);
  transform: translate(0, 0px);
}



.spot_content .lst{display:flex; margin-top:100px;}
.spot_content .lst li{margin-right:10px; opacity: 0;}
@media screen and (max-width: 1730px) {
  .pageing_ty2 .inr-c2,
  .spot_content .inr-c2{width: auto;margin-left: 100px;margin-right:0;}
}
@media screen and (max-width: 1280px) {
  .pageing_ty2 .inr-c2,
  .spot_content .inr-c2{width: auto;margin-left: 60px;margin-right:0;}
  .wrap_mousedown{display:none;}
  .spot_content .h1{font-size: 54px; }
}
@media screen and (max-width: 840px) {
  .spot_content .h1{font-size: 8vw; }
  .pageing_ty2 .inr-c2,
  .spot_content .inr-c2{margin-left: 5vw;}
  .spot_content .lst{display:flex; margin-top:10vw;}
  .spot_content .lst li{margin-right:2vw;}
  .spot_content .lst li img{width:13vw}
  .spot_content .t1{margin-top: 10vw; font-size: 5vw; color: #fff;}
}





#mainVisual .swiper-progressbar { position: absolute; top: 0; left: 0; width: 100%; z-index: 1; height: 3px; background-color: rgba(255,255,255,0.3); 
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
#mainVisual .swiper-progressbar span { display: block; width: 0; height: 3px; background-color: #561c80; } 

#mainVisual .progressbar-pagination { position: absolute; left: 0; bottom: 90px; width: 100%; }
#mainVisual .swiper-pagination { position: relative; text-align: left; max-width: 1400px; width: 90%; margin: 0 auto; display: flex;align-items: center;justify-content: center;}
#mainVisual .swiper-pagination .swiper-pagination-bullet { width: 90px; height: 2px; border-radius: 0; background-color: rgba(255,255,255,0.5); opacity: 1; position: relative;  }
#mainVisual .swiper-pagination .swiper-pagination-bullet + .swiper-pagination-bullet { margin-left: 6px; }
#mainVisual .swiper-pagination .swiper-pagination-bullet-active { opacity: 1; }
#mainVisual .swiper-pagination .swiper-pagination-bullet .num{position: absolute; left: 0; bottom: 5px; font-weight: 600; color: #fff; width: 100%; 
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 20px 20px rgba(0, 0, 0, 0.5);
}
#mainVisual .swiper-pagination .swiper-pagination-bullet .bar { width: 0%; height: 4px; background-color: #fff; display: block; margin-top: -3px;}

.pageing_ty2 .swiper-button-prev2,
.pageing_ty2 .swiper-button-next2{position: absolute;  top: 50%; z-index: 5; font-size: 0; margin-top: -30px; cursor: pointer;}
.pageing_ty2 .swiper-button-prev2{left: 50px;}
.pageing_ty2 .swiper-button-next2{right: 50px;}
.pageing_ty2 .swiper-button-prev2:hover,
.pageing_ty2 .swiper-button-next2:hover{opacity: 0.8;}


.wrap_hynex_main{ display: flex; align-items: center; justify-content: center; }
.wrap_hynex_main > .inner{ 
  position: relative; width: 1300px; height: 480px; display: flex; align-items: center; justify-content: center; margin: 0 auto; background-color: #F5EBE6; border-radius: 40px; text-align: center; overflow: hidden; 
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  transform-origin: 50% 50%;
}
.wrap_hynex_main .cover{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); opacity: 0;  z-index: 1;
  -webkit-transition: all 1.2s ease;
  -moz-transition: all 1.2s ease;
  -o-transition: all 1.2s ease;
  transition: all 1.2s ease;
  transition-delay: 0.6s;
}
.wrap_hynex_main .bg1{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/main/bg_hynex1.jpg) no-repeat 50% 50%; background-size: cover; z-index: 0; opacity: 0;
    -webkit-transition: all 3s ease;
  -moz-transition: all 3s ease;
  -o-transition: all 3s ease;
  transition: all 3s ease;
  transition-delay: 0.2s;
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
.wrap_hynex_main .txt_group_before{
  color: #3c4043; font-size: 40px; font-size: 2.5em; font-weight: 600;  line-height: 1.4; position: relative; z-index: 2;
 /* -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;*/
}


.wrap_hynex_main .txt_group_after{display: none; color: #fff; position: relative; z-index: 3;}
.wrap_hynex_main .txt_group_after .t1{font-size: 35px; font-size: 2.1875em; font-weight: 600; line-height: 1.4;}
.wrap_hynex_main .txt_group_after .t2{font-size: 20px; font: 1.25em; font-weight: 300; letter-spacing: 0.4em; margin-top: 80px;}
.wrap_hynex_main .txt_group_after .btns{margin-top: 80px;}

.wrap_hynex_main .c_gra{ display: inline-block; background: rgb(37,104,205);
background: -moz-linear-gradient(135deg, rgba(37,104,205,1) 0%, rgba(100,255,145,1) 44%, rgba(100,255,145,1) 100%);
background: -webkit-linear-gradient(135deg, rgba(37,104,205,1) 0%, rgba(100,255,145,1) 44%, rgba(100,255,145,1) 100%);
background: linear-gradient(135deg, rgba(37,104,205,1) 0%, rgba(100,255,145,1) 44%, rgba(100,255,145,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2568cd",endColorstr="#64ff91",GradientType=1);
 color: transparent; -webkit-background-clip: text;
}


.wrap_hynex_main > .inner.active{
   width: 100vw; height: 800px; border-radius: 0;
}

.wrap_hynex_main > .inner.active .cover{ opacity: 1; }
.wrap_hynex_main > .inner.active .bg1{ 
  opacity: 1; 
  -webkit-transform: scale(1);
  transform: scale(1);
}
.wrap_hynex_main .txt_group_after.active{display: block;}

/*.wrap_hynex_main > .inner.active .txt_group_before {
  -webkit-animation: hynex-txt1 1s cubic-bezier(0.785, 0.135, 0.150, 0.860) both;
          animation: hynex-txt1 1s cubic-bezier(0.785, 0.135, 0.150, 0.860) both;
}

.wrap_hynex_main > .inner.active .txt_group_after {
  -webkit-animation: hynex-txt2 1s cubic-bezier(0.785, 0.135, 0.150, 0.860) 1s both;
          animation: hynex-txt2 1s cubic-bezier(0.785, 0.135, 0.150, 0.860) 1s both;
}
*/

.main-page.step3 .tab_area { display: none; }
.main-page.step3 .tab_area.active { display: block; }


@-webkit-keyframes hynex-txt1 {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    opacity: 0;
    display: none;
  }
}
@keyframes hynex-txt1 {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    opacity: 0;
  }
}

@-webkit-keyframes hynex-txt2 {

}
@keyframes hynex-txt2 {
  0% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    opacity: 0;
    display: block;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}