@charset "utf-8";

/* header */
#header {width: 120px;height: 100vh;
  /* height:calc(var(--vh, 1vh) * 100); */
  display: flex;flex-direction: column;align-items: center;justify-content: space-between;padding: 5rem 0;position: fixed;top: 0;left: 0;opacity: 0;transition: opacity .3s;}
#header.on {opacity: 1;}
#header nav {width: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.nav-btn {transition: transform .3s;padding: 2rem 0;}
.nav-btn.open {transform: rotate(135deg);}
.nav-menu {display: none;}
.nav-menu>li {font-family: 'Montserrat';text-align: center;writing-mode: vertical-lr;transform: rotate(180deg);font-size: 1.4rem;font-weight: 500;padding: 3rem 0;}
.nav-menu>li>a {color: #999;transition: color .3s;}
.nav-menu>li>a:hover {color: #53b5e4;}
.btn-scroll {animation: scrollDown 0.6s infinite alternate ease-in-out;margin-bottom: 2.9rem;}
.btn-scroll img {transform: rotate(180deg);}

@keyframes scrollDown {
  0% {transform: translateY(0);}
  100% {transform: translateY(-1.5rem);}
}

.scrollLock {overflow: hidden;}

#cursor {position: fixed;z-index: 9999;left: 0;top: 0;pointer-events: none;}
#cursor .cursor__circle {width: 2.8rem;height: 2.8rem;border-radius: 50%;background: transparent;border: solid 3px #54B5E3;position: relative;z-index: 9999;display: flex;align-items: center;justify-content: center;margin-top: -50%;margin-left: -50%;opacity: 0;}
#cursor .cursor__circle::before {font-family: 'Montserrat';font-weight: 500;color: #fff;}
#cursor.none .cursor__circle {display: none;}
#cursor.works .cursor__circle {width: 18.6rem;height: 6.5rem;border-radius: 3.25rem;background: #54B5E3;margin-top: 0;margin-left: -50%;}
#cursor.works .cursor__circle::before {content:'View Works';font-size: 1.6rem;}
#cursor.works .cursor__circle::after {content:'';display: block;width: 1.3rem;height: 1.3rem;background: url(../images/ico_viewmore.svg) no-repeat;background-size: contain;margin-left: 1rem;}
#cursor.drag .cursor__circle {width: 6.5rem;height: 6.5rem;background: #54B5E3;transition: width .2s, height .2s;}
#cursor.drag .cursor__circle::before {content:'';display: block;width: 1.8rem;height: 1.8rem;border-top: .3rem solid #fff;border-right: .3rem solid #fff;box-sizing: border-box;transform: rotate(225deg);margin-left: .5rem;}
#cursor.drag.dragR .cursor__circle::before {transform: rotate(45deg);margin-left: -.5rem;}
/* #cursor.recruit {mix-blend-mode: normal!important;}
#cursor.recruit .cursor__circle {width: 16rem;height: 5rem;border-radius: 0.8rem;background: #54B5E3;border: 0;margin-top: 0;margin-left: 0;transition: width .2s, height .2s;}
#cursor.recruit .cursor__circle::before {content:'RECRUIT';font-size: 1.5rem;} */

.portfolio-view-list a, [data-cursor="drag"], .story-container .swiper-slide>a {cursor: none;}

.wrap {position: relative;overflow: hidden;}
.container {width: calc(100% - 12rem);margin-left: 12rem;overflow: hidden;}
.section>.inner {max-width: 152rem;margin: 0 auto;}
.sec-title {font-size: 7.4rem;font-family: 'Montserrat';font-weight: 500;letter-spacing: -.296rem;max-width: 152rem;margin: 0 auto;}
.sec-text {font-size: 1.6rem;line-height: 1.5;}
 
#btn_top {position: fixed;right: 2rem;bottom: 5.8rem;z-index: 99;width: 3.4rem;height: 2.4rem;display: none;}
#btn_top>img {width: 100%;object-fit: contain;}

/* main */
.section-main {height: 100vh;position: relative;overflow: hidden;background: url(../images/main/main_bg.jpg) no-repeat 50% 50%;background-size: cover;}
.section-main>.inner {height: 100%;padding: 12rem 0 10rem;display: flex;flex-direction: column;}
.main-title01 {font-family: 'Montserrat';font-weight: 500;font-size: 11rem;color: #fff;letter-spacing: -.55rem;}
.main-title01>strong {font-weight: 700;color: #54B5E3;letter-spacing: 0;} 
.main-title02 {font-family: 'Montserrat';font-weight: 100;font-size: 6rem;color: #999;letter-spacing: -.3rem;}

.main-award_wrap {margin-top: 1.5rem;}
.main-award-tit {font-family: 'Montserrat','Pretendard';font-size: 1.6rem;color: #fff;font-weight: 500;display: flex;align-items: center;margin-top: 3rem;}
.main-award-tit::before,
.main-award-tit::after {content:'';display: block;width: 1.3rem;height: 3rem;}
.main-award-tit::before {background: url(../images/main/bracket_l.png) no-repeat;background-size: contain;margin-right: .3rem;}
.main-award-tit::after {background: url(../images/main/bracket_r.png) no-repeat;background-size: contain;margin-left: 0.3rem;}
.main-award {display: flex;flex-wrap: wrap;}
.main-award.clone {display: none;}
.main-award>ul {display: flex;flex-wrap: wrap;position: relative;padding-left: 5.5rem;margin: .6rem 0;}
.main-award>ul::before {content:'';display: block;width: 3.9rem;height: 3.9rem;position: absolute;top: -.3rem;left: 0;}
.main-award_wa {margin-right: 2rem;}
.main-award_if {width: 100%;}
.main-award_wa::before {background: url(../images/main/main_wa_ico.png) no-repeat;background-size: contain;}
.main-award_aa::before {background: url(../images/main/main_aa_ico.png) no-repeat;background-size: contain;}
.main-award_if::before {background: url(../images/main/main_if_ico.png) no-repeat;background-size: 3.6rem 3.6rem;background-position: 0 50%;}
.main-award>ul>li {font-size: 1.6rem;color: #F9F9F9;letter-spacing: -.1rem;padding: 0 1.6rem;line-height: 2.4rem;border-radius: 5rem;margin: .5rem;flex-shrink: 0;padding-left: 0;}
.main-award>ul>li>a {color: #F9F9F9;}
.main-award>ul>li>b {font-weight: 800;}
.main-award_client {display: inline-block;margin-right: 1rem;border-radius: 5rem;color: #fff;padding: 0 1rem;font-weight: 700;font-size: 1.5rem;}
.award_doosan,
.award_weve {background: #005eb7;}
.award_unicef {background: #1cabe2;}
.award_eudi {background: #79bd28;}

.main-year {margin-top: auto;}
.main-mov_wrap {display: flex;} 
.mov-year_wrap {flex-shrink: 0;position: relative;padding-bottom: 2rem;}
.mov-line {display: block;width: 0;height: 0.6rem;background: #fff;opacity: 0;margin-top: auto;margin-bottom: 6.5rem;}
.mov-year {opacity: 0;transform: scale(0.5);}
.digits {display: flex;}
.digit {position: relative;height: 24rem;overflow: hidden;font-family: 'Merriweather';font-weight: 700;font-size: 24rem;color: #fff;}
.digit p {line-height: 22rem;height: 24rem;letter-spacing: -.72rem;}
.change_digit {position: relative;color: #54B5E3;display: none;}
.since_digit {display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;}
.mov-text {font-size: 1.7rem;font-weight: 300;color: #fff;letter-spacing: -.136rem;position: absolute;left: 0;bottom: 0;opacity: 0;}
.mov-text>strong {display: inline-block;font-weight: 700;color: #54b5e3;position: relative;}
.mov-text>strong::before {content:'';display: block;width: calc(100% + .4rem);height: .8rem;background:rgba(84, 182, 227,.2);position: absolute;bottom: -.2rem;left: -.2rem;}
.mov-text_begin {transform: translateX(-5rem);}

/* work */
.section-portfolio {padding: 10rem 0 14rem;}
.section-portfolio .sec-title,
.section-portfolio .sec-text {margin-left: 12rem;}
.section-portfolio .sec-text {color: #777;margin-top: 1.3rem;}
.section-portfolio .sec-text>strong {color: #53B6E4;}
.portfolio-category {text-align: center;}
.portfolio-category .mb-menu {display: none;}
.portfolio-category>ul {display: inline-flex;justify-content: center;align-items: center;border: 1px solid #E8E8E8;border-radius: 5rem;height: 5.4rem;margin: 7rem 0;max-width: 115.7rem;width: 100%;}
.portfolio-category li {font-family: 'Montserrat';font-weight: 500;letter-spacing: -0.64px;font-size: 16px;cursor: pointer;text-transform: capitalize;flex: auto;}
.portfolio-category li.on {font-weight: 700;color: #53b5e2;border: .2rem solid #53b5e2;border-radius: 5rem;height: 100%;line-height: 4.8rem;}
.portfolio-view {width: 100%;display: flex;overflow: hidden;}
.portfolio-view-list {width: calc((100% - 9.6rem) / 4);margin: 0 1.2rem 4rem;overflow: hidden;display: none;}
.portfolio-view-list.show {display: block;}


.list-img {width: 100%;height: 42rem;border-radius: 2rem;overflow: hidden;position: relative;}
.list-img:hover .portfolio-img {transform: scale(1.1);}
.portfolio-img {width: 100%;height: 100%;object-fit: cover;transition: transform .3s ease-in-out;}
.list-award_badge {position: absolute;top: 2rem;right: 2rem;}
.list-award_badge>img {box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.50);border-radius: 1rem;overflow: hidden;margin-left: 1rem;width: 6.4rem;}
.list-award_badge>img:first-child {margin-left: 0;}
.list-box {background: #fff;padding: 3rem 2rem;min-height: 18.5rem;}
.list_category_tag {display: flex;align-items: center;flex-wrap: wrap;}
.list_category_tag>li {font-family: 'Montserrat';font-weight: 600;font-size: 1.3rem;color: #fff;padding: 0 1rem;border-radius: 1.85rem;line-height: 2.4rem;margin: 0 .5rem .5rem 0;text-transform: capitalize;}
.list_category_tag>li:last-child {margin-right: 0;}
.list_category_tag>[data-category="Web"] {background: #80D01B;}
.list_category_tag>[data-category="App"] {background: #2CA054;}
.list_category_tag>[data-category="Management"] {background: #4286F5;}
.list_category_tag>[data-category="Promotion"] {background: #53B6E4;}
.list_category_tag>[data-category="E-Commerce"] {background: #F98738;}
.list_category_tag>[data-category="Web Accessibility & Security"] {background: #EA5252;}
.list_title {font-size: 2.2rem;font-weight: 700;color: #272727;letter-spacing: -.088rem;line-height: 3rem;margin: .7rem 0 1rem;white-space: normal;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;word-break: keep-all;}
.list_name {font-size: 1.6rem;font-weight: 500;letter-spacing: -.064rem;color: #999;}
.btn-viewmore {display: block;margin: 4rem auto 0;transition: transform .3s;}
.btn-viewmore:hover {transform: rotate(180deg);}

/* awards */
.section-awards {background: #f6fafd;border-radius: 20px 0 0 20px;position: relative;padding: 9rem 0 0;min-height: 77.1rem;user-select: none;}
.section-awards>.inner {max-width: 158rem;}
.text_circle {width: 170px;height: 170px;fill: #53b5e4;font-size: 11.2px;position: absolute;top: 165px;left: calc(50% + 8.8rem);animation: textRotation 10s infinite linear;}
.awards-category {display: none;}
.swiper-awards {position: relative;overflow: visible;}
.awards-container {overflow: hidden;padding: 5rem 0 8rem;}

.awards-container .swiper-slide {overflow: hidden;height: 46rem;border-radius: 2rem 2rem;display: flex;flex-direction: column;max-width: 25rem;}
.awards-container .swiper-slide-active {width: 23%!important;max-width: 36rem;border-radius: 6rem 2rem;display: flex;flex-direction: column;align-items: center;justify-content: center;filter: drop-shadow(4px 14px 24px rgba(0, 0, 0, 0.25));transition: border-radius .3s .2s;}

.award-bg picture,.award-bg source {width: 100%;height: 100%;display: block;}
.award-bg_img1 {border: 1px solid red;}
.award-bg_img2 {border: 1px solid orange;}
.award-bg_img3 {border: 1px solid green;}
.award-bg_img4 {border: 1px solid blue;}

@media screen and (max-width:1580px) {
  .awards-container .swiper-slide-active {width: 22%!important;max-width: 22%;}
}

@media screen and (max-width:1300px) {
  .awards-container .swiper-slide {max-width: 35rem;}
  .awards-container .swiper-slide-active {width: 33vw!important;min-width: 36rem;}
}

.award-bg {width: 100%;height: 100%;position: absolute;top: 50%;transform: translateY(-50%) scale(1.2); left: 0;z-index: -1;background-size: cover;opacity: 0;}
.award-bg>img {width: 100%;height: 100%;object-fit: cover;}
.award-mark {margin-bottom: 40px;padding-top: 11rem;padding-left: 3rem;}
.award-con {padding: 3rem 0 3rem 3rem;border-top: 1px solid #ddd;}
.award-year {font-family: 'Montserrat';font-size: 1.8rem;font-weight: 500;}
.award-year_wa {color: #D22127;}
.award-year_aa {color: #36469D;}
.award-year_ieco {color: #37AD5A;}
.award-year_if {color: #ED1C24;}
.award-title {font-size: 2.6rem;font-weight: 700;line-height: 3.8rem;letter-spacing: -.104rem;margin: 1rem 0 1.5rem;}
.award-title br {display: block;}
.award-name {font-size: 1.6rem;color: #777;letter-spacing: -.064rem;}
.swiper-slide-active .award-bg {opacity: 1;transform: translateY(-50%) scale(1); transition: opacity .5s, transform .5s;}
.swiper-slide-active .award-title {text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);}
.swiper-slide-active .award-mark {width: 6rem;height: 6rem;border-radius: 100%;overflow: hidden;display: flex;align-items: center;justify-content: center;transition: background,border-radius .5s .1s;padding-top: 0;padding-left: 0;}
.swiper-slide-active .award-mark.wa {background: #D22127;}
.swiper-slide-active .award-mark.aa {background: #36469D;}
.swiper-slide-active .award-mark.ieco {background: #37AD5A;}
.swiper-slide-active .award-mark.if {border-radius: 0;}
.swiper-slide-active .award-con {border-top: 0;padding-left: 0;filter: drop-shadow(2px 2px 30px #000);}
.swiper-slide-active .award-con>* {color: #fff;text-align: center;transition: color .2s;}
.swiper-awards .swiper-controller {display: flex;align-items: center;justify-content: space-between;width: 14.5rem;position: absolute;top: -1rem;right: 0;}
.award_btn {width: 1.6rem;height: 2.6rem;font-size: 0;cursor: pointer;transition: all .2s;}
.award-prev {background: url(../images/main/prev.png) no-repeat;background-size: contain;}
.award-prev:hover {background: url(../images/main/prev_on.png) no-repeat;background-size: contain;}
.award-next {background: url(../images/main/next.png) no-repeat;background-size: contain;}
.award-next:hover {background: url(../images/main/next_on.png) no-repeat;background-size: contain;}
.award-pagination {font-size: 1.6rem;color: rgba(39, 39, 39,.4);font-weight: 600;text-align: center;}
.award-pagination .swiper-pagination-current {color: #272727;;}


@keyframes textRotation{
  0%{transform: rotate(0);}
  100%{transform: rotate(360deg);}
}

/* Partner */
.section-partner {padding: 12rem 0 14rem;min-height: 99.1rem;user-select: none;}
.partner_list {display: flex;flex-wrap: wrap;flex-direction: row;justify-content: left;margin-top: 4rem;}
.partner_list>li {display: flex;align-items: center;justify-content: center;width: 19rem;height: 10rem;border: 1px solid #E8E8E8;}
.partner_list>li:not(:nth-child(8n-7)) {border-left: 0;}
.partner_list>li:not(:nth-child(n+1):nth-child(-n+8)) {border-top: 0;}

/* Story */
.section-story {background: linear-gradient(to bottom, transparent 90%, #000 100%);position: relative;z-index: 2;user-select: none;}
.story_inner {min-height: 85.2rem;background: #EFF2FA;border-radius: 4rem 0 0 4rem;padding: 8rem 0 10rem;}
.swiper-story {margin-top: 5rem;margin-left: calc((100% - 152rem) / 2);position: relative;overflow: visible;z-index: 2;}
.story-container {overflow: hidden;}
.story-container .swiper-slide {width: auto;flex-shrink: 100!important;}
.story-container .swiper-slide:last-of-type {margin-right: 2rem;}
.story-container .swiper-slide>a:hover .story-img>img {transform: scale(1.1);}
.story-img {width: auto;overflow: hidden;position: relative;}
.story-img>img {transition: transform .3s;}
.story-sns {position: absolute;bottom: 0;right: 0;}
.story-sns>img {width: 4rem;}
.story-info {width: auto;}
.story-info_tit {font-size: 2rem;font-weight: 700;color: #272727;margin-top: 2rem;}
.story-info_date {font-family: 'Montserrat';font-size: 1.4rem;color: #777;margin-top: 1rem;}
.story-controller {display: flex;align-items: center;justify-content: space-between;width: 14.5rem;position: absolute;top: -9.3rem;right: 14rem;}
.story_btn {width: 1.6rem;height: 2.6rem;font-size: 0;cursor: pointer;transition: all .2s;}
.story-prev {background: url(../images/main/prev.png) no-repeat;background-size: contain;}
.story-prev:hover {background: url(../images/main/prev_on.png) no-repeat;background-size: contain;}
.story-next {background: url(../images/main/next.png) no-repeat;background-size: contain;}
.story-next:hover {background: url(../images/main/next_on.png) no-repeat;background-size: contain;}
.story-pagination {font-size: 1.6rem;color: rgba(39, 39, 39,.4);font-weight: 600;text-align: center;}
.story-pagination .swiper-pagination-current {color: #272727;;}


/* Footer */
.section-footer {background: #000;position: relative;transform: translateY(-20rem);}
.footer-content {border-bottom: 1px solid rgba(255,255,255,.2);background: #000;}
.footer-content>.inner {position: relative;padding: 15rem 0 9rem;max-width: 128rem;margin: 0 auto;}
.footer-title_small {font-family: 'Montserrat';font-size: 3rem;font-weight: 800;letter-spacing: -.03rem;color: #54B5E3;position: relative;display: inline-block;padding: 0 2rem;margin-bottom: 3rem;}
.footer-title_small::before,
.footer-title_small::after {content:'';display: inline-block;width: 1.4rem;height: 1.7rem;position: absolute;}
.footer-title_small::before {background: url(../images/main/quotes_l.png);background-size: contain;top: -.5rem;left: 0;}
.footer-title_small::after {background: url(../images/main/quotes_r.png);background-size: contain;bottom: .4rem;right: 0;}
.footer-title_big {font-size: 8.6rem;font-weight: 800;color: #fff;letter-spacing: -.344rem;line-height: 9.8rem;}
.footer-title_change {display: inline-block;height: 9.8rem;overflow: hidden;margin-left: 15px;}
.footer-title_change>ul {position: relative;display: inline-block;}
.footer-title_change>ul>li {color: #54B5E3;line-height: 9.8rem;}
.footer-title_big>span {float: left;}
.footer-title_big::after {content:'';display: block;clear: both;}

/* 지우고 쓰기 */
@keyframes animatetoright01 {
  0% {left: 115%;}
  50% {left: 115%;}
  100% {left: 0%;}
}

/* 쓰고 지우기 */
@keyframes animatetoright02 {
  0% {left: 0;}
  50% {left: 0;}
  80% {left: 115%;}
  100% {left: 115%;}
}
@keyframes animatetoright02_1 {
  0% {left: 0;}
  50% {left: 0;}
  85% {left: 115%;}
  100% {left: 115%;}
}

@keyframes animatetotop {
  0% {transform: translateY(0);}
  100% {transform: translateY(-19.6rem);}
}

.footer-title_change {position: relative;height: 98px;}
.typing-letters {color: #54B5E3;height: 9.8rem;position: relative;}
.typing-letters00 {position: absolute;top: 0;left: 0;z-index: 1;}
.typing-letters_inner {display: inline-block;position: relative;line-height: 1;}
.typing-letters_inner01 {letter-spacing: -.2rem;}
.typing-letters_inner:after {content: '';position: absolute;top:-1px;right:0;bottom:-5px;left:0;background-color: #000;}
.typing-letters_inner00:after {left: 110%;}
.active .typing-letters {animation: animatetotop 2s steps(2) infinite alternate;animation-delay: 3s;}
.active .typing-letters00 {opacity: 0;transition: opacity 0s 2s;}
.active .typing-letters_inner00:after {animation: animatetoright01 2s steps(6) 1 forwards;}/* 프로젝트 */
.active .typing-letters_inner01:after {animation: animatetoright02 2s 1s steps(4) infinite alternate;}/* 세상 */
.active .typing-letters_inner02:after {animation: animatetoright02_1 2s 3s steps(6) infinite alternate;}/* 프로젝트 */

.footer-subtxt {font-size: 2rem;color: #999;margin-top: 3rem;}
.footer-subtxt>strong {font-weight: 700;color: #fff;}
.footer-btn_wrap {display: flex; justify-content: space-between;margin-top: 100px;}
.footer-btn:first-of-type {margin-right: 26px;}
.footer-btn {flex:1;line-height: 60px;}
.btn_border {border-width: 1px;border-style: solid;border-color: #fff;font-size: 1.6rem;position: relative;overflow: hidden;transition: all .2s ease-out;display: flex;align-items: center;justify-content: space-between;z-index: 1;color: #fff;padding: 0 2rem;border-radius: 1rem;}
.btn_border::before {content:'';display: block;position: absolute;left: 0;right: 0;top: 0;bottom: 0;transform: scaleX(0);z-index: -1;background-color: #fff;transition: all .2s ease-out;transform-origin: 0 50%;}
.btn_border:hover {color: #474747;}
.btn_border:hover::before { transform:scaleX(1); }
.btn_border>i {display: inline-block;width: 1.4rem;height: 1.5rem;background: url(../images/main/btn_arr.png);background-size: contain;transition: all .2s;}
.btn_border:hover>i {background: url(../images/main/btn_arr_on.png);background-size: contain;}

.arrow_wrap {display: inline-flex;position: absolute;top: 17.8rem;right: 0;}
.arrow_box {width: 182px;height: 182px;display: flex;flex-wrap: wrap;justify-content: space-between;position: relative;}
.arrow_box01 .arr01 {position: absolute;top: 0;left: 0;opacity: .2;}
.arrow_box01 .arr02 {position: absolute;bottom: 0;right: 0;}
.arrow_box02 {margin-left: 12rem;}
.arrow_box02 .arr05 {position: absolute;bottom: 0;right: 0;}
.arr {transform: scale(0);transition: transform .5s;}
.active .arr {transform: scale(1);}
.active .arr01 {transition-delay: 0.7s;}
.active .arr02 {transition-delay: 0.9s;}
.active .arr04 {transition-delay: 0.3s;}
.active .arr03,
.active .arr05 {transition-delay: 0.5s;}

.footer-info {background: #000;font-family: 'Montserrat','Pretendard';color: #fff;font-size: 1.6rem;letter-spacing: -.064rem;padding: 5rem 0 8rem;/* position: relative; */z-index: 1;}
.footer-info>.inner {display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;max-width: 128rem;margin: 0 auto;}
.footer-con {font-weight: 500;margin-top: 1rem;}
.footer_tit {font-family: 'Montserrat';font-weight: 700;color: rgba(255,255,255,.4);margin-bottom: 1rem;}
.footer_con>a {color: #fff;}
.footer-copyright {letter-spacing: -.032rem;color: rgba(255,255,255,.5);width: 100%;margin-top: 3rem;}
.footer-copyright>strong>a {font-weight: 700;color: #54B5E3;}
.footer-sns .footer_con {width: 11rem;display: inline-flex;align-items: center;justify-content: space-between;margin-right: 0;}
.footer-sns .footer_con img {vertical-align: middle;}
.btn_recruit {width: 16rem;height: 5rem;border-radius: .8rem;background: #242424;font-size: 1.5rem;font-weight: 500;position: relative;overflow: hidden;z-index: 1;}
.btn_recruit::before {content:'';display: block;position: absolute;left: 0;right: 0;top: 0;bottom: 0;transform: scaleX(0);z-index: -1;background-color: #54B5E3;transition: transform .2s ease-out;transform-origin: 0 50%;}
.btn_recruit:hover::before { transform:scaleX(1); }