/* 메인 WORK 영역 */
.main_visual_wrap {transition: 1s; opacity: 0; position: relative; left: -50px; margin-bottom: 130px;}
.main_visual_wrap.fade-in {opacity: 1; left: 0;}
.main_visual_wrap_r{transition: 1s; opacity: 0; position: relative; right: -50px; margin-bottom: 130px; text-align: right;}
.main_visual_wrap_r.fade-in {opacity: 1; right: 0; }
#main_box img{max-width: 98%; height:auto;}
#main_box img{position: relative; }
#main_box .img_bg{position: relative; display: inline-block; width:100%;}
#main_box .img_bg::before{position: absolute; right:0; bottom:-44px; display:block; background-color:#ffe9de; width:calc(100% - 50px); height:calc(100% - 44px); border-radius: 0 0 0 50px; content:'';  opacity: 1; right: 0;}
#main_box .bg02 img{position: relative; }
#main_box .bg02 .img_bg{position: relative; display: inline-block; width:100%;}
#main_box .bg02 .img_bg::before{position: absolute; left:0; bottom:-44px; display:block; background-color:#e8eff5; width:calc(100% - 50px); height:calc(100% - 44px); border-radius: 0 0 50px 0; content:'';  opacity: 1; right: 0;}
#main_box .bg03 .img_bg::before{background-color:#ececec;}
 
#main_box{position: relative;}
#main_box .box_text{position: absolute; bottom: 63px; width: 100%; padding:0 110px; text-align: left;}
#main_box .box_text .box_tit{ position: absolute; bottom: 0;}
#main_box .box_text .box_tit h2{font-size: 75px; font-weight: 900; color: transparent; -webkit-text-stroke: 2px #fff;}
#main_box .box_text .box_tit h2 strong{font-size: 100px; margin-right:-9px; }
#main_box .box_text .box_con{float: right; }
#main_box .box_text .box_con p{color: #fff;}
#main_box .box_text .box_con p.num{text-align: right;}
#main_box .box_text .box_con p.num strong{font-size: 40px; border:2px solid #fff; width:50px; height:50px; border-radius: 50px;  display: inline-block; text-align: center; vertical-align: super;}
#main_box .box_text .box_con p.num span{font-size: 60px; font-weight: 700; margin-left: 21px;}
#main_box .box_text .box_con p.mal{background-color: rgba(0,0,0,0.4);  padding:23px 32px; border-radius: 50px 0 50px 50px; margin-top: 10px;}

@media all and (max-width:1000px){
    .main_visual_wrap{margin-bottom: 70px;}
    .main_visual_wrap_r{margin-bottom: 70px;}
    #main_box .box_text{padding:0 50px; bottom:17px;}
    #main_box .box_text .box_tit h2{font-size: 55px;}
    #main_box .box_text .box_tit h2 strong{font-size: 80px; }
    #main_box .box_text .box_con p.num strong{font-size: 25px; width:40px; height:40px; line-height: 40px;}
    #main_box .box_text .box_con p.num span{font-size: 40px; margin-left: 7px;}
    #main_box .box_text .box_con p.mal{font-size: 13px;}
}

@media all and (max-width:800px){
    #main_box .bg01 .img_bg::before{bottom:-21px;}
    #main_box .bg02 .img_bg::before{bottom:-21px;}
    #main_box .bg03 .img_bg::before{bottom:-21px;}
    #main_box .box_text{padding:0 30px;}
    #main_box .box_text .box_tit h2{font-size: 40px;}
    #main_box .box_text .box_tit h2 strong{font-size: 50px; margin-right: -4px;}
    #main_box .box_text .box_con p.num strong{font-size: 18px; width:25px; height:25px; line-height: 25px;}
    #main_box .box_text .box_con p.num span{font-size: 30px; margin-left: 5px;}
    #main_box .box_text .box_con p.mal{font-size: 13px; padding: 17px 28px;}
}

@media all and (max-width:600px){
    #main_box .box_text{padding:0 15px;}
    #main_box .box_text .box_tit h2{font-size: 30px;}
    #main_box .box_text .box_tit h2 strong{font-size: 40px; }
    #main_box .box_text .box_con p.num strong{font-size: 15px; width:20px; height:20px; line-height: 20px;}
    #main_box .box_text .box_con p.mal{font-size: 12px; padding: 17px 20px;}
}

@media all and (max-width:530px){
    .main_visual_wrap{margin-bottom: 31px;}
    .main_visual_wrap_r{margin-bottom: 31px;}
    #main_box .box_text{padding:0 13px;}
    #main_box .box_text{bottom:6px;}
    #main_box .box_text .box_tit h2{font-size: 17px; -webkit-text-stroke: 0; color: #fff; margin-left: 10px; letter-spacing: 3px; }
    #main_box .box_text .box_tit h2 strong{font-size: 28px; }
    #main_box .box_text .box_con p.num span{font-size: 23px;}
    #main_box .box_text .box_con p.num strong{display:none;}
    #main_box .box_text .box_con p.mal{font-size: 11px; margin-top: 0; padding:6px 6px; border-radius: 5px 0 10px 5px; background: none; text-align: right;}
}


/* 공지사항 영역 */
#notice{margin-top:100px; height:auto;}
.notice {margin-top: 20px;}
.notice .notice-box {display: flex; align-items: center; border-top: 1px solid #dddddd; padding: 2.7% 4%; }
.notice .notice-box .notice-tit {width: 12%; font-size: 25px;  color: #646464; text-transform: uppercase;}
.notice .notice-box .notice-tit strong{font-weight: 900;}
.notice .notice-box .notice-list {width: calc(100% - 19%); display: flex; justify-content: space-between;}
.notice .notice-box .notice-list .notice-item {width: 48%; display: flex; align-items: center;}
.notice .notice-box .notice-list .notice-item a:hover{color:#9a9a9a !important; transition: all 0.3s ;} /*효과 추가하기*/
.notice .notice-box .notice-list .notice-item.line{position: relative;}
.notice .notice-box .notice-list .notice-item.line::before{content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 67px;  background-color: #ececec;}}
.notice .notice-box .notice-list .notice-item .item-img {width: 28px; margin-right: 10px;}
.notice .notice-box .notice-list .notice-item .item-txt {display: inline-block; width: 77%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 20px;  color: #828282;}
.notice .notice-box .notice-list .notice-item .item-txt.list01{font-size: 23px; font-weight: 700; color: #646464;}
.notice .notice-box .notice-list .notice-item .item-txt.list01 .new{font-size: 15px;font-weight: 500;color:#fff;background-color: #ee5555;width: 27px; line-height:27px;display: inline-block;vertical-align: middle;text-align: center;border-radius: 50px; margin-right:5px;}
.notice .notice-box .notice-list .notice-item .item-date {font-size: 16px;  margin-left: 20px; opacity: 0.7; color: #646464; font-weight: 500;}
.notice .notice-box .notice-option {/*display: inline-flex; justify-content: flex-end; align-items: center;*/ width: 7%;}
.notice .notice-box .notice-option .no-txt {font-size: 15px; font-weight: 600; color: #9a9a9a; background-color: #e7e7e7; padding:11px 35px; border-radius: 50px;}
.notice .notice-box .notice-option .no-txt:hover{background-color: #ee5555; color: #fff; transition: all 0.3s ;}
.notice .notice-box .notice-option .no-img {margin-left: 12px;}

@media all and (max-width:1250px){
    .notice .notice-box .notice-list{width: calc(100% - 16%);}
    .notice .notice-box .notice-tit{font-size: 19px; width:10%;}
    .notice .notice-box .notice-list .notice-item .item-txt{font-size: 16px;}
    .notice .notice-box .notice-list .notice-item .item-txt.list01{font-size: 18px;}
    .notice .notice-box .notice-list .notice-item .item-date{font-size: 14px;}
    .notice .notice-box .notice-option{width:6%;}
    .notice .notice-box .notice-option .no-txt{padding:5px 15px;}
    .notice .notice-box .notice-list .notice-item .item-txt{width:70%;}
}

@media all and (max-width:1000px){
    .list02{display: none !important;}
    .notice .notice-box .notice-tit{width:13%;}
    .notice .notice-box .notice-list{width: calc(100% - 22%);}
    .notice .notice-box .notice-tit{font-size: 15px;}
    .notice .notice-box .notice-list .notice-item .item-date{margin-left: 0;}
    .notice .notice-box .notice-list .notice-item .item-txt.list01{font-size: 15px;}
    .notice .notice-box .notice-list .notice-item .item-txt{width:82%; font-size: 14px;}
    .notice .notice-box .notice-list .notice-item{width:100%;}
    .notice .notice-box .notice-list .notice-item.line::before{background: none;}
}
@media all and (max-width:800px){
    #notice{margin-top: 50px;}
}

@media all and (max-width:600px){
    .notice .notice-box .notice-tit{width:18%;}
    .notice .notice-box .notice-list{width: calc(100% - 31%);}
    .notice .notice-box .notice-list .notice-item .item-date{display: none;}
    .notice .notice-box .notice-list .notice-item .item-txt.list01 .new{width:20px; line-height: 20px; font-size: 11px;}
}

@media all and (max-width:430px){
    .notice .notice-box .notice-tit{width:22%;}
    .notice .notice-box .notice-list{width: calc(100% - 38%);}
}


/* 필봇 로봇 영역 */
#feelbot_st{background-image: url(../images/main_img04.jpg) ; background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover;
 -moz-background-size: cover; -o-background-size: cover; background-size: cover; width:100%; height:600px; position: relative;}
#feelbot_st::after{background-image: url(../images/bg_img01.png); position: absolute; right: 0; top: 0; width: 418px; height: 640px; content: '';}
.feelbot_box{padding: 96px 0 0 88px;}
.feelbot_box .feelbot_tit{/* width: 300px; */}
.feelbot_box .feelbot_tit span{display: block; font-size: 50px; color:#fff; font-family: 'Black Han Sans', sans-serif; line-height: 60px;}
.feelbot_box .feelbot_tit .tit01{color: #ffe594;}
.feelbot_box .feelbot_text p{margin-top: 9px; color: #fff; font-size: 20px; line-height: 24px;}
.feelbot_bu{position: absolute;left: 0;top:121px;width: 100%;height:400px;max-width: 100%;text-align: center;}
.feelbot_bu .feelbot_lo .bot_text p{position: relative; font-size: 16px; color: #2c2c2c; display: inline-block; background-color: #ffe8a0; padding:11px 34px; border-radius: 50px;}
.feelbot_bu .feelbot_l{position: absolute;left: 24.8%;top: 0;width: 50%;height: auto;}
.feelbot_bu .feelbot_r{position: absolute;right: 26.5%;top: 0;width: 50%;height: auto;}
.feelbot_bu .feelbot_l .bot_text p::before{position: absolute; top: 17px; right: -14px; width: 9px; height: 9px; background-color: #ffe8a0; border-radius: 50px; content: '';}
.feelbot_bu .feelbot_r .bot_text p::before{position: absolute; top: 17px; left: -14px; width: 9px; height: 9px; background-color: #ffe8a0; border-radius: 50px; content: '';}
.feelbot_bu .feelbot_l .text01{position: absolute; left:126px; top:49px; }
.feelbot_bu .feelbot_l .text02{position: absolute; left:51px; top:176px;}
.feelbot_bu .feelbot_l .text03{position: absolute; left:139px; top:300px;}
.feelbot_bu .feelbot_r .text01{position: absolute; right:139px; top:0;}
.feelbot_bu .feelbot_r .text02{position: absolute; right:56px; top:118px;}
.feelbot_bu .feelbot_r .text03{position: absolute; right:-55px; top:235px;}
.feelbot_bu .feelbot_lo .bot_text .tool_pc{cursor: default;}
.feelbot_bu .feelbot_lo .bot_text .tool_m{display: none;}
.feelbot_bu .feelbot_lo .bot_text .tool {position: relative;}
.feelbot_bu .feelbot_lo .bot_text .tool::before,
.feelbot_bu .feelbot_lo .bot_text .tool::after {left: 50%; opacity: 0; position: absolute; z-index: -100;}
.feelbot_bu .feelbot_lo .bot_text .tool:hover::before,
.feelbot_bu .feelbot_lo .bot_text .tool:focus::before,
.feelbot_bu .feelbot_lo .bot_text .tool:hover::after,
.feelbot_bu .feelbot_lo .bot_text .tool:focus::after {opacity: 1; transform: scale(1) translateY(0); z-index: 100; } 
.feelbot_bu .feelbot_lo .bot_text .tool::before {border-style: solid; border-width: 1em 0.75em 0 0.75em; border-color: #4d4d4d transparent transparent transparent; bottom: 100%; content: ""; margin-left: -0.7em; transition: all .65s cubic-bezier(.84,-0.18,.31,1.26), opacity .65s .5s; transform:  scale(.6) translateY(-90%);} 
.feelbot_bu .feelbot_lo .bot_text .tool:hover::before,
.feelbot_bu .feelbot_lo .bot_text .tool:focus::before {transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;}
.feelbot_bu .feelbot_lo .bot_text .tool::after {background: #4d4d4d; border-radius: 40px; bottom: 180%; color: #EDEFF0; content: attr(data-tip); margin-left: -8.75em; padding: 1em; transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s; transform:  scale(.6) translateY(50%);   width: 17.5em;}
.feelbot_bu .feelbot_lo .bot_text .tool:hover::after,
.feelbot_bu .feelbot_lo .bot_text .tool:focus::after  {transition: all .65s cubic-bezier(.84,-0.18,.31,1.26);}

@media all and (max-width:1720px){
    #feelbot_st::after{background-image: none; width: 0;}
    .feelbot_box .feelbot_tit span{font-size: 40px; line-height: 45px;}
    .feelbot_box .feelbot_text p{font-size: 16px;}
    .feelbot_bu .feelbot_l{left: 22.8%;}
    .feelbot_bu .feelbot_r{right: 24.5%;}
}

@media all and (max-width:1400px){
    .feelbot_bu .feelbot_lo .bot_text .tool_m{display: block; font-weight: 700;}
    .feelbot_bu .feelbot_lo .bot_text .tool_pc{display: none;}
    .feelbot_bu .feelbot_lo .bot_text p{padding: 10px; width: 40px; height: 40px;}
    .feelbot_bu .feelbot_l .bot_text p::before{background: none;}
    .feelbot_bu .feelbot_r .bot_text p::before{background: none;}
    .feelbot_bu .feelbot_l{left:26.8%;}
    .feelbot_bu .feelbot_r{right:27%;}
    .feelbot_bu .feelbot_r .text02{right:107px;}
    .feelbot_bu .feelbot_r .text03{right:51px;}
}

@media all and (max-width:1150px){
    .feelbot_box{padding: 40px 0 0 40px;}
    .feelbot_bu .feelbot_lo .bot_text p{padding: 10px; width: 40px; height: 40px;}
    .feelbot_bu .feelbot_l{left:26.8%;}
    .feelbot_bu .feelbot_l .text01{left:93px;}
    .feelbot_bu .feelbot_l .text02{left:26px;}
    .feelbot_bu .feelbot_r{right:27%;}
    .feelbot_bu .feelbot_r .text01{right:115px;}
    .feelbot_bu .feelbot_r .text02{right:81px;}
}

@media all and (max-width:900px){
    .feelbot_bu{top:137px;}
    .feelbot_box .feelbot_tit span{display: inline-block; font-size: 30px;}
    .feelbot_box .feelbot_text p{margin-top: 0;}
    .feelbot_box .feelbot_text p br{display: contents;}
    .feelbot_bu .feelbot_l{left:15.8%;}
    .feelbot_bu .feelbot_r{right:15%;}
}

@media all and (max-width:700px){
    .feelbot_bu .feelbot_lo .bot_text .tool::after{font-size: 13px; width: 9.5em; margin-left: -5.75em;}
}

@media all and (max-width:640px){
    .feelbot_box{padding: 30px 0 0 20px;}
    .feelbot_box .feelbot_tit span{font-size: 23px; line-height: 23px;}
    .feelbot_box .feelbot_text p{font-size: 14px;}
    .feelbot_bu .feelbot_l{left:7.8%;}
    .feelbot_bu .feelbot_r{right:6%;}
}

@media all and (max-width:500px){
    .feelbot_bu .feelbot_l{left: 38px;}
    .feelbot_bu .feelbot_l .text03{left:90px;}
    .feelbot_bu .feelbot_r{right:22px;}
    .feelbot_bu .feelbot_r .text01{right:112px;}
    .feelbot_bu .feelbot_r .text02{right:80px;}
    .feelbot_bu .feelbot_r .text03{right:38px;}
}

@media all and (max-width:370px){
    .feelbot_bu .feelbot_l{left:23px;}
    .feelbot_bu .feelbot_l .text02{left: 38px; right: 65px;}
    .feelbot_bu .feelbot_r{top: 9px;}
    .feelbot_box .feelbot_text p br{display: block;}
    .feelbot_bu .feelbot_lo .bot_text p{padding: 2px; width: 25px; height: 25px;}
}


/* 고객지원 (문의, 오시는 길) */
#customer{position: relative; background: #3fcfa8; width: 100%; height:130px; margin-top: -41px; border-radius: 50px 50px 0 0;}
#customer::before{background: #2abe96; width: 50px; height: 100%; border-radius: 50px 0 0 0; position: absolute; left: 0; top: 0; z-index: 1; content: '';}
#customer::after{background: #2abe96; width: 50px; height: 100%; border-radius: 0 50px 0 0; position: absolute; right: 0; top: 0; z-index: 1; content: '';}
.customer_list{text-align: center;}
.customer_list ul{display: inline-block; width:95%;}
.customer_list ul li{position: relative; width: 50%; float: left; text-align: center;}
.customer_list ul li::before{content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 52px; background-color: #fff;}
.customer_list ul li:last-child::before{background: none;}
.customer_list ul li a{width:100%; display: inline-block; font-size: 30px; line-height:130px; color: #fff;}
.customer_list ul li a i{font-size: 40px;}

@media all and (max-width:1150px){
    .customer_list ul li a{font-size: 20px;}
    .customer_list ul li a i{font-size: 30px;}
}

@media all and (max-width:600px){
    #customer{height:87px;}
    #customer::before{background: none;}
    #customer::after{background: none;}
    .customer_list ul{width:100%;}
    .customer_list ul li::before{height:20px;}
    .customer_list ul li a{font-size: 17px; line-height: 87px;}
    .customer_list ul li a i{font-size: 20px;}
}