﻿@charset "UTF-8";
/* 메인 공통 */
.main_more{font-family: 'Poppins', sans-serif; font-weight: 500; letter-spacing: -0.025em; color: #fff; display: inline-block; height: 55px; line-height: 55px; padding: 0 27.5px 0 27.5px; position: relative; border-radius: 55px; overflow: hidden; font-size: 12px;}
.main_more::before{content:''; display: block; width: 55px; height: 55px; border-radius: 55px; background: #4166b0; opacity: 0.5; position: absolute; top: 0; left: 0; z-index: 0;}
.main_more span{z-index: 5; position: relative;}
.main_cont{display: flex; flex-direction: column; width: 100%; height: 100%; align-items: center; justify-content: center; text-align: center;}
.main_cate{font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: -0.025em; color: #91b6ff;}
.main_tit{font-size: 25px; letter-spacing: -0.025em; color: #fff; line-height: 1.3; margin-top: 16px;}
.main_tit strong{font-weight: 700;}
.main_desc{font-size: 13px; letter-spacing: -0.025em; color: #555; margin-top: 13px; line-height: 1.5;}

/* scroll Down */
.scroller_down{position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 5;}
.scroller_txt{display: block; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: -0.025em; color: #fff;}
.scroller_bar{width: 1px; height: 35px; background: rgba(255,255,255,0.3); position: relative; margin: 10px auto 0;}
.scroller_bar::before{content:''; display: block; width: 100%; height: 15px; background: #fff; position: absolute; top: 0; left: 0; animation: scrollDown 2s infinite linear alternate;}
@keyframes scrollDown {
    0%{top: 0;}
    50%{top: 50%;}
    100%{top: 0;}
}
.scroller-black .scroller_txt{color: #555;}
.scroller-black .scroller_bar{background: rgba(0,0,0,0.3);}
.scroller-black .scroller_bar::before{background: #555;}


.scrollTop{position: fixed; bottom: 25px; right: 20px; z-index: 5; display: block; width: 45px; height: 45px; border: 1px solid #ccc; border-radius: 100%; background: url('../images/main/ico/ico_top.png') no-repeat center 10px / 9px 12.5px; text-align: center; transition: opacity 1s, visibility 1s; opacity: 0; visibility: hidden;}
.scrollTop.active{visibility: visible; opacity: 1;}
.scrollTop span{font-family: 'Poppins', sans-serif; font-size: 12px; color: #ccc; letter-spacing: -0.025em; font-weight: 500; display: block; margin-top: 25px;}


/* visual */
.visual{height: 100%;}
.visual_wrapper{width: 100%; height: 100%; 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_cont{z-index: 10; position: absolute; top: 23.1%; left: 0; width: 100%; padding: 0 20px;}
.visual_tit,.visual_desc{letter-spacing: -0.025em; opacity: 0; transform: translateX(30px); color: #fff;}
.visual_tit{font-size: 30px; font-weight: 700;  line-height: 1.3;}
.visual_desc{font-size: 13px; line-height: 1.5; margin-top: 21px;}
.visual .main_more{margin-top: 27px; 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{width: 100%; position: absolute; bottom:17.7vh; left:0; z-index: 5; padding: 0 50px; box-sizing: border-box;}
.visual_pagi{font-size: 0;}
.visual_control .swiper-pagination-bullet{width: calc((100% - 10px) / 3); height: 1px; 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: 8px; height: 8px; border-radius: 100%; position: absolute; top: -3px; left: 0; margin-left: -4px; 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: 50px; height:50px; position: absolute; top: 0; margin-top: -25px; background-size: 10px 17px; background-position: center; background-repeat: no-repeat;}
.visual_prev{left: 0; background-image: url('../images/main/ico/ico_arw_left_20x34.png');}
.visual_next{right: 0; background-image: url('../images/main/ico/ico_arw_right_20x34.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_iconList{font-size: 0; margin-top: 27px; text-align: center;}
.mission_icon{display: inline-block; width: 45px; height: 70px; vertical-align: top; margin-left: 40px; position: relative;}
.mission_icon:first-child{margin-left: 0;}
.mission_icon span{position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: block; height: 70px; padding-top: 55px; box-sizing: border-box; text-align: center; font-size: 13px; font-weight: 500; letter-spacing: -0.025em; white-space: nowrap; color: #fff; background-position: center top; background-repeat: no-repeat; background-size: 45px;}
.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: 30px;}

/* business */
.business{height: 100%; background: #fff url('../images/main/bg/bg_business.png') no-repeat left top / 47%;}
.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: 21px;}
.business .main_more::before{display: none;}
.business .main_more span{color: #999;}
.business_slide{margin-top: 36px;}
.business_slide .swiper-slide{width: 53.6%;}
.business_item{display: block; font-size: 15px; font-weight: 700; letter-spacing: -0.025em; margin-top: 10px; line-height: 1.2; text-align: left;}

/* careers */
.careers{height: 100%; background: url('../images/main/bg/bg_careers.jpg') no-repeat center / cover;}
.careers .main_more{margin-top: 37px;}
.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_desc{font-size: 13px; letter-spacing: -0.025em; color: #fff; line-height: 1.6; margin-top: 23px;}
.contact_info{margin-top: 15px; padding: 21px 45px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255, .24); font-size: 0; text-align: center;}
.contact_mail{margin-top: 7px;}
.contact_tel,.contact_mail{display: block; font-family: 'Poppins',sans-serif; font-size: 13px; letter-spacing: -0.025em; color: #fff;}
.contact_tel::before{content:''; display: inline-block; width: 13px; height: 10.5px; vertical-align: middle; background: url('../images/main/ico/ico_tel.png') no-repeat center / cover;}
.contact_mail::before{content:''; display: inline-block; width: 15px; height: 10.5px; vertical-align: middle; background: url('../images/main/ico/ico_mail.png') no-repeat center / cover;}
.contact_tel span,.contact_mail span{display: inline-block; vertical-align: middle; margin-left: 5px;}
.contact .main_more{margin-top: 40px;}