/* common */
.subpage {overflow: hidden;}
.center {text-align:center;}
.subpage > section { padding:90px 0; position: relative; background-color: #fff; }
.subpage > section:nth-child(even) {background-color: #f7f7f7;  }
.sub_inner { max-width: 1460px; width: 100%; margin:0 auto; position: relative; padding:0 60px; }
.sub_title h2 {font-size:44px; font-weight: 500; letter-spacing: -1.1px; line-height: 1.2; color:#000; text-transform: uppercase;}
.sub_title h2 span {font-weight: 300; }
.sub_title h2 b {font-weight: 700;}
.sub_title p {font-size:16px; font-weight: 300; letter-spacing: -.4px; line-height: 1.2; color:#333; margin-top: 10px; }
.tit_30 {font-size:30px; font-weight: 500; letter-spacing: -.75px; line-height: 1.2; color:#000;}

.sub_p { font-size: 16px; font-weight:300; color:#000; line-height: 33px; word-break: keep-all; }
.sub_p17 { font-size: 17px; font-weight:300; color:#000; line-height: 30px; word-break: keep-all; }
.sub_p14 {font-size: 14px; font-weight:300; color:#000; line-height: 26px; word-break: keep-all;}


.scroll_btns {display: flex ; margin-bottom: 90px; text-align: center; }
.scroll_btns li {flex:1; margin-right: 20px;}
.scroll_btns li:last-child {margin-right: 0; }
.scroll_btns a {display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 500; color:#414141; transition: border-color .3s; padding:0 5px 10px 5px;
border-bottom: 3px solid #dbdbdb; line-height: 1.6; height: 100%;}
.scroll_btns a:hover,
.scroll_btns a.active {border-color: #798998; }


/*Content CSS*/
/* about */
/* #about {padding-bottom: 0;} */
#about .flex {display: flex; justify-content: space-between; align-items: center; }
#about .img {flex-shrink: 0; margin-right: 90px;}
#about .txt { width: 100%;}
#about .txt .top {display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; }
#about .txt .title h3 {display: flex; align-items: center; margin-top: 25px; }
#about .txt .title h3 span {display: block; width: 1px; height: 30px; background: #ccc; margin:0 12px; position: relative; top:2px;}
#about .txt .info {background-color: #efedeb; padding: 30px 40px; display: flex; flex-wrap: wrap; width: 100%; max-width: 400px; }
#about .txt .info li {font-size: 15px; font-weight: 300; color:rgba(0, 0, 0, 0.8); }
#about .txt .info li:first-child {width: 100%; }
#about .txt .info li:nth-child(n+2) {margin-top: 10px;}
#about .txt .info li:nth-child(2)::after {content: ''; display: inline-block; width: 1px; height: 17px; background: #ccc; margin:0 15px; position: relative; top:3px;}
#about .txt .cont {width: 100%; border-top:1px solid #ddd;  border-bottom:1px solid #ddd; position: relative; padding: 40px 0;display: flex; margin-top: 30px;}
#about .txt .cont::before {content: ''; display: block; width: 325px; height: 1px; background: #000; position: absolute; left:0; top:-1px; }
#about .txt .cont > ul {width: 50%; }
#about .txt .cont > ul:first-child {margin-right: 50px; padding-right: 50px; border-right:1px solid #ddd; }
#about .txt .cont li {position: relative; padding-left: 15px; display: flex; font-size: 15px; font-weight: 300; color:#333; line-height: 1.5;}
#about .txt .cont li:nth-child(n+2) {margin-top: 25px;}
#about .txt .cont li::before {content: ''; display: block; width: 3px; height: 3px; background: #000; position: absolute; left: 0; top:11px; }
#about .txt .cont li b {font-size: 18px; color:#000; letter-spacing: -.45px; flex-shrink: 0; margin-right: 20px; font-weight: 700;  position: relative; top:-2px;}

/* about2 */
#about2 {background: #efedeb; }
#about2 .list {display: flex; flex-wrap: wrap;}
#about2 .list > li {width: 50%; display: flex; align-items:center; }
#about2 .list > li:nth-child(n+3) {margin-top: 65px;}
#about2 .list i {display: flex; align-items:center; justify-content: center; width: 125px; height: 125px; border-radius: 50%; background:url("../img/ab_a2_icon_bg.png") 50%/cover no-repeat; flex-shrink: 0; margin-right: 35px;}
#about2 .list i img {transition: transform .5s; }
#about2 .list > li:hover i img {transform: rotateY(180deg);}
#about2 .list .txt {width: 100%; }
#about2 .list .txt h3 { font-weight: 700; color:#506171;}
#about2 .list .txt p {margin-top: 15px; }

/* organizationchart */
#organizationchart .sub_title {margin-bottom: 30px;}

/* process */
#process article > p {margin:20px 0 50px;}
#process .box_wrap {width: 100%; background: #fff;}
#process .box {display: flex; border-bottom: 1px solid #ddd; display: flex;  align-items: center;}
#process .box:last-child {border-bottom: 0;}
#process .box .icon {width: 140px; flex-shrink: 0; border-right: 1px solid #ddd; display: flex ;align-items: center ;justify-content: center;height: 135px;}
#process .box .icon img {transition: transform .5s;}
#process .box:hover .icon img {transform: rotateY(180deg);}
#process .box .cont {width: 100%; display: flex; align-items: center; padding:0 60px;}
#process .box .title {display: flex; align-items: center; flex-shrink: 0; margin-right: 50px; }
#process .box .title i {display: flex; align-items: center; justify-content: center; width: 31px; height: 31px; background-color: #000; border-radius: 50%;
font-size: 14px; font-weight: 800; color:#fff; font-style: normal; font-family: 'Orbitron', sans-serif; margin-right: 15px; flex-shrink: 0;}
#process .box .title h3 {font-size: 20px; font-weight: 700; color:#000; letter-spacing: -.5px; min-width: 143px;}

/* client */
#client {text-align: center;}
#client .pa_list {display: flex; flex-wrap:wrap; margin-top: 50px; position: relative; }
#client .pa_list > li {width: calc(20% - 16px); margin-right: 20px; display: flex; align-items: center; justify-content: center;}
@media screen and (min-width: 1025px) {
    #client .pa_list > li:nth-child(5n) {margin-right: 0; }
    #client .pa_list > li:nth-child(n+6) {margin-top:20px; }
}

/* ci */
#ci {text-align: center; }
#ci .box_wrap {background: #fff; padding: 85px 55px; margin-top: 50px; display: flex; justify-content: space-between; text-align: left; }
#ci .box_wrap > div {width: calc(50% - 55px);}
@media screen and (min-width: 1025px) {
    #ci .box_wrap > div:nth-child(2) {display: flex; flex-direction: column;}
}
#ci .box + .box {margin-top: 60px;}
#ci .box h4 {font-size: 16px; font-weight: 700; color:#000;width: 100%; max-width: 257px; border-bottom: 3px solid #cbcbcb; padding-bottom: 5px; text-align: left;
font-family: 'Karla', sans-serif; margin-bottom: 50px; text-transform: uppercase; }
#ci .box .sub_p14 {color:#000; }
#ci .box .color {display: flex; margin-top: 20px; }
#ci .box .color li:nth-child(n+2) {margin-left: 10px; }
#ci .box .color i {display: block; width: 10px;height: 10px; border-radius: 50%; }
/* #ci .box > div + div {margin-top: 60px;} */
#ci .box .img_wrap .img + .img {margin-top: 1px;}
#ci .box.flex {display: flex; justify-content: space-between; align-items: flex-end; }
#ci .box.flex > div:nth-child(1) {margin-right: 15px;}


/* location */
#location {padding-bottom: 0; }
#location .flex {display: flex; align-items:flex-start; margin-bottom: -50px;}
#location .flex > div {width: 50%; display: flex; padding: 90px 0;}
#location .flex > div > div {width: 100%; max-width: 680px;}
#location .flex .left {justify-content: flex-end; }
#location .flex .right {background-color: #506171; position: relative; z-index: 2; }
@media screen and (min-width:1461px) {
#location .flex .left > div {padding-right: 100px; }
#location .flex .right > div { padding-left: 100px;}
}
@media screen and (min-width: 1025px) {
    #location .flex .right {padding: 90px 0 120px;}
    #location .flex .left .title p {margin-left: 30px; }
}

#location .flex .title {display: flex; align-items: flex-end; width: 100%; justify-content: space-between; flex-wrap: wrap;}
#location .flex .left .title {justify-content: flex-start; }
#location .flex .left ul {border-top: 1px solid #ddd; margin-top:50px; text-align: left ;}
#location .flex .left ul li {display: flex; padding: 17px 0; border-bottom: 1px solid #ddd; }
#location .flex .left ul li i {margin-right: 20px; font-size: 28px; position: relative; top:2px;}

#location .flex .right .title h2 {color:#fff;}
#location .flex .right .title p {font-size: 14px; font-weight: 300; color:#fff; line-height: 1.88; position: relative; top:-5px; }
#location .flex .right .title p i {margin-right: 10px; }
#location .flex .right .info {width: 100%; display: flex; margin-top: 40px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,.2);}
#location .flex .right .info ul {width: 50%; }
#location .flex .right .info ul:first-child {border-right: 1px solid rgba(255,255,255,.2); margin-right: 50px; padding-right: 50px ; white-space: nowrap;}
#location .flex .right .info li {font-size: 14px; font-weight: 300; color:#fff; letter-spacing: -.35px; line-height: 1.65;}
#location .flex .right .info li:nth-child(n+2) {margin-top: 15px; }
#location .flex .right .info li i {margin-right: 15px;}

#location .map_wr {position: relative; z-index: 1; }
#location .map_wr .root_daum_roughmap .wrap_map {height: 500px;}




@media screen and (max-width: 1460px) {
    /* common */
    .sub_inner {padding:0 50px;}

    /* content */
    #about .img {margin-right: 50px;}
    #about .txt .title {margin: 0 30px 30px 0;}
    #about .txt .cont {padding: 30px 0;}
    #about .txt .cont > ul:first-child {margin-right: 30px; padding-right: 30px;}
    #about2 br {display: none;}
    #about2 .list > li {padding-right: 20px;}

    /* process */
    #process .box .cont {padding:  0 30px; display: block;}
    #process .box .title  {margin: 0 0 10px;}

    /* ci */
    #ci br {display: none;}
    #ci .box_wrap {padding: 50px 40px;}
    #ci .box_wrap > div {width: calc(50% - 20px);}

    /* location */
    #location .flex > div > div {padding:0 50px; }
    #location .flex .left {justify-content: flex-start; }
    @media screen and (min-width: 1025px) {
        #location .flex .right .info ul {width: 40%; }
        #location .flex .right .info ul:first-child { width: 60%;}
    }
    #location .flex .right .info ul:first-child {margin-right: 20px; padding-right: 20px ;}
    #location .flex .right .title p {margin:5px; top:0;}


}

@media screen and (max-width: 1024px) {
    /* common */
    .subpage > section {padding:60px 0; }
    .sub_inner { padding: 0 30px; }
    .sub_title h2 {font-size: 35px;  }
    .sub_title p, .sub_p { font-size: 15px; }
    .sub_p {line-height: 1.65;}
    .tit_30 {font-size: 24px;}
    .sub_p17 { font-size: 16px; line-height: 1.65; }
    .sub_p14 {font-size: 13px; line-height:1.65; }

    .scroll_btns a {font-size: 14px; letter-spacing: -.75px;}
    .scroll_btns li {margin-right: 10px;}


    /* content */
    #about .flex {display: block; position: relative;}
    #about .img {margin: 0 0 40px; width: 300px;}
    #about .txt .title {margin:0 0 30px;}
    #about .txt .top {position: absolute; left:340px; top:20px; display: block; }
    #about .txt .title h3 {flex-wrap:wrap; line-height: 1.6; margin-top: 15px;}
    #about .txt .info {padding: 20px;}
    #about .txt .info li:nth-child(1) {width: 100%;}

    #about2 .list > li {padding: 0; width: 100%;}
    #about2 .list > li:nth-child(n+2) {margin-top: 30px;}

    /* process */
    #process .box .icon {width: 100px; height: 100px; border-right: 0;}
    #process .box .cont {padding: 20px; border-left: 1px solid #ddd;}
    #process .box .title i {width: 25px; height: 25px; font-size: 12px; margin-right: 10px;}
    #process .box .title h3 {font-size: 17px;}

    /* client */
    #client .pa_list {margin-top: 30px;}
    #client .pa_list > li {width: calc(25% - 15px); margin-right: 20px; }
    @media screen and (min-width: 641px) {
        #client .pa_list > li:nth-child(4n) {margin-right: 0; }
        #client .pa_list > li:nth-child(n+5) {margin-top:50px; }
    }

    /* ci */
    #ci .box_wrap {display: block; text-align: center; margin-top: 30px; }
    #ci .box_wrap > div {width: 100%;}
    #ci .box + .box {margin-top: 70px;}
    #ci .box_wrap > div + div {margin-top: 70px;}
    #ci .box h4 {margin:0 auto 30px; text-align: center; font-size: 18px;}
    #ci .box .color {width: 100%; max-width: 560px; margin:20px auto 0;}
    #ci .box.flex {justify-content: center;}

    /* location */
    #location {text-align: center;}
    #location .flex {display: block; text-align: center; margin:0;}
    #location .flex > div {width: 100%; display: block; padding: 50px 0;}
    #location .flex > div > div {max-width: 100%; padding:0 30px;}
    #location .flex .left {padding-top: 0;}
    #location .flex .left ul { max-width: 640px; margin:30px auto 0;}
    #location .flex .left ul li i {font-size: 20px; margin-right: 10px;}
    #location .flex .title {display: block;}
    #location .flex  .title p {font-size: 13px; margin-top: 10px;}
    #location .flex .right .title p {top:0; font-size: 13px; margin-top: 10px;}
    #location .flex .right .info {margin:30px auto 0; padding-top: 30px; text-align: left; max-width: 640px; }
    #location .flex .right .info li {font-size: 13px;}
    #location .map_wr .root_daum_roughmap .wrap_map {height: 300px;}


}

@media screen and (max-width: 640px) {
    /* common*/
    .subpage > section {padding:50px 0; }
    .sub_inner {padding: 0 20px; }
    .sub_title h2 {font-size: 30px;  }
    .sub_title p, .sub_p { font-size: 13px; margin-top: 5px;}
    .tit_30 {font-size: 20px;}
    .sub_p17 { font-size: 14px;}
    .sub_p14 {font-size: 12px; }

    .scroll_btns {flex-wrap: wrap; justify-content:center;margin-bottom: 50px;}
    .scroll_btns li {flex:inherit; width:calc(33.3% - 5px); margin-right: 7.5px;}
    .scroll_btns li:nth-child(3n) {margin-right: 0;}
    .scroll_btns li:nth-child(n+4) {margin-top: 15px;}
    .scroll_btns a {border-bottom-width: 2px; font-size: 13px; padding: 0 0 8px;}
    .scroll_btns li.client {display: none;}

    /* content */
    #about .flex {text-align: center;}
    #about .img {width: 100%; margin:0 auto 30px;}
    #about .txt .top {position: static;}
    #about .txt .title h3 {justify-content: center;}
    #about .txt .info {width: 100%; max-width: 100%; justify-content: center;}
    #about .txt .cont {padding: 20px 0; display: block; }
    #about .txt .cont::before {width: 120px;}
    #about .txt .cont > ul {width: 100%; }
    #about .txt .cont > ul:first-child {border:0; margin-bottom: 15px;}
    #about .txt .cont li:nth-child(n+2) {margin-top: 15px}
    #about .txt .cont li {font-size: 13px; padding-left: 10px;}
    #about .txt .cont li::before {top:7px;}
    #about .txt .cont li b {font-size: 15px; margin-right: 10px; top:-1px;}

    #about2 .list i {width: 80px; height: 80px; padding:20px; margin-right: 20px;}
    #about2 .list i img {max-height: 100%;}
    #about2 .list .txt p {margin-top: 5px;}

    /* process */
    #process {text-align: center; }
    #process article > p {margin:20px 0 30px;}
    #process .box {text-align: left ;}
    #process .box .icon {height: auto; width: 80px;}

    /* client */
    #client {display: none;}
    #client .pa_list > li {width: calc(33.3% - 10px); margin-right: 15px; }
    @media screen and (min-width: 481px) {
        #client .pa_list > li:nth-child(3n) {margin-right: 0;}
        #client .pa_list > li:nth-child(n+4) {margin-top: 15px; }
    }

    /* ci */
    #ci {border-top: 1px solid #ddd;}
    #ci .box_wrap {padding: 30px 20px;}
    #ci .box + .box {margin-top: 60px;}
    #ci .box_wrap > div + div {margin-top: 60px;}
    #ci .box h4 {font-size: 16px; border-bottom-width: 2px; max-width: 200px; margin:0 auto 20px;}

    /* location */
    #location .flex > div {padding: 40px 0;}
    #location .flex > div > div {padding:0 20px;}
    #location .flex .right .title p i {margin-right: 5px;}
    #location .flex .right .info {display: block; text-align: center;}
    #location .flex .right .info ul {width: 100%;}
    #location .flex .right .info ul:first-child {border:0; margin-right: 0; padding-right: 0; margin-bottom: 10px;}
    #location .flex .right .info li:nth-child(n+2) {margin-top: 10px;}
    #location .flex .right .info li i {margin-right:8px;}

    #location .map_wr .root_daum_roughmap .wrap_map {height: 250px;}



}

@media screen and (max-width: 480px) {
    /* common */

    /* content */
    #about .txt .info li {width: 100%;}
    #about .txt .info li:nth-child(2)::after {display: none;}

    #client .pa_list > li {width: calc(50% - 5px); margin-right: 10px; }
    #client .pa_list > li:nth-child(2n) {margin-right: 0;}
    #client .pa_list > li:nth-child(n+3) {margin-top: 10px; }



}