@charset "utf-8";

.about_netpx_wrap { position: relative; overflow: hidden; }
.sub .about_netpx_wrap .linemap { position: absolute; top: 0; right: 0; left: 0; max-width: 1280px; margin: auto; z-index: 1; }
.sub .about_netpx_wrap .location > li .home { color: #e9e9e9; }
.sub .about_netpx_wrap .location > li strong { color: #fff; }
.sub .about_netpx_wrap .location > li:before { background: url('//img.netpx.co.kr/front/netpx_v3/skin/images/common/location_arrow_white.png') no-repeat 0 0 / 6px }
.about_netpx_wrap .kttl { font-size: 22px; } /* 한글타이틀 */
.about_netpx_wrap .ettl { position: relative; padding-bottom: 20px; font-size: 30px; font-weight: bold; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; } /* 영문타이틀 */
.about_netpx_wrap .ettl::after { content: ''; position: absolute; bottom: 0; left: 0; width: 85px; height: 3px; background-color: #107239; } 
.about_netpx_wrap .ettl.ettl--right::after { right: 0; left: auto; } 
.about_netpx_wrap .ettl.ettl--center { display: inline-block; padding-bottom: 15px; }
.about_netpx_wrap .ettl.ettl--center::after { content: ''; position: absolute; right: -4px; left: -4px; width: auto; }
.about_netpx_wrap .ettl.ettl--ci { display: inline-block; padding-bottom: 10px; }
.about_netpx_wrap .ettl.ettl--ci::after { content: ''; position: absolute; right: -80px; left: -80px; width: auto; }
.about_netpx_wrap .text { font-size: 17px; font-weight: 500; line-height: 30px; letter-spacing: -0.02em; }

.about_bg { position: relative; padding-top: 23%; background-attachment: fixed; overflow: hidden; }
.about_bg .fixed_hidden { clip: rect(0, auto, auto, 0); position: absolute; top: 0; right: 0; left: 0; margin: auto;width: 100%; height: 100%; }
.about_bg .fixed_hidden .bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; margin: auto; min-width: 100%; }
.about_bg .fixed_hidden .bg img { width: 100%; }
.about_bg .inner.about_tab { position: absolute; bottom: 0; right: 0; left: 0; background-color: #fff;}
.about_top { max-width: 990px; margin: 85px auto 60px; text-align: left; }
.about_top p { font-size: 23px; letter-spacing: -0.1em; }
.about_top .eng { font-size: 55px; font-weight: 700; color: #231f20; line-height: 1.3; text-transform: uppercase; }

/* 우리의 목적 */
.about_our { position: relative; font-size: 0; }
.about_our .imgWrap { position: absolute; top:0; right: 950px; left: 0; width: auto; margin: auto; }
.about_our .imgWrap .loader { height: 390px; background-position: right 0; background-repeat: no-repeat; background-size: cover; }
.about_our .contents { display: inline-block; width: 950px; min-height: 390px; box-sizing: border-box; }
.about_our.about_our--mission .imgWrap { right: 0; left: 950px; }

/* 우리의 서비스 */
.about_service { position: relative; max-width: 1280px; margin: auto; padding-top: 150px; padding-bottom:  95px; border-bottom: 1px solid #ebebeb; box-sizing: border-box; }
.about_service .line { position: absolute; top: 0; right: 0; left: 0; margin: auto; width: 1px; background-color: #e9e9e9;  }
.about_service .about_service--ttl { position: absolute; top: 200px; right: 0; left: 0; margin: auto; }
.about_service .service_con .cttl { font-size: 25px; font-weight: bold; }
.about_service .service_con--absolute { position: absolute; top: 420px; right: 0; }
.about_service .service_con--align .img,
.about_service .service_con--align .right_con { display: inline-block; }
.about_service .service_con--align .right_con { vertical-align: bottom; }

/* 파트너 */
.about_partner { max-width: 1600px; margin: 90px auto; font-size: 0; text-align: center; }
.about_partner .ttl { margin-top: 20px; font-size: 22px; color: #231f20; }
.about_partner .about_partner--list ul li { display: inline-block; margin-top: 20px; }

/* CI */
.about_ci { padding: 90px 0 100px; background-color: #ebebeb; text-align: center; }
.about_ci .text .bold { font-weight: 900; }

/* 오시는길 */
.about_map { max-width: 1280px; margin: auto; text-align: center; }
.about_map .ttl { font-size: 40px; font-weight: 400; }
.about_map .add { padding-top: 50px; font-size: 20px; font-weight: 300; color: #666; line-height: 60px; }
.about_map .add li { position: relative; display: inline-block; padding: 0 40px; vertical-align: top; }
.about_map .add li.w50p { width: calc(50% - 84px); }
.about_map .add li:first-child::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; height: 60px; background-color: #d7d7d7; }
.about_map .add .add_parking { line-height: 30px; }

/* 모션 */
.motion { opacity: 0; visibility: hidden; transition: all 1s ease-in-out; }
.motion.TRAN { opacity: 1; visibility: visible; }
.motion--scale { transform: scaleX(0); -webkit-transform: scaleX(0); }
.motion--scale.TRAN { transform: scaleX(1); -webkit-transform: scaleX(1); }
.motion--line { height: 0; }
.motion--line.TRAN { height: 180px; }
.motion--top { margin-top: 60px; }
.motion--top.TRAN { margin-top: 0; }
.delay-300ms { transition-delay: 0.3s !important; }
.delay-500ms { transition-delay: 0.5s !important; }
.delay-600ms { transition-delay: 0.6s !important; }
.delay-1000ms { transition-delay: 1s !important; }
.delay-1500ms { transition-delay: 1.5s !important; }
@-webkit-keyframes fadeInDown {
	0% { opacity: 0; transform: translate3d(0, -30%, 0); -webkit-transform: translate3d(0, -30%, 0); }
	100% { opacity: 1; transform: none; -webkit-transform: none; }
}
@keyframes fadeInDown {
	0% { opacity: 0;  transform: translate3d(0, -30%, 0); -webkit-transform: translate3d(0, -30%, 0);}
	100% { opacity: 1; transform: none; -webkit-transform: none; }
}
.fadeInDown { animation-name: fadeInDown; -webkit-animation-name: fadeInDown; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-delay: 0.5s; }
@-webkit-keyframes fadeInUp {
	0% { opacity: 0; transform: translate3d(0, 30%, 0); -webkit-transform: translate3d(0, 30%, 0);}
	100% { opacity: 1; transform: none; -webkit-transform: none; }
}
@keyframes fadeInUp {
	0% { opacity: 0; transform: translate3d(0, 30%, 0); -webkit-transform: translate3d(0, 30%, 0); }
	100% {opacity: 1; transform: none; -webkit-transform: none; }
}
.fadeInUp { animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-name: fadeInUp; -webkit-animation-name: fadeInUp; animation-delay: 0.5s; }