@charset "utf-8";

#a01 {}
#a01 .title {text-align:center;font-size:22px}
#a01 .img {padding:50px 0}
#a01 .box {display:block;position:relative}
#a01 .box:after {display:block;visibility:hidden;clear:both;content:""}
#a01 .box .b_img {float:left;padding:100px 60px 0}
#a01 .box .b_text {float:left;font-size:18px;line-height:30px}
#a01 .box .table {margin:50px 0 0}
#a01 .box .table table {width:100%;border-top:3px solid #0066b1;font-size:17px;border-collapse:collapse;border-spacing:0 5px;border-left:1px solid #ddd}
#a01 .box .table th {width:18%;height:46px;background:#efedee;font-weight:400;border-right:1px solid #ddd;border-bottom:1px solid #ddd}
#a01 .box .table td {width:32%;padding:0 20px;border-right:1px solid #ddd;border-bottom:1px solid #ddd}



/*a04/
 /* rem ´ÜÀ§ ÆùÆ® +1px */
    html { font-size: 17px; }

    /* ÇÙ½É º¯¼ö */
    :root {
      --chart-width: 1140px;
      --root-height: 52px;
      --nodes-line-y: 260px;
      --branch-x-offset: 200px;
      --horiz-gap: 220px;
      --node-line-length: 60px;
      /* ´ëÇ¥ ¹Ú½º ÇÏ´Ü ¡æ ³ëµå¿ë °¡·Î¼± »çÀÌ Áß°£ ÁöÁ¡ */
      --branch-line-y: calc(
        var(--root-height)
        + (var(--nodes-line-y) - var(--root-height)) / 2
      );
    }

    /* ¸®¼Â & ±âº» */
    * { margin:0; padding:0; box-sizing:border-box; }
    body { font-family:"Noto Sans KR", sans-serif; }

    /* ÄÁÅ×ÀÌ³Ê */
    .org-chart {
      position: relative;
      width: var(--chart-width);
      margin: 50px auto;
      text-align: center;
    }

    /* ´ëÇ¥ ¹Ú½º */
    .org-chart .root {
      position: absolute;
      top: 0; left: 50%;
      transform: translateX(-50%);
      width: 180px;
      background: #00579e;
      color: #fff;
      padding: 12px 0;
      border-radius: 20px;
      font-size: 1.3125rem;
      font-weight: 700;
      text-align: center;
      z-index: 3;
      overflow: visible; /* ¼¼·Î¼± ¾Æ·¡·Î º¸¿©Áöµµ·Ï */
    }
    /* ´ëÇ¥ ¹Ú½º ¾Æ·¡ ¼¼·Î¼± */
    .org-chart .root::after {
      content: "";
      position: absolute;
      top: var(--root-height);
      left: 50%; transform: translateX(-50%);
      width: 1px;
      height: calc(var(--nodes-line-y) - var(--root-height));
      background: #ccc;
      z-index: 1;
    }

    /* ´ëÇ¥¡æ°æ¿µÁö¿ø °¡·Î¼± */
    .org-chart .branch-line {
      position: absolute;
      top: var(--branch-line-y);
      left: 50%;
      width: var(--branch-x-offset);
      height: 1px;
      background: #ccc;
      z-index: 1;
    }
    /* °æ¿µÁö¿ø ¹Ú½º */
    .org-chart .branch {
      position: absolute;
      top: calc(var(--branch-line-y) - 20px);
      left: calc(50% + var(--branch-x-offset));
      transform: translateX(-50%);
      width: 160px;
      background: #d9e8fb;
      color: #333;
      padding: 8px 0;
      border-radius: 20px;
      font-size: 1.0625rem;
      font-weight: 500;
      text-align: center;
      z-index: 3;
    }
    .org-chart .branch::after { display: none; }

    /* ÇÏ´Ü ³ëµå¿ë °¡·Î¼± */
    .org-chart .nodes-line {
      position: absolute;
      top: var(--nodes-line-y);
      left: var(--horiz-gap); right: var(--horiz-gap);
      height: 1px;
      background: #ccc;
      z-index: 1;
    }

    /* ÇÏ´Ü 3°³ ³ëµå */
    .org-chart .nodes {
      position: absolute;
      top: calc(var(--nodes-line-y) + var(--node-line-length));
      left: 0; right: 0;
      display: flex;
      justify-content: space-evenly;
      z-index: 2;
    }
    .org-chart .node {
      position: relative;
      width: 260px;
      background: #f2f2f2;
      border-radius: 4px;
      padding: 20px 0 0; /* header°¡ µ¤À¸¹Ç·Î À§ ¿©¹é¸¸ */
      text-align: center;
    }
    /* ³ëµå¿ë ¼¼·Î¼± */
    .org-chart .node::before {
      content: "";
      position: absolute;
      top: calc(-1 * var(--node-line-length));
      left: 50%; transform: translateX(-50%);
      width: 1px;
      height: var(--node-line-length);
      background: #ccc;
      z-index: 1;
    }

    /* header: Èò ¹è°æ ¹Ú½º */
    .org-chart .node .header {
      position: relative;
      background: #fff;
      z-index: 2;
      padding: 8px 0;
      margin: 0 16px 0;
      border-radius: 4px;
    }
    /* dot */
    .org-chart .node .dot {
      position: absolute;
      top: 0; left: 50%;
      transform: translate(-50%, -50%);
      width: 12px; height: 12px;
      border-radius: 50%;
      z-index: 3;
    }
    /* title */
    .org-chart .node .title {
      font-size: 1.1875rem;
      font-weight: 600;
      margin-bottom: 6px;
    }
    /* divider: header ¹Ù±ùÀ¸·Î 1px ³»¸² */
    .org-chart .node .divider {
      position: absolute;
      bottom: -1px;
      left: 10%; width: 80%; height: 3px;
    }
    /* content */
    .org-chart .node .content {
      padding: 12px 16px 16px;
    }
    .org-chart .node .content p {
      margin: 6px 0;
      color: #555;
      font-size: 1rem;
      line-height: 1.4;
    }

    /* ºÎ¼­º° »ö»ó ¸ÅÇÎ */
    .org-chart .node.dev .dot,
    .org-chart .node.dev .divider { background: #00579e; }
    .org-chart .node.design .dot,
    .org-chart .node.design .divider { background: #2a8cf8; }
    .org-chart .node.control .dot,
    .org-chart .node.control .divider { background: #43c6fd; }

	.org-chart {
  min-height: 580px; /* ¼ýÀÚ´Â ½ÇÁ¦ Á¶Á÷µµ ³ôÀÌ¿¡ µû¶ó Á¶Àý */
}



/*-------*/

/* company */
#page_company {position:relative;width:100%;margin:0;padding:0;font-size:13px}
#page_company:after {display:block;visibility:hidden;clear:both;content:""}

#page_company .text_box {position:relative;width:100%;margin:0;padding:20px;border:1px solid #ccc}
#page_company .text_box p {display:block;padding:0 0 20px;font-size:17px;text-align:center;word-break:keep-all}
#page_company .text_box p.text1 {font-size:25px}
#page_company .text_box p.text4 {position:relative;margin:0 auto;max-width:800px;line-height:35px;color:#555}

.designweb_img {position:relative;width:90%;height:auto;margin:40px auto;padding:0}
.designweb_img:after {display:block;visibility:hidden;clear:both;content:""}
.designweb_img .img_wrap {float:left;position:relative;width:25%;margin-bottom:10px;text-align:center}
.designweb_img .img_wrap .img {position:relative;width:70%;margin:0 auto;text-align:center}
.designweb_img .img_wrap .img:before {content:"";display:block;padding-top:100%}
.designweb_img .img_wrap .img span {font-size:1.6em}
.designweb_img .img_wrap .img div {position:absolute;top:0;left:0;right:0;bottom:0;border-radius:200px;box-shadow:1px 1px 3px #ccc}
.designweb_img .img_wrap .img1 {background:#FFD00D;padding-top:40%;opacity:1;color:#fff}
.designweb_img .img_wrap .img2 {background:#151343;padding-top:40%;opacity:1;color:#fff}
.designweb_img .img_wrap .img3 {background:#FF5555;padding-top:40%;opacity:1;color:#fff}
.designweb_img .img_wrap .img4 {background:#34862E;padding-top:35%;opacity:1;color:#fff}
.designweb_img .img_wrap .img1:hover {background:#ddd;color:#333}
.designweb_img .img_wrap .img2:hover {background:#ddd;color:#333}
.designweb_img .img_wrap .img3:hover {background:#ddd;color:#333}
.designweb_img .img_wrap .img4:hover {background:#ddd;color:#333}

#page_company .map_box {position:relative;width:100%;height:400px;margin:0;padding:0}
#page_company .map_box .box {position:relative;width:100%;height:400px;margin:0;padding:0}

/* business */
#business_wrap {background:url('../img/business_bg.jpg') center;background-size:cover;padding:0 0 60px}
#business_title {display:block;padding:40px 0;text-align:center;font-size:2em;font-weight:bold;color:#333}
#business_title .line {position:relative;width:40px;height:3px;background:#333;margin:10px auto 0}
#business {position:relative;width:96%;max-width:1300px;height:auto;margin:0 auto;padding:40px 0;background:#fff;box-shadow:0 0 5px #fff}
#business:after {display:block;visibility:hidden;clear:both;content:""}
#business .box {float:left;position:relative;width:50%;height:auto;margin:0;padding:0}
.visu_content3 {position:relative;width:86%;height:270px;margin:15px auto;padding:50px 6%;text-align:center;border:1px solid #ccc;background:#f2f2f2;box-shadow:3px 3px 0 #ddd}
.visu_content3 p.text1 {display:inline-block;text-align:center;padding-bottom:30px;margin-bottom:30px;border-bottom:1px  solid #ccc;width:70%;color:#FF3636;font-size:1.4em;font-weight:bold}
.visu_content3 p.text2 {display:block;text-align:center;font-size:1.2em;line-height:22px;font-weight:normal;word-break:keep-all}
.visu_content3 p.text3 {display:block;text-align:center;margin-bottom:35px;color:#FF3636;font-size:1.4em;font-weight:bold}
.visu_content3 p.text4 {display:block;color:#aaa;font-size:1.8em}
.visu_content3 p.text5 {display:block;text-align:center;margin-top:35px}
.visu_content3 p.text5 a {display:inline-block;padding:8px 30px;background:#6799FF;color:#fff;text-decoration:none;font-size:13px}
.visu_content3 p.text5 a:hover {background:#ccc;color:#333}

/* process */
#process_wrap {background:url('../img/process_bg.jpg') center;background-size:cover;padding:0 0 60px}
#process_title {display:block;padding:40px 0;text-align:center;font-size:2em;font-weight:bold;color:#333}
#process_title .line {position:relative;width:40px;height:3px;background:#333;margin:10px auto 0}
#process {position:relative;width:96%;max-width:1300px;height:auto;margin:0 auto;padding:40px 3%;background:#fff;box-shadow:0 0 5px #fff}
#process:after {display:block;visibility:hidden;clear:both;content:""}

#process_content1 {float:left;position:relative;width:70%;height:100%;margin:0;padding:0}
#making_process {position:relative;width:100%;height:auto;margin:0 0 20px;padding:0}
#making_process:after {display:block;visibility:hidden;clear:both;content:""}
#making_process div.head1 {float:left;width:25%;min-width:190px;padding:10px;display:inline-block;font-size:1.25em;font-weight:bolder;color:#333;border-radius:8px;border-bottom:1px solid #CC3D3D}
#making_process div.content1 {float:left;padding:10px;margin-left:20px;display:block;background:#fff}
#making_process div.head1 span.title {font-size:0.75em;color:#CC3D3D;display:block}
#making_process div.head1 span.con {display:block;padding-left:30px}
#process_content2 {float:left;position:relative;width:30%;height:100%;margin:0;padding:0;text-align:center}
#process_content2 .title1 {display:inline-block;text-align:center;width:60%;margin-bottom:50px;padding:150px 0 20px;border-bottom:2px solid #bbb;font-size:2em;font-weight:bold;font-family:arial}
#process_content2 .title2 {line-height:22px;font-size:1.1em}
i.fa-arrow-down {font-size:1.8em}
span.process_arrow1 {color:#333}
span.process_arrow2 {color:#666}
span.process_arrow3 {color:#999}
span.process_arrow4 {color:#bbb}
span.process_arrow5 {color:#eee}



@media (max-width:1000px) {

.designweb_img .img_wrap {width:50%}
.designweb_img .img_wrap .img span {font-size:1em}

}

@media (max-width:900px) {

#process_content2 {display:none}
#process_content1 {width:100%}
#making_process div.head1 {float:none}
#making_process div.content1 {float:none}

#business .box {width:100%}

}

@media (max-width:700px) {



}


@media (max-width:600px) {

.designweb_img .img_wrap .img {width:90%}

.visu_content3 {position:relative;width:93%;height:200px;margin:15px auto;padding:30px 6%;text-align:center;border:1px solid #ccc}
.visu_content3 p.text1 {display:inline-block;text-align:center;padding-bottom:20px;margin-bottom:20px;border-bottom:1px  solid #ccc;width:70%;color:#FF3636;font-size:1.2em;font-weight:bold}
.visu_content3 p.text2 {display:block;text-align:center;font-size:1em;line-height:22px;font-weight:normal}
.visu_content3 p.text3 {display:block;text-align:center;margin-bottom:35px;color:#FF3636;font-size:1.2em;font-weight:bold}
.visu_content3 p.text4 {display:block;color:#aaa;font-size:1.8em}
.visu_content3 p.text5 {display:block;text-align:center;margin-top:35px}
.visu_content3 p.text5 a {display:inline-block;padding:8px 30px;background:#6799FF;color:#fff;text-decoration:none;font-size:13px}
.visu_content3 p.text5 a:hover {background:#ccc;color:#333}

}