.about {
    width: 100%;
    position: relative;
/*    background-color: #fff;*/
}
.about .content-title { position: relative; font-weight: 700; color: #222; letter-spacing: -1px; line-height: 1.3; }
.about .content-title i { position: absolute; left: 0; top: 0; }
@media only screen and (min-width: 961px) {
    .about .container { padding: 80px 30px; }
    .about .content-title { font-size: 40px; margin-bottom: 50px; padding-left: 70px; letter-spacing: -1px; }
    .about .content-title i { font-size: 48px; }
}

@media only screen and (max-width: 960px) {
    .about .container { padding-top: 50px; padding-bottom: 50px; }
    .about .content-title { font-size: 24px; margin-bottom: 30px; padding-left: 35px; }
    .about .content-title i { font-size: 24px; }
}

/* What is */
.about-whatis {
/*    background-image: url('../images/intro/whatis_bg.png');
    background-repeat: repeat-x;
    background-size: contain;*/
    text-align: center;
}
.about-whatis .whatis { display: block; position: absolute; left: 50%; }
.about-whatis .medi.medi-portrait { position: relative; left: 50%; }
.about-whatis .medi img {
    display: block; width: 100%; height: auto;
    
}
.about-whatis .medi-a5-coral,
.about-whatis .medi-a5-blue { position: absolute; left: 50%; }
.about-whatis .medi-a5-coral img { transform: rotate(-10deg); }
/* 제목이 h1 에서 h2 로 바뀌었습니다(제목 위계 정리). 아래 세 규칙은 그때
   갈 곳을 잃어 색·줄간격·여백이 전부 브라우저 기본값으로 떨어져 있었습니다.
   글자 크기는 그 사이에 자리 잡은 값(24px)을 그대로 두고 나머지만 옮깁니다. */
.about-whatis h2 { color: #343c45; line-height: 1.2; }
.about-whatis p { position: relative; color: #343c45; display: inline-block; }
.about-whatis p:before, .about-whatis p:after {
    content: ''; display: block; 
    position: absolute; top: 50%; 
    border: 2px solid #343c45; width: 6px;
}
.about-whatis p:before { border-right: none; }
.about-whatis p:after { border-left: none; }
@media only screen and (min-width: 961px) {
    /* 위 여백을 절반으로 줄입니다. padding 이 아니라 음수 margin 인 것은,
       전산약봉투 두 장과 장식 그림이 모두 이 섹션 상자를 기준으로 자리를
       잡고 있기(position: absolute; top: 470px 등) 때문입니다. padding-top 을
       줄이면 세로 사진만 위로 올라가고 봉투는 제자리에 남아 그림이 어긋납니다.
       margin 은 상자 안을 건드리지 않으므로 덩어리째 올라옵니다. */
    .about-whatis { margin-top: -80px; padding-top: 160px; padding-bottom: 160px; }
    .about-whatis .whatis { top: -80px; margin-left: -80px; }
    .about-whatis .medi { width: 500px; }
    .about-whatis .medi img {
        -webkit-box-shadow: 0px 20px 30px 0px rgba(137, 155, 152, 0.5);
        -moz-box-shadow: 0px 20px 30px 0px rgba(137, 155, 152, 0.5);
        box-shadow: 0px 20px 30px 0px rgba(137, 155, 152, 0.5);
    }
    .about-whatis .medi.medi-portrait { margin-left: -375px; }
    .about-whatis .medi-a5-coral { margin-left: 32px; top: 470px; }
    .about-whatis .medi-a5-blue { margin-left: 30px; top: 530px; }
    .about-whatis .deco { position: absolute; left: 50%; top: 50%; }
    .about-whatis .deco.deco-sabal { margin-left: -660px; margin-top: -30px; }
    .about-whatis .deco.deco-drug { margin-left: 40px; margin-top: -400px;  }
    /* 전산약봉투 그림이 세로 사진보다 33px 아래까지 내려옵니다. 여백을
       세로 사진 기준으로만 잡으면 제목이 봉투와 겹칩니다. */
    .about-whatis h2 { margin-top: 100px; margin-bottom: 20px; }
    .about-whatis p { font-size: 18px; }
    .about-whatis p:before { left: -40px; }
    .about-whatis p:after { right: -40px; }
    .about-whatis p:before, .about-whatis p:after { height: 34px; margin-top: -17px; }
}
@media only screen and (max-width: 960px) {
    .about-whatis { margin-top: -50px; padding-top: 100px; padding-bottom: 80px; }
    .about-whatis .whatis { width: 120px; height: 120px; top: -60px; margin-left: -60px; }
    .about-whatis .medi { width: 60%; height: auto; }
    .about-whatis .medi img {
        -webkit-box-shadow: 0px 10px 15px 0px rgba(137, 155, 152, 0.5);
        -moz-box-shadow: 0px 10px 15px 0px rgba(137, 155, 152, 0.5);
        box-shadow: 0px 10px 15px 0px rgba(137, 155, 152, 0.5);
    }
    .about-whatis .medi.medi-portrait { margin-left: -40%; }
    .about-whatis .medi-a5-coral { margin-left: -20%; top: 38%; }
    .about-whatis .medi-a5-blue { margin-left: -19%; top: 42%; }
    .about-whatis .deco { display: none; }
    .about-whatis h2 { margin-top: 70px; margin-bottom: 15px; }
    .about-whatis p { font-size: 14px; margin: 0 70px; }
    .about-whatis p:before, .about-whatis p:after { height: 30px; margin-top: -15px; }
    .about-whatis p:before { left: -20px; }
    .about-whatis p:after { right: -20px; }
}

/* Content */
#SwiperContent .slide-inner { position: absolute; }
#SwiperContent .slide-inner > h2 { color: #343c45; }
#SwiperContent .slide-inner > ol > li { position: relative; list-style: none; color: #343c45; word-break: keep-all; }
#SwiperContent .slide-inner > ol > li > span { position: absolute; font-family: 'Lato'; font-weight: 700; }
#SwiperContent .slide-inner p { color: #343c45; }
#SwiperContent .swiper-slide { background-color: #e1e8ea; }
#SwiperContent .paper {
    position: absolute; left: 50%; top: 50%; z-index: 1;
    -webkit-transition: margin-left .5s ease-in-out, margin-top .5s ease-in-out;
    -moz-transition: margin-left .5s ease-in-out, margin-top .5s ease-in-out;
    -o-transition: margin-left .5s ease-in-out, margin-top .5s ease-in-out;
    transition: margin-left .5s ease-in-out, margin-top .5s ease-in-out;
}
#SwiperContent .paper > img { width: 100%; height: auto; }
#SwiperContent .paper .zoom { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
#SwiperContent .paper .zoom > img {
    position: absolute;
    display: none;
    height: auto;
    -webkit-box-shadow: 0px 12px 30px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 12px 30px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 12px 30px 0px rgba(0,0,0,0.2);
}
#SwiperContent .paper.paper-1 .zoom .zoom1 { display: block; }
#SwiperContent .paper.paper-2 .zoom .zoom2 { display: block; }
#SwiperContent .paper.paper-3 .zoom .zoom3 { display: block; }
#SwiperContent .paper.paper-4 .zoom .zoom4 { display: block; }

#SwiperContentPagination { background-color: #fff; }
#SwiperContentPagination .content-tab { text-align: center; border-top: 1px solid #dde2e3; }
#SwiperContentPagination .content-tab > span { position: relative; display: inline-block; color: #5f696a; font-weight: 300; }
#SwiperContentPagination .content-tab > span.active { color: #f37268; }
#SwiperContentPagination .content-tab > span.active:after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; 
    display: block; border-top: 3px solid #f37268;
}
#SwiperContentPagination .content-tab > span.swiper-pagination-bullet { border-radius: 0px; background: transparent; opacity: 1; }

@media only screen and (min-width: 641px) {
    .about-content .container { padding: 75px 0 0 0; }
    #SwiperContent { height: 688px; }
    #SwiperContent .slide-inner > h2 { font-size: 40px; letter-spacing: -1.5px; margin-bottom: 20px; }
    #SwiperContent .slide-inner > ol > li { padding-left: 22px; margin-bottom: 30px; font-size: 20px; line-height: 1.4; letter-spacing: -1.5px; }
    #SwiperContent .slide-inner > ol > li > span { left: 0; top: 0; font-size: 20px; }
    #SwiperContent .slide-inner > ol > li > p { font-size: 16px; margin-top: 6px; }
    #SwiperContent .slide-inner p { font-size: 14px; }

    #ContentSwiper_01 .slide-inner { top: 16%; left: 8%; width: 32%; }
    #ContentSwiper_02 .slide-inner { top: 20%; left: 54%; width: 43%; }
    #ContentSwiper_03 .slide-inner { top: 10%; left: 50%; width: 45%; }
    #ContentSwiper_04 .slide-inner { top: 12%; left: 8%; width: 38%; }

    #SwiperContent .paper { width: 46%; }
    #SwiperContent .paper.paper-1 { margin-left: 0; margin-top: -18%; } 
    #SwiperContent .paper.paper-2 { margin-left: -48%; margin-top: -18%; } 
    #SwiperContent .paper.paper-3 { margin-left: -48%; margin-top: -35%; } 
    #SwiperContent .paper.paper-4 { margin-left: 0; margin-top: -35%; } 

    #SwiperContent .paper.paper-1 .zoom .zoom1 { width: 65%; top: 10%; left: 0; }
    #SwiperContent .paper.paper-2 .zoom .zoom2 { width: 65%; top: 7%; left: 36%; }
    #SwiperContent .paper.paper-3 .zoom .zoom3 { width: 65%; }
    #SwiperContent .paper.paper-3 .zoom .zoom3-1 { top: 30%; left: 33%; }
    #SwiperContent .paper.paper-3 .zoom .zoom3-2 { top: 55%; left: 33%; }
    #SwiperContent .paper.paper-4 .zoom .zoom4 { width: 65%; top: 47%; }


    #SwiperContentPagination { top: 0; bottom: auto; }
    #SwiperContentPagination .content-tab { height: 75px; }
    #SwiperContentPagination .content-tab > span { line-height: 75px; padding: 0 30px; font-size: 24px; letter-spacing: -1.5px; }
    #SwiperContentPagination .content-tab > span.swiper-pagination-bullet { width: auto; height: auto; }
}

@media only screen and (max-width: 640px) {
    .about-content { margin-bottom: 40px; }
    .about-content .container { padding: 50px 0 0 0; }
    #SwiperContent { height: 590px; }
    #SwiperContent .slide-inner > h2 { font-size: 20px; letter-spacing: -1px; margin-bottom: 12px; }
    #SwiperContent .slide-inner > ol > li { padding-left: 18px; margin-bottom: 12px; font-size: 14px; line-height: 1.4; letter-spacing: -1px; }
    #SwiperContent .slide-inner > ol > li > span { left: 0; top: 0; font-size: 14px; }
    #SwiperContent .slide-inner > ol > li > p { font-size: 12px; margin-top: 4px; }
    #SwiperContent .slide-inner p { font-size: 12px; }
    #SwiperContent .slide-inner > ol + p { padding-left: 18px; }
    #SwiperContent .slide-inner > ol + a { margin-left: 18px; }

    #ContentSwiper_01 .slide-inner { top: 7%; left: 5%; width: 90%; }
    #ContentSwiper_02 .slide-inner { top: 7%; left: 5%; width: 90%; }
    #ContentSwiper_03 .slide-inner { top: 27%; left: 5%; width: 90%; }
    #ContentSwiper_04 .slide-inner { top: 40%; left: 5%; width: 90%; }

    #SwiperContent .paper { width: 80%; }
    #SwiperContent .paper.paper-1 { margin-left: -37%; margin-top: 5%; } 
    #SwiperContent .paper.paper-2 { margin-left: -43%; margin-top: 5%; } 
    #SwiperContent .paper.paper-3 { margin-left: -19%; margin-top: -110%; width: 64%;} 
    #SwiperContent .paper.paper-4 { margin-left: -40%; margin-top: -118%; } 

    #SwiperContent .paper.paper-1 .zoom .zoom1 { width: 65%; top: 10%; left: 0; }
    #SwiperContent .paper.paper-2 .zoom .zoom2 { width: 65%; top: 7%; left: 36%; }
    #SwiperContent .paper.paper-3 .zoom .zoom3 { width: 65%; }
    #SwiperContent .paper.paper-3 .zoom .zoom3-1 { display: none; }
    #SwiperContent .paper.paper-3 .zoom .zoom3-2 { top: 55%; left: 33%; }
    #SwiperContent .paper.paper-4 .zoom .zoom4 { width: 65%; top: 53%; }

    #SwiperContentPagination { top: 0; bottom: auto; background-color: #fff; }
    #SwiperContentPagination .content-tab { height: 50px; }
    #SwiperContentPagination .content-tab > span {
        float: left; 
        display: flex; justify-content: center; align-items: center;
        padding: 0 5px; font-size: 12px; font-weight: 700;  }
    #SwiperContentPagination .content-tab > span.swiper-pagination-bullet { width: 24.5%; height: 100%; }
}

@media only screen and (min-width: 641px) and (max-width: 960px){
    #SwiperContent .slide-inner > h2 { font-size: 25px; letter-spacing: -1.2px; margin-bottom: 16px; }
    #SwiperContent .slide-inner > ol > li { padding-left: 18px; margin-bottom: 20px; font-size: 18px; line-height: 1.3; letter-spacing: -1.2px; }
    #SwiperContent .slide-inner > ol > li > span { left: 0; top: 0; font-size: 18px; }
    #SwiperContent .slide-inner > ol > li > p { font-size: 15px; margin-top: 6px; }
    #SwiperContent .slide-inner p { font-size: 14px; }

    #SwiperContentPagination .content-tab > span { padding: 0 20px; font-size: 18px; letter-spacing: -1.5px; }
}

/* Option */
.about-option .options:before,.about-option .options:after { content: ''; display: table; }
.about-option .options:after { clear: both; }
.about-option .options > li { float: left; border: 1px solid #d0d8da; padding: 10px; }
.about-option .options > li .icon { float: left; }
.about-option .options > li .icon img { width: 100%; height: auto; }
.about-option .options > li .text { overflow: hidden; }
.about-option .options > li h2 { font-weight: 700; letter-spacing: -1px; line-height: 1; }
.about-option .options > li p { word-break: keep-all; }
.about-option .options > li p.option-plan { color: #6e7b79; text-align: center; }

@media only screen and ( min-width: 961px) {
    .about-option .options > li { width: 50%; margin-top: -1px; height: 160px; }
    .about-option .options > li:nth-child(even) { border-left: none; }
    .about-option .options > li .icon { width: 150px; padding: 20px; }
    .about-option .options > li .text { padding-left: 20px; height: 100%; display: flex; flex-direction: column; justify-content: center; }
    .about-option .options > li h2 { font-size: 24px; margin-bottom: 12px; letter-spacing: -1px; }
    .about-option .options > li p { font-size: 16px; letter-spacing: -0.5px; }
    .about-option .options > li p.option-plan { font-size: 18px; }
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
    .about-option .options > li { width: 50%; padding: 25px 30px; margin-top: -1px; height: 220px; }
    .about-option .options > li:nth-child(even) { border-left: none; }
    .about-option .options > li .icon { float: none; width: 120px; margin-bottom: 10px; }
    .about-option .options > li .text { padding-left: 15px; }
    .about-option .options > li h2 { font-size: 20px; margin-bottom: 10px; letter-spacing: -1px; }
    .about-option .options > li p { font-size: 14px; letter-spacing: -0.5px; }
    .about-option .options > li p.option-plan { font-size: 16px; }
}
@media only screen and (max-width: 640px) {
    .about-option .options > li { padding: 20px 15px 20px 20px; width: 100%; border-bottom: none; }
    .about-option .options > li:last-child { border-bottom: 1px solid #d0d8da; }
    .about-option .options > li .icon { width: 90px; }
    .about-option .options > li .text { padding-left: 15px; }
    .about-option .options > li h2 { font-size: 16px; margin-bottom: 8px; letter-spacing: -1px; }
    .about-option .options > li p { font-size: 14px; letter-spacing: -0.5px; }
    .about-option .options > li p.option-plan { font-size: 14px; }
}

/* Service */
.about-service .services > li { display: inline-block; }
.about-service .services > li img { display: inline-block; }
.about-service .services > li h3, 
.about-service .services > li h2,
.about-service .services > li p { color: #343c45; }
.about-service .services > li p { word-break: keep-all; }

@media only screen and (min-width: 961px) {
    .about-service .services { text-align: center; padding-top: 30px; }
    .about-service .services > li { width: 30%; padding: 0 30px; vertical-align: top; }
    .about-service .services > li img { max-width: 100%; height: auto; margin-bottom: 20px; }
    .about-service .services > li h3, 
    .about-service .services > li h2,
    .about-service .services > li p { text-align: center; }
    .about-service .services > li h3 { font-size: 18px; margin-bottom: 6px; letter-spacing: -0.4px; }
    .about-service .services > li h2 { font-size: 28px; margin-bottom: 30px; letter-spacing: -1px; }
    .about-service .services > li p { font-size: 16px; letter-spacing: -0.7px; }
}

@media only screen and (max-width: 960px) {
    .about-service .services { padding-top: 25px; }
    .about-service .services > li { width: 100%; margin-bottom: 30px; }
    .about-service .services > li:last-child { margin-bottom: 0; }
    .about-service .services > li > img { display: block; float: left; width: 100px; height: 100px; margin-right: 18px; margin-bottom: 60px; }
    .about-service .services > li h3 { font-size: 16px; margin-bottom: 6px; letter-spacing: -0.4px; }
    .about-service .services > li h2 { font-size: 22px; margin-bottom: 10px; letter-spacing: -1px; }
    .about-service .services > li p { font-size: 14px; letter-spacing: -0.5px; }
}

/* Benefit */
.about-benefit .container { padding-bottom: 200px; }
.benefit { position: relative; max-width: 1000px; height: 400px; margin: 30px auto 100px; }
.benefit:before, .benefit:after { content: ''; display: table; }
.benefit:after { clear: both; }
.benefit li { float: left; width: 50%; height: 100%; }
.benefit li > * { color: #fff; }
.benefit li:first-child { background-color: #f37268; }
.benefit li:last-child { background-color: #39c0c7; }
.benefit h3 { font-weight: 100; }
.benefit h3 strong { font-weight: 700; }
.benefit li:first-child > * { text-align: right; }
.benefit p { word-break: keep-all; }
.btn-join { display: block; margin: 0 auto; color: #fff; font-weight: 700; text-align: center; background-color: #323c48; }
@media only screen and (min-width: 961px) {
    .about-benefit .container { padding-bottom: 200px; }
    .benefit { max-width: 1000px; height: 400px; margin: 30px auto 100px; }
    .benefit li {
        padding: 48px 50px;
        -webkit-box-shadow: 0px 53px 50px 0px rgba(0,0,0,0.19);
        -moz-box-shadow: 0px 53px 50px 0px rgba(0,0,0,0.19);
        box-shadow: 0px 53px 50px 0px rgba(0,0,0,0.19);
    }
    .benefit li:first-child { border-bottom-left-radius: 220px; border-top-left-radius: 220px; padding-left: 80px;  }
    .benefit li:last-child { border-bottom-right-radius: 220px; border-top-right-radius: 220px; padding-right: 80px; }
    .benefit .num { font-size: 30px; font-weight: 700; margin-bottom: 25px; }
    .benefit h3 { font-size: 50px; font-weight: 100; margin-bottom: 18px; letter-spacing: -4px; }
    .benefit p { font-size: 18px; line-height: 1.6; letter-spacing: -1.5px; }
    .btn-join {
        position: relative; width: 24%; min-width: 300px;
        padding-top: 20px; padding-bottom: 20px; font-size: 24px; top: 0;
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }
    .btn-join:hover {
        top: -5px; background-color: #39c0c7; color: #fff;
        -webkit-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.19);
        -moz-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.19);
        box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.19);
    }
}

@media only screen and (max-width: 960px) { /* mobile */
	.about-benefit { padding-top: 0 !important; }
    .about-benefit h1 { font-size: 20px; font-weight: 300; }
    .about-benefit .container { padding-bottom: 60px; }
    .benefit { width: 100%; height: 150px; margin-top: 20px; margin-bottom: 80px; }
    .benefit li {
        padding: 15px 18px;
        -webkit-box-shadow: 0px 10px 18px 0px rgba(0,0,0,0.19);
        -moz-box-shadow: 0px 10px 18px 0px rgba(0,0,0,0.19);
        box-shadow: 0px 10px 18px 0px rgba(0,0,0,0.19);
    }
    .benefit li:first-child { border-bottom-left-radius: 75px; border-top-left-radius: 75px; }
    .benefit li:last-child { border-bottom-right-radius: 75px; border-top-right-radius: 75px; }
    .benefit .num { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
    .benefit h3 { font-size: 20px; font-weight: 100; margin-bottom: 10px; letter-spacing: -2px; }
    .benefit p { font-size: 12px; line-height: 1.3; letter-spacing: -1.5px; }
    .btn-join { width: 50%; padding-top: 14px; padding-bottom: 14px; font-size: 18px; }

}

/*
   가로로 밀려난 등장 애니메이션이 문서를 넓히던 것을 막습니다.

   이 화면은 등장 효과(AOS)를 15곳에 씁니다. AOS 는 요소를 옆으로 밀어 둔
   상태에서 제자리로 옮기는 방식이라, 아직 움직이지 않은 요소가 화면 오른쪽
   밖에 있습니다. 그동안 문서 폭이 보이는 폭보다 넓어지고(390 → 470),
   화면에 고정해 둔 것들이 그 넓어진 폭을 기준으로 잡혀 밖으로 밀려납니다
   — 떠 있는 알림 카드(.pd-prior)와 진입 띠(.pd-settings-bar)가 그렇게 잘렸습니다.

   clip 은 스크롤 상자를 만들지 않아, 안에 있는 sticky 요소(2차 메뉴 띠)의
   동작을 바꾸지 않습니다. hidden 을 쓰면 그 띠가 이 상자에 갇힙니다.
   잘리는 것은 제자리로 갈 예정인 여백뿐이고 글이나 그림은 잘리지 않습니다.
*/
.about { overflow-x: clip; }