/* COMMON */
.sub-visual-container{
    overflow: hidden; position: relative; padding: 0 0 60px; height: 500px;
}
.sub-visual-wrapper{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    margin: auto; max-width: 1200px; width: 100%; height: 100%;
}
.sub-visual-container .background{
    z-index: 1; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-repeat: no-repeat; background-position: center;
    background-size: auto 110%;
    animation: sub-visual ease-in-out 1s forwards;
    opacity: 0;
}
.sub-visual-container .title{
    z-index: 2; position: relative; line-height: 1; font-size: 48px; font-weight: 700; color: #ffffff;
    -webkit-transform: scale(0.9); transform: scale(0.9);
    animation: sub-visual-title ease-out 1s forwards;
    opacity: 0;
}
.sub-visual-container p { margin-top: 26px; line-height: 1.8; text-align: center; font-size: 2rem; color: #ffffff; font-weight: 700; }
.sv2 { padding-bottom: 0; }
.sv1-1 .background { background-image: url('/child/img/sub/sv1-1.jpg'); }
.sv1-2 .background { background-image: url('/child/img/sub/sv1-2.jpg'); }
.sv1-3 .background { background-image: url('/child/img/sub/sv1-3.jpg'); }
.sv1-4 .background { background-image: url('/child/img/sub/sv1-4.jpg'); }
.sv2 .background { background-image: url('/child/img/sub/sv2.jpg'); }
.sv3 .background { background-image: url('/child/img/sub/sv3.jpg'); }
.sv4 .background { background-image: url('/child/img/sub/sv4.jpg'); }
.sv3-1 .background { background-image: url('/child/img/sub/sv3-1.jpg'); }
.sv3-2 .background { background-image: url('/child/img/sub/sv3-2.jpg'); }
.sv3-3 .background { background-image: url('/child/img/sub/sv3-3.jpg'); }
.sv3-4 .background { background-image: url('/child/img/sub/sv3-4.jpg'); }
.sv3-5 .background { background-image: url('/child/img/sub/sv3-5.jpg'); }
.sv4-1 .background { background-image: url('/child/img/sub/sv4-1.jpg'); }
.sv4-2 .background { background-image: url('/child/img/sub/sv4-2.jpg'); }
@keyframes sub-visual {
    to { background-size: auto 100%; opacity: 1; }
}
@keyframes sub-visual-title {
    to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}
@media (max-width: 1200px){
    .sub-visual-container { padding: 0 0 45px; height: 350px; }
    .sub-visual-container .title { font-size: 34px; }
}
@media (max-width: 768px){
    .sub-visual-container { padding: 0; height: 180px; }
    .sub-visual-container .title { font-size: 24px; }
}



/* Sub Tab List */
.sub-tab-container { z-index: 2; position: relative; margin-top: -60px; background: rgba(0,0,0,.5); }
.sub-tab-lists { display: flex; flex-wrap: wrap; margin: auto; max-width: 1200px; width: 100%; }
.sub-tab-lists li { flex: 1 1; }
.sub-tab-lists .link{
    display: flex; align-items: center; justify-content: center; position: relative; padding: 4px; height: 60px;
    line-height: 1.4; text-align: center; font-size: 18px; color: rgba(255,255,255,1); font-weight: 400;
    background-color: transparent;
    -webkit-transition: all ease-out .3s; transition: all ease-out .3s;
}
.sub-tab-lists .link::before{
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 100%; height: 100%; background: #ffffff;
    -webkit-transition: all ease-out .3s; transition: all ease-out .3s;
    -webkit-transform-origin: bottom; transform-origin: bottom;
    -webkit-transform: scaleY(0); transform: scaleY(0);
}
.sub-tab-lists .link span { display: block; z-index: 2; position: relative; }
.sub-tab-lists .link--on { color: #0fb6cd; font-weight: 700; }
.sub-tab-lists .link--on::before{
    -webkit-transform: scaleY(1); transform: scaleY(1);
}
@media(min-width:1201px){
	.sub-tab-lists .link:not(.link--on):hover::before{
        -webkit-transform: scaleY(0.1); transform: scaleY(0.1);
    }
}
@media (max-width:1200px){
    .sub-tab-container { margin-top: -50px; }
    .sub-tab-lists .link { height: 50px; font-size: 16px; }
}
@media (max-width:768px){
    .sub-tab-container { margin-top: 0; }
    .sub-tab-lists { background: rgba(0,0,0,.9); }
    .sub-tab-lists .link { padding: 12px 10px; height: 100%; line-height: 1.3; font-size: 14px; }
}


/* Contents */
.contents { padding-top: 100px; }

.bg-light { background-color: #f7f7f7; }

.headtitle { line-height: 1; text-align: center; font-size: 36px; font-weight: 700; }
.headtitle-p { margin-top: 30px; text-align: center; font-size: 24px; }

.button-basic { padding: 10px 10px 12px; max-width: 200px; width: 100%; }

.quotation { position: relative; font-size: 24px; }
.quotation--center { text-align: center; }
.quotation--light { color: #e6e6e6; }
.quotation--light .quotation__inner::before { background-image: url('/child/img/icon/quotation-begin-light.svg'); }
.quotation--light .quotation__inner::after { background-image: url('/child/img/icon/quotation-end-light.svg'); }
.quotation--hide .quotation__inner::before,
.quotation--hide .quotation__inner::after { content: none; }
.quotation__inner { display: inline-block; position: relative; padding: 16px 30px 0; }
.quotation__inner::before,
.quotation__inner::after { content: ''; position: absolute; top: 0; width: 25px; height: 20px; background-repeat: no-repeat; }
.quotation__inner::before { left: 0; background-image: url('/child/img/icon/quotation-begin-primary.svg'); }
.quotation__inner::after { right: 0; background-image: url('/child/img/icon/quotation-end-primary.svg'); }
@media(max-width:1200px){
    .headtitle { font-size: 26px; }
    .headtitle-p { font-size: 21px; }

    .quotation { font-size: 22px; }
    .quotation__inner::before,
    .quotation__inner::after { width: 22px; height: 17px; }
}
@media(max-width:768px){
    .contents { padding-top: 80px; }

    .headtitle { font-size: 24px; }
    .headtitle-p { font-size: 16px; line-height: 1.7; margin-top: 20px; }

    .button-basic { font-size: 14px; padding: 12px 10px 14px; }

    .quotation { font-size: 18px; line-height: 1.7; }
    .quotation__inner { padding: 12px 22px 0; }
    .quotation__inner::before,
    .quotation__inner::after { width: 18px; height: 14px; }
}


/* Brand - Intro */
.brand-section--intro { padding: 0 0 110px; }
.brand-intro{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
.brand-intro .img { order: 2; max-width: 504px; width: 100%; }
.brand-intro .img:after{display:none;}
.brand-intro .img .grid{
    margin:-40px;
}
.brand-intro .img .grid > div, .brand-intro .img .grid > li{
    padding:40px;
}
.brand-intro .img-wrap{
    min-width: 220px;
    min-height: 220px;
    text-align: center;
}
.brand-intro .img-wrap img{
    margin:auto;
}
.brand-intro .img-txt{
    font-size: 18px;
    color: #555;
    text-align: center;
    border-top: 1px solid #e6e6e6;
    padding-top: 15px;
}
.brand-intro .img-txt strong{
    color: #222;
}
.brand-intro .context { order: 1; flex: 1 1; padding-right: 100px; }
.brand-intro .context p { margin: 18px 0; line-height: 1.6; font-size: 18px; color: #555555; }
.brand-intro .context p:first-child { margin-top: 0; }
.brand-intro .context p:last-child { margin-bottom: 0; }
.brand-intro .context p b { color: #222222; }

.brand-section--status { padding: 120px 0; text-align: center; color: #ffffff; background: url('/child/img/sub/brand/intro/brand-section-status-background.jpg') no-repeat center; }
.brand-section--status .quotation { font-size: 32px; font-weight: 200; }
.status-count-lists{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -ms-flex-wrap: wrap; flex-wrap: wrap;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    margin: 85px -20px -20px;
}
.status-count-list { padding: 20px; width: 20%; }
.status-count { text-align: center; font-size: 18px; color: #e6e6e6; }
.status-count .title { display: block; margin-bottom: 36px; line-height: 1; font-size: 24px; font-weight: 700; }
.status-count .numeric{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.status-count .numeric__inner { display: inline-flex; align-items: center; vertical-align: middle; margin-right: 4px; line-height: 1; font-family: 'Helvetica Neue'; color: #0fb6cd; font-weight: bold; font-size: 38px;}
.status-count .numeric__inner em{
     font-style: normal;
     margin-right: 2px;
     display: inline-block;
     font-size: 72px;
}


.global [data-marker="malaysia"] { top: 69.5%; left: 37%; }
.global [data-marker="singapore"] { top: 74.8%; left: 40.5%; }
.global [data-marker="indonesia"] { top: 82.5%; left: 39.5%; }
.global [data-marker="thailand"] { top: 51%; left: 34%; }
.global [data-marker="philippines"] { top: 50%; left: 61%; }
.global [data-marker="hongkong"] { top: 37%; left: 44%; }
.global [data-marker="korea"] { top: 11%; left: 66%; }
.global [data-marker="taiwan"] { top: 36.5%; left: 60%; }
.global [data-marker="india"] { top: 55%; left: 6%; }

.global { overflow: hidden; position: relative; margin: auto; max-width: 630px; }
.global li { display: block; z-index: 2; position: absolute; width: 13%; height: 5%; cursor: pointer; }
.history-process-container { position: relative; margin-top: 40px; padding: 0 12px; }
.history-process-container .root { position: absolute; top: 0; bottom: 0; left: 0; margin: auto; width: 100%; height: 1px; background: #e9e9e9; }
.history-process-container .root::before,
.history-process-container .root::after { content: ''; position: absolute; top: -3px; width: 7px; height: 7px; background: #c4c4c4; border-radius: 50%; }
.history-process-container .root::before { left: -3px; }
.history-process-container .root::after { right: -3px; }
.history-process-lists{
    display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between;
}
.history-process{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
    position: relative; cursor: pointer;
}
.history-process .image{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;
    color: #c4c4c4; height: 145px;
}
.history-process .image svg{
    display: block; width: 100%; height: auto;
    -webkit-transition: all ease .2s; transition: all ease .2s;
}
.history-process .context{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
    color: #c4c4c4; text-align: center;
}
.history-process .context .name { display: block; line-height: 1; font-size: 18px; margin: 22px 0 4px; -webkit-transition: all ease .2s; transition: all ease .2s; }
.history-process .context .year { display: block; line-height: 1; font-family: 'Helvetica Neue'; font-weight: bold; font-size: 24px; -webkit-transition: all ease .2s; transition: all ease .2s; }
.history-process .line { position: relative; margin: 12px auto 0; width: 1px; height: 30px; background: #e9e9e9; }
.history-process .line::after { content: ''; position: absolute; top: 0; left: -3px; width: 7px; height: 7px; background: #c4c4c4; border-radius: 50%; }
[data-country="malaysia"] .image { width: 152px; }
[data-country="singapore"] .image { width: 180px; }
[data-country="indonesia"] .image { width: 150px; }
[data-country="thailand"] .image { width: 146px; }
[data-country="philippines"] .image { width: 125px; }
[data-country="hongkong"] .image { width: 142px; }
[data-country="korea"] .image { width: 154px; }
[data-country="taiwan"] .image { width: 156px; }
[data-country="india"] .image { width: 145px; }

.history-process--on .image { color: #0fb6cd; }
.history-process--on .context { color: #333333; }
@media(min-width:1201px){
	.global svg { height: 450px; }

    /* .history-process:hover .image { color: #0fb6cd; }
    .history-process:hover .context { color: #333333; } */
}
@media(min-width:769px){
    .history-process-list:nth-child(2) { margin-left: -74px; }
    .history-process-list:nth-child(3) { margin-left: -60px; }
    .history-process-list:nth-child(4) { margin-left: -42px; }
    .history-process-list:nth-child(5) { margin-left: -28px; }
    .history-process-list:nth-child(6) { margin-left: -26px; }
    .history-process-list:nth-child(7) { margin-left: -40px; }
    .history-process-list:nth-child(8) { margin-left: -46px; }
    .history-process-list:nth-child(9) { margin-left: -46px; }

    .history-process-list--top { margin: 0 0 255px; }
    .history-process-list--bottom { margin: 255px 0 0; }
    .history-process-list--bottom .history-process .image { order: 2; }
    .history-process-list--bottom .history-process .context { order: 1; }
    .history-process-list--bottom .history-process .context .name { order: 2; margin: 4px; }
    .history-process-list--bottom .history-process .line { margin: 0 auto 18px; }
    .history-process-list--bottom .history-process .line::after { top: auto; bottom: 0; }
}
@media(max-width:1200px){
    .brand-section--status .quotation { font-size: 26px; }
    .brand-intro .context p { font-size: 17px; }

    .status-count { font-size: 16px; }
    .status-count .title { font-size: 20px; margin-bottom: 20px; }
    .status-count .numeric__inner {
            font-size: 30px;
    }
    .status-count .numeric__inner em{
         font-size: 54px;
    }
}
@media(max-width:1024px){
    .brand-intro .context{
        padding-right: 50px;
    }

    .history-mo { margin-top: 35px; }
}
@media(max-width:992px){
    .brand-intro { -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
    .brand-intro .context { padding: 35px 0 0; }
    .brand-intro .img { order: 1; max-width: none; }
}
@media(max-width:768px){
    .brand-section--intro { padding: 0 0 60px; }
    .brand-intro .img .grid{
        margin:-20px -10px;
    }
    .brand-intro .img .grid > div, .brand-intro .img .grid > li{
        padding:20px 10px;
    }
    .brand-intro .img-wrap {
        min-width: auto;
        min-height: auto;
    }
    .brand-intro .img-txt {
        font-size: 16px;
        margin-top: 20px;
    }
    .brand-intro .context p { font-size: 15px; }

    .brand-section--status { padding: 60px 0; }
    .brand-section--status .quotation { font-size: 16px; }
    .status-count-lists { margin: 40px -14px -18px; }
    .status-count-list { padding: 18px 14px; width: auto; }
    .status-count { font-size: 13px; }
    .status-count .title { font-size: 16px; margin-bottom: 14px; }
    .status-count .numeric__inner {
            font-size: 24px;
    }
    .status-count .numeric__inner em{
         font-size: 32px;
    }

    .brand-history { text-align: center; }
    .history-process-container { display: inline-block; padding: 30px 12px 0; }
    .history-process-container .root { bottom: auto; width: 1px; height: 100%; }
    .history-process-container .root::after { top: auto; bottom: -3px; }
    .history-process-lists { -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
    .history-process-list--top { margin: 0; }
    .history-process-list--bottom { margin: 0; }
    .history-process-list { margin: 0 0 60px 40px; }
    .history-process .context { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; text-align: left; }
    .history-process .context .name { order: 2; margin: 6px 0 0 20px; }
    .history-process .image { order: 2; margin: 20px 0 0 75px; height: auto; }
    .history-process .line { position: absolute; top: 0; left: -52px; width: 40px; height: 1px; }
    .history-process .line::after { top: -3px; }
    [data-country="malaysia"] .image { width: 112px; }
    [data-country="singapore"] .image { width: 130px; margin-left: 60px; }
    [data-country="indonesia"] .image { width: 115px; }
    [data-country="thailand"] .image { width: 116px; }
    [data-country="philippines"] .image { width: 110px; }
    [data-country="hongkong"] .image { width: 112px; }
    [data-country="korea"] .image { width: 120px; }
    [data-country="taiwan"] .image { width: 116px; margin-top: 0; }
    [data-country="india"] .image { width: 120px; }
}
@media(max-width:576px){
    .brand-intro .img .grid > div, .brand-intro .img .grid > li{
        width: 100%;
    }
}
@media(max-width:500px){
    .history-process-container { display: block; margin-left: 15px; }
}
@media(max-width:375px){
    .brand-section--status .quotation p br { display: none; }
}


/* brand - org */
.org-section.org-section--intro{
    padding-top:0;
}
.org-section--intro::after,
.org-section--headquarters::after { content: none !important; }
.org-section--headquarters { text-align: center; background: #fafafa url('/child/img/sub/brand/org/org-section-headquarters-background.png') no-repeat center; }
.org-section--headquarters .img { margin: -60px 0 -160px; }
.org-section--headquarters .rotate { position: relative; }
.org-section--headquarters .rotate img { display: block; margin: auto; }
.org-section--headquarters .rotate img:first-child { z-index: 2; position: relative; }
.org-section--headquarters .rotate img:last-child { position: absolute; top: 0; left: 0; animation: rotate linear 25s infinite; }
.org-section { position: relative; padding: 100px 0; }
.org-section:last-child { padding-bottom: 0; }
.org-section:not(:last-child)::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: 100%; max-width: 1050px; height: 1px; background: #e6e6e6; }

.org-card-lists{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    margin: 40px -30px -30px;
}
.org-card-list { padding: 50px 30px 30px; width: 33.33333%; }
.org-card{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    position: relative; padding: 46px 20px 30px; height: 100%; font-size: 18px; color: #555555; border: 1px solid #0fb6cd;
}
.org-card .title { position: absolute; top: -20px; left: 0; right: 0; margin: auto; padding: 10px 8px; max-width: 170px; width: 100%; line-height: 1; text-align: center; font-size: 18px; color: #ffffff; font-weight: 700; background: #0fb6cd; }
.org-card li { margin: 5px 0; letter-spacing: -0.06em; }

.org-section--location { text-align: center; }
.org-section--location .img { margin: 75px 0 80px; }
@keyframes rotate {
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@media(max-width:1200px){
    .org-card-lists { margin: 40px -14px -30px; }
    .org-card-list { padding: 50px 14px 30px; }
    .org-card { font-size: 16px; }
    .org-card .title { font-size: 17px; }
}
@media(max-width:1024px){
    .org-section--headquarters .img { margin: 50px 0 0; }
}
@media(max-width:768px){
    .org-section { padding: 80px 0; }
    .org-card-lists{
        -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
        margin: 30px 0 0;
    }
    .org-card-list { margin: auto; padding: 40px 0 15px; max-width: 350px; width: 100%; }
    .org-card { font-size: 14px; padding: 36px 20px 20px; }
    .org-card .title { font-size: 16px; }
}
@media(max-width:550px){
    .org-section--intro .quotation p br { display: none; }
}


/* brand - culture */
.board-section--intro { padding: 80px 0; line-height: 1.5; text-align: center; font-size: 24px; color: #ffffff; background: #0fb6cd; }
.board-section--intro .title { margin-bottom: 30px; line-height: 1; font-size: 36px; font-weight: 200; }
.board-section--intro p[data-aos=fade-down] { transform: translate3d(0,-30px,0) }
.board-section--main { padding: 60px 0 0; }
.board-section--main .headtitle-p { margin-bottom: 80px; }
@media(max-width:1200px){
    .board-section--intro { font-size: 22px; }
    .board-section--intro .title { font-size: 30px; }
}
@media(max-width:768px){
    .board-section--intro { font-size: 16px; padding: 70px 0; }
    .board-section--intro .title { font-size: 20px; }
}
@media(max-width:500px){
    .board-section--intro p br { display: none; }
}


/* service */
.service-section--intro { line-height: 1.5; text-align: center; font-size: 24px; }
.service-section--intro p:first-child { margin-bottom: 30px; font-size: 36px; font-weight: 700; }
.service-section { padding: 100px 0; }
.service-section:last-child { padding-bottom: 0; }
.service-section .img-banner { margin-top: 70px; }

.img-banner{ padding-top: 0; }
.img-banner .row{margin: 0px; }
.img-banner .row [class*=col]{padding:0; }
.img-banner a{ display: flex; height: 100%; width: 100%; }
.img-banner-wrap{ position: relative; height: 350px; background-color: #0fb6cd; }
.img-banner-front, .img-banner-back{
    transition: all .6s ease-in-out; transform-style: preserve-3d; backface-visibility: hidden;
}
.img-banner-front{
    position: absolute; top:0; left:0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;
    background-repeat: no-repeat; background-position:center; background-size: cover; transform: rotateX(0) rotateY(0);
}
.img-banner-front:before{
    content: ''; position: absolute; bottom:25px; right:25px; display: block; width: 40px; height: 40px;
    background-repeat: no-repeat; background-position:center; background-image: url(/child/img/icon/icon-more-lg.png);
}
.img-banner-front h3{ font-size: 24px; font-weight: 600; text-align: center; color:#fff; letter-spacing: -.04em; }
.img-banner-back{
    position: relative; width: 100%; height: 100%; color:#fff; padding: 38px 26px;
    background-color: #0fb6cd; background-repeat: no-repeat; background-position:bottom 25px right 25px; background-image: url(/child/img/icon/icon-arrow.png);
    transform: rotateX(0) rotateY(-178deg);
    opacity: 0;
}
.img-banner-wrap:hover .img-banner-front{
    opacity: 0;
    transform: rotateX(0) rotateY(-178deg);
}
.img-banner-wrap:hover .img-banner-back{
    transform: none;
    opacity: 1;
}
.img-banner-back h3{ position: relative; font-size: 24px; font-weight: 600; letter-spacing: -.04em; margin-bottom: 20px; padding-top: 20px; }
.img-banner-back h3::before{
    content: ''; position: absolute; top:0; left:0; display: block;
    width: 40px; height: 4px; background-color: #fff;
}
.img-banner-back p{ font-size: 18px; letter-spacing: -.04em; }

.service-ngo-ban{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    position: relative; margin: 80px 0 70px; padding: 56px; height: 500px; line-height: 1.5; font-size: 36px; color: #ffffff; font-weight: 700;
    background: url('/child/img/sub/brand/service/servgice-section-ngo-background.jpg') no-repeat center;
}
.service-ngo-ban::before { content: ''; z-index: 1; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background-image: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,0)); }
.service-ngo-ban p { z-index: 2; position: relative; }
.service-ngo-context { line-height: 1.5; text-align: center; font-size: 18px; }
.service-ngo-context p { margin: 16px 0; line-height: 1.8; }
.service-ngo-context .title { margin-bottom: 30px; line-height: 1.6; font-size: 36px; font-weight: 700; }
.service-ngo-context .title + p { line-height: 1.6; font-size: 24px; }
.service-ngo-image { margin: 90px 0 160px; text-align: center; }
.service-ngo-image .img { display: inline-block; }
.service-ngo-image .img:last-child { -webkit-transform: translate(-60px, 100px); transform: translate(-60px, 100px); }

.brand-logo-container { margin: 80px -40px 0 -40px; padding: 0 20px; }
.brand-logo-lists{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -ms-flex-wrap: wrap; flex-wrap: wrap;
}
.brand-logo-list { margin: -1px 0 0 -1px; width: 25%; text-align: center; border: 1px solid #eeeeee; }
@media (max-width:1200px){
    .service-section--intro { font-size: 20px; }
    .service-section--intro p:first-child { font-size: 26px; }

    .img-banner-wrap { height: 100%; min-height: 380px; }
    .img-banner-back{ padding:50px 40px; }
    .img-banner-back h3{ font-size: 26px; }
    .img-banner-back p{ font-size: 20px; }

    .service-ngo-ban { font-size: 30px; }
    .service-ngo-context .title { font-size: 26px; }
    .service-ngo-context .title + p { font-size: 20px; }

    .service-ngo-image { margin-top: 60px; }
    .service-ngo-image .img:first-child { width: 65%; }
    .service-ngo-image .img:last-child { width: 30%; -webkit-transform: translate(-30%, 40%); transform: translate(-30%, 40%); }

    .brand-logo-container { margin: 80px 0 0; padding: 0; }
}
@media (max-width:1024px){
    .img-banner-wrap { min-height: 250px; }
    .img-banner-front{ padding:20px; }
    .img-banner-front h3{ font-size: 28px; }
    .img-banner-back{ padding:40px 30px; }
    .img-banner-back h3{ font-size: 24px; margin-bottom: 15px; padding-top: 15px; }
    .img-banner-back p{ font-size: 18px; }
}
@media (max-width:768px){
    .service-section { padding: 80px 0; }
    .service-section--intro { font-size: 16px; }
    .service-section--intro p:first-child { font-size: 20px; }
    .service-section .img-banner { margin-top: 45px; }

    .img-banner-front{ padding:20px; }
    .img-banner-front h3{ font-size: 24px; }
    .img-banner-back{ padding:40px 30px; }
    .img-banner-back h3{ font-size: 24px; margin-bottom: 15px; padding-top: 15px; }
    .img-banner-back p{ font-size: 18px; }

    .service-ngo-ban { margin: 45px 0; padding: 32px; height: 350px; font-size: 20px; background-size: cover; }
    .service-ngo-ban::before { width: 70%; }
    .service-ngo-image { margin-bottom: 90px; }
    .service-ngo-context { font-size: 16px; }
    .service-ngo-context .title { font-size: 20px; margin-bottom: 20px; }
    .service-ngo-context .title + p { font-size: 16px; }

    .brand-logo-container { margin: 45px 0 0; }
    .brand-logo-list { width: 50%; }
}
@media (max-width:576px){
    .img-banner-front h3{ font-size: 18px; }
    .img-banner-back h3{ font-size: 18px; }
    .img-banner-back p{ font-size: 14px; }
}
@media (max-width:500px){
    .service-ngo-ban { height: 250px; }
    .service-ngo-context br { display: none; }
}


/* fundraiser - intro */
.fundraiser-section--intro { padding: 0 0 100px; }
.fundraiser-intro{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    margin-top: 60px;
}
.fundraiser-intro .context { flex: 1 1; padding-left: 116px; line-height: 1.6; font-size: 18px; color: #555555; }
.fundraiser-intro .context p { margin: 14px 0; }

.fundraiser-section--ban { position: relative; padding: 286px 0 0; height: 650px; line-height: 1.5; font-size: 36px; color: #ffffff; font-weight: 700; background: url('/child/img/sub/fundraiser/fundraiser-section-ban-background.jpg') no-repeat center; }
.fundraiser-section--ban::before {
    content: ''; z-index: 1;
    position: absolute; top: 0; left: 50%;
    transform: translate(-50%,0);
    width: 1920px; height: 100%;
    background-image: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,0));
}
.fundraiser-section--ban p { z-index: 2; position: relative; }

.fundraiser-section--card { padding: 0 0 100px; }
.fundraiser-section--card .card-lists { z-index: 2; position: relative; margin-top: -100px; }
.card-lists{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -ms-flex-wrap: wrap; flex-wrap: wrap;
    margin: -10px;
}
.card-list { padding: 10px; width: 33.33333%; }
.card { overflow: hidden; position: relative; height: 100%; background: #ffffff; }
.card .front{
    padding: 30px;
    -webkit-transition: all ease-out .3s; transition: all ease-out .3s;
}
.card .back{
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    -webkit-transition: all ease-out .3s; transition: all ease-out .3s;
    /* -webkit-transform: translateX(-100px); transform: translateX(-100px); */
    opacity: 0;
}
.card .title { line-height: 1.5; font-size: 24px; font-weight: 700; }
.card .line { display: block; margin: 14px 0 26px; width: 30px; height: 4px; background: #0fb6cd; }
.card p { margin: 10px 0; font-size: 18px; color: #555555; letter-spacing: -0.05em; }

.fundraiser-section--campaign { padding: 100px 0 0; text-align: center; }
.campaign-lists{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -ms-flex-wrap: wrap; flex-wrap: wrap;
    margin: 45px -25px -25px;
}
.campaign-list { padding: 25px; width: 33.33333%; }
.campaign-list .img[data-aos=fade-down] { transform: translate3d(0,-30px,0); }
.campaign-list .title { margin: 36px 0 12px; line-height: 1; font-size: 24px; color: #0fb6cd; font-weight: 700; }
.campaign-list .title small { display: block; margin-top: 8px; font-size: 16px; color: #777777; font-weight: 400; }
.campaign-list p { font-size: 18px; }
@media(min-width:1201px){
    .card:hover .front{
        -webkit-transform: translateX(0); transform: translateX(0);
        opacity: 0;
    }
	.card:hover .back{
        -webkit-transform: translateX(0); transform: translateX(0);
        opacity: 1;
    }
}
@media(max-width:1200px){
    .fundraiser-intro .context { font-size: 17px; padding-left: 70px; }

    .fundraiser-section--ban { padding-top: 186px; height: 550px; font-size: 30px; background-size: cover; }

    .fundraiser-section--card .card-lists { margin-top: -80px; }
    .card-list { width: 50%; }
    .card .title { font-size: 20px; }
    .card p { font-size: 16px; }

    .campaign-list .title { font-size: 20px; }
    .campaign-list .title small { font-size: 14px; }
    .campaign-list p { font-size: 16px; }
}
@media(max-width:1024px){
    .fundraiser-section--ban { padding-top: 104px; height: 400px; }
}
@media(max-width:768px){
    .fundraiser-section--intro { padding: 0 0 80px; }
    .fundraiser-intro { -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-top: 55px; }
    .fundraiser-intro .img { max-width: 250px; }
    .fundraiser-intro .context { font-size: 16px; line-height: 1.7; padding: 30px 0 0; }

    .fundraiser-section--ban { font-size: 20px; padding-top: 54px; height: 200px; }

    .fundraiser-section--card { padding: 35px 0 50px; }
    .fundraiser-section--card .card-lists { margin-top: 0; }
    .card .title { font-size: 16px; }
    .card .line { margin: 18px 0 22px; width: 26px; height: 2px; }
    .card p { font-size: 14px; line-height: 1.7; }

    .campaign-lists { margin: 10px auto -10px; max-width: 290px; }
    .campaign-list { padding: 40px 0; width: 100%; }
    .campaign-list .title { font-size: 18px; margin: 16px 0 18px; }
    .campaign-list .title small { font-size: 13px; }
    .campaign-list img { max-width: 220px; }
    .campaign-list p { font-size: 14px; line-height: 1.7; }
}
@media(max-width:600px){
    .card-list { width: 100%; }
}


/* fundraiser - career */
.career-section--intro { padding-bottom: 100px; }
.career-section--stage:last-child .career-stage { padding-bottom: 0; }
.career-stage { padding: 75px 0; border-top: 1px solid #e6e6e6; }
.career-stage .title { line-height: 1; font-size: 24px; font-weight: 700; }
.career-stage .title b { display: block; margin-top: 20px; color: #0fb6cd; }
.career-stage .img { margin: 40px 0 70px; }
.career-list{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    margin: 30px 0; padding: 0 42px 0 58px;
}
.career-list:last-child { margin-bottom: 0; }
.career-list .title { width: 30%; line-height: 1.55; font-weight: 700; }
.career-list .context { flex: 1 1; line-height: 1.55; font-size: 18px; color: #555555; }
@media(max-width:1200px){
    .career-stage .title { font-size: 22px; }
    .career-stage .img { margin: 30px 0; }
    .career-list { padding: 0 42px; }
    .career-list .context { font-size: 16px; }
}
@media(max-width:768px){
    .career-section--intro { padding-bottom: 60px; }
    .career-stage { padding: 60px 0; }
    .career-stage .title { font-size: 18px; }
    .career-stage .title b { margin-top: 16px; }
    .career-stage .img { margin: 30px -15px; }
    .career-list { margin: 35px 0; }
    .career-list .context { font-size: 14px; line-height: 1.7; }
}
@media(max-width:600px){
    .career-list{
        -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
        padding: 0;
    }
    .career-list .title { margin-bottom: 10px; width: 100%; }
}


/* fundraiser - person */
.person-section { position: relative; padding: 100px 0; }
.person-section:first-child { padding-top: 0; }
.person-section:not(:last-child)::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: 100%; max-width: 1050px; height: 1px; background: #e6e6e6; }
.person-section:last-child { padding-bottom: 0; }
.person-section .headtitle-p { margin-bottom: 80px; }
.person-intro{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.person-intro .left { width: 50%; overflow: hidden; }
.person-intro .right { width: 50%; padding-left: 40px; }
.person-intro .title { display: inline-block; position: relative; line-height: 1.5; font-size: 36px; color: #0fb6cd; font-weight: 200; }
.person-intro .title::after { content: ''; position: absolute; top: 0; bottom: 0; left: 106%; margin: auto; width: 120px; height: 1px; background: #0fb6cd; }
.person-intro li{
    overflow: hidden;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    margin: 30px 0; font-size: 24px;
}
.person-intro li:first-child { margin-top: 0; }
.person-intro li:last-child { margin-bottom: 0; }
.person-intro .image { margin-right: 25px; text-align: center; }
.person-intro .image img { display: block; width: auto; height: 60px; }

.person-lists{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -ms-flex-wrap: wrap; flex-wrap: wrap;
    margin: -20px;
}
.person-list { padding: 25px 20px; width: 50%; }
.person-list img { display: block; width: 100%; height: auto; }
.person-list p { padding: 0 8px; line-height: 1.5; font-size: 18px; color: #555555; }
.person-list .title { margin: 30px 0 16px; padding: 0 8px; line-height: 1; font-size: 24px; }

.typographic-box-lists{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -ms-flex-wrap: wrap; flex-wrap: wrap;
    margin: 42px -50px -38px;
}
.typographic-box-list { padding: 38px 50px; width: 33.33333%; }
.typographic-box { padding-bottom: 40px; border-bottom: 1px solid #dddddd; }
.typographic-box p { margin: 30px 0 20px; line-height: 1.5; font-size: 18px;transform: translate3d(30px,0,0); }
.typographic-box .title { line-height: 1; font-size: 18px; font-weight: 700; transform: translate3d(15px,0,0); }
.typographic-box .title b { display: block; margin-bottom: 10px; font-size: 20px; }
.typographic-box .letter { display: block; line-height: 0.8; font-style: normal; text-align: right; font-size: 90px; font-weight: 700; color: #0fb6cd; }
@media(min-width:769px){
	.typographic-box-list:nth-child(3n-1) .typographic-box .letter { transition-delay: 100ms; }
    .typographic-box-list:nth-child(3n) .typographic-box .letter { transition-delay: 200ms; }
}
@media(min-width:501px){
    .typographic-box-list:nth-child(2n) .typographic-box .letter { transition-delay: 100ms; }
}
@media(max-width:1200px){
    .person-intro .title { font-size: 30px; }
    .person-intro .title::after { width: 100px; }
    .person-intro .image img { height: 50px; }
    .person-intro li { font-size: 20px; }

    .person-lists { margin: -20px -7px; }
    .person-list { padding: 25px 7px; }
    .person-list .title { font-size: 20px; }
    .person-list p { font-size: 16px; }

    .typographic-box-lists { margin: 42px -20px -38px; }
    .typographic-box-list { padding: 38px 20px; }
    .typographic-box .title { font-size: 16px; }
    .typographic-box p { font-size: 16px; }
    .typographic-box .letter { font-size: 70px; }
}
@media(max-width:1080px){
    .person-section:not(:last-child)::after { max-width: calc(100% - 30px); }
}
@media(max-width:768px){
    .person-section--main .img { margin: 0 -15px; }
    .person-section { padding: 60px 0; }
    .person-intro{
        -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
        -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    }
    .person-intro .title::after { content: none; }
    .person-intro .left { width: auto; }
    .person-intro .right { width: auto; padding: 35px 0 0; }
    .person-intro .title { font-size: 20px; text-align: center; }
    .person-intro .image { margin-right: 20px; }
    .person-intro .image img { height: 40px; }
    .person-intro li { font-size: 16px; margin: 22px 0; }

    .person-section .headtitle-p { margin-bottom: 45px; }
    .person-lists { margin: -35px 0; }
    .person-list { width: 100%; padding: 35px 0; }
    .person-list .title { font-size: 18px; margin: 24px 0 14px; padding: 0; }
    .person-list img { width: 100%; }
    .person-list p { font-size: 14px; padding: 0; line-height: 1.7; }

    .typographic-box-list { width: 50%; }
    .typographic-box .title { font-size: 15px; }
    .typographic-box p { font-size: 14px; line-height: 1.7; }
    .typographic-box .letter { font-size: 50px; }
}
@media(max-width:500px){
    .typographic-box-lists { margin: 30px 0 -30px; }
    .typographic-box-list { width: 100%; padding: 30px 0; }
}


/* fundraiser - recruit */
.recruit-intro{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
    line-height: 1.5; font-size: 24px; color: #5d5d5d; border-bottom: 1px solid #e6e6e6;
}
.recruit-intro .left { width: 50%; }
.recruit-intro .right { width: 50%; }
.recruit-intro .title { line-height: 1; font-size: 36px; font-weight: 200; color: #0fb6cd; }
.recruit-intro .line { display: block; margin: 10px 0; width: 1px; height: 60px; background: #0fb6cd; }
.recruit-intro .img { margin-top: 70px; font-size: 0; }

.recruit-section--process { padding: 100px 0 0; }
.recruit-section--process .footnote { margin-top: 48px; }
.recruit-section--process .bottom-button { margin-top: 80px;}
.recruit-section--process .bottom-button .button { transform: translate3d(0,30px,0); }
.recruit-process-lists{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -ms-flex-wrap: wrap; flex-wrap: wrap;
    margin: 55px -25px -25px;
}
.recruit-process-list { padding: 25px; width: 20%; text-align: center; font-size: 18px; font-weight: 700; }
.recruit-process-list:nth-child(1) .image::before { background-image: url('/child/img/sub/fundraiser/recruit/process-1.svg'); }
.recruit-process-list:nth-child(2) .image::before { background-image: url('/child/img/sub/fundraiser/recruit/process-2.svg'); }
.recruit-process-list:nth-child(3) .image::before { background-image: url('/child/img/sub/fundraiser/recruit/process-3.svg'); }
.recruit-process-list:nth-child(4) .image::before { background-image: url('/child/img/sub/fundraiser/recruit/process-4.svg'); }
.recruit-process-list:nth-child(5) .image::before { background-image: url('/child/img/sub/fundraiser/recruit/process-5.svg'); }
.recruit-process-list:last-child .image::after { content: none; }
.recruit-process .image { position: relative; margin-bottom: 16px; max-width: 170px; width: 100%; }
.recruit-process .image::before{
    content: ''; display: block; padding-top: 100%;
    background-color: #f6f6f6; background-repeat: no-repeat; background-position: center; background-size: auto 70px;
    border-radius: 50%;
}
.recruit-process .image::after { content: ''; position: absolute; top: 0; bottom: 0; left: 104%; margin: auto; width: 33px; height: 4px; background: url('/child/img/sub/fundraiser/recruit/proccess.svg') no-repeat; }

.footnote p { margin: 8px 0; }

.recruit-section--info{
    position: relative;
    padding-top: 100px;
    margin-top: 100px;
}
.recruit-section--info:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right:0;
    margin: auto;
    width: 100%;
    max-width: 1050px;
    height: 2px;
    background: #b3b3b3;
}
.recruit-process-details { margin-top: 54px; border-top: 1px solid #e6e6e6; }
.recruit-process-detail{
    overflow: hidden;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    padding: 36px 0; border-bottom: 1px solid #e6e6e6;
}
.recruit-process-detail .title{
    padding: 0 18px; width: 200px; line-height: 1.5; font-size: 18px; font-weight: 700;
    transform: translate3d(0,30px,0);
}
.recruit-process-detail .title b { padding-right: 10px; color: #0fb6cd; }
.recruit-process-detail .context{
    flex: 1 1; line-height: 1.8;
    transform: translate3d(0,50px,0);
}
.recruit-section--info .bottom-button { margin-top: 80px; text-align: center; }
.recruit-section--info .bottom-button .button { transform: translate3d(0,30px,0); }
@media(max-width:1200px){
    .recruit-intro .title { font-size: 30px; }
    .recruit-intro { font-size: 22px; }

    .recruit-process-list { font-size: 17px; }
    .recruit-process .image { margin: 0 auto 16px; max-width: 120px; }
    .recruit-process .image::before { background-size: auto 48px; }
    .recruit-process .image::after { left: 127%; }

    .footnote p { font-size: 14px; }

    .recruit-process-detail .title { font-size: 17px; }
    .recruit-process-detail .context { font-size: 15px; }
}
@media(max-width:1024px){
    .recruit-process-lists { margin: 35px -10px -10px; }
    .recruit-process-list { padding: 10px; }
    .recruit-process .image::after { left: calc(10vw - -38%); }
}
@media(max-width:768px){
    .recruit-intro .right { width: 45%; }
    .recruit-intro .title { font-size: 20px; }
    .recruit-intro .img { margin-top: 25px; }
    .recruit-intro { font-size: 16px; }

    .recruit-process-lists { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 30px auto -7px; max-width: 300px; }
    .recruit-process-list { font-size: 16px; padding: 20px 7px; width: 50%; }
    .recruit-process .image::after { content: none; }

    .footnote p { font-size: 13px; }

    .recruit-process-detail{
        -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
        padding: 26px 14px;
    }
    .recruit-process-detail .title { font-size: 16px; padding: 0 0 10px; }
    .recruit-process-detail .title b { padding-right: 6px; }
    .recruit-process-detail .context { font-size: 14px; line-height: 1.7; }
    .recruit-section--process .bottom-button { margin-top: 60px; }
}
@media(max-width:650px){
    .recruit-intro{
        -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
        -webkit-box-align: center; -ms-flex-align: center; align-items: center;
        line-height: 1.7; text-align: center;
    }
    .recruit-intro .left { flex: 1 1; width: 100%; }
    .recruit-intro .right { width: 200px; }
    .recruit-intro .title { margin-bottom: 14px; }
    .recruit-intro .line { display: none; }
}


/* inquiry - locataion */
.location-section--map .img { padding: 40px; text-align: center; border: 1px solid #dddddd; }
.location-section--map .img img { max-width: 580px; }
.locataion-box-lists{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -ms-flex-wrap: wrap; flex-wrap: wrap;
    margin: 70px -30px -30px;
}
.locataion-box-list { padding: 30px; width: 50%; }
.locataion-box { padding-top: 24px; border-top: 1px solid #e6e6e6; }
.locataion-box .title { margin-bottom: 16px; line-height: 1; font-size: 24px; color: #0fb6cd; font-weight: 700; }
.locataion-box .map { overflow: hidden; position: relative; margin-top: 20px; height: 300px; }
.locataion-box .map iframe { width: 100%; height: 100%; }
.locataion-box li{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    margin: 4px 0; font-size: 18px; color: #555555;
}
.locataion-box li span { overflow: hidden; display: block; }
.locataion-box li span:first-child { font-weight: 700; color: #222222; }
.locataion-box li span:last-child { flex: 1 1; margin-left: 16px; }
@media(min-width:1201px){
    .locataion-box .map::after{
        content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000;
        -webkit-transition: all ease .5s; transition: all ease .5s;
        opacity: 0;
    }
    .locataion-box .map .button{
        z-index: 2; position: absolute; top: 50%; left: 50%; margin-top: 3%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
        -webkit-transition: all ease .3s; transition: all ease .3s;
        opacity: 0;
    }
    .locataion-box .map:hover::after { opacity: .6; }
    .locataion-box .map:hover .button { margin-top: 0; opacity: 1; }
}
@media(max-width:1200px){
    .locataion-box-lists { margin: 70px -10px -30px; }
    .locataion-box-list { padding: 30px 10px; }
    .locataion-box .title { font-size: 20px; }
    .locataion-box li { font-size: 16px; }
    .locataion-box .map { height: auto; }
    .locataion-box .map img { width: 100%; }
    .locataion-box .map .button { padding: 10px; max-width: none; font-size: 14px; }
}
@media(max-width:768px){
    .location-section--map .img { padding: 20px; }
    .location-section--map .img img { width: 100%; }
    .locataion-box .title { font-size: 18px; }
    .locataion-box li { font-size: 14px; }
}
@media(max-width:600px){
    .locataion-box-lists { margin: 50px 0 -25px; }
    .locataion-box-list { padding: 25px 0; width: 100%; }
    .locataion-box { padding-top: 40px; }
}