@charset "utf-8";

/* font */
#hbgGfn > *{font-family: "Pretendard", sans-serif;letter-spacing: -0.025em;}
#hbgGfn p{letter-spacing: -0.025em;}

/*header*/
#header{position:relative;z-index:999; }
#header .logo{width:158px; height:33px; background-image: url(../img/common/logo_w.png);background-repeat: no-repeat; position: fixed; left:20px;top:20px;transition: background-image 0.2s;}
#header .logo.on{background-image:url(../img/common/logo.png)}

/* footer */
.footer {background: #333; text-align: center;width:100%}
.footer * {letter-spacing: 0;}
.footer .inner {padding:0 80px;}
.footer .footer_top {position: relative; height: 40px;}
.footer .footer_top ul li {display: inline-block; vertical-align: middle;}
.footer .footer_top .sns {position: absolute; top:0px; left:0;}
.footer .footer_top .sns li + li {margin-left:10px}
.footer .footer_top .sns a {width:19px; height: 40px; background-size: 18px; background-repeat: no-repeat; background-position:center; display: block;}
.footer .footer_top .sns a.btn_facebook { background-image: url(../img/icon/facebook.png); width:10px; }
.footer .footer_top .sns a.btn_facebook + li {margin-left:0;}
.footer .footer_top .sns a.btn_insta { background-image: url(../img/icon/insta.png);}
.footer .footer_top .sns a.btn_youtube { background-image: url(../img/icon/youtube.png);}
.footer .footer_top .sns a.btn_blog { background-image: url(../img/icon/blog.png);}
.footer .footer_top .sns a.btn_twitter { background-image: url(../img/icon/twitter.png);}
.footer .footer_top .menu {margin: 0 auto;}
.footer .footer_top .menu li {margin-left:20px}
.footer .footer_top .menu li a { color:#fff; font-size: 13px;line-height: 40px; opacity: 0.8;}
.footer .footer_top .menu li a:hover {opacity: 1;}
.footer .footer_top .tel_box {position: absolute; top:0px; right:0}
.footer .footer_top .tel_box span {font-size:13px; color:#fff; opacity: 0.6; line-height: 40px; display: inline-block; vertical-align: middle;}
.footer .footer_top .tel_box a { position: relative; top: -1px; font-size:20px; font-weight: 700; color:#fff; line-height: 40px; display: inline-block; vertical-align: middle; margin-left: 10px;}
.footer .footer_bot {border-top:1px solid rgba(255,255,255,0.2); padding:8px 0}
.footer .footer_bot p {color:#fff; font-size: 11px; opacity: 0.8; letter-spacing: 0.5px;font-weight:100}
.footer .footer_bot p.copyright {opacity: 0.5; margin-top: 1px; }


/*content*/
/*floating*/
#hbgGfnFlt{position: fixed;bottom: 30px;right: 40px;z-index: 9999;}
#hbgGfnFlt > a{width: 200px;height: 70px;display: flex;align-items: center;justify-content: center;border-radius: 40px;border: 4px solid #ffffff;background: linear-gradient(to right, #6a45b1, #37059a);box-sizing: border-box;position: relative;box-shadow: 0 0 10px rgba(0,0,0,0.2)}
#hbgGfnFlt > a:after{content: '';position: absolute;right: -2px;bottom: -5px;background-image: url("../img/main/float_img.png");background-size: cover;background-repeat: no-repeat;width: 45px;height: 46px;display: inline-block;}
#hbgGfnFlt > a > span{color: #ffffff;font-size: 22px;line-height: 1;font-weight: 500;display: block;padding-right: 25px;}
#hbgGfnFlt.pos{position: absolute;bottom: 20px;}

/* 폭죽관련 css */
#hbgGfn .firecracker { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1000; pointer-events:none;}
/* 꽃가루 관련 css */
#hbgGfn canvas{z-index: 10; pointer-events: none; position: fixed; top: 0; transform: scale(1); left: 0;}

/*공통*/
#hbgGfn{position: relative;}
#hbgGfn .shwTab,
#hbgGfn .shwTab2,
#hbgGfn .shwMo,
#hbgGfn .imgMo,
#hbgGfn .imgTab{display: none;}
#hbgGfn .cntSze{width: calc(100% - 80px);max-width: 1240px;margin: 0 auto;}
#hbgGfn .btnWrp{display: flex;gap: 15px;justify-content: center;padding-top: 55px;}
#hbgGfn .btnWrp > a{border-radius: 35px;font-size: 22px;font-weight: 600;color: #ffffff;display: flex;align-items: center;justify-content: center;height: 70px;box-sizing: border-box;}
#hbgGfn .btnWrp .big{width: 275px;}
#hbgGfn .btnWrp .mid{width: 260px;}
#hbgGfn .btnWrp .sml{width: 200px;}
#hbgGfn .hbgGfnSec{padding: 120px 0;}
#hbgGfn .hbgGfnSec h2{text-align: center;}
#hbgGfn .hbgGfnSec h2 > span{font-family: "GmarketSans", Sans-serif;color: #330099;font-size: 74px;line-height: 1;position: relative;font-weight: 500;letter-spacing: -0.05em;}
#hbgGfn .hbgGfnSec h2 > span:before,
#hbgGfn .hbgGfnSec h2 > span:after{content: '';width: 138px;height: 17px;background-image: url("../img/main/title_deco.png"); background-repeat: no-repeat;background-position: center; background-size: contain;display: inline-block;margin-bottom: 15px;}
#hbgGfn .hbgGfnSec h2 > span:before{margin-right: 45px;}
#hbgGfn .hbgGfnSec h2 > span:after{margin-left: 45px;transform: rotate(-180deg);}
#hbgGfn .hbgGfnSec .ttlSub{text-align: center;padding-top: 50px;}
#hbgGfn .hbgGfnSec .ttlSub > p{font-size: 52px;color: #333333;line-height: normal;letter-spacing: -0.045em;}
#hbgGfn .hbgGfnSec .ttlSub > p > b{font-weight: 700;}
#hbgGfn .hbgGfnSec .ttlSub > span{display: block;font-size: 24px;line-height: 44px;color: #666666;padding-top: 10px;}
#hbgGfn .hbgGfnSec .bgNis{font-size: 24px;line-height: 44px;font-weight: 500;color: #ffffff;display: flex;align-items: center;justify-content: center;background-image: url("../img/main/bg_noise.png");background-repeat: repeat;background-size: 60px 60px;background-blend-mode: soft-light;letter-spacing: -0.025em;}
#hbgGfn .hbgGfnSec .bgNis.ppl{background-color: #a108af;}
#hbgGfn .hbgGfnSec .bgNis.blu{background-color: #1353b3;}
#hbgGfn .hbgGfnSec .bgNis.grn{background-color: #0c8875;}
#hbgGfn .txtBtm{font-size: 16px;font-weight: 400;color: #666666;text-align: center;line-height: 22px;padding-top: 25px;}

#hbgGfn .fadeUp,
#hbgGfn .fadeUp2{opacity: 0;}
#hbgGfn .fadeUp.active,
#hbgGfn .fadeUp2.active{animation: fadeUp 0.7s ease-in-out forwards;}
@keyframes fadeUp{
  0% {opacity:0;transform:translateY(50px);  }
  100% {opacity:1;transform:translateY(0);  }
}
#hbgGfn .fadeUp.active.fadeUp_delay1,
#hbgGfn .hbgGfnHro .fadeUp.active.fadeUp_delay1{animation-delay: 0.2s;}
#hbgGfn .fadeUp.active.fadeUp_delay2,
#hbgGfn .hbgGfnHro .fadeUp.active.fadeUp_delay2{animation-delay: 0.4s;}

/*hero*/
#hbgGfn .hbgGfnHro{background-image: url("../img/main/hero_bg.jpg");background-repeat: no-repeat;background-size: cover;background-position: center;padding: 225px 0 250px}
#hbgGfn .hbgGfnHro .cntSze{display: flex;flex-direction: column;align-items: center;}
#hbgGfn .hbgGfnHro h1{max-width: 976px;}
#hbgGfn .hbgGfnHro h1 > img{width: 100%;vertical-align: middle;}
#hbgGfn .hbgGfnHro .ttlSub{color: #ffffff;text-align: center;padding: 25px 0 65px;}
#hbgGfn .hbgGfnHro .ttlSub > p{font-size: 48px;line-height: 1;font-weight: 700;padding-bottom: 15px;}
#hbgGfn .hbgGfnHro .ttlSub > span{font-size: 26px;line-height: 35px;font-weight: 500;}
#hbgGfn .hbgGfnHro .btnWrp{padding-top: 0;}
#hbgGfn .hbgGfnHro .btnWrp .sml{border: 2px solid #ffffff;background-color: transparent;}
#hbgGfn .hbgGfnHro .btnWrp .mid{background-color: #b09053;}

/*1*/
#hbgGfn .hbgGfnSec1{background-image: url("../img/main/section1_bg.jpg");background-size: cover;background-position: center;background-repeat: no-repeat;}
#hbgGfn .hbgGfnSec1 .howLst{display: flex;gap: 40px;margin-top: 50px;}
#hbgGfn .hbgGfnSec1 .howItm{width: 50%;background-color: #ffffff;border-radius: 15px;box-shadow: 0 6px 25px rgba(0,0,0,0.08);overflow: hidden;display: flex;flex-direction: column;align-items: center;padding-top: 40px;}
#hbgGfn .hbgGfnSec1 .howItm > p{color: #ffffff;display: flex;align-items: center;justify-content: center; border-radius: 19px;width: 220px;height: 38px;}
#hbgGfn .hbgGfnSec1 .howItm > p.ppl{background-color: #a108af;}
#hbgGfn .hbgGfnSec1 .howItm > p.blu{background-color: #1353b3;}
#hbgGfn .hbgGfnSec1 .howItm > p > span{font-size: 26px;line-height: 44px;font-weight: 500;}
#hbgGfn .hbgGfnSec1 .howItm > ul{display: flex;padding: 45px 0;}
#hbgGfn .hbgGfnSec1 .howItm > ul > li .imgBox{background-color: #f2f2f2;border-radius: 50%;display: flex;align-items: center;justify-content: center;width: 110px;height: 110px;}
#hbgGfn .hbgGfnSec1 .howItm > ul > li .imgBox > img{width: 65px;height: 65px;}
#hbgGfn .hbgGfnSec1 .howItm > ul > li > span{font-size: 18px;font-weight: 500;line-height: 22px;color: #000;display: block;padding-top: 10px;text-align: center;}
#hbgGfn .hbgGfnSec1 .howItm > ul > li.arw{position: relative;margin: 0 10px;width: 10px;}
#hbgGfn .hbgGfnSec1 .howItm > ul > li > i{display: inline-block;height: 14px;background: url("../img/main/icon_list_arrow.png") no-repeat center;background-size: contain;position: absolute;top: 30%;width: 100%;}
#hbgGfn .hbgGfnSec1 .howItm > a{width: 100%;height: 60px;}

/*2*/
#hbgGfn .hbgGfnSec2{background-color: #f7f7f7;padding: 140px 0 120px;}
#hbgGfn .hbgGfnSec2 ul{display: flex;gap: 35px;margin-top: 50px;}
#hbgGfn .hbgGfnSec2 ul > li{width: 33.333%}
#hbgGfn .hbgGfnSec2 ul > li .bgNis{height: 55px;border-radius: 10px;position: relative;margin-bottom: 15px;}
#hbgGfn .hbgGfnSec2 ul > li .bgNis:before{content: '';width: 15px;height: 15px;display: inline-block;background-color: inherit;transform: rotate(45deg) translateX(-50%);position: absolute;left: 50%;bottom: -10px;background-image: url("../img/main/bg_noise.png");background-repeat: repeat;background-size: 60px 60px;background-blend-mode: soft-light;}
#hbgGfn .hbgGfnSec2 ul > li > div:last-child{border-radius: 15px;box-shadow: 0 6px 25px rgba(0,0,0,0.08);overflow: hidden;}
#hbgGfn .hbgGfnSec2 ul > li .imgBox{width: 100%;height: 0;padding-bottom: 64.102%;position: relative;}
#hbgGfn .hbgGfnSec2 ul > li .imgBox > img{width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
#hbgGfn .hbgGfnSec2 ul > li .txtBox{height: 250px;text-align: center;}
#hbgGfn .hbgGfnSec2 ul > li .txtBox > strong{font-size: 28px;line-height: 44px;font-weight: 600;color: #000000;display: block;padding: 25px 0 15px;}
#hbgGfn .hbgGfnSec2 ul > li .txtBox > p{font-size: 18px;line-height: 22px;color: #666666;font-weight: 400;}
#hbgGfn .hbgGfnSec2 ul > li .txtBox > p > b{display: block;font-size: 20px;line-height: 22px;font-weight: 700;padding: 20px 0 10px;}
#hbgGfn .hbgGfnSec2 ul > li .txtBox > p > b.ppl{color: #b359c3;}
#hbgGfn .hbgGfnSec2 ul > li .txtBox > p > b.blu{color: #598dc3;}
#hbgGfn .hbgGfnSec2 ul > li .txtBox > p > span{display: block;padding-top: 20px;}
#hbgGfn .hbgGfnSec2 ul > li .txtBox > p em{color: #0e8c79;font-weight: 700;font-style: normal;}
#hbgGfn .hbgGfnSec2 .btnWrp .big{color: #222222;border: 2px solid #222222;}
#hbgGfn .hbgGfnSec2 .btnWrp .mid{background: linear-gradient(to right, #4f4f4f, #222222);}

/*3*/
#hbgGfn .hbgGfnSec3{background-image: url("../img/main/section3_bg.jpg");background-size: cover;background-repeat: no-repeat;background-position: center;}
#hbgGfn .hbgGfnSec3 .ttl{color: #fff;font-size: 60px;font-weight: 500;line-height: 1;text-align: center;display: flex;justify-content: center;align-items: center;gap: 7px;}
#hbgGfn .hbgGfnSec3 .swpWrp{margin-top: 60px;position: relative;}
#hbgGfn .hbgGfnSec3 .swpWrp .swiper{overflow-x: hidden;padding-bottom: 90px}
#hbgGfn .hbgGfnSec3 .swpWrp .swiper .swiper-pagination-bullet-active{opacity: 1;width: 50px;border-radius: 8px;}
#hbgGfn .hbgGfnSec3 .swpWrp .swiper-pagination-bullet{background: #ffffff;opacity: 0.28;transition: all 0.3s;width: 15px;height: 15px;border-radius: 15px;}
#hbgGfn .hbgGfnSec3 .swpWrp .swiper-button-next, #hbgGfn .hbgGfnSec3 .swpWrp .swiper-button-prev{top: auto;bottom: 90px;background-image: url("../img/main/icon_slide_arrow2.png");background-size: 9px 15px;width: 45px;height: 45px;background-repeat: no-repeat;background-position: center;}
#hbgGfn .hbgGfnSec3 .swpWrp .swiper-button-prev{left: auto;right: 30.6%;background-color: rgba(0,0,0,0.26);}
#hbgGfn .hbgGfnSec3 .swpWrp .swiper-button-next{right: auto;left: 69.4%;background-color: rgba(0,0,0,0.66);transform: rotate(180deg);}
.swiper-button-next:after, .swiper-button-prev:after{display: none;}
#hbgGfn .hbgGfnSec3 .cntBox{width: 100%;height: 0;padding-bottom: 40.323%;position: relative;border-radius: 15px;overflow: hidden;box-shadow: 0 6px 25px rgba(0,0,0,0.08);max-width: 1240px;}
#hbgGfn .hbgGfnSec3 .cntBox .imgBox{width: 100%;position: absolute;top: 0;left: 0;}
#hbgGfn .hbgGfnSec3 .cntBox .imgBox > img{width: 100%;vertical-align: middle;}
#hbgGfn .hbgGfnSec3 .ttlFilp{display: inline-flex;gap: 20px;}

/* 텍스트 롤링 */
#hbgGfn .hbgGfnSec3 .flip{width: 160px; height: 70px;overflow: hidden;display: inline-block;}
#hbgGfn .hbgGfnSec3 .flip > div:first-child{animation: roll 15s ease infinite;}
#hbgGfn .hbgGfnSec3 .flip > div > div{height: 70px;display: flex;justify-content: center;align-items: center;line-height: 70px;font-weight: 800;color: #ffc960;}

@keyframes roll {
  0% {margin-top:-420px;}
  9% {margin-top: -350px;} /*1*/
  16% {margin-top: -350px;}
  24% {margin-top: -280px;} /*2*/
  32% {margin-top:-280px;}
  40% {margin-top: -210px;} /*3*/
  48% {margin-top: -210px;}
  56% {margin-top:-140px;} /*4*/
  64% {margin-top:-140px;}
  72% {margin-top: -70px;} /*5*/
  80% {margin-top: -70px;}
  88% {margin-top:0px;} /*6*/
  99.9999% {margin-top:0px;}
  100%{margin-top:-420px;}
}

/*4*/
#hbgGfn .hbgGfnSec4 .cntLst{display: flex;gap: 40px;margin-top: 65px;}
#hbgGfn .hbgGfnSec4 .cntLst > div{width: 50%;}
#hbgGfn .hbgGfnSec4 .cntLst .cntRgt{display: flex;flex-wrap: wrap;gap: 40px;}
#hbgGfn .hbgGfnSec4 .cntLst .cntRgt .cntItm{width: calc(50% - 20px);}
#hbgGfn .hbgGfnSec4 .cntLst .cntRgt .cntItm .imgBox{width: 53.57%;margin-bottom: 20px;}
#hbgGfn .hbgGfnSec4 .cntLst .cntRgt .cntItm .imgBox > img{width: 100%;vertical-align: middle;}
#hbgGfn .hbgGfnSec4 .cntLst .cntRgt .cntItm .bgNis{height: 52px;font-size: 21px;}
#hbgGfn .hbgGfnSec4 .cntLst .cntLft .cntItm .imgBox{width: 66.667%;margin: 90px 0 55px;}
#hbgGfn .hbgGfnSec4 .cntLst .cntLft .cntItm .imgBox > img{width: 100%;vertical-align: middle;}
#hbgGfn .hbgGfnSec4 .cntLst .cntLft .cntItm .imgTxtBox{display: flex;justify-content: center;align-items: center;gap: 20px;}
#hbgGfn .hbgGfnSec4 .cntLst .cntLft .cntItm .imgTxtBox .imgTxt{font-size: 18px;line-height: 40px;font-weight: 600;color: #666666;margin-top: 45px;}
#hbgGfn .hbgGfnSec4 .cntItm{border-radius: 15px;background: url("../img/main/section4_bg.jpg") repeat;background-size: 70px 70px;display: flex;flex-direction: column;justify-content: flex-end;align-items: center; position: relative;box-shadow: 0 6px 25px rgba(0,0,0,0.08);}
#hbgGfn .hbgGfnSec4 .cntItm .bgNis{height: 55px;border-radius: 0 0 15px 15px;width: 100%;}
#hbgGfn .hbgGfnSec4 .cntItm .lbl{position: absolute;top: 0;background-repeat: no-repeat;background-size: contain;display: flex;justify-content: center;align-items: center; width: 139px;height: 43px;left: 50%;transform: translateX(-50%);top: -3px;}
#hbgGfn .hbgGfnSec4 .cntItm .lbl.ppl{background-image: url("../img/main/icon_tag_ppl.png")}
#hbgGfn .hbgGfnSec4 .cntItm .lbl.blu{background-image: url("../img/main/icon_tag_blue.png")}
#hbgGfn .hbgGfnSec4 .cntItm .lbl.grn{background-image: url("../img/main/icon_tag_grn.png")}
#hbgGfn .hbgGfnSec4 .cntItm .lbl > span{font-size: 15px;color: #ffffff;font-weight: 400;line-height: 13px;}
#hbgGfn .hbgGfnSec4 .cntItm .lbl > span > b{font-size: 18px;font-weight: 400;}
#hbgGfn .hbgGfnSec4 .cntLst .cntLft .cntItm .lbl{width: 173px;height: 54px;transform: translateX(0);left: 25px;}
#hbgGfn .hbgGfnSec4 .cntLst .cntLft .cntItm .lbl > span{font-size: 24px;line-height: 16px;}
#hbgGfn .hbgGfnSec4 .btnWrp .mid{background: linear-gradient(to right, #4f4f4f, #222222);}
#hbgGfn .hbgGfnSec4 .btnWrp .sml{color: #222222;border: 2px solid #222222;}

/*5*/
#hbgGfn .hbgGfnSec5{background-image: url("../img/main/section5_bg.jpg");background-repeat: repeat;background-size: 70px 70px;margin-bottom: -25px;}
#hbgGfn .hbgGfnSec5 .ttl{max-width: 730px;margin: 0 auto;}
#hbgGfn .hbgGfnSec5 .ttl > img{width: 100%;vertical-align: middle;}
#hbgGfn .hbgGfnSec5 .cntBox{padding-top: 50px;}
#hbgGfn .hbgGfnSec5 .cntBox > div:not(:last-child){margin-bottom: 90px;}
#hbgGfn .hbgGfnSec5 .cntBox > div:last-child{margin-top: -25px;}
#hbgGfn .hbgGfnSec5 .hofWrp > p{font-size: 42px;color: #333333;line-height: 1;padding-bottom: 25px;}
#hbgGfn .hbgGfnSec5 .hofWrp > p > b{font-weight: 700;}
#hbgGfn .hbgGfnSec5 .hofLst{display: flex;column-gap: 40px;row-gap: 45px;flex-wrap: wrap;}
#hbgGfn .hbgGfnSec5 .hofWrp.top .hofItm{height: 250px;}
#hbgGfn .hbgGfnSec5 .hofItm{display: flex;width: calc(50% - 20px);border-radius: 15px;overflow: hidden;box-shadow: 0 6px 25px rgba(0,0,0,0.08);background-color: #ffffff;}
#hbgGfn .hbgGfnSec5 .hofItm .imgBox{width: 42%;}
#hbgGfn .hbgGfnSec5 .hofItm .imgBox > img{width: 100%;vertical-align: middle;height: 100%;object-fit: cover;object-position: center;}
#hbgGfn .hbgGfnSec5 .hofItm .txtBox{width: 58%;display: flex;flex-direction: column;align-items: center;justify-content: center;}
#hbgGfn .hbgGfnSec5 .hofItm .txtBox .name{color: #333333;display: flex;flex-direction: column;align-items: center;padding: 37px 0;position: relative;}
#hbgGfn .hbgGfnSec5 .hofItm .txtBox .name:before,
#hbgGfn .hbgGfnSec5 .hofItm .txtBox .name:after{content: '';width: 92px;height: 20px;background-image: url("../img/main/section5_name_deco.png");background-repeat: no-repeat;background-size: contain;position: absolute;left: 50%;transform: translateX(-50%);}
#hbgGfn .hbgGfnSec5 .hofItm .txtBox .name:before{top: 0;}
#hbgGfn .hbgGfnSec5 .hofItm .txtBox .name:after{bottom: 0;transform: translateX(-50%) rotate(180deg);}
#hbgGfn .hbgGfnSec5 .hofItm .txtBox .name > b{font-size: 32px;line-height: 44px;font-weight: 700;padding-bottom: 3px;white-space: nowrap}
#hbgGfn .hbgGfnSec5 .hofItm .txtBox .name > span{font-size: 20px;line-height: 22px;}
#hbgGfn .hbgGfnSec5 .hofItm .txtBox .mny{color: #330099;font-size: 20px;line-height: 22px;margin-top: 25px;}
#hbgGfn .hbgGfnSec5 .hofItm .txtBox .mny > b{font-size: 32px;letter-spacing: -0.025em}
#hbgGfn .hbgGfnSec5 .line2{width: 100%;overflow-x: hidden;position: relative;}
#hbgGfn .hbgGfnSec5 .line2 .hofLst{column-gap: 27px;row-gap: 25px;}
#hbgGfn .hbgGfnSec5 .line2 .hofItm{width: 100%; padding: 15px 0 65px 15px;box-sizing: border-box;position: relative;width: calc(25% - 19.5px);}
#hbgGfn .hbgGfnSec5 .line2 .hofItm .imgBox{width: 100px;height: 100px;border-radius: 50%;overflow: hidden;margin-right: 5px;}
#hbgGfn .hbgGfnSec5 .line2 .hofItm .txtBox{width: calc(100% - 105px);}
#hbgGfn .hbgGfnSec5 .line2 .hofItm .txtBox .name{padding: 20px 0;}
#hbgGfn .hbgGfnSec5 .line2 .hofItm .txtBox .name:before,
#hbgGfn .hbgGfnSec5 .line2 .hofItm .txtBox .name:after{width: 67px;height: 15px;}
#hbgGfn .hbgGfnSec5 .line2 .hofItm .txtBox .name > b{font-size: 22px;padding-bottom: 0;line-height: 32px;letter-spacing: -0.05em;}
#hbgGfn .hbgGfnSec5 .line2 .hofItm .txtBox .name > span{font-size: 16px;}
#hbgGfn .hbgGfnSec5 .line2 .hofItm .txtBox .mny{font-size: 16px;position: absolute;bottom: 20px;left: 0;width: 100%;text-align: center;}
#hbgGfn .hbgGfnSec5 .line2 .hofItm .txtBox .mny > b{font-size: 24px;}
#hbgGfn .hbgGfnSec5 .line2.end .hofItm{padding: 20px 15px;}
#hbgGfn .hbgGfnSec5 .line2.end .hofItm .txtBox .name{padding: 0;}
#hbgGfn .hbgGfnSec5 .line2.end .hofItm .txtBox .name:before,
#hbgGfn .hbgGfnSec5 .line2.end .hofItm .txtBox .name:after{content: none;}
#hbgGfn .hbgGfnSec5 .line2.end .hofItm .txtBox .name > b{font-size: 20px;}
#hbgGfn .hbgGfnSec5 .line2.end .hofItm .txtBox .name > span{font-size: 14px;}
#hbgGfn .hbgGfnSec5 .line2 .swiper{position: initial;}
#hbgGfn .hbgGfnSec5 .line2 .swiper-button-next,
#hbgGfn .hbgGfnSec5 .line2 .swiper-button-prev{width: 43px;height: 34px;background-image: url("../img/main/icon_slide_arrow1.png");background-size: contain;top: 35px;background-repeat: no-repeat;background-position: center;}
#hbgGfn .hbgGfnSec5 .line2 .swiper-button-prev{left: auto;right: 80px;transform: rotate(180deg);}
#hbgGfn .hbgGfnSec5 .line2 .swiper-button-next{right: 0;}
#hbgGfn .hbgGfnSec5 .hofLstSwp{display: flex;flex-wrap: wrap;gap: 26px;padding-bottom: 25px;}

/*6*/
#hbgGfn .hbgGfnSec6{background-image: url("../img/main/section6_bg.jpg");background-size: cover;background-repeat: no-repeat;background-position: center;padding: 80px 0 70px;}
#hbgGfn .hbgGfnSec6 .txtBox{color: #ffffff;text-align: center;}
#hbgGfn .hbgGfnSec6 .txtBox > span{display: block;font-size: 24px;line-height: 44px;font-weight: 300;}
#hbgGfn .hbgGfnSec6 .txtBox > p{font-size: 52px;line-height: 1;}
#hbgGfn .hbgGfnSec6 .btnWrp{padding-top: 50px;}
#hbgGfn .hbgGfnSec6 .btnWrp > a{border: 2px solid #ffffff;}

/*7*/
#hbgGfn .hbgGfnSec7{padding: 120px 0 130px;}
#hbgGfn .hbgGfnSec7 .faqLst{margin-top: 60px;}
#hbgGfn .hbgGfnSec7 .faqLst > div:not(:last-child){margin-bottom: 25px;}
#hbgGfn .hbgGfnSec7 .faqItm{padding: 30px 35px;box-shadow: 0 6px 25px rgba(0,0,0,0.1);border-radius: 15px;}
#hbgGfn .hbgGfnSec7 .faqItm .hed{display: flex;justify-content: space-between;align-items: center;cursor: pointer;}
#hbgGfn .hbgGfnSec7 .faqItm .hed > span{font-size: 22px;line-height: 44px;font-weight: 500;color: #000000;display: flex;align-items: center;cursor: pointer;}
#hbgGfn .hbgGfnSec7 .faqItm .hed > span > em{display: inline-block;width: 36px;height: 36px;background: url("../img/main/icon_faq_q.png") no-repeat center;background-size: contain; margin-right: 15px;}
#hbgGfn .hbgGfnSec7 .faqItm .hed > i{display: inline-block;width: 26px;height: 30px;background-image: url("../img/main/icon_faq_arrow.png");background-size: contain;background-position: center;background-repeat: no-repeat; cursor: pointer;transform: rotate(180deg);opacity: 0.5;transition: opacity 0.5s;}
#hbgGfn .hbgGfnSec7 .faqItm > p{color: #666666;font-size: 18px;line-height: 30px;font-weight: 300;padding-top: 35px;display: none;}
#hbgGfn .hbgGfnSec7 .faqItm > p > a{color: inherit;}
#hbgGfn .hbgGfnSec7 .faqItm > p > a.link{text-decoration: underline;}
#hbgGfn .hbgGfnSec7 .faqItm.on .hed > i{transform: rotate(0);opacity: 1;}

/*popup*/
#hbgGfn .hbgGfnPopBck.on{display: block;}
#hbgGfn .hbgGfnPop.on{display: block;}
#hbgGfn .hbgGfnPopBck{position: fixed;top: 0;left: 0;z-index: 9999;background-color: rgba(0,0,0,0.74);width: 100vw;height: 100vh;display: none;}
#hbgGfn .hbgGfnPop{position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%); z-index: 99999;max-width: 700px;width: calc(100% - 60px);display: none;}
#hbgGfn .hbgGfnPop .popInr{position: relative;}
#hbgGfn .hbgGfnPop .popInr .popCnt{box-sizing: border-box;background-color: #ffffff;border: 6px solid #330099;box-shadow: 0 0 10px rgba(0,0,0,0.2);border-radius: 15px;overflow: hidden;}
#hbgGfn .hbgGfnPop .popInr .popCnt > div{max-height: 75vh;overflow-y: auto;}
#hbgGfn .hbgGfnPop .popInr .nameWrp{padding: 40px 0 55px;}
#hbgGfn .hbgGfnPop .popInr .name{color: #333333;display: flex;flex-direction: column;align-items: center;padding: 35px 0;position: relative;}
#hbgGfn .hbgGfnPop .popInr .name > b{font-size: 32px;line-height: 44px;font-weight: 700;}
#hbgGfn .hbgGfnPop .popInr .name > span{font-size: 20px;line-height: 22px;}
#hbgGfn .hbgGfnPop .popInr .name:before,
#hbgGfn .hbgGfnPop .popInr .name:after{content: '';width: 92px;height: 20px;background-image: url("../img/main/section5_name_deco.png");background-repeat: no-repeat;background-size: contain;position: absolute;left: 50%;transform: translateX(-50%);}
#hbgGfn .hbgGfnPop .popInr .name:before{top: 0;}
#hbgGfn .hbgGfnPop .popInr .name:after{bottom: 0;transform: translateX(-50%) rotate(180deg);}
#hbgGfn .hbgGfnPop .popInr .mnyWrp{background-color: #f7f7f7;position: relative;width: 100%;}
#hbgGfn .hbgGfnPop .popInr .mnyLst{padding: 70px 0 60px;max-width: 445px;width: calc(100% - 40px);margin: 0 auto;display: flex;flex-direction: column;gap: 10px;}
#hbgGfn .hbgGfnPop .popInr .mnyLst > li{display: flex;justify-content: space-between;align-items: flex-start;line-height: 26px;font-size: 18px;}
#hbgGfn .hbgGfnPop .popInr .mnyLst > li > p{font-weight: 500;color: #333333;display: flex;align-items: flex-start;gap: 10px;width: 100%;}
#hbgGfn .hbgGfnPop .popInr .mnyLst > li > p:before{content: '';width: 6px;height: 6px;background-color: #333333;border-radius: 50%;display: inline-block;margin-top: 9px;}
#hbgGfn .hbgGfnPop .popInr .mnyLst > li > p > span{display: block;width: calc(100% - 16px);}
#hbgGfn .hbgGfnPop .popInr .mnyLst > li > span{color: #330099;}
#hbgGfn .hbgGfnPop .popInr .mnyLst > li > span > b{font-weight: 700;letter-spacing: 0;}
#hbgGfn .hbgGfnPop .popInr .mnyTtl{color: #fff;font-size: 20px;line-height: 22px;display: inline-block;padding: 10px 50px;background-color: #330099;border-radius: 10px;position: absolute;top: -25px;left: 50%;transform: translateX(-50%);font-weight: 300;}
#hbgGfn .hbgGfnPop .popInr .mnyTtl > b{font-size: 32px;line-height: 1;font-weight: 700;}
#hbgGfn .hbgGfnPop .btnPopCls{position: absolute;bottom: -55px;left: 50%;transform: translateX(-50%);}
#hbgGfn .hbgGfnPop .btnPopCls > a{display: inline-block;width: 40px;height: 40px;background-color: #330099;border-radius: 50%;background-image: url("../img/main/icon_pop_close.png");background-repeat: no-repeat;background-position: center;background-size: 15px 15px;}
/*scrollbar*/
#hbgGfn .hbgGfnPop .popInr .popCnt > div::-webkit-scrollbar {width: 8px}
#hbgGfn .hbgGfnPop .popInr .popCnt > div::-webkit-scrollbar-thumb {height: 30%;background: rgba(106,69,177,0.6); border-radius: 10px;}
#hbgGfn .hbgGfnPop .popInr .popCnt > div::-webkit-scrollbar-track {background: rgba(106,69,177,0.1);}

@media screen and (max-width:1500px){
  .footer .inner{padding: 0 20px;}

  #hbgGfn .hbgGfnSec5 .line2 .hofItm{padding: 15px 0 65px 12px;}
  #hbgGfn .hbgGfnSec5 .line2.end .hofItm{padding: 20px 12px;}
}

@media screen and (max-width:1300px){
  /*공통*/
  #hbgGfn .cntSze{max-width: 960px;width: calc(100% - 40px);}
  #hbgGfn .hbgGfnSec h2 > span{font-size: 62px;}
  #hbgGfn .hbgGfnSec .ttlSub > p{font-size: 42px;}
  #hbgGfn .hbgGfnSec .ttlSub > span{font-size: 22px;line-height: 30px;padding-top: 10px;}
  #hbgGfn .hbgGfnSec .bgNis{font-size: 20px;}

  /*float*/
  #hbgGfnFlt > a{transform: scale(0.9);transform-origin: right bottom;}
  #hbgGfnFlt{right: 30px;bottom: 30px;}

  /*hero*/
  #hbgGfn .hbgGfnHro h1{max-width: 740px;}
  #hbgGfn .hbgGfnHro .ttlSub > p{font-size: 40px;padding-bottom: 10px;}
  #hbgGfn .hbgGfnHro .ttlSub > span{font-size: 20px;}

  /*1*/
  #hbgGfn .hbgGfnSec1 .howLst{gap: 20px;}
  #hbgGfn .hbgGfnSec1 .howItm > ul{padding: 35px 0;}
  #hbgGfn .hbgGfnSec1 .howItm > ul > li .imgBox{width: 85px;height: 85px;}
  #hbgGfn .hbgGfnSec1 .howItm > ul > li .imgBox > img{width: 50px;height: 50px;}
  #hbgGfn .hbgGfnSec1 .howItm > ul > li > span{font-size: 16px;padding-top: 10px;}
  #hbgGfn .hbgGfnSec1 .howItm > p{width: 180px;}
  #hbgGfn .hbgGfnSec1 .howItm > p > span{font-size: 20px;}
  #hbgGfn .hbgGfnSec1 .howItm > a{font-size: 20px;height: 55px;}

  /*2*/
  #hbgGfn .hbgGfnSec2 ul{gap: 20px;}
  #hbgGfn .hbgGfnSec2 ul > li .bgNis{height: 50px;}
  #hbgGfn .hbgGfnSec2 ul > li .txtBox{height: 225px;}
  #hbgGfn .hbgGfnSec2 ul > li .txtBox > strong{font-size: 24px;line-height: 35px;padding: 25px 0 15px;}
  #hbgGfn .hbgGfnSec2 ul > li .txtBox > p{font-size: 14px;line-height: 20px;}
  #hbgGfn .hbgGfnSec2 ul > li .txtBox > p > b{font-size: 16px;padding: 15px 0 5px;}
  #hbgGfn .hbgGfnSec2 ul > li .txtBox > p > span{padding-top: 15px;}

  /*3*/
  #hbgGfn .hbgGfnSec3 .swpWrp .swiper-button-next, #hbgGfn .hbgGfnSec3 .swpWrp .swiper-button-prev{bottom: 55px;}
  #hbgGfn .hbgGfnSec3 .swpWrp .swiper{padding-bottom: 55px;}

  /*4*/
  #hbgGfn .hbgGfnSec4 .cntLst{gap: 20px;}
  #hbgGfn .hbgGfnSec4 .cntLst .cntRgt{gap: 20px;}
  #hbgGfn .hbgGfnSec4 .cntLst .cntRgt .cntItm{width: calc(50% - 10px);}
  #hbgGfn .hbgGfnSec4 .cntLst .cntLft .cntItm .imgBox{width: 60%;margin: 90px 0 45px;}
  #hbgGfn .hbgGfnSec4 .cntLst .cntRgt .cntItm .imgBox{width: 44%;}
  #hbgGfn .hbgGfnSec4 .cntLst .cntRgt .cntItm .bgNis{height: 50px;font-size: 18px;}

  /*5*/
  #hbgGfn .hbgGfnSec5 .ttl{max-width: 600px;}
  #hbgGfn .hbgGfnSec5 .hofWrp > p{font-size: 35px;padding-bottom: 20px;}
  #hbgGfn .hbgGfnSec5 .hofLst{row-gap: 20px;column-gap: 20px;}
  #hbgGfn .hbgGfnSec5 .hofWrp.top .hofItm{height: 190px;}
  #hbgGfn .hbgGfnSec5 .hofItm{width: calc(50% - 10px);}
  #hbgGfn .hbgGfnSec5 .hofItm .imgBox{width: 40%;}
  #hbgGfn .hbgGfnSec5 .hofItm .txtBox{width: 60%;}
  #hbgGfn .hbgGfnSec5 .hofItm .txtBox .name{padding: 25px 0;}
  #hbgGfn .hbgGfnSec5 .hofItm .txtBox .name:before, #hbgGfn .hbgGfnSec5 .hofItm .txtBox .name:after{width: 74px;}
  #hbgGfn .hbgGfnSec5 .hofItm .txtBox .name > b{font-size: 25px;line-height: 35px;}
  #hbgGfn .hbgGfnSec5 .hofItm .txtBox .name > span{font-size: 18px;}
  #hbgGfn .hbgGfnSec5 .hofItm .txtBox .mny{font-size: 16px;line-height: 22px;margin-top: 20px;}
  #hbgGfn .hbgGfnSec5 .hofItm .txtBox .mny > b{font-size: 26px;}
  #hbgGfn .hbgGfnSec5 .line2 .hofItm{padding: 15px 0 50px 10px;align-items: center;width: calc(25% - 15px);}
  #hbgGfn .hbgGfnSec5 .line2 .hofItm .imgBox{width: 65px;height: 65px;}
  #hbgGfn .hbgGfnSec5 .line2 .hofItm .txtBox{width: calc(100% - 70px);}
  #hbgGfn .hbgGfnSec5 .line2 .hofItm .txtBox .name{padding: 22px 0;}
  #hbgGfn .hbgGfnSec5 .line2 .hofItm .txtBox .name > b{font-size: 17px;line-height: 22px;}
  #hbgGfn .hbgGfnSec5 .line2 .hofItm .txtBox .name > span{font-size: 15px;}
  #hbgGfn .hbgGfnSec5 .line2 .hofItm .txtBox .mny{bottom: 10px;}
  #hbgGfn .hbgGfnSec5 .line2 .hofItm .txtBox .mny > b{font-size: 22px;}
  #hbgGfn .hbgGfnSec5 .line2.end .hofItm{align-items: center;}
  #hbgGfn .hbgGfnSec5 .line2.end .hofItm .txtBox .name > b{font-size: 16px;}
  #hbgGfn .hbgGfnSec5 .line2 .swiper-button-next, #hbgGfn .hbgGfnSec5 .line2 .swiper-button-prev{width: 32px;top: 30px;}
  #hbgGfn .hbgGfnSec5 .line2 .swiper-button-prev{right: 55px;}
  #hbgGfn .hbgGfnSec5 .hofLstSwp{gap: 20px;}

  /*6*/
  #hbgGfn .hbgGfnSec6 .txtBox > p{font-size: 40px;margin-top: 5px;}

  /*7*/
  #hbgGfn .hbgGfnSec7 .faqItm{padding: 20px 30px;}
  #hbgGfn .hbgGfnSec7 .faqItm.on > p{padding-top: 30px;}
  #hbgGfn .hbgGfnSec7 .faqItm .hed > span{font-size: 20px;}

}

@media screen and (max-width:960px){
  /*공통*/
  #hbgGfn .shwTab{display: block;}
  #hbgGfn .hbgGfnSec{padding: 100px 0;}
  #hbgGfn .hbgGfnSec h2 > span{font-size: 52px;}
  #hbgGfn .hbgGfnSec h2 > span:before, #hbgGfn .hbgGfnSec h2 > span:after{width: 118px;margin-bottom: 9px;}
  #hbgGfn .hbgGfnSec h2 > span:before{margin-right: 25px;}
  #hbgGfn .hbgGfnSec h2 > span:after{margin-left: 25px;}
  #hbgGfn .hbgGfnSec .ttlSub > p{font-size: 35px;}
  #hbgGfn .hbgGfnSec .ttlSub > span{font-size: 20px;}
  #hbgGfn .btnWrp > a{height: 60px;font-size: 20px;}
  #hbgGfn .btnWrp .sml{width: 170px;}
  #hbgGfn .btnWrp .mid{width: 220px;}
  #hbgGfn .btnWrp .big{width: 220px;}
  #hbgGfn .btnWrp{padding-top: 40px;}

  #hbgGfn .fadeUp.active.fadeUp_delay1,
  #hbgGfn .fadeUp.active.fadeUp_delay2{animation-delay: initial;}

  /*float*/
  #hbgGfnFlt{bottom: 20px;right: 30px;}

  /*hero*/
  #hbgGfn .hbgGfnHro h1{max-width: 580px;}
  #hbgGfn .hbgGfnHro .ttlSub > p{font-size: 40px;}
  #hbgGfn .hbgGfnHro .ttlSub{padding: 25px 0 50px;}

  /*1*/
  #hbgGfn .hbgGfnSec1 .howLst{flex-direction: column;align-items: center}
  #hbgGfn .hbgGfnSec1 .howItm{max-width: 500px;width: 100%;}

  /*2*/
  #hbgGfn .hbgGfnSec2 ul{flex-direction: column;align-items: center;}
  #hbgGfn .hbgGfnSec2 ul > li{max-width: 400px;width: 100%;}
  #hbgGfn .hbgGfnSec2 ul > li .txtBox{height: auto;}
  #hbgGfn .hbgGfnSec2 ul > li .txtBox > p{padding-bottom: 25px;}

  /*3*/
  #hbgGfn .hbgGfnSec3 .ttl{font-size: 50px;}
  #hbgGfn .hbgGfnSec3 .ttlFilp{gap: 5px;}
  #hbgGfn .hbgGfnSec3 .swpWrp .swiper-button-next{left: 69.3%;bottom: 54.9px;}
  #hbgGfn .hbgGfnSec3 .swpWrp .swiper-button-prev{bottom: 54.5px;}

  /* 텍스트 롤링 */
  #hbgGfn .hbgGfnSec3 .flip{height: 60px;}
  #hbgGfn .hbgGfnSec3 .flip > div > div{height: 60px;line-height: 60px;}

  @keyframes roll {
    0% {margin-top:-360px;}
    9% {margin-top: -300px;} /*1*/
    16% {margin-top: -300px;}
    24% {margin-top: -240px;} /*2*/
    32% {margin-top:-240px;}
    40% {margin-top: -180px;} /*3*/
    48% {margin-top: -180px;}
    56% {margin-top:-120px;} /*4*/
    64% {margin-top:-120px;}
    72% {margin-top: -60px;} /*5*/
    80% {margin-top: -60px;}
    88% {margin-top:0px;} /*6*/
    99.9999% {margin-top:0px;}
    100%{margin-top:-360px;}
  }

  /*4*/
  #hbgGfn .hbgGfnSec4 .cntLst{flex-direction: column;align-items: center;}
  #hbgGfn .hbgGfnSec4 .cntLst .cntRgt .cntItm{height: 240px;}
  #hbgGfn .hbgGfnSec4 .cntLst > div{max-width: 500px;width: 100%;}
  #hbgGfn .hbgGfnSec4 .cntLst .cntLft .cntItm .imgBox{width: 62%;margin: 80px 0 30px;}
  #hbgGfn .hbgGfnSec4 .cntLst .cntLft .cntItm .imgTxtBox .imgTxt{font-size: 16px;margin-top: 50px;}

  /*5*/
  #hbgGfn .hbgGfnSec5 .hofWrp.top .hofItm{height: 170px;}
  #hbgGfn .hbgGfnSec5 .hofWrp.top .hofItm .txtBox{padding: 15px 0;}
  #hbgGfn .hbgGfnSec5 .hofItm .txtBox .name > b{font-size: 23px;line-height: 33px;}
  #hbgGfn .hbgGfnSec5 .hofItm .txtBox .mny > b{font-size: 23px;}
  #hbgGfn .hbgGfnSec5 .line2 .hofItm .txtBox{width: 140px;}
  #hbgGfn .hbgGfnSec5 .line2 .hofItm{justify-content: center;gap: 15px;width: calc(50% - 10px);}
  #hbgGfn .hbgGfnSec5 .line2.end .hofItm{padding: 15px 10px;}
  #hbgGfn .hbgGfnSec5 .hofItm .txtBox .mny{margin-top: 10px;}
  #hbgGfn .hbgGfnSec5 .ttl{max-width: 500px;}
  #hbgGfn .hbgGfnSec5 .hofWrp > p{font-size: 30px;padding-bottom: 15px;}
  #hbgGfn .hbgGfnSec5 .line2 .swiper-button-next, #hbgGfn .hbgGfnSec5 .line2 .swiper-button-prev{top: 20px;}
  #hbgGfn .hbgGfnSec5 .cntBox > div:not(:last-child){margin-bottom: 60px;}

  /*6*/
  #hbgGfn .hbgGfnSec6 .txtBox > p{line-height: 47px;}
  #hbgGfn .hbgGfnSec6{padding: 80px 0 70px;}
  #hbgGfn .hbgGfnSec6 .btnWrp{padding-top: 35px;}

  /*7*/
  #hbgGfn .hbgGfnSec7 .faqItm{padding: 20px;}
  #hbgGfn .hbgGfnSec7 .faqLst > div:not(:last-child){margin-bottom: 15px;}
  #hbgGfn .hbgGfnSec7 .faqItm .hed > span{font-size: 18px;line-height: 30px;}
  #hbgGfn .hbgGfnSec7 .faqItm .hed > span > em{width: 30px;height: 30px;margin-right: 10px;}
  #hbgGfn .hbgGfnSec7 .faqItm > p{font-size: 16px;line-height: 25px;}

}

@media screen and (max-width:900px){
  .footer .footer_top {height: auto;}
  .footer .footer_top .sns {position: relative; left:auto;top:auto;}
  .footer .footer_top .menu {padding-bottom: 10px;}
  .footer .footer_top .menu li {margin-left:0; margin-right:10px}
  .footer .footer_top .menu li a {line-height: 1.2em;}
  .footer .footer_bot p.copyright {line-height: 1.2em; padding: 5px 0;}
  .footer .footer_top .tel_box{display: none;}

  #hbgGfn .hbgGfnSec5 .line2 .hofItm{gap: 10px;}

}

@media screen and (max-width:768px){
  #hbgGfn .shwTab2,
  #hbgGfn .imgTab{display: block;}
  #hbgGfn .imgPc{display: none;}

  /*공통*/
  #hbgGfn .hbgGfnSec{padding: 80px 0;}
  #hbgGfn .hbgGfnSec h2 > span{font-size: 45px;}
  #hbgGfn .hbgGfnSec h2 > span:before, #hbgGfn .hbgGfnSec h2 > span:after{background-image: url("../img/main/title_deco_mo.png");width: 105px;margin-bottom: 6px;}
  #hbgGfn .hbgGfnSec h2 > span:before{margin-right: 20px;}
  #hbgGfn .hbgGfnSec h2 > span:after{margin-left: 20px;}
  #hbgGfn .btnWrp > a{font-size: 16px;height: 50px;}
  #hbgGfn .hbgGfnHro .btnWrp .sml{width: 130px;}
  #hbgGfn .btnWrp .sml,
  #hbgGfn .btnWrp .mid,
  #hbgGfn .btnWrp .big{width: 180px;}

  /*float*/
  #hbgGfnFlt{right: 0;bottom: 0;transform: translateY(100%);transition: transform 0.3s;}
  #hbgGfnFlt.on{transform: translateY(0);}
  #hbgGfnFlt > a{transform: scale(1); width: 100vw;height: 60px;border: none;border-radius: initial;}
  #hbgGfnFlt > a:after{position: relative;width: 40px;height: 41px;}
  #hbgGfnFlt > a > span{padding-right: 15px;}
  #hbgGfnFlt.pos{bottom: 0;}

  /*hero*/
  #hbgGfn .hbgGfnHro .ttlSub > p{padding-bottom: 15px;font-size: 30px;}
  #hbgGfn .hbgGfnHro .ttlSub > span{line-height: 26px;font-size: 18px;}

  /*3*/
  #hbgGfn .hbgGfnSec3 .cntBox{padding-bottom: 147%;}
  #hbgGfn .hbgGfnSec3 .swpWrp .swiper-button-next, #hbgGfn .hbgGfnSec3 .swpWrp .swiper-button-prev{bottom: auto;top: 54.3%}
  #hbgGfn .hbgGfnSec3 .swpWrp .swiper-button-next{left: auto;right: 0;}
  #hbgGfn .hbgGfnSec3 .swpWrp .swiper-button-prev{right: 45px;}
  #hbgGfn .hbgGfnSec3 .ttl{flex-wrap: wrap;font-size: 48px;}
  #hbgGfn .hbgGfnSec3 .ttl > span:first-child{width: 100%;display: inline-block;}
  #hbgGfn .hbgGfnSec3 .ttlFilp{gap: 0px;}

  /*4*/
  #hbgGfn .hbgGfnSec4 .cntLst .cntLft{width: calc(100% - 40px);}
  #hbgGfn .hbgGfnSec4 .cntLst .cntLft .cntItm .lbl{width: 145px;height: 46px;}
  #hbgGfn .hbgGfnSec4 .cntLst .cntLft .cntItm .lbl > span{font-size: 21px;}
  #hbgGfn .hbgGfnSec4 .cntItm .lbl{width: 115px;height: 36px;}
  #hbgGfn .hbgGfnSec4 .cntItm .lbl > span{font-size: 13px;}
  #hbgGfn .hbgGfnSec4 .cntItm .lbl > span > b{font-size: 15px;}
  #hbgGfn .hbgGfnSec4 .cntLst .cntLft .cntItm .imgBox{margin: 60px 0 25px;}

  /*5*/
  #hbgGfn .hbgGfnSec5 .hofLst{flex-direction: column;}
  #hbgGfn .hbgGfnSec5 .hofWrp.top .hofItm{height: auto;}
  #hbgGfn .hbgGfnSec5 .hofItm{width: 100%;}
  #hbgGfn .hbgGfnSec5 .hofItm .imgBox{width: 170px;height: 170px;}
  #hbgGfn .hbgGfnSec5 .hofItm .txtBox{width: calc(100% - 170px);}
  #hbgGfn .hbgGfnSec5 .hofItm .txtBox .mny{margin-top: 5px;}
  #hbgGfn .hbgGfnSec5 .ttl{max-width: 450px;}

  /*6*/
  #hbgGfn .hbgGfnSec6{padding: 60px 0 50px;}
  #hbgGfn .hbgGfnSec6 .txtBox > p{font-size: 33px;line-height: 40px;}

  /*7*/
  #hbgGfn .hbgGfnSec7{padding: 80px 0 100px;}

  /*팝업*/
  #hbgGfn .hbgGfnPop .popInr .nameWrp{padding: 25px 0 45px;}
  #hbgGfn .hbgGfnPop .popInr .name > b{font-size: 28px;line-height: 36px;}
  #hbgGfn .hbgGfnPop .popInr .name > span{font-size: 18px;}
  #hbgGfn .hbgGfnPop .popInr .mnyTtl{padding: 10px 40px;font-size: 18px;}
  #hbgGfn .hbgGfnPop .popInr .mnyTtl > b{font-size: 28px;}
  #hbgGfn .hbgGfnPop .popInr .mnyLst{padding: 50px 0 40px;max-width: 400px;}
  #hbgGfn .hbgGfnPop .popInr .mnyLst > li{font-size: 16px;line-height: 22px;}

}

@media screen and (max-width:540px){
  #hbgGfn .imgHideMo,
  #hbgGfn .hideMo{display: none;}
  #hbgGfn .shwMo,
  #hbgGfn .imgMo{display: block;}

  /*공통*/
  #hbgGfn .cntSze{width: calc(100% - 20px);}
  #hbgGfn .hbgGfnSec h2 > span{font-size: 36px;}
  #hbgGfn .hbgGfnSec h2 > span:before, #hbgGfn .hbgGfnSec h2 > span:after{width: 75px;margin-bottom: 4px;}
  #hbgGfn .hbgGfnSec h2 > span:before{margin-right: 12px;}
  #hbgGfn .hbgGfnSec h2 > span:after{margin-left: 12px;}
  #hbgGfn .hbgGfnSec{padding: 55px 0;}
  #hbgGfn .hbgGfnSec .ttlSub > p{font-size: 25px;}
  #hbgGfn .hbgGfnSec .ttlSub > span{font-size: 16px;line-height: 22px;}
  #hbgGfn .hbgGfnSec .ttlSub{padding-top: 25px;}
  #hbgGfn .hbgGfnSec .bgNis{font-size: 16px;line-height: 30px;}
  #hbgGfn .txtBtm{font-size: 14px;padding-top: 15px;line-height: 20px;}
  #hbgGfn .btnWrp > a{height: 45px;font-size: 15px;width: 50% !important;max-width: 170px;}
  #hbgGfn .btnWrp{gap: 8px;width: 100%;padding-top: 25px;}
  #header .logo{width: 30%;background-size: 100% auto;}
  #header .logo.hide{display: none;}
  /*scrollbar*/
  #hbgGfn .hbgGfnPop .popInr .popCnt > div::-webkit-scrollbar {width: 4px}

  /*float*/
  #hbgGfnFlt > a > span{font-size: 20px;}

  /*hero*/
  #hbgGfn .hbgGfnHro{background-image: url("../img/main/hero_bg_mo.jpg");padding: 28vw 0 36vw;}
  #hbgGfn .hbgGfnHro h1{max-width: 270px;}
  #hbgGfn .hbgGfnHro .ttlSub > p{font-size: 22px;}
  #hbgGfn .hbgGfnHro .ttlSub > span{font-size: 16px;}
  #hbgGfn .hbgGfnHro .btnWrp .sml{border: 1px solid #ffffff;}
  #hbgGfn .hbgGfnHro .ttlSub{padding: 20px 0 45px;}
  #hbgGfn .hbgGfnHro .btnWrp .sml{width: 115px !important;}
  #hbgGfn .hbgGfnHro .btnWrp .mid{width: 160px !important;}

  /*1*/
  #hbgGfn .hbgGfnSec1{background-image: url("../img/main/section1_bg_mo.jpg");background-size: 360px 849px;background-repeat: repeat;}
  #hbgGfn .hbgGfnSec1 .howLst{margin-top: 25px;gap: 15px;}
  #hbgGfn .hbgGfnSec1 .howItm > ul{padding: 20px 0;}
  #hbgGfn .hbgGfnSec1 .howItm > p{width: 140px;height: 30px;}
  #hbgGfn .hbgGfnSec1 .howItm > p > span{font-size: 17px;}
  #hbgGfn .hbgGfnSec1 .howItm > ul > li > span{line-height: 20px;}
  #hbgGfn .hbgGfnSec1 .howItm > a{font-size: 18px;height: 45px;}
  #hbgGfn .hbgGfnSec1 .howItm{padding-top: 25px;border-radius: 7.5px;max-width: 400px;}
  #hbgGfn .hbgGfnSec1 .howItm > ul.line2{flex-wrap: wrap;max-width: 260px;justify-content: center;position: relative;row-gap: 10px;}
  #hbgGfn .hbgGfnSec1 .howItm > ul > li.arw.pos{position: absolute;top: 40%;height: 15px;}
  #hbgGfn .hbgGfnSec1 .howItm > ul > li.arw.pos > i{top: 0;transform: rotate(135deg);transform-origin: center;}

  /*2*/
  #hbgGfn .hbgGfnSec2 ul{margin-top: 25px;}
  #hbgGfn .hbgGfnSec2 ul > li .bgNis{border-radius: 7.5px;height: 40px;margin-bottom: 10px;}
  #hbgGfn .hbgGfnSec2 ul > li > div:last-child{border-radius: 7.5px;}
  #hbgGfn .hbgGfnSec2 ul > li .bgNis:before{width: 10px;height: 10px;bottom: -7px;}
  #hbgGfn .hbgGfnSec2 .btnWrp .big{border: 1px solid #222222;}
  #hbgGfn .hbgGfnSec2 ul > li .txtBox > p > b{padding: 10px 0 3px;}
  #hbgGfn .hbgGfnSec2 ul > li .txtBox > p > span{padding-top: 10px;}
  #hbgGfn .hbgGfnSec2 ul > li .txtBox{padding: 0 15px;}
  #hbgGfn .hbgGfnSec2 ul > li .txtBox > strong{font-size: 20px;padding: 25px 0 5px;}
  #hbgGfn .hbgGfnSec2 .bgNis .num{font-style: initial;width: 25px;height: 25px;background-color: #ffffff;border-radius: 50%;display: flex;justify-content: center;align-items: center;margin-right: 8px;}
  #hbgGfn .hbgGfnSec2 .bgNis .num > span{line-height: 25px;padding-right: 1px;}
  #hbgGfn .hbgGfnSec2 .bgNis.ppl .num{color: #a108af;}
  #hbgGfn .hbgGfnSec2 .bgNis.blu .num{color: #1353b3;}
  #hbgGfn .hbgGfnSec2 .bgNis.grn .num{color: #0c8875;}
  #hbgGfn .hbgGfnSec2 ul > li .txtBox > p > b{font-size: 14px;}

  /*3*/
  #hbgGfn .hbgGfnSec3 .cntBox{border-radius: 7.5px;}
  #hbgGfn .hbgGfnSec3 .ttl{font-size: 35px;}
  /* 텍스트 롤링 */
  #hbgGfn .hbgGfnSec3 .flip{height: 45px;width: 115px;}
  #hbgGfn .hbgGfnSec3 .flip > div > div{height: 45px;line-height: 45px;}

  @keyframes roll {
    0% {margin-top:-270px;}
    9% {margin-top: -225px;} /*1*/
    16% {margin-top: -225px;}
    24% {margin-top: -180px;} /*2*/
    32% {margin-top:-180px;}
    40% {margin-top: -135px;} /*3*/
    48% {margin-top: -135px;}
    56% {margin-top:-90px;} /*4*/
    64% {margin-top:-90px;}
    72% {margin-top: -45px;} /*5*/
    80% {margin-top: -45px;}
    88% {margin-top:0px;} /*6*/
    99.9999% {margin-top:0px;}
    100%{margin-top:-270px;}
  }
  #hbgGfn .hbgGfnSec3 .swpWrp .swiper .swiper-pagination-bullet-active{width: 40px;}
  #hbgGfn .hbgGfnSec3 .swpWrp{margin-top: 25px;}
  #hbgGfn .hbgGfnSec3 .swpWrp .swiper-button-prev{top: 53.8%;}
  #hbgGfn .hbgGfnSec3 .swpWrp .swiper-button-next{top: 53.75%;}

  /*4*/
  #hbgGfn .hbgGfnSec4 .cntLst{margin-top: 25px;gap: 13px;}
  #hbgGfn .hbgGfnSec4 .cntLst .cntRgt .cntItm{height: 44.778vw;}
  #hbgGfn .hbgGfnSec4 .cntLst .cntLft .cntItm .lbl{width: 100px;height: 32px;left: 15px;}
  #hbgGfn .hbgGfnSec4 .cntLst .cntLft .cntItm .imgTxtBox{gap: 10px;}
  #hbgGfn .hbgGfnSec4 .cntLst .cntLft .cntItm .imgBox{margin: 40px 0 15px;}
  #hbgGfn .hbgGfnSec4 .cntLst .cntLft .cntItm .imgTxtBox .imgTxt{font-size: 14px;margin-top: 25px;}
  #hbgGfn .hbgGfnSec4 .cntItm .bgNis{height: 45px;}
  #hbgGfn .hbgGfnSec4 .cntLst .cntRgt .cntItm .bgNis{font-size: 14px;height: 40px;}
  #hbgGfn .hbgGfnSec4 .cntItm .bgNis{border-radius: 0 0 7.5px 7.5px;}
  #hbgGfn .hbgGfnSec4 .cntItm .lbl{width: 100px;height: 32px;}
  #hbgGfn .hbgGfnSec4 .cntItm .lbl > span{font-size: 10px;}
  #hbgGfn .hbgGfnSec4 .cntItm .lbl > span > b{font-size: 13px;}
  #hbgGfn .hbgGfnSec4 .cntLst .cntLft .cntItm .lbl > span{font-size: 16px;}
  #hbgGfn .hbgGfnSec4 .btnWrp .sml{border: 1px solid #222222;}
  #hbgGfn .hbgGfnSec4 .cntLst .cntRgt{column-gap: 10px;row-gap: 13px;}
  #hbgGfn .hbgGfnSec4 .cntItm{border-radius: 7.5px;}
  #hbgGfn .hbgGfnSec4 .cntLst .cntRgt .cntItm .imgBox{margin-bottom: 5vw;}

  /*5*/
  #hbgGfn .hbgGfnSec5 .cntBox{padding-top: 25px;}
  #hbgGfn .hbgGfnSec5 .hofItm{border-radius: 7.5px;}
  #hbgGfn .hbgGfnSec5 .hofLst{gap: 10px;}
  #hbgGfn .hbgGfnSec5 .hofItm .imgBox{width: 125px;height: 125px;}
  #hbgGfn .hbgGfnSec5 .hofItm .txtBox{width: calc(100% - 125px);}
  #hbgGfn .hbgGfnSec5 .hofItm .txtBox .name > b{font-size: 20px;line-height: 27px;padding-bottom: 0;}
  #hbgGfn .hbgGfnSec5 .hofItm .txtBox .name > span{font-size: 14px;line-height: 18px;}
  #hbgGfn .hbgGfnSec5 .hofItm .txtBox .mny{font-size: 14px;}
  #hbgGfn .hbgGfnSec5 .hofItm .txtBox .mny > b{font-size: 20px;}
  #hbgGfn .hbgGfnSec5 .hofWrp.top .hofItm .txtBox{padding: 10px 0;}
  #hbgGfn .hbgGfnSec5 .hofItm .txtBox .name:before, #hbgGfn .hbgGfnSec5 .hofItm .txtBox .name:after{width: 50px;height: 13px;}
  #hbgGfn .hbgGfnSec5 .hofItm .txtBox .name{padding: 15px 0;}
  #hbgGfn .hbgGfnSec5 .line2 .hofItm .imgBox{width: 50px;height: 50px;}
  #hbgGfn .hbgGfnSec5 .line2 .hofItm{padding: 10px 0 35px 10px;width: calc(50% - 5px);}
  #hbgGfn .hbgGfnSec5 .line2 .hofItm .txtBox{width: 90px;}
  #hbgGfn .hbgGfnSec5 .line2 .hofItm .txtBox .name{padding: 15px 0;}
  #hbgGfn .hbgGfnSec5 .line2 .hofItm .txtBox .name > b{font-size: 12px;line-height: 17px;}
  #hbgGfn .hbgGfnSec5 .line2 .hofItm .txtBox .name > span{font-size: 10px;line-height: 12px;}
  #hbgGfn .hbgGfnSec5 .line2 .hofItm .txtBox .name:before, #hbgGfn .hbgGfnSec5 .line2 .hofItm .txtBox .name:after{width: 35px;height: 9px;}
  #hbgGfn .hbgGfnSec5 .line2 .hofItm .txtBox .mny > b{font-size: 14px;}
  #hbgGfn .hbgGfnSec5 .line2 .hofItm .txtBox .mny{font-size: 10px;bottom: 5px;}
  #hbgGfn .hbgGfnSec5 .line2.end .hofItm{padding: 10px;}
  #hbgGfn .hbgGfnSec5 .line2.end .hofItm .txtBox .name > b{font-size: 11px;}
  #hbgGfn .hbgGfnSec5 .line2.end .hofItm .txtBox .name > span{font-size: 10px;}
  #hbgGfn .hbgGfnSec5 .hofWrp > p{font-size: 23px;padding-bottom: 10px;}
  #hbgGfn .hbgGfnSec5 .line2 .swiper-button-next, #hbgGfn .hbgGfnSec5 .line2 .swiper-button-prev{width: 25px;height: 23px;top: 21px;}
  #hbgGfn .hbgGfnSec5 .line2 .swiper-button-prev{right: 40px;}
  #hbgGfn .hbgGfnSec5 .cntBox > div:not(:last-child){;margin-bottom: 35px;}
  #hbgGfn .hbgGfnSec5 .ttl{max-width: 300px;}
  #hbgGfn .hbgGfnSec5 .hofLstSwp{gap: 10px;}

  /*6*/
  #hbgGfn .hbgGfnSec6 .txtBox > span{font-size: 16px;line-height: 30px;}
  #hbgGfn .hbgGfnSec6 .txtBox > p{font-size: 26px;line-height: 34px;margin-top: 10px;}
  #hbgGfn .hbgGfnSec6 .btnWrp > a{border: 1px solid #ffffff;}
  #hbgGfn .hbgGfnSec6 .btnWrp > a{width: 165px;font-size: 16px;height: 50px;}
  #hbgGfn .hbgGfnSec6 .btnWrp{padding-top: 25px;}

  /*7*/
  #hbgGfn .hbgGfnSec7{padding: 55px 0 85px;}
  #hbgGfn .hbgGfnSec7 .faqLst{margin-top: 25px;}
  #hbgGfn .hbgGfnSec7 .faqItm{padding: 18px 14px;border-radius: 7.5px;}
  #hbgGfn .hbgGfnSec7 .faqItm .hed > span{font-size: 16px;line-height: 25px;}
  #hbgGfn .hbgGfnSec7 .faqItm .hed > span > em{width: 25px;height: 25px;margin-right: 8px;}
  #hbgGfn .hbgGfnSec7 .faqItm .hed > i{width: 20px;height: 25px;}
  #hbgGfn .hbgGfnSec7 .faqItm.on > p{padding-top: 15px;}
  #hbgGfn .hbgGfnSec7 .faqItm > p{font-size: 14px;line-height: 22px;}

  /*팝업*/
  #hbgGfn .hbgGfnPop .popInr .nameWrp{padding: 25px 0 45px;}
  #hbgGfn .hbgGfnPop .popInr .name{padding: 15px 0;}
  #hbgGfn .hbgGfnPop .popInr .name > b{font-size: 22px;line-height: 30px;}
  #hbgGfn .hbgGfnPop .popInr .name > span{font-size: 13px;line-height: 20px;}
  #hbgGfn .hbgGfnPop .popInr .name:before, #hbgGfn .hbgGfnPop .popInr .name:after{width: 50px;height: 15px;}
  #hbgGfn .hbgGfnPop .popInr .mnyTtl{padding: 8px 35px;font-size: 14px;top: -20px;}
  #hbgGfn .hbgGfnPop .popInr .mnyTtl > b{font-size: 22px;}
  #hbgGfn .hbgGfnPop .popInr .mnyLst{padding: 40px 0 30px;gap: 5px;}
  #hbgGfn .hbgGfnPop .popInr .mnyLst > li > p{margin-right: 5px;gap: 5px;}
  #hbgGfn .hbgGfnPop .popInr .mnyLst > li > p > span{width: calc(100% - 9px);}
  #hbgGfn .hbgGfnPop .popInr .mnyLst > li > p:before{width: 4px;height: 4px;margin-top: 6px;}
  #hbgGfn .hbgGfnPop .popInr .popCnt{border: 3px solid #330099;border-radius: 10px;}
  #hbgGfn .hbgGfnPop .popInr .mnyLst > li{align-items: flex-start;font-size: 14px;line-height: 19px;}
  #hbgGfn .hbgGfnPop .btnPopCls{bottom: -40px;}
  #hbgGfn .hbgGfnPop .btnPopCls > a{width: 30px;height: 30px;background-size: 10px 10px;}

}

@media screen and (max-width:380px){
  #hbgGfn .hbgGfnSec4 .cntLst .cntRgt .cntItm .bgNis{font-size: 13px;}
}