/*************** MAINVISUAL ***************/

.main_visual{ width: 100%; position: fixed; left: 0; top: 0; transition: .2s ease;  background: #222;}
.main_visual .main_sld{ height: 100%;}
.main_visual .main_sld .swiper-slide{ transition: 0s;}
.main_visual .main_sld .swiper-slide .cover{ transform: scale(1.2); opacity: 0; transition: 0;}
.main_visual .main_sld .swiper-slide-active .cover{ transform: scale(1); opacity: 1;}
.main_visual .main_sld .progress{ display: flex; align-items: center; position: absolute; right: 130rem; bottom: 61rem; font-size: 15rem; color: #fff;}
.main_visual .main_sld .progress .progress_bar{ display: block; width: 150rem; height: 1px; background: #fff; margin: 0 10rem; position: relative;}
.main_visual .main_sld .progress .progress_bar::after{ content: ''; width: 0; height: 100%; background: #FF5E48; position: absolute; left: 0; top: 0; bottom: 0; transition: 7s linear;}
.main_visual .main_sld .swiper-slide-active .progress .progress_bar::after{
width: 100%;
}
.main_visual .main_sld .swiper-slide .progress{opacity: 0; transition: .5s;}
.main_visual .main_sld .swiper-slide-active .progress{opacity: 1; transition: .7s;}
.main_visual .main_sld .swiper-slide .progress .progress_bar::after{transition: 7s linear;}
.main_visual .main_sld .swiper-slide .sdvideos.on{}





/*************** MAINCON ***************/

.main_con{ margin-top: calc(var(--vh, 1vh) * 100); background: #fff; position: relative; padding-bottom: 200rem;}
.main_con .main_con_tit{  height: auto; position: absolute; left: 0; top: 0; transform: translateY(-100%); color: #fff;}
.main_con .main_con_tit span{ font-size: 30rem; font-weight: 500; display: block;}
.main_con .main_con_tit p{ font-size: 190rem; font-weight: 700; letter-spacing: -16rem; line-height: .71; margin-top: 40rem; white-space: nowrap;}

.main_con .pagi{ display: block; width: 220rem; height: 100%; font-size: 20rem; font-weight: 500; writing-mode: tb; transform: rotate(180deg); text-align: center; position: absolute; right: 0; top: 0; bottom: 0;}
.main_con .pagi span{ display: inline-block; padding-right: 10rem; transition: .5s ease .5s; position: relative;}
.main_con .pagi::after{ content: ''; display: block; width:0%; height: 28%; background: #FF5E48; position: absolute; right: -20rem; top: 50%; transform: translateY(-50%); z-index: -1; opacity: 0; transition: .3s ease;}
.main_con .pagi span::before{ content: ''; display: block; width: 3rem; height: 100%; background: #fff; position: absolute; right: 0; top:0; transition: .5s ease 1s;}

.main_con .aos-animate .pagi::after{ animation: mainPagi 2s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 1;}
.main_con .aos-animate .pagi span{ animation: mainPagiTxt 3s cubic-bezier(0.16, 1, 0.3, 1) forwards;}
.main_con .aos-animate .pagi span::before{ height: 0;}



@keyframes mainPagiTxt{
  0%{ color: #222; border-color:#222;} 
  10%{ color: #fff; border-color:#fff;} 
  50%{ color: #fff; border-color:#fff;} 
  60%{ color: #222; border-color:#222;} 
  100%{ color: #222; border-color:#222;} 
}

@keyframes mainPagi{
  0%{ width: 0%; height:28%;}
  25%{ width: 32%; height:28%;}
  50%{ width: 32%; height: calc( 100% + 1px );}
  75%{ width: 130%; height: calc( 100% + 1px ); right: -20rem;}
  100%{ width: 130%; height: calc( 100% + 1px );  right: 100%;}
}



.main_con .dot_txt{ padding-left: 0;}
.main_con .dot_txt::before{ left: -8rem; top: -5rem;}




/*************** MAINCON1 ***************/

.main_con1{ background: #222222; padding: 94rem 0 121rem; color: #fff;}
.main_con1 .tit{ margin-bottom: 54rem; padding-left: 13rem;}
.main_con1 .tit::before{ top: 8rem; left: 0;}
.main_con1 ul{}
.main_con1 ul li{}
.main_con1 ul li img{ width: 60rem; margin:0 auto 15rem;}


/*************** MAINCON2 ***************/

.main_con2{ margin: 126rem 0 184rem;}

.main_con2 .txt_box{ font-size: 22rem; font-weight: 500;}
.main_con2 .txt_box .main_con2_img{ width: 639rem; height: 100%; padding-right: 90rem; object-fit: cover; transition: .5s ease; position: absolute; right: 0; top: 0; bottom: 0;}
.main_con2.aos-animate .txt_box .main_con2_img{ padding: 0; animation: main_con2_img 2s cubic-bezier(0.16, 1, 0.3, 1) 1.5s forwards;}

@keyframes main_con2_img{
  0%{ padding-right: 0;}
  100%{ padding-right: 90rem;}
}

.main_con2 .txt_box .customer_portal_index_purpose_highlight_text{ color: #FF5E48;}
.main_con2 .txt_box .customer_portal_index_purpose_title{ font-size: 45rem; font-weight: 700; margin: 45rem 0 251rem;}
.main_con2 .txt_box .customer_portal_index_purpose_description{ margin-bottom: 78rem; font-weight: 400; opacity: .8;}
.main_con2 .txt_box .mbt15{margin-bottom: 15rem;}
.main_con2 .txt_box .customer_portal_index_purpose_description strong{ font-weight: 500;}



/*************** MAINCON3 ***************/

.main_con3{}
.main_con3 ul{ display: flex;}
.main_con3 ul li{ margin-right: 80rem;}
.main_con3 ul li .dot_txt{ font-size: 27rem; font-weight: 500;}
.main_con3 ul li .img_wrap{ margin: 25rem 0; position: relative;}
.main_con3 ul li .img_wrap img{ position: relative; z-index: 1; transition: .5s ease;}
.main_con3 ul li .img_wrap:hover img{ border-bottom-left-radius: 43rem;}
.main_con3 ul li .img_wrap::after{ content: ''; width: 0; height: 0; background: #FF5E48; position: absolute; right: -20rem; top: -20rem; transition: .5s ease;}
.main_con3 ul li .img_wrap:hover::after{ width: 222rem; height: 222rem;}
.main_con3 ul li .customer_portal_index_service_card_title{ font-size: 38rem; font-weight: 600; margin-bottom: 21rem;}



/*************** MAINCON4 ***************/

.main_con4{  display: flex; height: 857rem; margin: 0 0 200rem 0;}

.main_con4 .img_wrap{ width: 50%; height: 100%; position: relative;}
.main_con4 .img_wrap img{ width: 100%; height: 100%; object-fit: cover;}

.mcon4_box{margin: 200rem 0 45rem 0;}
.mcon4_box .mcon4_tit{font-size: 45rem; font-weight: 700; margin-bottom: 15rem;}
.mcon4_box .mcon4_txt{font-size: 18rem;}

.main_con4 .txt_box{ padding: 60rem 0 241rem 106rem; width: 50%; height: 100%; position: relative;}
.main_con4 .txt_box .how_to_sld{ height: 100%; cursor: s-resize; cursor: url("/static/main_page/img/common/dragCursor_2.711b24cec4fe.svg"), auto;}
.main_con4 .txt_box .how_to_sld ul{}
.main_con4 .txt_box .how_to_sld ul li.swiper-slide-active{}
.main_con4 .txt_box .how_to_sld ul li.swiper-slide-active + li{ opacity: .8;}
.main_con4 .txt_box .how_to_sld ul li.swiper-slide-active + li + li{ opacity: .5;}
.main_con4 .txt_box .how_to_sld ul li p{ padding-left: 10rem;}
.main_con4 .txt_box .how_to_sld ul li .dot_txt{ font-size: 35rem; font-weight: 600;}
.main_con4 .txt_box .how_to_sld ul li .dot_txt::before{ left: 0; top: 0;}
.main_con4 .txt_box .how_to_sld ul li .customer_portal_index_process_step_title{ margin: 10rem 0 14rem; font-size: 27rem; font-weight: 500;}
.main_con4 .txt_box .how_to_sld ul li .customer_portal_index_process_step_description{ font-size: 18rem;}

.main_con4 .txt_box .main_btn{ position: absolute; bottom: 0;}

.main_con4 .txt_box .how_to_scr{  position: absolute; right: 208rem; top: 0; height: 218rem; width: 1px; background: #e1e1e1;}
.main_con4 .txt_box .how_to_scr .swiper-scrollbar-drag{ width: 5rem; left: -2rem; background: #FF5E48;}



/*************** MAINCON5 ***************/

.main_con5{}
.main_con5 .tit{ margin-bottom: 45rem;}
.main_con5 .tit p{ font-size: 45rem; font-weight: 700; margin-bottom: 15rem;}
.main_con5 .tit span{ opacity: .8; display: block;}
.main_con5 .reception{ display: flex;}
.main_con5 .reception .rc_img{ width: 610rem;}
.main_con5 .reception .rc_list_wrap{ width: 840rem; padding: 0 0 0 140rem; position: relative;}
.main_con5 .reception .rc_list_wrap .rc_tit{ font-size: 27rem; font-weight: 500; padding-bottom: 15rem; border-bottom:1px solid #e1e1e1}
.main_con5 .reception .rc_list_wrap .rc_list{ padding-top: 15rem; max-height: 518rem; overflow: hidden; overflow-y: auto; color: #383838;}
.main_con5 .reception .rc_list_wrap .rc_list li{ display: flex;}
.main_con5 .reception .rc_list_wrap .rc_list li + li{ margin-top: 6rem;}
.main_con5 .reception .rc_list_wrap .rc_list li p{ flex-shrink: 0;}
.main_con5 .reception .rc_list_wrap .rc_list li p.num{ width: 13%;}
.main_con5 .reception .rc_list_wrap .rc_list li p.name{ width: 14%;}
.main_con5 .reception .rc_list_wrap .rc_list li p.tel{ width: 22%;}
.main_con5 .reception .rc_list_wrap .rc_list li p.progress{ width: 30%; text-align: center;}
.main_con5 .reception .rc_list_wrap .rc_list li p.progress::after{ content: '신고완료';}
.main_con5 .reception .rc_list_wrap .rc_list li p.progress.on::after{ content: '확인중'; color: #FF5E48;}
.main_con5 .reception .rc_list_wrap .rc_list li p.progress.off::after{ content: '접수중'; color: #3568EB;}

.main_con5 .reception .rc_list_wrap .rc_list li p.date{ width: 21%;}
.main_con5 .reception .rc_list_wrap .main_btn{ position: absolute; right: 31rem; bottom: 0;}

.ft_con{ height:480rem; padding: 139rem 400rem 96rem; text-align: center; overflow: hidden;}
.ft_con .vdobg{width: 100%; height: 100%; background-color: #000; position: absolute; left: 0; top: 0; z-index: 1; opacity: 0.4;}
.ft_con .swiper{ height: 100%; overflow: visible;}
.ft_con .swiper .swiper-slide{ opacity: 0; transition: .5s ease;}
.ft_con .swiper .swiper-slide-active{ opacity: 1;}
.ft_con .swiper .review_txt{ font-size: 27rem; font-weight: 500; height: 111rem;   -ms-user-select: none; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; user-select: none;}
.ft_con .swiper .writer{ display: flex; justify-content: center; margin-top: 40rem;}
.ft_con .swiper .writer .job{ opacity: .6; margin-left: 15rem; padding-left: 16rem; position: relative;}
.ft_con .swiper .writer .job::before{ content: ''; width: 1px; height: 15rem; background: rgba(255, 255, 255, .6); position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.ft_con .swiper .sld_btn{ display: flex; justify-content: center; align-items: center; position: absolute; left: 0; bottom: 0; right: 0; z-index: 1;}
.ft_con .swiper .sld_btn .swiper-pagination{ position: static; display: inline-block; width: auto; font-size: 0;}
.ft_con .swiper .sld_btn .swiper-pagination span{ width: 9rem; height: 9rem; background: #fff; margin: 0 7rem;}
.ft_con .swiper .sld_btn .nav_btn{ width: 8rem; margin: 0 15rem;}
.ft_con .swiper .sld_btn .nav_btn.prev{ transform: rotate(180deg);}
.ft_con .swiper .sld_btn .nav_btn.swiper-button-disabled{ opacity: .5; cursor: auto;}





















@media screen and ( max-width:767px ){

  
  /*************** MAINVISUAL ***************/

  .main_visual .main_sld .swiper-slide {height: 640rem;}
  #header.white:hover{background: none;}
  #header.white:hover .logo{filter: brightness(0) invert(1);}
  .main_visual .main_sld .progress{ flex-direction: column; right:20rem; bottom: 50%; font-size: 13rem; transform: translateY(50%);}
  .main_visual .main_sld .progress .progress_bar{ width: 1px; height: 90rem; margin: 5rem 0;}
  .main_visual .main_sld .progress .progress_bar::after{ content: ''; width: 100%; height: 0; position: absolute; left: 0; top: 0; bottom: auto; right: 0;}
  .main_visual .main_sld .swiper-slide-active .progress .progress_bar::after{
    height: 100%; width: inherit;
  }

  .main_visual .main_sld .swiper-slide:nth-child(1) .sdvideos{object-position: 60% 50%;}
  .main_visual .main_sld .swiper-slide:nth-child(2) .sdvideos{object-position: 75% 50%;}
  .main_visual .main_sld .swiper-slide:nth-child(3) .sdvideos{object-position: 70% 50%;}
  .main_visual .main_sld .swiper-slide:nth-child(4) .sdvideos{object-position: 75% 50%;}
  .main_visual .main_sld .swiper-slide:nth-child(5) .sdvideos{object-position: 20% 50%;}




  /*************** MAINCON ***************/
  .main_con{ padding-bottom: 100rem; margin-top: 640rem;}
  .main_con > .container:not(.main_con1){ padding-right: 70rem !important;}

  .main_con .main_con_tit span{ font-size: 20rem;}
  .main_con .main_con_tit p{ font-size: 68rem; letter-spacing: -4rem; line-height: .75; margin-top: 13rem;}

  .main_con .pagi{ width: 37rem; height: calc( 100rem + 76vw ); font-size: 13rem;}
  .main_con2 .pagi{ height: calc( 435rem + 76vw );}
  .main_con5 .pagi{ height: calc( 228rem + 91vw );}
  .main_con .pagi span{ padding-right: 0; border: none; animation: none;}
  .main_con .aos-animate .pagi span{ color: #222; animation: none;}
  .main_con .pagi span::after{ right: -33rem;}
  .main_con .aos-animate .pagi::after{ animation: none;}
/* 
  @keyframes mainPagi{
    0%{ width: 0%; height:25%;}
    33%{ width: 200%; height:25%;}
    66%{ width: 200%; height: 100%;}
    100%{ width: 200%; height: 100%;}
  } */

  .main_con .dot_txt{ padding-left: 13rem;}
  .main_con .dot_txt::before{ left: 0; top: 0; width: 8rem; height: 8rem;}

  .main_con .main_btn{  height: 50rem; padding: 14rem 20rem; font-size: 15rem;}



  /*************** MAINCON1 ***************/

  .main_con1{ padding: 72rem 0;}
  .main_con1 .tit{ margin-bottom: 30rem;}
  .main_con1 .tit::before{ top: 5rem;}
  .main_con1 ul{ flex-wrap: wrap; justify-content: center;}
  .main_con1 ul li{ width: 33.3333%; margin-bottom: 32rem; position: relative; text-align:center;}
  .main_con1 ul li:nth-child(3n+1){text-align: left;} 
  .main_con1 ul li:nth-child(3n+2){text-align: center;} 
  .main_con1 ul li:nth-child(3n){text-align: right;} 
  .main_con1 ul li div{ display: inline-block;}
  .main_con1 ul li img{ width: 50rem; margin-bottom: 5rem;}



  /*************** MAINCON2 ***************/

  .main_con2{ margin: 70rem 0 100rem;}
  .main_con2 .txt_box br{ display: none;}
  .main_con2 .txt_box br.m{ display: block;}
  .main_con2 .txt_box .main_con2_img{ width: 100%; position: static;}
  .main_con2.aos-animate .txt_box .main_con2_img{ animation: none;}
  

  .main_con2 .txt_box{ font-size: 15rem;}
  .main_con2 .txt_box .customer_portal_index_purpose_title{ font-size: 21rem; margin: 30rem 0;}
  .main_con2 .txt_box .customer_portal_index_purpose_description{ margin: 30rem 0;}
  .main_con2 .txt_box .mbt15{ margin: 0;}



  /*************** MAINCON3 ***************/

  .main_con3{}
  .main_con3 ul{ display: block;}
  .main_con3 ul li{ margin: 0 0 60rem 0;}
  .main_con3 ul li:last-child{ margin-bottom: 0;}
  .main_con3 ul li .dot_txt{ font-size: 16rem;}
  .main_con3 ul li .img_wrap{ margin: 30rem 0 20rem; overflow: hidden;}
  .main_con3 ul li .img_wrap::after{ display: none;}
.main_con3 ul li .customer_portal_index_service_card_title{ font-size: 21rem; margin-bottom: 14rem;}
.main_con3 ul li .customer_portal_index_service_card_description br{ display: none;}



  /*************** MAINCON4 ***************/

  .main_con4{  display: block; height: auto; margin: 0 0 100rem 0;}

  .mcon4_box{margin: 100rem 0 30rem 0;}
  .mcon4_box .mcon4_tit{font-size: 21rem;}
  .mcon4_box .mcon4_txt{font-size: 15rem;}

  .main_con4 .img_wrap{ width: 100%;}

  .main_con4 .txt_box{ padding: 30rem 0 0; width: 100%; position: relative;}
  .main_con4 .txt_box .how_to_sld ul li{ opacity: 1 !important;}
  .main_con4 .txt_box .how_to_sld ul li p{ padding-left: 13rem;}
  .main_con4 .txt_box .how_to_sld ul li .dot_txt{ font-size: 21rem;}
.main_con4 .txt_box .how_to_sld ul li .customer_portal_index_process_step_title{ margin: 15rem 0; font-size: 16rem;}
.main_con4 .txt_box .how_to_sld ul li .customer_portal_index_process_step_description{ font-size: 15rem;}

  .main_con4 .txt_box .main_btn{ position: static; margin-top: 30rem;}

  .main_con4 .txt_box .how_to_scr{ position: relative; right: auto; top: auto; height: 1px; width: 100%; margin-top: 34rem;}

  .main_con4 .txt_box .how_to_scr .swiper-scrollbar-drag{ left:0; top: -2rem; height: 5rem;}



  /*************** MAINCON5 ***************/

  .main_con5{}
  .main_con5 .tit{ margin-bottom: 30rem;}
  .main_con5 .tit p{ font-size: 21rem; margin-bottom: 15rem;}
  .main_con5 .reception{ display: block;}
  .main_con5 .reception .rc_img{ width: 100%;}
  .main_con5 .reception .rc_list_wrap{ width: 100%; padding:30rem 0 0; position: relative; width: calc( 100% + 50rem );}
  .main_con5 .reception .rc_list_wrap .rc_tit{ font-size: 15rem; padding-bottom: 10rem;}
  .main_con5 .reception .rc_list_wrap .rc_list{ padding-top: 30rem; max-height: 355rem;}
  .main_con5 .reception .rc_list_wrap .rc_list li{ justify-content: space-between;}
  .main_con5 .reception .rc_list_wrap .rc_list li + li{ margin-top: 15rem;}
  .main_con5 .reception .rc_list_wrap .rc_list li p{ width: auto !important;}
  .main_con5 .reception .rc_list_wrap .rc_list li p.num,
  .main_con5 .reception .rc_list_wrap .rc_list li p.date{ display: none;}
  .main_con5 .reception .rc_list_wrap .rc_list li p.progress{ width: 56rem !important;}

  .main_con5 .reception .rc_list_wrap .main_btn{ position: static; margin-top: 30rem;}

  
  .ft_con{ height:320rem; padding: 40rem 8% 50rem;}
  .ft_con .swiper .review_txt{ display: flex; align-items: center; font-size: 15rem; height: 140rem;}
  .ft_con .swiper .writer{ margin-top: 30rem;}
  .ft_con .swiper .writer .job{ margin-left: 20rem; padding-left: 21rem;}
}