@charset "UTF-8";
/*************** INTRO ***************/
#main_layer_popup{ display: block;}

#wrap.loading { overflow: hidden; }

#wrap.loading #header { top: -100rem; }

/*************** MAIN : VISUAL ***************/
.main_visual { position: relative; -webkit-transition: 1s ease; transition: 1s ease; }

.main_visual .intro { height: 35.5%; position: relative; overflow: hidden; z-index: 100; }

.main_visual .intro .bg { width: 100%; position: absolute; left: 0; bottom: 0; }

.main_visual .intro .bg.bg2-2 { width: 97rem; left: 312rem; z-index: 1; }

.main_visual .intro .bg.traffic_light { width: 27rem; left: 750rem; }

.main_visual .intro .bg.flag { width: 101rem; left: auto; right: 157rem; cursor: pointer; }

.main_visual .intro .bg.flag .say { position: absolute; right: -48rem; top: 0; opacity: 0; -webkit-transition: 1s ease 1s; transition: 1s ease 1s; }

.main_visual .intro .bg.flag.aos-animate .say { top: -48rem; opacity: 1; }

.main_visual .intro .movingZone { position: absolute; left: 0; bottom: 0; position: absolute; left: 0; width: calc(100% - 474rem); height: 100%; }

.main_visual .intro .movingZone .truck { width: 163rem; left: 0; -webkit-transition: all 1s ease 1s, left .3s ease; transition: all 1s ease 1s, left .3s ease; }

.main_visual .intro .percent { font-size: 90rem; font-weight: 700; color: #0c3388; position: fixed; right: 70rem; bottom: 70rem; -webkit-transition: .5s ease; transition: .5s ease; }

.main_visual .main_title { position: absolute; left: 0; top: 120rem; width: 100%; color: #0c3388; text-align: center; }

.main_visual .main_title .tit { font-size: 85rem; font-weight: 700; overflow: hidden; }

.main_visual .main_title .tit b { display: inline-block; -webkit-transform: translateY(150%); transform: translateY(150%); -webkit-transition: .5s ease; transition: .5s ease; }

.main_visual .main_title .meant { display: inline-block; width: 45rem; opacity: 0; overflow: hidden; height: 45rem; line-height: 43rem; background-color: #fff; border: 1px solid #0c3388; border-radius: 22.5rem; margin-top: 8rem; font-size: 16rem; font-weight: 500; overflow: hidden; white-space: nowrap; color: #fff; }

.main_visual .main_title .meant p { height: 100%; -webkit-transition: 1s ease; transition: 1s ease; }

.main_visual .cloude { width: 220rem; position: absolute; left: 74rem; top: 361rem; z-index: 3; opacity: 0; -webkit-transition: 1s ease 2s; transition: 1s ease 2s; }

.main_visual .cloude.c2 { width: 160rem; left: auto; right: 123rem; top: 436rem; }

.main_visual .mainSld { width: 100%; height: 64.5%; background-color: #e1e5ef; position: absolute; left: 0; bottom: 0; right: 0; -webkit-transition: 1s ease; transition: 1s ease; }

.main_visual .mainSld .inner { overflow: hidden; }

.main_visual .mainSld .spotLight { display: block; width: 50%; height: auto; position: absolute; left: 0; top: -2px; -webkit-transform-origin: right top; transform-origin: right top; -webkit-transform: rotate(15deg); transform: rotate(15deg); -webkit-transition: 1s ease 1.5s; transition: 1s ease 1.5s; }

.main_visual .mainSld .spotLight path { fill: #f6f6f6; -webkit-transition: 1s ease; transition: 1s ease; }

.main_visual .mainSld .spotLight.r { left: auto; right: 0; -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: rotate(-15deg); transform: rotate(-15deg); }

.main_visual .mainSld .lightBtn { position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%, -100%); transform: translate(-50%, -100%); width: 41rem; -webkit-transition: 1s ease 1.5s; transition: 1s ease 1.5s; z-index: 3; cursor: pointer; }

.main_visual .mainSld .lightBtn .say { position: absolute; right: -100rem; bottom: 40rem; opacity: 0; -webkit-transition: all 1s ease, bottom 1s ease 2s; transition: all 1s ease, bottom 1s ease 2s; }

.main_visual .mainSld .lightBtn:hover .say { -webkit-transform: scale(1.05); transform: scale(1.05); }

.main_visual .mainSld .lightBtn::before { content: ''; position: absolute; left: 50%; bottom: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-box-shadow: 0 0 30rem 30rem #ffcf54; box-shadow: 0 0 30rem 30rem #ffcf54; width: 3rem; height: 3rem; background: #ffcf54; border-radius: 50%; opacity: 0; -webkit-transition: 1s ease; transition: 1s ease; z-index: -1; }

.main_visual .mainSld .swiper-slide { opacity: 0 !important; padding-bottom: 80rem; }

.main_visual .mainSld .swiper-slide.swiper-slide-active { opacity: 1 !important; }

.main_visual .mainSld .swiper-slide .illu { position: absolute; bottom: 0; -webkit-transform: translateY(103%); transform: translateY(103%); -webkit-transition: 1s ease; transition: 1s ease; }

.main_visual .mainSld .swiper-slide .illu:nth-child(2) { -webkit-transition-delay: .3s; transition-delay: .3s; }

.main_visual .mainSld .swiper-slide .illu:nth-child(3) { -webkit-transition-delay: .6s; transition-delay: .6s; }

.main_visual .mainSld .swiper-slide .illu:nth-child(4) { -webkit-transition-delay: .9s; transition-delay: .9s; }

.main_visual .mainSld .swiper-slide .illu:nth-child(5) { -webkit-transition-delay: 1.2s; transition-delay: 1.2s; }

.main_visual .mainSld .swiper-slide .illu:nth-child(6) { -webkit-transition-delay: 1.5s; transition-delay: 1.5s; }

.main_visual .mainSld .swiper-slide .illu:nth-child(7) { -webkit-transition-delay: 1.8s; transition-delay: 1.8s; }

.main_visual .mainSld .swiper-slide.slide1 .illu.board { width: 517rem; left: 504rem; bottom: auto; top: 150rem; opacity: 0; }

.main_visual .mainSld .swiper-slide.slide1 .illu.staff { width: 286rem; left: 27rem; }

.main_visual .mainSld .swiper-slide.slide1 .illu.bookcase { width: 263rem; left: 230rem; }

.main_visual .mainSld .swiper-slide.slide1 .illu.casher { width: 583rem; left: 534rem; }

.main_visual .mainSld .swiper-slide.slide1 .illu.delivery { width: 431rem; right: 0; }

.main_visual .mainSld .swiper-slide.slide2 .illu.building { width: 393rem; left: 0; }

.main_visual .mainSld .swiper-slide.slide2 .illu.truck { width: 317rem; left: 122rem; }

.main_visual .mainSld .swiper-slide.slide2 .illu.screen { width: 653rem; left: 467rem; }

.main_visual .mainSld .swiper-slide.slide2 .illu.bag { width: 351rem; right: 147rem; }

.main_visual .mainSld .swiper-slide.slide2 .illu.house { width: 296rem; right: 0; }

.main_visual .mainSld .swiper-slide.slide3 .illu.truck { width: 443rem; left: 0rem; }

.main_visual .mainSld .swiper-slide.slide3 .illu.house { width: 664rem; left: 450rem; }

.main_visual .mainSld .swiper-slide.slide3 .illu.forklift { width: 268rem; left: 455rem; }

.main_visual .mainSld .swiper-slide.slide3 .illu.cart { width: 214rem; right: 406rem; }

.main_visual .mainSld .swiper-slide.slide3 .illu.staff1 { width: 356rem; right: 44rem; }

.main_visual .mainSld .swiper-slide.slide3 .illu.staff2 { width: 58rem; right: 319rem; }

.main_visual .pagi { position: absolute; left: 70rem; bottom: 30rem; z-index: 5; }

.main_visual .pagi span { -webkit-transform: translateY(200%) scale(0); transform: translateY(200%) scale(0); }

.main_visual .scroll { height: 100rem; position: absolute; left: 50%; bottom: 0; -webkit-transform: translate(-50%, 50%) scale(0); transform: translate(-50%, 50%) scale(0); -webkit-transition: 1s ease; transition: 1s ease; z-index: 1; }

.main_visual .scroll img { position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: auto; height: 100%; -webkit-transition: 1s ease; transition: 1s ease; }

.main_visual .scroll img.w { opacity: 1; }

.main_visual .scroll img.d { opacity: 0; }

.main_visual .scroll .arw { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 13rem; }

.main_visual.on .intro { -ms-touch-action: none; touch-action: none; pointer-events: none; opacity: 0; -webkit-transition: opacity 0s ease 1.5s; transition: opacity 0s ease 1.5s; }

.main_visual.on .intro .bg { -webkit-transform: translateY(100%); transform: translateY(100%); }

.main_visual.on .intro .bg.flag.aos-animate .say { opacity: 0; -webkit-transition-delay: 0s; transition-delay: 0s; }

.main_visual.on .intro .movingZone .truck { -webkit-transition: all 1s ease, left .3s ease; transition: all 1s ease, left .3s ease; }

.main_visual.on .intro .percent { -webkit-transform: translateX(400rem); transform: translateX(400rem); opacity: 0; }

.main_visual.on .main_title .tit b { -webkit-transform: translateY(0); transform: translateY(0); }

.main_visual.on .main_title .meant { width: 300rem; opacity: 1; -webkit-transition: .5s ease, width 1s ease .5s, color 1s ease .8s; transition: .5s ease, width 1s ease .5s, color 1s ease .8s; color: #0c3388; }

.main_visual.on .cloude { -webkit-animation: cloude 2s ease-in-out infinite alternate; animation: cloude 2s ease-in-out infinite alternate; opacity: 1; }

.main_visual.on .cloude.c2 { animation-direction: alternate-reverse; -webkit-animation-duration: 3s; animation-duration: 3s; }

@-webkit-keyframes cloude { 0% { -webkit-transform: translateY(0); transform: translateY(0); }
  100% { -webkit-transform: translateY(20rem); transform: translateY(20rem); } }

@keyframes cloude { 0% { -webkit-transform: translateY(0); transform: translateY(0); }
  100% { -webkit-transform: translateY(20rem); transform: translateY(20rem); } }

.main_visual.on .mainSld .spotLight { -webkit-transform: rotate(0deg) !important; transform: rotate(0deg) !important; }

.main_visual.on .mainSld .lightBtn { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }

.main_visual.on .mainSld .lightBtn .say { bottom: 25rem; opacity: 1; }

.main_visual.on .mainSld .swiper-slide.swiper-slide-active .illu { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1 !important; }

.main_visual.on .pagi span { -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); }

.main_visual.on .pagi span:nth-child(2) { -webkit-transition-delay: .2s; transition-delay: .2s; }

.main_visual.on .pagi span:nth-child(3) { -webkit-transition-delay: .4s; transition-delay: .4s; }

.main_visual.on .scroll { -webkit-transform: translate(-50%, 50%) scale(1); transform: translate(-50%, 50%) scale(1); }

.main_visual.on .scroll .arw { -webkit-animation: down 1s ease infinite alternate; animation: down 1s ease infinite alternate; }

@-webkit-keyframes down { 0% { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); }
  100% { -webkit-transform: translate(-50%, -20%) scale(1); transform: translate(-50%, -20%) scale(1); } }

@keyframes down { 0% { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); }
  100% { -webkit-transform: translate(-50%, -20%) scale(1); transform: translate(-50%, -20%) scale(1); } }

.main_visual.dark { background-color: #0B1C40; }

.main_visual.dark * { -webkit-transition: 1s ease; transition: 1s ease; }

.main_visual.dark .main_title .tit b { color: #fff; }

.main_visual.dark .main_title .meant { color: #fff; background-color: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.05); -webkit-transition: 1s ease; transition: 1s ease; }

.main_visual.dark .cloude { opacity: 20%; }

.main_visual.dark .mainSld { background-color: #213560; }

.main_visual.dark .mainSld .spotLight path { fill: #0B1C40; }

.main_visual.dark .pagi span { background-color: #fff; }

.main_visual.dark .lightBtn::before { opacity: 1; }

.main_visual.dark .lightBtn .say p { background-color: #FFC702 !important; color: #213560; -webkit-transition: 1s ease; transition: 1s ease; }

.main_visual.dark .lightBtn .say .arw svg path { fill: #FFC702; -webkit-transition: 1s ease; transition: 1s ease; }

.main_visual.dark .lightBtn:hover .say { -webkit-transform: scale(1.05); transform: scale(1.05); }

.main_visual.dark .scroll img.w { opacity: 0; }

.main_visual.dark .scroll img.d { opacity: 1; }

/*************** MAIN : GUIDE ***************/
.main_guide { position: relative; overflow: hidden; height: 960rem;}

.main_guide::after { content: ''; display: block; width: 100%; height: 57rem; position: absolute; left: 0; bottom: 0; right: 0; background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#D6D6D6)); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #D6D6D6 100%); opacity: .4; }

.main_guide .txt__box { text-align: center; padding-top: 196rem; }

.main_guide .txt__box .btn { margin-top: 45rem; }

.main_guide .guideImg { width: 968rem; position: absolute; left: 50%; bottom: -20rem; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-filter: drop-shadow(0rem 0rem 35rem rgba(0, 0, 0, 0.1)); filter: drop-shadow(0rem 0rem 35rem rgba(0, 0, 0, 0.1)); }

.main_guide .meant1 { width: 178rem; position: absolute; left: 237rem; bottom: 399rem; }

.main_guide .meant1 .good { width: 70rem; height: 70rem; border-radius: 50%; -webkit-box-shadow: 0 0 35rem rgba(0, 0, 0, 0.1); box-shadow: 0 0 35rem rgba(0, 0, 0, 0.1); background: #fff url(/images/common/good.svg) no-repeat center center/50%; position: absolute; left: -35rem; top: -35rem; -webkit-transform: scale(0) rotate(90deg); transform: scale(0) rotate(90deg); -webkit-transition: all 0.5s ease 0.8s, -webkit-transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s; transition: all 0.5s ease 0.8s, -webkit-transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s; transition: all 0.5s ease 0.8s, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s; transition: all 0.5s ease 0.8s, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s, -webkit-transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s; opacity: 0; }

.main_guide .meant1.aos-animate .good { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); opacity: 1; }

.main_guide .meant2 { width: 250rem; position: absolute; right: 199rem; bottom: 500rem; }

/*************** MAIN : FULFILLMENT ***************/
.main_ffmt .swiper { width: 100%; height: 100%; overflow: visible; }

.main_ffmt .swiper .infoWrap { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 5; }

.main_ffmt .swiper .infoWrap .imgWrap { display: -webkit-box; display: -ms-flexbox; display: flex; width: 783rem; height: 490rem; border-radius: 15rem; overflow: hidden; }

.main_ffmt .swiper .infoWrap .imgWrap img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: 1s ease; transition: 1s ease; }

.main_ffmt .swiper .infoWrap .progress { position: absolute; right: -30rem; top: 0; text-align: center; }

.main_ffmt .swiper .infoWrap .progress p { font-size: 14rem; font-weight: 600; font-family: 'Work Sans'; color: #e7e7e7; }

.main_ffmt .swiper .infoWrap .progress p.total { color: #0c3388; }

.main_ffmt .swiper .infoWrap .progress .bar { width: 3rem; height: 96rem; border-radius: 2rem; overflow: hidden; background-color: #e7e7e7; margin: 10rem auto; position: relative; }

.main_ffmt .swiper .infoWrap .progress .bar span { display: block; position: absolute; left: 0; top: 0; right: 0; width: 100%; height: calc(100%/4); background-color: #0c3388; -webkit-transition: .5s ease; transition: .5s ease; cursor: pointer; }

.main_ffmt .swiper .infoWrap .pagi { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; background-color: #f6f6f6; text-align: center; padding: 16rem 0; border-radius: 15rem; font-size: 18rem; font-weight: 500; color: #c7c7c7; position: absolute; left: 0; bottom: -20rem; -webkit-transform: translateY(100%); transform: translateY(100%); }

.main_ffmt .swiper .infoWrap .pagi span { display: block; width: 33.3333%; height: 20rem; line-height: 20rem; cursor: pointer; -webkit-transition: .5s ease; transition: .5s ease; background-color: transparent !important; opacity: 1 !important; margin: 0 !important; border-radius: 0 !important; }

.main_ffmt .swiper .infoWrap .pagi span + span { border-left: 1px solid #c7c7c7; }

.main_ffmt .swiper .infoWrap .pagi span:nth-child(1)::before { content: '국내 풀필먼트'; }

.main_ffmt .swiper .infoWrap .pagi span:nth-child(2)::before { content: '해외 풀필먼트'; }

.main_ffmt .swiper .infoWrap .pagi span:nth-child(3)::before { content: 'B2B 납품'; }

.main_ffmt .swiper .infoWrap .pagi span:nth-child(4)::before { content: '스마일 배송'; }

.main_ffmt .swiper .infoWrap .pagi span.swiper-pagination-bullet-active { color: #0c3388; }

.main_ffmt .swiper .swiper-slide { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; opacity: 0 !important; }

.main_ffmt .swiper .swiper-slide .txt__box span, .main_ffmt .swiper .swiper-slide .txt__box p, .main_ffmt .swiper .swiper-slide .txt__box .btn { -webkit-transform: translateX(-10%); transform: translateX(-10%); -webkit-transition: 1s ease; transition: 1s ease; opacity: 0; }

.main_ffmt .swiper .swiper-slide .txt__box .btn { margin-top: 80rem; }

.main_ffmt .swiper .swiper-slide.swiper-slide-active { opacity: 1 !important; }

.main_ffmt .swiper .swiper-slide.swiper-slide-active span, .main_ffmt .swiper .swiper-slide.swiper-slide-active p, .main_ffmt .swiper .swiper-slide.swiper-slide-active .btn { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }

.main_ffmt .swiper .swiper-slide.swiper-slide-active p { -webkit-transition-delay: .3s; transition-delay: .3s; }

.main_ffmt .swiper .swiper-slide.swiper-slide-active .btn { -webkit-transition-delay: .6s; transition-delay: .6s; }

/*************** MAIN : MANAGEMENT ***************/
.main_management { background-color: #0c3388; overflow: hidden; position: relative; }

.main_management .title { width: 446rem; height: 446rem; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(300%, -50%); transform: translate(300%, -50%); -webkit-transition: .3s ease; transition: .3s ease; }

.main_management .title .word { width: auto; height: 100%; position: absolute; top: 0; left: -62rem; -webkit-transform: translateX(-100%); transform: translateX(-100%); }

.main_management .title .word.ne { left: auto; right: -62rem; -webkit-transform: translateX(100%); transform: translateX(100%); }

.main_management .title .circle { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; z-index: 1; -webkit-transition: .5s ease; transition: .5s ease; }

.main_management .title .circle img { width: 100vw; height: 100vh; }

.main_management .title .circle p { white-space: nowrap; font-size: 25rem; font-weight: 700; color: #fff; text-align: center; -webkit-transition: .5s ease; transition: .5s ease; }

.main_management .info { width: 100%; height: auto; position: absolute; left: 0; bottom: 0; right: 0; -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition: 1s ease; transition: 1s ease; }

.main_management .info::before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); background-color: rgba(0, 0, 0, 0.3); }

.main_management .info ul { display: -webkit-box; display: -ms-flexbox; display: flex; border-left: 1px solid rgba(255, 255, 255, 0.2); position: relative; z-index: 1; }

.main_management .info ul li { color: #fff; width: 25%; text-align: center; padding: 36rem 0; border-right: 1px solid rgba(255, 255, 255, 0.2); }

.main_management .info ul li span { opacity: .5; font-size: 16rem; display: block; }

.main_management .info ul li p { font-size: 30rem; font-weight: 500; margin-top: 10rem; }

.main_management.on .info { -webkit-transform: translateY(0); transform: translateY(0); }

/*************** MAIN : SYSTEM ***************/
.main_system { display: -webkit-box; display: -ms-flexbox; display: flex; }

.main_system > div { width: 50%; height: 100%; position: relative; }

.main_system .imgWrap ul li { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

.main_system .imgWrap ul li::before { content: ''; position: absolute; left: 0; top: 0; right: 0; width: 100%; height: 0; background-color: #E1E5EF; -webkit-transition: 1s ease; transition: 1s ease; }

.main_system .imgWrap ul li img { position: absolute; -webkit-filter: drop-shadow(0rem 0rem 35rem rgba(0, 0, 0, 0.1)); filter: drop-shadow(0rem 0rem 35rem rgba(0, 0, 0, 0.1)); -webkit-transform: translateY(30%); transform: translateY(30%); -webkit-transition: 1s ease; transition: 1s ease; opacity: 0; }

.main_system .imgWrap ul li img.img1 { width: 740rem; left: calc(50% - 370rem); bottom: 138rem; }

.main_system .imgWrap ul li img.img3 { width: 232rem; }

.main_system .imgWrap ul li:nth-child(1) .img2 { width: 390rem; left: 70rem; bottom: 337rem; }

.main_system .imgWrap ul li:nth-child(1) .img3 { left: 170rem; bottom: 118rem; }

.main_system .imgWrap ul li:nth-child(2)::before { background-color: #FFEFE8; }

.main_system .imgWrap ul li:nth-child(2) .img2 { width: 515rem; left: 78rem; bottom: 118rem; }

.main_system .imgWrap ul li:nth-child(2) .img3 { right: 82rem; bottom: 166rem; }

.main_system .imgWrap ul li:nth-child(3)::before { background-color: #EBEFD0; }

.main_system .imgWrap ul li:nth-child(3) .img3 { right: 77rem; bottom: 305rem; }

.main_system .imgWrap ul li.on::before, .main_system .imgWrap ul li.swiper-slide-active::before { height: 100%; }

.main_system .imgWrap ul li.on img, .main_system .imgWrap ul li.swiper-slide-active img { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }

.main_system .imgWrap ul li.on img.img2, .main_system .imgWrap ul li.swiper-slide-active img.img2 { -webkit-transition-delay: .3s; transition-delay: .3s; }

.main_system .imgWrap ul li.on img.img3, .main_system .imgWrap ul li.swiper-slide-active img.img3 { -webkit-transition-delay: .6s; transition-delay: .6s; }

.main_system .txtBox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 175rem; }

.main_system .txtBox .txt__box p { font-size: 20rem; padding-left: 35rem; position: relative; }

.main_system .txtBox .txt__box p i { display: block; position: absolute; left: 0; top: 4rem; width: 20rem; height: 20rem; border-radius: 50%; background-color: #f6f6f6; -webkit-transition: .3s ease; transition: .3s ease; }

.main_system .txtBox .txt__box p i::before { content: ''; width: 10rem; height: 100%; background: url(/images/common/check.svg) no-repeat center center/100% auto; position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: .3s ease; transition: .3s ease; }

.main_system .txtBox .txt__box p + p { margin-top: 15rem; }

.main_system .txtBox .txt__box p.on i { background-color: #0c3388; }

.main_system .txtBox .txt__box p.on i::before { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); }

.main_system .txtBox .txt__box .btn { margin-top: 80rem; }

/*************** MAIN : AUTOMATION ***************/
.main_automation { text-align: center; padding: 150rem 0 278rem; background-color: #F6F6F6; }

.main_automation .tabbar { display: inline-block; font-size: 0; margin: 45rem 0 40rem; padding: 10rem; border-radius: 40rem; background-color: #fff; }

.main_automation .tabbar li { display: inline-block; padding: 7rem 56rem; color: #818181; font-size: 18rem; font-weight: 500; border-radius: 26rem; cursor: pointer; }

.main_automation .tabbar li + li { margin-left: 20rem; }

.main_automation .tabbar li.on { background-color: #0c3388; color: #fff; }

.main_automation .vidBox { height: 750rem; margin-top: 60rem;}
.main_automation .vidBox video{ object-position: left top; transform: scale(1.01); height: 102%;}

@media screen and (min-width: 1025px) { .txt__box span { font-size: 45rem; }
  .txt__box p { font-size: 20rem; } }

@media screen and (max-width: 1024px) { /*************** MAIN : VISUAL ***************/
  .main_visual{ height: 640rem;}
  .main_visual .main_title { top: 90rem; }
  .main_visual .main_title .tit { font-size: 45rem; line-height: 1.15; }
  .main_visual .main_title .tit b { -webkit-transform: translateY(200%); transform: translateY(200%); }
  .main_visual .main_title .tit b:nth-child(6) { width: 100%; display: block; height: 0; }
  .main_visual .main_title .meant { width: 35rem; height: 35rem; line-height: 33rem; border-radius: 17.5rem; margin-top: 15rem; font-size: 14rem; }
  .main_visual .cloude { width: 52rem !important; left: 17rem; top: 255rem; }
  .main_visual .cloude.c2 { width: 160rem; left: auto; right: 15rem; top: 255rem; }
  .main_visual .mainSld { height: calc(100% - 260rem); }
  .main_visual .mainSld .lightBtn { width: 21rem; }
  .main_visual .mainSld .lightBtn .say { right: -80rem; bottom: 0; -webkit-transition-delay: 2s; transition-delay: 2s; }
  .main_visual .mainSld .lightBtn::before { -webkit-box-shadow: 0 0 20rem 20rem #ffcf54; box-shadow: 0 0 20rem 20rem #ffcf54; }
  .main_visual .mainSld .swiper-slide { padding: 0 20rem 61rem !important; }
  .main_visual .mainSld .swiper-slide .illu { -webkit-transition-delay: 0s !important; transition-delay: 0s !important; max-height: 65%; }
  .main_visual .mainSld .swiper-slide.slide1 .illu.board { width: 287rem; left: calc(50% - 170rem); top: 69rem; }
  .main_visual .mainSld .swiper-slide.slide1 .illu.casher { width: 341rem; left: calc(50% - 170rem); }
  .main_visual .mainSld .swiper-slide.slide2 .illu.screen { width: 100%; left: 0; }
  .main_visual .mainSld .swiper-slide.slide3 .illu.house { width: 100%; left: 0; }
  .main_visual .mainSld .swiper-slide.slide3 .illu.forklift { width: 144rem; left: calc(50% - 170rem); }
  .main_visual .mainSld .swiper-slide.slide3 .illu.cart { width: 124rem; right: calc(50% - 170rem);; }
  .main_visual .pagi { left: 20rem; }
  .main_visual.on .main_title .meant { width: 240rem; }
  .main_visual.on .mainSld .lightBtn .say { bottom: 10rem; }
  /*************** MAIN : GUIDE ***************/
  .main_guide { height: auto; }
  .main_guide .txt__box { padding-top: 87rem; }
  .main_guide .txt__box .btn { margin-top: 30rem; }
  .main_guide .guideImg { width: calc(100% - 40rem); max-height: calc(100% - 300rem); position: relative; margin-top: 50rem; }
  .main_guide .meant1, .main_guide .meant2 { display: none; }
  /*************** MAIN : FULFILLMENT ***************/
  .main_ffmt { height: auto; min-height: 622rem; padding: 50rem 0; }
  .main_ffmt .swiper .infoWrap { position: relative; top: 0; -webkit-transform: none; transform: none; }
  .main_ffmt .swiper .infoWrap .imgWrap { width: 100%; height: 55.7vw; border-radius: 10rem; }
  .main_ffmt .swiper .infoWrap .pagi { padding: 8.5rem 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 5rem; font-size: 12rem; position: static; -webkit-transform: none; transform: none; margin-top: 16rem; white-space: nowrap; height: 35rem; }
  .main_ffmt .swiper .infoWrap .pagi span { width: 100%; height: 10rem; line-height: 10rem; padding: 0 10rem; }
  .main_ffmt .swiper .swiper-slide { display: block; }
  .main_ffmt .swiper .swiper-slide .txt__box { margin-top: 20rem; }
  .main_ffmt .swiper .swiper-slide .txt__box .btn { margin-top: 35rem; }
  /*************** MAIN : MANAGEMENT ***************/
  .main_management { background: url(/images/main/main_management_bg.png) no-repeat center center/cover; }
  .main_management .title { width: 100%; height: auto; top: 39%; left: 0; -webkit-transform: none; transform: none; z-index: 1; }
  .main_management .title .circle { height: auto; border-radius: none; position: static; -webkit-transform: none; transform: none; }
  .main_management .info { width: 100%; -webkit-transform: none; transform: none; padding: 0 !important; }
  .main_management .info ul { -ms-flex-wrap: wrap; flex-wrap: wrap; }
  .main_management .info ul li { width: 50%; padding: 17rem 0; }
  .main_management .info ul li span { font-size: 14rem; }
  .main_management .info ul li p { font-size: 20rem; margin-top: 5rem; }
  .main_management .info ul li:nth-child(3), .main_management .info ul li:nth-child(4) { border-top: 1px solid rgba(255, 255, 255, 0.2); }
  /*************** MAIN : SYSTEM ***************/
  .main_system { display: block; height: auto; }
  .main_system > div { width: 100%; }
  .main_system .imgWrap { height: 90vw; }
  .main_system .imgWrap ul li { height: 100%; overflow: hidden; }
  .main_system .imgWrap ul li img { bottom: auto !important; }
  .main_system .imgWrap ul li img.img1 { width: 72%; left: 14%; bottom: 18% !important; }
  .main_system .imgWrap ul li img.img3 { width: 27%; }
  .main_system .imgWrap ul li:nth-child(1) .img2 { width: 42.5%; left: 6%; top: 37%; }
  .main_system .imgWrap ul li:nth-child(1) .img3 { left: 19%; top: 62%; }
  .main_system .imgWrap ul li:nth-child(2) .img2 { width: 51%; left: 6%; top: 60%; }
  .main_system .imgWrap ul li:nth-child(2) .img3 { right: 6%; top: 61%; }
  .main_system .imgWrap ul li:nth-child(3) .img3 { right: 6%; top: 41%; }
  .main_system .txtBox { display: block; padding: 30rem 20rem 50rem; }
  .main_system .txtBox .txt__box p { font-size: 16rem; margin-top: 25rem; }
  .main_system .txtBox .txt__box p i { top: 2rem; }
  .main_system .txtBox .txt__box p.on i { background-color: #0c3388; }
  .main_system .txtBox .txt__box p.on i::before { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); }
  .main_system .txtBox .txt__box .btn { margin-top: 35rem; }
  /*************** MAIN : AUTOMATION ***************/
  .main_automation { padding: 50rem 0 154rem; }
  .main_automation .tabbar { width: 100%; margin: 20rem 0 25rem; padding: 5rem; border-radius: 16rem; }
  .main_automation .tabbar li { width: 25%; padding: 3rem 15rem; font-size: 12rem; border-radius: 11rem; white-space: nowrap;}
  .main_automation .tabbar li + li { margin-left: 0; }
  .main_automation .vidBox { height: 47vw; margin-top: 30rem;} 
  .main_automation .vidBox video{transform: scale(1.02); } 

}