@charset "utf-8";
/* 초기화 */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;   
}
ul{
    list-style: none;
}
a{
    color: #333;
    text-decoration: none;
}
img{
    vertical-align: top;
    max-width: 100%;
}
body {
    font-size: 14px;    
    color: #1f1f1f;    
    font-family: 'Poppins', 'Noto Sans KR', sans-serif;

}
/* 공통클래스 */
.clearfix::after{
    content: '';
    display: block;
    clear: both;
}

/* all-menu-btn */

.all-menu{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff url(../images/pc_ham_bg2.png)no-repeat right top -80px;
    z-index: 90;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s;
  }
  .all-menu.active{
    visibility: visible;
    opacity: 1;
  }
  .all-menu .contatiner{
    width: 100%;
  }
  .all-menu .menu{
    display: flex;
    justify-content: center;
    gap: 10px;
  }
  .all-menu .menu > li{
    width: 255px;
    border-radius: 30px;
    border: solid 1px rgba(224, 223, 226, 0.6);
    padding: 50px 30px;
    background-color: #fff;
    transition: transform 0.6s
  }
  .all-menu .menu> li:hover{
    box-shadow: 0px 5px 24.3px 2.7px rgba(0, 0, 0, 0.09);
    transform: translateY(-10px);
  }
  .all-menu .menu > li > a{
    display: block;
    /* display: block 처리를 해야지 패딩을 먹음 */
    font-family: Binggrae-Bold;
    font-size: 32px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -1.6px;
    padding-bottom: 40px;
  }
  .all-menu .menu > li > a:hover{
    color: #e0462e;
    font-weight: 500;
  }
  .all-menu .submenu{}
  .all-menu .submenu li{
    line-height: 1;
  }
  /* .all-menu .submenu li:hover{
    background: url(../images/pc_ham_hover_img.png)no-repeat right top 2px;  
  } */
  .all-menu .submenu li a{
    font-size: 18px;
    line-height: 1;
    display: block;
  }
  .all-menu .submenu li+li{
    margin-top: 15px;
  }
  .all-menu .submenu li:hover a{
    color: #e0462e;
    font-weight: 500;
  }
  /* ========= mobile menu ========= */
  .mb-menu{
    position: fixed;
    width: 500px;
    height: 100%;
    padding: 0;
    top: 0;
    /* right: 0; */
    right: -500px;
    z-index: 110;
    background: #fff;
    overflow: hidden;
    border-top-left-radius: 30px;
  }
  .mb-menu.active{
    right: 0;
  }
  .mb-menu .mb-menu-top{
    padding: 20px;
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
    justify-content: space-between;
    display: flex;
  }
  .mb-menu .mb-menu-top ul{
    display: flex
  }
  .mb-menu .mb-menu-top ul li{
    margin-right: 10px;
  }
  .mb-menu .mb-menu-top ul li a{
    padding: 10px 14px;
    border-radius: 17px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    /* height: 36px; */
    font-size: 15px;
    font-weight: 500;
    /* line-height: 25px; */
  }
  .mb-menu .mb-menu-top ul li a img{
    margin: 0 3px;
    vertical-align: middle;
    margin-left: 4px;
  }
  .mb-menu .mb-menu-top .mb-btn-close{
    width: 22px;
    line-height: 25px;
    outline: none;
    border: none;
    background-color: transparent;
  }
  .mb-menu .mb-menu-top .mb-btn-close img{
  }
  /* ========= mb-menu top end ========= */
  .mb-menu-middle{
    height: calc(100% - 148px);
    background-color: #fff;
    overflow-y: scroll;
  }
  .mb-menu-middle .menu{
    padding: 11px 0 30px;
    width: 100%;
  }
  .mb-menu-middle .menu > li{}
  .mb-menu-middle .menu > li > a{
    display: block;
    padding: 11px 20px 11px 38px;
    font-size: 21px;
    font-weight: 500;
    font-stretch: normal;
    font-family: "Binggrae-Bold";
    line-height: 1;
    /*글자 사이즈와 line-height가 똑같으면 line-height:1 설정 */
    position: relative;
  }
  .mb-menu-middle .menu > li > a::after{
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    background: url(../images/m_ham_menu_btn.png) no-repeat center / 100% auto;
    transition: 0.3s;
    width: 9px;
    height: 5px;
    /* absolute나 fixed는 따로 너비, 높이 줘야함 */
  }
  .mb-menu-middle .menu > li > a.on::after{
    transform: translateY(-50%) rotate(180deg);
  }
  .mb-menu-middle .submenu {
    padding: 11px 20px 11px 38px;
    background-color: #f7f7f7;
    display: none
  }
  .mb-menu-middle .submenu li{
    padding: 7px 0;
    line-height: 1;
  
  }
  .mb-menu-middle .submenu li a{
    color: #707070;
    font-size: 16px;
    display: inline-block;
    position: relative;
  }
  .mb-menu-middle .submenu li a:hover{
    color: #e04230;
  }
  .mb-menu-middle .submenu li a::after{
    content: '';
    position: absolute;
    top: 0;
    right: -10px;
    display: block;
    width: 3px;
    height: 3px;
    background-color: #e04230;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s;
  }
  .mb-menu-middle .submenu li:hover a::after{
    opacity: 1;
  }
  /* ========= mb-menu middle end ========= */
  .mb-menu .mb-menu-bottom{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 25px 38px;
    width: 100%;
    line-height: 1;
    background: #fff;}
  .mb-menu .mb-menu-bottom ul{}
  .mb-menu .mb-menu-bottom ul li{}
  .mb-menu .mb-menu-bottom ul li+li{
    padding-left: 20px;
    position: relative;
    /* 가상요소 before의 포지션이 필요 */
  }
  .mb-menu .mb-menu-bottom ul li+li::before{
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    width: 1px;
    height: 10px;
    background-color: rgba(0, 0, 0, 0.1);
  }
  
  .mb-menu .mb-menu-bottom ul li a{
    color: rgba(31, 31, 31, 0.3);
    font-size: 16px;
    font-weight: 500;
  }
  .mb-menu .mb-menu-bottom ul li.on a{
    color: #1f1f1f;
  }
  .mb-menu .mb-menu-bottom > a{
    color: #707070;
    font-size: 16px;
    font-weight: 500;
  }
  /* ========= mb-menu bottom end ========= */
  
  /* ========= mb-menu end ========= */
  
  /* ========= common area ========= */
  .clearfix::after {
    content: "";
    display: block;
    clear: both;
  }
  .flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .font-Binggrae {
    font-family: Binggra;
  }
  
  .wrap {
    position: relative;
  }
  /* ======== header area ======== */
  .header {
    position: absolute;
    width: 100%;
    z-index: 101;
    background-color: transparent; /*투명화*/
    overflow: hidden;
  }
  .header.on {
    position: absolute;
    border-radius: 0 0 50px 50px;
    box-shadow: 0px 2px 9.8px 0.2px rgba(0, 0, 0, 0.08);
    background-color: #fff !important;
    transition: height 0.3s ease;
    padding-bottom: 30px;
  }
  .header.fixed {
    background-color: #fff;
    position: fixed;
    height: 147px;
    border-bottom: 1px solid #e7e7e7
  }
  .header .container {
    max-width: calc(100% - 160px);
    /* max-width: calc(100% - 50px); */
    margin: 0 auto;
  }
  .header .header-top {
    border-bottom: 1px solid #e7e7e7;
    height: 31px;
  }
  .header .header-top .container.flex-center {
    justify-content: flex-end;
  }
  .header .header-top ul.flex-center {
    gap: 20px;
  }
  .header .header-top ul.flex-center > li {
    position: relative;
  }
  .header .header-top ul.flex-center > li > a {
  }
  .header .header-top ul.flex-center > li > a > img {
    vertical-align: middle;
    margin-bottom: 2px;
    margin-left: 5px;
  }
  .header-bottom {
    height: 115px;
  }
  .header.on .header-bottom {
    border-bottom: 1px solid #e7e7e7;
  }
  .header-bottom .container.flex-center {
    justify-content: space-between;
    height: 100%;
  }
  
  /* PC MO 적용하기 */
  .header-bottom .logo {
    font-size: 0;
    line-height: 1;
  }
  .header-bottom nav {
  }
  .header-bottom nav .menu {
  }
  .header-bottom nav .menu > li {
    display: inline-block;
    vertical-align: top;
    position: relative;
    padding: 45px 80px 0 0;
    transition: 0.3s;
  }
  .header-bottom nav .menu > li > a {
    display: block;
    padding-bottom: 40px;
    line-height: 30px;
    color: #333;
    font-size: 20px;
    font-size: 20px;
    position: relative;
    white-space: nowrap;
  }
  .header-bottom nav .menu > li:hover > a {
    color: #e0462e;
  }
  .header-bottom nav .menu > li:hover > a::before {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background-color: #e0462e;
    position: absolute;
    top: 100%;
    left: 0;
  }
  .header-bottom nav .menu > li:hover > a::after {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #e0462e;
    position: absolute;
    top: 4px;
    right: -11px;
  }
  .header-bottom nav .menu > li .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    /* opacity: 0;
    visibility: hidden; */
    padding-top: 20px;
  }
  .header-bottom nav .menu > li .submenu li {
  }
  .header-bottom nav .menu > li .submenu li a {
    padding: 7px 0;
    display: block;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: -0.02em;
  }
  
  .header-bottom nav .menu > li .submenu li a:hover {
    color: #e0462e;
  }
  .header-bottom .header-right {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .header-bottom .lang {
    margin-right: 33px;
    cursor: pointer;
    font-family: Poppins;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.5px;
    position: relative;
  }
  
  .header-bottom .lang ul {
  }
  .header-bottom .lang ul li img {
    margin-top: 10px;
    margin-left: 10px;
    font-size: 0;
    line-height: 1;
  }
  .header-bottom .lang .langs {
    display: none;
    position: absolute; /* 기존 absolute 유지 */
    top: 100%;
    left: 0;
    width: 10px; /* 너비를 고정 */
    text-align: center;
    background-color: #fff;
    border-radius: 10px;
    padding: 10px 0;
    box-shadow: 0px 3px 7px 0 rgb(0 0 0 / 10%);
    z-index: 9999; /* 다른 요소 위로 올라오도록 설정 */
    opacity: 0;
    transition: opacity 0.3s ease-out;
    max-height: 200px; /* 최대 높이를 설정하여 일부만 보이지 않도록 수정 */
    overflow-y: auto; /* 높이를 초과하는 경우 스크롤 가능하도록 설정 */
  }
  .header-bottom .lang .langs.show {
    display: block;
    opacity: 1;
    transition: opacity 0.3s ease-out;
  }
  .header-bottom .lang .langs.hide {
    opacity: 0;
    transition: opacity 0.3s ease, display 0.3s ease 0.3s;
  }
  .header-bottom .lang .lang li {
  }
  .header-bottom .lang .lang li a {
  }
  .header-bottom .hamburger-menu {
    cursor: pointer;
    width: 26px;
    position: relative;
  }
  .header-bottom .hamburger-menu a {
    display: block;
    width: 100%;
    height: 100%;
  }
  .header-bottom .hamburger-menu a span {
    display: block;
    width: 100%;
    height: 2px; /*두께*/
    background-color: #000;
    transition: all 0.3s ease-in-out;
  }
  .header-bottom .hamburger-menu a span + span {
    margin-top: 8px;
  }
  
  /*hamburger-menu rotate */
  
  .hamburger-menu.checked a span:nth-child(1) {
    transform: rotate(-45deg);
    margin-top: 8px;
  }
  
  .hamburger-menu.checked a span:nth-child(2) {
    transform: rotate(45deg);
    margin-top: -2px;
  }
  
  .hamburger-menu.checked a span:nth-child(3) {
    opacity: 0;
    transform: rotate(45deg);
  }
/* 메인배너영역 */
.section01{

    padding: 180px 0;
    text-align: center;
    background: url(../images/pc_section01_3.jpg) no-repeat center / cover;
}
.section01 .container{
}
.section01 .container .log-box{
    width: 95%;
    position: relative;
    display: inline-block
}
.section01 .container .log-box .mo{
    display: none;
    margin: 0 auto;
}
.section01 .container .search-box{
    max-width: 1020px;
    height: 80px;
    border-radius: 40px;
    box-shadow: 0px 5px 24.3px 2.7px rgba(0,0,0,0.09);
    background-color: #fff;
    margin: 40px auto 0;
    display: flex;
    justify-content: space-between;
}
.section01 .container .search-box .search{
    display: flex;
    width: 100%;
    height: 100%;
    padding: 0 15px 0 55px;
    align-items: center;
    justify-content: space-between;
    font-family: Poppins, "Noto Sans KR", sans-serif;
}
.section01 .container .search-box input{
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    width: 78%;
    height: 100%;
    padding-left: 30px;
    font-size: 17px;
    letter-spacing: -0.85px;
    text-align: left;
    background:url(../images/search_icon.png)no-repeat center left;
    border: none;
    outline: none;
}
.section01 .container .search-box button{
    max-width: 180px;
    cursor: pointer;
    width: 22%;
    height: 55px;
    color: #fff;
    font-size: 14px;
    letter-spacing: normal;
    border-radius: 27.5px;
    box-shadow: inset 0px 5px 10px 0 rgba(53,53,53,0.11);
    background-image: linear-gradient(to top, #ed1c24, #e0462e);
    border: none;
    font-family: "Poppins", serif;
    font-weight: 500;
    font-style: normal;
}
.section01 .container .keyword-box{
    margin-top: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
}
.section01 .container .keyword-box li{
    font-family: Binggrae;
    font-size: 12px;
    min-width: 120px;
    height: 37px;
    line-height: 36px;
    border-radius: 18.5px;
    border: solid 1px #edecef;
    cursor: pointer;
    letter-spacing: normal;
    font-weight: normal;
    padding: 0 20px;
    
}
.section01 .container .keyword-box li+li{
    margin-left: 7px;
}

.swiper{
 background: url(../images/pc_section02_2.jpg)no-repeat center/cover;
}
.section02 .container{
    max-width: 1650px;
    width: 100%;
    margin: 0 auto 132px; 
    position: relative;
}
.section02 .container h3{
    font-family: 'Binggrae-Bold';
    font-size: 38px;
    font-weight: bold;
    line-height: 1.1;
    letter-spacing: -1.9px;
    color: #1f1f1f;
    text-align: center;
    margin-bottom: 20px;
} 
.section02 .container .swiper{
    width: 94%;
    max-width: 1573px;
    margin: 0 auto;
    padding: 0 7px;

} 
.section02 .container .swiper-wrapper{
     padding: 27px 0;
  
} 
.swiper-wrapper .swiper-slide{
    opacity: 0;
    transform: translateY(50px);
}
.swiper-wrapper .swiper-slide.visible {
    transition: transform 1.5s ease, opacity 1s ease;
    opacity: 1;
    transform: translateY(0);
}
.swiper-wrapper .swiper-slide .transition{
    transition: transform 1s;
} 
.swiper-wrapper .swiper-slide .transition:hover{
    transform: translateY(-10px);
}
.swiper-wrapper .swiper-slide:nth-child(1){
    transition-delay: 0.1s;
}
.swiper-wrapper .swiper-slide:nth-child(2){
    transition-delay: 0.2s;
}
.swiper-wrapper .swiper-slide:nth-child(3){
    transition-delay: 0.3s;
}
.swiper-wrapper .swiper-slide:nth-child(4){
    transition-delay: 0.4s;
}
.swiper-wrapper .swiper-slide:nth-child(5){
    transition-delay: 0.5s;
}
.swiper-wrapper .swiper-slide:nth-child(6){
    transition-delay: 0.6s;
}
.section02 .container .swiper-wrapper .swiper-slide .tex-box{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 43px;
    border-radius: 21px;
    color: #1f1f1f;
    font-size: 16px;
    background-color: #f9f9f9;
    margin-top: 12px;
    letter-spacing: -0.09em;
}
.section02 .container .swiper-wrapper .swiper-slide:hover .tex-box span:first-child{
    display: none;
} 
.section02 .container .swiper-wrapper .swiper-slide .tex-box .hover_txt{
    display: none;
}
.section02 .container .swiper-wrapper .swiper-slide:hover .tex-box .hover_txt{
    display: block;
    letter-spacing:normal
}
.section02 .container .swiper-wrapper .swiper-slide .tex-box:hover{
    background-image: linear-gradient(to top, #ed1c24,#e0462e);
    box-shadow: inset 0px 5px 10px 0 rgba(121, 121, 121, 0.03);
    color: #fff;
}
.btn-next{
    background: url(../images/next_arrow.png)no-repeat center;
    width: 8px;
    height: 15px; 
    position: absolute; 
    right: 0%; 
    top: 53.4%; 
    cursor: pointer;
    z-index: 10;

}
.btn-prev{
    background: url(../images/prev_arrow.png)no-repeat center;
    width: 8px;
    height: 15px; 
    position: absolute; 
    left: 0%;
    top: 53.4%; 
    cursor: pointer;
    z-index: 10;
    overflow: visible;
    opacity: 0.1;
}

.swiper-pagination.num1 ,
.swiper-pagination.num2 {
    text-align: center;
    width: 100%;

}
  .swiper-pagination-bullet {
    width: 6px;
    height: 6px; 
    background-color: #1f1f1f;
    border-radius: 50%; 
    display: inline-block;
    margin: 10px 8px  !important;
  }
  .swiper-pagination-bullet:nth-child(n+3) {
    display: none;
  }


.section03{}
.section03 .container{   
    max-width: 1650px;
    width: 100%;
    margin: 0 auto 140px; 
    position: relative;
}
.section03 .container h3{
    font-family: 'Binggrae-Bold';
    font-size: 38px;
    font-weight: bold;
    line-height: 1.45;
    letter-spacing: -1.9px;
    color: #1f1f1f;
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.45;
}

.section03 .container .swiper{
    width: 100%;
    max-width: 1573px;
    margin: 0 auto;
    padding: 0 7px;
}
.section03 .container .swiper-wrapper{
    opacity: 1;
    padding: 20px 0;
}

.section03 .container .swiper-wrapper .swiper-slide{
    height: 250px;
    border: 1px solid #edecef;
    background-color: #fff;
    border-radius: 30px;
    display: block;
    position: relative;
    overflow: hidden;
}

.section03 .container .swiper-wrapper .swiper-slide:hover{
    transform: translateY(-10px);
    box-shadow: 0px 5px 24.3px 2.7px rgba(0, 0, 0, 0.09);
}
.section03 .container .swiper-wrapper .swiper-slide .default{
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
}
.section03 .container .swiper-wrapper .swiper-slide .hover-box{
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: relative;
    transition: bottom .5s ease-out;
    opacity: 0;
    transform: translateY(100px);
    transition: all .0s;
}
.section03 .container .swiper-wrapper .swiper-slide:hover .default{
    opacity: 0;
    
}
.section03 .container .swiper-wrapper .swiper-slide:hover .hover-box{
    opacity: 1;
    transform: translateY(0px);
    transition: all .7s;
}

.section03 .container .swiper-wrapper .swiper-slide >.hover-box >a> img{
    transform: scale(0.8);   
}
.section03 .container .swiper-wrapper .swiper-slide .hover-box .text::before{
    content: '';
    display: block;
    width: 20px;
    height: 1px;
    background: rgba(0, 0, 0, 0.2);
    margin: 18px auto;
}

.section03 .container .swiper-wrapper .swiper-slide .hover-box .text{
    overflow: hidden;
    font-size: 16px;
    line-height: 1.38;
    color: rgba(0, 0, 0, 0.8);
    text-align: center;
    transition: all 0.7s;
    line-height: 1.38;
    padding-bottom: 50px;
    letter-spacing: -0.09em;
}
.swiper-wrapper .swiper-slide> .hover-box> .btn{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 21px;
    max-width: 225px;
    width: 90%;
    height: 43px;
    color: #fff;
    box-shadow: inset 0px 5px 10px 0 rgba(53, 53, 53, 0.11);
    background-image: linear-gradient(to top, #ed1c24, #e0462e);
    position: absolute;
    bottom: 10px;
    font-size: 14px;
}
.btn-prev-2{
    top: 60%;
    left: 0%;
}
.btn-next-2{
    top: 60%;
    right: 0%;
}
.swiper-pagination.num2{
    margin: -70px 0;
}

/* 슬라이더영역 반응형 */

.section04{
    background: url(../images/pc_section02_2.jpg)no-repeat center/cover;
    padding-bottom:140px ;
}
.section04 .container{
    max-width: 1310px;
    margin: 0 auto;
}
.section04 .container h3{
    font-family: 'Binggrae-Bold';
    margin-bottom: 40px;
    font-size: 38px;
    line-height: 1.45;
    letter-spacing: -1.9px;
    color: #1f1f1f;
    text-align: center;
}
.section04 .container .qna-box{
    position: relative;
    padding: 60px 45px;
    border-radius: 30px;
    box-shadow: 0 5px 24.3px 2.7px rgba(0,0,0,0.09);
    background-color: #fff;
    margin-bottom: 132px;
}
.section04 .container .qna-box .consultation-box{
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}
.section04 .container .qna-box .consultation-box .email-box{
    background:#eef8fa  url(../images/sec04_backimg01.png)no-repeat center right /cover;
    cursor: pointer;
    display: block;
    width: 48.5%;
    height: 325px;
    padding: 55px 45px;
    border-radius: 30px;
    position: relative;
}
.section04 .container .qna-box .consultation-box .email-box h4{
    font-family: 'Binggrae-Bold';
    line-height: 1;
    font-size: 32px;
    padding-bottom: 30px;
    letter-spacing: -1.6px;
}
.section04 .container .qna-box .consultation-box .email-box p{
    font-size: 16px;
    line-height: 1.63;
    letter-spacing: -0.09em;
}
.section04 .container .qna-box .consultation-box .email-box p.mo{
    display: none;
}
.section04 .container .qna-box .consultation-box .email-box a{
    position: absolute;
    left: 45px;
    bottom: 50px;
    font-family: "Noto Sans KR", serif;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 43px;
    border-radius: 21.5px;
    border: solid 1px rgba(224, 223, 226, 0.6);
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    letter-spacing: normal;
    box-shadow: inset 0px 5px 10px 0 rgba(121, 121, 121, 0.03);
    background: linear-gradient(to top, #ed1c24, #e0462e);
}
.section04 .container .qna-box .consultation-box .phone-box{
    background: #fdf3f2 url(../images/sec04_backimg02.png)no-repeat center right /cover;
    display: block;
    width: 48.5%;
    height: 325px;
    padding: 55px 45px;
    border-radius: 30px;
    position: relative;
}
.section04 .container .qna-box .consultation-box .phone-box h4{
    font-family: Binggrae-Bold;
    line-height: 1;
    font-size: 32px;
    padding-bottom: 30px;
    font-weight: bold;
    letter-spacing: -1.6px;
}
.section04 .container .qna-box .consultation-box .phone-box .phone{
    font-family: Poppins;
    font-size: 46.5px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -2.33px;
    color: #303030;
}
.section04 .container .qna-box .consultation-box .phone-box .time{
    font-size: 16px;
    display: flex;
    padding-top: 25px;
    line-height: 1;
    letter-spacing: -0.09em;
}
.section04 .container .qna-box .consultation-box .phone-box .time span{
    display: block;
    margin-left: 15px;
    color: #e0462e;
    font-weight: 500;

}
.section04 .container .qna-box  .title-box{
    display: flex;
    justify-content: space-between;
    padding: 47px 0 27px;
    align-items: center;
}
.section04 .container .qna-box .title-box h4{
    font-size: 23px;
    letter-spacing: -1.6px;
    font-family: Binggrae-Bold;
    line-height: 1;
}
.section04 .container .qna-box .title-box button{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 43px;
    border-radius: 21.5px;
    border: solid 1px rgba(224, 223, 226, 0.6);
    font-weight: 500;
    cursor: pointer;
    letter-spacing: normal;
    background-color: #fff;
    font-family: 'Poppins', 'Noto Sans KR', sans-serif;
    font-size: 14px;
}
.section04 .container .qna-box .title-box button:hover{
    box-shadow: inset 0px 5px 10px 0 rgba(121, 121, 121, 0.03);
    background: linear-gradient(to top, #ed1c24, #e0462e);
    color: #fff;
}
.section04 .container .qna-box .qna-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    letter-spacing: -0.09em;
}
.section04 .container .qna-box .qna-list li{
    width: 48%;
    margin-bottom: 10px;
    padding: 0 20px;
    height: 80px;
    border-radius: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: inset 0px 5px 10px 0 rgba(121, 121, 121, 0.08);
    cursor: pointer;
    background-color: #f9f9f9;
}
.section04 .container .qna-box .qna-list li:last-child {
    margin-bottom: 0;
}
.section04 .container .qna-box .qna-list li p{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 18px;
}
.section04 .container .qna-box .qna-list li  p .font-bing{
    letter-spacing: normal;
    padding-right: 2px;
    font-style: normal;
    font-family: Binggrae;
}
.section04 .container .qna-box .qna-list li  p span{
    letter-spacing: -0.09em;
}
.section04 .container .qna-box .qna-list li  > .link-arrow{
    width: 47px;
    height: 47px;
    background-color: #e0462e;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 23px;
    box-shadow: inset 0px 5px 10px 0 rgba(26, 26, 26, 0.14);
    transform: scale(0);
    transition: all 0.5s ease;
}
.section04 .container .qna-box .qna-list li  > .link-arrow img:last-child{
    display: none; 
}
.section04 .container .qna-box .qna-list li:hover p{
    font-weight: bold;
}
.section04 .container .qna-box .qna-list li:hover .link-arrow{
    transform: scale(1);
}

.section04 .container .sec04 >div{
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}
.section04 .container .sec04 div > .cyber-box,
.section04 .container .sec04 div > .safe-box{
    position: relative;
    padding-top: 60px;
    width: 48.5%;
    height: 230px;
    text-align: center;
    border-radius: 30px;
    box-shadow: inset 0px 5px 10px 0 rgba(121, 121, 121, 0.08);
    background-color: #f9f9f9;
    
}
.section04 .container .sec04 div > .safe-box{
    padding-top: 78px;
}
.section04 .container .sec04 div > .cyber-box a,
.section04 .container .sec04 div > .safe-box a{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 50px;
    box-shadow: inset 0px 5px 10px 0 rgba(121, 121, 121, 0.03);
    background: linear-gradient(to top, #ed1c24, #e0462e);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 43px;
    border-radius: 21.5px;
    border: solid 1px rgba(224, 223, 226, 0.6);
    font-weight: 500;
    cursor: pointer;

}
.section04 .container p{
    font-size: 20px;
    line-height: 1.63;
    letter-spacing: -0.09em;
}
/* aside*/
.btn-wr{
    position: fixed;
    bottom: 58px;
    right: 30px;
    z-index: 100;
}
.btn-wr .quick-btn{
    position: relative;
    padding-left: 10px;
    cursor: pointer;
}
.btn-wr .quick-btn img{
    animation: topdown 2s ease-in-out infinite;
}
.btn-wr .quick-btn >p{
    border-radius: 22.5px;
    box-shadow: 0px 3px 7px 0 rgb(0 0 0 / 5%);
    background-color: #fff;
    position: absolute;
    top: 50%;
    right: 82px;
    transform: translateY(-50%);
    width: 160px;
    height: 45px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}
.btn-wr .quick-btn:hover >p{
    display: flex;
}
.btn-wr .shop-btn{
    margin: 10px auto 5px 10px;
}
.btn-wr .shop-btn a{
    background-color: #fff;
    color: #1b1b1b;
    box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.06), inset 0px 5px 10px 0 rgba(255, 255, 255, 0.14);
    font-weight: 500;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    text-align: center;
    position: relative;
    cursor: pointer;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-wr .gotop-btn{
}
.btn-wr .gotop-btn .gotop{
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #000;
    text-align: center;
    position: relative;
    border: none;
    cursor: pointer;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: normal;
    display: none;
    margin-left: 20px;
}
.btn-wr .gotop-btn .gotop img{

}
.btn-wr .gotop-btn .godown{
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #000;
    text-align: center;
    position: relative;
    border: none;
    cursor: pointer;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: normal;
    margin-left: 20px;
    /* display: none; */
}
.btn-wr .gotop-btn .godown img{
    transform: translate(-55%, -50%) rotateZ(180deg);
    position: absolute;
    top: 50%;
    left: 50%;

}

@keyframes topdown {
    0% {
      transform: translateY(0%);
    }
    50% {
        transform: translateY(-10%);
      }
    100% {
      transform: translateY(0%);
    }
  }

/* 푸터 영역 */
.footer{
    padding: 40px 50px 30px;
    background-color: #1b1b1b;
}
.footer .container{}
.footer .container .footer-sec01{
    max-width: 1920px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.footer .container .footer-sec01 > ul{
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer .container .footer-sec01 > ul li{
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: -0.09em;
    font-weight: 500;
}
.footer .container .footer-sec01 > ul li+li{
    margin-left: 30px;
}
.footer .container .footer-sec02{
    display: flex ;
    align-items: flex-start;
    padding: 30px 0 115px;
}
.footer .container .footer-sec02 > div ul li{
    font-size: 17px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: -0.09em;
    line-height: 31px;
    
}
.footer .container .footer-sec02 > div ul li+li{
    padding-top: 10px;
}
.footer .container .footer-sec03{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.footer .container .footer-sec03 p{
    letter-spacing: -0.15px;
    color: rgba(255, 255, 255, 0.2);
}
.footer .container .footer-sec03 .sns-box{
    margin-right: 5%;
}
.footer .container .footer-sec03 .sns-box ul{
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer .container .footer-sec03 .sns-box ul li+li{
    margin-left: 15px;
}
.footer .container .footer-sec03 .sns-box ul li a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.36), inset 0px 4px 10.8px 2.2px rgba(73, 73, 73, 0.11);
    background-color: #1b1b1b;
    border-radius: 50%;
}
.footer .container .footer-sec03.mob{
    display: none;
 
}
.footer .container .footer-sec03.mob ul{
    display: flex;
    align-items: center;
}.footer .container .footer-sec03.mob ul li+li{
    padding-left: 25px;
    position: relative;
}
.footer .container .footer-sec03.mob ul li+li::before{
    content: '';
    display: block;
    width: 1px;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.2);
    position: absolute;
    top: 41%;
    left: 12px;
}
.footer .container .footer-sec03.mob ul li a{
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    font-weight: 500;
}
.footer .container .footer-sec03.mob > p{
    font-size: 12px;
    letter-spacing: -0.21px;
}