/* webfont */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.cdnfonts.com/css/roboto');

/* reset */
* { margin:0; padding:0; box-sizing: border-box; word-break: keep-all; }
li {list-style:none;}
a { display:inline-block; text-decoration: none; color:inherit; }
img { vertical-align: top;}

/* common */
body { font-family: 'Pretendard'; font-size:18px; font-weight: 700; color:#333; line-height: 1.2;}

.contents_wrap{ position:relative; width:100%; min-width:1024px; min-height:1280px; z-index:1; overflow:hidden; }

.swiper-button-next { background:url('../images/slide_right.png')center no-repeat; }
.swiper-button-prev { background:url('../images/slide_left.png')center no-repeat; }
.swiper-button-next, .swiper-button-prev { width:40px; height:40px; }
.swiper-button-next::after, .swiper-button-prev::after { content:''; }
.swiper-pagination-bullet { width:4px; height:4px; margin:2px 10px !important; background:#666; opacity:1; }
.swiper-pagination-bullet-active { width:8px; height:8px; margin:0 10px !important; background:#62B630; }

footer{ display:flex; align-items:center; padding:50px 0 110px; font-size: 22px; line-height:1.5; color: #666;}
footer .wrap { width:1024px; margin:0 auto; text-align:center; }
footer br { display:none; }

/* 섹션 1 - 메인비주얼 */
#main { position:relative; height:946px; background:url('../images/sec01_bg.png')center top no-repeat; }
#main h1 { position:absolute; top:40px; left:50%; margin-left:-103.5px; }
#main .title_area { position:relative; margin-top:270px; text-align:center; }
#main .title_area h2 { font-size:56px; font-weight:700; color:#fff; }
#main .title_area p { font-size:32px; line-height:44px; font-weight:400; color:#fff; margin-top:15px; }
#main .img_area { position:relative; left:50%; width:493px; height:557px; padding-top:60px; margin-left:-246px; }
#main .img_area .float_area { position:relative; z-index:9; }
#main .img_area .float_area > div { position:absolute; }
#main .img_area .float_area > div.img_01 { top:0; left:0; margin-left:-200px; margin-top:-20px; animation: move .9s ease-in-out .2s infinite alternate; }
#main .img_area .float_area > div.img_02 { top:0; right:0; margin-right:-220px; margin-top:-100px; animation: move 1.3s ease-in-out .6s infinite alternate; }
#main .img_area .float_area > div.img_03 { top:0; left:0; margin-left:-260px; margin-top:240px; animation: move 1.4s ease-in-out .3s infinite alternate; }
#main .img_area .float_area > div.img_04 { top:0; right:0; margin-top:350px; margin-right:-80px; animation: move 1.2s ease-in-out .2s infinite alternate; }

@-webkit-keyframes move {
	0%   { top: 6px; transform: translateX(4px);}
	100% { top: 0; transform: translateX(0);}
}

/* 섹션 2 - 서비스 슬라이드 */
#service_slide { position:relative; height:1245px; background:url('../images/sec02_bg.png')center top no-repeat; }
#service_slide .slide_area { width:1024px; height:458px; padding-top:430px; margin:0 auto; }
#service_slide .slide_area .slide { display:flex; align-items:center; justify-content:space-between; }
#service_slide .slide_area .slide .left { display:flex; flex-direction:column; }
#service_slide .slide_area .slide .left .app_ico { margin-bottom:20px; }
#service_slide .slide_area .left h3 { font-size:40px; font-weight:600; }
#service_slide .slide_area .left p { font-size:20px; line-height:32px; color:#666; font-weight:300; margin-top:20px; }
#service_slide .swiper { width:1024px; }
#service_slide .swiper-button-prev { left:0; top:auto; bottom:0; }
#service_slide .swiper-button-next { left:0; right:auto; top:auto; bottom:0; margin-left:60px; }
#service_slide .swiper-button-next, #service_slide .swiper-button-prev { width:40px; height:40px; }
#service_slide .swiper-button-next::after, #service_slide .swiper-button-prev::after { content:''; }
#service_slide.swiper-horizontal>.swiper-pagination-bullets,
#service_slide .swiper-pagination-bullets.swiper-pagination-horizontal,
#service_slide .swiper-pagination-custom, #service_slide .swiper-pagination-fraction { top:50%; width:auto; margin-left:-10px; }

/* 섹션 3 - 프로세스 */
#process { position:relative; margin-top:-190px; z-index:1; }
#process .contents_width { display:flex; flex-direction: column; align-items:center; justify-content:center; width:1024px; margin:0 auto; text-align:center; }
#process .contents_width::before { position:absolute; top:0; left:50%; margin-left:-750px; content:''; width:362px; height:375px; background:url('../images/sec03_img_07.png')center no-repeat; animation: move .9s ease-in-out .2s infinite alternate; }
#process .contents_width::after { position:absolute; bottom:0; right:50%; margin-right:-750px; margin-bottom:-326px; content:''; width:417px; height:426px; background:url('../images/sec03_img_08.png')center no-repeat; animation: move2 1.3s ease-in-out .6s infinite alternate; }
#process .title_area h4 { font-size:40px; font-weight:500; }
#process .title_area p { font-size:20px; font-weight:300; color:#666; margin-top:20px; }
#process .contents_area { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin-top:60px; }
#process .contents_area li { display:flex; flex-direction: column; align-items:center; justify-content:center; width:328px; height:326px; background:#F8F8F8; padding:60px 40px; text-align:center; margin-bottom:20px; margin-right:20px; }
#process .contents_area li:nth-child(3n) { margin-right:0; }
#process .contents_area li > * { margin:10px 0; }
#process .contents_area li span { font-size:12px; font-weight:700; color:#62B630; }
#process .contents_area li h5 { font-size:20px; font-weight:600; }
#process .contents_area li p { font-size:16px; line-height:24px; color:#666; font-weight:300; }

@-webkit-keyframes move2 {
	0%   { bottom: 6px; transform: translateX(4px);}
	100% { bottom: 0; transform: translateX(0);}
}

/* 섹션 4 - 치별점 */
#benefit { position:relative; display:flex; flex-direction: column; align-items: center; justify-content: center; background:url('../images/sec04_bg.png')center top no-repeat; padding-top:350px; }
#benefit .title_area { text-align:center; color:#fff; margin-bottom:80px; }
#benefit .title_area h4 { font-size:40px; font-weight:500; }
#benefit .title_area p { font-size:20px; font-weight:300; color:#C4ECD0; margin-top:20px; }
#benefit .swiper-container {overflow: visible;}
#benefit .benefit_slide { width:100%; }
#benefit .slide { width:1024px !important; }
#benefit .swiper-pagination-bullet { background:#fff; }
#benefit .swiper-pagination-bullet-active { background:#62B630; }
#benefit.swiper-horizontal>.swiper-pagination-bullets,
#benefit .swiper-pagination-bullets.swiper-pagination-horizontal,
#benefit .swiper-pagination-custom, #benefit .swiper-pagination-fraction { bottom:30px; }
#benefit .swiper-button-prev { left:40px; }
#benefit .swiper-button-next { right:40px; }

/* 섹션 5 - 리뷰 */
#review { position:relative; }
#review .contents_width { display:flex; align-items:center; justify-content:space-between; width:1024px; margin:120px auto; }
#review .title_area { position:relative; }
#review .title_area::after { position:absolute; top:0; left:50; margin-top:-250px; margin-left:150px; content:''; width:362px; height:375px; background:url('../images/sec05_img_02.png')center no-repeat; }
#review .title_area h4 { font-size:40px; line-height:52px; font-weight:500; }
#review .title_area p { font-size:20px; line-height:32px; font-weight:300; color:#666; margin-top:20px; }

/* 섹션 6 - 제휴사 */
#partner { position:relative; background:url('../images/sec06_bg.png')center bottom no-repeat; padding-bottom:100px; }
#partner .contents_width { width:1024px; margin:200px auto; }
#partner .title_area { position:relative; text-align:center; margin-bottom:80px; }
#partner .title_area::after { position:absolute; top:0; right:0; margin-right:-150px; content:''; width:362px; height:375px; background:url('../images/sec06_img.png')center no-repeat; }
#partner .title_area h4 { font-size:40px; font-weight:500; }
#partner .title_area p { font-size:20px; font-weight:300; color:#666; margin-top:20px; }
#partner .logo_wrap { display:flex; align-items:center; justify-content:center; flex-wrap: wrap; }
#partner .logo_wrap li { display:flex; align-items:center; justify-content:center; width:20%; height:145px; border:1px solid #eaeaea; margin-left:-1px; margin-top:-1px; }

/* 섹션 7 - 문의하기 */
#inquiry { position:relative; background:url('../images/sec07_bg.png')center top no-repeat; padding-bottom:40px; margin-top:40px;}
#inquiry .contents_width { position:relative; width:1024px; margin:0 auto; padding-top:110px; text-align:center; }
#inquiry .title_area { text-align:center; margin-bottom:80px; color:#fff; }
#inquiry .title_area h4 { font-size:40px; font-weight:500; }
#inquiry .title_area p { font-size:20px; font-weight:300; color:#f6f6f6; margin-top:20px; }
#inquiry .contents_area { width:100%; height:auto; padding:73px 112px; background:#272926; }
#inquiry .input_wrap { display:flex; flex-direction:column; }
#inquiry .input_wrap li { display:flex; align-items:center; color:#fff; margin-bottom:10px; }
#inquiry .input_wrap li label { width:160px; font-size:20px; font-weight:500; text-align:left; }
#inquiry .input_wrap li input { width:100%; height:44px; border-radius:4px; padding:0 20px; color:#272926; font-weight:500; }
#inquiry .checkbox_wrap { display:flex; align-items:center; justify-content:space-between; color:#fff; font-size:15px; font-weight:400; }
#inquiry button { width:360px; height:44px; color:#fff; background:#62B630; border:none; border-radius:4px; margin:30px auto; }

/* 푸터 */
footer img { display:inline-block; margin-bottom:30px; }
footer p { font-size:14px; color:#777; font-weight:300; }
footer p.copy { color:#ccc; margin-top:10px;  }
footer p span { color:#ccc; margin-right:10px; margin-left:30px; }


@media ((max-width: 767px)) {
    .contents_wrap{ position:relative; width:100vw; min-width:auto; min-height:auto; z-index:1; overflow:hidden; }

    /* 섹션 1 - 메인비주얼 */
    #main { width:100vw; height:70vh; background-size:cover; }
    #main .title_area { width:100vw; margin-top:20vh; text-align:center; }
    #main .title_area h2 { font-size:40px; font-weight:700; color:#fff; }
    #main .title_area p { font-size:22px; line-height:34px; font-weight:400; color:#fff; margin-top:15px; }
    #main .img_area { position:relative; left:auto; width:100vw; height:557px; padding-top:0; margin-left:0; padding:10vh 5vw; }
    #main .img_area > img { display:block; width:60vw; height:auto; margin:0 auto; }
    #main .img_area .float_area > div { max-width:25vw; }
    #main .img_area .float_area > div img { display:block; width:100%; height:auto; }
    #main .img_area .float_area > div.img_01 { top:0; left:0; margin-left:0; margin-top:0; }
    #main .img_area .float_area > div.img_02 { top:0; right:0; margin-right:0; margin-top:0; }
    #main .img_area .float_area > div.img_03 { top:0; left:0; margin-left:-5vw; margin-top:24vh; }
    #main .img_area .float_area > div.img_04 { top:0; right:0; margin-top:20vh; margin-right:0; }

    /* 섹션 2 - 서비스 슬라이드 */
    #service_slide { position:relative; height:auto; background-size:cover; padding:10vh 5vw; }
    #service_slide .slide_area { width:100%; height:auto; padding-top:18vh; margin:0 auto; }
    #service_slide .slide_area img { display:block; width:100%; height:auto; }
    #service_slide .slide_area .slide { width:100% !important; flex-direction: column;}
    #service_slide .slide_area .slide .left .app_ico img { width:auto; height:auto; }
    #service_slide .slide_area .left h3 { font-size:26px; }
    #service_slide .slide_area .left p { font-size:16px; line-height:28px; }
    
    #service_slide .swiper { width:100%; }
    #service_slide .swiper-button-prev { display:none; }
    #service_slide .swiper-button-next { display:none; }
    #service_slide.swiper-horizontal>.swiper-pagination-bullets,
    #service_slide .swiper-pagination-bullets.swiper-pagination-horizontal,
    #service_slide .swiper-pagination-custom, #service_slide .swiper-pagination-fraction { top:35%; left:auto; right:0; }

    /* 섹션 3 - 프로세스 */
    #process { width:100vw; margin-top:0; z-index:1; padding:10vh 5vw 0; }
    #process .contents_width { width:100%; }
    #process .contents_width::before { display:none; }
    #process .contents_width::after { display:none; }
    #process .title_area h4 { font-size:30px; }
    #process .title_area p { font-size:16px; }
    #process .contents_area { flex-wrap:wrap; margin-top:60px; }
    #process .contents_area li { width:45%; height:36vh; padding:0 20px; margin-bottom:20px; margin-right:0; margin-left:0; }
    #process .contents_area li:nth-child(2n) { margin-left:5%; }

    /* 섹션 4 - 치별점 */
    #benefit { margin-top:10vh; background:#62B630; background-size:contain; padding-top:10vh; }
    #benefit .title_area { text-align:center; color:#fff; margin-bottom:40px; }
    #benefit .title_area h4 { font-size:30px; }
    #benefit .title_area p { font-size:16px; }
    #benefit .swiper-container {overflow:hidden;}
    #benefit .benefit_slide { width:100%; }
    #benefit .slide { width:100% !important; }
    #benefit .slide img { display:block; width:100%; }
    #benefit .swiper-pagination-bullet { background:#fff; }
    #benefit .swiper-pagination-bullet-active { background:#62B630; }
    #benefit.swiper-horizontal>.swiper-pagination-bullets,
    #benefit .swiper-pagination-bullets.swiper-pagination-horizontal,
    #benefit .swiper-pagination-custom, #benefit .swiper-pagination-fraction { bottom:30px; }
    #benefit .swiper-button-prev { display:none; }
    #benefit .swiper-button-next { display:none; }

    /* 섹션 5 - 리뷰 */
    #review { width:100vw; position:relative; padding:10vh 5vw 0; }
    #review .contents_width { flex-direction: column; width:100%; margin:0 auto; }
    #review .title_area { position:relative; }
    #review .title_area::after { display:none; }
    #review .title_area h4 { font-size:30px; line-height:42px; }
    #review .title_area p { font-size:16px; line-height:28px; }

    /* 섹션 6 - 제휴사 */
    #partner { padding-bottom:0; padding:10vh 5vw;  background-size:contain;}
    #partner .contents_width { width:100%; margin:0 auto; }
    #partner .title_area { position:relative; text-align:center; margin-bottom:40px; }
    #partner .title_area::after { display:none; }
    #partner .title_area h4 { font-size:30px; }
    #partner .title_area p { font-size:16px; }
    #partner .logo_wrap { display:flex; align-items:center; justify-content:center; flex-wrap: wrap; }
    #partner .logo_wrap li { display:flex; align-items:center; justify-content:center; width:50%; height:145px; border:1px solid #eaeaea; margin-left:-1px; margin-top:-1px; }

    /* 섹션 7 - 문의하기 */
    #inquiry { background-size:250%; }
    #inquiry .contents_width { position:relative; width:100%; margin:0 auto; padding-top:110px; text-align:center; }
    #inquiry .title_area { text-align:center; margin-bottom:40px; color:#272926; }
    #inquiry .title_area h4 { font-size:30px; color:#fff; }
    #inquiry .title_area p { font-size:16px; color:#f3f3f3; }
    #inquiry .contents_area { width:100%; height:auto; padding:10vw 5vw; background:#272926; }
    #inquiry .input_wrap { display:flex; flex-direction:column; }
    #inquiry .input_wrap li { display:flex; align-items:center; color:#fff; margin-bottom:10px; }
    #inquiry .input_wrap li label { width:160px; font-size:16px; font-weight:500; text-align:left; }
    #inquiry .input_wrap li input { width:100%; height:44px; border-radius:4px; padding:0 20px; color:#272926; font-size:14px; font-weight:500; }
    #inquiry .checkbox_wrap { text-align:left; }
    #inquiry button { width:100%; }

    /* 푸터 */
    footer { width:100%; padding:0 5vw 5vh; }
    footer .wrap { width:100%; text-align: left; }
    footer img { display:inline-block; margin-bottom:30px; }
    footer p { font-size:14px; color:#777; font-weight:300; }
    footer p.copy { color:#ccc; margin-top:10px;  }
    footer p span { color:#ccc; margin-right:10px; margin-left:0; }
    footer br { display:inline; }
}