/*공통*/
.blue_point { color:#1f63df; }
.pink_point { color: #e7068c;}
.scd8{font-family: 'scd8';}
.scd7{font-family: 'scd7';}
.scd5{font-family: 'scd5';}
.scd3{font-family: 'scd3';}


/* 공통타이틀 */
.main_title{width: 100%; float: left;}
.main_title .title{width: 100%; float: left; font-size: 48px; }
.main_title .sub{width: 100%; float: left; font-size: 24px;}
.main_title .eng{width: 100%; float: left; font-size: 20px; font-weight: 100; letter-spacing: 3px; text-transform: uppercase; color: #333;}

/* top */
.top{height: 125px; line-height: 125px; border-bottom: 1px solid #e2e9ed;}
.top .top_menu{width: 100%; float: left;}
.top .top_menu .top_logo{width: 100%; float: left; text-align: center;}
.top .top_menu .top_txt{width: 30%; float: left; font-size: 20px; position: absolute; top: 2px; left: 628px; text-align: left; z-index: -1;}
.top .top_menu .top_txt > span { float:left; width:100%; }
.top .top_menu .top_txt > a { width:100%; float:left;  }
.top .top_menu .top_txt .tt { font-weight: 600; letter-spacing: 1px; }
.top .top_menu .top_txt .color{color: #16497a; letter-spacing: 1px; }
.top .top_menu .top_txt .sub_txt { font-weight: 400; font-size:13px; color:#777; letter-spacing: 2.5px; margin-top: 2px; position:absolute; left:0px; top:23px; }

/*header*/
.header{background-color:#fff; height:80px; line-height:80px; box-shadow: 0px 2px 9px 0 rgba(0, 0, 0, 0.07); z-index: 9;}
.header .main_menu{width: 100%; float: left; text-align: center; font-size: 18px; font-weight: 500;}
.header .main_menu ul{width: 100%; float: left;}
.header .main_menu ul li{float: left;}
/*메뉴 7개일 때*/
/* .header .main_menu ul li:not(:first-child){padding-left: 51px;} */
/*메뉴 6개일 때-아파트담보대출 메뉴가 없을 때*/
.header .main_menu ul li:not(:first-child){padding-left: 93px;}
.header .main_menu ul li a:hover{color: #1f63df; transition: all 0.3s ease-in-out;}
.header .main_menu .submenu .s_menu{opacity: 0; width: 100%; float: left; padding: 10px 0; box-shadow: 0px 2px 13px 0 rgba(0, 0, 0, 0.07); position: absolute; top: 80px; left: 27px; background: #fff; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; border-top: 1px solid #eee; color: #666; font-size: 16px; padding: 10px 0; z-index: 999;}
.header .main_menu .submenu .s_menu > div{width: 100%; float: left;}
.header .main_menu .submenu:hover .s_menu{opacity: 1; transition: all 0.3s ease-in-out;}

/* 플로팅메뉴 */
.floating_wrap{width: 60px; float: left; position: fixed; z-index: 99; top: 670px; right: 70px; }
.floating_wrap > ul{width: 100%; float: left;}
.floating_wrap > ul > li{width: 60px; float: left; height: 60px; border-radius: 60px; text-align: center; box-shadow: 1px 1px 5px rgba(0,0,0,0.2); cursor: pointer;}
.floating_wrap > ul > li a{width: 100%; float: left;}
.floating_wrap > ul > li.tel{background: #00115a; line-height: 69px;}
.floating_wrap > ul > li.tel i{font-size: 28px;}
.floating_wrap > ul > li.top2{background: #5a5a5a; margin-top: 12px; line-height: 63px;}
.floating_wrap > ul > li.top2 i{font-size: 24px;}
.floating_wrap > ul > li i{color: #fff;}


/* 메인비주얼 */
.main_wrap > div{width: 100% !important;}
.main_wrap .list_box{width: 100%; float: left; height: 620px; border-bottom-left-radius: 350px;}
.main_wrap .list_box.main_01{background: url(/images/main_bg01.jpg) no-repeat; background-position: center; background-size: cover;}
.main_wrap .list_box.main_02{background: url(/images/main_bg02.jpg) no-repeat; background-position: center; background-size: cover;}
.main_wrap .list_box.main_03{background: url(/images/main_bg03.jpg) no-repeat; background-position: center; background-size: cover;}
.main_wrap .list_box.main_04{background: url(/images/main_bg04.jpg) no-repeat; background-position: center; background-size: cover;}
.main_wrap .main_title{font-size: 55px; top: 25%; width: 1200px; margin: 0 auto; height: 100%; float: none;}
.main_wrap .main_title > div{width: 100%; float: left;}
.main_wrap .main_title .title{margin-top: 10px; font-size: 62px;}
.main_wrap .main_title .contents{font-size: 21px; color: #333; margin-top: 25px;}
.main_wrap .main_title .bd { font-weight:600; }
.main_wrap .main_title .btn{width: 200px; height: 50px; line-height: 50px; color: #fff; font-weight: 500; font-size: 18px; background: #1f63df; border-radius: 100px; text-align: center; cursor: pointer; margin-top: 70px;}
.main_wrap .main_title .btn:hover{background: #00115a; transition: all 0.3s ease-in-out}
.main_wrap .main_title .bottom_txt{font-size: 16px; opacity: 0.3; text-align: right; margin-top: 80px;}
.main_wrap .slick-arrow { position: absolute; z-index: 10; top: 50%; transform: translateY(-50%); font-size: 45px; color: #fff; font-weight: 900; cursor: pointer; background: none; }
.main_wrap .slick-arrow:hover{ color: #1f63df; transition: all 0.3s ease-in-out; opacity:0.8; }
.main_wrap .slick-arrow.slick-prev { left: 12%; }
.main_wrap .slick-arrow.slick-next { right: 12%; }


/* 상품소개 */
.product_wrap{margin-top: 120px; overflow: hidden;}
.product_wrap .main_title .title{width: 80%; margin-top: 15px;}
.product_wrap .slide_btn{width: 100%; float: left; position: absolute; top: 60%; z-index: 999; cursor: pointer;}
/* .product_wrap .slide_btn > div{width: 72px; float: left; height: 72px; border-radius: 100px; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.3);}
.product_wrap .slide_btn > div:hover{opacity: 0.6; transition: all 0.3s ease-in-out;}
.product_wrap .slide_btn > div i{color: #424242; font-size: 30px; top: 50%; left: 50%; transform: translate(-50%, -50%);} */

/* .product_wrap .slide_btn > div{width: 72px; float: left; height: 72px; border-radius: 100px; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.3);}
.product_wrap .slide_btn > div:hover{opacity: 0.6; transition: all 0.3s ease-in-out;}
.product_wrap .slide_btn > div i{color: #424242; font-size: 30px; top: 50%; left: 50%; transform: translate(-50%, -50%);} */

/* .product_wrap .silde_box {width: 100%; float: left; position: absolute; top: 60%; z-index: 999; cursor: pointer;} */
.product_wrap .silde_box > .slick-arrow { width: 72px; float: left; height: 72px; border-radius: 100px; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.3); z-index:10; position: absolute; top: 50%; transform: translate(0%, -50%); }
.product_wrap .silde_box > .slick-arrow:hover{ opacity: 0.6; transition: all 0.3s ease-in-out; }
.product_wrap .silde_box > .slick-arrow i{ position: absolute; color: #424242; font-size: 30px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.product_wrap .silde_box > .slick-arrow.slick-prev { left: -38px; }
.product_wrap .silde_box > .slick-arrow.slick-next { left: 1160px; }


.product_wrap .slide_btn .left_btn{left: -30px;}
.product_wrap .slide_btn .right_btn{right: -30px; float: right;}

.product_wrap .slide_wrap{float: left; margin-top: 70px; width: 100%;} /* width: 1600px; */
.product_wrap .slide_wrap .silde_box{width: 100%; float: left;}
.product_wrap .slide_wrap .silde_box > a{width: 100%; float: left;}
.product_wrap .list_wrap{width: 380px!important; margin-right:0px!important; float: left; padding: 50px 45px; border-radius: 10px 70px 10px 10px; border: 1px solid #e0e0e0; background: #fff; overflow: hidden; text-align: left;}
.product_wrap .list_wrap:not(:first-child){margin-left: 30px;}
.product_wrap .list_wrap div{width: 100%; float: left;}
.product_wrap .list_box .title{font-size: 30px;}
.product_wrap .list_box .keyword01{margin-top: 20px;}
.product_wrap .list_box .keyword01 span{width: 70px; float: left; height: 30px; line-height: 27px; border-radius: 100px; font-size: 16px; font-weight: 500; text-align: center; background: #fff;}
.product_wrap .list_box .keyword01 .recommend{border: 1px solid #ff6f20; color: #ff6f20;}
.product_wrap .list_box .keyword01 .credit{margin-left: 4px; border: 1px solid #1f31df; color: #1f31df;}
.product_wrap .list_box .list{font-size: 18px; color: #fff; font-weight: 500; margin-top: 25px; color: #222;}
.product_wrap .list_box .list > div { margin-top:6px; }
.product_wrap .list_box .list span{font-size: 23px; color: #0b56df; font-weight:600; }
.product_wrap .list_box .list i{font-size: 16px; margin-right: 10px;}
.product_wrap .list_box .icon_box { text-align: right; margin-top: 30px; height: 105px; }
.product_wrap .list_box .icon_box img{ top: 50%; transform: translateY(-50%); float:right; }
.product_wrap .list_box .keyword02{font-size: 20px; color: #b3b3b3; margin-top: 10px;}
.product_wrap .list_box .smtt { font-size: 20px; color:#555; }
.product_wrap .list_wrap .icon_bg{width: 750px; height: 750px; border-radius: 750px; position: absolute; top: 220px; background: rgba(0,0,0,0.03);}
.product_wrap .main_title .more_btn{width: 190px; float: right; height: 50px; line-height: 50px; margin-top: 20px; border-radius: 15px; background: #000; color: #fff; font-size: 18px; text-align: center; font-weight: 500;}
.product_wrap .main_title .more_btn i{margin-left: 25px;}
.product_wrap .main_title .more_btn a{width: 100%; float: left;}

/* 엑티브효과 */
.product_wrap .list_wrap.active{background: linear-gradient(#1f31df, #54c1ff);}
.product_wrap .list_wrap.active .title{color: #fff;}
.product_wrap .list_wrap.active .list{color: #fff;}
.product_wrap .list_wrap.active .list span{color: #fff66d;}
.product_wrap .list_wrap.active .keyword02{color: #f0f0f0;}
.product_wrap .list_wrap.active .icon_bg{background: rgba(255,255,255,0.1);}
.product_wrap .list_wrap.active .smtt { color:#fff; }

/* 전화문의 */
.inquiry_wrap{background: #ededed; padding: 50px 0; margin-top: 150px;}
.inquiry_wrap > div > div{display: flex; justify-content: space-between; align-items: center; float: none;}
.inquiry_wrap .img_box{width: 20%;}
.inquiry_wrap .main_title{width: 55%;}
.inquiry_wrap .main_title .sub{font-size: 22px;}
.inquiry_wrap .main_title .sub span{font-weight: 500;}
.inquiry_wrap .main_title .title{font-size: 38px; margin-top: 8px;}
.inquiry_wrap .main_title > div:last-child{width: 100%; float: left; font-size: 18px; color: #333; margin-top: 20px;}
.inquiry_wrap .main_title > div:last-child span{color: #666;}
.inquiry_wrap .tel_btn{width: 25%; float: left; height: 60px; border-radius: 100px; display: flex; align-items: center; justify-content: center; gap: 12px; background: #0b56df;}
.inquiry_wrap .tel_btn .tel_icon{width: 35px; float: left; height: 34px; line-height: 37px; text-align: center; border-radius: 50px; background: #fff;}
.inquiry_wrap .tel_btn .tel_icon i{font-size: 19px;}
.inquiry_wrap .tel_btn .num{width: 70%; float: left; font-size: 24px; font-family: 'ggs'; color: #d5efff; margin-top:3px; }

/* 체크포인트 */
.point_wrap{background: #fff; padding: 120px 0; overflow: hidden;}
.point_wrap .slide_wrap{width: 100%; float: left;}
.point_wrap .slide_wrap .slide_box{width: 100%; float: left;}
.point_wrap .list_box {display: flex; justify-content: space-between;}
.point_wrap .list_box .left_box { width:600px; height:350px; overflow:hidden; float: left; }
.point_wrap .list_box .left_box > .content { width:600px; height:350px; float:left; } 
.point_wrap .list_box .left_box img{border-radius: 10px;}
.point_wrap .control_wrap .b_cirlce {width: 65px; float: right; height: 65px; border-radius: 65px; position: absolute; bottom: -32px; right: 570px; background: #0b56df;}
.point_wrap .list_box .right_box { width:540px; height:300px; overflow:hidden; }
.point_wrap .list_box .right_box > .content { width:100%; height: 100%; float:left; } 
.point_wrap .list_box .right_box .s_circle{width: 15px; float: left; height: 15px; border-radius: 15px; background: #7f7f7f; transform: translateX(290px);}
.point_wrap .list_box .right_box .title{font-size: 44px; margin-top: 25px;}
.point_wrap .list_box .right_box .sub{margin-top: 15px; font-weight: lighter;}
.point_wrap .list_box .right_box .sub span{font-weight: 500;}
.point_wrap .control_wrap{width: 100%; float: left; position: absolute; bottom: 15px; z-index: 999;}
.point_wrap .control_wrap .control_box {width: 100%; float: left; display: flex; align-items: center; justify-content: flex-end; gap: 10px;} 

.point_wrap .control_wrap .slick-arrow {width: 100%; float: left; display: flex; align-items: center; justify-content: flex-end; gap: 10px;} 


.point_wrap .control_wrap .swiper_btn {cursor: pointer;}
.point_wrap .control_wrap .swiper_btn i {font-size: 20px; color: #b8b8b8;}
.point_wrap .control_wrap .swiper_btn i:hover {color: #0b56df; transition: all 0.3s ease-in-out;}

.point_wrap .control_wrap .num {color: #999; font-size: 16px;}
.point_wrap .control_wrap .num.active {color: #000;}

/* .point_wrap .control_wrap .control_bar {width: 90px; float: left; background: #c1c1c1; height: 2px;}
.point_wrap .control_wrap .control_bar span {width: 30px; float: left; height: 2px; background: #0b56df;} */

/* 진행 바 스타일 */
.point_wrap .control_wrap .control_bar {
    width: 120px;
    height: 2px;
    float: left;
    background-color: #c1c1c1;
    overflow: hidden;
}

.point_wrap .control_wrap .control_bar span {
    display: block;
    height: 100%;
    background-color: #0b56df;
    transform: scaleX(var(--progress-scale)); /* CSS 변수를 사용 */
    transform-origin: left;
    transition: transform 300ms linear;
}

.point_wrap .bg_circle{width: 600px; float: left; height: 600px; border-radius: 600px; background: rgba(11,86,233,0.2); position: absolute; top: -450px; left: -450px;}

.point_wrap .list_box .left_box .content{ opacity: 1; z-index: 1; transition: top 0.6s;}
.point_wrap .list_box .left_box .content{ opacity: 1; z-index: 1; transition: top 0.6s;}
.point_wrap .list_box .right_box .content{ position: absolute; top : 0; left : 0; opacity: 0; transition: all 0.6s;}

.point_wrap .list_box .left_box .content1 { position: absolute; top : 0; left : 0; z-index:1;}
.point_wrap .list_box .left_box .content2 { position: absolute; top : 350px; left : 0; z-index:2;}

/* 상담신청 */
.form_wrap{padding-top: 120px; height: 1250px; background: url(/images/form_bg.jpg) no-repeat; background-position: center; background-size: cover; overflow: hidden;}
.form_wrap .box{width: 100%; float: left;}
.form_wrap .box .main_title{color: #fff;}
.form_wrap .box .main_title .sub{font-size: 25px;}
.form_wrap .box .main_title .title{font-size: 58px; margin-top: 13px;}
.form_wrap .box .main_title .title span{color: #ffe65c;}
.form_wrap .box .form_box ::placeholder{color: #888;}
.form_wrap .box .form_box{width: 100%; float: left; background: #fff; border-radius: 20px; padding: 40px; margin-top: 55px;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; font-size: 18px;}
.form_wrap .form_box fieldset{border: none;}
.form_wrap .form_box fieldset label{width: 100%; float: left; font-weight: 500;}
.form_wrap .form_box fieldset input, .form_wrap .form_box fieldset select{margin-top: 10px; width: 100%; float: left; border-radius: 5px; border: 2px solid #e7e7e7; height: 62px; padding: 0 15px; font-size: 18px;}
/* 클릭 이벤트 */
/* .form_wrap .form_box:focus-within input[type="text"]{border: 1px solid #0d58e0; transition: all 0.3s ease-in-out;} */
/* .form_wrap .form_box:focus-within label{color: #0d58e0; transition: all 0.3s ease-in-out;} */
.form_wrap .form_box .num_fieldset .input_ctr, .form_wrap .form_box .check_fieldset .input_ctr{width: 100%; float: left; margin-top: 10px;}
/* .form_wrap .form_box .num_fieldset input, .form_wrap .form_box .check_fieldset input{width: 63%; margin-top: 0;} */
.form_wrap .form_box .num_fieldset input, .form_wrap .form_box .check_fieldset input{width: 100%; margin-top: 0;}
.form_wrap .form_box .num_fieldset .submit_btn, .form_wrap .form_box .check_fieldset .submit_btn{width: 35%; height: 62px; line-height: 62px; background: #0d58e0; color: #fff; font-size: 18px; font-weight: 500; border-radius: 5px; margin-left: 2%;}
.form_wrap .form_box .check_fieldset .submit_btn{background: #666;}
.form_wrap .form_box .radio_btn{width: 100%; float: left;}
.form_wrap .form_box .radio_btn label{margin-top: 10px; text-align: center; float: left; border-radius: 5px;border: 2px solid #e7e7e7; height: 62px; font-size: 18px; line-height: 58px; color: #888; font-weight: 400;}
.form_wrap .form_box .radio_btn label:nth-child(n+3){margin-left: 2%;}
.form_wrap .form_box #insurance_fieldset .radio_btn label, .form_wrap .form_box #overdue_fieldset .radio_btn label{width: 49%;}
.form_wrap .form_box #income_fieldset .radio_btn label{width: 23.5%;}
.form_wrap .form_box select{-webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(/images/form_down_scroll.png) no-repeat right 15px center;}
.form_wrap .form_box .radio_input:checked + .radio_label{font-weight: 600; color: #1254cd; border: 1px solid #0d58e0;}

.form_wrap .check_wrap{width: 100%; float: left; border: none;}
.form_wrap .check_wrap .checkbox_ctr{padding-left: 40px; cursor: pointer; font-size: 19px;}
.form_wrap .check_wrap .checkbox_ctr input{position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.form_wrap .check_wrap .checkbox_ctr .checkmark{position: absolute; top: 0; left: 0; height: 27px; width: 27px; background: none; border: 1px solid #999; border-radius: 4px; transition: background-color 0.3s; transform-origin: left; }
.form_wrap .checkbox_ctr input:checked ~ .checkmark {background: #ff9600; border: 1px solid #ff9600; }
.form_wrap .checkbox_ctr input:checked ~ .checkmark:after{animation: checkAnim 0.2s forwards;}
.form_wrap .checkbox_ctr input:checked ~ .checkmark:after{display: block;}
.form_wrap .checkbox_ctr .checkmark::after{content: ""; position: absolute; display: none; left: 9px; top: 4px; width: 6px; height: 11px; border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg);}
.form_wrap .agree_checkbox{font-size: 20px; padding-left: 40px;}
.form_wrap .form_box .p_ver{display: inline-block!important;}
.form_wrap .img_wrap{width: 100%; float: left; text-align: center;}
.form_wrap .img_wrap .text_box{width: 100%; float: left; margin-top: 20px; color: #999; font-size: 18px; line-height: 27px;}
.form_wrap .img_wrap .text_box span{color: #c85858;}
.form_wrap .img_box{width: 100%; float: left; position: absolute; top: -10px; right: -168px;}
/*상담폼 버튼위치-인증번호 입력할 때*/
.form_wrap .main_btn{width: 320px; float: left; height: 70px; line-height: 70px; left: 72%; top:-12px; color: #fff; font-size: 25px; font-weight: 500; text-align: center; border-radius: 500px; background: #00115a;}
/*상담폼 버튼위치-인증번호 입력 안할 때*/
.form_wrap .main_btn2{width: 320px; float: left; height: 70px; line-height: 70px; left: 0%; transform: translateX(-55%); top:-12px; color: #fff; font-size: 25px; font-weight: 500; text-align: center; border-radius: 500px; background: #00115a;}
.form_wrap .check_wrap .terms_view { float:left; font-size: 16px; line-height:26px; top:-28px; left:228px; cursor:pointer; }

.form_wrap #amount_fieldset::after { content: '만원'; position: absolute; height: 62px; right: 5%; bottom: 0px; display: inline-flex; align-items: center; font-size:18px; } 

/*상담폼 약관보기 팝업*/
.company03_popup{display: none; width: 100%; float: left; height:100%; padding: 6% 30% 0 30%; background-color: rgba(0,0,0,0.8); position:fixed; top: 0; left: 0; z-index: 999;}
.company03_popup .popupwrap{width: 100%; float: left; text-align: left;}
.company03_popup .popupwrap .title_box{width: 100%; float: left; height: 70px; line-height: 70px; background: #1f63df; padding: 0 5%; color: #fff; border-radius: 7px 7px 0 0;}
.company03_popup .popupwrap .title{width: 95%; float: left; font-size: 20px; font-weight: 600; }    
.company03_popup .popupwrap .title span{font-size: 16px; color: #666; margin-left: 10px; font-weight: 400;}
.company03_popup .popupwrap .closebtn{width: 5%; float: left; font-size: 24px; text-align: right; cursor: pointer; font-weight: 500; }
.company03_popup .popupwrap .contents{width: 100%; float: left; height: 550px; padding: 4% 3.5%; background: #fff; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
.company03_popup .popupwrap .scroll{width: 100%; float: left; height: 460px; padding: 0 2%; overflow-y: scroll; overflow-x: hidden;}
.company03_popup .popupwrap .contents p{width: 100%; float: left; font-size: 15px; color: #555; line-height: 24px;}
.company03_popup .popupwrap .contents p span{font-weight: 500; color: #333;}
.company03_popup .popupwrap .scroll::-webkit-scrollbar{width: 4px;}
.company03_popup .popupwrap .scroll::-webkit-scrollbar-thumb{background: #ededed; border-radius: 100px;}
.company03_popup .popupwrap .scroll::-webkit-scrollbar-track{border-radius: 100px; background-color: rgba(0,0,0,0);}
.company03_popup .popupwrap .contents .pt_tt { font-weight:600; margin-top:35px; color:#222; }
.company03_popup .popupwrap .contents .pt_tt_non { margin-top:0px;  }
.company03_popup .popupwrap .contents .txt { font-weight:600; color:#222; }
.company03_popup .popupwrap .contents .tt > span { width:100%; float:left; margin-top:2%; }
.company03_popup .popupwrap .contents .tt > span:first-child { margin-top:0%; }
.company03_popup .popupwrap .contents .sub_tt { color:#444; font-weight:400; margin-top:10px; }
.company03_popup .popupwrap .contents .sub_txt { font-weight:400; margin-top:15px; }

/* 추천상품 */
.product02_wrap{padding: 120px 0; background: url(/images/product02_bg.jpg) no-repeat; background-position: center; background-size: cover;}
.product02_wrap .main_title{text-align: center;}
.product02_wrap .list_wrap{width: 100%; float: left; margin-top: 80px;}
.product02_wrap .list_wrap ul{width: 100%; float: left; }
.product02_wrap .list_wrap ul:not(:first-child){margin-top: 20px;}
.product02_wrap .list_wrap li { width: 32%; float: left; border-radius: 100px; height: 90px; line-height: 82px; background: #fff; border: 4px solid #f0f0f0; position:relative; transform-style: preserve-3d; transition: all 0.7s; }
.product02_wrap .list_wrap li:nth-child(2) { margin: 0 24px; }
.product02_wrap .list_wrap li > div { position: absolute; width: 100%;  height: 100%; backface-visibility: hidden; padding: 0 40px; }
.product02_wrap .list_wrap li > .front { z-index:1; transform: rotateX(0deg); }
.product02_wrap .list_wrap li > .back { z-index:2; transform: rotateX(180deg); }

.product02_wrap .list_wrap a{width: 100%; float: left;}
.product02_wrap .list_wrap .text{width: 80%; float: left; color: #222; font-size: 23px; font-weight: 500;}
.product02_wrap .list_wrap .text span{font-size: 20px;}
.product02_wrap .list_wrap .icon{width: 20%; float: right; z-index: 2;}
.product02_wrap .list_wrap .circle{width: 36px; height: 36px; float: left; border-radius: 36px; background: #ebf7ff; z-index: 1; position: absolute; top: 20%; right: 0px;}
/* 엑티브효과 */
.product02_wrap .list_wrap li.active{ background: linear-gradient(#1f31df, #54c1ff); border: 4px solid #e2f4ff; animation: opacity 0.3s ease-in-out; transform: rotateX(180deg); }
.product02_wrap .list_wrap li.active .text{color: #fff;}
.product02_wrap .list_wrap li.active .circle{background: rgba(255,255,255,0.1);}
.product02_wrap .list_wrap li.active .icon > img { filter: invert(97%) sepia(26%) saturate(5689%) hue-rotate(174deg) brightness(102%) contrast(102%); }

/* 푸터 */
.footer_top{background: #35343b; border-bottom: 1px solid #4c4c4c;}
.footer_top .info_wrap{width: 100%; float: left; padding: 50px 0; }
.footer_top .info_wrap .menu_wrap{width: 100%; float: left; display: flex; justify-content: space-between; align-items: center;} 
.footer_top .info_wrap .menu_wrap .logo_box a{width: 100%; float: left; opacity:0.8;}
.footer_top .info_wrap .menu_wrap .menu_box{display: flex; gap: 50px;}
.footer_top .info_wrap .menu_wrap .menu_box li{font-size: 15px; color: #fff;}
.footer_top .info_wrap .menu_wrap .menu_box li a{width: 100%; float: left;}
.footer_top .info_wrap .menu_wrap .menu_box li:hover{color: #bcd4ff;}
.footer_top .info_wrap .info_box{width: 100%; float: left; color: #fff; font-size: 14px; line-height: 27px; }
.footer_top .info_wrap .info_box .point_color { color: #bcd4ff; }
.footer_bottom{background: #3b3a42; padding: 50px 0;}
.footer_bottom .info_wrap{width: 100%; float: left; font-size: 15px; line-height: 28px; color: #fff;}
.footer_top .un_line { width:100%; float:left; height:1px; background-color:#474747; margin: 30px 0; } 


/* 서브페이지 공통*/
.sub_visual { height:560px; }
.sub_visual .home_menu{width: 100%; float: left; margin-top: 40px;}
.sub_visual .home_menu > ul{width: 100%; float: left; display: flex; gap: 30px;}
.sub_visual .home_menu > ul > li{float: left; color: #737373;}
.sub_visual .home_menu > ul > li:after{content: ''; width: 1px; height: 14px; background: #737373; position: absolute; top: 3px; left: -14px;}
.sub_visual .home_menu > ul > li.home::after{display: none;}
.sub_visual .home_menu .home i{font-size: 16px; color: #333;}
.sub_visual .home_menu .current{font-weight: 500; }

.sub_v_tit{width: 100%; float: left; text-align: center; margin-top: 50px;}
.sub_v_tit .title{font-size: 54px;}
.sub_v_tit .sub_txt{font-size: 22px; margin-top: 20px;}
.sub_v_tit button{width: 170px; height: 45px; margin: 50px auto auto auto; font-weight: 600; background: #fff; font-size: 16px; text-align: center; border-radius: 100px; border: 1px solid #0b56df; box-shadow: 0 2px 4px rgba(0,0,0,0.2);}

.contents_wrap{width: 100%; float: left; transform: translateY(100px);}
.contents_wrap .point_info{width: 100%; float: left; padding: 50px 0; background: #fff; border-radius: 20px; box-shadow: 0 4px 11px rgba(0, 0, 0, 0.1);}
/* .contents_wrap .point_info > ul{width: 100%; float: left; display: flex; justify-content: space-evenly;}
.contents_wrap .point_info > ul > li{text-align: center;} */
.contents_wrap .point_info > ul{width: 100%; float: left; }
.contents_wrap .point_info > ul > li{text-align: center; width:33%; float:left; }
.contents_wrap .point_info .line{width: 2px; height: 100px; background: #dfe0e2;}
.contents_wrap .point_info .title{font-size: 18px; font-weight: 500; color: #666;}
.contents_wrap .point_info .con{font-size: 26px; font-weight: 600; color: #222; margin-top: 10px;}
.contents_wrap .point_info .con .highlight{font-size: 40px;}

.tab_wrap{margin-top: 200px; margin-bottom: 100px;}
.tab_wrap .tab_box{width: 100%; float: left;}
.tab_wrap .tab_box > ul{width: 100%; float: left; border-bottom: 1px solid #eee;}
.tab_wrap .tab_box > ul > li{width: 33.3%; float: left; padding-bottom: 17px; color: #666; text-align: center; font-size: 22px; font-weight: 500; cursor: pointer;}
.tab_wrap .tab_box > ul > li.active{font-weight: 600; color: #0d58e0; border-bottom: 3px solid #0d58e0;}
.tab_wrap .info_box{width: 100%; float: left; display: flex; flex-wrap: wrap;}
.tab_wrap .info_box > li{width: 50%; float: left; padding: 50px 40px;}
.tab_wrap .info_box > li{border-bottom: 1px dashed #eee;}
.tab_wrap .info_box > li.last{border-bottom: none;}
.tab_wrap .info_box > li .title{width: 100%; float: left; font-size: 20px; font-weight: 600;}
.tab_wrap .info_box > li .con{width: 100%; float: left; font-size: 18px; margin-top: 15px; }
.tab_wrap .info_box > li .list_01 li{width: 100%; float: left; line-height: 30px;}
.tab_wrap .info_box > li .list_02{margin-left: 15px; color: #666;}
.tab_wrap .info_box > li .list_02 li{width: 100%; float: left; line-height: 30px;}
.tab_wrap .info_box > li.width100{width: 100%;}
.tab_wrap .info_box > li .con .left{width: 3%; float: left;}
.tab_wrap .info_box > li .con .left.left02{margin-right: 5px;}
.tab_wrap .info_box > li .con .right{width: 95%; float: left;}
.tab_wrap .info_box .calculator{width: 200px; float: left; height: 50px; line-height: 50px; margin-top: 25px; color: #fff; background: #0d58e0; border-radius: 10px; font-size: 18px; font-weight: 500; padding: 0 30px; text-align: left;}
.tab_wrap .info_box .calculator i{color: #fff;}
.tab_wrap .info_box .calculator span{float: right;}
.tab_wrap .info_box .bottom_con{width: 100%; float: left; height: 70px; line-height: 70px; padding-left: 30px; font-size: 18px; background: #eee; border-radius: 10px; margin-top: 30px;}

.tab_wrap .info_box > li .con > table { width:100%; float:left; border-top:2px solid #707070; border-bottom:1px solid #acacac; text-align:center; margin-top:20px; }
.tab_wrap .info_box > li .con > table .c_box { background-color: #f8f8f8; font-weight:500; }
.tab_wrap .info_box > li .con > table td { border:1px solid #f3f3f3; border-collapse: collapse; height:65px; }
.tab_wrap .info_box > li .con > table td:not(:first-child) { border-right:0; }
.tab_wrap .info_box > li .con > table td:not(:last-child) { border-left:0; }

/* 커스텀 alert */
.custom_alert_wrap { width: 100%; height: 100vh; position: fixed; background: rgba(0,0,0,0.5); z-index: 9999999; }
.custom_alert_box { width: 100%; height: 100%; float: left; }
.custom_alert { width: 330px; height: 230px; border-radius: 15px; background: #fff; left: 50%; top: 50%; transform: translate(-50%, -50%); position: absolute; text-align: center;  }
.custom_alert .alert_top { width: 100%; height: 180px; float: left; }
.custom_alert .alert_top ul { top: 50%; transform: translateY(-50%); }
.custom_alert .alert_top .txt { margin-top: 15px; font-size: 14px; padding: 0 10px; }
.custom_alert .alert_bottom { width: 100%; float: left; line-height: 50px; border-top: 1px solid #DEDEDE; cursor: pointer; }