@charset "utf-8";


body {margin: 0;padding: 0;}

/* 메인 */
#fullpage {position: relative; width: 100%; height: 100vh; overflow: hidden}
#fullpage .f_slide {position: absolute; width: 100%; height: 100vh; top: 100%; left: 0; background-color: #fff; overflow: hidden;}
#fullpage .f_slide.active {transition: top 1.2s;}
#fullpage .f_slide:first-child {top: 0}

/* container 공통 */
.container {position: relative; width: 1200px; height: 100vh; margin: 0 auto;}
.container .imgWrap {position: absolute; left: 0; top: 50%; transform: translateY(-50%)}
.container .infoWrap {position: absolute; top: 50%; left: 662px; transform: translateY(-50%)}
.container .infoWrap h3 {display: inline-block; font-size: 45px; line-height: 55px; color: #000; opacity: 0;}
@keyframes h3 {
	0% {opacity: 0;transform: translateY(20px)}
	100% {opacity: 1;transform: translateY(0)}
}
.active .container .infoWrap h3 {animation: h3 .6s ease-in-out forwards; animation-delay: 2s;}
.container .infoWrap h3 strong {font-weight: bold;}
.container .infoWrap h3 strong span {font-size: 45px; line-height: 55px; font-weight: bold; color: #3259D8}
.container .infoWrap > p {display: block; font-size: 20px; line-height: 27px; color: #000; margin-top: 30px; opacity: 0;}
@keyframes p {
	0% {opacity: 0;transform: translateY(20px)}
	100% {opacity: 1;transform: translateY(0)}
}
.active .container .infoWrap > p {animation: p .6s ease-in-out forwards; animation-delay: 2.4s;}
.container .infoWrap p + p {margin-top: 20px;}
.container .infoWrap .bubbleWrap {margin-top: 39px;font-size: 0; opacity: 0;}
@keyframes bubbleWrap {
	0% {opacity: 0;transform: translateY(20px)}
	100% {opacity: 1;transform: translateY(0)}
}
.active .container .infoWrap .bubbleWrap {animation: bubbleWrap .6s ease-in-out forwards; animation-delay: 3s;}
.container .infoWrap .bubbleWrap .person {display: inline-block; width: 72px; height: 72px; background: url(../images/main/illust_person_01.png)0 0 no-repeat; background-size: 72px 72px;}
.container .infoWrap > span {display: block;position: relative;margin-top: 20px;padding-left: 15px;font-size: 14px;line-height: 18px;color: #878787; font-weight: 400; opacity: 0;}
.container .infoWrap > span:before {content: '※';display: inline-block;position: absolute;top: 0;left: 0;font-size: 14px;line-height: 18px;color: #878787; font-weight: 400;}
.active .container .infoWrap > span {animation: span .6s ease-in-out forwards; animation-delay: 2.5s;}
@keyframes span {
	0% {opacity: 0;transform: translateY(20px)}
	100% {opacity: 1;transform: translateY(0)}
}
.container .infoWrap .speechBubble {display: inline-block;vertical-align: top;position: relative;margin-left: 5px;width: 350px;height: 72px;}
.container .infoWrap .speechBubble:before {content: '';position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 25px;height: 24px;background: url(../images/main/icon_bubble_arrow.png)0 0 no-repeat;background-size: 25px 24px;}
.container .infoWrap .speechBubble .bubble {position: absolute;left: 10px;top: 3px;width: 33px;height: 44px;background-color: #ececec;border-radius: 8px;}
.container .infoWrap .speechBubble p {position: absolute;left: 22px;top: 17px;font-size: 14px;color: #000;line-height: 20px;margin-top: 0;}
.container .infoWrap .speechBubble .el {opacity: 1;}
.active .container .infoWrap .speechBubble .el {animation: el .6s ease-in-out forwards; animation-delay: 3.6s;}
.container .infoWrap .speechBubble .ment {opacity: 0;}
.active .container .infoWrap .speechBubble .ment {animation: ment .6s ease-in-out forwards; animation-delay: 4s;}
@keyframes el {
	0% {opacity: 1;}
	100% {opacity: 0;}
}
@keyframes ment {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes bubble2 {
	0% {width:36px; height: 44px;}
	100% {width:293px; height: 66px;}
}
@keyframes bubble3 {
	0% {width:36px; height: 44px;}
	100% {width:299px; height: 66px;}
}
@keyframes bubble4 {
	0% {width:36px; height: 44px;}
	100% {width:330px; height: 66px;}
}
@keyframes bubble5 {
	0% {width:36px; height: 44px;}
	100% {width:251px; height: 66px;}
}

/* section01 */
#section01 {z-index: 1;}
#section01 .background {position: absolute; left: 0; top: 0; width: 100%; min-width: 1200px; height: 700px; background: url(../images/main/img_main_bg.png)50% 50% no-repeat; background-size: 1920px 700px; background-color: #2678E2}
#section01 .container {position: relative; width: 1200px; margin: 0 auto; padding-left: 78px;}
#section01 .container .textWrap {position: relative; padding-top: 220px; }
#section01 .container .textWrap p {font-size: 26px; line-height: 31px; color: #fff;}
#section01 .container .textWrap h3 {display: block; margin-top: 14px; font-size: 60px; line-height: 72px; color: #fff;}
#section01 .container .textWrap h3 .logo{display: inline-block; vertical-align: middle; font-size: 0; width: 223px; height: 65px; background: url(../images/common/logo_wh.png)0 0 no-repeat; background-size: 223px 54px; margin-right: 3px;}
#section01 .container .textWrap h3 strong {font-size: 60px; line-height: 72px; color: #fff; font-weight: 700;}
#section01 .container .textWrap h3 + p {display: block; font-size: 26px; line-height: 31px; color: #fff; margin-top: 30px;}
#section01 .container .textWrap h3 + p span {font-size: 26px; color: #fff; line-height: 31px; font-weight: 700;}
#section01 .container .textWrap .linkWrap {display: inline-block; position: relative; margin-top: 25px; font-size: 0;}
#section01 .container .textWrap .linkWrap a {display: inline-block; vertical-align: middle; width: 200px; height: 48px; font-size: 0;}
#section01 .container .textWrap .linkWrap a.google {background: url(../images/main/btn_google_h45.png)0 0 no-repeat; background-size: 200px 48px;}
#section01 .container .textWrap .linkWrap a.appStore {background: url(../images/main/btn_app_h45.png)0 0 no-repeat; background-size: 200px 48px;}
#section01 .container .textWrap .linkWrap a + a {margin-left: 13px;}
#section01 .container .mockupWrap {position: absolute; right: -38px; top: 80px; width: 494px;height: 846px;background: url(../images/main/img_main_mockup02.png)0 0 no-repeat; background-size: 499px 846px;}
#section01 .container .mockupWrap .slideWrap {position: absolute;width: 294px;height: 314px;background-color: #fff;left: 101px;top: 325px;}
#section01 .container .mockupWrap .slideWrap .mainSlide {position: relative; width: 294px;}
#section01 .container .mockupWrap .slideWrap .mainSlide .swiper-slide {width: 294px; height: 314px; font-size: 0; background: url(../images/main/img_main_slide01.png)0 0 no-repeat; background-size: 294px 314px;}
#section01 .container .mockupWrap .slideWrap .mainSlide .swiper-slide.s1 {background: url(../images/main/img_main_slide01.png)0 0 no-repeat; background-size: 294px 314px;}
#section01 .container .mockupWrap .slideWrap .mainSlide .swiper-slide.s2 {background: url(../images/main/img_main_slide02.png)0 0 no-repeat; background-size: 294px 314px;}
#section01 .container .mockupWrap .slideWrap .mainSlide .swiper-slide.s3 {background: url(../images/main/img_main_slide03.png)0 0 no-repeat; background-size: 294px 314px;}
#section01 .container .mockupWrap .slideWrap .mainSlide .swiper-slide.s4 {background: url(../images/main/img_main_slide04.png)0 0 no-repeat; background-size: 294px 314px;}
#section01 .container .mockupWrap .slideWrap .mainSlide .slideCar {position: absolute; width: 78px; height: 32px; background: url(../images/main/img_main_slide_car.png)0 0 no-repeat; background-size: 78px 32px; top: 236px; left: 68px; z-index: 111;}
#section01 .container .mockupWrap .slideWrap .mainSlide .slideCar:after {content: '';position: absolute;top: -40px;left: 50%;transform: translateX(-65%);width: 29px;height: 34px;transition: .3s;}
#section01 .container .mockupWrap .slideWrap .mainSlide .slideCar.s1:after {background-image: url(../images/main/icon_slidecar_top01.png);background-size: 29px 34px;background-repeat: no-repeat;}
#section01 .container .mockupWrap .slideWrap .mainSlide .slideCar.s2:after {background-image: url(../images/main/icon_slidecar_top02.png);background-size: 29px 34px; background-repeat: no-repeat;}
#section01 .container .mockupWrap .slideWrap .mainSlide .slideCar.s3:after {background-image: url(../images/main/icon_slidecar_top03.png);background-size: 29px 34px;background-repeat: no-repeat;}
#section01 .container .mockupWrap .slideWrap .mainSlide .slideCar.s4:after {background-image: url(../images/main/icon_slidecar_top04.png);background-size: 29px 34px;background-repeat: no-repeat;}
#section01 .container .mockupWrap .slideWrap .swiper-pagination {width: auto; left: 48.5px; bottom: -33px; font-size: 0;}
#section01 .container .mockupWrap .slideWrap .swiper-pagination .swiper-pagination-bullet {background: #eee; opacity: 1; transition: .3s; width: 11px; height: 11px; margin: 0 3px; border-radius: 50%}
#section01 .container .mockupWrap .slideWrap .swiper-pagination .swiper-pagination-bullet-active {background: #3B5094}

/* section02 */
#section02 {z-index: 2;}
#section02 .container .imgWrap .bg {position: absolute; left: -32px; top: 50%; transform: translateY(-50%); background: url(../images/main/img_s2_bg.png)0 0 no-repeat; width: 648px; height: 372px; background-size: 648px 372px;}
#section02 .container .imgWrap .mockup {position: absolute; left: 42px; top: 50%; transform: translateY(-50%); background: url(../images/main/img_s2_mockup02.png)0 0 no-repeat; width: 500px; height: 866px; background-size: 500px 865.5px; opacity: 0;}
@keyframes mockup2 {
	0% {opacity: 0;transform: translateY(-45%)}
	100% {opacity: 1;transform: translateY(-50%)}
}
#section02.active .container .imgWrap .mockup {animation: mockup2 1s ease-in-out forwards; animation-delay: .4s;}

#section02 .container .imgWrap .police {position: absolute;left: 36px;top: -125px;background: url(../images/main/img_s2_police.png)0 0 no-repeat;width: 251px;height: 269px;background-size: 251px 269px;opacity: 0;}
#section02.active .container .imgWrap .police {animation: opty 1.2s ease-in-out forwards,police2 2s ease-in-out infinite;}
@keyframes police2 {
	0% {transform: translateY(0);}
	50% {transform: translateY(-15px);}
	100% {transform: translateY(0);}
}
@keyframes opty {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
#section02 .container .infoWrap .bubbleWrap .person {display: inline-block; width: 72px; height: 72px; background: url(../images/main/illust_person_01.png)0 0 no-repeat; background-size: 72px 72px;}
#section02.active .container .infoWrap h3 {animation: h3 .6s ease-in-out forwards; animation-delay: 1.2s;}
#section02.active .container .infoWrap > p {animation: p .6s ease-in-out forwards; animation-delay: 1.6s;}
#section02.active .container .infoWrap .bubbleWrap {animation: bubbleWrap .6s ease-in-out forwards; animation-delay: 2.2s;}
#section02.active .container .infoWrap .speechBubble .bubble {animation: bubble2 .6s ease-in-out forwards; animation-delay: 2.4s;}
#section02.active .container .infoWrap .speechBubble .el {animation: el .6s ease-in-out forwards; animation-delay: 2.4s;}
#section02.active .container .infoWrap .speechBubble .ment {animation: ment .6s ease-in-out forwards; animation-delay: 2.8s;}

/* section03 */
#section03 {background-color: #F1F8FE !important; z-index: 3;}
#section03 .container .imgWrap .mockup {position: absolute; left: 548px; top: -416px; background: url(../images/main/img_s3_mockup02.png)0 0 no-repeat; width: 500px; height: 866px; background-size: 500px 866px; opacity: 0; z-index: 2}
@keyframes mockup3  {
	0% {opacity: 0;transform: translateY(5%)}
	100% {opacity: 1;transform: translateY(0%)}
}
#section03.active .container .imgWrap .mockup {animation: mockup3 1s ease-in-out forwards; animation-delay: .4s;}
#section03 .container .imgWrap .map {position: absolute; left: 895px; top: 50%; transform: translateY(10%); background: url(../images/main/img_s3_map.png)0 0 no-repeat; width: 308px; height: 258px; background-size: 308px 258px; opacity: 0; z-index: 1;}
@keyframes map3  {
	0% {opacity: 0;transform: translateY(30%)}
	100% {opacity: 1;transform: translateY(10%)}
}
#section03.active .container .imgWrap .map {animation: map3 .7s ease-in-out forwards; animation-delay: 1s;}
#section03 .container .imgWrap .pop {position: absolute; left: 888px; top: -168px; background: url(../images/main/img_s3_pop.png)0 0 no-repeat; width: 341px; height: 199px; background-size: 341px 199px; opacity: 0; z-index: 2;}
@keyframes pop3  {
	0% {opacity: 0;transform: translateY(-20%)}
	100% {opacity: 1;transform: translateY(0)}
}
#section03.active .container .imgWrap .pop {animation: pop3 .7s ease-in-out forwards; animation-delay: 1.2s;}
#section03 .container .imgWrap .car {position: absolute; left: 516px; top: 254px; background: url(../images/main/img_s3_car.png)0 0 no-repeat; width: 245px; height: 159px; background-size: 245px 159px; opacity: 0; z-index: 2;}
@keyframes car3  {
	0% {opacity: 0;transform: scale(0.9)}
	100% {opacity: 1;transform: scale(1)}
}
#section03.active .container .imgWrap .car {animation: car3 .7s ease-in-out forwards; animation-delay: 1.1s;}
#section03 .container .infoWrap {position: absolute; top: 50%; left: 78px; transform: translateY(-50%)}
#section03 .container .infoWrap .bubbleWrap .person {display: inline-block; width: 72px; height: 72px; background: url(../images/main/illust_person_02.png)0 0 no-repeat; background-size: 72px 72px;}
#section03.active .container .infoWrap h3 {animation: h3 .6s ease-in-out forwards; animation-delay: 1.4s;}
#section03.active .container .infoWrap > p {animation: p .6s ease-in-out forwards; animation-delay: 1.8s;}
#section03.active .container .infoWrap > span {animation: span .6s ease-in-out forwards; animation-delay: 2.2s;}
#section03.active .container .infoWrap .matchArea {display: block;position: relative;margin-top: 20px;font-size: 14px;line-height: 17px;color: #888;font-weight: 400;opacity: 0;animation: span .6s ease-in-out forwards;animation-delay: 2.2s;}
#section03.active .container .infoWrap .matchArea strong {position: relative; display: block; font-size: 14px; font-weight: 600; line-height: 17px; color: #888; padding-left: 18px;}
#section03.active .container .infoWrap .matchArea strong:after {content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; background: url(../images/common/icon_caution.png)0 0 no-repeat; background-size: 14px 14px;}
#section03.active .container .infoWrap .matchArea .area {margin-top: 12px;}
#section03.active .container .infoWrap .matchArea .area li {position: relative;display: block;font-size: 14px;line-height: 17px;color: #888;padding-left: 87px;letter-spacing: -0.04em;text-indent: -77px;}
#section03.active .container .infoWrap .matchArea .area li:after {content: ''; position: absolute; left: 0; top: 8px; width: 2px; height: 2px; border-radius: 50%; background-color: #888;}
#section03.active .container .infoWrap .matchArea .area li + li {margin-top: 8px;}
#section03.active .container .infoWrap .matchArea .matchSub {margin-top: 20px;}
#section03.active .container .infoWrap .matchArea .matchSub li {display: block; font-size: 14px; line-height: 17px; color: #888; font-weight: 400;}
#section03.active .container .infoWrap .matchArea .matchSub li span {font-size: 14px; line-height: 17px; color: #888; font-weight: 600;}
#section03.active .container .infoWrap .matchArea .matchSub li + li {margin-top: 8px;}
#section03.active .container .infoWrap .bubbleWrap {animation: bubbleWrap .6s ease-in-out forwards; animation-delay: 2.6s;}
#section03.active .container .infoWrap .speechBubble .bubble {animation: bubble3 .6s ease-in-out forwards; animation-delay: 2.8s;}
#section03.active .container .infoWrap .speechBubble .el {animation: el .6s ease-in-out forwards; animation-delay: 2.8s;}
#section03.active .container .infoWrap .speechBubble .ment {animation: ment .6s ease-in-out forwards; animation-delay: 3.2s;}

/* section04 */
#section04 {z-index: 4;}
#section04 .container .infoWrap {position: absolute; top: 50%; left: 730px; transform: translateY(-50%)}
#section04 .container .infoWrap .bubbleWrap .person {display: inline-block; width: 72px; height: 72px; background: url(../images/main/illust_person_03.png)0 0 no-repeat; background-size: 72px 72px;}
#section04 .container .imgWrap .mockup {position: absolute; left: 138px; top: 50%; transform: translateY(-50%); background: url(../images/main/img_s4_mockup02.png)0 0 no-repeat; width: 500px; height: 866px; background-size: 500px 866px; opacity: 0; z-index: 2}
@keyframes mockup4  {
	0% {opacity: 0;transform: translateY(-45%)}
	100% {opacity: 1;transform: translateY(-50%)}
}
#section04.active .container .imgWrap .mockup {animation: mockup4 1s ease-in-out forwards; animation-delay: .4s;}
#section04 .container .imgWrap .bu1 {position: absolute;left: 115px;top: -50px;background: url(../images/main/img_s4_bu1.png)0 0 no-repeat;width: 227px;height: 228px;background-size: 227px 228px; z-index: 2; opacity: 0;}
#section04.active .container .imgWrap .bu1 {animation: opty 1.2s ease-in-out forwards,bu1 2s ease-in-out infinite; }
#section04 .container .imgWrap .bu2 {position: absolute;left: 450px;top: -145px;background: url(../images/main/img_s4_bu2.png.png)0 0 no-repeat;width: 209px;height: 173px;background-size: 209px 173px;z-index: 2;opacity: 0;}
#section04.active .container .imgWrap .bu2 {animation: opty 1.2s ease-in-out forwards,bu2 2.5s ease-in-out infinite; }
@keyframes bu1 {
	0% {transform: translateY(0);}
	50% {transform: translateY(-10px);}
	100% {transform: translateY(0);}
}
@keyframes bu2 {
	0% {transform: translateY(0);}
	50% {transform: translateY(-8px);}
	100% {transform: translateY(0);}
}
#section04.active .container .infoWrap h3 {animation: h3 .6s ease-in-out forwards; animation-delay: 1.1s;}
#section04.active .container .infoWrap > p {animation: p .6s ease-in-out forwards; animation-delay: 1.6s;}
#section04.active .container .infoWrap .bubbleWrap {animation: bubbleWrap .6s ease-in-out forwards; animation-delay: 2.2s;}
#section04.active .container .infoWrap .speechBubble .bubble {animation: bubble4 .6s ease-in-out forwards; animation-delay: 2.2s;}
#section04.active .container .infoWrap .speechBubble .el {animation: el .6s ease-in-out forwards; animation-delay: 2.2s;}
#section04.active .container .infoWrap .speechBubble .ment {animation: ment .6s ease-in-out forwards; animation-delay: 2.6s;}

/* section05 */
#section05 {background-color: #F1F8FE !important; z-index: 5;}
#section05 .container .infoWrap {position: absolute; top: 50%; left: 78px; transform: translateY(-50%)}
#section05 .container .infoWrap .bubbleWrap .person {display: inline-block; width: 72px; height: 72px; background: url(../images/main/illust_person_04.png)0 0 no-repeat; background-size: 72px 72px;}
#section05 .container .imgWrap .mockup {position: absolute; left: 789px; top: 50%; transform: translateY(-50%); background: url(../images/main/img_s5_mockup02_1.png)0 0 no-repeat; width: 500px; height: 866px; background-size: 500px 866px; opacity: 0; z-index: 2}
@keyframes mockup5  {
	0% {opacity: 0;transform: translate(-10%,-50%)}
	100% {opacity: 1;transform: translate(0,-50%)}
}
#section05.active .container .imgWrap .mockup {animation: mockup5 1s ease-in-out forwards; animation-delay: .4s;}
#section05 .container .imgWrap .mockup2 {position: absolute; left: 524px; top: 50%; transform: translateY(-49%); background: url(../images/main/img_s5_mockup02_2.png)0 0 no-repeat; width: 394px; height: 682px; background-size: 394px auto; opacity: 0; z-index: 1}
@keyframes mockup25  {
	0% {opacity: 0;transform: translate(10%,-49%)}
	100% {opacity: 1;transform: translate(0,-49%)}
}
#section05.active .container .imgWrap .mockup2 {animation: mockup25 1s ease-in-out forwards; animation-delay: .4s;}
#section05 .container .imgWrap .cco {position: absolute; left: 1086px; top: 222px; background: url(../images/main/img_s5_cco.png)0 0 no-repeat; width: 123px; height: 113px; background-size: 123px 113px; opacity: 0; z-index: 2}
@keyframes cco5  {
	0% {transform: translateY(0);}
	50% {transform: translateY(-10px);}
	100% {transform: translateY(0);}
}
#section05.active .container .imgWrap .cco {animation: opty 1.2s ease-in-out forwards,cco5 2.5s ease-in-out infinite; }
#section05.active .container .infoWrap h3 {animation: h3 .6s ease-in-out forwards; animation-delay: 1.2s;}
#section05.active .container .infoWrap > p {animation: p .6s ease-in-out forwards; animation-delay: 1.6s;}
#section05.active .container .infoWrap .bubbleWrap {animation: bubbleWrap .6s ease-in-out forwards; animation-delay: 2.2s;}
#section05.active .container .infoWrap .speechBubble .bubble {animation: bubble5 .6s ease-in-out forwards; animation-delay: 2.6s;}
#section05.active .container .infoWrap .speechBubble .el {animation: el .6s ease-in-out forwards; animation-delay: 2.6s;}
#section05.active .container .infoWrap .speechBubble .ment {animation: ment .6s ease-in-out forwards; animation-delay: 3s;}

/* section06 */
#section06 {background-color: #3259D8 !important; z-index: 6;}
#section06 .footer {width: 100%; height: 100vh;}
#section06 .footer .download {position: relative; width: 100%; height: calc(50vh + 60px);}
#section06 .footer .download .inner {position: relative;width: 1200px;height: 100%;margin: 0 auto; overflow: hidden;}
#section06 .footer .download .downWrap {position: absolute;width: 100%;left: 0;top: 50%;transform: translateY(-40%);text-align: center;}
#section06 .footer .download .downWrap h3 {display: block; font-size: 45px; font-weight: 600; color: #fff; line-height: 55px;}
#section06 .footer .download .downWrap p {display: block; font-size: 28px; font-weight: 300; color: #fff; margin-top: 14px; line-height: 33px;}
#section06 .footer .download .downWrap .downloadApp {display: inline-block; position: relative; margin-top: 40px; font-size: 0;}
#section06 .footer .download .downWrap .downloadApp a {display: inline-block; vertical-align: middle; width: 233px; height: 64px; font-size: 0;}
#section06 .footer .download .downWrap .downloadApp a.google {background: url(../images/main/btn_google_h64.png)0 0 no-repeat; background-size: 233px 64px;}
#section06 .footer .download .downWrap .downloadApp a.appStore {background: url(../images/main/btn_app_h64.png)0 0 no-repeat; background-size: 233px 64px;}
#section06 .footer .download .downWrap .downloadApp a + a {margin-left: 16px;}
#section06 .footer .foot {position: relative; background-color: #31343D; width: 100%; height: calc(50vh - 60px);}
#section06 .footer .foot .inner {position: relative; width: 1200px; height: 100%; margin: 0 auto; overflow: hidden;}
#section06 .footer .foot .footInfo {position: absolute;width: 100%;left: 0;top: 50%;transform: translateY(-50%); padding: 0 78px}
#section06 .footer .foot .footInfo h4 {display: block; font-size: 18px; font-weight: 600; line-height: 21px; color: #999}
#section06 .footer .foot .footInfo .footLink {margin-top: 16px; font-size: 0;}
#section06 .footer .foot .footInfo .footLink li {display: inline-block; vertical-align: middle; position: relative;}
#section06 .footer .foot .footInfo .footLink li + li {margin-left: 21px;}
#section06 .footer .foot .footInfo .footLink li + li:before {content: '';position: absolute;left: -10px;top: 4px;width: 1px;height: 10px;background-color: #888;}
#section06 .footer .foot .footInfo .footLink li a {font-size: 16px; font-weight: 600; color: #999; line-height: 19px;}
#section06 .footer .foot .footInfo .footLink li:nth-child(2) a{color:#fff;}
#section06 .footer .foot .footInfo .order {display: block; font-size: 14px; font-weight: 300; line-height: 24px; margin-top: 12px; color: #888;}
#section06 .footer .foot .footInfo .businessInfo {margin-top: 34px;}
#section06 .footer .foot .footInfo .businessInfo + .businessInfo {margin-top: 24px;}
#section06 .footer .foot .footInfo .businessInfo .infoTit {display: inline-block;vertical-align: top;position: relative;font-size: 16px;font-weight: 500;line-height: 19px;color: #888;padding-right: 20px;}
#section06 .footer .foot .footInfo .businessInfo .infoTit:after {content: '';position: absolute;right: 0;top: 5px; transform: rotate(0deg);width: 12px;height: 7px;background: url(../images/common/icon_arrow_close.png)0 0 no-repeat;background-size: 12px 7px;transition: .3s;}
#section06 .footer .foot .footInfo .businessInfo .infoTit.on:after {transform: rotate(180deg);}
#section06 .footer .foot .footInfo .businessInfo .infoListWrap {margin-top: 16px; overflow: hidden;}
#section06 .footer .foot .footInfo .businessInfo.service .infoListWrap {display: none;}
#section06 .footer .foot .footInfo .businessInfo .infoList + .infoList {margin-top: 16px;}
#section06 .footer .foot .footInfo .businessInfo .infoList .infoLine {font-size: 0;}
#section06 .footer .foot .footInfo .businessInfo .infoList .infoLine + .infoLine {margin-top: 10px;}
#section06 .footer .foot .footInfo .businessInfo .infoList .infoLine span {position: relative; font-size: 14px; font-weight: 300; color: #999; line-height: 17px; display: inline-block; vertical-align: middle;}
#section06 .footer .foot .footInfo .businessInfo .infoList .infoLine span + span {margin-left: 21px;}
#section06 .footer .foot .footInfo .businessInfo .infoList .infoLine span + span:before {content: '';position: absolute;left: -11px;top: 3px;width: 1px;height: 10px;background-color: #888;}

/* 메인 하단 픽스버튼 */
.fixedBtn {position: fixed; bottom: 60px; right: 60px; z-index: 99}
.fixedBtn a {background: url(../images/main/icon_fixed.png)0 0 no-repeat; width: 112px; height: 112px; background-size: 112px 112px; display: block; font-size: 0; border-radius: 50%;box-shadow: 0px 6px 13px 0.15px rgba(0, 0, 0, 0.12)}


/* 가입신청 */
#container.join {width: 1200px; margin: 0 auto;padding: 115px 78px 150px;}
.joinArea .BTitle {display: block; font-size: 28px; font-weight: 600; line-height: 33px;}

.tableWrap{margin-top: 40px; text-align: left;}
.tableWrap .tableForm {border-top: 1px solid #ddd; table-layout: auto;}
.tableWrap .tableForm th, .tableWrap .tableForm td , .tableWrap .tableForm tr{height:50px;font-size:14px;line-height:17px;box-sizing:border-box;}
.tableWrap .tableForm th{background:#F8F8F8; border-bottom:1px solid #ddd; padding: 0 16px; width: 150px; text-align: left;}
.tableWrap .tableForm th > p {position: relative;display: inline-block; font-weight: 600;font-size: 14px;line-height: 17px; color: #222}
.tableWrap .tableForm th > p.necessary:after {content: '';position: absolute;top: 0;right: -6px;width: 4px;height: 4px;border-radius: 50%;background-color: #3B5094}
.tableWrap .tableForm td{border-bottom:1px solid #ddd; padding: 8px 16px; font-size: 0;}
.tableWrap .tableForm td > span {vertical-align: middle;}
.tableWrap .tableForm td .formInput {display: inline-block; vertical-align: top;}

/* formWrap */
.formWrap {position: relative; font-size: 0;}
.formWrap .text {display: inline-block; vertical-align: middle; line-height: 32px; color: #888; font-weight: 600; padding: 0 8px;}
.formWrap .selectbox + .formInput, .formWrap .formInput + .selectbox, .formWrap .formInput + .formInput {margin-left: 16px;}

/*  formInput */
.formInput input{position:relative;width:100%;height:32px;padding:0 8px;font-size:14px;caret-color:#384368;border:1px solid #ddd;transition:0.4s;box-sizing:border-box;-webkit-box-sizing:border-box;}
.formInput input:focus{border-color:#384368;}
.formInput input::placeholder{font-size:14px;color:#ddd;font-weight:300;}
.formInput input:disabled {background-color: #F8F8F8}

/*  selectbox */
.selectbox{position:relative;width:108px;display: inline-block; vertical-align: top;}
.selectbox:before{content:'';position:absolute;top:50%;right:0px;transform:translateY(-50%);width:32px;height:32px;background:url('../images/common/icon_array.png') no-repeat;background-size:32px 32px;}
select{position: relative;width: 100%;height: 32px;padding-left:8px;font-size: 14px;caret-color: #384368;border: 1px solid #ddd;transition: 0.4s;box-sizing: border-box;-webkit-box-sizing: border-box;}
select::-ms-expand{display:none;}
select:focus::-ms-value{background-color:transparent;color:#222;}

/* addressWrap */
.tableWrap .tableForm td .addressWrap .formWrap .formInput {display: inline-block;}
.tableWrap .tableForm td .addressWrap .formInput {display: block; margin-top: 8px;}
.tableWrap .tableForm td .addressWrap .formInput:first-child {margin-top: 0;}

/* matchList */
.matchList {display: block; margin-top: 4px;}
.matchList ul li {display: block; height: 24px; line-height: 24px; padding-left: 28px; font-size: 12px; font-weight: 300; color: #888888; position: relative;}
.matchList ul li:before {content: '';position: absolute;left: 0;top: 0;width: 24px;height: 24px;background: url(../images/common/icon_match_disabled.png)0 0 no-repeat;background-size: 24px 24px;transition: all .3s;}
.matchList ul li.match:before {background: url(../images/common/icon_match.png)0 0 no-repeat;background-size: 24px 24px;}
.matchList ul li.mismatch:before {background: url(../images/common/icon_mismatch.png)0 0 no-repeat;background-size: 24px 24px;}
.matchList + .confirmArea{margin-left:0;} 

/* btn */
.btnArea {min-width: 1200px; margin-top: 40px;font-size: 0;text-align: center;}
.btnArea a + a {margin-left: 16px;}
.btn {display: inline-block; width: 108px; height: 32px; border: 1px solid #3b5094; color: #415db7; font-size: 14px; font-weight: 600; line-height: 32px; text-align: center;}
.btn.complete {color: #888; border: 1px solid #888}
.btn.adSearch {width: 104px; background-color: #415DB7; border: 0; color: #fff; font-weight: 300;}
.btnLarge {display: inline-block;width: 400px; height: 64px; background-color: #3259D8;color: #fff; font-size: 18px; font-weight: 600; line-height: 64px; text-align: center;}
.btnLarge.w230 {width: 230px;}
.btnLarge.w240 {width: 240px;}
.btnLarge.w340 {width: 340px;}
.btnLarge.w400 {width: 400px;}
.btnLarge.w500 {width: 500px;}
.btnLarge.navy {background-color: #384368}
.btnLarge.download {background-color: #fff;border: 1px solid #222; color: #222}
.btnLarge.download .idown {display: inline-block; vertical-align: middle; width: 24px; height: 24px; margin-right: 8px; background: url(../images/common/icon_download.png)0 0 no-repeat; background-size: 24px 24px;}
.btnLarge.disabled {background-color: #eee; color: #ccc}
.codeLink {display: inline-block; font-size: 14px; font-weight: 300; line-height: 32px; color: #888; text-decoration: underline;}

/* confirmArea */
.confirmArea {display: inline-block; vertical-align: middle; margin-left: 16px;}
.confirmArea .warning {display: inline-block; font-size: 12px; font-weight: 600; line-height: 32px; color: #E0182D; vertical-align: top;}
.confirmArea .match {display: inline-block; width: 24px; height: 24px; background: url(../images/common/icon_match.png)0 0 no-repeat; background-size: 24px 24px; margin-top: 4px;}

/* infoBtn */
.infoPopWrap {position: relative; display: inline-block; vertical-align: middle; width: 24px; height: 24px; margin-top: -2px;}
.infoBtn {width: 24px; height: 24px; background: url(../images/common/icon_info.png)0 0 no-repeat; background-size: 24px 24px; cursor: pointer;}
.infoLayer {position: absolute;left: 10px;top: 10px;z-index: 1;box-shadow: 0px -5px 8.5px 1.5px rgba(0, 0, 0, 0.1);overflow: hidden;border-radius: 8px; display: none;}
.infoLayer:hover {display: block;}
.infoLayer .LayerContainer {width: 340px;padding: 20px;background-color: #fff;overflow: hidden;}
.infoLayer .LayerContainer h3 {font-size: 16px; font-weight: 600; color: #222; line-height: 19px;}
.infoLayer .LayerContainer strong {display: block; font-size: 14px; font-weight: 500; margin-top: 15px;}
.infoLayer .LayerContainer p {display: block; font-size: 14px; font-weight: 300; line-height: 20px; color: #888; margin-top: 10px;}
.infoLayer .LayerContainer p span {font-size: 14px; font-weight: 600; line-height: 20px; color: #888;}
.infoLayer .LayerBtn {display: block;width: 100%;height: 50px;line-height: 50px;background-color: #222;color: #fff;font-size: 14px;text-align: center;}

/* noticeList */
.noticeList {display: block; margin-top: 16px;}
.noticeList h3 {display: block; font-size: 14px; font-weight: 600; line-height: 17px; color: #888;}
.noticeList ol {display: block; margin-top: 8px;}
.noticeList ol li {display: block; font-size: 12px; font-weight: 300; line-height: 15px; height: 15px; color: #888;}
.noticeList ol li + li {margin-top: 4px;}

/* enroll - upload */
.fileWrap {display: inline-block;vertical-align: middle;margin-left: 16px;height: 32px;}
.fileWrap input[type="file"]{position:absolute;padding:0;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}
.fileWrap label{display:inline-block;width:28px;height: 32px;line-height:32px;vertical-align:middle;cursor:pointer;font-size: 0;background: url(../images/common/icon_folder.png)0 50% no-repeat;background-size: 28px 28px;}
.fileWrap.load label {background: url(../images/common/icon_folder_activation.png)0 50% no-repeat;background-size: 28px 28px;}
.fileWrap .upload{display:inline-block;width:480px;height:32px;line-height:32px;vertical-align:middle;background-color:#fff;border:1px solid #ddd;-webkit-appearance:none;-moz-appearance:none;appearance:none;color: #222}

.fileWrap .uploadName{position:relative;display: inline-block; height:32px;font-size:14px;box-sizing:border-box;-webkit-box-sizing:border-box;font-weight: 300;color: #888;line-height: 33px;}
.fileWrap.load .uploadName{color:#222;font-weight:600;}

.fileWrap .fileDel {display: none; vertical-align: top; width: 18px; height: 32px; background: url(../images/common/icon_close.png)0 50% no-repeat; background-size: 18px 18px; margin-left: 8px;}
.fileWrap.load .fileDel {display: inline-block;}

/* enroll - upload */
.fileImgWrap .fileBox input[type="file"]{position:absolute;padding:0;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}
.fileImgWrap .fileBox label{display:inline-block;width:28px;height: 32px;line-height:32px;vertical-align:middle;cursor:pointer;font-size: 0;background: url(../images/common/icon_folder.png)0 50% no-repeat;background-size: 28px 28px; margin-left: 16px;}
.fileImgWrap.load .fileBox label {background: url(../images/common/icon_folder_activation.png)0 50% no-repeat;background-size: 28px 28px;}
.fileImgWrap .fileBox .imgName{display:inline-block;width:232px;height:32px;line-height:32px;vertical-align:middle;background-color:#fff;border:1px solid #ddd;-webkit-appearance:none;-moz-appearance:none;appearance:none;color: #222}
/* .fileImgWrap + .fileImgWrap {margin-top: 10px;} */
.fileImgWrap .uploadDisplay{position:relative;width:160px;height: 107px; margin:16px 16px 0 0;font-size:0; display: inline-block; } /* 이미지 업로드 옆으로? 밑으로? */
.fileImgWrap .uploadDisplay .uploadThumb{max-width:160px;width:100%;height:107px; overflow: hidden;}
.fileImgWrap .uploadDisplay .remove {position: absolute;top: -9px;right: -9px;padding: 0; background-color: transparent;}
.fileImgWrap .uploadDisplay .remove .btnDel{position:relative;width:18px;height:18px;cursor:pointer;background:url('../images/common/icon_close.png') no-repeat;background-size:18px 18px;}

/* 체크박스 */
.formChkbox {position:relative;display:inline-block;vertical-align:middle;padding-left: 36px;min-height: 28px; cursor: pointer;}
.formChkbox input[type='checkbox'] { position:absolute; width:0; height:0; line-height:0; text-indent:-9999px;}
.formChkbox .icon {position:absolute;top: 50%;transform: translateY(-50%);left:0;width: 28px;height: 28px;background:url('../images/common/icon_disagree.png') no-repeat;background-size:28px 28px;transition: .2s ease-in}
.formChkbox .icon:before {display: none;}
.formChkbox input[type='checkbox']:checked + .icon {content:'';position:absolute;top: 50%;transform: translateY(-50%);left:0;width:28px;height:28px;background:url('../images/common/icon_agree.png') no-repeat;background-size:28px 28px;}
.formChkbox .txt {font-size: 16px; line-height: 28px; font-weight: 600;}

/* joinNav */
.joinNav {display: block;overflow: hidden;padding-top: 8px;}
.joinNav ul {float: right; font-size: 0;}
.joinNav ul li {position: relative; display: inline-block;vertical-align: middle;font-size: 0;}
.joinNav ul li:after {content: '';position: absolute;right: -32px;top:5px; width: 16px; height: 16px; background: url(../images/common/icon_process_disabled.png)0 0 no-repeat; background-size: 16px 16px;}
.joinNav ul li:last-child:after {display: none;}
.joinNav ul li.on:after {background: url(../images/common/icon_process_activation.png)0 0 no-repeat; background-size: 16px 16px;}
.joinNav ul li > i {position: relative; display: inline-block;vertical-align: middle;width: 30px;height: 30px;}
.joinNav ul li > i.step1 {background: url(../images/common/icon_clause_ing.png)0 0 no-repeat; background-size: 30px 30px;}
.joinNav ul li > i.step2 {background: url(../images/common/icon_join_info.png)0 0 no-repeat; background-size: 30px 30px;}
.joinNav ul li > i.step3 {background: url(../images/common/icon_basic_info.png)0 0 no-repeat; background-size: 30px 30px;}
.joinNav ul li.on > i.on:before {content: '';position: absolute;left: -2px;top: -6px;width: 16px;height: 16px;border-radius: 50%;background-color: #3c74d8;opacity: 0.18;}
.joinNav ul li.on > i.step2 {background: url(../images/common/icon_join_info_b.png)0 0 no-repeat; background-size: 30px 30px;}
.joinNav ul li.on > i.step3 {background: url(../images/common/icon_basic_info_b.png)0 0 no-repeat; background-size: 30px 30px;}
.joinNav ul li p {display: inline-block;font-size: 16px;vertical-align: middle;font-weight: 600;line-height: 30px;color: #ddd;margin-left: 8px;}
.joinNav ul li.on p {color: #415DB7}
.joinNav ul li + li {margin-left: 52px;}

/* joinArea */
.joinArea {margin-top: 40px;}
.joinArea .desc {display: block; font-size: 18px; line-height: 21px; font-weight: 400; margin-top: 10px;}
.joinArea .desc .blue {font-size: 18px; line-height: 21px; font-weight: 400; color: #415DB7}
.joinArea .termsWrap {display: block; margin-top: 40px;}
.joinArea .termsWrap .allChk {padding-bottom: 16px; border-bottom: 1px solid #ddd}
.joinArea .termsWrap .allChk .formChkbox .txt {font-size: 18px;}
.joinArea .termsWrap .chkWrap {margin-top: 24px;}
.joinArea .termsWrap .chkWrap + .chkWrap {margin-top: 16px;}
.joinArea .termsWrap .chkWrap .termsBox {margin-top: 12px; border: 1px solid #eee; width: 100%; height: 168px; padding: 16px 28px 16px 16px;}
.joinArea .termsWrap .chkWrap .termsBox p {display: block; margin-top: 8px; font-size: 14px; color: #888; font-weight: 300; line-height: 20px;}
.joinArea .termsWrap .chkWrap .termsBox h3 {display: block; font-size: 18px; font-weight: 600; color: #888; line-height: 21px;}
.joinArea .termsWrap .chkWrap .termsBox h4 {display: block; margin-top: 16px; font-size: 14px; font-weight: 600; color: #888; line-height: 17px;}
.joinArea .termsWrap .chkWrap .termsBox ol {margin-top: 8px; padding-left: 23px;}
.joinArea .termsWrap .chkWrap .termsBox ol li {font-size: 14px; color: #888; font-weight: 300; line-height: 20px;}
.joinArea .termsWrap .chkWrap .termsBox ol li + li {margin-top: 4px;}
.joinArea .termsWrap .chkWrap .termsBox table {width: 700px; margin-top: 10px; border: 1px solid #ddd;}
.joinArea .termsWrap .chkWrap .termsBox table thead {}
.joinArea .termsWrap .chkWrap .termsBox table thead th {padding: 10px 0;font-size: 14px;color: #999;font-weight: 700;border-left: 1px solid #ddd;}
.joinArea .termsWrap .chkWrap .termsBox table thead th:first-child {border-left: 0;}
.joinArea .termsWrap .chkWrap .termsBox table tbody tr {border-top: 1px solid #ddd;}
.joinArea .termsWrap .chkWrap .termsBox table tbody tr th {font-size: 14px;font-weight: 300;border-top: 1px solid #ddd;color: #888;}
.joinArea .termsWrap .chkWrap .termsBox table tbody tr td {border-top: 1px solid #ddd;border-left: 1px solid #ddd;padding: 5px 15px;}
.joinArea .termsWrap .chkWrap .termsBox table tbody tr td p:first-child {margin-top: 0;}
.joinArea .termsWrap .chkWrap .termsBox table tbody tr td + td {border-left: 1px solid #ddd}

.mCS-autoHide>.mCustomScrollBox>.mCSB_scrollTools, .mCS-autoHide>.mCustomScrollBox~.mCSB_scrollTools {opacity: 1;}
.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {background-color: #ddd}
.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {background-color: #ddd}

/* gnb */
#gnb {position: fixed; width: 100%; height: 60px; background-color: #fff; z-index: 99; box-shadow: 0px 3px 4.85px 0.15px rgba(0, 0, 0, 0.05);}
.gnbWrap {position: relative; width: 1200px; margin: 0 auto; height: 60px; overflow: hidden;}
.gnbWrap .brandLogo {display: inline-block;width: 92px;height: 22px;background: url(../images/common/logo.png)0 50% no-repeat;background-size: 92px 22px;margin-top: 19px;margin-left: 78px;}
.gnbWrap .tabLink {position: absolute;left: 50%;top: 0;transform: translateX(-50%);font-size: 0;}
.gnbWrap .tabLink ul {font-size: 0;}
.gnbWrap .tabLink li {display: inline-block;width: 145px;text-align: center;}
.gnbWrap .tabLink li a {position: relative;display: inline-block;text-align: center;height: 60px;padding-top: 20px;}
.gnbWrap .tabLink li a p {position: relative;font-size: 16px;color: #888;line-height: 19px;}
.gnbWrap .tabLink li.on a {padding-top: 18px}
.gnbWrap .tabLink li.on a p{font-size: 18px;font-weight: 600;color: #3259D8;line-height: 21px;}
.gnbWrap .tabLink li.on a p:after {content: '';position: absolute;left: 50%;transform: translateX(-50%);bottom: -6px;width: 90%;height: 1.5px;background-color: #3259D8;}
.gnbWrap .linkWrap {float: right; font-size: 0;}
.gnbWrap .linkWrap .download {display: inline-block; font-size: 0; margin-top: 15px;}
.gnbWrap .linkWrap .download li {display: inline-block;}
.gnbWrap .linkWrap .download li + li {margin-left: 6px;}
.gnbWrap .linkWrap .download li a {display: block; width: 110px; height: 30px; background: url(../images/common/btn_google_h30.png)0 0 no-repeat; background-size: 110px 30px;}
.gnbWrap .linkWrap .download li a.google {background: url(../images/common/btn_google_h30.png)0 0 no-repeat; background-size: 110px 30px;}
.gnbWrap .linkWrap .download li a.appStore {background: url(../images/common/btn_app_h30.png)0 0 no-repeat; background-size: 110px 30px;}
.gnbWrap .linkWrap .snsLink {display: inline-block; font-size: 0; margin-top: 15px; margin-left: 15px;}
.gnbWrap .linkWrap .snsLink li {display: inline-block;}
.gnbWrap .linkWrap .snsLink li + li {margin-left: 15px;}
.gnbWrap .linkWrap .snsLink li a {display: block; width: 30px; height: 30px; background: url(../images/common/btn_google_h30.png)0 0 no-repeat; background-size: 30px 30px; transition: .3s;}
.gnbWrap .linkWrap .snsLink li a.instagram {background: url(../images/common/icon_insta.png)0 0 no-repeat; background-size: 30px 30px;}
.gnbWrap .linkWrap .snsLink li.on a.instagram {background: url(../images/common/icon_insta_h.png)0 0 no-repeat; background-size: 30px 30px;}
.gnbWrap .linkWrap .snsLink li a.youtube {background: url(../images/common/icon_youtube.png)0 0 no-repeat; background-size: 30px 30px;}
.gnbWrap .linkWrap .snsLink li.on a.youtube {background: url(../images/common/icon_youtube_h.png)0 0 no-repeat; background-size: 30px 30px;}

/* complete*/
#container.complete {width: 1200px; margin: 0 auto;padding-top: 146px;}
.completeWrap .tit{display: block; text-align: center;}
.completeWrap h3 {font-size: 45px; line-height: 55px; font-weight: 400;}
.completeWrap h3 .bk {font-size: 45px; font-weight: 700; color: #222; line-height: 55px}
.completeWrap h3 .bl {font-size: 45px; font-weight: 700; color: #3259D8; line-height: 55px}
.completeWrap p {display: block; margin-top: 15px; font-weight: 400; font-size: 16px; color: #888; line-height: 22px;}
.completeWrap p span {font-weight: 400; font-size: 16px; color: #3259D8; }
.completeWrap .orderList {margin-top: 64px; text-align: center;}
.completeWrap .orderList ul {font-size: 0;}
.completeWrap .orderList .step {display: inline-block; vertical-align: top; position: relative;}
.completeWrap .orderList .step:nth-child(2) {width: 258px;}
.completeWrap .orderList .step > img {width: 242px; height: 193px;}
.completeWrap .orderList .step.current img {animation: current 1.5s ease-in-out infinite}
@keyframes current  {
	0% {transform: scale(1);}
	50% {transform: scale(1.05);}
	100% {transform: scale(1);}
}
.completeWrap .orderList .step + .step {margin-left: 65px;}
.completeWrap .orderList .step + .step:before {content: '';position: absolute; left: -75px; top: 95px; background: url(../images/common/icon_process_ing.png)0 0 no-repeat; background-size: 64px 16px; width: 64px; height: 16px;}
.completeWrap .orderList .step p {margin-top: 16px; display: block; font-size: 22px; font-weight: 600; line-height: 27px; color: #222;}
.completeWrap .orderList .step span {display: block;font-size: 16px;font-weight: 400;line-height: 22px;margin-top: 12px;letter-spacing: -0.56px;}
.completeWrap .orderList .step span em {font-size: 16px; font-weight: 400; line-height: 22px; color: #415DB7}
.completeWrap .btnArea {margin-top: 90px;}

/* joinInfo */
.info .visualWrap {position: absolute; left: 0; top: 0; width: 100%; min-width: 1200px; height: 700px; background: url(../images/common/img_info_visual.png)50% 50% no-repeat; background-size: 1920px 700px; background-color: #2678E2}
.info .visualWrap .mockup {position: absolute; left: 766px; top: 84px; background: url(../images/common/img_info_mockup_ver2.png)0 0 no-repeat; background-size: 494px 846px; width: 494px; height: 846px;}
.info .visualWrap .visual {position: relative; width: 1200px; margin: 0 auto; padding-left: 78px;}
.info .visualWrap .visual .textWrap {position: relative; padding-top: 242px; }
.info .visualWrap .visual .textWrap p {display: block; font-size: 24px; line-height: 32px; color: #fff;}
.info .visualWrap .visual .textWrap h3 {display: block; font-size: 62px; line-height: 75px; color: #fff; padding: 14px 0;}
.info .visualWrap .visual .textWrap h3 .logo{display: inline-block; vertical-align: middle; font-size: 0; width: 223px; height: 65px; background: url(../images/common/logo_wh.png)0 0 no-repeat; background-size: 223px 54px; margin-right: 8px}
.info .visualWrap .visual .textWrap h3 strong {font-size: 62px; line-height: 75px; color: #fff; font-weight: 700;}
.info .visualWrap .visual .textWrap .linkWrap {margin-top: 48px; font-size: 0; }
.info .visualWrap .visual .textWrap .linkWrap a {display: inline-block; vertical-align: middle; width: 200px; height: 48px; font-size: 16px; font-weight: 600; line-height: 48px; color: #3259D8; background-color: #fff; border-radius: 4px; border: 1px solid #fff; text-align: center;}
.info .visualWrap .visual .textWrap .linkWrap .apply {}
.info .visualWrap .visual .textWrap .linkWrap .admin {background-color: transparent; color: #fff; border: 1px solid #fff}
.info .visualWrap .visual .textWrap .linkWrap a + a {margin-left: 13px;}
.info .nowrap {white-space: nowrap;}

.info .infoWrap {width: 1200px; margin: 0 auto; padding-top: 950px}
.info .infoWrap .tit{display: block; text-align: center;}
.info .infoWrap h3 {font-size: 45px; line-height: 55px; font-weight: 400;}
.info .infoWrap h3 .bk {font-size: 45px; font-weight: 700; color: #222; line-height: 55px}
.info .infoWrap h3 .bl {font-size: 45px; font-weight: 700; color: #3259D8; line-height: 55px}
.info .infoWrap p {display: block; margin-top: 16px; font-weight: 400; font-size: 20px; color: #888; line-height: 24px;}
.info .infoWrap .infoList {margin-top: 60px; text-align: center;}
.info .infoWrap .infoList ul {display: flex; justify-content: center; align-items: flex-start;}
.info .infoWrap .infoList ul li {display: inline-block; vertical-align: top;}
.info .infoWrap .infoList ul li + li {margin-left: 30px;}
.info .infoWrap .infoList ul li img {width: 275px; height: 275px;}
.info .infoWrap .infoList ul li p {display: block; margin-top: 20px; font-size: 28px; font-weight: 700; line-height: 33px; color: #222}
.info .infoWrap .infoList ul li span {display: block; margin-top: 24px; font-size: 20px; line-height: 27px; font-weight: 400;}
.info .infoWrap .infoList ul li span em {font-size: 20px; line-height: 27px; font-weight: 600; color: #3259D8}

/* footer */
#footer {width: 100%; margin-top: 104px;}
.process + #footer {margin-top: 80px;}
#footer .serviceCenter {width: 100%;background-color: #F8F8F8;}
#footer .serviceCenter .inner {display: block;width: 1200px;margin: 0 auto;padding: 60px 0 78px;font-size: 0;overflow: hidden;} /* 2022-01-13 수정  issues/47 */
#footer .serviceCenter .inner .centerInfo {
    display: inline-block;
    vertical-align: top;
    max-width: 630px;
}
#footer .serviceCenter .inner .centerInfo strong {display: block; font-weight: 700; font-size: 24px; line-height: 29px; color: #222; }
#footer .serviceCenter .inner .centerInfo p {display: block;margin-top: 10px;font-size: 20px;font-weight: 400;line-height: 24px;color: #888888;letter-spacing: -1.2px;}
#footer .serviceCenter .inner .centerTell {display: inline-block;vertical-align: top;min-width: 355px;float: right;}
#footer .serviceCenter .inner .centerTell .tellNum {display: block; position: relative; font-size: 24px; font-weight: 700; line-height: 28px; padding-left: 38px;}
#footer .serviceCenter .inner .centerTell .tellNum:before {content: ''; position: absolute; left: 0; top: 0; width: 28px; height: 28px; background: url(../images/common/icon_call.png)0 0 no-repeat; background-size: 28px 28px;}
#footer .serviceCenter .inner .centerTell .tellNum span {position: relative; display: inline-block; vertical-align: middle; color: #bdbdbd; font-size: 16px; font-weight: 400; line-height: 28px; margin-left: 25px;}
#footer .serviceCenter .inner .centerTell .tellNum span:before {content: '';position: absolute; left: -12px; top: 6px; width: 1px; height: 12px; background-color: #888;}
#footer .serviceCenter .inner .centerTell .mail {display: block; position: relative; margin-top: 16px; font-size: 24px; font-weight: 400; line-height: 28px; padding-left: 38px;}
#footer .serviceCenter .inner .centerTell .mail:before {content: ''; position: absolute; left: 0; top: 0; width: 28px; height: 28px; background: url(../images/common/icon_mail.png)0 0 no-repeat; background-size: 28px 28px;}
#footer .foot {position: relative; background-color: #31343D; width: 100%; height: calc(50vh - 60px);}
#footer .foot .inner {position: relative; width: 1200px; height: 100%; margin: 0 auto; overflow: hidden;}
#footer .foot .footInfo {position: absolute;width: 100%;left: 0;top: 50%;transform: translateY(-50%); padding: 0 78px}
#footer .foot .inner .footInfo h4 {display: block; font-size: 18px; font-weight: 600; line-height: 21px; color: #999}
#footer .foot .footInfo .footLink {margin-top: 16px; font-size: 0;}
#footer .foot .footInfo .footLink li {display: inline-block; vertical-align: middle; position: relative;}
#footer .foot .footInfo .footLink li + li {margin-left: 21px;}
#footer .foot .footInfo .footLink li + li:before {content: '';position: absolute;left: -10px;top: 4px;width: 1px;height: 10px;background-color: #888;}
#footer .foot .footInfo .footLink li a {font-size: 16px; font-weight: 600; color: #999; line-height: 19px;}
#footer .foot .footInfo .footLink li:nth-child(2) a{color:#fff;}
#footer .foot .footInfo .order {display: block; font-size: 14px; font-weight: 300; line-height: 24px; margin-top: 12px; color: #888;}
#footer .foot .footInfo .businessInfo {margin-top: 34px;}
#footer .foot .footInfo .businessInfo + .businessInfo {margin-top: 24px;}
#footer .foot .footInfo .businessInfo .infoTit {display: inline-block;vertical-align: top;position: relative;font-size: 16px;font-weight: 500;line-height: 19px;color: #888;padding-right: 20px;}
#footer .foot .footInfo .businessInfo .infoTit:after {content: '';position: absolute;right: 0;top: 5px; transform: rotate(0deg);width: 12px;height: 7px;background: url(../images/common/icon_arrow_close.png)0 0 no-repeat;background-size: 12px 7px;transition: .3s;}
#footer .foot .footInfo .businessInfo .infoTit.on:after {transform: rotate(180deg);}
#footer .foot .footInfo .businessInfo .infoListWrap {margin-top: 16px; overflow: hidden;}
#footer .foot .footInfo .businessInfo.service .infoListWrap {display: none;}
#footer .foot .footInfo .businessInfo .infoList + .infoList {margin-top: 16px;}
#footer .foot .footInfo .businessInfo .infoList .infoLine {font-size: 0;}
#footer .foot .footInfo .businessInfo .infoList .infoLine + .infoLine {margin-top: 10px;}
#footer .foot .footInfo .businessInfo .infoList .infoLine span {position: relative; font-size: 14px; font-weight: 300; color: #999; line-height: 17px; display: inline-block; vertical-align: middle;}
#footer .foot .footInfo .businessInfo .infoList .infoLine span + span {margin-left: 21px;}
#footer .foot .footInfo .businessInfo .infoList .infoLine span + span:before {content: '';position: absolute;left: -11px;top: 3px;width: 1px;height: 10px;background-color: #888;}

/* 제휴 프로세스 추가 */
.process .infoWrap {width: 100%;min-width: 1200px;margin: 0 auto;padding-top: 200px;background-color: #f8f8f8; padding-bottom: 80px;}
.process .infoWrap .tit{display: block; text-align: center;}
.process .infoWrap h3 {font-size: 45px; line-height: 55px; font-weight: 400;}
.process .infoWrap h3 .bk {font-size: 45px; font-weight: 700; color: #222; line-height: 55px}
.process .infoWrap h3 .bl {font-size: 45px; font-weight: 700; color: #3259D8; line-height: 55px}
.process .infoWrap p {display: block; margin-top: 16px; font-weight: 400; font-size: 20px; color: #888; line-height: 26px; letter-spacing: -0.02px;}

.process .infoWrap p em {font-weight: 700; color: #222;}
.process .infoWrap p .bl {font-size: inherit; font-weight: 700; color: #3259D8;}

.process .infoWrap .infoList {margin-top: 80px; text-align: center;}
.process .infoWrap .infoList ul {font-size: 0;}
.process .infoWrap .infoList ul li {display: inline-block; width: 360px; position: relative; vertical-align: top;}
.process .infoWrap .infoList ul li + li {margin-left: 56px;}
.process .infoWrap .infoList ul li + li:before {content: '';position: absolute; left: -60px; top: 143px; background: url(../images/common/icon_process_ing.png)0 0 no-repeat; background-size: 64px 16px; width: 64px; height: 16px;}
.process .infoWrap .infoList ul li img {width: 301px; height: 301px;}
.process .infoWrap .infoList ul li p {display: block; margin-top: 20px; font-size: 28px; font-weight: 700; line-height: 33px; color: #222}
.process .infoWrap .infoList ul li p + span{display:block;margin-top:15px;line-height:22px;}
.process .infoWrap .infoList ul li p em{font-size:22px;}
.process .infoWrap .infoList ul li a {display: inline-block; position: relative; margin-top: 24px; padding-right: 28px; font-size: 20px; line-height: 24px; font-weight: 600; color: #3259D8}
.process .infoWrap .infoList ul li a:after {content: ''; position: absolute; right: 0; top: -2px; width: 24px; height: 24px; background: url(../images/common/btn_arrow.png)0 0 no-repeat; background-size: 24px 24px;}

.process .infoWrap .infoList ul li.icon_car {position:relative;}
.process .infoWrap .infoList ul li.icon_car::after {content: ""; position:absolute; top:10px; left:0; width: 85px; height:85px; background: url(../images/common/icon_car.png) no-repeat; }

.process .tipWrap {width: 100%;min-width: 1200px;margin: 0 auto;background-color: #ECF3FC;}
.process .tipWrap .inner {width: 1200px; margin: 0 auto; padding: 46px 22px;}
.process .tipWrap strong {display: inline-block; vertical-align: top; font-size: 24px; font-weight: 700; color: #0B2F8A}
.process .tipWrap .tipInfo {display: inline-block; margin-left: 30px;}
.process .tipWrap .tipInfo p {font-size: 20px; font-weight: 400; color: #222; line-height: 25px;}
.process .tipWrap .tipInfo p .bk {font-weight: 600; font-size: 20px;}
.process .tipWrap .tipInfo p + span {display: block; font-size: 18px; font-weight: 300; color: #888; line-height: 21px; margin-top: 8px;}

.process .howWrap {width: 1200px;margin: 0 auto;padding: 0 22px;}
.process .howWrap .tit {display: block; font-size: 0; margin-top: 80px;}
.process .howWrap .tit > strong {display: inline-block; vertical-align: middle; font-size: 28px; font-weight: 600; color: #222; line-height: 27px;}
.process .howWrap .tit .infoBtn {width: 30px; height: 30px; background: url(../images/common/icon_info_30.png)0 0 no-repeat; background-size: 30px 30px;}
.process .howWrap .tit .infoPopWrap {width: 30px; height: 30px;}

.process .howWrap .howList {margin-top: 20px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 0 50px;}
.process .howWrap .howList:after {content: ''; display: table; clear: both;}
.process .howWrap .howList li {float: left; position: relative; padding: 40px 0; box-sizing: content-box;}
.process .howWrap .howList li + li:after {content: '';position: absolute;left: 0;top: 40px;width: 1px; height: 85px; background-color: #ddd;}
.process .howWrap .howList li + li {padding-left: 80px; margin-left: 58px;}
.process .howWrap .howList li .stepWrap {height: 140px; overflow: hidden;}
.process .howWrap .howList li .stepWrap strong {display: block; font-size: 20px; font-weight: 600; color: #0B2F8A}
.process .howWrap .howList li .stepWrap p {display: block; margin-top: 14px; font-size: 18px; color: #222; line-height: 24px; font-weight: 400;}
.process .howWrap .howList li .stepWrap p .bl {font-size: 18px; color: #2C73F0; text-decoration: underline; font-weight: 600;}
.process .howWrap .howList li .stepWrap p .bk {font-size: 18px; color: #222; font-weight: 600;}
.process .howWrap .howList li .stepWrap p + span {display: block; margin-top: 14px; font-size: 16px; font-weight: 400; color: #888; line-height: 20px;}
.process .howWrap .howList li .stepWrap p + span em {font-size: 16px; font-weight: 600; color: #888;}
.process .howWrap .howList li .btnLarge {display: block;}

.howList .table-responsive {overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 15px;}
.howList .table-responsive table {width: 100%; border: 1px solid #a9b5bf7d; border-collapse: collapse; margin-top: 10px; table-layout: auto; }
.howList .table-responsive th, td {border: 1px solid #a9b5bf7d; padding: 8px; text-align: center; }
.howList .table-responsive thead {background-color: #f1f1f1;}
.howList .table-responsive tbody tr:nth-child(odd) {background-color: #f9f9f9;}

@media (max-width: 768px) {  .howList .table-responsive th, td {padding: 4px;}  .howList .table-responsive .no-wrap {white-space: normal;}  }
.feesLayer {position: absolute; right: -394px; top: -59px; z-index: 1;box-shadow: 0px 0px 8.5px 3px rgba(0, 0, 0, 0.1);overflow: hidden;border-radius: 8px; display: none;}
.feesoLayer:hover {display: block;}
.feesLayer .LayerContainer {width: 344px;padding: 20px;background-color: #fff;overflow: hidden;}
.feesLayer .LayerContainer h3 {font-size: 16px; font-weight: 600; color: #222; line-height: 19px;}
.feesLayer .LayerContainer strong {display: block; font-size: 14px; font-weight: 500; margin-top: 15px;}
.feesLayer .LayerContainer p {display: block; font-size: 14px; font-weight: 300; line-height: 20px; color: #888; margin-top: 10px;}
.feesLayer .LayerContainer p span {font-size: 14px; font-weight: 600; line-height: 20px; color: #888;}

.guide .guideWrap{padding: 180px 0 125px;margin: 0 auto;width: 1520px;}
.guide .guideWrap .tit {font-size: 0;}
.guide .guideWrap .tit strong {display: inline-block; vertical-align: middle; font-size: 28px; font-weight: 600; line-height: 64px; color: #222;}
.guide .guideWrap .tit strong + .btnLarge {margin-left: 186px; vertical-align: middle;}
.guide .guideWrap .guideImg {margin-top: 40px;}
.guide .guideWrap .requiredDcu {margin-top: 60px; overflow: hidden;}
.guide .guideWrap .requiredDcu > p {display: block; font-size: 20px; font-weight: 400; line-height: 24px; color: #0B2F8A}

.documentList {float: left; width: 522px; height: 455px; border-radius: 8px; background-color: #f8f8f8; overflow: hidden; margin-top: 20px;}
.documentList + .documentList {margin-left: 22px;}
.documentList strong {display: block; width: 100%; height: 64px; text-align: center; line-height: 64px; background-color: #0B2F8A; color: #fff; font-size: 20px; font-weight: 600;}
.documentList.right strong {background-color: #2CB3F0}
.documentList ul {padding: 0 30px; width: 100%; height: 391px; border: 1px solid #eee; border-radius: 0 0 8px 8px;}
.documentList ul li {display: block; padding: 30px 0 20px; overflow: hidden;border-bottom: 1px solid #eee; }
.documentList.right ul li:last-child {border-bottom: 0;}
.documentList ul li + li {padding: 20px 0 20px;}
.documentList ul li p {float: left; font-size: 18px; font-weight: 500; color: #222; line-height: 22px;}
.documentList ul li .linkWrap {float: right;}
.documentList ul li .linkWrap a {font-size: 16px; line-height: 22px; font-weight: 600; text-decoration: underline; color: #2C73F0}
.documentList ul li .linkWrap a + a {margin-left: 8px;}

.errorNoti{display:block;margin-top:10px;font-size:12px;}
.errorNoti > a{display:inline-block;font-size:12px;text-decoration:underline;}
.txtNoti{margin-top:10px;font-size:12px;}
.formInput.password{position:relative;}
.formInput.password input{padding-right:50px;}
.formInput .viewPassword{position:absolute;top:50%;right:0;transform:translateY(-50%);width:32px;height:32px;font-size:0;background:url('../images/common/icon_noeyes.png') no-repeat 0 0;background-size:32px;}
.formInput .viewPassword.active{background:url('../images/common/icon_eyes.png') no-repeat 0 0;background-size:32px;}
.pgNotice{display:block;margin:10px 0 5px;font-size:12px; color:#415db7;}
.pgTxt{color:#888; font-size: 12px;}
.pgTxt.txtNoti {margin-top: 28px;}