.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); }
.about-whatis h1 { 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) {
    .about-whatis { 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;  }
    .about-whatis h1 { margin-top: 70px; margin-bottom: 20px; font-size: 32px; }
    .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 { 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 h1 { margin-bottom: 15px; font-size: 18px; margin-top: 50px; }
    .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; }

}