@charset "UTF-8";
/* 메인 공통 */
.main_more{font-family: 'Poppins', sans-serif; font-weight: 500; letter-spacing: -0.025em; color: #fff; display: inline-block; height: 70px; line-height: 70px; padding: 0 30px 0 35px; position: relative; border-radius: 70px; overflow: hidden; font-size: 14px;}
.main_more::before{content:''; display: block; width: 70px; height: 70px; border-radius: 70px; background: #4166b0; opacity: 0.5; position: absolute; top: 0; left: 0; z-index: 0; transition: width .3s ease-in-out, transform .3s ease-in-out .3s;}
.main_more:hover::before{width: 100%; transform: translateX(100%) translateX(-70px);}
.main_more span{z-index: 5; position: relative;}
.main_cate{font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 500; letter-spacing: -0.025em; color: #91b6ff;}
.main_tit{font-size: 48px; letter-spacing: -0.025em; color: #fff; line-height: 1.3; margin-top: 25px;}
.main_tit strong{font-weight: 700;}
.main_desc{font-size: 18px; letter-spacing: -0.025em; color: #555; margin-top: 35px; line-height: 1.8;}
.main_cont{width: 1300px; margin: 0 auto; position: relative; padding-top: 13.5%; padding-left: 80px; padding-right: 80px;}
.main_cont::after{content:''; display: block; clear: both;}

/* indicator */
#fp-nav.fp-show-active{z-index: 0;}
#fp-nav.fp-show-active.left{left: 31px; top:50.6%;}
#fp-nav.fp-show-active ul li{width: 20px; height: 20px; margin: 16px 8px;}
#fp-nav.fp-show-active ul li:last-child{display: none;}
#fp-nav.fp-show-active ul li a span{width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #ccc;}
#fp-nav.fp-show-active ul li a.active span{width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff;}
#fp-nav.fp-show-active ul li a.active span::after{content:''; display: block; width: 20px; height: 20px; border: 1px solid #fff; border-radius: 100%; box-sizing: border-box; position: absolute; top: 50%; left: 50%; margin: -10px 0 0 -10px;}
#fp-nav.fp-show-active ul li .fp-tooltip.left{top: 0; left: 30px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: -0.04em; line-height: 19px;}

#fp-nav.fp-show-active.fp-nav-color ul li a.active span{background: #4166b0;}
#fp-nav.fp-show-active.fp-nav-color ul li a.active span::after{border-color: #4166b0;}
#fp-nav.fp-show-active.fp-nav-color ul li .fp-tooltip.left{color: #4166b0;}

/* scroll Down */
.scroller_down{position: fixed; right: 94px; bottom: 0; z-index: 5; display: flex; align-items: center; transform-origin: right bottom; transform: rotate(90deg); opacity: 0; visibility: hidden; transition: opacity 1s, visibility 1s;}
.scroller.active .scroller_down{opacity: 1; visibility: visible;}
.scroller_txt{display: block; font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 500; letter-spacing: -0.025em; color: #fff;}
.scroller_bar{width: 100px; height: 2px; background: rgba(255,255,255,0.3); position: relative; margin-left: 20px;}
.scroller_bar::before{content:''; display: block; width: 50%; height: 2px; background: #fff; position: absolute; top: 0; left: 0; animation: scrollDown 2s infinite linear alternate;}
@keyframes scrollDown {
    0%{left: 0;}
    50%{left: 50%;}
    100%{left: 0;}
}
.scroller_top{position: fixed; bottom: 40px; right: 80px; z-index: 5; display: block; width: 60px; height: 60px; border: 1px solid #ccc; border-radius: 100%; background: url('../images/common/ico/ico_arw_top.png') no-repeat center 16px / 12px 14px; text-align: center; transition: opacity 1s, visibility 1s;}
.scroller_top span{font-family: 'Poppins', sans-serif; font-size: 14px; color: #ccc; letter-spacing: -0.025em; font-weight: 500; display: block; margin-top: 32px;}
.scroller.active .scroller_top{visibility: hidden; opacity: 0;}

/* 파트별 내용 */

/* visual */
.visual_wrapper{width: 100%; height: 100vh; position: relative; overflow: hidden;}
.visual_bg{position: absolute; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; z-index: 5; transform: scale(1.1) rotate(0.001deg); transition-delay: 2s;}
.visual .main_cont{z-index: 10; padding-top: 12.8%;}
.visual_tit,.visual_desc{letter-spacing: -0.025em; opacity: 0; transform: translateX(30px); color: #fff;}
.visual_tit{font-size: 56px; font-weight: 700;  line-height: 1.3;}
.visual_desc{font-size: 20px; line-height: 1.6; margin-top: 36px;}
.visual .main_more{margin-top: 54px; opacity: 0; transform: translateX(30px);}

.swiper-slide-active .visual_bg{transform: scale(1) rotate(0); transition: transform 5s; transition-timing-function: ease;}
.swiper-slide-active .visual_tit, .swiper-slide-active .visual_desc, .visual .swiper-slide-active .main_more{transform: translateX(0); opacity: 1; transition: transform 2s, opacity 2s;}
.swiper-slide-active .visual_desc{transition-delay: .3s;}
.visual .swiper-slide-active .main_more{transition-delay: .5s;}

/* visual Controls */
.visual_control{position: absolute; bottom:80px; left:50%; transform: translateX(-50%); z-index: 5; padding: 0 51px;}
.visual_pagi{font-size: 0;}
.visual_control .swiper-pagination-bullet{width: 80px; height: 2px; border-radius: 0; margin-left: 5px; position: relative; background: rgba(255,255,255,0.4); opacity: 1;}
.visual_control .swiper-pagination-bullet:first-child{margin-left: 0;}
.visual_control .swiper-pagination-bullet-active::before{content:''; display: block; width: 0; height: 100%; position: absolute; top: 0; left: 0; background: #fff; animation: progressWidth 5s linear forwards;}
.visual_control .stop .swiper-pagination-bullet.swiper-pagination-bullet-active::before{animation: none; width: 100%;}
.visual_control .swiper-pagination-bullet-active::after{content:''; display: block; width: 10px; height: 10px; border-radius: 100%; position: absolute; top: -4px; left: 0; margin-left: -5px; background: #fff; animation: progressPos 5s linear forwards;}
.visual_control .stop .swiper-pagination-bullet.swiper-pagination-bullet-active::after{display: none; animation: none;}
.visual_prev,.visual_next{display: block; width: 30px; height:30px; position: absolute; top: 0; margin-top: -14px; background-size: 12px 22px; background-position: center; background-repeat: no-repeat;}
.visual_prev{left: 0; background-image: url('../images/main/ico/ico_arw_left_12x22.png');}
.visual_next{right: 0; background-image: url('../images/main/ico/ico_arw_right_12x22.png');}
@keyframes progressWidth {
    0%{width: 0;}
    100%{width: 100%;}
}
@keyframes progressPos {
    0%{left: 0;}
    100%{left: 100%;}
}

/* mission */
.mission{height: 100%; background: url('../images/main/bg/bg_mission.jpg') no-repeat center / cover;}
.mission .container{height: 100%; display: flex; align-items: center; justify-content: end;}
.mission_wrapper{padding-right: 40px; float: right;}
.mission_iconList{font-size: 0; margin-top: 43px; margin-left: -10px;}
.mission_icon{display: inline-block; width: 90px; vertical-align: top; margin-left: 60px;}
.mission_icon:first-child{margin-left: 0;}
.mission_icon span{display: block; text-align: center; font-size: 18px; font-weight: 500; letter-spacing: -0.025em; white-space: nowrap; color: #fff; padding-top: 88px; background-position: center top; background-repeat: no-repeat; background-size: 70px;}
.mission_customer{background-image: url('../images/main/ico/ico_hand.png');}
.mission_expert{background-image: url('../images/main/ico/ico_expert.png');}
.mission_logis{background-image: url('../images/main/ico/ico_logis.png');}
.mission .main_more{margin-top: 60px;}

/* business */
.business{height: 100%; background: #fff url('../images/main/bg/bg_business.png') no-repeat left top / 478px 587px; position: relative;}
.business .main_cate{color: #4166b0;}
.business .main_tit{color: #333;}
.business .main_more{height: auto; line-height: 1; padding: 0; border-radius: 0; margin-top: 34px;}
.business .main_more::before{display: none;}
.business .main_more span{color: #999;}
.business_controls{margin-top: 58px; font-size: 0;}
.business_prev, .business_next{display: inline-block; vertical-align: top; width: 32px; height: 16px; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative;}
.business_prev{background-image: url('../images/main/ico/ico_arw_left_32x16.png');}
.business_next{background-image: url('../images/main/ico/ico_arw_right_32x16.png'); margin-left: 41px;}
.business_next::before{content:""; display: block; width: 1px; height: 16px; background: #ddd; position: absolute; top: 0; left: -20px;}
.business_slide{position: absolute; top: 50%; left: calc(50% + 100px ); width: calc(50% - 100px); transform: translateY(-50%) translateY(13px);}
.business_slide .swiper-slide{width: auto;}
.business_item{display: block; font-size: 32px; font-weight: 700; letter-spacing: -0.025em; margin-top: 23px; line-height: 1.2;}

/* careers */
.careers{height: 100%; background: url('../images/main/bg/bg_career.jpg') no-repeat center / cover;}
.careers .main_more{margin-top: 73px;}
.careers .main_more span{font-family: 'Noto Sans KR', sans-serif;}

/* contact */
.contact{height: 100%; background: url('../images/main/bg/bg_contact.jpg') no-repeat center / cover;}
.contact .main_cont{padding-top: 14.5%;}
.contact_wrapper{display: flex;}
.contact .main_tit{flex-grow: 1.2;}
.contact_info{padding-top: 36px; flex-grow: 1;}
.contact_desc{font-size: 20px; font-weight: 500; letter-spacing: -0.025em; color: #fff; margin-bottom: 30px;}
.contact_tel,.contact_mail{display: inline-block; vertical-align: top; font-family: 'Poppins',sans-serif; font-size: 18px; letter-spacing: -0.025em; color: #fff;}
.contact_tel::before{content:''; display: inline-block; width: 21px; height: 16px; vertical-align: middle; background: url('../images/common/ico/ico_tel.png') no-repeat center / cover;}
.contact_mail{margin-left: 30px;}
.contact_mail::before{content:''; display: inline-block; width: 22px; height: 16px; vertical-align: middle; background: url('../images/common/ico/ico_mail.png') no-repeat center / cover;}
.contact_tel span,.contact_mail span{display: inline-block; vertical-align: middle; margin-left: 12px;}
.contact .main_more{margin-top: 55px;}