@charset "utf-8";

@font-face {
font-family: 'HGGGothicssi_Pro'; font-weight:200;
src:  url('/webPub/sc_2018/font/HGGGothicssi_Pro/HGGGothicssi_Pro_20g.eot'); 
    src: 
    url('/webPub/sc_2018/font/HGGGothicssi_Pro/HGGGothicssi_Pro_20g.ttf') format('truetype'), 
    url('/webPub/sc_2018/font/HGGGothicssi_Pro/HGGGothicssi_Pro_20g.woff2') format('woff2'),
    url('/webPub/sc_2018/font/HGGGothicssi_Pro/HGGGothicssi_Pro_20g.woff') format('woff');
}

@font-face {
font-family: 'HGGGothicssi_Pro'; font-weight:600;
src:  url('/webPub/sc_2018/font/HGGGothicssi_Pro/HGGGothicssi_Pro_60g.eot'); 
    src: 
    url('/webPub/sc_2018/font/HGGGothicssi_Pro/HGGGothicssi_Pro_60g.ttf') format('truetype'), 
    url('/webPub/sc_2018/font/HGGGothicssi_Pro/HGGGothicssi_Pro_60g.woff2') format('woff2'),
    url('/webPub/sc_2018/font/HGGGothicssi_Pro/HGGGothicssi_Pro_60g.woff') format('woff');
}

@font-face {
font-family: 'HGGGothicssi_Pro'; font-weight:800;
src:  url('/webPub/sc_2018/font/HGGGothicssi_Pro/HGGGothicssi_Pro_80g.eot'); 
    src: 
    url('/webPub/sc_2018/font/HGGGothicssi_Pro/HGGGothicssi_Pro_80g.ttf') format('truetype'), 
    url('/webPub/sc_2018/font/HGGGothicssi_Pro/HGGGothicssi_Pro_80g.woff2') format('woff2'),
    url('/webPub/sc_2018/font/HGGGothicssi_Pro/HGGGothicssi_Pro_80g.woff') format('woff');
}

@font-face {
font-family: 'HGGGothicssi_Pro'; font-weight:900;
src:  url('/webPub/sc_2018/font/HGGGothicssi_Pro/HGGGothicssi_Pro_99g.eot'); 
    src: 
    url('/webPub/sc_2018/font/HGGGothicssi_Pro/HGGGothicssi_Pro_99g.ttf') format('truetype'), 
    url('/webPub/sc_2018/font/HGGGothicssi_Pro/HGGGothicssi_Pro_99g.woff2') format('woff2'),
    url('/webPub/sc_2018/font/HGGGothicssi_Pro/HGGGothicssi_Pro_99g.woff') format('woff');
}


/*= RESET =*/
*{padding:0; margin:0; text-decoration:none; list-style:none; box-sizing:border-box;}
body {overflow-x:hidden; zoom:1;}
ul, ol{list-style-type:none;}
img,fieldset{border:none;}
body, input, textarea, select, button, table{font-size:13px; color:#666; font-family:"SpoqaHanSansNeo", "Apple SD Gothic Neo", Helvetica, sans-serif, Arial;}
a{text-decoration:none; color:#666; }
a:link, a:visited{text-decoration:none; color:#666; /*outline: none!important;*/}
a:hover, a:active{text-decoration:none; color:#666; /*outline: none!important;*/}
input{border:0;}
select{vertical-align: top;height:24px;border:1px solid #c5c5c5;}
iframe{border: 0; margin: 0; padding: 0;}
button {overflow: visible; padding: 0; margin: 0; background: none; border: 0;}

/*////////////header////////////*/
/*common*/
.emergency_relief_cnts_top {
  height: 30px;
}
.CampaignList{left: 47.75%; margin-left: -274px; top: 30px;}
.CampaignList ul {padding: 6px 14px !important;}
.CampaignList ul li {margin-bottom: 7px;}

/*white*/
.emergency_relief_cnts_top {
  background: #fff;
  border-bottom-color: #dadada;
}
.emergency_relief_cnts_top ul.util_right li a {
  color: #7f7f7f;
}
.emergency_relief_cnts_top ul.util_right .save_user,
.emergency_relief_cnts_top ul.util_right .save_user strong{ 
  color:#000;
}

/*brown*/
/*.emergency_relief_cnts_top {height: 30px;}*/

/*sns_area*/
.sns_area{ padding:47px 0 62px; border-top:3px solid #f8f6f3;}
.sns_area h3{font-weight: normal; display: inline-block; font-size: 16px; color: #4e4e4e; vertical-align: middle; margin-right:8px;}
.sns_area .div_inner {margin: 0 auto; height: 100%; text-align: center;}
.sns_area > .div_inner > a{display: inline-block; margin-left: 14px; vertical-align: middle; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s;}
.sns_area > .div_inner > a > img{width:54px;}

/*footer*/
#footer {width: 100%; height: auto; background: #fffbf7; border-top: 2px solid #ed425a;}
#footer .inner {width: 1000px; margin: 0 auto; position: relative; min-height: 72px; padding-top: 22px;}

/*= CONTENT =*/
#babymeal{margin: 0 auto; max-width: 1920px; min-width: 1320px;}
#babymeal .swiper-wrapper{cursor: grab; will-change: transform;}
#babymeal .swiper-slide {flex-shrink: 0;}

#babymeal .div-sec{max-width:1920px; min-width:1320px; position:relative;}
#babymeal .div-sec img{display:block;}
#babymeal .div-sec img.center-img{position: relative; top: 0; left: 50%; transform: translateX(-50%); display: block; max-width: none;}
#babymeal .div-sec .screen-out {position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important;}
#babymeal .div-sec .div-inner{position: absolute; top: 0; left: 50%; bottom:0; margin-left: -660px; width: 1320px;}
#babymeal .spoqa{font-family:"SpoqaHanSansNeo" !important;}

.area01{height: 1027px; z-index: 1;}
.area01 .bg-wrap{position: relative; top: 0; bottom:0; left: 50%; transform: translateX(-50%); display: block; width:1920px; height: 1027px;}
.area01 .bg-wrap img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.5s ease-in-out;}
.area01 .bg-wrap img.active {opacity: 1;}
.area01 .a1-subTitle{position: absolute; top:76px; right:54px; font-family: 'Noto Sans KR'; font-weight: 400; font-size: 17px; letter-spacing: -0.05em; line-height: 1; color:#fff;}
.area01 .a1-title{position: absolute; top: 138px; right:105px;}
.area01 .a1-text-wrap{position: absolute; top: 611px; right:105px; display: flex; flex-direction: column; text-align: right;}
.area01 .a1-text-wrap .a1-text01{font-family: 'MaruBuriSemiBold'; font-size: 29px; letter-spacing: -0.06em; line-height: 1.724; color:#bcfff6; text-shadow:0px 2px 3px rgba(0, 0, 0, 0.2);}
.area01 .a1-text-wrap .a1-text02{margin-top:7px; padding-top:14px; border-top:2px solid #d5d6d6; font-family: 'Noto Sans KR'; font-weight: 400; font-size: 22px; letter-spacing: -0.02em; line-height: 1.545; color:#fff;}

.area02{margin-top:-90px; z-index: 2;}
.area02 .a2-title{margin-top:156px; font-family: 'HGGGothicssi_Pro'; font-weight: 800; font-size: 51px; letter-spacing: -0.03em; line-height: 1.47; color:#fff; text-align: center;}
.area02 .a2-text01{margin-top:16px; font-family: 'Noto Sans KR'; font-weight: 400; font-size: 20px; letter-spacing: -0.04em; line-height: 1.2; color:#fff; text-align: center;}
.area02 .a2-text02{margin-top:58px; font-family: 'Noto Sans KR'; font-weight: 400; font-size: 14px; letter-spacing: -0.04em; line-height: 1.2; color:#fff; text-align: center; animation: fadeLoop 0.8s infinite ease-in-out alternate;}
@keyframes fadeLoop {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.area02 .a2-box{position: absolute; bottom:0; left:50%; margin-left: -305px; width:610px; height: 626px;}
.area02 .a2-box::before{content: ""; position: absolute; top:0; left:0; width:2px; height:100%; background:#aaaaaa;}
.area02 .a2-box::after{content: ""; position: absolute; top:-16px; left:-9px; width:20px; height:20px; background:url('../images/a2-arrow.png');}
.area02 .a2-box .a2-scroll{margin-top:18px; padding:20px 0 90px; height: 100%; overflow-y: scroll; scrollbar-width: none; /*cursor: grab;*/}
.area02 .a2-box .a2-scroll::-webkit-scrollbar {display: none;}
/*.area02 .a2-box .a2-scroll:active{cursor: grabbing;}*/
.area02 .a2-box ul{display: flex; flex-direction: column; gap: 67px;}
.area02 .a2-box ul li{position: relative; display: flex; align-items: center; padding:0 28px; width:100%; height: 95px; background: #262626; rotate: -0.03deg;}
.area02 .a2-box ul li span.a2-date{display: flex; align-items: center; justify-content: center; position: absolute; top:-10px; left:0; width:183px; height: 28px; font-family: 'NanumSquareExtraBold'; font-size: 14px; letter-spacing: -0.04em; line-height: 1.642; color: #121212; background: #aaaaaa;}
.area02 .a2-box ul li div{display: flex; align-items: center; font-family: 'NanumSquareBold'; font-size: 18px; letter-spacing: -0.04em; line-height: 1.5; color:#fff; text-align: left;}

.area03{margin-top:-39px; z-index: 3;}
.area03 .a3-title{margin-top:160px; font-family: 'HGGGothicssi_Pro'; font-weight: 800; font-size: 53px; letter-spacing: 0.005em; line-height: 1.47; color:#222222; text-align: center;}
.area03 .a3-text01{margin-top:10px; font-family: 'Noto Sans KR'; font-weight: 400; font-size: 20px; letter-spacing: -0.04em; line-height: 1.2; color:#555555; text-align: center;}
.area03 .a3_cardArea{margin-top:112px; display:flex; justify-content: space-between;}
/* card에 heartbeat 사용 안함 */
.area03 .a3_cardArea .card {cursor:pointer; /*animation: heartbeat 3s 1s ease-in-out infinite; will-change: transform;*/}
/* inner에 flip */
.area03 .a3_cardArea .card-inner {display: inline-grid; transition: transform 0.5s; transform: perspective(800px) rotateY(0deg); transform-style: preserve-3d;}
.area03 .a3_cardArea .card.on .card-inner {transform: perspective(800px) rotateY(180deg);}
/* 애니메이션 중 or 하나라도 뒤집히면 heartbeat 정지 */
.area03 .a3_cardArea.stop .card,
.area03 .a3_cardArea .card.on,
.area03 .a3_cardArea .card.is-animating {animation: none;}
.area03 .card-front,
.area03 .card-back {backface-visibility: hidden; grid-area: 1 / 1;}
.area03 .card-back {transform: rotateY(180deg);}
@keyframes heartbeat {
    0%   { transform: scale(1); }
    8%   { transform: scale(1.008); }
    14%  { transform: scale(0.99); }
    20%  { transform: scale(1.01); }
    28%  { transform: scale(1); }
    100% { transform: scale(1); }
}
.area03 .a3_cardArea .card > * {grid-area: 1 / 1 / 1 / 1; backface-visibility: hidden;}
.area03 .a3_cardArea .card .card-front{ filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.2)); border-radius: 35px;}
.area03 .a3_cardArea .card .card-back {position: relative; filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.2)); transform: rotateY(180deg); }
/*.area03 .a3_cardArea .card .card-back > div{position: absolute; left:0; bottom:0; padding:15px 0 33px 30px; width:100%; min-height: 228px; font-family: 'MaruBuri'; font-size: 17px; letter-spacing: -0.04em; line-height: 1.764; color:#333; rotate: 0.05deg;}*/
.area03 .a3-text02{margin-top:38px; font-family: 'Noto Sans KR'; font-weight: 400; font-size: 20px; letter-spacing: -0.04em; line-height: 1.2; color:#555555; text-align: center;}

.pinArea{position: relative; z-index: 4;}
.area04{margin-top:-48px; z-index: 4;}
.area04 .a4-title{margin-top:145px; margin-left:348px; width:1032px; font-family: 'HGGGothicssi_Pro'; font-weight: 800; font-size: 53px; letter-spacing: 0.005em; line-height: 1.47; color:#fff; text-align: center;}
.area04 .a4-text{margin-top:10px; margin-left:348px; width:1032px; font-family: 'Noto Sans KR'; font-weight: 400; font-size: 20px; letter-spacing: -0.04em; line-height: 1.2; color:#cccccc; text-align: center;}
.area04 .a4-Btn{position:absolute; left:23px; top:787px; display: flex; align-items: center; padding:0 68px 0 62px; width: 380px; height: 163px; border-radius: 37.5px; background:#098d76;}
.area04 .a4b-text{font-family: 'HGGGothicssi_Pro'; font-weight: 600; font-size: 31px; letter-spacing: 0.01em; line-height: 1.5; color:#fff;}
.area04 .a4b-text > span{font-family: 'HGGGothicssi_Pro'; font-weight: 900; font-size: 45px; letter-spacing: 0.01em; color:#fff;}
.area04 .fbArrow{position: absolute; top:102px; right:68px; width:80px; height:12px}
.area04 .fbArrow svg.arrow1{position: absolute; left:0; width:98%; height: 12px; animation: scroll_motion 2.5s infinite; fill: none; stroke: #fff; stroke-width:2; stroke-miterlimit: 10;}
.area04 .fbArrow svg.arrow2{position: absolute; right:0; width:7px; height:12px; fill: none; stroke: #fff; stroke-width:2; stroke-miterlimit: 10;}
.area04 .div_movie {position: relative; margin-top:50px; margin-left: 348px; width: 1032px; aspect-ratio: 16/9; border-radius: 20px; overflow: hidden;}
.area04 .div_movie iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: translateZ(0);}
@keyframes scroll_motion {
    0% {
        left: 0;
        width: 0;
    }
    45% {
        left: 0;
        width: 98%;
    }
    55% {
        left: 0;
        width: 98%;
    }
    100% {
        left: 98%;
        width: 0;
    }
}

.area05{margin-top:-82px; z-index: 3;}
.area05 .a5-title{display: flex; align-items: center; margin-top:213px; width:max-content; margin-left: 30px; font-family: 'HGGGothicssi_Pro'; font-weight: 800; font-size: 53px; letter-spacing: 0.005em; line-height: 1.47; color:#222;}
.area05 .a5-title .a5-line{position: relative; display:block; margin:0 30px; width:100px;}
.area05 .a5-title .a5-line::after{content: ""; display: block; width:100%; height:2px; background:#000;}
.area05 .a5-text{margin-top:9px; margin-left: 30px; font-family: 'Noto Sans KR'; font-weight: 400; font-size: 20px; letter-spacing: -0.04em; line-height: 1.2; color:#555;}
.area05 .a5-step-wrap{position: relative;}
.area05 .a5-text span.a5text-box{display: inline-block; padding:2px; font:inherit; font-weight: 600; color:#fff; background:#333;}
.area05 .a5-step-wrap .a5-point01{position: absolute; top:32px; left:32px;}
.area05 .a5-step-wrap .a5-point02{position: absolute; top:480px; left:316px;}
.area05 .a5-step-wrap .a5-point03{position: absolute; top:400px; right:-56px;}
.area05 .a5-step-wrap ul{margin-top:92px; display: flex; flex-direction: row; gap:90px;}
.area05 .a5-step-wrap ul li.a5-step01{margin-top:83px;}
.area05 .a5-step-wrap ul li.a5-step02{margin-top:7px;}
.area05 .a5-step-wrap ul li.a5-step03{margin-top:80px;}
.area05 .a5-step-wrap ul li.a5-step05{margin-top:76px;}
.area05 .a5-step-wrap ul li .a5-setp-text{margin-top:32px; display: flex; justify-content: center; font-family: 'Noto Sans KR'; font-weight: 400; font-size: 20px; letter-spacing: -0.04em; line-height: 1.6; color:#555;}
.area05 .a5-bottom{position:relative; margin-top:64px; margin-left: 50px; font-family: 'Noto Sans KR'; font-weight: 400; font-size: 20px; letter-spacing: -0.04em; line-height: 1.2; color:#555;}
.area05 .a5-bottom .a5b-text-wrap{position: absolute; top:0; left:0; padding-left:457px; padding-top:64px; width:100%;}
.area05 .a5-bottom .a5b-text-wrap p{font-family: 'Noto Sans KR'; font-weight: 500; font-size: 18px; letter-spacing: -0.04em; line-height: 1.2; color:#222;}
.area05 .a5-bottom .a5b-text-wrap ul{margin-top:16px; display: flex; flex-direction: column; gap:9px;}
.area05 .a5-bottom .a5b-text-wrap ul li{position: relative; padding-left:17px; font-family: 'Noto Sans KR'; font-weight: 400; font-size: 16px; letter-spacing: -0.04em; line-height: 1.2; color:#555;}
.area05 .a5-bottom .a5b-text-wrap ul li::before{content: ""; position: absolute; top:7px; left:0; width:5px; height:5px; background:#000;}

.area06 .a6-text{margin-top:99px; width:100%; font-family: 'HGGGothicssi_Pro'; font-weight: 600; font-size: 29px; letter-spacing: 0.004em; line-height: 1.75; color:#333; text-align: center;}
.area06 .a6-text span{font-family: 'HGGGothicssi_Pro'; font-weight: 800; font-size: 50px; letter-spacing: 0; color:#da291c;}
.area06 ul.a6-info{display: flex; justify-content: center; gap:12px; margin-top:62px;}
.area06 ul li{position: relative; padding:14px 18px 0; width:236px;}
.area06 ul li::before{content: ""; position: absolute; top:0; left:0; width:100%; height:115px; background:url('../images/a6-topRound.png');}
.area06 ul li .a6-circle{display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; width:200px; height:200px; background:#fff; border:1px dashed #9d7e57; border-radius: 50%; box-sizing: content-box;}
.area06 ul li .a6-circle .a6-iText{font-family: 'NanumSquareBold'; font-size: 16.78px; letter-spacing: -0.04em; line-height: 1.443; color:#555; text-align: center;}

.area07{padding-top:18px; background:#eee;}
.area07 .div-inner{display:flex; justify-content:space-between; padding-top:18px;}
.area07 .a7-left .a7-title{margin-top:81px; margin-left:-19px; padding-left:15px; display:flex; align-items:center; height:72px; font-family:'HGGGothicssi_Pro'; font-weight:800; font-size:29px; letter-spacing:0.005em; line-height:1.482; color:#333; border-left:4px solid #da291c;}

.area07 .a7-right{pointer-events:none;}
.area07 .a7-right .a7-comment{pointer-events:auto; margin-right:-12px;}
.area07 .a7-comment{overflow-y:scroll; height:854px; touch-action:none; pointer-events:none; position:relative;}
.area07 .a7-comment::-webkit-scrollbar{display:none;}
.area07 .comment-item{display:flex; padding:15px 0; height:auto;}
.area07 .comment-item .comment-card{display:flex; flex-direction:column; width:300px; height:300px; background:#fff; padding:32px 28px; border-radius:12px;}
.area07 .comment-item .comment-card-none{background:none; box-shadow:none;}
.area07 .comment-item .comment-card + .comment-card{margin-left:20px;}
.area07 .comment-item .comment-card:first-of-type{margin-top:-118px;}
.area07 .comment-item .comment-card .card-head{display:flex; align-items:center; font-size:14px;}
.area07 .comment-item .comment-card .card-title{font-family:'SpoqaHanSansNeo'; font-weight:500; font-size:15px; letter-spacing:-0.03em; color:#222;}
.area07 .comment-item .comment-card .card-type{font-family:'SpoqaHanSansNeo'; font-weight:500; font-size:15px; letter-spacing:-0.03em; color:#da291c; margin-left:4px;}
.area07 .comment-item .comment-card .card-body{margin-top:18px; font-family:'SpoqaHanSansNeo'; font-weight:400; font-size:18px; letter-spacing:-0.03em; line-height:1.444; color:#222;}

.area08 {padding:110px 0 66px; position:relative; background:url('../images/a8-bg.jpg')center top / 1920px 1140px; text-align:center;}
.area08 .txt-h02 {font-family: 'HGGGothicssi_Pro'; font-weight: 800; font-size: 53px; letter-spacing: 0; margin-bottom:32px; color:#2c1d11;}
.area08 .txt-h02 .color {font:inherit; color:#da291c;}
.area08 .txt-h02 + .txt-body03 {font-family: 'Noto Sans KR'; font-weight: 400; font-size: 22px; letter-spacing: -0.04em; line-height: 1.77; color:#2c1d11;}
.area08 .meal_area {height:578px;}
.area08 .meal_set_area {position:relative; margin:0 auto; height:425px;}
.area08 .meal_set_area .kover10 {display:inline-block; position:absolute; top:7px; left: 50%; transform: translateX(-50%); padding:10px 5px; min-width:126px; height: 67px; line-height:47px;font-family:'S-Core',sans-serif; font-weight:500; font-size:40px; color:#fff;text-align:center;transition:0.4s;opacity:0; background: rgba(0,0,0,0.5);border-radius:20px;z-index:10;}
.area08 .meal_set_area .kover10.on {opacity:1;}
.area08 .meal_set_area ul{display: flex; justify-content: center; align-items: center; flex-direction: row; height: 100%;}
.area08 .meal_set_area ul li{width:0; transition:opacity 0.4s, transform 0.4s; transform: translateY(-20px); opacity:0; filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.3));}
.area08 .meal_set_area ul li.on{margin-left:-195px; width:274px; transform: translateY(-7px); opacity:1;}
.area08 .meal_set_area ul li.hide{display:none;}
.area08 .meal_set_area ul li.pos1{margin-left:0 !important;}
.area08 .meal_count_area {display:flex; align-items:center; width:900px; padding-left:100px; margin-inline:auto; color:#2c1d11;}
.area08 .meal_count_area .meal_package{font-family: 'S-Core'; font-weight: 400; font-size: 32px; letter-spacing: -0.025em; line-height: 1.625; color:#2c1d11;}
.area08 .meal_count_area .k_food{position:relative;max-width:300px;min-width:257px;height:88px;margin:0 40px;padding:0 75px;border-radius:44px;background:#fff;box-shadow:5px 5px 10px rgba(0, 0, 0, 0.13);overflow:hidden;}
.area08 .input-box {display:inline-flex;align-items:center;height:100%;}
.area08 .input-box .ea{font-family: 'S-Core'; font-weight: 400; font-size: 32px; letter-spacing: -0.025em; line-height: 1.625; color:#2c1d11;}
.area08 .meal_count_area input {font-family: 'S-Core'; font-weight: 400; font-size: 32px; letter-spacing: -0.025em; line-height: 1.625; color:#2c1d11; width:3ch; height:100%;outline:none;background:#fff;text-align:center;color:#2c1d11;}
.area08 .meal_count_area input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin: 0;}
.area08 .meal_count_area button {width:48px;height:48px;position:absolute;top:21px;cursor:pointer;}
.area08 .meal_count_area .btn-plus{background:url('../images/a8-plus.png')no-repeat center;right:19px;}
.area08 .meal_count_area .btn-minus{background:url('../images/a8-minus.png')no-repeat center;left:19px;}
.area08 .meal_result {display: inline-block; min-width: 204px; font-family: 'S-Core'; font-weight: 600; font-size: 38px; letter-spacing: -0.025em; color:#da291c; text-align: left;}
.area08 .meal_result span.meal_price{font:inherit;}
.area08 .btn-meal01 {display: flex; align-items: center; justify-content: center; width:570px; height:109px; margin-inline:auto;padding:25px; border-radius:55px; background:#4390ae; text-align:center;}
.area08 .btn-meal01 > span {font-family: 'HGGGothicssi_Pro'; font-weight: 600; font-size:32px; letter-spacing: 0; color:#fff;}

.copy-area {padding:26px 0; background:#f4f4f4;}
.copy-area p {font-size:19px; text-align:center; color:#333;}

/*float-type1*/
.float-area {position:fixed; right:-300px; bottom:10%; z-index:10; opacity:0; transition:.5s; filter: drop-shadow(0px 5px 3px rgba(0, 0, 0, 0.5));}
.float-area.on {right:2%;opacity:1}
.float-area a.float-btn {position:relative; display:block; width:188px;}
.float-area a.float-btn span.float-img{display: block; position: relative; width:100%; height:200px; background:#fff; border-radius:20px 20px 0 0; overflow:hidden;}
.float-area a.float-btn span.float-img img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.5s ease-in-out;}
.float-area a.float-btn span.float-img .active{opacity: 1;}
.float-area a.float-btn span.float-text {display: flex; align-items: center; justify-content: center; width:100%; height:103px; border-radius:0 0 20px 20px; font-family: 'HGGGothicssi_Pro'; font-weight: 600; font-size:28px; letter-spacing: -0.025em; line-height: 1.392; color:#fff; text-align: center; background:#098d76;}

/*float-type2*/
.float-area-type2 {display: flex; align-items: center; justify-content: flex-end; position:fixed; right:50%; transform: translateX(50%); bottom:-200px; width:1410px; height: 120px; z-index:10; opacity:0; transition:width .3s, bottom .3s, opacity 0.5s; background:#333333; border-radius: 60px; filter: drop-shadow(0px 5px 3px rgba(0, 0, 0, 0.5)); overflow:hidden;}
.float-area-type2.on {opacity:1; bottom:20px;}
.float-area-type2 .float-img{display: block; position: absolute; top:0; left:-1px; width:278px; height: 120px; overflow:hidden;}
.float-area-type2 .float-img img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; /*opacity: 0; transition: opacity 1.5s ease-in-out;*/ opacity: 1;}
.float-area-type2 .float-img .active{opacity: 1;}

.float-area-type2 .floatSwiper{margin-right:40px; width:840px; padding-top:32px; height: 100%;}
.float-area-type2 .floatSwiper .swiper-slide{opacity: 0 !important;}
.float-area-type2 .floatSwiper .swiper-slide.swiper-slide-active {opacity: 1 !important;}
.float-area-type2 .floatSwiper .float-text {font-family: 'MaruBuriSemiBold'; font-size:17px; letter-spacing: -0.025em; line-height: 1.8125; color:#eee; opacity:1; transition:.5s; z-index: 11;}
.float-area-type2 .floatSwiper .float-text span{display: inline-block; margin-left:30px; font-family: 'Noto Sans KR'; font-weight:400; font-size: 17px; letter-spacing: -0.025em; line-height: 1.8125; color:#ccc;}

.float-area-type2 a.float-btn {position:relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-right:23px; width:266px; height:80px; font-family: 'HGGGothicssi_Pro'; font-weight: 600; font-size:27px; letter-spacing: 0; line-height: 1.392; color:#fff; text-align: center; border-radius:39.5px; background:#098d76;}

.float-area-type2.trans{width:450px; right:2%; bottom:unset; top:5.5%; transform: translateX(0);}
.float-area-type2.trans .floatSwiper{opacity: 0; min-width:0;}