/* root */
:root{
  --PrimaryColor: #4A81FC;
  --SecondaryColor: #1C336A;
  --PointColor: #ff5722;
  --ContentColor: #F2F4F6;
  --Pastelcolor1: #F9E8E5;
  --Pastelcolor2: #F8E9DA;
  --Pastelcolor3: #E9EBF4;
  --Pastelcolor4: #DBEDF0;
  --Pastelcolor5: #FFFAE8;
  --GrayScale1: #121212;
  --GrayScale2: #333333;
  --GrayScale3: #929292;
  --MenuColor: #73696B;
  --MobileColor: #2E51A3;
}

@media screen and (min-width:1080px) and (max-width: 1280px){
  .snb, .main_elem{display: none;}
}
@media screen and (min-width:768px) and (max-width: 1080px){
  .snb, .main_elem, .signature{display: none;}
}
/* 미디어쿼리 */
@media screen and (max-width:768px) {
  body{
    width: 100%;
    height: 100vh;
    position: relative;
  }
  /* ***************** header ***************** */
  header, #gnb, hr, .gnb_wrap, .snb, .signature, .main_elem,   .main_title h1, .chattCounseling, .main_top{
    display: none;
  }
  .mobile_header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 35px;
    margin-top: 44px;
    position: absolute;
    padding: 0 15px;
  }
  .mobile_header_right{
    display: flex;
    gap: 15px;
    align-items: center;
  }
  .logo_sig {
    width: 35px;
    height: 35px;
    box-sizing: border-box;
  }
  .logo_sig > a {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
  .logo_sig > a > img {
    width: 100%;
    height: 100%;
  }
  .signal{cursor: pointer;}
  .mobile_sitemap{display: block; cursor: pointer;}
  /* sitemap */
  .sitemap_title h3, .sitemap_inner p, .sitemap_tap_menu{display: none;}
  .sitemap{}
  .sitemap_header{
    width: 100%;
    height: 40px;
    margin-top: 42px;
    padding: 0 15px;
  }
  .sitemap_logo{
    display: none;
  }
  .sitemap_title{}
  .sitemap_close{
    position: absolute;
    left: 15px;
  }
  .sitemap > .mobile_nav{
    display: block;
    width: 100%;
    height: 40px;
    overflow: hidden;
    position: absolute;
    top: 95px;
    padding: 0 15px;
  }
  .sitemap > .mobile_nav::before{
    content: '';
    position: absolute;
    width: 90px;
    height: 38px;
    background: url(../assets/images/smooth2.png) no-repeat 50% 50%;
    top: 0;
    right: 0;
    z-index: 10;
  }
  .mobile_sitemap_tap{
    display: block;
    display: flex;
    gap: 10px;
    position: absolute;
    right: 15px;
  }
  .mobile_login{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    width: 100%;
    height: 90px;
    position: absolute;
    top: 135px;
    left: 0;
    background-color: #F6F5F1;
  }
  .mobile_loginbtn{
    padding: 10px 15px;
    border-radius: 50px;
    background-color: var(--PrimaryColor);
    color: #fff;
  }
  .sitemap_inner{
    position: absolute;
    top: 240px;
    width: 100%;
    height: 100%;
  }
  .sitemap_inner p{}
  .sitemap_tap_menu button{
    flex: none;
    width: 100%;
  }
  .map_content{
    width: 100%;
  }
  .map-wrapper{
    width: 100%;
    padding: 0 15px;
  }
  .map-title{
    width: 100%;
    position: relative;
  }
  .map-title::after{
    content: '';
    position: absolute;
    width: 6px;
    height: 12px;
    top: 50%;
    right: 25px;
    transform: translateY(-50%);
    background: url(../assets/images/menunext.svg) no-repeat 50% 50%;
    transition: all .3s ease-in;
  }
  .map-list{
    width: 100%;
    height: 100%;
    display: none;
  }
  .map-list div{
    width: 100%;
    height: 60px;
  }
  .map-list > .map > i{
    right: 15px;
    font-size: 16px;
  }
  .map-title.active::after{
    transform: translateY(-50%) rotate(90deg);
  }
  /* ***************** nav ***************** */
  .mobile_nav{
    display: block;
    width: 100%;
    height: 40px;
    overflow: hidden;
    position: relative;
    top: 95px;
    padding: 0 15px;
  }
  .mobile_nav::before{
    content: '';
    position: absolute;
    width: 90px;
    height: 38px;
    background: url(../assets/images/smooth.png) no-repeat 50% 50%;
    top: 0;
    right: 0;
    z-index: 10;
  }
  .mobile_menu_next{
    position: absolute;
    width: 6.5px;
    height: 6.5px;
    z-index: 100;
    top: 33%;
    left: 93.5%;
    transform: translateY(-50%);
    cursor: pointer;
    filter: invert(60%) sepia(0%) saturate(1345%) hue-rotate(196deg) brightness(98%) contrast(84%);
  }
  .mobile_menu{
    width: 100%;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
  }
  .mobile_menu > .swiper-slide{
    display: block;
    width: 105px;
    height: 40px;
    text-align: center;
    line-height: 40px;
  }
  .mobile_menu > .swiper-slide > a:hover,
  .mobile_menu > .swiper-slide.active > a{
    border-bottom: 3px solid var(--PointColor);
    font-weight: 700;
    color: var(--PointColor);
  }
  .mobile_menu > .swiper-slide > a{
    display: block;
    width: 100%;
    height: 100%;
    font-size: 18px;
    font-family: "Pretendard GOV Variable", "Pretendard GOV", -apple-system;
    font-weight: 600;
    color:var(--GrayScale3);
  }
  .mobile_menu_next{
    z-index: 200;
    position: absolute;
    right: 0;
  }
  /* ***************** section1 ***************** */
  .search_box_popup{display: none;}
  #section1{
    width: 100%;
    height: 582px;
    border-radius: 0 0 50px 50px;
    position: absolute;
    top: 0;
  }
  #section1::before{
    background: none;
    background-color: #F6F5F1;
  }
  #section1::after{
    content: '';
    position: absolute;
    width: 130px;
    height: 150px;
    bottom: 10%;
    right: -10px;
    z-index: -1;
    background: url(../assets/images/elemblue.png) no-repeat 50% 50%;
  }
  .main_title{
    position: relative;
    width: 100%;
    height: 293px;
    margin-top: 150px;
  }
  .main_title::after{
    content: '';
    position: absolute;
    width: 350px;
    height: 270px;
    top: 46%;
    left: 49%;
    transform: translate(-50%, -50%);
    background: url(../assets/images/title_wrap.png) no-repeat;
    background-size: cover;
  }
  .search_box{
    margin: 0 auto;
    position: relative;
  }
  .search_box form label{
    width: 320px;
    height: 56px;
    border-radius: 50px;
    padding-top: 0;
    position: relative;
  }
  .search_box form label input{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    background: url(../assets/images/mobile-searchbox.png) no-repeat;
    background-size: cover;
    line-height: normal;
  }
  .search_box form label input[type=text]{
    padding-left: 10px;
  }
  .search_box form label input::placeholder{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
  }
  .search_box form label::after{
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
  }
  .scroll{
    border-bottom: 0;
    width: 70px;
    height: 40px;
    bottom: 5px;
  }
  .scroll > a{
    display: block;
    width: 100%;
    height: 100%;
  }
  .scroll > a::before{
    display: none;
  }
  .scroll::after{
    content: '';
    position: absolute;
    width: 0.5px;
    height: 25px;
    background-color: #c9c9c9c4;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
  }
  .scroll > a{}
  .scroll > a::before,
  .scroll > a::after{
    background: none;
  }
  /* ***************** section2 ***************** */
  .sec2_title, .kca_desc, #kcabtn, .consumer_menu > ul > li{
    display: none;
  }
  .mobile_kca_desc{
    display: block;
    position: relative;
    top: 580px;
    left: 50%;
    transform: translateX(-50%);
    width: 91%;
  }
  .mobile_kca_desc img{
    width: 100%;
    height: 100%;
  }
  .mobile_kca_desc > .mobile_kca{
    position: absolute;
    margin-left: 10px;
    width: 95px;
    height: 35px;
    top: 60%;
    left: 10px;
    transform: translateY(-50%);
    background: linear-gradient(to top, #19E376, #1ED2D7);
    border-radius: 50px;
  }
  .mobile_kca_desc > .mobile_kca > p{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    font-weight: 800;
  }
  .mobile_kca_desc > .mobile_kca > i{
    position: absolute;
    white-space: nowrap;
    color: #fff;
    top: 50%;
    left: 115%;
    transform: translateY(-50%);
  }
    /* ***************** section2 ***************** */
  #section2{
    top: 760px;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
  }
  .section2_inner{
    width: 100%;
  }
  .sec2_items{
    margin-top: 0;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
  }
  .sec2_item{
    width: 100%;
    padding: 0;
    margin: 5px 0;
  }
  .sec2_item li{
    flex: 1;
    width: 60px;
  }
  .sec2_item > li > a{
    width: 100%;
  }
  .sec2_item > li > a > img{
    width: 100%;
    height: 70px;
  }
  .sec2_item > li:hover img{
    transform: scale(1.15);
  }
  @keyframes itemanimate {
    from{transform: scale(1);}
    to{transform: scale(1.15);}
  }
  .sec2_item li:nth-child(1), .sec2_item .find{
    display: none;
  }
  .sec2_item > li > a > img{}
  .sec2_item > .consumer_menu > a > h6{
    font-size: 14px;
    margin-top: 10px;
  }
  .sec2_item > li:hover h6{
    text-decoration: none;
  }
  .mobile_main_content{
    display: block;
    position: absolute;
    top: 935px;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
  }
  .main_contents{
    width: 90%;
    top: 930px;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
  }
  .mobile_main_content h6{
    margin-top: 20px;
    font-size: 22px;
    font-weight: 800;
  }
  .conBox{
    width: 90px;
    height: 90px;
    border-radius: 50%;
    box-shadow: none;
    cursor: pointer;
  }
  .contentBtn{display: none;}
  .content h4{
    font-size: 16px;
    white-space: nowrap;
    margin-top: 105px;
    font-weight: 800;
  }
  .contentbox1{
    background: url(../assets/images/mobile-maincontent1.png) no-repeat 50% 50%;
    background-size: cover;
    margin-top: 0;
  }
  .contentbox1:hover{
    background: url(../assets/images/mobile-maincontent1.png) no-repeat 50% 50%;
    background-size: cover;
    border-radius: 50%;
    margin-top: 0;
  }
  .contentbox2{
    background: url(../assets/images/mobile-maincontent2.png) no-repeat 50% 50%;
    background-size: cover;
    margin-top: 0;
  }
  .contentbox2:hover{
    background: url(../assets/images/mobile-maincontent2.png) no-repeat 50% 50%;
    background-size: cover;
    border-radius: 50%;
    margin-top: 0;
  }
  .contentbox3{
    background: url(../assets/images/mobile-maincontent3.png) no-repeat 50% 50%;
    background-size: cover;
    margin-top: 0;
  }
  .contentbox3:hover{
    background: url(../assets/images/mobile-maincontent3.png) no-repeat 50% 50%;
    background-size: cover;
    border-radius: 50%;
    margin-top: 0;
  }
  .contentbox4{
    background: url(../assets/images/mobile-maincontent4.png) no-repeat 50% 50%;
    background-size: cover;
    margin-top: 0;
  }
  .contentbox4:hover{
    background: url(../assets/images/mobile-maincontent4.png) no-repeat 50% 50%;
    background-size: cover;
    border-radius: 50%;
    margin-top: 0;
  }
  /* ***************** section2 ~ 3 ***************** */
  .sec2_news > .sec2_news_inner > .sec2_wrap > .sec2_left > p, .news_controls, .news-tab-content > .swiper-container > .swiper-wrapper > .swiper-slide.swiper-slide-active{display: none;}
  .sec2_left{
    width: 90%;
  }
  .sec2_news{
    background: none;
    position: absolute;
    top: 440px;
    width: 100%;
  }
  .sec2_news::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 10px;
    top: 0;
    background-color: #F6F5F1;
  }
  .sec2_news_inner{
    width: 90%;
    position: relative;
  }
  .sec2_wrap{
    display: block;
    width: 100%;
  }
  .sec2_news h3{
    font-size: 22px;
    display: inline-block;
    margin-top: 20px;
  }
  .newstab-menu{
    border: none;
    width: 100%;
    height: 38px;
    background-color: #EEEEEF;
    gap: 100px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .newstab.active::before{
    background: none;
    background-color: var(--MobileColor);
    width: 220px;
    height: 38px;
    border-radius: 50px;
  }
  .news-tab-content{
    width: 100%;
    height: 500px;
    overflow: hidden;
    position: relative;
    top: 100px;
  }
  .news-tab-content > .swiper-container{
    overflow: visible;
  }
  .news-tab-content::after{
    content: '';
    position: absolute;
    width: 91px;
    height: 318px;
    right: 0;
    top: 0;
    z-index: 1000;
    background: url(../assets/images/newnewssmooth.png);
  }
  .news_content1{
    background: url(../assets/images/newscontent1.png) no-repeat 50% 50%;
    background-size: 110%;
  }
  .news_content2{
    background: url(../assets/images/newscontent2.png) no-repeat 50% 50%;
    background-size: 110%;
  }
  .news_content3{
    background: url(../assets/images/newscontent3.png) no-repeat 50% 30%;
    background-size: 110%;
  }
  .news_content4{
    background: url(../assets/images/newscontent4.png) no-repeat 50% 15%;
    background-size: 110%;
  }
  .news_content5{
    background: url(../assets/images/newscontent5.png) no-repeat 50% 50%;
    background-size: 110%;
  }
  .news_content6{
    background: url(../assets/images/newscontent6.png) no-repeat 50% 50%;
    background-size: 110%;
  }
  .news_content7{
    background: url(../assets/images/newscontent7.png) no-repeat 50% 50%;
    background-size: 110%;
  }
  .news_content8{
    background: url(../assets/images/newscontent8.png) no-repeat 50% 50%;
    background-size: 110%;
  }
  .news_content9{
    background: url(../assets/images/newscontent9.png) no-repeat 50% 50%;
    background-size: 110%;
  }
  .news_content10{
    background: url(../assets/images/newscontent10.png) no-repeat 50% 50%;
    background-size: 110%;
  }
  .news_content11{
    background: url(../assets/images/newscontent11.png) no-repeat 50% 50%;
    background-size: 110%;
  }
  .news_content12{
    background: url(../assets/images/newscontent12.png) no-repeat 50% 60%;
    background-size: 120%;
  }
  .news_content13{
    background: url(../assets/images/newscontent13.png) no-repeat 50% 70%;
    background-size: 115%;
  }
  .news_content14{
    background: url(../assets/images/newscontent14.png) no-repeat 50% 50%;
    background-size: 110%;
  }
  .news_content15{
    background: url(../assets/images/newscontent15.png) no-repeat 50% 50%;
    background-size: 110%;
  }
  .news_content16{
    background: url(../assets/images/newscontent16.png) no-repeat 50% 50%;
    background-size: 110%;
  }
  .news_content17{
    background: url(../assets/images/newscontent17.png) no-repeat 50% 50%;
    background-size: 110%;
  }
  .news_content18{
    background: url(../assets/images/newscontent18.png) no-repeat 50% 50%;
    background-size: 110%;
  }
  .news_content19{
    background: url(../assets/images/newscontent19.png) no-repeat 50% 50%;
    background-size: 110%;
  }
  .news_content20{
    background: url(../assets/images/newscontent20.png) no-repeat 50% 50%;
    background-size: 110%;
  }
  .news-tab-content > .swiper-container > .swiper-wrapper{
    width: 100%;
  }
  .news-tab-content > .swiper-container > .swiper-wrapper > .swiper-slide.active,
  .news-tab-content > .swiper-container > .swiper-wrapper > .swiper-slide{
    width: 260px !important;
    height: 290px;
  }
  .news-tab-content > .swiper-container > .swiper-wrapper > .swiper-slide.active::before{
    background: none;
    width: 100%;
    height: 130px;
    background-color: #fff;
    bottom: 0;
    border-radius: 0 0 19px 19px;
  }
  .news-tab-content > .swiper-container > .swiper-wrapper > .swiper-slide::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 130px;
    background-color: #fff;
    bottom: 0;
    border-radius: 0 0 19px 19px;
    z-index: -1;
  }
  .news-tab-content > .swiper-container > .swiper-wrapper > .swiper-slide:nth-child(even){
    top: 50px;
  }
  .news-tab-content > .swiper-container > .swiper-wrapper > .swiper-slide.active > h6, 
  .news-tab-content > .swiper-container > .swiper-wrapper > .swiper-slide > h6{
    margin-top: 0;
    margin-left: 30px;
    line-height: 1.2;
    color: var(--GrayScale1);
    font-size: 17px;
  }
  .news-tab-content > .swiper-container > .swiper-wrapper > .swiper-slide.active > .small_text,
  .news-tab-content > .swiper-container > .swiper-wrapper > .swiper-slide > .small_text{
    display: none;
  }
  .news-tab-content > .swiper-container > .swiper-wrapper > .swiper-slide.active > .body_text,
  .news-tab-content > .swiper-container > .swiper-wrapper > .swiper-slide > .body_text{
    margin: 170px 15px 12px;
    width: 180px;
    height: 12px;
    border: none;
    border-radius: 50px;
    text-align: left;
    color: var(--PrimaryColor);
    font-size: 14px;
    font-weight: 400;
    position: relative;
  }
  /* ***************** section3 ***************** */
  .sec3_notice h3, .notice_controls{display: none;}
  #section3{
    width: 100%;
    top: 1800px;
  }
  .sec3_wrap{
    width: 90%;
    height: 1300px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
  }
  .sec3_top_inner{
    width: 100%;
    height: auto;
    margin: 0;
    display: block;
  }
  .sec3_notice{
    width: 100%;
  }
  .notice_left_menu{
    width: 90%;
  }
  .notice_title{margin-top: 0;}
  .notice_title button{
    font-size: 22px;
    margin-top: 0;
    width: 120px;
  }
  .notice_tab{
    width: 120px;
  }
  .notice_content{
    width: 100%;
    margin-top: 20px;
  }
  .notice_content_wrap{
    width: 100%;
    height: auto;
    border: none;
  }
  .notice_menu_list{
    width: 100%;
  }
  .notice_menu_list .swiper-container{
    width: 100%;
  }
  .sec3_cardNews{}
  .notice_menu_list .swiper-container > .swiper-wrapper .swiper-slide{
    width: 100%;
    height: 100%;
    position: relative;
    width: 100%;
  }
  .notice_menu_list > .swiper-container > .swiper-wrapper > .swiper-slide > a{
    width: 100%;
    justify-content: space-between;
    white-space: normal;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    text-align: center;
  }
  .notice_menu_list > .swiper-container > .swiper-wrapper > .swiper-slide > a > h6{
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -1px;
    line-height: 43px;
    padding-right: 20px;
  }
  .notice_menu_list > .swiper-container > .swiper-wrapper > .swiper-slide > a > .noticebox1,
  .notice_menu_list > .swiper-container > .swiper-wrapper > .swiper-slide > a > .noticebox2,
  .notice_menu_list > .swiper-container > .swiper-wrapper > .swiper-slide > a > .noticebox3,
  .notice_menu_list > .swiper-container > .swiper-wrapper > .swiper-slide > a > .noticebox4{
    border-radius: 50%;
    width: 45px;
    height: 45px;
    padding: 0;
  }
  .notice_menu_list > .swiper-container > .swiper-wrapper > .swiper-slide > a > .body_text{
    font-size: 15px;
    white-space: normal;
    width: 280px;
    color: #333333;
  }
  .notice_menu_list > .swiper-container > .swiper-wrapper > .swiper-slide > a > .small_text{
    color: #555555;
  }
  .mobile_notice_control{
    margin-top: 22px;
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 40px;
    border: 1px solid #31343D;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  .mobile_notice_control button{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .mobile_notice_control > button > i{
    font-size: 15px;
  }
  .mobile_notice_control > button > p{
    margin-left: 10px;
  }
  .sec3_cardNews{
    width: 100%;
    height: 280px;
    margin-top: 60px;
    border: 1px solid #c9c9c9;
    overflow: hidden;
  }
  .cardBox{
    width: 100%;
    height: 100%;
  }
  .cardBoxIn > .swiper-slide{
    width: 100%;
    height: 100%;
  }
  .swiper-pagination > .swiper-pagination-bullet-active{
    background-color: var(--PrimaryColor);
  }
  .sec3_consumer{
    position: absolute;
    top: 850px;
    width: 100%;
    height: auto;
  }
  .sec3_consumer::before{
    content: '';
    position: absolute;
    left: 0;
    top: 30px;
    width: 65px;
    height: 270px;
    background: url(../assets/images/consumersmoothleft.png) no-repeat 50% 50%;
    background-size: cover;
    z-index: 1000;
  }
  .sec3_consumer::after{
    content: '';
    position: absolute;
    right: 0;
    top: 30px;
    width: 65px;
    height: 270px;
    background: url(../assets/images/consumersmoothright.png) no-repeat 50% 50%;
    background-size: cover;
    z-index: 1000;
  }
  .sec3_consumer_inner{
    width: 100%;
    position: absolute;
  }
  .sec3_consumer_inner h3{
    font-size: 22px;
    margin-top: 0;
  }
  .consumerBox{
    height: auto;
    left: 50%;
    margin-top: 25px;
    transform: translateX(-50%);
  }
  .consumerBox
  .consumerBoxIn > .swiper-slide{
    width: 180px;
    height: auto;
  }
  .consumerBoxIn > .swiper-slide > img{
    width: 100%;
    height: 100%;
  }
  .consumerBoxIn > .swiper-slide > p{
    font-size: 13px;
    margin-top: 10px;
  }
  .consumerBoxIn > .swiper-slide-active{
    transform: perspective(800px) translateZ(80px) rotateY(0deg); 
  }
  .consumerBoxIn > .swiper-slide:not(.swiper-slide-active) {
    transform: perspective(400px) translateZ(0) rotateY(-15deg); 
  }
  .consumerBoxIn > .swiper-slide-active::before{display: none;}
  .consumer_controls{
    width: 300px;
    margin-top: 0x;
    top: 50%;
  }
  .mobile_consumerbtn{
    display: block;
    width: 230px;
    height: 45px;
    position: absolute;
    top: 340px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50px;
    background-color: var(--MobileColor);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .mobile_consumerbtn > p{
    color: #fff;
    margin-right: 10px;
  }
  .mobile_consumerbtn > i{
    color: #fff;
    font-size: 16px;
    font-weight: 200;
  }
  /* ***************** section4 ***************** */
  .sec4_cardEvent, .banner_controls > .left, .banner_controls > .right{display: none;}
  #section4{
    position: absolute;
    top: 3100px;
    height: auto;
    border-radius: 0;
    background: none;
    box-shadow: none;
    width: 100%;
    z-index: 100;
  }
  .section4_inner{
    width: 90%;
    height: auto;
  }
  #section4::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 10px;
    top: 0;
    background-color: #F6F5F1;
  }
  .sec4_wrap{
    display: block;
    width: 100%;
    height: auto;
  }
  .sec4_talk{
    width: 100%;
    height: 820px;
    margin-top: 10px;
  }
  .sec4_talkIn{
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
  }
  .sec4_talk h3{
    margin-top: 20px;
    font-size: 26px;
  }
  .sec4_talk p{
    font-size: 16px;
  }
  .talkBox{
    margin-top: 86px;
    width: 100%;
    height: 700px;
  }
  /* 소통톡톡 스와이퍼 잘 안풀리는 부분 => 나중에 문제생길 시 이거 변경 */
  .swiper-grid-column > .swiper-wrapper{
    flex-direction: row;
    align-items: baseline;
  }
  .talkBoxIn{
    width: 100%;
    height: auto;
  }
  .talkBoxIn > .swiper-slide{
    width: 100%;
    height: 100%;
  }
  .talkBoxIn > .swiper-slide > p{
    font-size: 14px;
  }
  .sec4_right{
    width: 100%;
    position: absolute;
    top: 155px;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .talk_controls{
    display: none;
  }
  .sec4_sns{
    width: 100%;
    height: auto;
    padding: 0;
    border-radius: 0;
    margin-top: 0;
    box-shadow: none;
    z-index: 10;
  }
  .sec4_sns > h5{
    display: none;
  }
  .banner{
    width: 90%;
    height: 100px;
    position: absolute;
    overflow: hidden;
    margin-top: 60px;
  }
  .banner::after{
    content: '';
    position: absolute;
    width: 85px;
    height: 67px;
    right: 0;
    bottom: 0;
    background: url(../assets/images/bannersmooth.png) no-repeat 50% 50%;
    background-size: cover;
    z-index: 10;
  }
  .banner h3{
    font-size: 22px;
    width: 70px;
    height: 30px;
    white-space: nowrap;
    position: absolute;
    top: 0;
    left: 0;
  }
  .banner_wrap{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .banner_controls{
    width: 32px;
    height: 32px;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
  }
  .banner_controls > .pause{
    position: absolute;
    left: 100%;
  }
  .bannerBox{
    position: absolute;
    bottom: 0;
  }
  .bannerBoxIn > .swiper-slide{
    width: 100px;
    height: auto;
  }
  /* advice */
  .consumer_advice{
    width: 80%;
    height: 165px;
    top: 1170px;
    background: url(../assets/images/mobile-advice.png) no-repeat 50% 50%;
    background-size: cover;
    display: block;
    text-align: center;
    border-radius: 28px;
    box-shadow: 0 4px 4px #00000030;
    z-index: 1000 !important;
  }
  .advice_desc{
    width: 80%;
    height: 100%;
    margin: 0 auto;
  }
  .advice_desc h3{
    font-size: 26px;
    font-weight: 700;
    white-space: nowrap;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 30px;
  }
  .advice_desc > h3::after{
    width: 15px;
    height: 15px;
    background-size: cover;
  }
  .advice_desc p{
    display: none;
  }
  .advice_time{
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    white-space: nowrap;
  }
  .advice_time > .time{
    font-size: 14px;
    padding: 2px 10px;
  }
  .advice_time > .body_text{
    font-size: 14px;
  }
  .advice_time > i > small{
    font-size: 10px;
    font-weight: 200;
  }
  .advice_num{
    position: absolute;
    top: 15px;
    left: 37%;
    transform: translateX(-50%);
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .advice_num::after{
    content: '';
    position: absolute;
    width: 115%;
    height: 1px;
    background-color: #fff;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
  }
  .advice_num > h6{
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    margin-right: 15px;
  }
  .advice_num > h6 > strong{
    font-size: 30px;
  }
  .advice_num > small{
    font-size: 10px;
    font-weight: 200;
    flex: 1.2;
    line-height: 1.2;
    text-align: left;
  }
  /* ***************** footer ***************** */
  .footer_user_menu{display: none;}
  footer{
    margin-top: 120px;
    width: 100%;
    height: 660px;
    border-radius: 50px 0 0 0;
    overflow: hidden;
    z-index: -1;
    position: absolute;
    box-shadow: 0 -9px 6px #00000018;
  }
  footer::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 800px;
    background: url(../assets/images/sec4_background.png)no-repeat 50% 50%;
    background-size: cover;
    z-index: -1;
  }
  .footer_navi_inner{
    width: 90%;
    height: 100%;
  }
  .footer_navi{
    margin-top: 130px;
    display: block;
    width: 100%;
    height: 100%;
  }
  .clearfix{
    width: 89.5%;
    height: 50px;
    position: absolute;
    top: 455px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 16px;
    /* flex wrap 에서 gap으로 상하 여백 조절할 수 있음 */
    gap: 0 10px;
  }
  .clearfix::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #62626240;
    top: -25px;
  }
  .clearfix > li{
    height: 20px;
  }
  .clearfix > li::after{
    margin-left: 0;
    background-color: var(--GrayScale2);
  }
  .clearfix > li:nth-child(1){width: 30%;}
  .clearfix > li:nth-child(2){width: 55%;}
  .clearfix > li:nth-child(3){width: 20%;}
  .clearfix > li:nth-child(4){width: 20%;}
  .clearfix > li:nth-child(5){width: 20%;}
  .footer_navi_right{
    width: 100%;
    height: 100%;
    gap: 10px;
  }
  .footer_navi_right > div{
    flex: 1;
    border: 1.5px solid var(--PrimaryColor);
    border-radius: 10px;
    z-index: 100;
  }
  .familybtn, .siteabtn{
    color: var(--PrimaryColor);
    font-size: 16px;
    font-weight: 400;
    text-align: left;
  }
  .familybtn > i, .siteabtn > #arrow2{
    color: var(--PrimaryColor);
    position: absolute;
    right: 20px;
    transform: rotate(90deg);
  }
  .family_content, .sitea_content{
    top: 62px;
  }
  .family_content::-webkit-scrollbar-thumb,
.sitea_content::-webkit-scrollbar-thumb{
  background: var(--PrimaryColor);
}
#arrow.rotate, #arrow2.rotate{transform: rotate(180deg);}
.footer_info_inner{
  width: 90%;
  height: 100%;
  position: absolute;
  top: 210px;
  left: 50%;
  transform: translateX(-50%);
}
.footer_info{
  display: block;
  width: 100%;
  height: auto;
}
.footer_logo_gray{
  display: none;
}
.mobile_footer_logo{
  display: block;
  width: 150px;
  height: auto;
  margin-bottom: 27px;
}
.footer_info_left{
  display: block;
}
.address{
  width: 100%;
  margin-left: 0;
}
.address_desc{
  font-size: 16px;
  color: var(--GrayScale2);
}
.address_desc > i{
  display: block;
  margin-bottom: 5px;
}
.address_desc > .fir{
  display: none;
}
.address_desc > .copy{
  display: block;
  position: absolute;
  top: 380px;
  font-weight: 300;
  color: #626262;
}
.mark{
  margin-right: 0;
  margin-top: 100px;
  width: 68px;
  height: auto;
}
.mark > a > img{
  width: 100%;
  height: 100%;
}
}

@media screen and (max-width:375px) {
  /* ***************** section1 ***************** */
  .main_title::after{
    width: 318px;
    height: 250px;
    top: 44%;
  }
  .search_box{
    top: -2%;
  }
  .mobile_kca_desc > .mobile_kca{
    left: 0;
    width: 93px;
    height: 24px;
  }
  .mobile_kca_desc > .mobile_kca > p,
  .mobile_kca_desc > .mobile_kca > i{
    font-size: 12px;
  }
  .mobile_kca_desc > .mobile_kca > i{
    left: 100%;
    margin-left: 5px;
  }
  /* ***************** section2 ***************** */
  .sec2_item > li > a > img{
    height: 60px;
  }
  .sec2_item > .consumer_menu > a > h6{
    font-size: 12px;
  }
  .mobile_main_content{
    top: 910px;
  }
  .main_contents{
    top: 900px;
  }
  .contentBtn{
    width: 100%;
  }
  .conBox{
    width: 65px;
    height: 65px;
  }
  .content h4{
    margin-top: 80px;
  }
  .contentBtn a{
    display: inline-block;
    width: 100%;
    height: 100%;
  }
  .contentBtn > img{
    width: 65px;
    height: 60px;
  }
  .content h4{
    font-size: 15px;
  }
  /* ***************** section2 ~ 3 ***************** */
  .sec2_news{
    top: 390px;
  }
  .newstab-menu{
    width: 100%;
    gap: 43px;
  }
  .sec2_news h3{
    margin-top: 20px;
  }
  .newstab.active::before{
    width: 180px;
  }
  /* ***************** section3 ***************** */
  #section3{
    width: 100%;
    top: 1760px;
  }
  .notice_menu_list > .swiper-container > .swiper-wrapper > .swiper-slide > a > .noticebox1,
  .notice_menu_list > .swiper-container > .swiper-wrapper > .swiper-slide > a > .noticebox2,
  .notice_menu_list > .swiper-container > .swiper-wrapper > .swiper-slide > a > .noticebox3,
  .notice_menu_list > .swiper-container > .swiper-wrapper > .swiper-slide > a > .noticebox4{
    width: 37px;
    height: 37px;
  }
  .notice_menu_list > .swiper-container > .swiper-wrapper > .swiper-slide > a > h6{
    line-height: 35px;
    letter-spacing: -2px;
  }
  .notice_menu_list > .swiper-container > .swiper-wrapper > .swiper-slide > a > .body_text{
    width: 200px;
  }
  .sec3_consumer{
    top: 830px;
  }
  #section4{
    top: 3050px;
  }
  .banner{
    margin-top: -15%;
  }
  /* advice */
  .consumer_advice{
    top: 1030px;
    height: 130px;
  }
  .advice_desc h3{
    top: 20px;
  }
  .advice_time{
    bottom: 20px;
  }
  .advice_time > .time{
    font-size: 10px;
    padding: 2px 7px;
  }
  .advice_time > .body_text{
    font-size: 12px;
  }
  .advice_time > i > small{
    font-size: 7px;
  }
  .advice_num::after{
    width: 105%;
    left: 48%;
    bottom: -5px;
  }
  .advice_num{
    top: 0;
    width: 80%;
  }
  .advice_num > h6{
    font-size: 10px;
  }
  .advice_num > small{
    font-size: 7px;
    flex: 1;
  }
  /* ***************** footer ***************** */
  .footer_user_menu{display: none;}
  footer{
    margin-top: -70px;
  }
  .clearfix{
    width: 90%;
    font-size: 14px;
  }
  .clearfix li:nth-child(2){
    letter-spacing: -0.5px;
  }
  .familybtn, .siteabtn{
    font-size: 14px;
    padding-left: 10px;
  }
  .familybtn > i, .siteabtn > #arrow2{
    right: 10px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
  }
}