@charset "UTF-8";
/* 24.11.22 tgkim */
/* 24.12.12 Edit - Hyeok */
.ban01 {
	right: -300px;
}

/* newkeep add CSS */
.common_ban.renew { background: #f4f4f4; }
.c_ban_txt01.renew, .c_ban_txt02.renew { color: #121212; }
.c_ban_txt02 span { font-weight:300; }
.common_ban .one_btn a { display:inline-block; justify-content:center; align-items:center; margin-top:30px; padding:15px 25px; box-sizing:border-box; font-size:18px; color:#FFF; letter-spacing:-0.02em; border:1px solid #022D81; transition:all .3s; background: #022D81;}
.common_ban .one_btn a:hover {color:#022D81; border: #022D81 1px solid; transition:all .3s; background: none; }


/* transport section 01 - service */
.c_sec01 { padding:140px 0; }
.t_service_area { width:100%; height:491px; background:url('../../img/transport/service_bg.png')no-repeat center; background-size:cover; position:relative; }
.t_service_area .line_bar { width:100%; height:6px; background: linear-gradient(90deg, rgba(118,164,255,1) 0%, rgba(2,45,129,1) 100%); position:absolute; top:151px; z-index:0; }
.t_service_area .item_inner { display:flex; justify-content:space-between; max-width:1220px; margin:0 auto; padding-top:100px; position:relative; z-index:10; }
.t_service_area li { display:flex; flex-direction:column; align-items:center; width:240px; padding-top:30px; box-sizing:border-box; }
.t_service_area li .t_service_txt01 { margin:30px 0 18px; font-size:26px; font-weight:500; color:#000; letter-spacing:-0.03em; }
.t_service_area li .t_service_txt02 { font-size:20px; color:#505967; letter-spacing:-0.03em; line-height:36px; }

/* transport section 02 - system */
.c_sec02 .inner { padding:140px 0; align-items:center; flex-direction:column; position:relative; }
.system_tab { display:flex; justify-content:space-evenly; width:100%; margin-top:100px; border-bottom:1px solid #DADEE3; }
.system_tab li { display:flex; align-items:center; padding-bottom:21px; box-sizing:border-box; position:relative; cursor:pointer; }
.system_tab li:hover,
.system_tab li.active { border-bottom:2px solid #022D81; }
.system_tab li p { font-size:26px; color:#505967; letter-spacing:-0.03em; line-height:29px; }
.system_tab li:hover p,
.system_tab li.active p { font-weight:500; color:#022D81; }
.system_box { display:none; margin-top:60px; }
.system_box.active { display:flex; align-items:center; }
.system_box .ani_box { display:inline-flex; justify-content:center; width:680px; height:501px; border-radius:20px; position:relative; overflow:hidden; background-size:cover !important; }
.system_box .ani_box img { position:absolute; }
#sys01.system_box .ani_box .ani_img01 { bottom:32px; margin:0 auto; box-shadow:0 0 30px rgba(0,0,0,10%); }
#sys02.system_box .ani_box .ani_img01 { bottom:40px; box-shadow:0 0 30px rgba(0,0,0,10%); animation:zoomIn; animation-duration:1s; }
#sys02.system_box .ani_box .ani_img01 { bottom:40px; box-shadow:0 0 30px rgba(0,0,0,10%); animation:zoomIn; animation-duration:1s; }
#sys03.system_box .ani_box { background-size:contain !important; }
#sys03.system_box .ani_box .ani_img01 { width:100%; height:100%; object-fit:contain; }
#sys03.system_box .ani_box .ani_img02 { width:100%; height:100%; object-fit:contain; }
#sys03.system_box .ani_box .ani_img03 { bottom:90px; right:35px; box-shadow:0 0 30px rgba(0,0,0,10%); object-fit:contain; }
#sys03.system_box .ani_box .notice { position:absolute; bottom:-30px; right:40px; opacity:0; transition:all 0.3s; }
#sys03.system_box.on .ani_box .notice { bottom:50px; opacity:1; transition:all 0.3s; }
#sys04.system_box .ani_box { background-size:contain !important; }
#sys04.system_box .ani_box .ani_img01 { width:100%; height:100%; object-fit:contain; }
#sys04.system_box .ani_box .ani_img02 { bottom:50px; box-shadow:0 0 30px rgba(0,0,0,10%); }

.sys_txt_box { margin-left:60px; }
.sys_txt_box .sys_txt01 { margin-bottom:7px; font-size:20px; font-weight:500; letter-spacing:-0.03em; color:#3BA3FD; }
.sys_txt_box .sys_txt02 { margin-bottom:18px; font-size:30px; font-weight:500; letter-spacing:-0.03em; color:#292929; }
.sys_txt_box .sys_txt03 { font-size:20px; letter-spacing:-0.03em; color:#292929; line-height:1.4; }
.marker { position:absolute; bottom:0; opacity:0; }

/* transport section 03 - moving */
.c_sec03 { background:#F9FAFB; }
.c_sec03 .inner { padding:140px 0; align-items:center; flex-direction:column; }
.swiper_normal { width:100%; margin-top:100px; padding:20px 20px 110px; }
.swiper_normal .swiper-slide { width:380px; height:294px; padding:40px 30px; border-radius:10px; box-sizing:border-box; background:#FFF; box-shadow:0 0 20px rgba(0,0,0,10%); }
.swiper_normal .swiper-slide .nor_txt01 { margin-top:40px; font-size:26px; font-weight:500; color:#292929; letter-spacing:-0.03em; }
.swiper_normal .swiper-slide .nor_txt02 { margin-top:12px; font-size:20px; color:#292929; letter-spacing:-0.03em; line-height:1.4; }
.swiper_normal .swiper-button-prev,
.swiper_normal .swiper-button-next { width:53px; height:53px; top:auto; bottom:0; outline:none; }
.swiper_normal .swiper-button-prev,
.swiper-rtl .swiper-button-next { left:calc(50% - 46px); right:auto; }
.swiper_normal .swiper-button-next,
.swiper-rtl .swiper-button-prev { left:calc(50% + 46px); right:auto; }
.swiper_normal .swiper-button-prev.swiper-button-disabled,
.swiper_normal .swiper-button-next.swiper-button-disabled { opacity:1; }

/* transport section 04 - pick_area */
.c_sec04 .inner { padding:140px 0; align-items:center; flex-direction:column; }
.pick_area { display:flex; justify-content:center; flex-wrap:wrap; width:calc(100% - 40px); margin:100px auto 0; }
.pick_area li { display:flex; flex-direction:column; justify-content:flex-end; align-items:center; width:190px; height:190px; margin:0 20px 14px 0; padding-bottom:36px; box-sizing:border-box; border:1px solid #9BA7B9; border-radius:10px; background:#FFF; }
.pick_area li:nth-child(6),
.pick_area li:last-child { margin-right:0; }
.pick_area li:hover,
.pick_area li.on { border:1px solid #3BA3FD; transition:all 0.3s; }
.pick_area li .pick_txt { font-size:20px; color:#202020; letter-spacing:-0.03em; }
.pick_area li:hover .pick_txt,
.pick_area li.on .pick_txt { font-weight:500; color:#3BA3FD; }
.pick_area li .img_box { width:100%; height:131px; position:relative; }
.pick_area li .img_box img { position:absolute; bottom:23px; left:50%; transform:translateX(-50%); }
.pick_area li .img_box img.base { opacity:1; transition:all 0.3s; }
.pick_area li .img_box img.on { opacity:0; transition:all 0.3s; }
.pick_area li:hover .img_box img.base { opacity:0; transition:all 0.3s; }
.pick_area li:hover .img_box img.on { opacity:1; transition:all 0.3s; }
.swiper_pro .swiper-slide:hover .img_box,
.swiper_pro .swiper-slide-active .img_box { background:#3BA3FD; transition:all 0.3s; }
.swiper_pro .swiper-slide:hover .img_box img.off,
.swiper_pro .swiper-slide-active .img_box img.off { opacity:0; transition:all 0.3s; }
.swiper_pro .swiper-slide:hover .img_box img.on,
.swiper_pro .swiper-slide-active .img_box img.on { opacity:1; transition:all 0.3s; }

/* transport section 05 - info */
.c_sec05 { background:#F9FAFB; }
.c_sec05 .inner { padding:140px 0; align-items:center; flex-direction:column; }
.info_box { width:100%; height:753px; margin-top:100px; position:relative; }
.info_box .info01 { position:absolute; top:0; right:20px; }
.info_box .info02 { position:absolute; left:20px; bottom:-40px; }
.info_box .info03 { position:absolute; left:210px; bottom:0; }
.info_mo { display:none; }

/* transport section 06 - map */
.c_sec06 .inner { padding:140px 0; align-items:center; flex-direction:column; }
.c_sec06 .inner .m_txt02 { margin-top:14px; line-height:1.4; }
.map_area_pc { margin-top:100px; }
.map_area_pc img { pointer-events:none; }
.map_mo { display:none; }

/* transport section 07 - step */
.c_sec07 { background:#F9FAFB; }
.c_sec07 .inner { padding:140px 0; align-items:center; flex-direction:column; }
.t_step_area { display:flex; justify-content:space-between; width:100%; margin-top:100px; }
.t_step_area li { display:flex; flex-direction:column; align-items:center; width:302px; min-height:417px; padding:40px 20px 20px; box-sizing:border-box; border-radius:16px; background:#FFF; position:relative; }
.t_step_area li:before { display:block; width:62px; height:26px; border-radius:17px; font-size:14px; color:#FFF; line-height:26px; text-align:center; position:absolute; top:-13px; left:calc(50% - 31px); }
.t_step_area li:nth-child(1):before { content:'STEP 1'; background:#123891; }
.t_step_area li:nth-child(2):before { content:'STEP 2'; background:#505967; }
.t_step_area li:nth-child(3):before { content:'STEP 3'; background:#123891; }
.t_step_area li:nth-child(4):before { content:'STEP 4'; background:#505967; }
.t_step_area li:after { display:block; width:50px; height:50px; content:''; background:url('../../img/transport/t_step_arrow.png') no-repeat center; border-radius:50%; box-shadow:0 0 20px rgba(0,0,0,10%); position:absolute; top:69px; right:-34px; z-index:20; }
.t_step_area li:last-child:after { display:none; }
.t_step_area li .img_area { text-align:center; }
.t_step_area li .cont_area { width:100%; }
.t_step_area li .step_txt { margin-top:14px; font-size:20px; font-weight:500; color:#292929; letter-spacing:-0.03em; }
.t_step_area li.b_step .step_txt { color:#022D81; }
.t_step_area li .cont_box { width:100%; margin-top:10px; padding:20px; border-radius:10px; box-sizing:border-box; text-align:center; background:#F9FAFB; }
.t_step_area li .cont_box:nth-child(3) { margin-top:20px; }
.t_step_area li .cont_box .cont_txt01 { margin-bottom:10px; font-size:16px; font-weight:500; color:#022D81; letter-spacing:-0.03em; }
.t_step_area li .cont_box .cont_txt02 { font-size:20px; color:#292929; letter-spacing:-0.03em; line-height:30px; }
.t_step_area li .cont_box .cont_txt02 span { font-weight:500; }
.t_step_area li.b_step .cont_box { background:#F1F5FC; }
.t_step_area li.b_step .cont_box .cont_txt02 span { font-size:16px; color:#022D81; }


@media all and (max-width: 1024px) {
	.common_ban { height:240px; }
	.common_ban .inner { justify-content:flex-start; padding:30px 5% 0; box-sizing:border-box; }
	.ban01 { width:250px; bottom:20px; right:-40px; z-index:0; }
	.c_ban_txt01 { margin-bottom:10px; font-size:25px; line-height:1.2; position:relative; z-index:2; }
	.c_ban_txt02 { font-size:16px; line-height:1.4; position:relative; z-index:2; }
	.c_ban_txt01 span { display: block; }
	.c_ban_txt02 span { display: block; }
	.m_txt01 { margin-bottom:8px; font-size:22px; line-height:1.4; }
	.m_txt01 span { display: block; }
	.m_txt02 { margin-bottom:8px; font-size:15px; line-height:1.4; }
	.m_txt02 span { display: block; }
	.common_ban .one_btn a { position: absolute; bottom: 0; left: 0; right: 0; z-index:0; width:100%; margin:0 auto; text-align:center; }

	.c_sec01 { padding:70px 0 0; }
	.t_service_area { height:300px; }
	.t_service_area .line_bar { top:101px; }
	.t_service_area .item_inner { flex-wrap:nowrap; justify-content:stretch; align-items:stretch; width:100%; padding-top:50px; overflow-x:scroll; }
	.t_service_area li { min-width:130px; width:33%; }
	.t_service_area li .t_service_txt01 { margin:15px 0 10px; font-size:15px; }
	.t_service_area li .t_service_txt02 { font-size:13px; line-height:1.4; }

	.c_sec02 .inner { padding:70px 5%; box-sizing:border-box; }
	.system_tab { width:100%; margin-top:50px; }
	.system_tab li p { padding:0 15%; box-sizing:border-box; font-size:15px; text-align:center; word-break:break-all; line-height:20px; }
	.system_box { margin-top:30px; }
	.system_box.active { flex-wrap:wrap; width:100%; }
	.system_box .ani_box { width:100%; height:300px; background-size:contain !important; }
	.system_box .ani_box img { width:fit-content; object-fit:contain; image-rendering:-webkit-optimize-contrast; }

	#sys01.system_box .ani_box .ani_img01 { max-height:48px; }
	#sys02.system_box .ani_box .ani_img01 { max-width:100%; }
	#sys02.system_box .ani_box .ani_img02 { max-height:300px; }
	#sys03.system_box .ani_box .ani_img03 { max-height:105px; right:calc(50% - 183px); }
	#sys03.system_box.on .ani_box .notice { font-size:0.75em; }
	#sys04.system_box .ani_box .ani_img02 { max-width:90%; bottom:30px; }

	.sys_txt_box { margin:25px 0 0; }
	.sys_txt_box .sys_txt01 { display:inline-block; margin-bottom:0; font-size:13px; color:#022D81; }
	.sys_txt_box .sys_txt02 { display:inline-block; margin-bottom:0; font-size:18px; }
	.sys_txt_box .sys_txt03 { margin-top:12px; font-size:15px; line-height:1.4; }

	.c_sec03 .inner { padding:70px 5%; box-sizing:border-box; }
	.swiper_normal { margin-top:50px; padding:0 0 100px; overflow:visible; }
	.swiper_normal .swiper-slide { width:230px; height:auto; padding:20px 15px; }
	.swiper_normal .swiper-slide > img { height:50px; }
	.swiper_normal .swiper-slide .nor_txt01 { margin-top:20px; font-size:15px; }
	.swiper_normal .swiper-slide .nor_txt02 { margin-top:6px; font-size:13px; }
	.swiper_normal .swiper-button-prev,
	.swiper_normal .swiper-button-next { width:32px; height:32px; }
	.swiper_normal .swiper-button-prev img,
	.swiper_normal .swiper-button-next img { width:100%; }
	.swiper_normal .swiper-button-prev,
	.swiper-rtl .swiper-button-next { left:calc(50% - 30px); transform:translateX(-50%); }
	.swiper_normal .swiper-button-next,
	.swiper-rtl .swiper-button-prev { left:calc(50% + 30px); transform:translateX(-50%); }

	.c_sec04 .inner { padding:70px 5%; box-sizing:border-box; }
	.pick_area { justify-content:space-between; width:100%; margin:50px auto 0; }
	.pick_area li { width:calc((100% - 22px)/3); height:auto; margin:0 0 10px 0; padding:20px 0; }
	.pick_area li .img_box { width:80px; height:80px; }
	.pick_area li .img_box img { width:100%; }
	.pick_area li .pick_txt { font-size:13px; }

	.c_sec05 .inner { padding:70px 5%; box-sizing:border-box; }
	.info_box { display:none; }
	.info_mo { display:block; margin-top:50px; }
	.info_mo img { width:100%; }

	.c_sec06 .inner { padding:70px 5%; box-sizing:border-box; }
	.map_area_pc { display:none; }
	.map_mo { display:block; width:100%; margin-top:50px; }
	.map_tab { display:flex; justify-content:center; align-items:center; width:fit-content; margin:0 auto; padding:5px; border-radius:30px; border:1px solid #DADEE3; box-sizing:border-box; background:#F9FAFB; }
	.map_tab li { padding:5px 20px; box-sizing:border-box; font-size:15px; font-weight:300; color:#505967; letter-spacing:-0.03em; transition:all 0.3s; }
	.map_tab li.on { color:#FFF; border-radius:30px; background:#022D81; transition:all 0.3s; }
	.maping { display:none; width:100%; margin-top:50px; }
	.maping img { width:100%; }
	.maping.on { display:block; }

	.c_sec07 .inner { padding:70px 5%; box-sizing:border-box; }
	.t_step_area { flex-direction:column; flex-wrap:wrap; margin-top:50px; }
	.t_step_area li { flex-direction:row; justify-content:space-between; width:100%; min-height:auto; margin-bottom:40px; padding:20px 15px; }
	.t_step_area li:last-child { margin-bottom:0; }
	.t_step_area li .img_area { min-width:100px; }
	.t_step_area li .img_area .img_box img { height:40px; }
	.t_step_area li .cont_area { display:flex; flex-direction:column; align-items:flex-end; width:calc(100% - 100px); }
	.t_step_area li .cont_box { width:90%; margin:0 0 8px; padding:9px; }
	.t_step_area li .cont_box:last-child { margin:0; }
	.t_step_area li .step_txt { margin-top:8px; font-size:15px; }
	.t_step_area li:after { width:25px; height:25px; top:auto; bottom:-15px; left:calc(50% - 12px); right:auto; background-size:cover; transform:rotate(90deg); }
	.t_step_area li .cont_box .cont_txt01 { margin-bottom:5px; font-size:12px; }
	.t_step_area li .cont_box .cont_txt02 { font-size:13px; line-height:1.2 }
	.t_step_area li.b_step .cont_box .cont_txt02 span { font-size:12px; }
}

@media all and (max-width: 400px) {
	#sys03.system_box .ani_box .ani_img03 { right:10px; }
}